Author Archive for: Stéphanie Jouan

Processus de création – le design émotionnel

25 mars 2014

 

Le design émotionnel est un concept de création qui énonce les principes suivants :

  • la normalisation et l’uniformisation en matière de design d’interface a vécu
  • la création doit être vectrice d’émotions et porter la signature de son auteur
  • la fiabilité et l’utilisabilité d’un site sont essentielles mais ne suffisent pas
  • induire un souvenir positif chez l’utilisateur est le moyen le plus sûr de le fidéliser
  • personnaliser son interface permet à l’utilisateur de s’identifier et en fait souvent un ambassadeur
Voici un schéma extrait de l’ouvrage d’Aaron Walter (voir références plus bas) :
pyramide_maslow

Procurer une expérience agréable grâce à la personnalisation

 

Cette personnalisation passe par :

  • un design unique conçu par un humain pour des humains
  • du contraste (couleurs, mise en page…)
  • l’utilisation de principes régissant l’esthétique, comme par exemple le nombre d’or
  • une mascotte
  • un message, un ton personnalisé, qui porte l’esprit, les valeurs du site, de la marque…
  • de la surprise, de l’inattendu
  • de l’humour…

Un des meilleurs exemples de design émotionnel et de personnalisation (et donc d’identification) d’une marque est Apple :

Le design émotionnel doit être mis en oeuvre à bon escient et avec parcimonie, sans quoi le but ne sera non seulement pas atteint mais il peut se révéler contre-productif !

 

Un outil incontournable dans un processus de design émotionnel : les personas

 

Le concept de persona s’applique aussi bien à votre produitsite… qu’à votre clientutilisateur cible. Il consiste à créer un personnage virtuel avec sa propre personnalité au plus près de la réalité.

Il permet de transposer la relation d’humain à humain à la relation site / utilisateur.

Il facilite la recherche de réponses, solutions en imaginant la réaction, le souhait de cet utilisateur type.

A consulter : http://t37.net/les-personas-ces-utilisateurs-presque-pas-virtuels-qui-sauvent-vos-projets.html

 

A lire :
Design émotionnelAaron Walter, Eyrolles 2012

Processus de création – le mood board

25 mars 2014

 

Définition : le mood board est un prototype utilisé pour donner une idée du ton et de l’ambiance d’une création. On l’utilise dans plusieurs métiers de création comme la décoration d’intérieur, la mode, le paysagisme mais aussi le webdesign (source css.4design.tl).

Le mood board, appelé aussi planche de tendances, est un collage d’images, de textures, de textes. Il permet créer une ambiance sur un thème, d’exprimer des idées, une atmosphère. Il est source d’inspiration dans le processus de création.

Il peut être réalisé manuellement par collecte et collage d’images, matières… Il peut également être réalisé sous forme numérique, ce choix étant particulièrement adapté au webdesign.

Voici une liste d’outils plus ou moins dédiés à la création de modo boards :

 

A consulter :

L’expérience utilisateur / Les wireframes

25 mars 2014

 

L’optimisation pour l’expérience utilisateur (UX = User eXperience)

 

  • Design esthétique + design fonctionnel = design de l’expérience utilisateur qui s’applique à tout produit.
  • Un site web est complexe, le plus souvent utilisé seul, sans accompagnement, notice ou formation et la difficulté à l’utiliser génère culpabilité (« je suis nul en informatique ») et/ou frustration (« il est nul ce site ») et n’engage pas à s’y connecter à nouveau.
  • La conception centrée sur l’utilisateur (UCD = User Centered Design) met l’utilisateur au cœur de la création et du développement du site web. Chacune de ses actions résulte d’un processus que vous avez conçu et aboutit en principe à une expérience satisfaisante.
  • La mesure d’une expérience utilisateur réussie se fait entre autres par le calcul du taux de conversion.

 

Les 5 plans de l’expérience utilisateur

 

  • la surface : plan du contenu; pages avec texte et images. « Quel design sensoriel pour mon site ? »
  • l’ossature : plan de navigation; organisation des contenus, de leur emplacement. « Quelle mise en forme pour mon site ? »
  • la structure : représentée par l’arborescence; chemin de navigation. « Quelle architecture pour mon site ? »
  • l’envergure : ensemble des fonctionnalités et contenus du site. « Quel type de site je conçois ? »
  • la stratégie : combinaison des objectifs du site et des attentes des utilisateurs. « Pourquoi je fais ce site ? »
Chaque plan comporte lui-même 2 dimensions :
  • fonctionnelle
  • informative

La conception du site se fait de bas en haut, de la stratégie vers la surface, du plus abstrait au plus concret. Elle n’est cependant pas réalisée plan par plan de façon hermétique mais plutôt sous la forme d’une succession glissante de plans permettant la correction de décisions prises au plan précédent, et donc en cours de réalisation et non à la fin.

Cette conception améliore non seulement l’expérience utilisateur mais permet également d’optimiser la stratégie du site et l’étape conception-développement et donc d’assurer la réussite du projet.

A lire : Les éléments de l’expérience utilisateur, Jesse James Garrett, Pearson 2011

A consulter :
http://blog.cozic.fr/les-10-commandements-experience-utilisateur-ux
Exemple de test utilisateur : http://blog.appili.com/2012/04/25/exemple-de-test-utilisateur-le-site-seloger-com/ 

 

Le plan ossature

 

L’ossature se définit comme le design de l’information qui est la combinaison de :

  • design d’interface : conception des éléments de navigation (boutons, formulaires…), de ce qui donne accès aux fonctionnalités du site; ces éléments sont, pour chaque écran, sélectionnés en fonction de la tâche accomplie par l’utilisateur et disposés de façon évidente. Sont exclus (ou mis au second plan) les éléments dont l’utilisateur n’a pas besoin. Cela implique de faire des choix adaptés au plus grand nombre (cases pré-cochées ou champs pré-remplis par ex.).
  • design de navigation : présentation de l’information, permet de se déplacer dans le site (menus, liens…)

Le design de l’interface doit respecter certains critères notamment :

  • cohérence avec les habitudes des utilisateurs et cohérence interne au site (formulaires similaires par exemples) -> navigation fluide et rapide, moins d’erreurs
  • limiter la navigation métaphorique : références au monde réel (pages à tourner par ex.), pictogrammes nébuleux
  • utilisation d’éléments d’interface standard : cases à coacher, boutons radio, champs de saisie, menus déroulants, listes, boutons cliquables

Le design de navigation

  • il doit permettre de naviguer d’un point à un autre du site, tout en induisant la relation entre les différents éléments (ce qui permet de choisir tel ou tel item du menu par ex.) mais aussi entre l’élément cliquable et le contenu vers lequel il conduit (CF ergonomie > menu) et enfin entre la page consultée et l’ensemble du site (fil d’ariane par ex.).
  • il combine plusieurs systèmes de navigationdans une même interface :
    • la navigation globale qui permet d’accéder à l’ensemble du site (ex : barre de navigation type menu vers les rubriques principales du site);
    • la navigation locale donne accès à ce qui se trouve dans la périphérie d’une page (dans une rubrique, par ex., les autres sous-rubriques);
    • la navigation supplémentaire : permet d’accéder à un contenu non périphérique mais associé (ex : suggestion de produits complémentaires)
    • la navigation contextuelle : présence de liens hypertextes dans le corps du contenu, utiles à condition de ne pas en abuser.
    • la navigation de courtoisie : liens vers des rubriques secondaires mais parfois utiles (contact, mentions légales par ex.).
    • la navigation à distance : utilisée plutôt que les systèmes de navigation classique et fournie par des outils tels que le plan du site.

Le design de l’information

  • il peut être visuel : graphique, pictogramme
  • il doit être architecturé voire micro-architecturé (ex : ordre des champs dans un formulaire)
  • il a pour mission de récupèrer et fournir des informations de et à l’utilisateur
  • avec le design de navigation, il a pour fonction d’orienter l’internaute grâce à des codes couleurs, icônes, choix typographiques ou sémantiques.

Les wireframes

Design d’interface, de navigation et de l’information sont organisés dans une mise en page qui peut être représentée sous la forme de wireframes. Ce sont des schémas des zones qui constituent une page et de la façon dont elles s’articulent.C’est un document important car il constitue la première étape dans la création graphique mais aussi une base de travail pour le développement du site. Il est utile pour contrôler que le site est conforme au projet, dans l’esprit de chacun, que rien n’a été oublié. Il doit être l’aboutissement d’une démarche orientée utilisateur combinée une démarche graphique.

A consulter :
Outil en ligne pour générer des wireframes (samples à consulter à titre d’exemple) : http://www.mockflow.com
Templates à wireframes à imprimer : http://sneakpeekit.com

 

Le plan surface

 

C’est la dernière étape et celle qui met en forme l’ossature du site, son organisation, celle du design sensoriel.

  • il vient renforcer la structure en permettant de distinguer clairement les éléments de l’architecture.
  • il met en avant les éléments les plus importants (cf. plan stratégie), ceux qui doivent attirer le regard.
  • il doit être fluide, épuré du superflu.
  • il doit guider l’utilisateur grâce notamment au jeu de contraste (faire ressortir un message d’erreur par ex.) / uniformité (même traitement graphique pour des éléments similaires).
  • il donne lieu à une charte graphique bien documentée.

A consulter :
Guide charte graphique web : http://css.4design.tl/guide-stylistique-exemple-de-charte-graphique-et-editoriale
Exemples de chartes graphiques : http://graphism.fr/tlchargez-dix-exemples-de-chartes-graphiques-en-pdf

Utilisabilité / accessibilité

25 mars 2014

 

L’utilisabilité et l’ergonomie

 

L’ergonomie est caractérisée par  : l’efficacité et l’utilisabilité (confort d’utilisation)

Un site web ergonomique propose une navigation simple et intuitive à l’utilisateur, quelles que soient :

  • ses attentes
  • ses habitudes
  • son âge
  • son équipement
  • son niveau de connaissances

Voici les principaux critères d’ergonomie d’un site web :

  • sobriété : un site au design simple et au contenu allégé
  • lisibilité : un texte facile à lire, hiérarchisé, bien organisé (lecture sur écran : 25% de temps en plus)
  • utilisabilité : une navigation facile (règle des 3 clics), libre (présence riche de liens, menu…), balisée (respect des règles d’usage notamment), homogène
  • rapidité : des pages légères, un bon usage et une bonne optimisation des médias (images, vidéos…) présents sur le site
  • disponibilité : le site doit être accessible de partout, tout le temps
  • accessibilité

L’utilisabilité désigne la simplicité d’usage, tandis que l’expérience utilisateur est une notion qui recouvre le plaisir d’usage.

A consulter :
http://fr.wikipedia.org/wiki/Utilisabilité_du_Web
http://www.ergonomie-sites-web.com/ressources/telechargements/telechargement_id5/fichier.jpg

A lire :
Design & interface – Ergonomie web illustrée, Amélie Boucher, Eyrolles 2011

 

L’accessibilité

 

  • Un site web accessible répond à des exigences et des standards définis permettant à tous les utilisateurs, en particulier handicapés, de consulter et d’accéder à tous les contenus du site.
  • Ces normes, établies par le W3C (World Wide Web Consortium), et leur mise en pratique en terme de design et de technique ( priorité au texte, des images légendées, typographies et couleurs soigneusement choisies) rendent les sites compatibles avec les aides techniquestelles que plage Braille, lecteur vocal, navigation sans souris ou plus couramment l’agrandissement de caractères.
  • Outil de validation en ligne : http://validator.w3.org
  • Référentiel, sites labellisés : http://www.accessiweb.org
  • Exemple de lectures vocales :
    http://www.ergonomie-sites-web.com/telechargements/index.php

Ergonomie et design d’interface

7 mars 2014

 

La structure d’un site web doit être le reflet d’une stratégie. Des scénarii de navigation doivent être élaborés afin de pousser l’utilisateur à suivre un chemin dans le site web. Néanmoins il ne faut pas emprisonner le visiteur et le laisser libre de s’en aller ou de changer de rubrique à tout moment.

Des études ont montré que l’oeil de l’internaute moyen parcourt généralement la page web selon un cheminement global en « zigzag » commençant à l’angle supérieur gauche, jusqu’à l’angle inférieur droit.
La zone centrale supérieure représente ainsi un endroit particulièrement stratégique pour placer des informations.

Voici les principaux outils et recommandations de navigation en usage (à adapter selon les cas bien entendu) :

 

La structure

 

 

Le menu

 

  • Menu clairement identifié et présent sur toutes les pages du site
  • Les rubriques du menu sont signifiantes (on comprend ce que l’on va trouver dedans), complémentaires et exclusives (on n’hésite pas entre 2 rubriques)
  • Un bon menu comporte un indicateur situationnel qui m’indique dans quelle rubrique je me trouve (mise en évidence de cette rubrique).
  • On évite de mélanger des liens internes et externes au site dans le menu / Sous-menu

 

Le contenu

 

  • Un contenu allégé, hiérarchisé optimisé pour une lecture sur écran : mise en évidence de titres, accroches, utilisation de listes à puces…
  • Affordance des éléments de contenu : chaque élément suggère son utilisation.
  • Pour les pages de listes (de produits par exemple), on adopte des outils tels que le quick look, la possibilité de passer en liste infinie ou le dynamic scrolling
  • A consulter :
    http://ergonoweb.wordpress.com/2010/06/01/ergonomie-web-le-concept-daffordance/

 

Les liens

 

  • Lien « accueil » sur toutes les pages du site
  • Fil d’ariane : très utile en cas de navigation importante « en profondeur »
  • Mise en place d’une navigation transversale efficace par des liens ou des produits associés sur une fiche produit par exemple.
  • Plan du site : utile pour les sites à forte volumétrie
  • Veiller à ce que les liens externes au site s’ouvrent dans une nouvelle fenêtre
  • Les liens visités sont signalés (changement de couleur)
  • Les liens (et boutons) ont une taille convenable, ni trop petits (clic difficile), ni trop gros (non identifiés comme liens / boutons)
  • A éviter les liens du type « cliquez ici »

 

Les animations (son, vidéo…) et publicités

 

  • les animations, particulièrement sonores, doivent pouvoir être contrôlées par l’utilisateur. Un carrousel doit pouvoir être lu ou stoppé si nécessaire.
  • les interstitiels sont accompagnés d’un lien d’accès direct au contenu visible
  • les publicités ne doivent pas être intrusives ni mélangées au contenu de façon ambigue

 

Les choix graphiques

 

A consulter :
http://line25.com/articles/10-usability-crimes-you-really-shouldnt-commit

http://www.ergognome.com/ressources/pixel-perfect-precision-handbook/

A lire :
Design & interface – Ergonomie web illustrée, Amélie Boucher, Eyrolles 2011
Don’t make me think, Steve Krug, Pearson 2012

Benchmark et audit de site

28 janvier 2014

 

Dans le cadre d’un projet de refonte de site internet, nous allons commencer par une étape d’analyse avant-projet qui comporte l’audit du site dont nous assurerons la refonte et le benchmark, ou étude de la concurrence.

 

Audit ou review de site

 

Objectifs du site

Avant de réaliser l’audit d’un site internet (en vue de sa refonte, de son amélioration…), il faut commencer par définir les objectifs de celui-ci : vendre, communiquer sur l’image de la marque, apporter un support client… C’est en fonction de ces objectifs que seront définis les critères d’évaluation du site.

 

Grille d’évaluation

L’audit du site doit être le plus objectif possible. C’est pourquoi on utilise des grilles d’évaluations comportant de nombreux critères répartis par thématiques.
En fonction du site à auditer et des objectifs définis, tous les critères ne seront  pas à analyser.
En effet, si l’objectif d’amélioration porte sur le manque de visibilité du site, et donc son référencement, les critères portant sur l’ergonomie seront secondaires et inversement.

Il existe des référentiels proposant des grilles d’évaluation pré-établies et reconnues, comme celui d’Opquast par exemple: https://checklists.opquast.com/fr/opquastv2

Il existe également des outils en ligne permettant de vérifier le respect de standards :

En fonction du projet, des objectifs, une grille de critères personnalisée est constituée. Ainsi, on peut trouver des exemples en ligne de ces grilles:

 

Tri et analyse des résultats

Une fois la grille complétée, le plus important reste à faire : repérer les points forts et les points faibles du site.

Pour cela, on effectue un tri des résultats en attribuant des notes par catégories de critères, voire par sous-catégories ou par degré  d’importance du critère en fonction de l’objectif préalablement défini.

Idéalement, ces résultats seront présentés sous la forme de données mais également représentés sous forme graphique afin de pouvoir communiquer et analyser plus facilement leur portée. Car l’analyse de ces données nous donnera les axes prioritaires du projet.

Exemple d’analyse et de présentation des résultats : http://www.testapic.com/medias/audit-exemple-web.pdf

 

Projet

Dans le cadre de la refonte d’un site e-commerce, réaliser l’audit du site existant sous l’angle du design en utilisant une des grilles proposées.

Une grille sera complétée et chaque critère se verra attribuer un code réponse : 2-oui / 1-à améliorer / 0-non / sans objet

Les résultats seront présentés sous la forme d’un compte-rendu enrichi de visuels et de graphiques (Diagramme de Kiviat).

 

Benchmark ou analyse concurrentielle

 

Définition

« Le benchmark est dans un contexte marketing une démarche d’observation et d’analyse des performances atteintes et des pratiques utilisées par la concurrence ou par des secteurs d’activité pouvant avoir des modes de fonctionnement réutilisables par l’entreprise. » (www.definitions-marketing.com).

 

Typologie

Le benchmarking peut porter sur différents aspects de l’activité d’une entreprise et peut donc avoir plusieurs formes :

  • benchmarking interne : comparaison de processus ou services au sein d’une même organisation
  • benchmarking concurrentiel : comparaison avec les concurrents directs d’un même secteur
  • benchmarking générique : comparaison avec des entreprises de secteurs différents mais mettant en oeuvre des processus similaires
  • benchmarking fonctionnel : comparaison des services et fonctionnalités avec des entreprises concurrentes ou non
  • benchmarking stratégique : inventaire des best practices des entreprises du même secteur visant à déterminer les objectifs stratégiques

 

Etapes
  1. déterminer les objectifs, ce qui doit être amélioré
  2. établir un référentiel, c’est-à-dire la grille d’analyse
  3. identifier les concurrents, recueillir les informations
  4. analyser les données, déterminer la stratégie
Projet

Dans le cadre de la refonte d’un site e-commerce, réaliser un benchmark sous l’angle du design :

  • identifier les sites « concurrents » ou de même nature
  • faire une sélection de 3 sites représentant des marques leaders du secteur
  • réaliser une analyse en utilisant la même grille que celle appliquée à l’audit du site choisi
  • présenter les résultats sous la forme d’un compte-rendu argumenté et graphique

Technologies web – un CMS / WordPress

12 décembre 2013

Nous allons explorer un CMS parmi les plus populaires, à savoir WordPress.

Télécharger WordPress
http://www.wordpress-fr.net

Pour travailler en local, télécharger un serveur PHP/MySQL
MAMP sur mac http://www.mamp.info/en/index.html
WAMP sur PC http://www.wampserver.com

Télécharger le support de déploiement et d’utilisation de WordPress
StephanieJouan_ECV_Wordpress.pdf

Pour aller plus loin et apprendre à créer son propre thème WordPress
voir le tutoriel de bbxdesign

Utiliser un framework ou un thème vierge pour WordPress
http://magazineduwebdesign.com/frameworks-wordpress-et-themes-wordpress-vierges

L’histoire d’une marque en parallaxe

24 octobre 2013

Le sujet :

En équipe de 3 à 4, racontez l’histoire d’une marque de votre choix sous la forme d’une page web avec effet parallaxe en faisant intervenir un jeu de typographie interdisant l’utilisation de textes longs au profit de mots / groupes de mots.

Mots-clés :

Branding / webstorytelling / typographie / parallaxe

Tutoriels et démos :

Fichiers sources à télécharger :

 

Rendus

  • Repetto par Elodie Dassange, Yingyin Zhang, Marina Izydorczyk
  • Yves Saint-Laurent par Christophe Bouche, Charlotte du Portal, Charlène Massé, Marine Bacot
  • Orangina par Benjamin Armel, Anne Astima, Sandy Kauy, Clara Calderini
  • Hermès par Mathilde Robert-Nicoud, Thibaud Sabathier, Aurélien Grimaud, Emilien Badoc
  • Levi’s par Lucie Pecaut, Félicité d’Hautefeuille, Yi Tang, Alice Grenié
  • Coca-cola par Arnaud Bresson, Manon Fauvel, Fiona Marangoni, Nicolas, Pierre
  • Ikea par Jiazhi Gao, Dan Gu, Lucie Chiocchetti, Lucas Brigaud
  • Chupa Chups par Sophie Cazes, Astrid de Lassée, Magali Meunier, Antoine Lalou
  • Mac Donald’s par Isabelle Ducournau, Florent Gomez, Justine Pinaud, Amélie Sebayashi

Technologies web – HTML5 et CSS3

18 octobre 2013

Rappels à propos de ces 2 langages :

  • HTML (HyperText Markup Language) : apparu en 1991, on l’utilise pour gérer et organiser le contenu (menus, listes, tableaux, liens…).
  • CSS (Cascading Style Sheets) : apparu en 1996, on l’utilise, en complément du HTML, pour gérer l’apparence du contenu (typographie, couleur, positionnement, bordures, soulignés…).

HTML5

 

Il s’agit de la dernière version du langage HTML / XHTML, fruit du travail plus ou moins collaboratif du W3C et du WHATWG. Toujours en cours d’élaboration à ce jour, il devrait devenir la norme, à condition que les développeurs mais surtout les navigateurs l’adoptent. Adobe a d’ores et déjà intégré le HTML5 dans la version CS6 de sa Creative Suite (Dreamweaver, Flash, Edge).

A consulter :
Histoire du HTML5 avec une infographie : http://www.blog-nouvelles-technologies.fr/archives/16152/infographie-lhistoire-dhtml5/
Compatibilité des navigateurs avec les fonctionnalités de HTML5 : http://html5readiness.com
Pour vérifier la compatibilité de votre navigateur avec HTML5 : http://html5test.com 

Démos HTML5  :

Les grands principes :

 

  • un langage qui privilégie ses utilisateurs (développeurs, webdesigners…) : il supporte le contenu existant, c’est-à-dire les anciennes versions de HTML.
  • des balises simplifiées. Ex : <link href= »style.css » rel= »stylesheet » type= »text/css » /> devient <link href= »style.css » rel= »stylesheet »>
  • un langage à la syntaxe libre : balises en majuscules, minuscules, fermées ou non, avec ou sans guillemets…
  • certaines balises deviennent obsolètes, même si cela relève plutôt de l’auto-discipline puisqu’elles restent utilisables.
  • les éléments HTML sont regroupés par catégories : <header>, <footer>, <nav>, <article>.
  • Accès à des applications hors connexion grâce au stockage local et à la mise en cache.
  • intégration des API javascript et de nouvelles fonctionnalités dont voici un aperçu.

A consulter : 
http://www.alsacreations.com/article/lire/750-HTML5-nouveautes.html
http://www.html5rocks.com/fr/features/offline

 

Le rich-media et la géolocalisation

 

HTML5 intègre des technologies indépendantes des éditeurs de plug-in (flash, vidéo…) :
  • Canvas : élément, créé initialement par Apple, permettant de créer des images dynamiques, des jeux, des outils comme on pouvait le faire avec Flash.
  • Audio : une balise <audio></audio> permet désormais d’insérer un mp3 (ou un .ogg) en écoute dans un document HTML. Il dispose d’attributs à la syntaxe très simple, ex : <audio src= »musique.mp3″ autoplay loop controls preload= »none/auto »></audio>. Une personnalisation du lecteur est possible avec javascript.
  • Vidéo : il fonctionne de la même façon que l’élément <audio> et permet de lire des vidéos au format mp4 (ou .ogv). Ex : <video src= »film.mp4″ width= »360″ height= »240″ autoplay loop controls preload= »none/auto »></video>.
  • Géolocalisation , ex : http://www.html5-css3.fr/demo/exemple-geolocalisation-html5-api-google-maps

Notez que dans l’immédiat, certaines versions des navigateurs (notamment IE) ne permettant pas la lecture de ces médias, il sera parfois nécessaire de prévoir une solution alternative.

A consulter :

https://developer.mozilla.org/fr/docs/Dessiner_avec_canvas
http://fr.tuto.com/html/html5-l-element-canvas-html,15864.html
http://html5doctor.com/native-audio-in-the-browser/
http://html5doctor.com/the-video-element/
http://www.alsacreations.com/tuto/lire/926-geolocalisation-geolocation-html5.html

 

Les formulaires

 

Certaines fonctionnalités fréquemment utilisées dans les formulaires nécessitaient Javascript. Désormais, elles sont intégrées à HTML grâce à des attributs.
Quelques exemples :

  • Placeholder : permet d’insérer un texte de substitution dans un champs texte, de l’effacer si l’utilisateur clique sur ce champs et de le rétablir si ce champs est finalement laissé vide.
  • Autofocus : un champs de formulaire est automatiquement sélectionné au chargement de la page (cf. Twitter).
  • Required : à ajouter en attribut d’un champs de formulaire obligatoire.
  • Datalist : permet de combiner une liste de sélection et un champs de saisie.
  • Widget calendrier natif…

A lire :
HTML5 pour les WebdesignersJeremy Keith, Eyrolles 2010
Réaliser votre site Web avec HTML5 et CSS3Mathieu Nebra, Le livre du Zéro 2012

 

CSS3

 

Le CSS3 est une évolution du langage CSS qui intègre des fonctionnalités jusque là inexistantes ou nécessitant l’utilisation d’autres langages (javascript, flash…).
Parmi  les nouveautés les plus remarquables, notons :

La combinaison de ces propriétés permet d’obtenir des effets qui nécessitaient auparavant javascript ou flash. Voici des démos et tutoriels pour réaliser de magnifiques effets :

 

 

Javascript, Ajax, Jquery…

 

Pour finir, voici un panorama des technologies à connaître lorsqu’on évolue dans la création web. Il est important de connaître ces termes et, sans pour autant les manipuler, de savoir à quoi servent ces langages / fonctionnalités.

Promo 2013_2014

17 octobre 2013

Sites

 

Veille