HTML5, le nouveau buzzword
Upcoming SlideShare
Loading in...5
×
 

HTML5, le nouveau buzzword

on

  • 705 views

Une présentation sur HTML5 que j'ai présenté au Collège ISI

Une présentation sur HTML5 que j'ai présenté au Collège ISI

Statistics

Views

Total Views
705
Views on SlideShare
705
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5, le nouveau buzzword HTML5, le nouveau buzzword Presentation Transcript

  • HTML5, le nouveau buzzword Collège ISI - 2011-07-27 Frédéric Harper
  • Le type en avantFrédéric HarperÉvangéliste aux développeurs @ Microsoftfredh@microsoft.comBlogues, réseaux sociaux, contact…http://fredericharper.com
  • Les règles#1 – Présentation de style camp#2 – La loi des deux pieds
  • La présentation1. Qu’est-ce qu’HTML5?2. À titre d’étudiant, dois-je m’en soucier?
  • HTML5 et vousA. Vous l’utilisezB. Vous connaissez et vous allez l’utiliserC. … et vous n’allez pas l’utiliserD. Vous ne savez pas de quoi je parle
  • HTML5• Standard Web• La version suivante d’HTML4 (Je sais, je suis si brillant)• Brouillon• 9 nouvelles structures de tags• 16 nouveaux éléments HTML• 13 nouveau type d’entrées (input types)
  • Démo
  • header, footer, nav, aside, figure, section, article
  • Site Web traditionnel <div id=“header”> <div id=“nav”><div id=“section”> <div id=“article”> <div id=“sid <div id=“article”> ebar”> <div id=“media”> <div id=“footer”>
  • Site Web HTML5 (sémantique++) <header> <nav> <section> <article> <aside> <article> <figure> <footer>
  • svg
  • Démo
  • Code<svg width="400" height="200"> <rect fill="red" x="20" y="20" width="100"height="75" /> <rect fill="blue" x="50" y="50" width="100"height="75" /></svg>
  • canvas
  • Démo
  • Code<canvas id=“monCanvas" width="200" height="200"> Désolé, votre navigateur ne supporte pas HTML5</canvas><script type="text/javascript"> var exemple = document.getElementById(“monCanvas"); var contexte = exemple.getContext("2d"); contexte.fillStyle = "rgb(255,0,0)"; contexte.fillRect(30, 30, 50, 50);</script>
  • video, audio
  • Démo
  • Code<video src="video.mp4" id=“tagVideo"> <source src="video.webm" /> <a href="http://videolink.com/"> Désolé, votre navigateur ne supportepas HTML5 </a> <!– Vidéo Flash/Silverlight ici --></video>
  • Code<audio src="audio.mp3" id=“tagAudio"autoplay controls> <!– Audio Flash/Silverlight ici --></audio>
  • Géolocalisation
  • Démo
  • Codefunction getLocation() { if (navigator.geolocation != undefined) { navigator.geolocation.getCurrentPosition(callBack); }}function callBack(position) { var accuracy = position.coords.accuracy; var latitude = position.coords.latitude; var longitude = position.coords.longitude;}
  • Web Open FontFormat aka WOFF
  • Démo
  • Code<style type="text/css"> @font-face { font-family: MonFont; src: url(Font.woff); }</style><div style="font: 24pt MonFont, sans-serif;"> J’ajoute mon texte ici comme d’habitude</div>
  • CSS3 Media Queries
  • Démo
  • Code<link href="mobile.css" rel="stylesheet"media="screen and (max-width:480px)“type="text/css" /><link href="netbook.css" rel="stylesheet“media="screen and (min-width:481px) and (max-width: 1024px)“ type="text/css" /><link href="laptop.css" rel="stylesheet"media="screen and (min-width:1025px)“type="text/css" />
  • Libérez la vraipuissante du Web
  • Alors, est-ce qu’HTML5 est prêt? OUI et NON
  • Une solution, les polyfills Un correctif qui imite une API future, offrant des fonctionnalités de secours pour les navigateurs plus anciens.
  • Je suis un étudiant Vous utilisez probablement déjà HTML Pensez site Web ET mobile Surveillez les nouvelles technologies Une façon de sortir du lot
  • Prochaines étapes Essayez le Lisez sur le sujetFaire un projet extraordinaire Ayez du plaisir!
  • Ressourceshttp://www.w3.org/TR/html5/http://caniuse.comhttp://makeawesomeweb.comhttp://html5gallery.comhttp://html5labs.interoperabilitybridges.com/http://www.beautyoftheweb.com
  • Questions? Commentaires?Frédéric HarperÉvangéliste aux développeurs @ Microsoftfredh@microsoft.comBlogues, réseaux sociaux, contact…http://fredericharper.comhttp://linkedin.com/in/fredericharperhttp://twitter.com/fharperhttp://facebook.com/fharper