Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Moderne Web Technologieën - KHLim

Moderne Web Technologieën - KHLim

Presentatie les 20/04/2012 aan de PHL/KHLim studenten grafische vormgeving.

Inventis Web Architects

April 20, 2012
Tweet

More Decks by Inventis Web Architects

Other Decks in Technology

Transcript

  1. Moderne Web
    Technologieën
    Tom Claus & Stijn Janssen

    View full-size slide

  2. Stijn Janssen
    @stijnj

    View full-size slide

  3. Tom Claus
    @tomclaus

    View full-size slide

  4. • HTML5 Semantiek en Markup
    • CSS3
    • Offline opslag
    • Realtime communicatie
    • Javascript API’s
    • Multimedia
    Moderne Web
    Technologieën

    View full-size slide

  5. • HTML5 Semantiek en Markup
    • CSS3
    • Offline opslag
    • Realtime communicatie
    • Javascript API’s
    • Multimedia
    Moderne Web
    Technologieën

    View full-size slide

  6. HTML5
    CSS3
    Javascript
    SVG
    @font-face
    XML

    View full-size slide

  7. Living Standard
    specificatie
    geen finale versie
    snelle implementatie
    -webkit
    -moz

    View full-size slide

  8. Nieuwe elementen
    section
    article
    time
    header
    footer
    nav

    View full-size slide

  9. forms
    required
    email
    date
    number
    tel
    search
    color
    range

    View full-size slide

  10. forms
    required
    email
    datae
    number
    tel
    search
    color
    range

    View full-size slide

  11. forms
    required
    email
    date
    number
    tel
    search
    color
    range

    View full-size slide

  12. forms
    required
    email
    date
    number
    tel
    search
    color
    range

    View full-size slide

  13. forms
    required
    email
    date
    number
    tel
    search
    color
    range

    View full-size slide

  14. forms
    required
    email
    date
    number
    tel
    search
    color
    range

    View full-size slide

  15. forms
    required
    email
    date
    number
    tel
    search
    color
    range

    View full-size slide

  16. forms
    required
    email
    date
    number
    tel
    search
    color
    range

    View full-size slide

  17. Border-Radius

    View full-size slide

  18. Gradients
    http://colorzilla.com/gradient-editor/

    View full-size slide

  19. Media Queries

    View full-size slide

  20. Media Queries
    http://mediaqueri.es

    View full-size slide

  21. Cross Browser?
    http://caniuse.com

    View full-size slide

  22. Cross Browser?
    http://caniuse.com
    http://selectivizr.com

    View full-size slide

  23. Cross Browser?
    http://caniuse.com
    http://selectivizr.com
    Respond.js

    View full-size slide

  24. Een goede plugin?
    • Open source? GitHub?
    • Veel updates?
    • Bugs?
    • Google: “[plugin] doensn’t work”

    View full-size slide

  25. Een goede plugin?
    • Open source? GitHub?
    • Veel updates?
    • Bugs?
    • Google: “[plugin] doensn’t work”

    View full-size slide

  26. Een goede plugin?
    • Open source? GitHub?
    • Veel updates?
    • Bugs?
    • Google: “[plugin] doensn’t work”

    View full-size slide

  27. Een goede plugin?
    • Open source? GitHub?
    • Veel updates?
    • Bugs?
    • Google: “[plugin] doensn’t work”

    View full-size slide

  28. Onze favorieten!
    • html5validator
    • prettyPhoto
    • cycle

    View full-size slide

  29. Onze favorieten!
    • html5validator
    • prettyPhoto
    • cycle

    View full-size slide

  30. Onze favorieten!
    • html5validator
    • prettyPhoto
    • cycle

    View full-size slide

  31. Geolocate API

    View full-size slide

  32. Accelerometer

    View full-size slide

  33. http://pukkelpop.be

    View full-size slide

  34. http://inventis.be

    View full-size slide

  35. Voordelen?
    • Meer mogelijkheden in de browser
    • Sneller laadtijden
    • Scherpere layout

    View full-size slide

  36. Nadelen?
    • Cross browser krijgen
    • Meer CSS-code / minder overzicht

    View full-size slide

  37. Bedankt!
    • Tom Claus
    [email protected]
    • @tomclaus
    • Stijn Janssen
    [email protected]
    • @stijnj

    View full-size slide