Desmitificant l'HTML5

DESMITIFICANT
L'HTML5
Ramon Vilar Gavaldà

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

Í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

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

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

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

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

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

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/fla
sh/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&locks
ize=no&dynamicseek=false&qc_publisherId=p-18-
mFEk4J448M"></embed></object>
11

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>

12

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

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

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

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

16

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

NOVETATS
ETIQUETES SEMÀNTIQUES (I)
● Noves etiquetes
<header>
<footer>
<nav>
<aside>
<section>
<article>
<hgroup>
<time>

● Font: http://ves.cat/aqK_
18

NOVETATS
ETIQUETES SEMÀNTIQUES (II)

19

NOVETATS
ETIQUETES SEMÀNTIQUES (i III)

20

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

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

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

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

HTML5 VS. FLASH
(FLEX, SILVERLIGHT, ETC.)

25

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

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

+ =

HTML5 I DRUPAL
28

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

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

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

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

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

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

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

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

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

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

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

CONTACTEU

● Twitter: @rvilar
● Correu: ramon@ymbra.com

● Blog: http://ymbra.com/blogs/ramon

● Web: http://ymbra.com

Gràcies a tots(es), preguntes?

40

Desmitificant l'HTML5

Recomendados

Recomendados

Más contenido relacionado

Similar a Desmitificant l'HTML5

Similar a Desmitificant l'HTML5 (20)

Desmitificant l'HTML5