Jun 25, 2015
</title>
<title>
HTML 5 & CSS3Voor slimme mensen zoals U.
5 jaar geledenFlash introsFlash was cool2007 - iPhoneFlash niet meer cool
Waarom kon Flash groot worden?
Meer dan 5 jaar lang geen beweging in HTML - stagnatie
Waarom?
INTROClick to skip
5 jaar geledenFlash introsFlash was cool2007 - iPhoneFlash niet meer cool
Waarom kon Flash groot worden?
Meer dan 5 jaar lang geen beweging in HTML - stagnatie
Waarom?
Maar eerst wat geschiedenis van het internet, en de standards-beweging
Bron: Moma Propaganda (http://www.momapropaganda.com.br/)
Een korte geschiedenis van standards op het webIN DEN BEGINNE
Maar eerst wat geschiedenis van het internet, en de standards-beweging
Antwoorden op een gele postkaartWie vond het internet
Antwoorden op een gele postkaartWie vond het internet
Sir Tim Berners-Lee
Antwoorden op een gele postkaartWie vond het internet
CERN: zeer slimme jongensInternet slechts een voetnoot in hun rijke geschiedenisInternet groeit snel, 10.000.000 gebruikers in 1994 - TBL verlaat CERN
CERN: zeer slimme jongensInternet slechts een voetnoot in hun rijke geschiedenisInternet groeit snel, 10.000.000 gebruikers in 1994 - TBL verlaat CERN
CERN: zeer slimme jongensInternet slechts een voetnoot in hun rijke geschiedenisInternet groeit snel, 10.000.000 gebruikers in 1994 - TBL verlaat CERN
Richt in MIT het W3C opWaakt 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
Opgericht in 1994
World Wide Web ConsortiumW3C
Richt in MIT het W3C opWaakt 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
Text
Verliezen touch met de realiteit, op zoek naar theoretisch pure standaard
Was een grote mislukking - stagnatie voor meer dan 5 jaar
Text
W3C
Webdesigners
XHTML 2.0
Verliezen touch met de realiteit, op zoek naar theoretisch pure standaard
Was een grote mislukking - stagnatie voor meer dan 5 jaar
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.
2001-2006
Content + PresentatieXHTML 1 + CSS 2.1
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.
Een splintergroep binnen de W3C zag dit als een positieve evolutie en wou dit verder stimuleren.
Vonden geen gehoor en richtten dus hun eigen werkgroep op.
Focusten zich op Web Forms en Web Apps
Stonden los van de W3C en implementeerden unilateraal deze upgrades in hun eigen browsers
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
Web Hypertext Application Technology Working Group
WHAT WG
Een splintergroep binnen de W3C zag dit als een positieve evolutie en wou dit verder stimuleren.
Vonden geen gehoor en richtten dus hun eigen werkgroep op.
Focusten zich op Web Forms en Web Apps
Stonden los van de W3C en implementeerden unilateraal deze upgrades in hun eigen browsers
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
Web Hypertext Application Technology Working Group
WHAT WG
Een splintergroep binnen de W3C zag dit als een positieve evolutie en wou dit verder stimuleren.
Vonden geen gehoor en richtten dus hun eigen werkgroep op.
Focusten zich op Web Forms en Web Apps
Stonden los van de W3C en implementeerden unilateraal deze upgrades in hun eigen browsers
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
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
World Wide Web ConsortiumW3C
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.
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 hiervan vanmiddag bij te brengen, want het is echt niet moeilijk .
Vandaag-?
Content + PresentatieHTML5 + CSS 3
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 hiervan vanmiddag bij te brengen, want het is echt niet moeilijk .
Opbouw van een website
HTMLCONTENT
CSSSTIJL
JavascriptFUNCTIE
Om te beginnen moet ik één belangrijk concept uitleggen.
Elke website is idealiter opgebouwd uit 3 discrete lagen. De eerste laag is de meest toegankelijke, en op deze zal jullie proberen aanleren.
</title>
HTMLDe Content-Layer:
Even doorbijten
Tags, nesting, doctypes, oh my!DE BASICS
<!doctypehtml><html>
<head><title>Eentitel</title>
</head><body>...enhierkanallesgebeuren!</body>
</html>
Alle begin is moeilijk
Doorgelicht!EEN HTML PAGINA
Doctype: bepaald wat soort document we bekijken.
Head: bevat meta- en stijl-informatie over de pagina.
Body: De inhoud!
<h1‐6>Eentitel!</h1‐6>
<p>Tekst!</p>
<ahref=”http://...”>Klikmij!</a>
<imgsrc=””width=”100”height=”100”alt=”Eenafbeelding!”/>
<br/>
<ul></ul>|<ol></ol>
<li>Element!</li>
Content structuur
Net zoals MS Word, alleen véél moeilijker.BASIC STRUCTUURHoofding (niveau 1 tot 6)
Paragraaf
Een link (of ‘anchor’)
Een afbeelding (of ‘image’)
Een harde-enter (of line-break)
Een ongeordende of geordende lijst.
Een lijst-element (list-item)
<strong></strong>
<b></b>
<em></em>
<i></i>
Waar is de comic sans tag?
The spice of life.VERDERE OPMAAKBelangrijk (wordt bold gerenderd)
Bold tekst
Nadrukkelijk (wordt italic gerenderd)
Italic tekst
Simpel...
Waarom 2 tags die’t zelfde doen?HUH?
Bron: Wikipedia
SEMANTIEK
Bron: Wikipedia
SEMANTIEKDe 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.
... en ook anysurfer, but who cares about the blind amirite?
Google!
Goeie semantiek = gratis SEO
... en ook anysurfer, but who cares about the blind amirite?
</title>
HTML5Een bloemlezing uit de nieuwe elementen
Browser support
Zeg niet zomaar een div#header tegen een header.STRUCTUUR 5.0Nieuwe 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
Goodbye Flash?AUDIO & VIDEOLaat toe om video of audio te integreren in een webpagina, zonder gebruik te maken van plugins of externe software.
Opera, Chrome en Firefox ondersteunen de Ogg Theora video codec, Safari en Chrome ondersteunen H.264 video.
IE ondersteund voorlopig niets.
<videosrc=”test.ogg”autoplay=”autoplay”controls=”controls”>
Flashfallbackkanhierkomen,ofeenlinkomdevideotedownloaden,ofeenaanmoedigingomeennieuwebrowsertedownloaden.
</video>
NIEUWE FORM-CONTROLS
FORM CONTROLSInput van een datum & tijdstip.
Input van een datum & tijdstip, in lokale tijd.
Input van enkel cijfers.
Input van een cijfer tussen een bepaalde limiet.
Input van geldig e-mail adres
Input van een geldige url
Input van een geldige RGB waarde.
Browser support
<form input=”...” />datetime
datetime‐local
number
range
url
color
Indien geen browser-support vallen deze terug naar text-inputs,dus server-side validatie blijft een must!
</title>
NIEUWE APISExtra functionaliteiten van HTML5 en
Nieuwe Javascript APIs
Nieuwe Javascript APIs
CANVAS
Nieuwe Javascript APIs
CANVASWEB-WORKERS
Nieuwe Javascript APIs
CANVASWEB-WORKERS
WEB SQ
L
Nieuwe Javascript APIs
CANVASWEB-WORKERS
WEB SQ
L
SIMPLE CLIENT STORAGE
Nieuwe Javascript APIs
CANVASWEB-WORKERS
WEB SQ
L
SIMPLE CLIENT STORAGE
WEB-SOCKETS
Nieuwe Javascript APIs
CANVASWEB-WORKERS
WEB SQ
L
CONTENT-EDITABLE
SIMPLE CLIENT STORAGE
WEB-SOCKETS
Nieuwe Javascript APIs
CANVASWEB-WORKERS
WEB SQ
L
CONTENT-EDITABLEDRAG&DROP
SIMPLE CLIENT STORAGE
WEB-SOCKETS
Nieuwe Javascript APIs
CANVASWEB-WORKERS
WEB SQ
L
CONTENT-EDITABLEOFF-LINE CACHING
DRAG&DROP
SIMPLE CLIENT STORAGE
WEB-SOCKETS
Nieuwe Javascript APIs
CANVASWEB-WORKERS
WEB SQ
L
CONTENT-EDITABLEOFF-LINE CACHING
DRAG&DROP
SIMPLE CLIENT STORAGE
GEO-LOCATION
WEB-SOCKETS
Nieuwe Javascript APIs
CANVASWEB-WORKERS
WEB SQ
L
CONTENT-EDITABLEOFF-LINE CACHING
DRAG&DROP
SIMPLE CLIENT STORAGE
GEO-LOCATIONetc...
WEB-SOCKETS
Inspiring!
HTML5 in the wildSHOW & TELL
Inspiring!
HTML5 in the wildSHOW & TELL
http://www.thewildernessdowntown.com/
Inspiring!
HTML5 in the wildSHOW & TELL
http://www.thewildernessdowntown.com/
http://mrdoob.com/
Inspiring!
HTML5 in the wildSHOW & TELL
http://www.thewildernessdowntown.com/
http://mrdoob.com/
http://www.chromeexperiments.com/
Inspiring!
HTML5 in the wildSHOW & TELL
http://www.thewildernessdowntown.com/
http://mrdoob.com/
http://www.chromeexperiments.com/
http://www.phoboslab.org/biolab/
</title>
CSS 3De presentatie-layer
YAY
YAY
Border-
YAY
Border-RGBa
YAY
Border-RGBa
Advanced
Selectors
YAY
Border-RGBaText Shadows
Advanced
Selectors
YAY
Border-RGBaText Shadows
Web-Fonts
Advanced
Selectors
YAY
Border-RGBaText Shadows
Box ShadowsWeb-Fonts
Advanced
Selectors
YAY
Border-RGBaText Shadows
Box ShadowsWeb-FontsCSS Gradients
Advanced
Selectors
YAY
Border-RGBaText Shadows
Box ShadowsWeb-FontsCSS Gradients2D & 3D CSS
Advanced
Selectors
YAY
Border-RGBaText Shadows
Box ShadowsWeb-FontsCSS Gradients2D & 3D CSS Keyframe animation
Advanced
Selectors
YAY
Border-RGBaText Shadows
Box ShadowsWeb-FontsCSS Gradients2D & 3D CSS Keyframe animation
etc...
Advanced
Selectors
Oh boy.
Here it comes...BROWSER SUPPORT?
Oh boy.
Here it comes...BROWSER SUPPORT?
http://dowebsitesneedtolookexactlythesameineverybrowser.c
om/
Oh boy.
Here it comes...BROWSER SUPPORT?
http://dowebsitesneedtolookexactlythesameineverybrowser.c
om/
Cross-browser pixel perfectie is een mythe.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.
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.
SO DON’T TRY
Natuurlijk, leg dit maar eens uit aan de klant...
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.
SO DON’T TRY
Natuurlijk, leg dit maar eens uit aan de klant...
Cross-browser pixel perfectie is een mythe.SO DON’T TRY
Natuurlijk, leg dit maar eens uit aan de klant...
Cross-browser pixel perfectie is een mythe.SO DON’T TRY
• 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...
Cross-browser pixel perfectie is een mythe.SO DON’T TRY
• 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...
Cross-browser pixel perfectie is een mythe.SO DON’T TRY
• 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...
Cross-browser pixel perfectie is een mythe.SO DON’T TRY
• 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...
Cross-browser pixel perfectie is een mythe.SO DON’T TRY
• 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)
</title>
FLASH?De olifant in de kamer
... of maken we voortaan alles in HTML5?Heeft Flash nog zin?
... of maken we voortaan alles in HTML5?Heeft Flash nog zin?•Alles hangt af van het soort sites die we willen bouwen.
... of maken we voortaan alles in HTML5?Heeft Flash nog zin?•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)
... of maken we voortaan alles in HTML5?Heeft Flash nog zin?•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.
... of maken we voortaan alles in HTML5?Heeft Flash nog zin?•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.
... of maken we voortaan alles in HTML5?Heeft Flash nog zin?•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.
... of maken we voortaan alles in HTML5?Heeft Flash nog zin?•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...?
Vragen?Come on, don’t be shy.
Questions? Ask @gillesv on Twitter
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-106536815
COLOPHONFonts used:RockwellBook AntiquaTrebuchet MS