Una petita explicació de què és l'HTML5, què incorpora i quina alternativa representa davant de tecnologies com Flash, Flex o Silverlight.
Al final es presenta una sèrie d'idees per la seva integració dins del món del Drupal, tant pel que fa a les plantilles com a mòduls.
2. QUI SÓC
● Soci fundador d'Ymbra
● Desenvolupador Drupal
● Desenvolupador front-end amb
àmplia experiència en estàndards
● Membre actiu de la comunitat
drupalera:
Ramon Vilar Gavaldà
● Membre de la junta de drupal.cat
● Administrador de la traducció
http://ymbra.com/blogs/ramon
catalana del Drupal
http://twitter.com/rvilar
http://drupal.org/user/293298
2
3. ÍNDEX
01 CONCEPTES BÀSICS
02 QUÈ ÉS L'HTML5
03 NOVETATS
04 HTML5 VS. FLASH
05 HTML5 I DRUPAL
06 CONCLUSIONS
07 RECURSOS
3
4. CONCEPTES BÀSICS
● DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
● DOM
document.body.innerHTML = '<h1>Drupal rulez</h1>';
● API
document.getElementById('my-id')
● HTML5 != CSS3
4
6. QUÈ ÉS L'HTML5
PRINCIPIS
● “Simplement” és una revisió/actualització de
l'estàndard d'HTML
● Principis de disseny
● Suportar el contingut existent
● No reinventar la roda
● Degradar amb gràcia
● Evolució, no pas revolució
● Pave the Cowpaths
6
7. QUÈ ÉS L'HTML5
PER QUÈ CAL UNA NOVA VERSIÓ
● HTML 4.01 Specification - W3C
Recommendation 24 desembre del 1999
● Adaptació a nous dispositius i nous
requeriments
● Web semàntica
● Web multimèdia
● Renovar-se o morir
7
8. QUÈ ÉS L'HTML5
QUÈ HI HA DE NOU
● 39 nous elements
● 36 nous atributs
● 19 noves APIs (com a mínim)
● 185 línies al changelog
Fonts: http://ves.cat/aqHk http://ves.cat/aqHl
8
9. QUÈ ÉS L'HTML5
SUPORT DELS NAVEGADORS
Font: http://caniuse.com
● Mentrestant podem utilitzar Modernizr o Shim
● http://www.modernizr.com/
http://remysharp.com/2009/01/07/html5-enabling-script/
9
13. NOVETATS
SUPORT MULTIMÈDIA: AUDIO
● Igual que amb l'element /video
<audio controls="controls">
<source src="sound.ogg" type="audio/ogg">
<source src="sound.mp3" type="audio/mpeg">
</audio>
● A més a més, HTML5 incorpora una API per
manipular des de JavaScript tant el vídeo com
l'audio que es reprodueix.
13
14. NOVETATS
SUPORT MULTIMÈDIA: CÒDECS
● Hi ha una guerra oberta pel que fa al suport de
còdecs per part dels navegadors:
● H.264 (MPEG-4) tancat i de pagament (Apple)
● VP8 (WebM) lliure (Google)
● Theora (Ogg) lliure (Comunitat)
● Flash (arghhh...)
14
15. NOVETATS
SUPORT MULTIMÈDIA: CANVAS
● “El forat negre”
● S'hi pot manipular tot tipus d'elements: imatges,
vídeos, etc.
● S'hi pot dibuixar en 2D (i s'estan fent proves
per dibuixar en 3D).
● És potser l'element més potent però a la
vegada el més complex.
● S'hi poden fer des de gràfics de barres fins a
jocs 3D complexos.
15
17. NOVETATS
MILLORES ALS FORMULARIS (i II)
● Nous atributs:
<input placeholder="Introduïu el vostre nom" />
<div contenteditable="contenteditable">Edita'm!</div>
<input autofocus="autofocus" />
● Validacions de formularis
<input required="required" />
<form novalidate="novalidate" />
● Alguns camps ja duen validacions en les seves
definicions
<input type="email" />
<input type="number" min="1" max="10" />
17
23. NOVETATS
NOVES APIs
● S'inclouen noves APIs que ens obren un nou
món de possibilitats:
● Geolocalització
● Emmagatzemament local
● Web workers
● Aplicacions web offline
● És hora de passar-nos-ho bé fent aplicacions
web
23
24. NOVETATS
UN MÓN SENSE FI
http://slides.html5rocks.com/
Obriu-ho tant amb Chrome(ium) com en Opera i/o Firefox4 per
veure tot el que ofereix.
Inclou tant HTML5 com d'altres tecnologies web
24
26. HTML5 vs. Flash
ANTECEDENTS DE GUERRA
● Flash sempre ha estat l'ovella negra de les
tecnologies web (des del punt de vista dels
defensors dels estàndards)
● Alguns dels intents per suplantar Flash per part
de la comunitat web no han servit per res:
● DHTML
● AJAX
● HTML5 pot ser l'alternativa? Sí, però...
26
27. HTML5 vs. Flash
QUI GUANYA I PER QUÈ
● No hi ha guanyador. Tot depèn de perquè
s'utilitzi, però en general, i a curt termini,
l'HTML5 anirà suplantant molts
desenvolupaments fets amb Flash.
● Mancances de l'HTML5 davant de Flash:
● Comunicació amb el maquinari: webcam,
micròfon, ...
● Acceleració via maquinari
● ...
27
29. HTML5 i Drupal
SENSE SUPORT AL NUCLI (D6 i D7)
● Actualment el Drupal 7 no té suport natiu per a
l'HTML5
● S'està coordinant un grup per proposar que el
Drupal 8 tingui l'HTML5 (i WAI-ARIA) de forma
nativa al nucli
Font: http://groups.drupal.org/html5
Més informació a: http://twitter.com/drupalhtml5.
29
30. HTML5 i Drupal
EINES PER APLICAR HTML5
● Encara que no hi hagi suport natiu actualment,
amb l'ajuda d'algun mòdul podem aconseguir
un lloc en HTML5
● HTML5 Base (tema) http://ves.cat/aqMo
● HTML5 Tools (mòdul) http://ves.cat/aqMp
● Elements (mòdul) http://ves.cat/aqMq
● Semantic Views (mòdul) http://ves.cat/aqMr
● ...
30
31. HTML5 i Drupal
ADAPTEM EL NOSTRE TEMA (I)
● Ara mateix la única cosa que podem fer és
adaptar el nostre tema per utilitzar els nous
elements.
● Podem passar d'un tema en HTML4 a HTML5
només modificant una línia.
31
32. HTML5 i Drupal
ADAPTEM EL NOSTRE TEMA (II)
● page.tpl.php predeterminat (parlem en D6):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en" dir="ltr">
<head>...</head>
<body>
<div id="page">...</div>
</body>
</html>
32
33. HTML5 i Drupal
ADAPTEM EL NOSTRE TEMA (III)
● page.tpl.php en HTML5 (parlem en D6):
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>...</head>
<body>
<div id="page">...</div>
</body>
</html>
● Fàcil, no?
33
34. HTML5 i Drupal
ADAPTEM EL NOSTRE TEMA (IV)
● node.tpl.php predeterminat (parlem en D6):
<div class="node>
<h2>...</h2>
<div class="meta">
<span class="submitted">...</span>
</div>
<div class="content">...</div>
<?php print $links; ?>
</div>
34
35. HTML5 i Drupal
ADAPTEM EL NOSTRE TEMA (V)
● node.tpl.php en HTML5 (parlem en D6):
<article class="node>
<header>
<h2>...</h2>
<div class="meta">
<span class="submitted">...</span>
</div>
</header>
<div class="content">...</div>
<footer>
<?php print $links; ?>
</footer>
</article>
35
36. HTML5 i Drupal
ADAPTEM EL NOSTRE TEMA (i VI)
● Caldria fer alguna cosa més, però podem partir
d'algun tema ja fet:
● HTML5 Base http://ves.cat/aqMo
● Boron http://ves.cat/aqMW
● Boron for Zen http://ves.cat/aqMZ
● I molts més: http://ves.cat/aqMX
36
37. HTML5 i Drupal
MÒDULS I HTML5
● Com a idees de possibles mòduls que utilitzin
la potència d'HTML5 poden ser:
● Integració de l'api de geolocalització amb Location
● Nova memòria cau en local (possibles aplicacions
específiques)
● (... idees? ...)
37
38. CONCLUSIONS
● HTML5 ofereix un munt de possibilitats que
s'hauran de veure com evolucionen als
navegadors
● Actualment podem utilitzar ja parts de l'HTML5
en els nostres projectes
● I una vegada més, l'IE es despenja del grup de
navegadors que dóna suport a tecnologies
emergents (potser IE9...)
38
39. Recursos
● Dive into HTML5, Mark Pilgrim
http://diveintohtml5.org/
● HTML5 Reference, Metaltoad
http://www.metaltoad.com/html5
● HTML5 Reference, W3C
http://dev.w3.org/html5/html-author/
● HTML5 and Drupal Theming
http://ves.cat/aqM7
39