Le petit journal du web

Le petit journal du Web — Décembre 2010

Comme à son habitude, le petit journal du Web fait le point sur les sites et les services (re)découverts pendant les 30 derniers jours. Pour décembre, ce petit journal vous propose : à la Une, un site consacré à l’accessibilité Web  ; dans la rubrique Graphisme et Ergonomie, un bookmarklet pour afficher les Wireframes ; dans la catégorie CSS, CSS3 et HTML5, une piqûre de rappel sur l’organisation des feuilles de styles CSS ; et nous terminons avec un rappel des éléments à prendre en compte lors de la migration d’un blog WordPress et une mine de ressources pour les chefs de projet Web !

A la Une !

Graphisme & Ergonomie

  • Wirify — Un Wireframe est une représentation stylisée d’une page, appelé également maquette «fil de fer» qui permet de faire apparaitre les zones principales sans se soucier des détails. Cette maquette sert de base pour le travail du graphiste. Wirify affiche la version «fil de fer» du site affiché dans votre navigateur, ce qui s’avère pratique pour faire apparaitre la structure d’une page. via John’s Graphisme.
  • Guiding user Eye in your Designs — La capacité a retenir l’attention des utilisateurs et à les guider à travers la page en utilisant les nuances de couleurs pour rythmer la page est un élément fondamental que tout Webdesigner devrait prendre en compte.
  • Le principe de proximité dans le webdesign — Le principe de proximité est relativement simple à mettre en oeuvre : il suffit d’augmenter ou de diminuer la « distance » entre deux ensembles pour que l’utilisateur identifie rapidement les zones principales à parcourir, le faisant passer du statut de « visiteur » à celui de « lecteur ».
  • Vendredi c’est graphism ! — La rubrique hebdomadaire sur OWNI de Geoffrey Dorne (@geoffreydorne) sur l’actualité du graphisme dans l’univers et au-delà !!!
  • Guidelines, l’exemple de la BBC — Présentation par Eric Le Bihan des Guidelines (lignes directrices) de la BBC à l’attention de leurs fournisseurs en terme d’accessibilité, de charte éditoriale et graphique et de considérations plus techniques.
  • The Noun Project — L’objectif est ambitieux : collecter, organiser et rendre accessible les symboles du langage visuel de notre monde, sous forme d’icônes, de pictogrammes disponibles au téléchargement au format SVG, sous licence Creative Commons. Via @mbonnel.
  • Where is the fold? — Superpose la matérialisation du fold à la page Web spécifiée. Le fold est la zone en deça de laquelle l’utilisateur n’a pas besoin de scroller pour visualiser la page. Where is the fold? montre le fold tel qu’il apparait selon les résolutions d’écran les plus courantes, avec des indications statistiques sur le pourcentage d’utilisation. Via @chef2projet. Lire Les habitudes de scrolling à la loupe.
  • Web Without Words — Expérience visuelle intéressante consistant à remplacer les mots d’un site Web par des blocs noirs et gris.
  • Le petit journal permanent de la TypOgrApHiE ! — Toujours vaillant, cet article mis à jour régulièrement rassemble toujours le meilleur de la typographie sur le Web.

CSS / CSS3 / HTML5

  • Méthode Daisy : les CSS feuille à feuille — Très bonne initiation à la philophie des frameworks CSS avec une fort belle métaphore de la marguerite au service de l’intégrateur HTML & CSS. Dites-le avec des fleurs !
  • Lightbox sans Javascript — Une Lightbox full CSS qui remplaçe l’événement `click` par la pseudo-classe `:focus` et la propriété `tabindex` pour permettre aux images d’avoir le «focus». Voir la démonstration.
  • Le Web Design Réactif — Traduction de l’article Responsive Web Design d’Ethan Marcotte sur l’utilisation des Medias Queries pour concevoir des sites Web s’adaptant aux contraintes des agents utilisateurs, la taille du viewport notamment, mais pas seulement.
  • HTML5 and CSS3 Without Guilt — Net|tuts fait le point sur les différentes techniques pour commencer à utiliser HTML5 et CSS3, là, tout de suite.
  • Gérer les débordements de contenu grâce à CSS — Article très utile de Raphaël sur les différentes manières d’éviter que votre contenu ou celui de vos rédacteurs ne casse votre belle mise en page. Au menu : `overflow: hidden`, `word-wrap: break-word`, `text-overflow: ellipsis`, `max-width: 100%`,  avec des exemples, des conseils d’utilisation et un point sur la compatibilité inter-navigateur !
  • CSS Gradient Text Effect — Utilisez des dégradés pour plusieurs titres avec une seule image au format PNG. Pas mal de contre-indications, mais peut faire son petit effet !
  • Ultimate Guide to Microformats: Reference and Examples — Guide complet sur les microformats avec une table des microformats disponibles et des exemples concrêt d’utilisation.
  • Internet Explorer 7 : le nouveau standard du Web — Avec la mort annoncée de IE6, il est judicieux de se remettre en mémoire les propriétés CSS dont nous nous sommes privées depuis (trop) longtemps : sélecteurs multiples, sélecteurs d’attributs, sélecteur adjacent, sélecteur d’enfant direct, propriétés `max-width`, etc. Et non, IE7 ne sera peut-être pas le nouveau IE6 😉
  • Un menu utilisant un sprite CSS — L’utilisation des sprites est un atout pour améliorer les performances de votre site. Voir la démonstration.
  • Le petit journal permanent de HTML5 — Toujours vaillant, cet article mis à jour régulièrement rassemble toujours le meilleur des ressources sur HTML5 !

Miscellanées

  • Migration de mon blog WordPress — Article expliquant dans le détail la migration du nom de domaine et de l’hébergement de notre ami Darklg. Toujours utile pour ne rien oublier dans cette opération, toujours périlleuse !
  • chef2projet — Boîte à outils pour chef de projet web et webmaster classés dans 4 catégories : optimisation du référencement, veille de sites ou blogs, gestion de projet web et création de site web.

Publié le par Bruno Bichet