desmitificant l'html5
DESCRIPTION
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.TRANSCRIPT
DESMITIFICANT L'HTML5
Ramon Vilar Gavaldà
2
QUI SÓC
Ramon Vilar Gavaldà
http://ymbra.com/blogs/ramon
http://twitter.com/rvilar
http://drupal.org/user/293298
● Soci fundador d'Ymbra● Desenvolupador Drupal● Desenvolupador front-end amb
àmplia experiència en estàndards● Membre actiu de la comunitat
drupalera:● Membre de la junta de drupal.cat● Administrador de la traducció
catalana del Drupal
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
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">
● DOMdocument.body.innerHTML = '<h1>Drupal rulez</h1>';
● APIdocument.getElementById('my-id')
● HTML5 != CSS3
5
QUÈ ÉS L'HTML5
6
● “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
QUÈ ÉS L'HTML5
PRINCIPIS
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
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
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/
10
NOVETATS
11
NOVETATS
SUPORT MULTIMÈDIA: VÍDEO (I)
● WTF?<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="640" height="360" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="flashvars" value="guid=BQtfIEY1&width=640&height=360&locksize=no&dynamicseek=false&qc_publisherId=p-18-mFEk4J448M" /><param name="src" value="http://v.example.com/media/plugins/video/flvplayer.swf?ver=1.21" /><param name="wmode" value="transparent" /><param name="allowfullscreen" value="true" /><embed type="application/x-shockwave-flash" width="640" height="360" src="http://v.example.com/media/plugins/video/flvplayer.swf?ver=1.21" allowfullscreen="true" wmode="transparent" flashvars="guid=BQtfIEY1&width=640&height=360&locksize=no&dynamicseek=false&qc_publisherId=p-18-mFEk4J448M"></embed></object>
12
NOVETATS
SUPORT MULTIMÈDIA: VÍDEO (i II)
● Millor, oi?<video src="movie.mp4"></video>
● Amb alguns atributs<video controls="controls" width="360" height="240" poster="preview.jpg" src="movie.mp4"></video>
● Recurs depenent del còdec<video controls="controls" width="360" height="240”> <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'></video>
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.
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...)
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.
16
NOVETATS
MILLORES ALS FORMULARIS (I)
● Nous tipus de camps:<input type="tel" />
<input type="email" />
<input type="url" />
<input type="number" />
<input type="range" />
<input type="date" />
<input type="month" />
<input type="week" /> ...
<input type="search" />
<input type="color" />
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" />
18
NOVETATS
ETIQUETES SEMÀNTIQUES (I)
● Noves etiquetes<header>
<footer>
<nav>
<aside>
<section>
<article>
<hgroup>
<time>
● Font: http://ves.cat/aqK_
19
NOVETATS
ETIQUETES SEMÀNTIQUES (II)
20
NOVETATS
ETIQUETES SEMÀNTIQUES (i III)
21
NOVETATS
SIMPLIFICACIÓ D'ELEMENTS (I)
● DOCTYPE<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html>
● Codificació<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta charset="UTF-8" />
22
NOVETATS
SIMPLIFICACIÓ D'ELEMENTS (i II)
● Scripts<script type="text/javascript" src="foo.js"></script>
<script src="foo.js"></script>
● Estils<link type="text/css" rel="stylesheet" media="screen" href="bar.css" />
<link rel="stylesheet" media="screen" href="bar.css" />
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
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
25
HTML5 VS. FLASH (FLEX, SILVERLIGHT, ETC.)
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ò...
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● ...
28
+ =
HTML5 I DRUPAL
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.
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 ● ...
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.
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>
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?
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>
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>
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
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? ...)
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...)
39
Recursos
● Dive into HTML5, Mark Pilgrimhttp://diveintohtml5.org/
● HTML5 Reference, Metaltoadhttp://www.metaltoad.com/html5
● HTML5 Reference, W3Chttp://dev.w3.org/html5/html-author/
● HTML5 and Drupal Theminghttp://ves.cat/aqM7
40
CONTACTEU
● Twitter: @rvilar● Correu: [email protected]● Blog: http://ymbra.com/blogs/ramon● Web: http://ymbra.com
Gràcies a tots(es), preguntes?