HTML5 & CSS3 voor slimme mensen zoals u

</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

http://www.momapropaganda.com.br/#/home

http://www.momapropaganda.com.br/#/home

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

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

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.

http://nl.wikipedia.org/wiki/Wetenschap

http://nl.wikipedia.org/wiki/Wetenschap

http://nl.wikipedia.org/wiki/Betekenis

http://nl.wikipedia.org/wiki/Betekenis

http://nl.wikipedia.org/wiki/Symbool

http://nl.wikipedia.org/wiki/Symbool

http://nl.wikipedia.org/wiki/Natuurlijke_taal

http://nl.wikipedia.org/wiki/Natuurlijke_taal

http://nl.wikipedia.org/wiki/Communicatie

http://nl.wikipedia.org/wiki/Communicatie

http://nl.wikipedia.org/wiki/Woord

http://nl.wikipedia.org/wiki/Woord

http://nl.wikipedia.org/wiki/Zin_(taalkunde)

http://nl.wikipedia.org/wiki/Zin_(taalkunde)

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

email

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


CANVAS


CANVASWEB-WORKERS


CANVASWEB-WORKERS

WEB SQ

L


CANVASWEB-WORKERS

WEB SQ

L

SIMPLE CLIENT STORAGE


CANVASWEB-WORKERS

WEB SQ

L


WEB-SOCKETS


CANVASWEB-WORKERS

WEB SQ

L

CONTENT-EDITABLE


WEB-SOCKETS


CANVASWEB-WORKERS

WEB SQ

L

CONTENT-EDITABLEDRAG&DROP


WEB-SOCKETS


CANVASWEB-WORKERS

WEB SQ

L

CONTENT-EDITABLEOFF-LINE CACHING

DRAG&DROP


WEB-SOCKETS


CANVASWEB-WORKERS

WEB SQ

L


DRAG&DROP


GEO-LOCATION

WEB-SOCKETS


CANVASWEB-WORKERS

WEB SQ

L


DRAG&DROP


GEO-LOCATIONetc...

WEB-SOCKETS

Inspiring!

HTML5 in the wildSHOW & TELL

Inspiring!


http://www.thewildernessdowntown.com/



Inspiring!



http://mrdoob.com/



http://mrdoob.com/

http://mrdoob.com/

Inspiring!



http://mrdoob.com/

http://www.chromeexperiments.com/



http://mrdoob.com/

http://mrdoob.com/



Inspiring!



http://mrdoob.com/


http://www.phoboslab.org/biolab/



http://mrdoob.com/

http://mrdoob.com/





</title>

CSS 3De presentatie-layer

YAY

Border-

YAY

Border-RGBa

YAY

Border-RGBa

Advanced

Selectors

YAY

Border-RGBaText Shadows

Advanced

Selectors

YAY


Web-Fonts

Advanced

Selectors

YAY


Box ShadowsWeb-Fonts

Advanced

Selectors

YAY


Box ShadowsWeb-FontsCSS Gradients

Advanced

Selectors

YAY


Box ShadowsWeb-FontsCSS Gradients2D & 3D CSS

Advanced

Selectors

YAY


Box ShadowsWeb-FontsCSS Gradients2D & 3D CSS Keyframe animation

Advanced

Selectors

YAY


Box ShadowsWeb-FontsCSS Gradients2D & 3D CSS Keyframe animation

etc...

Advanced

Selectors

Oh boy.

Here it comes...BROWSER SUPPORT?

Oh boy.


http://dowebsitesneedtolookexactlythesameineverybrowser.c

om/

http://dowebsitesneedtolookexactlythesameineverybrowser.com/






Oh boy.


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



• 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

http://www.modernizr.com/


Natuurlijk, leg dit maar eens uit aan de klant...



• 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





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


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





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

http://www.momapropaganda.com.br

http://www.momapropaganda.com.br

http://public.web.cern.ch/public/

http://public.web.cern.ch/public/

http://hideyoshi.deviantart.com/art/Ivory-Tower-106536815




HTML5 & CSS3 voor slimme mensen zoals u

Technology

Transcript of HTML5 & CSS3 voor slimme mensen zoals u