Les interfaces web de demain

Notes de l'éditeur

• #5 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
• #6 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
• #7 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?
• #8 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
• #9 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.
• #10 Pour résumer.
• #11 Toutefois, aujourd’hui, le mot « HTML5 », comme « ajax » avant lui, intègre, dans un sens plus large, toute une partie graphique
• #12 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…
• #13 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.
• #14 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 :
• #15 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
• #16 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
• #17 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/
• #18 MediaQueri.es http://www.kryzalid.net/blogue/2011/03/29/design-web-reactif-en-css3-des-grilles-fluides-et-des-images-flexibles/
• #19 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
• #20  - 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)
• #21 Clavier + souris : un classique depuis des années Nouveaux périphériques connectés : nouveaux modes d’intéraction
• #23 - 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