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...
Próximos SlideShare
Carregando em...5
×

Les interfaces web de demain

1,819

Published on

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

Published in: Tecnologia
0 Comentários
2 pessoas curtiram isso
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1,819
No Slideshare
0
A partir de incorporações
0
Número de incorporações
1
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Curtidas
2
Incorporar 0
No embeds

No notes for slide
  • 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
  • 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
  • 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?
  • 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
  • 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.
  • Pour résumer.
  • Toutefois, aujourd’hui, le mot « HTML5 », comme « ajax » avant lui, intègre, dans un sens plus large, toute une partie graphique
  • 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…
  • 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.
  • 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 :
  • 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
  • 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
  • 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/
  • MediaQueri.es
    http://www.kryzalid.net/blogue/2011/03/29/design-web-reactif-en-css3-des-grilles-fluides-et-des-images-flexibles/
  • 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

  • - 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)
  • Clavier + souris : un classique depuis des années
    Nouveaux périphériques connectés : nouveaux modes d’intéraction
  • - 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
  • 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

    ×