HTML5, le nouveau buzzword
Post on 07-Nov-2014
756 Views
Preview:
DESCRIPTION
Transcript
Collège ISI - 2011-07-27
Frédéric Harper
HTML5, le nouveau buzzword
Le type en avant
Frédéric Harper
Évangéliste aux développeurs @ Microsoft
fredh@microsoft.com
Blogues, réseaux sociaux, contact…
http://fredericharper.com
Les règles
#1 – Présentation de style camp
#2 – La loi des deux pieds
La présentation
1. Qu’est-ce qu’HTML5?
2. À titre d’étudiant, dois-je m’en soucier?
HTML5 et vous
A. Vous l’utilisez
B. Vous connaissez et vous allez l’utiliser
C. … et vous n’allez pas l’utiliser
D. 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)
header, footer, nav,
aside, figure,
section, article
<div id=“header”>
<div id=“footer”>
<div id=“sidebar”>
<div id=“nav”>
<div id=“article”>
<div id=“article”>
<div id=“media”>
<div id=“section”>
Site Web traditionnel
<header>
<footer>
<aside>
<nav>
<article>
<article>
<figure>
<section>
Site Web HTML5 (sémantique++)
svg
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 supporte
pas 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
Code
function 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 Font
Format aka WOFF
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 vrai
puissante du Web
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 sujet
Faire un projet extraordinaire
Ayez du plaisir!
Ressources
http://www.w3.org/TR/html5/
http://caniuse.com
http://makeawesomeweb.com
http://html5gallery.com
http://html5labs.interoperabilitybridges.com/
http://www.beautyoftheweb.com
Questions? Commentaires?
Frédéric Harper Évangéliste aux développeurs @ Microsoft
fredh@microsoft.com
Blogues, réseaux sociaux, contact…
http://fredericharper.com
http://linkedin.com/in/fredericharper
http://twitter.com/fharper
http://facebook.com/fharper
top related