Réflexions sur le webdesign, les nouvelles technologies, la vie ...

HTML5 et CSS3 : Faites évoluer le web design

Voici un livre qui m’a beaucoup intéressé, un livre pour les webdesigners. La conception d’un site passe par les langages fondateurs que sont le HTML et les CSS (HyperText Markup Language + Cascading Style Sheets). Arrivés à leurs versions majeures, HTML5 et CSS3 marquent sans aucun doute, une évolution fondamentale dans la façon de concevoir les sites web.

La connaissance de ces langages est indispensable pour les utilisateurs de CMS, comme WordPress, aussi bien du côté design que développement. Car pour moi, un bon développeur doit avoir un minimum de connaissances Front, tout comme le web-designer doit avoir des notions de PHP.

Ce livre s’adresse aux concepteurs de sites Web et aux designers Web ayant déjà la connaissance de l’HTML 4 et des CSS 2.1, qui veulent faire évoluer leurs créations et créer des sites Web intégrant ces nouveaux standards.

Dans la partir consacrée à l’HTML5, vous étudierez la nouvelle syntaxe, les nouveaux éléments de structure sémantique (en-tête, section, navigation…) et les formulaires interactifs.

Dans celle consacrée aux CSS3, vous apprendrez à utiliser les nouveaux sélecteurs, la mise en forme du texte et les conteneurs (ombre portée, coins arrondis, dégradés, bordures en motif…).

Ecris dans un style accessible, même pour les débutants, ce livre est destiné à dégrossir le sujet et vous permettra de tester ces nouveaux standards qui seront bientôt démocratisés. Vous pourrez ainsi tester avec des exercices concrets ces évolutions.
 

A propos de l’auteur :

Responsable pédagogique dans un centre de formation et formateur sur les technologies Web et les Arts graphiques pendant plus de quinze ans, Christophe Aubry est aujourd’hui dirigeant de la société netPlume spécialisée dans la rédaction pédagogique et la création de sites internet. Auteur de nombreux livres aux Editions ENI notamment sur Dreamweaver, WordPress, Drupal, HTML et CSS, il reste au fait des nouveautés concernant la conception des sites Web, en effectuant une veille technologique régulière et en intervenant dans de nombreux forums.

Table des matières :

  • Introduction
  • Chapitre 1 : L’évolution de l’HTML et des CSS
  • Chapitre 2 : La nouvelle syntaxe HTML5
  • Chapitre 3 : Les éléments de structure HTML5
  • Chapitre 4 : Des modèles de sites HTML5
  • Chapitre 5 : Évoluer vers les CSS3
  • Chapitre 6 : Les nouveaux sélecteurs CSS3
  • Chapitre 7 : La mise en forme CSS3 des boîtes
  • Chapitre 8 : L’HTML5 et les CSS3 pour le texte
  • Chapitre 9 : L’HTML5 et les CSS3 pour les formulaires
  • Chapitre 10 : Les transformations CSS3
  • Chapitre 11 : Les transitions CSS3
  • Chapitre 12 : Les animations CSS3
  • Chapitre 13 : Le multimédia : audio et vidéo
  • Chapitre 14 : Le canevas de dessin
  • Chapitre 15 : Le design Web adaptatif
  • Chapitre 16 : Un design HTML5/CSS3 : The Cat Template
  • Chapitre 17 : Un design HTML5/CSS3 : FlipThru
  • Chapitre 18 : Un design HTML5/CSS3 : dConstruct

 
Lien vers les Editions ENI : http://www.editions-eni.fr
Pour l’achat de la version papier, la version numérique est offerte.
 
Voici aussi deux dépliants aide-mémoire de 12 pages, recensant les principales propriétés. L’aspect pratique, plastifié et moins encombrant qu’un gros livre, permet de les garder toujours à portée de main.
HTML5 CSS3

Google Play : joue et gagne

Google play anciennement dénommé Android Market depuis 2008 (boutique en ligne pour système Android), vient de signer un accord avec Paramount. Les plates-formes françaises de VOD ont du soucis à se faire face au géant américain. Pour accompagner ce lancement, Google explique que des  centaines de longs-métrages de grands studios hollywoodiens et français, sont d’ores et déjà disponibles à la location. Les Français peuvent maintenant louer des vidéos depuis Google Play, ce qui était déjà possible via YouTube.

Pour les possesseurs d’un smartphone ou d’une tablette Android, il suffit de télécharger Google Play Films et suivre les instructions. La boutique est plutôt du genre minimaliste dans sa présentation, sans mise en scène spectaculaire. Elle présente 4 blocs : Top des locations, A la Une, Nouveautés et Catégories. Pareil pour les fiches films : sobriété avec la jaquette, une bande annonce, une présentation du film et un onglet : Avis des spectateurs.

 

Pour ce qui est du tarif : le même que celui proposé sur iTunes, de 3,99€ en qualité SD (4,99€ en HD) pour les films récents, ou 2,99€ pour des œuvres plus anciennes (3,99€ en HD). Certains films anciens (des années 50 et 60) sont parfois proposés gratuitement. Un coup bas aux plateformes françaises qui sont généralement positionnées à 4,99€. La durée de location est de 30 jours, mais une fois le film démarré vous n’aurez que 48h pour le regarder, des conditions assez classiques et communes à l’ensemble de ces services.

En fait, Google Play n’est qu’une vitrine, car tous les films sont hébergés sur Youtube et plus précisément sur les chaînes créées par les partenaires de « Gootube ». Au vu du nombre d’abonnés de ces chaînes, Google Play a encore de la route à faire pour devenir un lieu incontournable de visionnage des films sur le net. Dès que le film commence, c’est le player Youtube qui se lance, et en fonction de la qualité d’image choisie, le streaming passe  en 720p ou de moindre qualité en 480p ou 360p si la bande passante n’est pas suffisante.

A la différence de bon nombre de sites de VOD payante, Youtube utilise un player Flash. D’un côté, on est obligé d’utiliser les solutions Microsoft (Silverlight et Playready) et de l’autre, on a des contenus payants via Flash et des solutions DRM différentes. Mais il reste une question : quel est le DRM implémenté dans Google Play ?

En concurrence directe avec Apple, Google multiplie ses accords et compte désormais les principaux studios américains (Warner, Universal, Sony, Disney, Paramount) et quelques producteurs français (Univers Ciné, Wild Side, EuropaCorp), sans compter la dizaine de studios indépendants déjà présente. Le catalogue des services de Google Play cumule désormais près de 9000 films.

En quelques mois, Google a développé un catalogue compétitif pour concurrencer l’offre de l’Apple Store. Ainsi, quand l’iTunes Store a mis quelques années étoffer son offre qui atteint aujourd’hui 550 000 Apps pour 25 milliards de téléchargements, celle de Google Play est aujourd’hui 400 000 applications mobiles qui génèrent 10 milliards de téléchargements.

 

Formulaire d’inscription : les écueils à éviter

Suite à un travail sur une optimisation de page formulaire, j’ai décidé de regrouper une petite liste de choses qui peuvent nuire aux formulaires. Les pages d’inscription pour valider son panier sont les plus dangereuses, car un formulaire trop long, des champs mal commentés, et voilà que l’internaute s’enfuit et la vente est perdue, ceci étant confirmé par les statistiques.

Ce qu’il faut avoir en tête :

- Donner des informations personnelles fait peur.
- Même si pour créer un compte, les informations demandées sont succinctes, cela demande un effort à l’internaute.
- Les formulaires sont souvent ni clair ni ergonomique, et introduisent un sentiment de pénibilité.
- L’internaute ne pardonnera pas des erreurs techniques ou des bugs sur un site e-commerce.

En fonction de ces contraintes, il faut alors créer un formulaire beau, ergonomique, et qui fera passer l’internaute vers la page de paiement sans encombre.

Ergonomie :

- Votre formulaire doit être clair et aérer.
- Respecter des espaces suffisants entre les champs.
- Les champs doivent être suffisamment grands pour faciliter le clic et le remplissage.
- La taille de la Police des champs doit être très lisible (14px minimum).
- La longueur du champ doit être en rapport avec son contenu, par exemple le champ Code Postal doit contenir que 5 caractères et sa taille doit être en rapport. Au contraire d’un champ Adresse qui doit être très long, prévoir aussi un champ Complément d’adresse.
- Si possible, supprimer les éléments qui n’ont pas lieu d’être sur cette page et qui peuvent perturber, navigation, bannières publicitaires, images animées, etc.

Informations :

- Aider le remplissage des champs avec des infos bulles, par exemple, au survol de pictos : (?).
- Indiquer clairement les champs obligatoires, s’ils ne sont pas obligatoires pas la peine de les mettre, vous gagnerez en place et en clarté.
- Bien choisir vos titres de champs, ne laisser pas de place au doute, Ville pour ville et non pas commune.
- Donner des exemples de formatages, par exemple pour le numéro de téléphone, en dessous du champ ou à côté (06.00.00.00.00 par ex).

Gestion des erreurs :

On trouve de tout sur le net pour la gestion des erreurs, le plus simple est pourtant le mieux.
- Indiquer en haut de la page, de manière ordonné, toutes les erreurs (Toutes et non pas une à une). En rouge et en GROS sur fond visible (même si c’est moche).
- Mettre l’internaute sur la piste en indiquant comment corriger ses erreurs.
- Dans le formulaire, indiquer les champs à modifier en les encadrants de rouge (border de 2 à 4px par ex), éviter les astérisques que personne ne remarque.
- Indiquer dans le formulaire, sous les champs incriminés, comment corriger les erreurs.
- Proposer un service en ligne, par Chat ou hotline téléphonique, afin d’aider les internautes en difficulté.
- Si vous pouvez introduire de l’Ajax, corriger en temps réel les erreurs de remplissage en indiquant pendant la saisie, les erreurs commises par l’internaute.

L’Optin (option d’adhésion) :

Il faut le placer en bas de formulaire, bien visible, et expliquer les avantages de s’abonner pour recevoir des offres commerciales. Vous pouvez le cocher par défaut, mais le bénéfice n’est pas prouvé.

Un bon formulaire :

Il n’est pas forcément long, il faut surtout que l’internaute puisse le remplir avec facilité et sans impression de longueur.
Il n’y a pas de règles, ni de clics maximum, mais plutôt l’optimisation du processus pour faciliter la tâche de l’internaute.

 Page 2 de 11 « 1  2  3  4  5 » ...  Last »