Desmitificant l'HTML5

2,598 views

Published on

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.

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,598
On SlideShare
0
From Embeds
0
Number of Embeds
340
Actions
Shares
0
Downloads
25
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Desmitificant l'HTML5

  1. 1. DESMITIFICANT LHTML5 Ramon Vilar Gavaldà
  2. 2. QUI SÓC ● Soci fundador dYmbra ● 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. 3. ÍNDEX01 CONCEPTES BÀSICS02 QUÈ ÉS LHTML503 NOVETATS04 HTML5 VS. FLASH05 HTML5 I DRUPAL06 CONCLUSIONS07 RECURSOS 3
  4. 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
  5. 5. QUÈ ÉS LHTML5 5
  6. 6. QUÈ ÉS LHTML5PRINCIPIS● “Simplement” és una revisió/actualització de lestàndard dHTML● Principis de disseny ● Suportar el contingut existent ● No reinventar la roda ● Degradar amb gràcia ● Evolució, no pas revolució ● Pave the Cowpaths 6
  7. 7. QUÈ ÉS LHTML5PER 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. 8. QUÈ ÉS LHTML5QUÈ 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. 9. QUÈ ÉS LHTML5SUPORT DELS NAVEGADORSFont: http://caniuse.com● Mentrestant podem utilitzar Modernizr o Shim ● http://www.modernizr.com/ http://remysharp.com/2009/01/07/html5-enabling-script/ 9
  10. 10. NOVETATS 10
  11. 11. NOVETATSSUPORT 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&amp;width=640&amp;height=360&amp;locksize=no&amp;dynamicseek=false&amp;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" /><paramname="allowfullscreen" value="true" /><embedtype="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&amp;width=640&amp;height=360&amp;locksize=no&amp;dynamicseek=false&amp;qc_publisherId=p-18-mFEk4J448M"></embed></object> 11
  12. 12. NOVETATSSUPORT 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
  13. 13. NOVETATSSUPORT MULTIMÈDIA: AUDIO● Igual que amb lelement /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 laudio que es reprodueix. 13
  14. 14. NOVETATSSUPORT 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. 15. NOVETATSSUPORT MULTIMÈDIA: CANVAS● “El forat negre”● Shi pot manipular tot tipus delements: imatges, vídeos, etc.● Shi pot dibuixar en 2D (i sestan fent proves per dibuixar en 3D).● És potser lelement més potent però a la vegada el més complex.● Shi poden fer des de gràfics de barres fins a jocs 3D complexos. 15
  16. 16. NOVETATSMILLORES 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
  17. 17. NOVETATSMILLORES ALS FORMULARIS (i II)● Nous atributs: <input placeholder="Introduïu el vostre nom" /> <div contenteditable="contenteditable">Editam!</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
  18. 18. NOVETATSETIQUETES SEMÀNTIQUES (I)● Noves etiquetes <header> <footer> <nav> <aside> <section> <article> <hgroup> <time>● Font: http://ves.cat/aqK_ 18
  19. 19. NOVETATSETIQUETES SEMÀNTIQUES (II) 19
  20. 20. NOVETATSETIQUETES SEMÀNTIQUES (i III) 20
  21. 21. NOVETATSSIMPLIFICACIÓ DELEMENTS (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
  22. 22. NOVETATSSIMPLIFICACIÓ DELEMENTS (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
  23. 23. NOVETATSNOVES APIs● Sinclouen 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. 24. NOVETATSUN 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 daltres tecnologies web 24
  25. 25. HTML5 VS. FLASH(FLEX, SILVERLIGHT, ETC.) 25
  26. 26. HTML5 vs. FlashANTECEDENTS DE GUERRA● Flash sempre ha estat lovella 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 lalternativa? Sí, però... 26
  27. 27. HTML5 vs. FlashQUI GUANYA I PER QUÈ● No hi ha guanyador. Tot depèn de perquè sutilitzi, però en general, i a curt termini, lHTML5 anirà suplantant molts desenvolupaments fets amb Flash.● Mancances de lHTML5 davant de Flash: ● Comunicació amb el maquinari: webcam, micròfon, ... ● Acceleració via maquinari ● ... 27
  28. 28. + =HTML5 I DRUPAL 28
  29. 29. HTML5 i DrupalSENSE SUPORT AL NUCLI (D6 i D7)● Actualment el Drupal 7 no té suport natiu per a lHTML5● Sestà coordinant un grup per proposar que el Drupal 8 tingui lHTML5 (i WAI-ARIA) de forma nativa al nucli Font: http://groups.drupal.org/html5 Més informació a: http://twitter.com/drupalhtml5. 29
  30. 30. HTML5 i DrupalEINES PER APLICAR HTML5● Encara que no hi hagi suport natiu actualment, amb lajuda dalgun 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. 31. HTML5 i DrupalADAPTEM EL NOSTRE TEMA (I)● Ara mateix la única cosa que podem fer és adaptar el nostre tema per utilitzar els nous elements.● Podem passar dun tema en HTML4 a HTML5 només modificant una línia. 31
  32. 32. HTML5 i DrupalADAPTEM 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. 33. HTML5 i DrupalADAPTEM 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. 34. HTML5 i DrupalADAPTEM 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. 35. HTML5 i DrupalADAPTEM 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. 36. HTML5 i DrupalADAPTEM EL NOSTRE TEMA (i VI)● Caldria fer alguna cosa més, però podem partir dalgun 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. 37. HTML5 i DrupalMÒDULS I HTML5● Com a idees de possibles mòduls que utilitzin la potència dHTML5 poden ser: ● Integració de lapi de geolocalització amb Location ● Nova memòria cau en local (possibles aplicacions específiques) ● (... idees? ...) 37
  38. 38. CONCLUSIONS● HTML5 ofereix un munt de possibilitats que shauran de veure com evolucionen als navegadors● Actualment podem utilitzar ja parts de lHTML5 en els nostres projectes● I una vegada més, lIE es despenja del grup de navegadors que dóna suport a tecnologies emergents (potser IE9...) 38
  39. 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
  40. 40. CONTACTEU ● Twitter: @rvilar ● Correu: ramon@ymbra.com ● Blog: http://ymbra.com/blogs/ramon ● Web: http://ymbra.com Gràcies a tots(es), preguntes? 40

×