• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5
 

HTML5

on

  • 299 views

Introduction aux concepts HTML5. Présentation et exemples de quelques fonctionnalités.

Introduction aux concepts HTML5. Présentation et exemples de quelques fonctionnalités.

Statistics

Views

Total Views
299
Views on SlideShare
299
Embed Views
0

Actions

Likes
0
Downloads
1
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 HTML5 Presentation Transcript

    • LOGO du client HTML 5 #nov-2013 Auteurs : Olivier Boitel et Pierre Besson
    • Historique • HTML 1991 • Le web devient public • HTML 2 et Netscape 1.0 1994 • Naissance du W3C 1996 2000 • CSS/Javascript • XHTML • Web 2.0 2005 • Ajax, naissance des réseaux sociaux 2009 • HTML5 HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • Avant HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • Réconciliation et expression du besoin 2004: W3C workshop on web application and compound documents Clear Migration Usage Non bloquant Conciliation Processus ouvert Simplicité Continuité technologique Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • Chronologie 2014 W3C recommandation 2009 XHTML 2.0 Abandon XHTML 2.0 2004 Début des spécifications HTML 5 HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • Un modèle en évolution Page Client UI Client HTML/CSS HTML/CSS/JS Server Browser Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • Un modèle en évolution Page Client UI Client HTML/CSS HTML/CSS/JS Ajax Data services REST JSON Ajax API REST Application layer Javascript Ajax Server Browser API REST Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • Web app Web UI Web HTML/CSS Client UI HTML/CSS Application layer Javascript Data services REST JSON Ajax Data access layer Javascript Local storage HTML5 Server Client HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • Comment Comment ? Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • Les technologies Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • Les navigateurs Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • Comparaison des fonctionnalités Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • Comparaison des fonctionnalités Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • Implémentation des fonctionnalités Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • Course à la performance Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • Indicateurs de performance Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • Part de marché Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • Outils de développement Ressouces Traffic Réseau Debugger Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • Evangéliste et Guru Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • Focus sur les fonctionnalités HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • Fonctionnalités HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • #Semantic Sémantique  Pourquoi ? • Améliorer l’interprétation du contenu par des tiers • Moteur de recherche • Browser • Identifier la nature d’un contenu • Simplifier le contenu des pages  Comment ? • • • • Une page décrit son propre contenu (découpage sémantique) Le contenu est accessible et utilisable Nouvelles fonctionnalités de formulaires Diminution des éléments de style pour décrire le contenu (Ids, class) HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • #Semantic Éléments HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • #Semantic Avant <div id="header"> <div id="nav"> <div id="section"> <div id="sidebar"> <div id="article"> <div id="footer"> HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • #Semantic Avec HTML 5 <header> <nav> <section> <aside> <article> <footer> http://jsfiddle.net/vwL3W/ HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • #Semantic Data type HTML5 http://jsfiddle.net/pierr/SRQ4d/5/embedded/result/ Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • #Mobilité Gestion du Offline Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • #Mobilité Stockage de ressources AppCache Mécanisme de mise à jour Possibilité de navigation offline Utile même en online http://appcachefacts.info/ Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • #Mobilité AppCache Checking MANIFEST HTML No Update Update JS Download CSS IMAGES End FILES Browser Serveur Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • #Mobilité DOM Storage Nom de domaine Clef Valeur lang fr http://jsfiddle.net/pierr/RTD7E/ Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • #Responsive CSS 3 Media Queries http://www.alsacreations.fr/ HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • #DataViz CSS3 transformations rotate translate scale matrix http://jsfiddle.net/pierr/fw5jQ/1/embedded/result/ Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • #DataViz SVG – dessin vectoriel Déclaratif DOM Vecteur http://jsfiddle.net/eVRq7/ HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • #DataViz Canvas – dessin Bitmap Programmation JavaScript Dessin au pixel HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • #RealTime Data visualisation temps réel Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • #RealTime WebSocket Client Client HTML/CSS/JS HTML/CSS/JS Serveur Action Réaction Application layer Application layer Javascript Javascript Notification Notification Browser Web Socket Any other Browser Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • #RealTime Socket.io http://socket.io/ Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • #GeoLoc Geolocation API http://jsfiddle.net/pierr/rNJ4B/ Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • Device Orientation http://jsfiddle.net/pierr/P6jfx/embedded/result/ Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • Bilan Fonctionnalités #GeoLoc #DataViz #Semantic #RealTime #Responsive #Mobilité HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • Points d’attention http://caniuse.com HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • Points d’attention HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • Points d’attention HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • #Technos #Navigateurs Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
    • En savoir plus http://html5weekly.com/ Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013