Débutant

Vous avez envie de faire un site web, mais vous ne savez pas comment vous y prendre ? Bien sûr, le Web ne manque pas de solutions clés-en-main et d’éditeurs HTML simplifiés, qui vous promettront que vous n’aurez jamais à lire ou à écrire une seule ligne de code.

Mais le prix à payer pour cette facilité est un site conçu selon la technologie des années 90, époque où la guerre entre Netscape et Microsoft faisait rage, et où il n’existait que ces deux navigateurs. Autrement dit, un site fait pour être vu dans certains navigateurs seulement, peu évolutif, difficile à gérer à long terme et inaccessible aux personnes handicapées.

Sans doute préféreriez-vous ouvrir votre site à tous les internautes et tous les navigateurs modernes (IE 6, Netscape 7, Mozilla 1, Opera 7, Safari 1, etc) comme aux nouveaux médias d’accès à Internet (navigateurs vocaux, ordinateurs de poche, etc) ? Peut-être jugerez-vous préférable de faire un site plus facile à maintenir, évolutif et ouvert aux technologies d’avenir (XML) ?

C’est pourquoi nous vous encourageons à découvrir, à travers nos articles d’initiation, les technologies actuelles du Web regroupées sous l’appelation de « Standards Web », et en particulier :

C’est pourquoi nous vous encourageons surtout au respect des standards, pour mettre fin à la balkanisation du web et contribuer à la construction d’un Internet universel et accessible à tous. En 2003, il est temps de faire passer le web à une vitesse supérieure et de tirer parti des fonctionnalités des navigateurs modernes. En suivant les conseils proposés par OpenWeb, vous allez vous simplifier la vie, tout en faisant progresser Internet.

Openweb :

Articles

Accesskey, l’essai non transformé de l’accessibilité par Laurent Denis, le 01/05/2004 pour Débutant, Expert, Accessibilité.

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.

Avoir plusieurs présentations alternatives pour votre site par Nicolas Hoffmann, le 11/03/2005 pour Débutant, Expert, (X)HTML, CSS, Mise en page.

Les styles alternatifs : leur utilité, leurs avantages, et la mise en place d’une structure unique permettant leur implémentation.

Bien valider ses formulaires avec Javascript par Laurent Jouanneau, le 17/12/2003 pour Débutant, Expert, DOM, Pages dynamiques, Accessibilité.

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.

Bouton CSS par Pascale Lambert Charreteur, le 21/04/2003 pour Débutant, CSS, Mise en page.

Pour créer un bouton changeant d’aspect au passage de la souris, on peut utiliser les styles légers et accessibles.

Cascade CSS et priorité des sélecteurs par Laurent Denis, le 21/04/2005 pour Débutant, Expert, CSS, Mise en page.

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 !

Compatibilité multi-navigateurs des polices de caractères par Aurélien Levy, le 09/03/2008 pour Débutant, Expert, CSS, Mise en page.

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.

Construction d’un fil RSS 1.0 par François Hodierne, le 14/10/2004 pour Débutant, Expert, RSS.

Pas à pas, comment construire un fil RSS au format RDF Site Summary 1.0.

Contrastes de texte par Nicolas Hoffmann, le 16/02/2012 pour Débutant, Expert, Accessibilité.

Les contrastes de textes sont un élément essentiel d’accessibilité des sites internet. Un choix judicieux permet de garantir une lisibilité maximale aux personnes ayant un handicap visuel permanent (déficience visuelle, etc.), temporaire (fatigue, écran de mauvaise qualité, etc.)… et toutes les autres.

Créer des pop-up intelligentes par Fabrice Bonny, le 12/05/2003 pour Débutant, Expert, Pages dynamiques, Accessibilité.

Comment ouvrir une nouvelle fenêtre sans se priver des internautes qui ne disposent pas de JavaScript ou l’ont désactivé ?

Des images accessibles par Laurent Denis, le 28/04/2003 pour Débutant, Expert, Accessibilité.

Les images constituent le premier obstacle majeur à l’accessibilité des pages Web. Voici quand et comment en donner un équivalent sous forme de texte.

Des puces en images par Pascale Lambert Charreteur, le 01/05/2004 pour Débutant, CSS, Mise en page.

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.

ECMAScript et (X)HTML par Steve Frécinaux, le 21/03/2005 pour Débutant, Expert, DOM, Pages dynamiques.

Comment insérer un script ECMAScript dans un fichier HTML.

Faire un menu dynamique ouvert et accessible par Fabrice Bonny, le 12/05/2003 pour Débutant, Expert, Pages dynamiques, Accessibilité.

Réalisons un menu déroulant qui soit à la fois portable, utilisable sans JavaScript et accessible aux personnes handicapées.

Fructifions nos données sur le Web par Karl Dubost, le 07/07/2009 pour Débutant, Expert, (X)HTML, Structure.

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 ?

Habillage de tableaux avec des CSS par Pascale Lambert Charreteur, le 24/10/2003 pour Débutant, Expert, CSS, Mise en page.

Faire des tableaux de données accessibles et respectant les standards avec les CSS

Indiquer la fréquence de mise à jour d’un fil de syndication au format RSS par Fabrice Bonny, le 10/01/2005 pour Débutant, Expert, Gourou, RSS.

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 ?

Introduction à l’accessibilité par Tristan Nitot, le 02/06/2003 pour Débutant, Expert, Accessibilité.

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.

Introduction à la performance Web par Nicolas Hoffmann, le 10/02/2011 pour Débutant, Expert, (X)HTML, CSS, DOM, Qualité.

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.

Introduction à la syndication de contenu avec RSS par François Hodierne, le 14/10/2004 pour Débutant, RSS.

Qu’est-ce que la syndication de contenu ? Qu’est-ce qu’un fil RSS ?

Introduction au langage ECMAScript par Florian Hatat, le 21/03/2003 pour Débutant, DOM, Pages dynamiques.

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.

Introduction aux jeux de caractères par Steve Frécinaux, le 12/07/2004 pour Débutant, Expert, (X)HTML.

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.

Le PNG face au GIF par Fabrice Bonny, le 21/03/2004 pour Débutant, Expert, PNG, Multimédia.

Qui est donc ce remplaçant du GIF, datant de 1996 et méconnu de la plupart des graphistes, amateurs comme professionnels ?

Les navigateurs alternatifs par Laurent Denis, Tristan Nitot, le 24/11/2003 pour Débutant, Décideur, Expert, Gourou, Navigateurs.

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 problèmes de la mise en page par tableaux par Mathieu Pillard, le 24/10/2003 pour Débutant, Expert, (X)HTML, Mise en page.

Pourquoi éviter les tableaux pour faire de la mise en page.

Maîtriser l’impression CSS par Nicolas Hoffmann, le 16/08/2010 pour Débutant, CSS, Mise en page.

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.

Ne perdez plus vos internautes, faites du card sorting - Première partie : Vue d’ensemble par Gautier Barrère, le 19/12/2010 pour Débutant, Qualité, Industrialisation, Méthodes.

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.

Ne perdez plus vos internautes, faites du card sorting / tri de cartes - Deuxième partie : Mise en oeuvre par Gautier Barrère, le 26/01/2011 pour Débutant, Qualité, Industrialisation, Méthodes.

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.

Ne perdez plus vos internautes, faites du card sorting / tri de cartes - Troisième partie : Résultats, analyse et (re)conception par Eric Mazzone, Gautier Barrère, le 02/02/2012 pour Débutant, Qualité, Méthodes.

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.

Passer aux feuilles de style par Laurent Denis, le 27/01/2004 pour Débutant, Expert, CSS, Mise en page.

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.

Pour en finir avec les cadres par Denis Boudreau, le 02/06/2003 pour Débutant, Expert, (X)HTML, Structure.

Quelques raisons pour lesquelles les cadres devraient être évacués de tout bonne pratique Web.

Pourquoi l’accessibilité numérique ? par Elie Sloïm, Laurent Denis, le 25/07/2005 pour Débutant, Décideur, Expert, Accessibilité.

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.

Pourquoi les standards du W3C ? par Denis Boudreau, Tristan Nitot, le 21/03/2003 pour Débutant, Décideur, Expert, Gourou.

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.

Pourquoi plusieurs variantes de DTD en XHTML ? par Laurent Jouanneau, le 21/03/2003 pour Débutant, Expert, (X)HTML.

Les balises et attributs devenus obsolètes entre le HTML ou XHTML strict et transitional, et les moyens de les remplacer.

Respecter la sémantique XHTML par Laurent Jouanneau, le 21/03/2003 pour Débutant, Expert, (X)HTML, Structure.

Pourquoi et comment utiliser les balises (X)HTML à bon escient.

Spécifier la langue d’un document (X)HTML par Elie Sloïm, Laurent Denis, le 10/02/2005 pour Débutant, Expert, Gourou, (X)HTML.

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.

Styles auteur, utilisateur et agent utilisateur : 3 raisons de lâcher prise sur votre design par Laurent Denis, le 21/03/2005 pour Débutant, Expert, CSS, Mise en page.

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.

Une feuille de style pour l’impression par Laurent Denis, le 18/01/2009 pour Débutant, Expert, CSS.

Une solution CSS qui remplace avantageusement la version imprimable d’un document.

Utilisation de background par Pascale Lambert Charreteur, le 21/03/2005 pour Débutant, CSS, Mise en page.

Comment utiliser la propriété CSS background pour gérer des images d’arrière-plan ?

Utilisation des formulaires par Éric Daspet, le 17/12/2003 pour Débutant, Expert, (X)HTML, Accessibilité.

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é.

Vers la maturité du Web par Alain Oguse, le 04/12/2003 pour Débutant, Décideur, Expert.

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é.

Zoom d’images avec les CSS par Pascale Lambert Charreteur, le 01/06/2004 pour Débutant, CSS, Mise en page, Multimédia.

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.

XHTML en une heure par Olivier Meunier, le 21/03/2003 pour Débutant, Expert, (X)HTML, Structure.

Une rapide introduction à XHTML, qui vous permettra de faire vos premières armes avec ce langage de description.

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.