Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Presentation xHtml5

1,187 views

Published on

Published in: Technology
  • Be the first to like this

Presentation xHtml5

  1. 1.
  2. 2. sommaire<br /> La naissance<br />Le document<br /> Les web forms<br />Le multimédia<br />L’avenir<br />15/06/2008<br />2<br />Université d&apos;Evry Val d&apos;Essonne<br />
  3. 3. La naissance<br /> HTML4 déjà vieux de 10 ans<br />Nombreuses balises obsolètes<br />Nouvelles attentes des webmasters et des internautes<br />Plus d’un an de travail du W3C pour définir le futur de l’HTML<br />15/06/2008<br />3<br />Université d&apos;Evry Val d&apos;Essonne<br />
  4. 4. Le document<br />Nouvelles balises:<br />Sémantiques (&lt;time&gt;, &lt;details&gt;,…)<br />Section de document (&lt;section&gt;, &lt;article&gt;, &lt;aside&gt;, &lt;header&gt;, &lt;footer&gt;, &lt;nav&gt;,…)<br />15/06/2008<br />Université d&apos;Evry Val d&apos;Essonne<br />4<br />
  5. 5. Le document<br />Les nouveaux événements JavaScript pris en compte par le HTML 5<br />Onabort<br />Onbeforeunload<br />Oncontextmenu<br />Ondrag<br />Ondragend<br />Ondragenter<br />15/06/2008<br />Université d&apos;Evry Val d&apos;Essonne<br />5<br />Ondragleave<br />Ondragover<br />Ondragstart<br />Ondrop<br />Onerror<br />Onstorage<br />
  6. 6. Le document<br />Vers un code plus lisible…<br />15/06/2008<br />Université d&apos;Evry Val d&apos;Essonne<br />6<br />&lt;body&gt;&lt;header&gt;<br /> &lt;h1&gt;Wake up sheeple!&lt;/h1&gt;<br /> &lt;p&gt;&lt;a href=&quot;news.html&quot;&gt;News&lt;/a&gt; -<br /> &lt;a href=&quot;blog.html&quot;&gt;Blog&lt;/a&gt; -<br /> &lt;a href=&quot;forums.html&quot;&gt;Forums&lt;/a&gt;&lt;/p&gt;<br /> &lt;/header&gt;<br /> &lt;nav&gt;<br /> &lt;h1&gt;Navigation&lt;/h1&gt;<br /> &lt;ul&gt;<br /> &lt;li&gt;&lt;a href=&quot;articles.html&quot;&gt;Index of all articles&lt;/a&gt;&lt;li&gt;<br /> &lt;li&gt;&lt;a href=&quot;today.html&quot;&gt;Things sheepleneed to wake up for today&lt;/a&gt;&lt;li&gt;<br /> &lt;li&gt;&lt;a href=&quot;successes.html&quot;&gt;Sheeple we have managed to wake&lt;/a&gt;&lt;li&gt;<br /> &lt;/ul&gt;<br /> &lt;/nav&gt;<br /> &lt;article&gt;<br /> &lt;p&gt;...page content wouldbehere...&lt;/p&gt;<br /> &lt;/article&gt;<br /> &lt;footer&gt;<br /> &lt;p&gt;Copyright © 2006 The ExampleCompany&lt;/p&gt;<br /> &lt;p&gt;&lt;a href=&quot;about.html&quot;&gt;About&lt;/a&gt; -<br /> &lt;a href=&quot;policy.html&quot;&gt;Privacy Policy&lt;/a&gt; -<br /> &lt;a href=&quot;contact.html&quot;&gt;Contact Us&lt;/a&gt;&lt;/p&gt;<br /> &lt;/footer&gt;&lt;/body&gt;<br />
  7. 7. Le document<br />Nouvelles balises sémantiques<br />&lt;aside&gt;<br />&lt;footer&gt;<br />&lt;header&gt;<br />&lt;dialog&gt;<br />&lt;q&gt;<br />&lt;cite&gt;<br />&lt;dfn&gt;<br />15/06/2008<br />Université d&apos;Evry Val d&apos;Essonne<br />7<br />&lt;time&gt;<br />&lt;meter&gt;<br />&lt;var&gt;<br />&lt;kbd&gt;<br />&lt;progress&gt;<br />&lt;samp&gt;<br />
  8. 8. Les web forms<br /> Extension des formulaires HTML<br /> Nouveaux types d’entrée<br />date<br />time<br />datetime<br />datetime-local<br /> month<br /> week<br />range<br /> number<br /> url<br /> email<br />15/06/2008<br />8<br />Université d&apos;Evry Val d&apos;Essonne<br />
  9. 9. Les web forms<br /> Nouveaux attributs<br /> min<br /> max<br />step<br />wrap<br /> Attributs dépréciés<br />size<br /> autocomplete<br />autofocus<br /> accept<br />list<br /> required <br /> pattern<br /> title<br />form<br />15/06/2008<br />9<br />Université d&apos;Evry Val d&apos;Essonne<br />
  10. 10. Les web forms<br /> Exemple (1)<br />&lt;form id=&apos;test&apos;action=&apos;test.php&apos; method=&apos;post&apos;&gt;<br />&lt;input name=&apos;email&apos; type=&apos;email&apos; autofocus=&apos;autofocus&apos; required/&gt; <br />&lt;input name=&apos;date&apos; type=&apos;date&apos; value=&apos;2008-12-31&apos;/&gt;<br /> &lt;input name=&apos;phone&apos; type=&apos;text&apos; autocomplete=&apos;off&apos; maxlength=&apos;10&apos;<br /> pattern=&apos;^0[1-68][0-9]{8}$&apos;<br /> title=&apos;Votre numéro de téléphone est incorrect&apos;/&gt;<br />&lt;input name=&apos;submit&apos; type=&apos;submit&apos; value=&apos;OK&apos;/&gt;<br />&lt;/form&gt;<br />I<br /> 2008-12-31<br />OK<br />15/06/2008<br />10<br />Université d&apos;Evry Val d&apos;Essonne<br />
  11. 11. Les web forms<br /> Exemple (2)<br />&lt;form id=&apos;nowhereform&apos;action=&apos;nowhere.php&apos;method=&apos;post&apos;&gt;<br />&lt;!– The query is only active for googleform and yahooform --&gt;<br /> &lt;input type=&apos;text&apos;name=&apos;query&apos;form=&apos;googleform yahooform&apos;/&gt;<br /> &lt;input type=&apos;submit&apos;name=&apos;nowhere&apos;value=&apos;Nowhere&apos;/&gt;<br />&lt;/form&gt;<br />&lt;form id=&apos;googleform&apos;action=&apos;google.php&apos;&gt;<br />&lt;input type=&apos;submit&apos;name=&apos;google&apos;value=&apos;Google&apos;&gt;<br />&lt;/form&gt;<br />&lt;form id=&apos;yahooform&apos;action=&apos;yahoo.php&apos;&gt;<br />&lt;input type=&apos;submit&apos;name=&apos;yahoo&apos;value=&apos;Yahoo&apos;/&gt;<br />&lt;/form&gt;<br />Google<br />Nowhere<br />Yahoo<br />15/06/2008<br />11<br />Université d&apos;Evry Val d&apos;Essonne<br />
  12. 12. Les web forms<br /> Nouveaux éléments<br /> datalist<br /> output<br /> Modèle de répétition<br />add<br />remove<br />move-up<br />move-down<br />15/06/2008<br />12<br />Université d&apos;Evry Val d&apos;Essonne<br />
  13. 13. Les web forms<br /> Exemple (3)<br />&lt;form id=&apos;test&apos;action=&apos;test.php&apos; method=&apos;post&apos;&gt;<br /> &lt;input type=&apos;url&apos; name=&apos;location&apos; list=&apos;urls&apos;/&gt;<br /> &lt;datalist id=&apos;urls&apos;&gt;<br /> &lt;option label=&apos;W3C&apos; value=&apos;http://www.w3c.org&apos;/&gt;<br /> &lt;option label=&apos;W3C Validator&apos; value=&apos;http://www.validator.w3.org&apos;/&gt;<br /> &lt;/datalist&gt;<br />&lt;/form&gt;<br />I<br /> W3<br />http://www.w3.org W3C<br />http://www.validator.w3.org W3C Validator<br />15/06/2008<br />13<br />Université d&apos;Evry Val d&apos;Essonne<br />
  14. 14. Les web forms<br /> Exemple (4)<br />&lt;form id=&apos;test&apos;action=&apos;test.php&apos; method=&apos;post&apos;&gt;<br /> &lt;input type=&apos;range&apos; name=&apos;power&apos; list=&apos;powers&apos; min=&apos;-100&apos; max=&apos;100&apos;/&gt;<br /> &lt;datalist id=&apos;powers&apos;&gt;<br /> &lt;option value=&apos;+50&apos;/&gt; &lt;!– invalid values are not displayed --&gt;<br /> &lt;option value=&apos;30&apos;/&gt;<br /> &lt;option value=&apos;0&apos; selected=&apos;selected&apos;/&gt;<br /> &lt;option value=&apos;-30&apos;/&gt;<br /> &lt;/datalist&gt;<br />&lt;/form&gt;<br />15/06/2008<br />14<br />Université d&apos;Evry Val d&apos;Essonne<br />
  15. 15. Les web forms<br /> Exemple (5)<br />&lt;form id=&apos;test&apos;action=&apos;test.php&apos; method=&apos;post&apos;&gt;<br /> &lt;input type=&apos;range&apos; name=&apos;power&apos; list=&apos;powers&apos; min=&apos;-100&apos; max=&apos;100&apos;/&gt;<br /> &lt;datalist id=&apos;powers&apos;&gt;<br /> &lt;option value=&apos;+50&apos;/&gt; &lt;!– invalid values are not displayed --&gt;<br /> &lt;option value=&apos;30&apos;/&gt;<br /> &lt;option value=&apos;0&apos; selected=&apos;selected&apos;/&gt;<br /> &lt;option value=&apos;-30&apos;/&gt;<br /> &lt;/datalist&gt;<br /> &lt;outputonformchange=&quot;value=power.value&quot;&gt;0&lt;/output&gt;<br />&lt;/form&gt;<br />30<br />15/06/2008<br />15<br />Université d&apos;Evry Val d&apos;Essonne<br />
  16. 16. Les web forms<br /> Exemple (6)<br />&lt;form id=&apos;test&apos;action=&apos;test.php&apos; method=&apos;post&apos;&gt;<br /> &lt;table&gt;<br /> &lt;thead&gt;<br /> &lt;tr&gt;<br /> &lt;th&gt;Product&lt;/th&gt;<br /> &lt;th&gt;Quantity&lt;/th&gt;<br /> &lt;/tr&gt;<br /> &lt;/thead&gt;<br /> &lt;/tbody&gt;<br /> &lt;tr id=&apos;order&apos; repeat=&apos;template&apos; repeat-start=&apos;3&apos;&gt;<br /> &lt;td&gt;&lt;input type=&apos;text&apos; name=&apos;row[order].product&apos; value=&apos;&apos;/&gt;&lt;/td&gt;<br /> &lt;td&gt;&lt;input type=&apos;number&apos; name=&apos;row[order].quantity&apos; value=&apos;1&apos;/&gt;&lt;/td&gt;<br /> &lt;td&gt;&lt;button type=&apos;remove&apos;&gt;Remove This Row&lt;/button&gt;&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;/tbody&gt;<br /> &lt;/table&gt;<br /> &lt;p&gt;&lt;button type=&apos;add&apos; template=&apos;order&apos;&gt;Add Row&lt;/button&gt;&lt;/p&gt;<br /> &lt;p&gt;&lt;button type=&apos;submit&apos; name=&apos;submit&apos;&gt;Submit&lt;/button&gt;&lt;/p&gt;<br />&lt;/form&gt;<br />15/06/2008<br />16<br />Université d&apos;Evry Val d&apos;Essonne<br />
  17. 17. Les web forms<br /> Exemple (6)<br />&lt;form id=&apos;test&apos;action=&apos;test.php&apos; method=&apos;post&apos;&gt;<br /> &lt;table&gt;<br /> &lt;thead&gt;<br /> &lt;tr&gt;<br /> &lt;th&gt;Product&lt;/th&gt;<br /> &lt;th&gt;Quantity&lt;/th&gt;<br /> &lt;/tr&gt;<br /> &lt;/thead&gt;<br /> &lt;/tbody&gt;<br /> &lt;tr id=&apos;0&apos;&gt;<br /> &lt;td&gt;&lt;input type=&apos;text&apos; name=&apos;row0.product&apos; value=&apos;&apos;/&gt;&lt;/td&gt;<br /> &lt;td&gt;&lt;input type=&apos;number&apos; name=&apos;row0.quantity&apos; value=&apos;1&apos;/&gt;&lt;/td&gt;<br /> &lt;td&gt;&lt;button type=&apos;remove&apos;&gt;Remove This Row&lt;/button&gt;&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr id=&apos;1&apos;&gt;<br /> &lt;td&gt;&lt;input type=&apos;text&apos; name=&apos;row1.product&apos; value=&apos;&apos;/&gt;&lt;/td&gt;<br /> &lt;td&gt;&lt;input type=&apos;number&apos; name=&apos;row1.quantity&apos; value=&apos;1&apos;/&gt;&lt;/td&gt;<br /> &lt;td&gt;&lt;button type=&apos;remove&apos;&gt;Remove This Row&lt;/button&gt;&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr id=&apos;2&apos;&gt;<br /> &lt;td&gt;&lt;input type=&apos;text&apos; name=&apos;row2.product&apos; value=&apos;&apos;/&gt;&lt;/td&gt;<br /> &lt;td&gt;&lt;input type=&apos;number&apos; name=&apos;row2.quantity&apos; value=&apos;1&apos;/&gt;&lt;/td&gt;<br /> &lt;td&gt;&lt;button type=&apos;remove&apos;&gt;Remove This Row&lt;/button&gt;&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;/tbody&gt;<br /> &lt;/table&gt;<br /> &lt;p&gt;&lt;button type=&apos;add&apos; template=&apos;order&apos;&gt;Add Row&lt;/button&gt;&lt;/p&gt;<br /> &lt;p&gt;&lt;button type=&apos;submit&apos; name=&apos;submit&apos;&gt;Submit&lt;/button&gt;&lt;/p&gt;<br />&lt;/form&gt;<br />15/06/2008<br />17<br />Université d&apos;Evry Val d&apos;Essonne<br />
  18. 18. Les web forms<br /> Nouveaux évènements et améliorations<br /> onchange<br /> onformchange<br />oninput<br />onforminput<br />oninvalid<br />15/06/2008<br />18<br />Université d&apos;Evry Val d&apos;Essonne<br /> onsubmit<br /> onreset<br /> onreceived<br /> onDOMControlValueChanged<br />
  19. 19. Les web forms<br /> Exemple (7)<br />&lt;head&gt;<br />&lt;!– Some heading instructions here, before JavaScript --&gt;<br />&lt;script type=&apos;text/javascript&apos;&gt;<br />&lt;![CDATA[<br /> function failed(event) {<br /> var form = event.target.form;<br /> form.error.value = &apos;The value is wrong for a reason I did not expect.&apos;;<br /> if (event.target.validity.typeMismatch)<br /> form.error.value = &apos;You must enter a number.&apos;;<br /> else if (event.target.validity.stepMismatch)<br /> form.error.value = &apos;Fractional numbers are not allowed.&apos;;<br /> else if (event.target.validity.rangeUnderflow)<br /> form.error.value = &apos;The number must be zero or greater.&apos;;<br /> else if (event.target.validity.rangeOverflow)<br /> form.error.value = &apos;The number must be 255 or less.&apos;;<br /> else if (event.target.validity.valueMissing)<br /> form.error.value = &apos;You must enter a number.&apos;;<br /> event.preventDefault(); /* don&apos;t want the User Agent to do its own reporting */<br /> }<br /> ]]&gt;<br /> &lt;/script&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;form id=&apos;test&apos;action=&apos;test.php&apos; method=&apos;post&apos;&gt;<br /> &lt;label&gt;order:&lt;/label&gt;<br /> &lt;input name=&apos;order&apos; type=&apos;number&apos; min=&apos;0&apos; max=&apos;5&apos; required=&apos;required&apos; oninvalid=&quot;javascript:failed(event);&quot;/&gt; <br /> &lt;output name=&apos;error&apos;/&gt;<br /> &lt;/form&gt;<br />&lt;/body&gt;<br />15/06/2008<br />19<br />Université d&apos;Evry Val d&apos;Essonne<br />
  20. 20. Les web forms<br /> Nouveaux selecteurs<br /> :enabled<br /> :disabled<br />:checked<br />:indeterminate<br />:default<br />:valid<br />:invalid<br />15/06/2008<br />20<br />Université d&apos;Evry Val d&apos;Essonne<br /> :in-range<br />:out-of-range<br />:required<br />:optional<br />:redonly<br />:read-write<br />
  21. 21. Le multimédia<br />Balise &lt;canvas&gt;<br />Création d’éléments graphiques simples ou complexes<br />La méthode getContext()<br />Accès aux fonctions de dessin<br />Une forme primitive : le rectangle<br />15/06/2008<br />Université d&apos;Evry Val d&apos;Essonne<br />21<br />
  22. 22. Le multimédia<br />Une forme primitive : le rectangle<br />15/06/2008<br />Université d&apos;Evry Val d&apos;Essonne<br />22<br />beginPath() // Débute la création d’un cheminclosePath() // Ferme le cheminstroke() // Dessine le bord d’une formefill() // créée une forme pleine<br />functiondraw(){ <br /> var canvas = document.getElementById(&apos;rapport&apos;); <br />if (canvas.getContext){ <br />varctx = canvas.getContext(&apos;2d&apos;); ctx.fillRect(25,25,100,100); //rectangle plein ctx.clearRect(45,45,60,60); //Zone éffacéectx.strokeRect(50,50,50,50); //rectangle vide <br /> }<br />}<br />
  23. 23. Le multimédia<br />Formes géométriques et dessins de chemin<br />moveTo() - lineTo() – arcTo()<br />quadraticCurveTo() / bezierCurveTo()<br />15/06/2008<br />Université d&apos;Evry Val d&apos;Essonne<br />23<br />
  24. 24. Le multimédia<br />Les Animations<br />Etapes <br />15/06/2008<br />Université d&apos;Evry Val d&apos;Essonne<br />24<br />
  25. 25. Le multimédia<br />Les images<br />Récupération d’une image<br />A partir de rien<br />A partir d’un lien URL<br />La méthode drawImage()<br />Affichage sur le canevas<br />15/06/2008<br />Université d&apos;Evry Val d&apos;Essonne<br />25<br />
  26. 26. Le multimédia<br />Styles et couleurs<br />Couleurs<br />Styles de ligne<br />Transparence<br />Dégradés<br />Motifs<br />15/06/2008<br />Université d&apos;Evry Val d&apos;Essonne<br />26<br />
  27. 27. Le multimédia<br />Les transformations<br />Translation<br />Rotation<br />Mise à l’échelle<br />Les compositions<br />La propriété « globalCompositeOperation »<br />Dessiner<br />Masquer des zones du canevas<br />effacer<br />Chemins et découpe<br />15/06/2008<br />Université d&apos;Evry Val d&apos;Essonne<br />27<br />
  28. 28. Le multimédia<br />Exemple d’implémentation de base<br />15/06/2008<br />Université d&apos;Evry Val d&apos;Essonne<br />28<br />&lt;html&gt; <br />&lt;head<br />&lt;title&gt;Canvas tutorial&lt;/title&gt;<br /> &lt;script type=&quot;text/javascript&quot;&gt;<br />functiondraw(){ <br /> var canvas = document.getElementById(&apos;rapport&apos;); <br /> if (canvas.getContext){ <br />var ctx = canvas.getContext(&apos;2d&apos;); <br />} <br />}<br /> &lt;/script&gt; <br /> &lt;style type=&quot;text/css&quot;&gt; canvas { border: 1px solid black; } &lt;/style&gt; <br />&lt;/head&gt; <br />&lt;body onload=&quot;draw();&quot;&gt; <br />&lt;canvasid= &quot;rapport&quot;width=&quot;150&quot;height=&quot;150&quot;&gt;<br />&lt;/canvas&gt; <br />&lt;/body&gt;<br />&lt;/html&gt;<br />
  29. 29. Le multimédia<br />La balise Vidéo<br />Controls : spécifier le démarrage automatique<br />Poster : image pour les navigateurs qui ne supportent pas les vidéos<br />La balise Audio<br />Conteneur d’objets sonores<br />15/06/2008<br />Université d&apos;Evry Val d&apos;Essonne<br />29<br />&lt;videosrc=&apos;video.avi&apos; controls poster=&apos;poster.jpg‘ width=&apos;320&apos; height=&apos;240&apos;&gt;<br />&lt;/video&gt;<br />&lt;audio&gt; <br /> &lt;a href=&apos;music.mp3&apos;&gt;Download song&lt;/a&gt; <br />&lt;source src=&apos;music.mp3&apos; type=&apos;audio/mpeg&apos;&gt;<br />&lt;/audio&gt;<br />
  30. 30. L’avenir<br />Intégration par les navigateurs<br />Utilisation par les développeurs<br />15/06/2008<br />Université d&apos;Evry Val d&apos;Essonne<br />30<br />

×