Trends in webdevelopment

Paul van Buuren
Atos Origin HPS - Technische XPG

15 november 2010

Onderwerpen

Wat is HTML5?

Wat is HTML5?

Een magische nieuwe techniek waar alles mee kan?

Simsalabim!

Simsalabim!

 

Eh, nee

Hm, is stukgemaakt

Wat is HTML5?

Het wordt nu nog vaak gebruikt als BUZZWORD

Enge marketingvent

getverderrie

Wat is HTML5 (niet)?

Wat is HTML5 (niet)?

Wat is HTML5 (wel)?

HTML5 is markup

met <tags> enzo

Wat is HTML5?

Fijne nieuwe tags:

<header> <footer> <article>
<section> <nav> <aside>
<canvas> <video> <audio>

Wat is HTML5?

Deze tags maken webpagina's semantisch correct(er)

<header> <footer> <article>
<section> <nav> <aside>
<canvas> <video> <audio>

Zodat zoekmachines de structuur van een pagina beter begrijpen.

Wat is HTML5?

Fijne uitbreidingen op bestaande tags.

Zoals:

<input type="date">
<input type="email">
<input type="url">

Wat is HTML5?

Fijne uitbreidingen op bestaande tags.En dat ziet er zo uit:

Amazing!

HTML5 input

Resultaat: (Safari op iPhone)

URL veld getoond in Safari op een iPhone E-mailveld getoond in Safari op een iPhone

Eh...

Een paar verschilletjes tussen Opera, IE7 en Chrome:

Zoals getoond in Opera Zoals getoond in IE7Zoals getoond in Google Chrome 7

Oeps :-)

...eh, goed

Betere formulieren dus. Met nieuwe functionaliteit:

En handige attributen zoals:
pattern="", required, placeholder=""

HTML5=simpel: doctype

Een HTML4 doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD 
    HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

JE KOP ER AF!!!!!Je kop er af, als je dit niet blind kunt typen!

HTML5=simpel: doctype

Dat kan simpeler:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Wordt:
<!DOCTYPE html>
Hoppa, simsalabim-de-luxe

Dus toch! Simsalabim!

HTML5=simpel: type attribuut

Moeilijk:

<script type="text/javascript">
 alert('Blurp!');
</script>

HTML5=simpel: type attribuut

Makkelijk:

<script type="text/javascript">
 alert('Blurp!');
</script>
<script>
 alert('Blurp!');
</script>

En wanneer heb je voor het laatst type="text/vbscript" gebruikt?

HTML5=simpel: syntax

Kies maar:

<img> <img /> <img/>

Voor de zekerheid

HTML5 = HTML

HTML != XML

Dus voor de <script> tag, niet zo:
<script src="vet-cool-stoer.js" />
maar zo:
<script src="vet-cool-stoer.js"></script>

Nieuwe feature: <video>

<video controls="controls" src="simsalabim.ogg"
  poster="simsalabim-example.png"
  preload="auto">
   <!-- Fallback here -->
   <img src="je-browser-is-stuk.png" />
</video>

Het zou leuk zijn als dit in elke browser werkte, niet?

HTML5, waarom nu?

HMTL5 = beschrijvende tags

Handig voor zoekmachines, toegankelijkheid, metadata, etc.

HMTL5 = beschrijvende tags

Voorbeelden:

HMTL5 = video & audio

HMTL5 = canvas

Een dynamische <img>

<canvas width="800" height="150" id="c"></canvas> (met wat JavaScript)

(Winnaar JS1k: Marijn Haverbeke)

Nieuwe APIs (niet echt HTML5, maar soit)

Maar Flash kan dat al jaren!

Loooosers!

Klopt!

Flash als fallback op sommige plekken
Onthou de term 'progressive enhancement'.

<video src="simsalabim.ogg">
 <!-- Fallback: -->
 <object data="movieplayer.swf">
  <param movie="simsalabim.ogg">
 </object>
<video>

Internet Explorer 6. Ahum...

Of JavaScript en feature detection

Ondersteunt browser nieuwe input types?

Ja: gebruik native functionaliteit

Nee: gebruik JS libary
 

Of suggereer een browser upgrade #IE6

Geleidelijk implementeren, per feature

Misschien moeten we het even over IE6 hebben...

Tot zover over HTML5

Dan nu

...even vlug...

CSS3

IE6, annoying the internet since 2001

Buzz word bingo

99,7% van de webontwikkelaars heeft een hekel aan IE6 #feit

Buzz word bingo

Progressive enhancement:

Tussen de vijftien en twintig procent van de tijd van een Front-end developer wordt verknoeid aan het hacken van IE6 #feit

Buzz word bingo

Adaptive layouts = Pagina-opbouw past zich aan aan de mogelijkheden van de browser.

Q: What is IE6?
A: One of the most amazing tools for downloading Firefox.

Buzz word bingo

Media queries

Nog niet betrouwbaar en beschikbaar in alle browsers. Noem eens zo'n uitzonderingsbrowser? :-)

Buzz word bingo

Media queries, voorbeeld:

#media-queries-1 {
  background-color: #f00; /* Standaard is rood */
}
@media all and (max-width: 740px) {
  #media-queries-1 { background-color: #0f0; /* felgroen */ }
}
@media screen and (min-width: 1200px) {
  #media-queries-1 { background-color: #ff0; /* felgeel */}
}  

Doet het niet in IE6, hoor

Media queries

Dat levert dit op:

Groen op een klein scherm. Geel op een groot scherm. En anders: rood
Echt knalgaaf dit

Simsalabim!

Media queries

Op een iPhone:

Echt knalgaaf dit

Simsalabim!

Klaar! Vragen?

 

En dan nog iets over IE6:
Zo doen we dat met IE6

Eerlijk gezegd

Voor deze presentatie heb ik me laten inspireren door Krijn Hoetmer.
En ik heb ook een paar slides van hem overgenomen.