Loading...

Cette présentation est un site HTML5

Appuyez sur la touche → pour avancer.

Contrôles :

  • ← et → pour vous déplacer.
  • Ctrl/Command et + ou - pour zoomer/dézoomer.
  • H pour afficher/cache la syntaxe.

Le Web a-t-il besoin de HTML5 ?

  • Patrick Antivackis

    Directeur Technique

  • Grégory Paul

    Développeur Agile

Plan

  • Contexte
  • HTML5 :
    • Sémantique,
    • Multimédia,
    • CSS3,
    • Connectivité,
    • Stockage & Offline,
    • Performances,
    • Périphériques,
    • Graphisme 2D & 3D.
  • Support
  • Besoin ?

Contexte

Historique

  • 1991 HTML
  • 1996 CSS & JS
  • 1998 CSS2
  • 1999 HTML4.01
  • 2000 XHTML
  • 2002 Tableless design
  • 2004 WHATWG
  • 2005 AJAX
  • 2007 XHTML2, WHATWG → W3C
  • 2009 Fin XHTML2
  • 2011 HTML5, CSS3 & JS

HTML5 ?

HTML5 ~= 
HTML
+ 
CSS
+ 
JavaScript
+ 
SVG
+ 
WebGL

HTML5

Logo HTML5

Sémantique

Sémantique

Nouvelles balises

<body> 
  <header> 
  <nav>...
  <section> 
    <article>
      ...
      <aside>...</aside> 
      <time datetime="2010-03-17">17 mars 2010</time> 
    </article> 
  </section> 
  <footer>...
</body>

Microformat

<div id="hcard-Patrick-Antivackis" class="vcard">
 <span class="fn">Patrick Antivackis</span>
 <div class="org">Valtech</div>
 <div class="adr">
   <div class="street-address">103, rue de Grenelle</div>
   <span class="locality">PARIS</span>
   <span class="postal-code">75006</span>
</div>
Patrick Antivackis
Valtech
103, rue de Grenelle
PARIS 75006
Google

Microdata

<p itemscope itemtype="http://schema.org/Person">
  Je m'appelle <span itemprop="name">Grégory</span>,
  je suis <span itemprop="jobTitle">développeur Web</span> et
  je suis un ami de <span itemprop="relatedTo">Patrick</span>.
</p>

Je m'appelle Grégory, je suis développeur Web et je suis un ami de Patrick.

Formulaires

<input type=email placeholder="example@domain.com" required>

input:invalid    { background-color: #C00; } // fond rouge si invalide
input[required]  { border: 2px solid #654; } // bordure épaisse si requis











Multimédia

Multimédia

Audio

<audio controls loop preload>
  <source src="valtech.aac" />
  <source src="valtech.ogg" />
  <source src="valtech.mp3" />
  <!-- solution alternative (flash) pour les anciens navigateurs -->
</audio>

Vidéo

<video controls loop preload>
  <source src="valtech.mp4" />
  <source src="valtech.webm" />
  <source src="valtech.ogv" />
  <!-- solution alternative (flash) pour les anciens navigateurs -->
</video>

CSS3

CSS3

Web Fonts

Embarquez vos polices :

@font-face {
   font-family: 'Just Another Hand';
   src: local('Just Another Hand'),
        url('Just+Another+Hand.eot'),
        url('Just+Another+Hand.ttf') format('truetype'),
        url('Just+Another+Hand.woff') format('woff'); 
}
<p contentEditable>Voici une phrase en police [...]</p>

Voici une phrase en police 'Just Another Hand', où le texte est directement éditable.

Multi-columns & Media-queries

@media (screen and min-width:400px) {
  p { column-count: 1; }
}
@media (screen and min-width:800px) {
  p { column-count: 2; column-rule: 1px solid grey; column-gap: 1em; }
}
@media (screen and min-width:1000px) {
  p { column-count: 3; column-rule: 1px solid grey; column-gap: 1em; }
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula nunc eu lorem mattis at vehicula ligula semper. In nec leo id justo ornare pellentesque. Cras neque velit, ullamcorper in malesuada vitae, hendrerit a justo. Ut vel convallis justo. Vestibulum nec urna ut sapien ullamcorper tempus. Etiam venenatis tristique neque in blandit. Praesent pretium, ante quis tristique porttitor, tortor diam tincidunt nibh, non tincidunt odio nisi fermentum odio. Donec malesuada est vel felis placerat nec faucibus nulla mattis. Suspendisse potenti. Praesent tellus erat, ullamcorper vitae pulvinar non, luctus ut leo. Maecenas et mauris id enim viverra tristique. Suspendisse tincidunt libero et dui ultricies at mollis elit gravida. Suspendisse ullamcorper neque non diam pretium pretium. Nunc laoreet, massa vitae suscipit condimentum, neque nibh auctor dolor, et elementum metus dolor imperdiet purus. Pellentesque laoreet lacus quis augue convallis ut convallis risus volutpat. Nunc vestibulum ultrices mi, vitae scelerisque libero lacinia et. Aenean id

Coins arrondis

p {
  border: 2px solid #654;
  border-radius: 10px;
}


Quelques
lignes de
texte

Dégradés

p.linear {
 background: gradient(linear, left top, right bottom, 
   from(orange), to(red), color-stop(0.5, yellow));
}
p.radial {
 background: gradient(radial, 100 100, 0, 100 100, 100, 
   from(orange), to(white));
}

Transitions, animations

.animate { 
  transition: all 1s ease-in-out; 
  transform: rotate(360deg) translate(0,4em) scale(1.6);
}


Connectivité

Connectivité

WebSocket

Connexion permanente bi-directionnelle :

var ws = new WebSocket('ws:///');
ws.send('here my data');
ws.onmessage = function(message) {
	someCode();
}

A vous de jouer : http://localhost/

Stockage & Offline

Stockage & offline

localStorage et sessionStorage

Persistez des données entre plusieurs pages :

sessionStorage['key'] = value;

// Quelques pages plus tard...
var value = sessionStorage['key'];

localStorage['key'] = value;

// Quelques jours plus tard...
var value = localStorage['key'];

IndexedDB

  • Base de données clé/valeur,
  • par domaine,
  • transactionelle,
  • avec des index de recherche.

Offline

Naviguez sans être connecté :

<html manifest="cache-manifest">

CACHE MANIFEST
index.html
style/default.css
images/logo.png
images/backgound.png

NETWORK:
server.cgi

Performances

Performance

WebWorkers

Déportez vos traitements lourds :

new Worker('primeResolver.js');
worker.postMessage("{ 'action': 'compute'}");

Horloge :

Accès aux périphériques

Accès aux périphériques

Géolocalisation

navigator.geolocation.getCurrentPosition(function(position) {
 // latitude, longitude, altitude, précision, direction, vitesse
});

Carte

Accéléromètre

Relevez les capteurs :

document.addEventListener("orientationchange", function(orient) {
 // axes alpha, beta et gamma
});

Orientation

Graphisme 2D et 3D

Graphisme 2D et 3D

SVG

Dessinez en vectoriel :

<svg><circle cx=150 cy=150 r=100 fill=orange /></svg>

Canvas

Dessinez vos graphiques :

<canvas width=400 height=400>
var ctx = canvas.getContext("2d"); // Accès à la zone de dessin
ctx.moveTo(10, 10);
ctx.lineTo(50, 50);

Canvas

Manipulez vos images :

var pixels = ctx.getImageData(0,0,width,height); // Accès aux pixels

Canvas

Manipulez vos vidéos :



WebGL

Désolé, votre navigateur ne supporte pas WebGL.

Chargement...

Désolé, votre navigateur ne supporte pas WebGL

Source: Ambiera.com recharger la page

Support

Support de HTML5

Browsers War 2.0

  • Navigateurs récents (Chrome 12, Safari 5, Firefox 4)★★★★★
  • Navigateurs mobiles (iOS 4.3, Android 3.1)★★★★
  • Internet Explorer 9 ★★

Besoin ?

Standards du Web

w3C logo

Technologie native

Erreur flash

Multi-plateformes

Windows Apple Linux
Android iOS Symbian
Windows Phone Blackberry Palm WebOs

Adoption rapide

source

Amélioration progressive

Pourquoi pas

?

Fondations pour le futur

Besoin ?

Oui, pour construire les applications Web présentes et à venir, nous avons besoin du HTML5 !

Questions ?

Le Web a-t-il besoin de HTML5 ?