Vous savez désormais ce qu’est le tri de cartes et comment le mettre en place. Découvrez sans plus attendre comment analyser les résultats et préparer le terrain pour une reconception efficace.
Depuis plusieurs années que je m’intéresse à SVG et aux nouvelles possibilités qu’offre HTML5, on me pose régulièrement cette même question : « Quel est le mieux entre SVG et Canvas ? ». Je réponds alors stoïquement et laconiquement : « Les deux mon capitaine, ça dépend ». En effet, ça dépend, voilà donc un petit guide pour vous aider à choisir entre ces deux technologies.
L’optimisation des performances des sites implique de diminuer le nombre de requêtes HTTP. Pour ce faire, il est possible de regrouper les images utilisées dans les CSS, cette technique s’appelle les sprites CSS.
Dans Introduction à la performance web, les bases des bonnes pratiques et des enjeux de la performance web ont été posées. Cet article a pour but d’aller plus loin dans ce vaste domaine en décryptant l’affichage d’une page et les pistes pour l’accélérer.
Pour répondre aux évolutions futures comme aux besoins en termes de qualité et d’accessibilité, la conception et le suivi d’un projet de site web suppose de respecter cinq étapes. Revue de détail.
Cet article est paru dans le numéro No 239 du journal Archimag (novembre 2010). Nous remercions la rédaction de ce journal pour leur aimable autorisation.

Travailler les performances d’un site web peut être un travail de très longue haleine et extrêmement technique, impliquant de multiples acteurs et de multiples compétences. L’idée de cet article est de comprendre pourquoi ce domaine est en plein essor et d’en poser les bases.
Dans le premier article, nous vous avons présenté le principe du card sorting. Découvrez désormais les différentes étapes de mise en oeuvre de cette technique, de la définition du protocole au bilan avec les utilisateurs, en passant par le choix des cartes à tester... C’est parti.
L’accessibilité ne constitue pas un simple maillon supplémentaire que l’on peut ajouter à la chaîne de production Web. Elle doit plutôt s’intégrer à chacun des maillons de cette chaîne. La seule façon de relever avec succès le défi de l’accessibilité est de répartir la responsabilité et de partager les tâches pour produire un contenu accessible.
Trop souvent dans un projet web, on se rend compte au moment de la rédaction qu’il y a beaucoup de contenus, que l’on se répète, que l’organisation n’est pas fluide. Que faire pour organiser et nommer les informations afin que l’utilisateur trouve rapidement ce qu’il recherche ? Une possibilité est d’utiliser la technique du card sorting. Sans plus tarder, découvrez le premier article de la série. Deux autres suivront pour clôturer le dossier.
Les technologies du Web sémantique (Linked Data) sont bien souvent perçues comme un rêve de laboratoire. Nous allons dans ce deuxième article à propos de RDFa vous donner une utilisation concrète de ces technologies afin d’améliorer les ventes de produits. Cette technologie est aujourd’hui utilisée par de grandes marques en ligne.
Avec la démocratisation des Smartphones, il devient nécessaire de penser en concevant un site à sa version sur petit écran... voyons donc quelles peuvent être les approches pour adapter un site sur ce nouveau support et en quoi les standards peuvent grandement faciliter cette adaptation.
La démarche d’accessibilité ne pourra bientôt plus se passer d’une refonte en profondeur. Nous allons exposer ici une méthode innovante qui, loin de fonctionner comme la classique évaluation-sanction en fin de processus, propose une amélioration progressive tout au long de la vie d’un projet.
Les feuilles de style destinées à l’impression (CSS print) sont un moyen économique de proposer une version imprimable de vos documents en ligne, mais elles ne produisent pas toujours le résultat escompté. Voici un inventaire des soucis les plus fréquents, accompagné de quelques conseils qui vous permettront de mieux gérer ces difficultés.
L’audit approfondi est une étape fréquente dans la démarche d’amélioration de l’accessibilité d’un site. Une telle démarche débute fréquemment par la recherche d’un état des lieux. Hélas, la production d’un rapport d’audit approfondi de l’accessibilité prend du temps et coûte de l’argent. Dans certains cas, cette approche se justifie parfaitement, mais dans d’autres que nous aborderons dans cet article, ce n’est pas toujours la meilleure solution. Il est peut-être temps d’inventer de nouvelles méthodes pour améliorer l’accessibilité des sites Internet. C’est ce que nous appellerons l’accessibilité agile.
Un simple site vous offre la possibilité d’avoir une visibilité sur le Web. Exposer la structure des données offre la possibilité de créer un verger riche en interactions avec la communauté Web. Une fois partagées, vos données participent à un écosystème. Quelles sont les étapes pour réaliser cette transition ?
En l’espace d’une quinzaine d’années, la production de services en ligne est passée du stade artisanal au stade industriel. Très vite, les outils se sont affûtés, les métiers se sont spécialisés, les besoins se sont révélés. Aujourd’hui, une approche qualité, fondée notamment sur la transversalité des compétences, la standardisation des outils et l’accessibilité des contenus, représente un enjeu majeur.
Cet article a initialement été publié dans le N° 3 de la revue "Documentaliste : sciences de l’information". Merci à l’ADBS pour l’autorisation de reproduction.
Préparer l’internationalisation d’un site n’est pas une opération triviale, car dans la plupart des cas, elle nécessite de passer d’un jeu de caractères à un autre. Or, un site Web résulte d’un assemblage de plusieurs logiciels, où les questions de jeux de caractères apparaissent à chaque niveau. Cet article résume les différents points de la configuration d’un site « classique » dans le cadre de l’utilisation d’UTF-8.
Une solution CSS qui remplace avantageusement la version imprimable d’un document.
La simple mise en place de formulaires sur un site peut devenir une opération assez complexe dès lors que l’on souhaite effectuer des contrôles sur les données saisies par les utilisateurs. Pour effectuer ce type de contrôles, deux possibilités nous sont offertes :
Dans cet article, nous allons montrer l’intérêt que peut apporter le Modèle Objet de Document (DOM) pour effectuer des contrôles côté client. Cette deuxième solution ne devra toutefois pas nous faire oublier la nécessité absolue d’effectuer dans le même temps des contrôles côté serveur. Ces derniers permettront d’une part d’éviter la soumission complète des données dans un format invalide, et d’autre part nous permettront d’assurer l’accessibilité de nos formulaires aux utilisateurs n’ayant pas la possibilité ou ayant fait le choix de ne pas activer Javascript sur leur poste de travail.
Si la solution proposée ici est un plus par rapport aux indispensables contrôles côté serveur, elle ne manque pas d’intérêt : elle permet d’éviter des échanges de données fastidieux avec le serveur, d’accélérer la validation des formulaires, et également d’enrichir et de faciliter la saisie pour les utilisateurs.
Mais avant de commencer, que devons nous savoir :
Daniel Glazman est impliqué depuis 1991 dans le monde des standards et depuis 1994 dans celui du Web. Il a participé au HTML Working Group pour la standardisation de HTML 4 et au CSS Working Group pour CSS 2 et CSS 3. Sa société Disruptive Innovations est membre du World Wide Web Consortium (W3C) depuis 2006. Il est depuis peu co-chairman du CSS Working Group au W3C. Son rôle au W3C, ses compétences techniques hors-pair et son inaptitude totale à la pratique de la langue de bois nous ont donné envie de lui poser quelques questions sur l’avenir des feuilles de style. Interview.
Quelles sont les unités et les valeurs à utiliser pour dimensionner la taille des caractères de façon homogène sur le plus grand nombre possible de navigateurs Web ? Aurélien Levy a mené une campagne de tests pour donner une réponse à ce problème récurrent pour les développeurs de sites web.
L’accessibilité de contenus et de services web peut-elle se réduire à l’atteinte de niveaux prédéfinis et réglementés ? Répondre « oui » d’emblée serait réducteur et contre-productif, et c’est pourtant ce qui a été fait jusqu’à présent. Ce premier article va montrer que la problématique est bien plus complexe qu’il n’y paraît.
Le premier article sur la démarche d’accessibilité a montré qu’une approche exclusivement centrée sur des résultats ponctuels et quantifiés était limitée et insuffisante. Mais quels sont les moyens d’anticiper et de maîtriser les risques de façon continue ? Quels sont les outils ? Quelles sont les perspectives ? Ce second article décline quelques élements de réflexion et de réponse.
En ce début d’année 2006, après quatre années à promouvoir les standards et l’accessibilité du web, il est temps de voir si ces idées ont faites leur chemin dans le milieu professionnel du web. Nous avons donc rédigé une série de 18 questions que nous avons posées à quatre professionnels chacun ayant son approche, son vécu et sa façon d’utiliser et de produire du code standard et accessible. Ce qui démontre si besoin est, que bien qu’utilisant des standards communs, la diversité est plus que jamais présente chez les professionnels du web...
En ce début d’année 2006, après quatre années à promouvoir les standards et l’accessibilité du web, il est temps de voir si ces idées ont faites leur chemin dans le milieu professionnel du web. Nous avons donc rédigé une série de 18 questions que nous avons posées à quatre professionnels chacun ayant son approche, son vécu et sa façon d’utiliser et de produire du code standard et accessible. Ce qui démontre si besoin est, que bien qu’utilisant des standards communs, la diversité est plus que jamais présente chez les professionnels du web...
En ce début d’année 2006, après quatre années à promouvoir les standards et l’accessibilité du web, il est temps de voir si ces idées ont faites leur chemin dans le milieu professionnel du web. Nous avons donc rédigé une série de 18 questions que nous avons posées à quatre professionnels chacun ayant son approche, son vécu et sa façon d’utiliser et de produire du code standard et accessible. Ce qui démontre si besoin est, que bien qu’utilisant des standards communs, la diversité est plus que jamais présente chez les professionnels du web...
En ce début d’année 2006, après quatre années à promouvoir les standards et l’accessibilité du web, il est temps de voir si ces idées ont faites leur chemin dans le milieu professionnel du web. Nous avons donc rédigé une série de 18 questions que nous avons posées à quatre professionnels chacun ayant son approche, son vécu et sa façon d’utiliser et de produire du code standard et accessible. Ce qui démontre si besoin est, que bien qu’utilisant des standards communs, la diversité est plus que jamais présente chez les professionnels du web...
En ce début d’année 2006, après quatre années à promouvoir les standards et l’accessibilité du web, il est temps de voir si ces idées ont faites leur chemin dans le milieu professionnel du web. Nous avons donc rédigé une série de questions que nous avons posées à quatre professionnels chacun ayant son approche, son vécu et sa façon d’utiliser et de produire du code standard et accessible. Ce qui démontre si besoin est, que bien qu’utilisant des standards communs, la diversité est plus que jamais présente chez les professionnels du web...
Est-il possible et souhaitable pour un site de grande importance ou qui recueille des contenus de la part de ses utilisateurs, voire d’un certain nombre de contributeurs d’atteindre et de conserver durablement la conformité absolue de toutes ses pages aux standards ? Existe t-il des cas où la recherche de la conformité à tous prix peut nuire à la qualité du site ?
A l’heure où certains pays se dotent d’une législation nationale sur l’accessibilité numérique, ce document rappelle les enjeux internationaux de l’accessibilité, et l’ensemble de ses bénéfices sociaux, financiers, techniques et managériaux.
En nous présentant les différentes actions de la cellule accessibilité de BrailleNet, Pierre Guillou fait pour nous le point sur les problématiques d’accessibilité du Web.
Au sein des PMI ou des grands comptes, on voit fréquement des projets Internet ou intranet souffrir des effets pervers d’un double pilotage par les directions informatiques (DSI) et les directions communication.
Dans la première partie de cet article, nous avons vu qu’il était quelquefois difficile de faire travailler ensemble des directions ou des personnes issues de cultures différentes. Dans cette dexième partie, nous allons voir comment l’accessibilité peut mettre tout le monde d’accord et limiter les sources de conflit.
"Aujourd’hui, l’objectif est d’écrire du code lisible par tout dispositif de lecture ayant accès aux référentiels (langue, langages, caractères...) tels qu’ils sont précisés dans chacune des pages. On change la donne, et on revient à des enjeux foncièrement documentaires."
CSS signifie « feuilles de styles en cascade »... Mais au fait, la cascade, qu’est-ce que c’est, à quoi ça sert, comment cela fonctionne ? Plongez avec nous dans la cascade sans risque de noyade !
De nouvelles applications web ont vu le jour récemment : recherche avec complétion automatique, sauvegarde instantanée d’informations, interface mail hyperdynamique, cartographie, etc. mais aucune ne fait appel à des plugins tiers comme Flash ou Java. On parle alors souvent de méthode AJAX qui s’articule essentiellement autour de Javascript et d’un objet (dans le sens de la programmation orientée objets) en particulier : XMLHttpRequest.
Comment utiliser la propriété CSS background pour gérer des images d’arrière-plan ?
Le rendu final d’une page Web n’est pas le produit figé des règles de présentation fixée par son auteur : il résulte de la combinaison des 3 sources de styles de l’auteur, de l’agent utilisateur et de l’utilisateur lui-même.
Comment insérer un script ECMAScript dans un fichier HTML.
Les styles alternatifs : leur utilité, leurs avantages, et la mise en place d’une structure unique permettant leur implémentation.
Entre les attributs HTML, les éléments meta et les en-têtes HTTP, les moyens de spécifier la ou les langue(s) d’une page Web ne manquent pas. Mais la pratique montre l’existence de deux besoins bien différents en la matière : il importe de différencier langue primaire d’une ressource Web et langue de traitement d’un contenu, et d’utiliser à bon escient les outils à notre disposition pour les indiquer.
Les fils de syndication, et particulièrement ceux au format RSS, connaissent un succès chaque jour croissant. Mais on voit en parallèle s’accroître la consommation de bande passante et de temps serveur. Comment faire pour ne pas effectuer de multiples requêtes inutiles sur des informations actualisées tout au plus quotidiennement ?
Pas à pas, comment construire un fil RSS au format RDF Site Summary 1.0.
Qu’est-ce que la syndication de contenu ? Qu’est-ce qu’un fil RSS ?
Les standards Web sont une avancée majeure, mais ils ne sont pas magiques. En tant que décideur, ce choix peut vous tenter, mais vous devez connaître les risques et avantages d’une migration vers les standards pour décider en conscience. Cet article répond à certaines questions que vous êtes en droit de vous poser.
Participez à la relecture francophone du projet de la spécification XHTML 2.0 du W3C.
Qu’est-ce qu’un jeu de caractères ? Quelle est la différence entre ISO-8859-1, UTF-8 et Windows-1252 ? Steve Frécinaux nous présente les différents jeux de caractères.
Parmi les multiples techniques permettant de zoomer une image à l’écran, voici celle qui, uniquement à l’aide de CSS2, permet un zoom au survol d’une image avec la souris.
Les touches d’accès clavier sont a priori un mécanisme d’accessibilité très séduisant par sa simplicité de mise en oeuvre. Mais les nombreux obstacles rencontrés du fait d’une implémentation inachevée en limitent considérablement la portée. Seules une poignée de touches numériques s’avèrent finalement pertinentes, et ce uniquement en renfort d’autres mesures d’accessibilité plus éprouvées.
Afin de rendre plus attrayante une liste à puces, l’utilisation des CSS permet de remplacer les traditionnelles puces par des images, de façon extrêmement simple.
Qui est donc ce remplaçant du GIF, datant de 1996 et méconnu de la plupart des graphistes, amateurs comme professionnels ?
Vous utilisiez les balises HTML de présentation ? Pour tirer parti des avantages offerts par les standards, découvrez le vocabulaire élémentaire des feuilles de style.
Ned Baldessin, professionnel du Web, nous présente le point de vue des graphistes sur les différentes technologies qui forment les standards de l’Internet.
En fouinant sur le web, on peut découvrir plusieurs pratiques pour appeler des scripts en Javascript qui vérifient le contenu d’un formulaire. Mais elles sont, hélas, rarement correctes dans le sens où beaucoup d’entre elles réduisent l’accessibilité et l’ergonomie des formulaires, voire sont inefficaces. Cet article vous propose de passer en revue ce qu’il faut faire et ne pas faire en la matière.
Les formulaires sont souvent utilisés mais parfois de manière peu souhaitable ou peu accessible. Cet article est là pour faire un tour d’horizon des possibilités et des bonnes habitudes. Il peut être autant utile au débutant cherchant à comprendre les formulaires qu’au confirmé cherchant quelques notions d’accessibilité.
Depuis son invention par Tim Berners-Lee en 1989, le web est passé par nombreuses phases d’évolution. Celles-ci l’ont rendu de plus en plus complexe au point d’en perdre son objectif premier : la simplicité et le partage avec tous. Heureusement, le W3C s’est mis au travail pour uniformiser les pratiques. Aujourd’hui, grâce aux standards que sont le XHTML et les CSS, on peut créér des sites liant esthétisme, interopérabilité et accessibilité.
Après plusieurs années d’hégémonie quasi totale d’un seul navigateur Web, de nouveaux outils sont apparus, et ils représentent maintenant une part considérable du parc des navigateurs installés. De plus en plus utilisés par les internautes, qui apprécient leur rapidité, leur robustesse et leurs fonctionnalités, ils respectent les standards du Web et facilitent ainsi le travail des développeurs Web. Fort de cette appropriation à grande échelle par le grand public et les professionnels, ces nouveaux navigateurs ne sont nullement exotiques ou alternatifs. En toute logique, cet article publié initialement en 2003 sous le titre "Les navigateurs alternatifs" a été rebaptisé "les navigateurs modernes", qui décrit plus justement la réalité actuelle.
Les standards du Web apportent aussi leur lot d’avantages aux sites d’entreprise, Internet, intranet et extranet. Voyons comment les décideurs marketing, communication et informatique pourront tirer parti de l’utilisation des standards au sein de leur entreprise.
Faire des tableaux de données accessibles et respectant les standards avec les CSS
Pourquoi éviter les tableaux pour faire de la mise en page.
Pour mieux comprendre l’accessibilité, faisons un tour d’horizon des handicaps et des technologies permettant de les contourner, et comment le W3C s’attelle à faire du Web un endroit accessible à tous.
Quelques raisons pour lesquelles les cadres devraient être évacués de tout bonne pratique Web.
Les métadonnées du Dublin Core permettent de donner des informations à propos de pages Web. Dans cet article, nous voyons la forme de ces descriptions, ainsi que la façon de les intégrer dans des pages (X)HTML.
Comment ouvrir une nouvelle fenêtre sans se priver des internautes qui ne disposent pas de JavaScript ou l’ont désactivé ?
Réalisons un menu déroulant qui soit à la fois portable, utilisable sans JavaScript et accessible aux personnes handicapées.
Les images constituent le premier obstacle majeur à l’accessibilité des pages Web. Voici quand et comment en donner un équivalent sous forme de texte.
Pour créer un bouton changeant d’aspect au passage de la souris, on peut utiliser les styles légers et accessibles.
Comment utiliser une feuille de style pour insérer dans le contenu HTML des images décoratives.
Validation, Déclaration de Type de Document : la grammaire d’un langage Web universel.
La position absolue et la position fixe permettent de placer une boîte par rapport aux limites de la zone d’affichage ou du conteneur. Comment les utiliser dans une mise en page CSS ?
Les règles à suivre pour passer de la syntaxe HTML à la norme XHTML.
Pourquoi et comment utiliser les balises (X)HTML à bon escient.
Comment rendre un site existant conforme aux normes XHTML et CSS, en prenant une page non conforme, et en la transformant pour obtenir une page respectant les standards.
Une rapide introduction à XHTML, qui vous permettra de faire vos premières armes avec ce langage de description.
Cette page présente les caractères codés de 128 à 159 - propres à Windows, mais invalides selon les spécifications HTML 4+ et XHTML, ainsi que leurs codes de substitution valides.
JavaScript est un langage de programmation utilisé principalement sur le Web, développé par Netscape et repris par Microsoft sous le nom de JScript. ECMAScript est une tentative de normalisation du noyau du langage : sa syntaxe, ses mots-clés et ses composants natifs.
Par défaut, les navigateurs affichent les boîtes issues du document html dans l’ordre du flux normal. En position relative, un élément peut être décalé verticalement et/ou horizontalement.
Comment créer en CSS un overflow avec une image de fond fixée dans le bloc défilant ?
Les différentes méthodes de centrage d’un contenu HTML.
La position float retire une boîte du flux normal pour la placer le plus à droite ou le plus gauche possible dans son conteneur. Comment l’utiliser dans une mise en page CSS ?
Interopérabilité, accessibilité, portabilité, pérennité des documents, réduction des coûts... l’avenir du Web passe par les Standards.
Mise à jour (3 février 2012) : une version traduite en bulgare de cet article a été mise en ligne en janvier 2012. Il s’agit d’une traduction autorisée dans le cadre de l’initiative "Bulgarian FCW Science", et nous profitons de l’occasion pour remercier M. Albert Ward.
Les balises et attributs devenus obsolètes entre le HTML ou XHTML strict et transitional, et les moyens de les remplacer.
Page valide XHTML 1 Strict,
CSS2 et
accessible AA.
Ce site s'affiche mieux dans un navigateur conforme aux standards,
voici pourquoi.
Site hébergé par yterium (depuis 2010) et par l'APINC (2002-2010)
.
Propulsé par SPIP.