Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

HTML5, état de l'art et impact sur les solutions open-source

Enjeux et historique du web design / Quoi de neuf au pays des balises? / Quel impact sur l'open-source?
by

Vincent Maucorps

on 26 November 2012

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of HTML5, état de l'art et impact sur les solutions open-source

Enjeux et historique
du web design Quoi de neuf au
pays des balises? Quel impact
sur l'open-source? Vincent Maucorps 10 ans d'expérience dans les technologies web
Actuellement consultant avant-vente chez Smile LinkedIn http://www.linkedin.com/in/vincentmaucorps Twitter @vmaucorps
@GroupeSmile 20 ans d'expérience 1er intégrateur Européen de solutions open source Une vision simple, utile & performant Chiffres clés 2011 37 M€ de chiffre d'affaires
47% de croissance
600 Collaborateurs Large gamme d'outils CMS - Gestion de contenu
E-Commerce
ERP / CRM
DMS
Décisionnel - Business Intelligence
Portails Smile
Interactive Identité visuelle
Iconographie
Charte graphique
Architecture de l'information
Ergonomie
Accessibiltié
Story-board Smile
Consulting Etude préalable
Audit
Consulting
AMOA
Cahier des charges
Benchmarking Smile
Ingénierie Intégration de solutions techniques
Développements spécifiques
Modules open-source Smile
Système Architecture
Sécurité
Test de charges
Surveillance
Hébergement & services associés Smile
TMA Maintenances correctives
Maintenances adaptatives
Maintenances évolutives Notre Savoir-faire Une offre globale & intégrée Smile Mobile Smile Training Étude du contexte Les 6 clés
de la réussite Historique
du HTML TOP 4
des nouveautés Un travail
d'intégrateur Ce qui a changé Quelques chiffres Un sujet majeur Peu d'impact
sur certains secteurs Pendant longtemps l'évolution des terminaux était prévisible.... ... on assiste désormais à une multiplication des terminaux.... Desktop Smartphone Tablette Impression ... et des usages! Comment gérer cette complexité? Ajouter des paillettes? Coins arrondis Texture Ombre Reflets Dégradés Transitions Revenir au fondamentaux Pourquoi hiérarchiser l'information? Hiérarchie S'inspirer
du print Composition Rendre le contenu lisible hors design Sémantique Indépendance
vis-à-vis
des terminaux Des principes indémodables Typographie Ouverture ces paillettes rendent-elles le bouton plus "désirable"? c'est peu probable... Pour rendre les informations facilement accessibles
Pour améliorer la lisibilité des pages
Pour procurer un sentiment de maîtrise du site chez l’internaute
Pour canaliser l’actualisation des contenus A l'origine du HTML
Conséquence logique du design Moteur de recherche
Référencement
Accessibilité Un objectif facilité par le HTML5 Responsive design
CSS3 Media queries Afficher la source ... et autres outils firebug
google chrome
... 1990 - Tim Berners Lee Inventeur du HTML Les premières page web 2000 - Jeffrey Zeldman Lancement du Web Standards Project
Popularité progressive de l'utilisation HTML+CSS Wired CSS Zen Garden 2010 - Ian Hickson "Editor" du groupe de travail dédié au HTML5 <title>Hypertext Links</title>
<h1>Links and Anchors</h1>
A link is the connection between one piece of
<a href=WhatIs.html>hypertext</a> and another. <TITLE>Hypertext HTML formatting example</TITLE>
<NEXTID 11>
<H1>Test Dataset</H1>This is an example bit of hypertext - compare the formatted version
with the <A NAME=10 HREF=test_source.txt>original HTML source</A>. Let's try introducing an initial paragrpah
between the H1 and the H2 headings.

<H2>Introduction</H2>This file contains a test set of HTML mark-up, as a test of hypertext
browsers and an example of the syntax of the tags. See also:
<UL>
<LI><A NAME=0 HREF=news:1990Oct17.231522.17662@midway.uchicago.edu>An arbitrary news article</A>
<LI><A NAME=1 HREF=news:alt.hypertext>The newsgroup on hypertext</A>
<LI><A NAME=2 HREF=../TheProject.html>More details about the WWW project.</A>
</UL>That is the end of the list.

<H2>Some anchors</H2>Anchors come in two forms: whole nodes or parts of nodes. The line
mode browser can't currently (Nov 91) jump to a part of a node: it
always jumps to the top. Sémantique proche du HTML5
Indépendance vis-à vis des terminaux L'origine du HTML http://www.w3.org/History/19921103-hypertext/hypertext/WWW/Link.html http://www.w3.org/History/19921103-hypertext/hypertext/WWW/Test/test.html Le 11 Octobre 2002, Wired a ouvert un site redesigné en profondeur, basé sur l'utitilisation de XHTML validé pour sa structure et de styles CSS pour sa mise en page. XHTML 1.1 plus contraignant que le XHTML 1.0 (vrai XML)
Le W3C oublie la pratique des web designer pour se focaliser sur la pureté théorique
XHTML 2 incompatible avec le contenu existant du web Rébellion face à la volonté d’imposer le formalisme du langage XML Opera, Apple, et Mozilla déçus par le W3C (souhait de construire des applications web)
2004 : Ian Hickson (Opera) voit sa proposition d’orienter le HTML vers la construction d’applications rejetée
Les rebelles du W3C fondent le Web Hypertext Application Technology Working Group (WHATWG) Schisme et création du WHATWG l'éditor, Ian Hickson, dicte la décision finale après débats
Web Forms et Web Apps fusionnent HTML5 Fonctionnement moins démocratique que le W3C XHTML 2
HTML 5
Deux langages différents et incompatibles Le W3C travaille sur Le W3C avance sur le XHTML2 (ils ne foncaient pas dans le mur, ils y allaient très lentement) Fonctionnement plus efficace que le W3C HTML5
Base pour l’une des spécification du W3C En 2009, mort du XHTML2, HTML 5 devient HTML5 WHATWG : Commit-Then-Review
W3C : Review-Then-Commit Le WHATWG travaille sur Évolution des aspects sémantiques
Simplification de la syntaxe
Nouvelles balises < section>, <nav>... <time>, <mark> <a> : la spécification de met en accord avec ce que fond les navigateurs Disparition de balises
Apparition de la Documentation des API javascript Évolutions de balises Quelques chiffres 39 nouveaux éléments
36 nouveaux attributs
19 nouvelles APIs (au moins)
185 lignes dans le changelog Source http://bit.ly/html5-diff
http://bit.ly/html5-apis Rich Media Formulaires
améliorés Nouveaux
éléments
sémantiques Éléments
simplifiés Audio & Vidéo Ça vous dit quelque chose ? <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
width="640" height="360" codebase="http://
download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=6,0,40,0"><param name="flashvars"
value="guid=BQtfIEY1&amp;width=640&amp;height=360&amp;locksiz
e=no&amp;dynamicseek=false&amp;qc_publisherId=p-18-
mFEk4J448M" /><param name="src" value="http://v.example.com/
media/plugins/video/flvplayer.swf?ver=1.21" /><param
name="wmode" value="transparent" /><param
name="allowfullscreen" value="true" /><embed
type="application/x-shockwave-flash" width="640" height="360"
src="http://v.example.com/media/plugins/video/flvplayer.swf?
ver=1.21" allowfullscreen="true" wmode="transparent"
flashvars="guid=BQtfIEY1&amp;width=640&amp;height=360&amp;loc
ksize=no&amp;dynamicseek=false&amp;qc_publisherId=p-18-
mFEk4J448M"></embed></object> C'est mieux, non ? <video src="movie.mp4"></video> Attribut à éviter <video src="movie.mp4" autoplay></video> Encore plus diabolique <video src="movie.mp4" autoplay loop></video> Rendons le contrôle à l’internaute <video controls width="360" height="240" poster="preview.jpg" src="movie.mp4"></video> Sources multiples <video controls width="360" height="240”>
<source src="movie.ogv">
<source src="movie.mp4">
</video> Type des sources <video controls width="360" height="240”>
<source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video> Prise en charge du flash <video controls width="360" height="240" poster="preview.jpg">
<source src="movie.ogv" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
<object type="application/x-shockwave-flash" width="360" height="240" data="p.swf?f=movie.mp4">
<param name="movie" value="p.swf?f=movie.mp4">
<a href="movie.mp4">Download the movie.</a>
</object>
</video> Pareil pour l'audio <audio controls>
<source src="sound.ogg" type="audio/ogg">
<source src="sound.mp3" type="audio/mpeg">
</audio> nouveaux types d'input contentEditable required & placeholder ...et bien plus! <input type="search">
<input type="email">
<input type="number">
<input type="tel"> <input required>
<input placeholder="your name"> <div contenteditable>
Click on me to edit!
</div> <header> représente un groupe aide à la présentation ou à la navigation <footer> contient des information sur son élément parent (copyright, auteur...) <nav> contient les éléments majeurs (primaires) de navigation (fréquemment dans un header) <aside> contient des contenus liés (barres d'outils, citations, vente liée...) <section> un groupe thématique de contenu (chapitre...) <article> un section autonome, utilisable en syndication (billets de blogs,...) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html> Doctype <meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />

<meta charset="UTF-8"> Charset <script type="text/javascript" src="x.js"></script>

<script src="x.js"></script> Scripts <link type="text/css" rel="stylesheet"
media="screen" href="x.css" />

<link rel="stylesheet"
media="screen" href="x.css"> Styles Pourquoi n'avons nous plus de numéro de version? Car spécification de la gestion des erreurs, donc:
Rétrocompatibilité
Prédictibilité du comportement sur les différents navigateurs Actuellement
Depuis la version 4.4 (18 mois)
Intégration du doctype
Utilisation pour les médias
Backoffice HTML5, compatible IE6 depuis la v4.5 Dans le futur
Chantier accessibilité pour la version 4.7 Un des 5 axes de développent de Drupal 8
Gestion de la configuration
Web Services
Design
Multilinguisme
Mobile
HTML5 Phase 1
Mise en place de Javascript fallback pour certains navigateurs
Ajout des éléments HTML5 dans les formulaires
Refonte des thèmes principaux
Utilisation des rôles WAI-ARIA quand c'est possible Phase 2
Rich Media
Sélection, en back-office de tag d'enveloppe pour les blocs Des questions? Vincent Maucorps 10 ans d'expérience dans les technologies web
Actuellement consultant avant-vente chez Smile LinkedIn http://www.linkedin.com/in/vincentmaucorps Twitter @vmaucorps
@GroupeSmile Piste cachée
Les idées reçues Le HTML5 ne sera pas prêt avant 2022 Les navigateurs ne supportent pas le HTML5 On m'a dit que... Faux
2009: Version de travail du W3C
2012: Recommandation candidate du W3C
2022: 2 implémentations complètes = Proposition de recommandation du W3C Faux
Tous les navigateurs modernes ont implémentés le HTML5 à un certain niveau
Il n'y a pas de raison d'attendre pour utiliser les éléments qui marchent maintenant Piste cachée 2
Utiliser HTML5 aujourd’hui Validateur ARIA Améliorations
progressives Dégradations
élégantes Styles MERCI Henri Sivonen
http://validator.nu/
Utilisé par http://validator.w3.org Il faut proposer des solutions alternatives si les certaines fonctionnalités ne sont pas supportés
Certains types de champs
<audio>, <video> et <canvas>

Modernizr ( http://www.modernizr.com/ )
If (!Modernizr.inputtypes color) {
// Solution de secours en Javascript
}

Modernizr permet de styler les nouveaux éléments dans Internet Explorer La base
section, article, header, footer, nav, aside, hgroup {
display : block;
}

Internet Explorer - Remy Sharp
<!--[if IE]>
<script src= "http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->

h1, h2, h3... et les sections - Geoffrey Sneddon
http://gsnedders.html5.org/outliner Le passage en HTML5 permet l’utilisation des rôles ARIA
<header role="banner">
<header role="contentinfo">
Peut-être utilisé dans les feuilles de style
header [role="banner"] {}
header [role="contentinfo"] {} Les balises inputs non-supportées seront traités comme des champs de type text
Full transcript