Il vient d’affronter victorieusement Derek Pozawek ( prononcer comme vous le voulez ) dans le grand tournoi de « Layer Tennis« .

De quoi s’agit-il ? Le principe est simple. Deux Web designers ( sélectionnés sur le volet ) s’échangent tour à tour un document numérique qu’il modifie à tour de rôle dans le temps imparti de 15 minutes. Chacun des protagonistes doit modifier le document qu’il reçoit à 5 reprises en s’appuyant sur une partie du contenu. Une troisième personne commente le match en live ( un vendredi après-midi) et celui-ci peut être suivi sur Twitter. Un vainqueur est déclaré à la fin de l’exercice.

Ici pas de poignée de main au Duc de Kent pour le vainqueur, mais la reconnaissance des spécialistes.

Santa Maria déclare qu’il s’agit juste pour lui d’un exercice d’habileté visuel ( compétences) et de respect de contraintes esthétiques.

Je vous recommande de suivre un match ou deux enregistrés : Santa Maria vs Powazek , Inman vs Hubacek

C’est beau le sport. Non ? Enfin comme tous les grands évênements sportifs, celui a aussi son sponsor, et devinez …c’est Microsoft Google Adobe.

L’objet est un beau petit pavé de 1,2 kg mesurant 22.5 cm de haut sur 17 cm de large, broché et particulièrement bien fini. Ce volume est le troisième d’une série qui est née en 2005 et qui voit naître tous les ans un nouvel opus.

De quoi s’agit-il ? Sorte d’ »état de l’art », Web Design Index by Content est une sélection de plus de 500 sites Internet, illustrant les dernières tendances en matière de conception et de design web. La compilation est l’oeuvre de Günter Beer et est éditée par The Pepin Press – Agile Rabbit editions. Chaque site web choisi par l’auteur est présenté sur une unique page contenant deux photographies : la page d’accueil et une page représentant le contenu type du site. Des infos en bas de page renvoient : les noms des designers et des concepteurs, l’adresse du site et une adresse email de contact.

La très bonne idée est l’ajout d’un CD-Rom permettant d’explorer les sites ( et leurs codes sources ) à travers une interface claire.

C’est évidement le haut du panier, et on retrouve dans ce volume des références comme le guru de Philadelphie Jason Santa Maria ou le « typophile » Jos Buivenga. Quelques sites français sont également présent. Les sites présentés sont classés par domaine ( 21, d’architecture à tourisme) et ce classement thématique laisse entrevoir certaines constantes liée au contenu. La présente édition date de 2007 et un certain nombre de sites présentés sont encore entièrement construit à partir de Flash. L’édition suivante est à paraître en Juin 2009 et présentera les tendances 2008, nous devrions voir un recul des technologies Flash sur les tendances à venir.

Non exhaustive, c’est évidement une source importante d’inspiration et de réflexion sur le design du web qui dépasse le simple catalogue.

liens :

Web Design Index by content

The Pepin Press

La solution offre déjà toute sa puissance après quelques heures de découverte. Mais quand on se laisse aller à une plus longue étude, c’est vraiment une plate-forme d’édition très efficace et ultra modulaire.

J’espère pouvoir apporter ma pierre à l’édifice et contribuer à la communauté française de Drupal par la traduction de quelques articles du site général Drupal.org …

Mon choix a été conforté par l’aide technique et la qualité du travail que réalise Alexandre Eisenchteter sur son site 100% drupal : Inéation.

Enfin, cerise sur le gâteau, Mark Boulton et Lisa Reichelt ( des figures de la ligne claire du design web ) ont été invité pour plancher sur l’aspect utilisabilité du projet Drupal 7 prévu en 2009. Mark Boulton Design avait déjà collaboré avec Drupal.org pour le redesign du site. Que du bon …

Au démarrage, l’interface simpliste m’a bien plu. Sans chercher, j’ai trouvé l’accès à toutes les fonctions ou presque (enfin je crois).

J’aime le design général de l’interface, dépouillé et clair. Les fonctionnalités ne perdent rien dans cette simplicité apparente, et 90% de celles que nous utilisons sur un navigateur sont à portée de souris. J’ai cherché quelques instants la zone de recherche avant de naturellement me diriger vers l’unique champ.

Si j’effectue une basique évaluation ( + : c’est bien et – : c’est moins bien ), j’obtiens ceci :

Les +

• Le champ unique de recherche et d’adresse, et le rappel des pages de recherche pour les chaînes de caractères soumises par l’internaute : efficace.

• L’inspecteur web : un clic droit sur un élément puis « inspecter l’élément », et voilà que s’ouvre une fenêtre Inspector qui me renseigne sur l’élément pointé (localisation dans le html, précisions css, etc ). La fonction est assez proche de ce qu’est firebug pour Firefox, très pratique ( pour les webdesigners) , inutile ( pour les autres )…IE7 ne sait pas faire.

• La recherche sur sélection puis clic droit : en sélectionnant une zone de texte dans le corps de la page web, je peux en faire la recherche sur un moteur de recherche par le menu contextuel, clic droit et « rechercher … avec google ». Petit bémol, la liste par défaut des moteurs utilisables pour cette fonction est limitée et ne peut être modifiée. Firefox sait faire cela aussi, IE 7 non.

• « L’autonomie » des onglets : Si une page consultée pose des problèmes de sécurité ou de fiabilité, vos autres onglets ouverts ( si il y en a ) ne seront pas affecté par le « bug » et vous pourrez continuer votre navigation ( ou téléchargement ) sans avoir à redémarrer le navigateur. Cette fonction est lié à un multi-process qui peut toutefois être gourmant en ressources.

Les -

• L’absence d’une gestion fine des favoris : cette absence devient un problème lorsque la liste des favoris commence à grandir et qu’il faut les déplacer d’un dossier à l’autre pour affiner votre classement.

• Les customisers vont être déçus ! : pas de thèmes pour le moment pour embellir l’application. ce n’est pas une contrainte majeure selon moi.

Comme il s’agit d’une version béta, nous verrons bien quelles seront les prochaines évolutions pour la sortie officielle. Affaire à suivre…

• V8, son moteur JavaScript, annoncé plus puissant pour les applications futures.
• Son moteur de rendu nommé Webkit HTML (utilisé par Safari le navigateur d’Apple)

Petit bémol, cette version bêta de Chrome n’est pour l’instant disponbile que pour Windows. Google annonce qu’il travaille sur les versions Linux et Mac. Se dire Opensource et « communautaire », et oublier Linux pour la première sortie bêta , c’est assez étonnant…

Bref, quelques jours pour le tester et je vous reparle de Chrome.

————————————–

quelques liens :

>> Google Chrome
>> La BD qui annonce la venue de Chrome (en anglais )
>> L’article du blog de Tristan Nitot ( Président de Mozilla Europe, éditeur de Firefox ) au sujet de Chrome.

Plutôt que d’un accouchement, il s’agit d’une normalisation du langage balisé faite conjointement avec les grands acteurs du moment IBM, Microsoft, Netscape, Novell, SoftQuad, Spyglass, et Sun Microsystems.

Les évolutions par rapport à la version HTML 2.0 sont importantes et concernent surtout la présentation (tables, flux du texte avec les images etc).

CSS1.0⁽³⁾ a vu le jour également fin 1996, mais la présentation est l’affaire des balises HTML d’attributs. Les feuilles de styles ne remplissent donc pas leur rôle !

Puis vint très rapidement, la première évolution avec la naissance d’HTML4.0 (décembre 1997). HTML4.0 est la première version d’HTML a réellement prendre en compte l’accessibilité. Au fur et à mesure que la communauté du Web grandit, elle se diversifit et il devient crucial que les technologies sous-jacentes soient orientées au service de cette diversité.
Les pages du Web doivent impérativement être accessibles à tous.

Voici les évolutions d’HTML 4.0 tournées vers l’accessibilité :

• Distinction entre la structure d’un document et sa présentation.
• Amélioration des formulaires.
• Possibilité de baliser la description d’un objet inclus.
• Possibilité de créer un texte alternatif aux images contenues dans les pages à l’intention des nonvoyants et malvoyants.
• Création des balises associées aux abréviations et acronymes.
• Elargissement des médias (TTY pour les malentendants et Braille pour les nonvoyants).

Cette période est aussi celle du développement des outils d’édition de type WYSIWYG⁽⁴⁾, et de la surutilisation des tableaux pour la mise en page.

Les pratiques et les normes se téléscopent, ou plutôt se contournent au détriment des utilisateurs. Les outils d’édition ne dispensent pas de la connaissance du contenu des DTD⁽⁵⁾ dans HTML. Un nombre important de pages du web sont créées à partir de logiciels de traitement de texte et ne sont pas conformes aux normes. Les navigateurs web (surtout les deux principaux MS Internet Explorer et Nescape Navigator) s’affranchissent des normes également.

Les développeurs doivent faire le choix lors de la création de leurs pages d’une optimisation pour l’un ou l’autre de ces navigateurs.

1998 est aussi l’année de naissance de CSS 2.0, seulement cette version est loin d’être supportée par l’ensemble des navigateurs du marché.

En mai 1999, le W3C met en place un ensemble de recommendations portant le nom de WCAG⁽⁶⁾. Des « techniques » pour l’accessibilité aux contenus du Web sont proposées. Le document est divisé en trois partie. La première section expose quelques thèmes sur l’accessibilité (distinction structure/présentation, les équivalents texte pour les navigateurs non-visuels et les lecteurs Braille, pages alternatives, accès clavier, navigation et compréhension). La seconde partie est consacrée aux techniques pour concevoir des documents HTML accessibles, alors que la troisième et dernière partie liste un certain nombre de techniques pour l’utilisation de CSS.

Hélas, les recommendations ne sont pas toujours appliquées et les principaux outils utilisés par les webmasters ne permettent pas toujours une création de pages conformes. L’arrivée de XHTML⁽⁷⁾1.0 en 2000 ne va pas changer grand chose, car les principaux éditeurs de pages web WYSIWYG se montreront obsolètes. Ces nouvelles évolutions de la période 1999-2000 rencontrent les mêmes obstacles que les évolutions de 1997-1998, à savoir : non-respect des recommendations et incapacité des éditeurs de pages Web à établir une structure sémantique et d’en-tête cohérente.

Place au présent maintenant. XHTML1.1 a vu le jour et CSS 2.0 est supporté par la majorité des dernières versions des navigateurs du marché. Les besoins évoluent : le document Web doit être interractif et sa mise à jour dynamique. C’est l’heure des CMS⁽⁸⁾ ou Systèmes de gestion de contenu qui permettent l’édition de pages et le chargement de média à l’intérieur des pages web. Chacun peut insérer du contenu dans les pages web, et d’après John Roscan, « les sites poussent comme des champignons diffusant de l’inaccessibilité » !

Les contenus deviennent de plus en plus variés et les opérations d’interraction ne sont pas simples pour les personnes présentant un handicap. Les recommandations WCAG 1.0 établissaient la limite de l’accessibilité au balisage. Seulement, les documents qui circulent sur le Web sont multiples et variés. Les fichiers PDF (formulaires etc) par exemple ne peuvent pas être tagués et être interprétés directement par les navigateurs.

Quel avenir ?

Le Web évolue malgré tout et bientôt XHTML 2.0, CSS 3.0, WCAG 2.0 seront les normes à suivre dans la quête de standardisation. Un projet à la hauteur de la révolution qu’a été l’apparition du Web pour nos sociétés. Un projet de web compréhensible et accessible pour tous.

notes : (retour article)
⁽¹⁾ W3C : World Wide Web Consortium. Organisme qui définit les recommandations concernants les protocoles et technologies utilisés sur le Web.
⁽²⁾HTML : Hypertext Markup language. Le HTML est un langage informatique de balisage qui permet de créer des pages web.
⁽³⁾CSS : Cascading Style Sheet. Les feuilles de style en cascade. Il s’agit d’un langage informatique permettant de construire la présentation d’un document (souvent une page Web) indépendamment du contenu de ce dernier. On sépare ainsi la présentation de la structure de la page. Les avantages fonctionnels qui en résultent sont très importants.
⁽⁴⁾WYSIWYG : « What you see is what you get », soit « Ce que vous voyez est ce que vous obtenez ». Cet acronyme désigne les logiciels qui offrent une interface d’édition permettant de visualiser immédiatement le résultat final obtenu.
⁽⁵⁾DTD : Document Type Definition, également appellé Doctype. Il sert à définir les règles d’écriture utilisées pour la rédaction de votre page web.
⁽⁶⁾WCAG : Web content accessibility guidelines – Recommendations pour la création de sites web accessibles construitent autour de conseils généraux et d’une liste de points à contrôler répartis selon trois niveaux de priorité (de A, les points les plus importants à vérifier, à AAA, les points les plus accessoires).
⁽⁷⁾XHTML : eXtensible Hyper Text Markup Language. XHTML est l’évolution de HTML vers une application XML (langage de balisage facilitant l’échange automatisé de contenus).
⁽⁸⁾CMS : Content Management System. Logiciels de conception et de mise à jour dynamique de site web ou d’application multimédia.

sources :

A History of web development, Peter-Paul Koch Quirksmode.org

A Journey Through Accessibility, John Roscan Juicy Studio

Articles Wikipédia : HTML, CSS, W3C, XHTML, CMS