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

2. <title>
HTML 5 &
Voor slimme mensen zoals U.
CSS3
</title>

3. 5 jaar geleden
Flash intros
Flash was cool
2007 - iPhone
Flash niet meer cool
Waarom kon Flash groot
worden?
Meer dan 5 jaar lang geen
beweging in HTML - stagnatie
Waarom?

4. 5 jaar geleden
Flash intros
Flash was cool
2007 - iPhone
Flash niet meer cool
Waarom kon Flash groot
worden?
Meer dan 5 jaar lang geen
beweging in HTML - stagnatie
Waarom?
INTRO
Click to skip

5. Maar eerst wat
geschiedenis van het
internet, en de
standards-beweging

6. IN DEN BEGINNE
Een korte geschiedenis van standards op het web
Maar eerst wat
geschiedenis van het
internet, en de
standards-beweging
Bron: Moma Propaganda (http://www.momapropaganda.com.br/)

8. Wie vond het internet
Antwoorden op een gele postkaart

9. Wie vond het internet
Antwoorden op een gele postkaart

10. Wie vond het internet
Antwoorden op een gele postkaart
Sir Tim Berners-Lee

11. CERN: zeer slimme
jongens
Internet slechts een
voetnoot in hun rijke
geschiedenis
Internet groeit snel,
10.000.000 gebruikers in
1994 - TBL verlaat CERN

12. CERN: zeer slimme
jongens
Internet slechts een
voetnoot in hun rijke
geschiedenis
Internet groeit snel,
10.000.000 gebruikers in
1994 - TBL verlaat CERN

13. CERN: zeer slimme
jongens
Internet slechts een
voetnoot in hun rijke
geschiedenis
Internet groeit snel,
10.000.000 gebruikers in
1994 - TBL verlaat CERN

14. Richt in MIT het W3C op
Waakt over HTML en het web
Bevorderdt standardisatie &
openheid
Met success: 2000 wordt
HTML een ISO standaard, zoals
de meter of de kilogram
Ze komen echter op een
dwaalspoor: XML en
XHTML 2.0

15. Richt in MIT het W3C op
Waakt over HTML en het web
Bevorderdt standardisatie &
openheid
Met success: 2000 wordt
HTML een ISO standaard, zoals
de meter of de kilogram
W3C
World Wide Web Consortium
Ze komen echter op een
dwaalspoor: XML en
XHTML 2.0
Opgericht in 1994

16. Verliezen touch met de
realiteit, op zoek naar
theoretisch pure
standaard
Was een grote
mislukking - stagnatie
voor meer dan 5 jaar
Text

17. W3C
XHTML 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

18. Voor meer dan 5 jaar
was dit de “height of
sophistication” op het
web.
IE had de browser wars
gewonnen en stagneerde
mooi 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.

19. Voor meer dan 5 jaar
was dit de “height of
sophistication” op het
web.
IE had de browser wars
gewonnen en stagneerde
mooi 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

20. Een splintergroep binnen Focusten zich op Web
de W3C zag dit als een Forms en Web Apps
positieve evolutie en wou
dit verder stimuleren. Stonden los van de W3C
en implementeerden
Vonden geen gehoor en unilateraal deze upgrades
richtten dus hun eigen in hun eigen browsers
werkgroep 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

21. Een splintergroep binnen Focusten zich op Web
de W3C zag dit als een Forms en Web Apps
positieve evolutie en wou
dit verder stimuleren. Stonden los van de W3C
en implementeerden
Vonden geen gehoor en unilateraal deze upgrades
richtten dus hun eigen in hun eigen browsers
werkgroep 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

22. Een splintergroep binnen Focusten zich op Web
de W3C zag dit als een Forms en Web Apps
positieve evolutie en wou
dit verder stimuleren. Stonden los van de W3C
en implementeerden
Vonden geen gehoor en unilateraal deze upgrades
richtten dus hun eigen in hun eigen browsers
werkgroep 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

23. 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.

24. W3C
World 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

25. En dus zijn we vandaag
hier beland.
HTML evolueert weer, en
wordt weer een medium
voor creatieve expressie
met veel nieuwe
mogelijkheden.
Ik ga proberen om jullie
de basis hier van
vanmiddag bij te brengen,
want het is echt niet
moeilijk.

26. 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-?

27. 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.
HTML
STIJL
CSS
FUNCTIE Javascript
Opbouw van een website

29. De Content-Layer:
HTML </title>

31. DE BASICS
Tags, nesting, doctypes, oh my!
Even doorbijten

32. EEN HTML PAGINA
Doorgelicht!
<!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

33. BASIC STRUCTUUR
Net 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

34. VERDERE OPMAAK
The 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?

36. HUH?
Waarom 2 tags die’t zelfde doen?
Simpel...

38. SEMANTIEK
Bron: Wikipedia

39. SEMANTIEK
De semantiek of betekenisleer is een wetenschap die zich bezighoudt met de betekenis van
symbolen, waarbij het in het bijzonder de bouwstenen van natuurlijke talen die voor de communicatie
dienen ofwel woorden en zinnen betreft.
Bron: Wikipedia

40. ... en ook anysurfer, but
who cares about the
blind amirite?

41. ... en ook anysurfer, but
who cares about the
blind amirite?
Google!
Goeie semantiek = gratis SEO

43. HTML5
Een bloemlezing uit de nieuwe elementen
</title>

44. STRUCTUUR 5.0
Zeg niet zomaar een div#header tegen een header.
Nieuwe structurele elementen
laten toe om niet-semantische
“filler-tags” zoals divs te
vervangen door meer betekenis-
volle elementen.
IE kan niet standaard met deze
elementen overweg, maar m.b.v
een javascript workaround kunnen
ze wel gerenderd worden.
Browser support

45. AUDIO & VIDEO
Goodbye 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, of
zonder 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 Firefox
ondersteunen de Ogg Theora video
codec, Safari en Chrome
ondersteunen H.264 video.
IE ondersteund voorlopig niets.
Browser support

47. NIEUWE
FORM-CONTROLS

48. 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 adres
url Input van een geldige url
color 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

50. NIEUWE APIS
Extra functionaliteiten van HTML5 en
</title>

51. Nieuwe Javascript APIs

52. CANVAS
Nieuwe Javascript APIs

53. CANVAS
WEB-WORKERS
Nieuwe Javascript APIs

54. WEB SQL
CANVAS
WEB-WORKERS
Nieuwe Javascript APIs

55. SIMPLE
WEB SQL
CLIENT STORAGE
CANVAS
WEB-WORKERS
Nieuwe Javascript APIs

56. SIMPLE WEB-SOCKETS
WEB SQL
CLIENT STORAGE
CANVAS
WEB-WORKERS
Nieuwe Javascript APIs

57. SIMPLE WEB-SOCKETS
WEB SQL
CLIENT STORAGE
CANVAS
WEB-WORKERS
CONTENT-EDITABLE
Nieuwe Javascript APIs

58. SIMPLE WEB-SOCKETS
WEB SQL
CLIENT STORAGE
CANVAS
WEB-WORKERS
CONTENT-EDITABLE
DRAG&DROP
Nieuwe Javascript APIs

59. SIMPLE WEB-SOCKETS
WEB SQL
CLIENT STORAGE
CANVAS
WEB-WORKERS
CONTENT-EDITABLE
OFF- DRAG&DROP
LINE CACHING
Nieuwe Javascript APIs

60. SIMPLE WEB-SOCKETS
WEB SQL
CLIENT STORAGE
CANVAS
WEB-WORKERS
CONTENT-EDITABLE
OFF- DRAG&DROP
LINE CACHING
GEO-LOCATION
Nieuwe Javascript APIs

61. SIMPLE WEB-SOCKETS
WEB SQL
CLIENT STORAGE
CANVAS
WEB-WORKERS
CONTENT-EDITABLE
OFF- DRAG&DROP
LINE CACHING
GEO-LOCATION
etc...
Nieuwe Javascript APIs

62. SHOW & TELL
HTML5 in the wild
Inspiring!

63. SHOW & TELL HTML5 in the wild
http://www.thewildernessdowntown.com/
Inspiring!

64. SHOW & TELL HTML5 in the wild
http://www.thewildernessdowntown.com/
http://mrdoob.com/
Inspiring!

65. SHOW & TELL HTML5 in the wild
http://www.thewildernessdowntown.com/
http://mrdoob.com/
http://www.chromeexperiments.com/
Inspiring!

66. SHOW & TELL HTML5 in the wild
http://www.thewildernessdowntown.com/
http://mrdoob.com/
http://www.chromeexperiments.com/
http://www.phoboslab.org/biolab/
Inspiring!

68. CSS 3
De presentatie-layer
</title>

69. YAY

70. Border-
YAY

71. Border-
RGBa
YAY

72. Advanced
Selectors
RGBa
Border-
YAY

73. Border-
RGBa
Text Shadows
Advanced
Selectors
YAY

74. Border-
RGBa
Text Shadows
Advanced
Selectors
Web-
Fonts
YAY

75. Border-
RGBa
Text Shadows
Advanced
Selectors
Web- Shadows
Box
Fonts
YAY

76. Border-
RGBa
Text Shadows
Advanced
Selectors
Web- Shadows
Box
Fonts Gradients
CSS
YAY

77. Border-
RGBa
Text Shadows
Advanced
Selectors
Web- Shadows
Box
Fonts Gradients
CSS
2D & 3D CSS
YAY

78. Border-
RGBa
Text Shadows
Advanced
Selectors
Web- Shadows
Box
Fonts Gradients
CSS
2D & 3D CSS
Keyframe animation
YAY

79. Border-
RGBa
Text Shadows
Advanced
Selectors
Web- Shadows
Box
Fonts Gradients
CSS
2D & 3D CSS
Keyframe animation
etc...
YAY

80. BROWSER SUPPORT?
Here it comes...
Oh boy.

81. BROWSER SUPPORT?
Here it comes...
http://
dowebsitesneedtolookexactlythesameineverybrowser.c
om/
Oh boy.

82. BROWSER SUPPORT?
Here it comes...
http://
dowebsitesneedtolookexactlythesameineverybrowser.c
om/
Oh boy.

83. SO DON’T TRY
Cross-browser pixel perfectie is een mythe.

84. 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.

85. 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.

86. 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...

87. SO DON’T TRY
Cross-browser pixel perfectie is een mythe.
Natuurlijk, leg dit maar eens uit aan de klant...

88. 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...

89. 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...

90. 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...

91. 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...

92. 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...

94. FLASH?
De olifant in de kamer
</title>

95. HeeftweFlash nog zin?
... of maken voortaan alles in HTML5?

96. HeeftweFlash nog zin?
... of maken voortaan alles in HTML5?
•Alles hangt af van het soort sites die we willen bouwen.

97. 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)

98. 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.

99. 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.

100. 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...?

101. 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.

103. Vragen?
Come on, don’t be shy.

104. IMAGE CREDITS
Old timey Web-app ads: Moma Propaganda
http://www.momapropaganda.com.br/
CERN pictures & history:
http://public.web.cern.ch/public/
Ivory Tower painting: hideyoshi
http://hideyoshi.deviantart.com/art/Ivory-
Tower-106536815
COLOPHON
Fonts used:
Rockwell
Book Antiqua
Trebuchet MS
Questions? Ask @gillesv on Twitter