Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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, l...
SOMMAIRE
 Introduction
 Tour d’horizon et bref historique
 Aujourd’hui/Demain : les apports de
HTML5/CSS3 pour les inte...
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.
 Hie...
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 programmat...
HTML5
 C’est tout?
 Oui, mais c’est déjà beaucoup, si on
rentrait dans le listing…
• SVG
• Canvas
• Drag & Drop
• Histor...
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
 An...
HTML5 + CSS3
En résumé, on a donc à notre
disposition, entre autres :
 SVG & Canvas
 Champs de formulaires « riches »
 ...
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, ombre...
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.c...
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, m...
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...
Prochain SlideShare
Chargement dans…5
×

Les interfaces web de demain

2 295 vues

Publié le

Le pdf de ma présentation sur HTML5 et les interfaces web de demain, au salon Solution Linux 2011.
http://bit.ly/r0bCZl

Publié dans : Technologie
  • Soyez le premier à commenter

Les interfaces web de demain

  1. 1. INTERFACES WEB DE DEMAIN Natif : HTML5/CSS3/Javascript Et les plugins : Flash/Flex/Silverlight… Laurent Leborgne - 2011
  2. 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. 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. 4. INTRODUCTION Quelques mots clefs :  Interface  Interface web  HTML  CSS  Javascript
  5. 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. 6. HTML5  Qu’est ce que c’est?
  7. 7. HTML5  Un balisage enrichi (+sémantique)  Une syntaxe allégée et assouplie  De nouvelles APIs (interfaces de programmation applicative)
  8. 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. 9. HTML5 HTML version 5 = gros apports sémantiques et fonctionnels
  10. 10. HTML5, ON Y ASSOCIE SOUVENT…
  11. 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. 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. 13. HTML5 + CSS3  Concrètement, des exemples?
  14. 14. INTERFACES DE SAISIE  edition inline (contentEditable) www.aloha-editor.com
  15. 15. INTERFACES DE SAISIE  Nouveaux champs de formulaires : sliders Gestion de date Url Téléphone
  16. 16. INTERFACES DE NAVIGATION  SVG : boutons, zoom, animations…  CSS3 : dégradés, déformations, polices personnalisées, ombres, animations, etc.
  17. 17. INTERFACES DE NAVIGATION  Media Queries Adaptation des styles à l’écran du périphérique utilisé www.MediaQueri.es
  18. 18. EXPÉRIENCES RICHES  Vidéo  Jeux  Traitement d’image www.chromeexperiments.com hacks.mozilla.org/demos/ beautyoftheweb.com
  19. 19. EXPÉRIENCES RICHES  3D, calcul, drag and drop, etc. www.chromeexperiments.com
  20. 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. 21. DEMO
  22. 22. DIGITAS CMS DEMO  Pour en savoir plus, contactez-nous info_dcc@digitas.fr
  23. 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

×