HTML5 & CSS3 voor slimme mensen zoals u

944 views

Published on

Laeken University presentatie van 16/12/2010 over HTML5 & CSS3 voor een gemengd technisch/niet-technisch publiek.

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
944
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • HTML5 & CSS3 voor slimme mensen zoals u

    1. 1. <title>HTML 5 & Voor slimme mensen zoals U. CSS3 </title>
    2. 2. 5 jaar geledenFlash introsFlash was cool2007 - iPhoneFlash niet meer coolWaarom kon Flash grootworden?Meer dan 5 jaar lang geenbeweging in HTML - stagnatieWaarom?
    3. 3. 5 jaar geledenFlash introsFlash was cool2007 - iPhoneFlash niet meer coolWaarom kon Flash grootworden?Meer dan 5 jaar lang geenbeweging in HTML - stagnatieWaarom? INTRO Click to skip
    4. 4. Maar eerst watgeschiedenis van hetinternet, en destandards-beweging
    5. 5. IN DEN BEGINNE Een korte geschiedenis van standards op het webMaar eerst watgeschiedenis van hetinternet, en destandards-beweging Bron: Moma Propaganda (http://www.momapropaganda.com.br/)
    6. 6. Wie vond het internet Antwoorden op een gele postkaart
    7. 7. Wie vond het internet Antwoorden op een gele postkaart
    8. 8. Wie vond het internet Antwoorden op een gele postkaart Sir Tim Berners-Lee
    9. 9. CERN: zeer slimmejongensInternet slechts eenvoetnoot in hun rijkegeschiedenisInternet groeit snel,10.000.000 gebruikers in1994 - TBL verlaat CERN
    10. 10. CERN: zeer slimmejongensInternet slechts eenvoetnoot in hun rijkegeschiedenisInternet groeit snel,10.000.000 gebruikers in1994 - TBL verlaat CERN
    11. 11. CERN: zeer slimmejongensInternet slechts eenvoetnoot in hun rijkegeschiedenisInternet groeit snel,10.000.000 gebruikers in1994 - TBL verlaat CERN
    12. 12. Richt in MIT het W3C opWaakt over HTML en het webBevorderdt standardisatie &openheidMet success: 2000 wordtHTML een ISO standaard, zoalsde meter of de kilogram Ze komen echter op een dwaalspoor: XML en XHTML 2.0
    13. 13. Richt in MIT het W3C opWaakt over HTML en het webBevorderdt standardisatie &openheidMet success: 2000 wordtHTML een ISO standaard, zoalsde meter of de kilogram W3C World Wide Web Consortium Ze komen echter op een dwaalspoor: XML en XHTML 2.0 Opgericht in 1994
    14. 14. Verliezen touch met derealiteit, op zoek naartheoretisch purestandaardWas een grotemislukking - stagnatievoor meer dan 5 jaar Text
    15. 15. W3CXHTML 2.0 Verliezen touch met de Webdesigners realiteit, op zoek naar theoretisch pure standaard Was een grote mislukking - stagnatie voor meer dan 5 jaar Text
    16. 16. Voor meer dan 5 jaarwas dit de “height ofsophistication” op hetweb.IE had de browser warsgewonnen en stagneerdemooi mee met het W3C. Maar toch groeide er wat. Desondanks de primitieve technologieën en crap- browsers bouwden er meer en meer mensen web-applicaties.
    17. 17. Voor meer dan 5 jaarwas dit de “height ofsophistication” op hetweb.IE had de browser warsgewonnen en stagneerdemooi mee met het W3C. XHTML 1 + CSS 2.1 Content + Presentatie Maar toch groeide er wat. Desondanks de primitieve technologieën en crap- browsers bouwden er meer en meer mensen web-applicaties. 2001-2006
    18. 18. Een splintergroep binnen Focusten zich op Webde W3C zag dit als een Forms en Web Appspositieve evolutie en woudit verder stimuleren. Stonden los van de W3C en implementeerdenVonden geen gehoor en unilateraal deze upgradesrichtten dus hun eigen in hun eigen browserswerkgroep op. In 2006 echter had zelfs het W3C door dat XHTML2 doodgeborden was - ze namen het werk van de WHATWG op in wat hun volgende standaard zou worden: HTML5
    19. 19. Een splintergroep binnen Focusten zich op Webde W3C zag dit als een Forms en Web Appspositieve evolutie en woudit verder stimuleren. Stonden los van de W3C en implementeerdenVonden geen gehoor en unilateraal deze upgradesrichtten dus hun eigen in hun eigen browserswerkgroep op. WHAT WG Web Hypertext Application Technology Working Group In 2006 echter had zelfs het W3C door dat XHTML2 doodgeborden was - ze namen het werk van de WHATWG op in wat hun volgende standaard zou worden: HTML5 2004-2007
    20. 20. Een splintergroep binnen Focusten zich op Webde W3C zag dit als een Forms en Web Appspositieve evolutie en woudit verder stimuleren. Stonden los van de W3C en implementeerdenVonden geen gehoor en unilateraal deze upgradesrichtten dus hun eigen in hun eigen browserswerkgroep op. WHAT WG Web Hypertext Application Technology Working Group In 2006 echter had zelfs het W3C door dat XHTML2 doodgeborden was - ze namen het werk van de WHATWG op in wat hun volgende standaard zou worden: HTML5 2004-2007
    21. 21. En dus is al het werk van deWHATWG opgenomen in de nieuweHTML5 standaardDeze is nog niet af, maar heeft algoede browser support, wat hetenige is dat telt.
    22. 22. W3CWorld Wide Web Consortium En dus is al het werk van de WHATWG opgenomen in de nieuwe HTML5 standaard Deze is nog niet af, maar heeft al goede browser support, wat het enige is dat telt. 2007-Vandaag
    23. 23. En dus zijn we vandaaghier beland.HTML evolueert weer, enwordt weer een mediumvoor creatieve expressiemet veel nieuwemogelijkheden.Ik ga proberen om julliede basis hier vanvanmiddag bij te brengen,want het is echt nietmoeilijk.
    24. 24. En dus zijn we vandaag hier beland. HTML evolueert weer, en wordt weer een medium voor creatieve expressie met veel nieuwe mogelijkheden.HTML5 + CSS 3 Content + Presentatie Ik ga proberen om jullie de basis hier van vanmiddag bij te brengen, want het is echt niet moeilijk. Vandaag-?
    25. 25. Om te beginnen moet ik één belangrijk concept uitleggen. CONTENT Elke website is idealiter opgebouwd uit 3 discrete lagen. De eerste laag is de meest toegankelijke, en op deze zal jullie proberen aanleren. HTMLSTIJL CSS FUNCTIE Javascript Opbouw van een website
    26. 26. De Content-Layer:HTML </title>
    27. 27. DE BASICS Tags, nesting, doctypes, oh my! Even doorbijten
    28. 28. EEN HTML PAGINADoorgelicht! <!doctype
html> <html>Doctype: bepaald wat soort <head>document we bekijken. <title>Een
titel</title> </head>Head: bevat meta- en stijl- <body>informatie over de pagina. ...
en
hier
kan
alles
 gebeuren!Body: De inhoud! </body> </html> Alle begin is moeilijk
    29. 29. BASIC STRUCTUURNet zoals MS Word, alleen véél moeilijker.Hoofding (niveau 1 tot 6) <h1‐6>Een
titel!</h1‐6>Paragraaf <p>Tekst!</p>Een link (of ‘anchor’) <a
href=”http://...”>Klik
mij!</a>Een afbeelding (of ‘image’) <img
src=””
width=”100”
height=”100” alt=”Een
afbeelding!”
/>Een harde-enter (of line-break) <br/>Een ongeordende of geordende <ul></ul>
|
<ol></ol>lijst.Een lijst-element (list-item) <li>Element!</li> Content structuur
    30. 30. VERDERE OPMAAKThe spice of life.Belangrijk (wordt bold gerenderd) <strong></strong>Bold tekst <b></b>Nadrukkelijk (wordt italic gerenderd) <em></em>Italic tekst <i></i> Waar is de comic sans tag?
    31. 31. HUH?Waarom 2 tags die’t zelfde doen? Simpel...
    32. 32. SEMANTIEK Bron: Wikipedia
    33. 33. SEMANTIEKDe semantiek of betekenisleer is een wetenschap die zich bezighoudt met de betekenis vansymbolen, waarbij het in het bijzonder de bouwstenen van natuurlijke talen die voor de communicatiedienen ofwel woorden en zinnen betreft. Bron: Wikipedia
    34. 34. ... en ook anysurfer, butwho cares about theblind amirite?
    35. 35. ... en ook anysurfer, but who cares about the blind amirite? Google!Goeie semantiek = gratis SEO
    36. 36. HTML5Een bloemlezing uit de nieuwe elementen </title>
    37. 37. STRUCTUUR 5.0Zeg niet zomaar een div#header tegen een header.Nieuwe structurele elementenlaten toe om niet-semantische“filler-tags” zoals divs tevervangen door meer betekenis-volle elementen.IE kan niet standaard met dezeelementen overweg, maar m.b.veen javascript workaround kunnenze wel gerenderd worden.Browser support
    38. 38. AUDIO & VIDEOGoodbye Flash?Laat toe om video of audio te <video
src=”test.ogg”
autoplay=”autoplay”
integreren in een webpagina, controls=”controls”> Flash
fallback
kan
hier
komen,
ofzonder gebruik te maken van een
link
om
de
video
te
downloaden,
of
een
plugins of externe software. aanmoediging
om
een
nieuwe
browser
te
 downloaden. </video>Opera, Chrome en Firefoxondersteunen de Ogg Theora videocodec, Safari en Chromeondersteunen H.264 video.IE ondersteund voorlopig niets.Browser support
    39. 39. NIEUWEFORM-CONTROLS
    40. 40. FORM CONTROLS<form input=”...” />datetime Input van een datum & tijdstip.datetime‐local Input van een datum & tijdstip, in lokale tijd.number Input van enkel cijfers.range Input van een cijfer tussen een bepaalde limiet.email Input van geldig e-mail adresurl Input van een geldige urlcolor Input van een geldige RGB waarde. Indien geen browser-support vallen deze terug naar text-inputs, dus server-side validatie blijft een must!Browser support
    41. 41. NIEUWE APISExtra functionaliteiten van HTML5 en </title>
    42. 42. Nieuwe Javascript APIs
    43. 43. CANVAS Nieuwe Javascript APIs
    44. 44. CANVASWEB-WORKERS Nieuwe Javascript APIs
    45. 45. WEB SQL CANVAS WEB-WORKERS Nieuwe Javascript APIs
    46. 46. SIMPLEWEB SQL CLIENT STORAGE CANVAS WEB-WORKERS Nieuwe Javascript APIs
    47. 47. SIMPLE WEB-SOCKETSWEB SQL CLIENT STORAGE CANVAS WEB-WORKERS Nieuwe Javascript APIs
    48. 48. SIMPLE WEB-SOCKETSWEB SQL CLIENT STORAGE CANVAS WEB-WORKERSCONTENT-EDITABLE Nieuwe Javascript APIs
    49. 49. SIMPLE WEB-SOCKETSWEB SQL CLIENT STORAGE CANVAS WEB-WORKERSCONTENT-EDITABLE DRAG&DROP Nieuwe Javascript APIs
    50. 50. SIMPLE WEB-SOCKETSWEB SQL CLIENT STORAGE CANVAS WEB-WORKERSCONTENT-EDITABLEOFF- DRAG&DROPLINE CACHING Nieuwe Javascript APIs
    51. 51. SIMPLE WEB-SOCKETSWEB SQL CLIENT STORAGE CANVAS WEB-WORKERSCONTENT-EDITABLEOFF- DRAG&DROPLINE CACHINGGEO-LOCATION Nieuwe Javascript APIs
    52. 52. SIMPLE WEB-SOCKETSWEB SQL CLIENT STORAGE CANVAS WEB-WORKERSCONTENT-EDITABLEOFF- DRAG&DROPLINE CACHINGGEO-LOCATION etc... Nieuwe Javascript APIs
    53. 53. SHOW & TELL HTML5 in the wild Inspiring!
    54. 54. SHOW & TELL HTML5 in the wildhttp://www.thewildernessdowntown.com/ Inspiring!
    55. 55. SHOW & TELL HTML5 in the wildhttp://www.thewildernessdowntown.com/http://mrdoob.com/ Inspiring!
    56. 56. SHOW & TELL HTML5 in the wildhttp://www.thewildernessdowntown.com/http://mrdoob.com/http://www.chromeexperiments.com/ Inspiring!
    57. 57. SHOW & TELL HTML5 in the wildhttp://www.thewildernessdowntown.com/http://mrdoob.com/http://www.chromeexperiments.com/http://www.phoboslab.org/biolab/ Inspiring!
    58. 58. CSS 3De presentatie-layer </title>
    59. 59. YAY
    60. 60. Border- YAY
    61. 61. Border- RGBa YAY
    62. 62. Advanced Selectors RGBaBorder- YAY
    63. 63. Border- RGBaText Shadows Advanced Selectors YAY
    64. 64. Border- RGBaText Shadows Advanced SelectorsWeb-Fonts YAY
    65. 65. Border- RGBaText Shadows Advanced SelectorsWeb- Shadows BoxFonts YAY
    66. 66. Border- RGBaText Shadows Advanced SelectorsWeb- Shadows BoxFonts Gradients CSS YAY
    67. 67. Border- RGBaText Shadows Advanced SelectorsWeb- Shadows BoxFonts Gradients CSS2D & 3D CSS YAY
    68. 68. Border- RGBaText Shadows Advanced SelectorsWeb- Shadows BoxFonts Gradients CSS2D & 3D CSSKeyframe animation YAY
    69. 69. Border- RGBaText Shadows Advanced SelectorsWeb- Shadows BoxFonts Gradients CSS2D & 3D CSSKeyframe animation etc... YAY
    70. 70. BROWSER SUPPORT? Here it comes... Oh boy.
    71. 71. BROWSER SUPPORT? Here it comes... http://dowebsitesneedtolookexactlythesameineverybrowser.c om/ Oh boy.
    72. 72. BROWSER SUPPORT? Here it comes... http://dowebsitesneedtolookexactlythesameineverybrowser.c om/ Oh boy.
    73. 73. SO DON’T TRYCross-browser pixel perfectie is een mythe.
    74. 74. SO DON’T TRY Cross-browser pixel perfectie is een mythe.• Design de site volgens de capaciteiten van de beste browser van het moment, maar test steeds in oudere browsers.
    75. 75. SO DON’T TRY Cross-browser pixel perfectie is een mythe.• Design de site volgens de capaciteiten van de beste browser van het moment, maar test steeds in oudere browsers.• Maak gebruik van de Modernizr (http://www.modernizr.com/) Javascript library om te testen naar de capabiliteiten (of het gebrek daaraan) van de huidige browser en schrijf zo efficiënte CSS die kan terugschroeven zonder de gebruikers-ervaring negatief te beïnvloeden.
    76. 76. SO DON’T TRY Cross-browser pixel perfectie is een mythe.• Design de site volgens de capaciteiten van de beste browser van het moment, maar test steeds in oudere browsers.• Maak gebruik van de Modernizr (http://www.modernizr.com/) Javascript library om te testen naar de capabiliteiten (of het gebrek daaraan) van de huidige browser en schrijf zo efficiënte CSS die kan terugschroeven zonder de gebruikers-ervaring negatief te beïnvloeden.Natuurlijk, leg dit maar eens uit aan de klant...
    77. 77. SO DON’T TRY Cross-browser pixel perfectie is een mythe.Natuurlijk, leg dit maar eens uit aan de klant...
    78. 78. SO DON’T TRY Cross-browser pixel perfectie is een mythe.• Verschillen in font-rendering, OS form elementen en user settings maken het zowiezo onmogelijk om 100% pixel perfect in elke browser/situatie te zijn.Natuurlijk, leg dit maar eens uit aan de klant...
    79. 79. SO DON’T TRY Cross-browser pixel perfectie is een mythe.• Verschillen in font-rendering, OS form elementen en user settings maken het zowiezo onmogelijk om 100% pixel perfect in elke browser/situatie te zijn.• Work-arounds, hacks en een overvloed aan images kunnen de Photoshop misschien beter benaderen, maar ten koste van performantie, ontwikkelingstijd en flexibiliteit.Natuurlijk, leg dit maar eens uit aan de klant...
    80. 80. SO DON’T TRY Cross-browser pixel perfectie is een mythe.• Verschillen in font-rendering, OS form elementen en user settings maken het zowiezo onmogelijk om 100% pixel perfect in elke browser/situatie te zijn.• Work-arounds, hacks en een overvloed aan images kunnen de Photoshop misschien beter benaderen, maar ten koste van performantie, ontwikkelingstijd en flexibiliteit.• Gewone gebruikers bekijken de site slechts in één enkele browser.Natuurlijk, leg dit maar eens uit aan de klant...
    81. 81. SO DON’T TRY Cross-browser pixel perfectie is een mythe.• Verschillen in font-rendering, OS form elementen en user settings maken het zowiezo onmogelijk om 100% pixel perfect in elke browser/situatie te zijn.• Work-arounds, hacks en een overvloed aan images kunnen de Photoshop misschien beter benaderen, maar ten koste van performantie, ontwikkelingstijd en flexibiliteit.• Gewone gebruikers bekijken de site slechts in één enkele browser.• En de gebruiker thuis heeft nooit de Photoshop comp gezien, dus heeft toch geen vergelijkingspunt!Natuurlijk, leg dit maar eens uit aan de klant...
    82. 82. SO DON’T TRY Cross-browser pixel perfectie is een mythe.• Verschillen in font-rendering, OS form elementen en user settings maken het zowiezo onmogelijk om 100% pixel perfect in elke browser/situatie te zijn.• Work-arounds, hacks en een overvloed aan images kunnen de Photoshop misschien beter benaderen, maar ten koste van performantie, ontwikkelingstijd en flexibiliteit.• Gewone gebruikers bekijken de site slechts in één enkele browser.• En de gebruiker thuis heeft nooit de Photoshop comp gezien, dus heeft toch geen vergelijkingspunt! (en neen, gebruikers haken niet af op een gebrek aan ronde hoekjes)Natuurlijk, leg dit maar eens uit aan de klant...
    83. 83. FLASH?De olifant in de kamer </title>
    84. 84. HeeftweFlash nog zin?... of maken voortaan alles in HTML5?
    85. 85. HeeftweFlash nog zin?... of maken voortaan alles in HTML5?•Alles hangt af van het soort sites die we willen bouwen.
    86. 86. HeeftweFlash nog zin?... of maken voortaan alles in HTML5?•Alles hangt af van het soort sites die we willen bouwen.•Animaties, games en niet-standaard interactiviteit zullen nog steeds sneller gebouwd zijn in Flash dan in HTML, en in elke browser identiek afspelen (behalve op een iPhone/iPad natuurlijk)
    87. 87. HeeftweFlash nog zin?... of maken voortaan alles in HTML5?•Alles hangt af van het soort sites die we willen bouwen.•Animaties, games en niet-standaard interactiviteit zullen nog steeds sneller gebouwd zijn in Flash dan in HTML, en in elke browser identiek afspelen (behalve op een iPhone/iPad natuurlijk)•Voor mobiel internet is er echter weinig keuze: HTML5 all the way.
    88. 88. HeeftweFlash nog zin?... of maken voortaan alles in HTML5?•Alles hangt af van het soort sites die we willen bouwen.•Animaties, games en niet-standaard interactiviteit zullen nog steeds sneller gebouwd zijn in Flash dan in HTML, en in elke browser identiek afspelen (behalve op een iPhone/iPad natuurlijk)•Voor mobiel internet is er echter weinig keuze: HTML5 all the way.•En natuurlijk voor écht future-proof sites die jaren na datum relevant kunnen/moeten blijven is er imho geen keuze: HTML5 or bust.
    89. 89. HeeftweFlash nog zin?... of maken voortaan alles in HTML5?•Alles hangt af van het soort sites die we willen bouwen.•Animaties, games en niet-standaard interactiviteit zullen nog steeds sneller gebouwd zijn in Flash dan in HTML, en in elke browser identiek afspelen (behalve op een iPhone/iPad natuurlijk)•Voor mobiel internet is er echter weinig keuze: HTML5 all the way.•En natuurlijk voor écht future-proof sites die jaren na datum relevant kunnen/moeten blijven is er imho geen keuze: HTML5 or bust. Maar voor een campagne-site die slechts 6 weken online staat...?
    90. 90. HeeftweFlash nog zin?... of maken voortaan alles in HTML5?•Alles hangt af van het soort sites die we willen bouwen.•Animaties, games en niet-standaard interactiviteit zullen nog steeds sneller gebouwd zijn in Flash dan in HTML, en in elke browser identiek afspelen (behalve op een iPhone/iPad natuurlijk)•Voor mobiel internet is er echter weinig keuze: HTML5 all the way.•En natuurlijk voor écht future-proof sites die jaren na datum relevant kunnen/moeten blijven is er imho geen keuze: HTML5 or bust. Maar voor een campagne-site die slechts 6 weken online staat...? ... en voor porno natuurlijk.
    91. 91. Vragen?Come on, don’t be shy.
    92. 92. IMAGE CREDITSOld timey Web-app ads: Moma Propagandahttp://www.momapropaganda.com.br/CERN pictures & history:http://public.web.cern.ch/public/Ivory Tower painting: hideyoshihttp://hideyoshi.deviantart.com/art/Ivory-Tower-106536815COLOPHONFonts used:RockwellBook AntiquaTrebuchet MS Questions? Ask @gillesv on Twitter

    ×