SlideShare une entreprise Scribd logo
1  sur  23
INTERFACES WEB DE DEMAIN
Natif : HTML5/CSS3/Javascript
Et les plugins : Flash/Flex/Silverlight…
Laurent Leborgne - 2011
QUI SUIS-JE?
 Laurent Leborgne
 Twitter : @lelolo
 Dévelopeur Front-end depuis 12 ans
pour
 Spécialisé dans le HTML, les CSS et le
javascript
SOMMAIRE
 Introduction
 Tour d’horizon et bref historique
 Aujourd’hui/Demain : les apports de
HTML5/CSS3 pour les interfaces
 Les nouveaux modes d’interaction
 Exemple d’interface utilisant HTML5/CSS3
pour un CMS
INTRODUCTION
Quelques mots clefs :
 Interface
 Interface web
 HTML
 CSS
 Javascript
RAPIDE TOUR D’HORIZON
Les interfaces web ont évolué avec les
capacités des navigateurs, des réseaux et
des machines.
 Hier : HTML, formulaires et liens
 Aujourd’hui : javascript/AJaX en natif, ou
flash/flex/silverlight pour les plugins
 Demain (dès aujourd’hui ?) : HTML5/CSS3 +
javascript/AJaX
HTML5
 Qu’est ce que c’est?
HTML5
 Un balisage enrichi (+sémantique)
 Une syntaxe allégée et assouplie
 De nouvelles APIs
(interfaces de programmation applicative)
HTML5
 C’est tout?
 Oui, mais c’est déjà beaucoup, si on
rentrait dans le listing…
• SVG
• Canvas
• Drag & Drop
• History
• Inline Editing
• Messaging
• Offline Apps
• webforms 2
• Video & Audio
• Geolocalisation
• Local Storage
• Selectors
• Server Events
• Web Sockets
• Workers
HTML5
HTML version 5
=
gros apports sémantiques
et fonctionnels
HTML5,
ON Y ASSOCIE SOUVENT…
…CSS3
 Effets de transparences
 Dégradés
 Bords arrondis et ombres portées
 Adaptation des styles au périphérique
 Animations et déformations
 Et bien d’autres éléments liés à
l’apparence
HTML5 + CSS3
En résumé, on a donc à notre
disposition, entre autres :
 SVG & Canvas
 Champs de formulaires « riches »
 Stockage local d’informations
 Edition de contenu dans la page
 Medias
 Enrichissement graphique
HTML5 + CSS3
 Concrètement, des exemples?
INTERFACES DE SAISIE
 edition inline (contentEditable)
www.aloha-editor.com
INTERFACES DE SAISIE
 Nouveaux champs de formulaires :
sliders
Gestion de date
Url
Téléphone
INTERFACES DE NAVIGATION
 SVG : boutons, zoom, animations…
 CSS3 : dégradés, déformations, polices
personnalisées, ombres, animations, etc.
INTERFACES DE NAVIGATION
 Media Queries
Adaptation des styles
à l’écran du périphérique utilisé
www.MediaQueri.es
EXPÉRIENCES RICHES
 Vidéo
 Jeux
 Traitement d’image
www.chromeexperiments.com
hacks.mozilla.org/demos/
beautyoftheweb.com
EXPÉRIENCES RICHES
 3D, calcul, drag and drop, etc.
www.chromeexperiments.com
NOUVEAUX MODES D’INTERACTIONS
 Clavier et souris
 Le tactile et le multitouch s’invitent via les
mobiles et tablettes, mais aussi sur les écrans
 Géolocalisation
 De nouveaux comportements sont à prendre en
compte dans les navigations
www.sencha.com/deploy/touch/
DEMO
DIGITAS CMS DEMO
 Pour en savoir plus,
contactez-nous
info_dcc@digitas.fr
MERCI
Laurent Leborgne - @lelolo
www.digitas.fr
Digitas, leader sur le marché du marketing interactif, est la seule agence à
réunir sous un même toit les différents savoir-faire indispensables pour
accompagner les plus grandes marques mondiales dans la gestion de la
relation avec leurs différents publics.
Digitas France réunit également DNA, l’entité dédiée à Nissan Europe ainsi
que Made by Digitas, cellule consacrée aux marques de luxe et premium
telles Lancôme, Longchamp, Baccarat ou Yves Saint Laurent.
DIGITAS France
131 avenue Charles de Gaulle
92200 Neuilly sur Seine –
France
Tel : +33 (0)1 49 68 12 12
Fax : +33 (0)1 49 68 12 13
Email : info_france@digitas.com

Contenu connexe

En vedette

Mashable Social Media Day - COCODY
Mashable Social Media Day - COCODYMashable Social Media Day - COCODY
Mashable Social Media Day - COCODY
Bacely YoroBi
 
C:\Documents And Settings\Brossard Maville\Mes Documents\Photos De La SœUr De...
C:\Documents And Settings\Brossard Maville\Mes Documents\Photos De La SœUr De...C:\Documents And Settings\Brossard Maville\Mes Documents\Photos De La SœUr De...
C:\Documents And Settings\Brossard Maville\Mes Documents\Photos De La SœUr De...
guestd92796
 
Animaux droles
Animaux drolesAnimaux droles
Animaux droles
mienville
 
Discurso día internacional d ela lengua nahuat
Discurso día internacional d ela lengua nahuat Discurso día internacional d ela lengua nahuat
Discurso día internacional d ela lengua nahuat
Adalberto
 
Clase del martes 8 de abril de 2014
Clase del martes 8 de abril de 2014Clase del martes 8 de abril de 2014
Clase del martes 8 de abril de 2014
Gonzalo Jiménez
 
Powerpoint isj
Powerpoint isjPowerpoint isj
Powerpoint isj
bynight50
 
Clase del martes 22 de abril:Ejercicios series funcionales
Clase del martes 22 de abril:Ejercicios series funcionalesClase del martes 22 de abril:Ejercicios series funcionales
Clase del martes 22 de abril:Ejercicios series funcionales
Gonzalo Jiménez
 
Projet carriere john w
Projet carriere john wProjet carriere john w
Projet carriere john w
red-john
 

En vedette (20)

Webcom Mai2011 Tcl Interactif Patrick Gagne V4
Webcom Mai2011 Tcl Interactif Patrick Gagne V4Webcom Mai2011 Tcl Interactif Patrick Gagne V4
Webcom Mai2011 Tcl Interactif Patrick Gagne V4
 
Mashable Social Media Day - COCODY
Mashable Social Media Day - COCODYMashable Social Media Day - COCODY
Mashable Social Media Day - COCODY
 
C:\Documents And Settings\Brossard Maville\Mes Documents\Photos De La SœUr De...
C:\Documents And Settings\Brossard Maville\Mes Documents\Photos De La SœUr De...C:\Documents And Settings\Brossard Maville\Mes Documents\Photos De La SœUr De...
C:\Documents And Settings\Brossard Maville\Mes Documents\Photos De La SœUr De...
 
Renaud les bobos
Renaud les bobosRenaud les bobos
Renaud les bobos
 
Crier la vie
Crier la vie Crier la vie
Crier la vie
 
Animaux droles
Animaux drolesAnimaux droles
Animaux droles
 
Discurso día internacional d ela lengua nahuat
Discurso día internacional d ela lengua nahuat Discurso día internacional d ela lengua nahuat
Discurso día internacional d ela lengua nahuat
 
Clase del martes 8 de abril de 2014
Clase del martes 8 de abril de 2014Clase del martes 8 de abril de 2014
Clase del martes 8 de abril de 2014
 
Powerpoint isj
Powerpoint isjPowerpoint isj
Powerpoint isj
 
Clase del martes 22 de abril:Ejercicios series funcionales
Clase del martes 22 de abril:Ejercicios series funcionalesClase del martes 22 de abril:Ejercicios series funcionales
Clase del martes 22 de abril:Ejercicios series funcionales
 
Issue 2
Issue 2Issue 2
Issue 2
 
Diseño de un sistema de manejo de cargas
Diseño de un sistema de manejo de cargasDiseño de un sistema de manejo de cargas
Diseño de un sistema de manejo de cargas
 
Pourquoi utiliser un masque des diapositives PowerPoint et comment le créer ?
Pourquoi utiliser un masque des diapositives PowerPoint et comment le créer ?Pourquoi utiliser un masque des diapositives PowerPoint et comment le créer ?
Pourquoi utiliser un masque des diapositives PowerPoint et comment le créer ?
 
Introduccion Cap I
Introduccion Cap IIntroduccion Cap I
Introduccion Cap I
 
Projet carriere john w
Projet carriere john wProjet carriere john w
Projet carriere john w
 
Ws12 per bergamin_fr
Ws12 per bergamin_frWs12 per bergamin_fr
Ws12 per bergamin_fr
 
2013 synergie collab smartcloud for social business
2013 synergie collab smartcloud for social business2013 synergie collab smartcloud for social business
2013 synergie collab smartcloud for social business
 
Paises
PaisesPaises
Paises
 
Mn15 PI
Mn15 PIMn15 PI
Mn15 PI
 
L'essentiel d'ibm sametime 8.5
L'essentiel d'ibm sametime 8.5L'essentiel d'ibm sametime 8.5
L'essentiel d'ibm sametime 8.5
 

Similaire à Les interfaces web de demain

HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
Khaled Djebloun
 
Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10
davrous
 
La plateforme Web Microsoft
La plateforme Web MicrosoftLa plateforme Web Microsoft
La plateforme Web Microsoft
Christophe Lauer
 

Similaire à Les interfaces web de demain (20)

HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
 
Webdesign
WebdesignWebdesign
Webdesign
 
Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Flash vs-html5-adrien-leygues-pw-2011
Flash vs-html5-adrien-leygues-pw-2011Flash vs-html5-adrien-leygues-pw-2011
Flash vs-html5-adrien-leygues-pw-2011
 
La plateforme Web Microsoft
La plateforme Web MicrosoftLa plateforme Web Microsoft
La plateforme Web Microsoft
 
Petit Déjeuner du 26 septembre : HTML5 et CSS3, les interfaces de demain.
Petit Déjeuner du 26 septembre : HTML5 et CSS3, les interfaces de demain.Petit Déjeuner du 26 septembre : HTML5 et CSS3, les interfaces de demain.
Petit Déjeuner du 26 septembre : HTML5 et CSS3, les interfaces de demain.
 
Petit Déjeuner : HTML5 et CSS3, les interfaces de demain.
Petit Déjeuner : HTML5 et CSS3, les interfaces de demain.Petit Déjeuner : HTML5 et CSS3, les interfaces de demain.
Petit Déjeuner : HTML5 et CSS3, les interfaces de demain.
 
Chap 1 Le Interfaces Richesv140
Chap 1 Le Interfaces Richesv140Chap 1 Le Interfaces Richesv140
Chap 1 Le Interfaces Richesv140
 
Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015
 
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINEIntroduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
 
Convergence et mobilité des contenus
Convergence et mobilité des contenus Convergence et mobilité des contenus
Convergence et mobilité des contenus
 
Introduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascriptIntroduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascript
 
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScriptIntroduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
 
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
 
L'évolution du web-design
L'évolution du web-designL'évolution du web-design
L'évolution du web-design
 
Do you speak technique ?
Do you speak technique ?Do you speak technique ?
Do you speak technique ?
 
HTML5, le web de demain - BNSA
HTML5, le web de demain - BNSAHTML5, le web de demain - BNSA
HTML5, le web de demain - BNSA
 
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
 
HTML5, How to rethink your web strategy - Version FR
HTML5, How to rethink your web strategy - Version FRHTML5, How to rethink your web strategy - Version FR
HTML5, How to rethink your web strategy - Version FR
 

Les interfaces web de demain

  • 1. INTERFACES WEB DE DEMAIN Natif : HTML5/CSS3/Javascript Et les plugins : Flash/Flex/Silverlight… Laurent Leborgne - 2011
  • 2. QUI SUIS-JE?  Laurent Leborgne  Twitter : @lelolo  Dévelopeur Front-end depuis 12 ans pour  Spécialisé dans le HTML, les CSS et le javascript
  • 3. SOMMAIRE  Introduction  Tour d’horizon et bref historique  Aujourd’hui/Demain : les apports de HTML5/CSS3 pour les interfaces  Les nouveaux modes d’interaction  Exemple d’interface utilisant HTML5/CSS3 pour un CMS
  • 4. INTRODUCTION Quelques mots clefs :  Interface  Interface web  HTML  CSS  Javascript
  • 5. RAPIDE TOUR D’HORIZON Les interfaces web ont évolué avec les capacités des navigateurs, des réseaux et des machines.  Hier : HTML, formulaires et liens  Aujourd’hui : javascript/AJaX en natif, ou flash/flex/silverlight pour les plugins  Demain (dès aujourd’hui ?) : HTML5/CSS3 + javascript/AJaX
  • 6. HTML5  Qu’est ce que c’est?
  • 7. HTML5  Un balisage enrichi (+sémantique)  Une syntaxe allégée et assouplie  De nouvelles APIs (interfaces de programmation applicative)
  • 8. HTML5  C’est tout?  Oui, mais c’est déjà beaucoup, si on rentrait dans le listing… • SVG • Canvas • Drag & Drop • History • Inline Editing • Messaging • Offline Apps • webforms 2 • Video & Audio • Geolocalisation • Local Storage • Selectors • Server Events • Web Sockets • Workers
  • 9. HTML5 HTML version 5 = gros apports sémantiques et fonctionnels
  • 10. HTML5, ON Y ASSOCIE SOUVENT…
  • 11. …CSS3  Effets de transparences  Dégradés  Bords arrondis et ombres portées  Adaptation des styles au périphérique  Animations et déformations  Et bien d’autres éléments liés à l’apparence
  • 12. HTML5 + CSS3 En résumé, on a donc à notre disposition, entre autres :  SVG & Canvas  Champs de formulaires « riches »  Stockage local d’informations  Edition de contenu dans la page  Medias  Enrichissement graphique
  • 13. HTML5 + CSS3  Concrètement, des exemples?
  • 14. INTERFACES DE SAISIE  edition inline (contentEditable) www.aloha-editor.com
  • 15. INTERFACES DE SAISIE  Nouveaux champs de formulaires : sliders Gestion de date Url Téléphone
  • 16. INTERFACES DE NAVIGATION  SVG : boutons, zoom, animations…  CSS3 : dégradés, déformations, polices personnalisées, ombres, animations, etc.
  • 17. INTERFACES DE NAVIGATION  Media Queries Adaptation des styles à l’écran du périphérique utilisé www.MediaQueri.es
  • 18. EXPÉRIENCES RICHES  Vidéo  Jeux  Traitement d’image www.chromeexperiments.com hacks.mozilla.org/demos/ beautyoftheweb.com
  • 19. EXPÉRIENCES RICHES  3D, calcul, drag and drop, etc. www.chromeexperiments.com
  • 20. NOUVEAUX MODES D’INTERACTIONS  Clavier et souris  Le tactile et le multitouch s’invitent via les mobiles et tablettes, mais aussi sur les écrans  Géolocalisation  De nouveaux comportements sont à prendre en compte dans les navigations www.sencha.com/deploy/touch/
  • 21. DEMO
  • 22. DIGITAS CMS DEMO  Pour en savoir plus, contactez-nous info_dcc@digitas.fr
  • 23. MERCI Laurent Leborgne - @lelolo www.digitas.fr Digitas, leader sur le marché du marketing interactif, est la seule agence à réunir sous un même toit les différents savoir-faire indispensables pour accompagner les plus grandes marques mondiales dans la gestion de la relation avec leurs différents publics. Digitas France réunit également DNA, l’entité dédiée à Nissan Europe ainsi que Made by Digitas, cellule consacrée aux marques de luxe et premium telles Lancôme, Longchamp, Baccarat ou Yves Saint Laurent. DIGITAS France 131 avenue Charles de Gaulle 92200 Neuilly sur Seine – France Tel : +33 (0)1 49 68 12 12 Fax : +33 (0)1 49 68 12 13 Email : info_france@digitas.com

Notes de l'éditeur

  1. Interface : «  une interface est un dispositif qui permet des échanges et interactions entre différents acteurs » (source: wikipedia) Interface web : «  interface homme-machine constituée de pages web et permettant dans certains cas de d’utiliser des applications web » (source: wikipedia) HTML : Hyper Text Markup Language > apporte la partie sémantique au contenu CSS : Cascading Style Sheets > apporte la couche « design » et graphique sur les éléments sémantiques Javascript : langage de programmation côté navigateur (avec quelques exceptions côté serveur; nodejs par exemple) permettant de gérer les interactions et comportements Navigateur : outil destiné à afficher des pages web
  2. Hier : html, formulaire et liens, images, peu de mise en forme via CSS (couleurs, gras, etc) Aujourd’hui : html, CSS, javascript/AJaX, et beaucoup d’images, notamment transparentes pour gérer de l’interace « riche », ou alors des solutions « propriétaires » via Flash ou Flex, par exemple. Inconvénient, ces solutions ne sont pas ou peu « accessibles » , que ce soit sans le plugin, ou pour un lecteur d’écran, par exemple. Par ailleurs, le code est souvent compilé, ce qui ne rend pas toujours la maintenance et la séparation fond/forme/comportement évidente. Aujourd’hui/demain : html 5 /CSS3 et moteurs javascripts plus puissants, exploitant parfois le processeur de la carte graphique; les plugins sont toujours là et évoluent, mais des alternatives pour du html plus « riche » se mettent en place
  3. HTML5 : on en a tous entendu parler, ou presque, et c’est déjà une nouveauté pour un mot « technique ». mais qu’est ce que c’est, à part une nouvelle version du html d’aujourd’hui et d’hier?
  4. HTML5, c’est un balisage enrichi et sémantique, et des APIs supplémentaires en natif. On retrouve tout ce que l’on avait dans HTML4, mais simplifié en mise en place, et enrichi en possibilités. Une partie sémantique/balisage, mise en avant du contenu, et une partie plus « applicative », amenant de nouvelles possibilités de traitement, d’affichage, de comportements, etc. API : Application programming interface, une interface de programmation applicative
  5. On voit ici un listing « technique » de ce que sont les nouveautés en terme de programmation applicative dans HTML5. Tout n’est pas encore implémenté partout, certains éléments sont encore à l’état de brouillon, mais ça donne une idée des tendances et possibilités dans l’avenir.
  6. Pour résumer.
  7. Toutefois, aujourd’hui, le mot « HTML5 », comme « ajax » avant lui, intègre, dans un sens plus large, toute une partie graphique
  8. CSS : cascading stylesheet> apporte la couche graphique et décorative à la sémantique du HTML CSS3 apporte en natif (sans ajout d’images de décoration) : Gestion transparence et semi-transparence (rgba/hsla) Bords arrondis Ombres portées (boîtes et textes) Fonds multiples Dégradés Transformations/déformations Transitions/effets Modèles de grid/layout/templating Medias Queries Et bien d’autres nouveautés…
  9. SVG : Scalable Vector Graphics>dessin vectoriel et animation Canvas : > traitement d’image et animation Champs de formulaires : email, range (slider), number, url, search, date, etc.) Media Queries : La spécification CSS3 Media Queries définit les techniques pour l'application de feuilles de styles en fonction des périphériques de consultation utilisés pour des pages (X)HTML.  Enrichissement graphique : ombres portées, dégradés, transparences, bords arrondis, fonds multiples, transition, animations, etc.
  10. Voyons un peu ce que ça pourrait donner, si on utilisait un peu ces éléments, techniques ou graphiques, pour des interfaces ayant différents objectifs :
  11. Avec la possibilité de rendre éditable des balises du HTML5, on ouvre la porte à des outils d’édition du contenu, directement dans la page, sans utiliser de champs de formulaires ou de javascripts complexes. Aloha-editor est un développement utilisant « content editable », d’HTML5, pour permettre l’édition dans la page du contenu de celle-ci > http://www.aloha-editor.com
  12. Fini les champs textes, mot de passe, radio, case à cocher, hidden, ou textarea « seulement », on dispose une palette bcp plus riche Nombreux nouveaux types de champs, avec leur comportement associé. Sur les mobiles ou tablettes, ces types permettent également d’obtenir un clavier adapté. A noter : ceci est un rendu « de base », il est ensuite possible de « styler » ces éléments avec CSS
  13. SVG http://webvizbench.com/Default.htm?skipdetect http://jsdo.it/event/svggirl CSS3 : Animated polaroids Minimalistic menu Onglets http://designlovr.com/examples/dynamic_stack_of_index_cards/
  14. MediaQueri.es http://www.kryzalid.net/blogue/2011/03/29/design-web-reactif-en-css3-des-grilles-fluides-et-des-images-flexibles/
  15. Silk Chrome Experiments Beauty of the Web/IE9 Mozilla Hacks/Demos Videos : canvas permet de manipuler les pixels de la video en « live » Jeux : canvas et svg, associés aux possibilités de stockage, et à la video ou à l’audio, ouvrent la porte à la réalisation de jeux 2D Traitement d’image : canvas permet de manipuler les pixels (en 3 couleurs + couche alpha), et d’exporter une image au final
  16. - Google Body : manipulation en 3D d’un corps humain, et, associé à javascript et au drag and drop, nous fait rentrer dans ledit corps humain Jelly fish helloRacer WEBGL utilise les capacités de la carte graphique pour le rendu, ce qui, en plus de soulager le processeur des machines, offre une plus grande puissance de calcul (Firefox 4, Chrome 10+, Safari 5, opera en cours)
  17. Clavier + souris : un classique depuis des années Nouveaux périphériques connectés : nouveaux modes d’intéraction
  18. - Une interface allégée et peu intrusive Une interaction directement sur le site, avec ses comportements Les fonctionnalités sont activées à la demande on sort d’un comportement « classique » de champs à remplir, et de prévisualisation pour s’apercevoir que visuellement, ça ne colle pas on agit sur les contenus au fur et à mesure, en limitant les effets de bords des éditions « html » par des nons spécialistes