Conseils Web de Dan: dégradation gracieuse


Original: http://webtips.dan.info/graceful.html

 

CONSEIL: Il n’y a rien de mal à utiliser les dernières cloches et de sifflets pour soutenir fonctionnalités soignées de navigateurs plus récents, mais essayer de le faire d’une manière qui permet aux utilisateurs ne supportant pas encore (ou invalidantes intentionnellement) ces fonctionnalités pour accéder à votre contenu de base. Heureusement, cela est facile à faire sur le Web, si vous suivez l’esprit des langues et des protocoles au lieu de la combattre.

“Dégradation gracieuse” est un principe important dans la conception Web. Cela signifie que, lorsque vous mettez en fonctionnalités conçues pour profiter de la dernière et plus caractéristiques des navigateurs plus récents, vous devriez le faire d’une manière que les anciens navigateurs et les navigateurs permettant aux utilisateurs de désactiver les fonctionnalités particulières, peuvent «démissionner» à une méthode qui permet toujours l’accès au contenu de base du site, mais peut-être pas aussi élégant en apparence.

Presque toute nouvelle fonctionnalité sur le Web a été fait d’une manière qui permet une dégradation progressive, en commençant par l’ajout de la balise  pour ajouter des graphiques à un autrefois tout-texte Web, qui contient un attribut ALT vous permettant de fournir une texte alternatif pour les navigateurs non graphiques.

REMARQUE: Il aurait été encore plus gracieux si la balise IMG a été définie comme un élément conteneur, avec le contenu alternatif entre  et . Cela aurait causé le contenu alternatif à être utilisé automatiquement dans les navigateurs plus anciens qui ne comprennent pas IMG, ainsi que de permettre ce contenu pour inclure les balises, et quelque chose qui n’est pas possible dans l’attribut ALT. Mais c’est maintenant l’eau sous le pont.

Constructions plus récentes comme <APPLET> et <OBJECT> vous permettent de fournir une dégradation progressive grâce à l’utilisation de contenu alternatif entre l’ouverture et balises de fermeture de l’élément. Quelque chose entre <APPLET> et </ APPLET> (autre que les paramètres de l’applet) sera ignoré par un navigateur Java supportant Java est activé, mais sera utilisée à la place de l’applet par un navigateur qui ne comprend pas Java ou a désactivé il. Cela permet au développeur de site offrant des images statiques alternatives, du texte ou des liens pour remplacer l’information présentée sous forme d’applet pour les utilisateurs qui le soutiennent.

Voici un exemple d’une applet codé pour dégradation progressive:

<APPLET CODE="WaveEffect" align=center border=0 codebase="http://www.example.net/applets/" width=200 height=200">
<PARAM NAME=image VALUE="enternow.gif">
<PARAM NAME=HREF VALUE="home.html">
<A HREF="home.html"><IMG SRC="enternow.gif" width=200 height=200 alt="Enter my site now."></A>
</APPLET>

Un utilisateur Java supportant verrez le résultat d’une applet “WaveEffect”, qui serait probablement montrer un graphique avec des effets de vagues animées, et de fournir un moyen de se rendre à l’URL liée fourni dans le paramètre “HREF”. Mais un utilisateur non-Java n’aurait aucun moyen de voir ce qui était censé être là, ou d’obtenir en avant dans le site si cela était la seule technique de navigation, à l’exception du contenu alternatif. Ce contenu se compose d’une étiquette normale statique IMG présentant le même graphique d’une manière non-animé, un lien hypertexte vers la même page de l’applet serait permettre à l’utilisateur d’aller. Et, dans le cas des navigateurs en mode texte, encore un autre niveau de dégradation progressive est prévue par le texte ALT avec l’image.

Dans certains cas, quand il ya plusieurs façons de le faire le même effet, et l’ensemble des navigateurs supportant un ou l’autre d’entre eux est légèrement différente, vous pouvez obtenir le maximum de compatibilité en ayant plusieurs niveaux de contstructs imbriqués qui peuvent être dégradés grâce, comme une applet dans une EMBED dans un objet.

Il ya aussi quelques balises spéciales qui vous permettent d’inclure du contenu qui est utilisé uniquement lorsque les caractéristiques spécifiques ne sont pas disponibles ou handicapés. Par exemple, les éléments NOSCRIPT afficher uniquement lorsque JavaScript est pris en charge ou handicapés. Cela peut être utile pour fournir la navigation alternative dans les sites où les principaux contrôles sont mis en œuvre en JavaScript. De même, les éléments de noembed soient utilisés uniquement lorsque EMBED n’est pas pris en charge.

Il faut seulement un peu plus de travail pour le faire correctement, et ajoute beaucoup à l’accessibilité, la flexibilité et indexabilité moteur de recherche de vos pages.

Gracieusement dégradants JavaScript popups

Un effet couramment utilisé sur de nombreuses pages est un document lié qui vient comme une petite fenêtre popup JavaScript créé. Si vous utilisez cet effet, il devrait être peu voire pas du tout, car il peut être gênant pour de nombreux utilisateurs. Cependant, il ya des occasions où il est utile, comme dans surgissent des documents de référence pour aider quelqu’un à remplir un formulaire Web, sans leur avoir à quitter la page avec la forme (et peut-être pas en mesure d’y revenir si elle expire de leur cache, perdre les données qu’ils ont partiellement entrés).

Souvent, les développeurs vont faire avec une URL javascript:. Cela laisse beaucoup à désirer en termes de dégradation progressive, depuis les navigateurs non compatibles JavaScript ne sauront pas quoi faire avec un tel lien du tout, et vont soit ne rien faire ou produire une erreur. Aussi, javascript: URL ne sont pas vraiment conforme aux normes; Je ne sais pas du tout spécifications formelles pour cette construction, et ils contiennent souvent des caractères non juridiques à inclure (sans échappement) dans les URL en fonction des caractéristiques (comme les espaces).

Heureusement, il ya une meilleure façon. Au lieu de <A HREF=”javascript:YourPopupFunction(‘somefile.html’)”>, utilisez <A HREF=”somefile.html” onClick=”YourPopupFunction(‘somefile.html’); revenir false”>. (Je suppose que vous avez défini la fonction JavaScript YourPopupFunction quelque part dans votre document.) L’attribut onClick contient du code qui est exécuté (sur le soutien des navigateurs) lorsque le lien est cliqué, et le retour fausse fin, le navigateur d’arrêter après avoir fait cela (au lieu d’aller à suivre le lien hypertexte normal). Ainsi, il a exactement le même effet que le javascript: lien. (Notez que le code onClick ne commence pas par “javascript:”, car il n’est pas sous la forme d’une URL.) Mais pour les navigateurs non compatibles JavaScript, le onClick est ignoré et la liaison normale est suivie. Ainsi, tous les utilisateurs peuvent voir le document que vous liez.

NOTE: Depuis la rédaction de ce qui précède, j’ai découvert que certains anciens navigateurs avec premières implémentations de JavaScript ne supportent pas retourner false correctement et finissent par faire à la fois le lien «clair» et le popup. Vous pouvez éviter cela en utilisant <A HREF = “somefile.html” target = “abc” onclick = “window.open newwin = (”, ‘abc’, ‘width = 150, height = 150, redimensionnable = 1’) ; “>, qui ouvre une fenêtre vide nommé” abc “et permet la liaison régulière à cibler. Navigateurs non-JavaScript seront tout simplement ouvrir une nouvelle fenêtre régulière nommé “abc”, ou bien ignorer la cible et ouvrir la nouvelle page dans la fenêtre d’origine. Cependant, plus récemment encore, j’ai trouvé que le navigateur Mozilla, lorsqu’il est configuré pour ignorer les tentatives d’ouverture de nouvelles fenêtres, seront dans ce cas ouvrir la fenêtre mais ouvrez la destination du lien dans la fenêtre d’origine, laissant la fenêtre inutilement ouverte . Donc, tout compte fait, l’exemple de code précédent est probablement le meilleur.

Ces techniques peuvent également être utilisés dans d’autres cas où vous souhaitez un lien d’exécuter du code JavaScript, comme un lien imitant bouton «Retour» du navigateur avec history.back (). Mais bien réfléchir si vous avez vraiment besoin d’utiliser une telle fonction; les utilisateurs sont susceptibles d’être confondus par des liens qui ne choses comme remontent dans votre histoire au lieu d’avancer vers une autre page que les liens font normalement.

ASTUCE: Utilisez toujours un attribut HREF significative dans vos liens, pas un “factice” un, même si l’objectif principal de la liaison est de déclencher un script.

Par tous les moyens, ne pas utiliser la technique malheureusement endémique de faire des liens hypertextes vont à la “factice” valeur de HREF de “#”; Je ne sais pas qui a inventé ça, mais il semble avoir été mis en œuvre de cette façon dans certains outils de création qui génèrent des liens avec fantaisie JavaScript et imité à partir de là dans toutes sortes de sites, même certains qui sont codées à la main. C’est une mauvaise idée – que je vous ai montré ci-dessus, vous devez faire la chose de référence de lien hypertexte significatif qui fonctionne même lorsque JavaScript est désactivé – et, en outre, depuis le “#” n’est pas défini comme une référence d’URL, elle est interprétée par divers versions du navigateur de manière incompatibles et peuvent provoquer un saut vers le haut ou le bas de la page en cours, ou ajouter un inutile référence de page supplémentaire à l’histoire de la session du navigateur. Au moins, si vous devez utiliser un tel HREF mannequin, assurez-vous de terminer votre chaîne de commande JavaScript avec “return false” pour décourager le navigateur de tenter de suivre le lien factice.

Roulements de menu gracieusement dégradantes

Un autre effet populaire est d’avoir un menu de navigation graphique faire “des effets de survol” lorsque l’utilisateur déplace son / sa souris sur les éléments, tels que “allumer” ou “poussant” le bouton qui est mis au point en cours, ou en montrant plus d’informations propos de l’article actuellement sélectionné pour aider l’utilisateur à décider s’il faut suivre le lien.

Il ya des moyens et des “non-gracieuses” “gracieux” pour ce faire. Les moyens «non-gracieuses” peuvent causer la navigation à complètement échoué pour les utilisateurs qui ne supportent pas (ou qui ont désactivé) des choses telles que Java, JavaScript, ou Shockwave (selon la façon dont le roulement est mis en œuvre). D’autre part, une mise en œuvre “gracieux” quitte le site entièrement navigable même pour les navigateurs “plus bas dénominateur commun», tout en ajoutant des améliorations supplémentaires pour ceux qui les soutiennent.

Exemple de code pour un effet de survol gracieusement dégradant est ci-dessous. Cependant, plus que l’apprentissage du code spécifique, vous devriez apprendre l’attitude générale derrière cela et d’autres techniques gracieusement dégradantes dans le développement Web. C’est-à-utiliser un son, la structure logique de simple, constructions HTML largement pris en charge, puis ajouter les “cloches-et-sifflets» comme option add-ons qui peuvent être ignorés par les navigateurs non-appui. L’attitude contraire, qui crée des sites non accessibles, est de sauter le “son, logique, simple” étape et mettre en œuvre les effets souhaités directement dans un langage avancé (Java, Shockwave, etc), de se retrouver avec un code qui ne même contenir un lien «évident» que les navigateurs HTML peuvent suivre sans courir le “applet”, “script”, ou “plug-in”. Ensuite, si ces auteurs décident après coup dont ils ont besoin pour soutenir les navigateurs “plus simples”, ils finissent par coller un ensemble de laid “alternatives” des liens de texte en dessous de la navigation “fantaisie”, qui ne seraient pas nécessaires si ils ont conçu le site d’une manière gracieuse, en premier lieu.

Voici le code “gracieuse” de survol: (Note: Dans cet exemple, les versions “normales” des boutons de navigation doivent être placés dans item1_reg.gif, item2_reg.gif, etc, tandis que les versions “mouseover” sont item1_over.gif, etc toutes les images doivent être placées dans un sous-répertoire nommé gfx / sous le répertoire que la page est dans, et les images sont toutes de taille 250 x 50 pixels. Bien sûr, vous pouvez modifier ce que nécessaire pour votre propre site.

<html>
<head>
<title>Sample Rollover Page</title>
<script language="JavaScript" type="text/javascript">
<!-- hide this script from non-javascript-enabled browsers
if (document.images) {
item1_reg = new Image(250, 50); item1_reg.src = 'gfx/item1_reg.gif';
item1_over = new Image(250, 50); item1_over.src = 'gfx/item1_over.gif';
item2_reg = new Image(250, 50); item2_reg.src = 'gfx/item2_reg.gif';
item2_over = new Image(250, 50); item2_over.src = 'gfx/item2_over.gif';
item3_reg = new Image(250, 50); item3_reg.src = 'gfx/item3_reg.gif';
item3_over = new Image(250, 50); item3_over.src = 'gfx/item3_over.gif';
item4_reg = new Image(250, 50); item4_reg.src = 'gfx/item4_reg.gif';
item4_over = new Image(250, 50); item4_over.src = 'gfx/item4_over.gif';
}
function rollover(id,name){
if (document.images) {document.images[id].src=eval(name+".src"); }
}
// stop hiding -->
</script>
<META http-equiv="Content-Script-Type" content="text/javascript">
</head>

<body>

<P ALIGN=CENTER>
<a href=”item1/” onmouseout=”rollover(‘item1′,’item1_reg’);return false;” onmouseover=”rollover(‘item1′,’item1_over’);return false;”><img name=”item1″ src=”gfx/item1_reg.gif” width=”250″ height=”50″ border=”0″ alt=”[Item 1]”></a>
<a href=”item2/” onmouseout=”rollover(‘item2′,’item2_reg’);return false;” onmouseover=”rollover(‘item2′,’item2_over’);return false;”><img name=”item2″ src=”gfx/item2_reg.gif” width=”250″ height=”50″ border=”0″ alt=”[Item 2]”></a>
<a href=”item3/” onmouseout=”rollover(‘item3′,’item3_reg’);return false;” onmouseover=”rollover(‘item3′,’item3_over’);return false;”><img name=”item3″ src=”gfx/item3_reg.gif” width=”250″ height=”50″ border=”0″ alt=”[Item 3]”></a>
<a href=”item4/” onmouseout=”rollover(‘item4′,’item4_reg’);return false;” onmouseover=”rollover(‘item4′,’item4_over’);return false;”><img name=”item4″ src=”gfx/item4_reg.gif” width=”250″ height=”50″ border=”0″ alt=”[Item 4]”></a>
</P>

</body>
</html>
Notez les “if (document.images)”, ce qui assure que seuls les navigateurs utilisant des versions de JavaScript qui peut gérer des images (les premières implémentations ne pouvait pas) va essayer, en évitant les erreurs. Et notez que les images de navigation ont des attributs ALT contenant le texte de l’article de menu (changer la “article 1”, “Point 2”, etc à des noms plus significatifs étant donné les sections de votre site), de sorte que même en texte seulement les navigateurs les utilisateur peut toujours naviguer. Et oui, je sais, vous pouvez faire des effets de survol encore plus grâce à l’aide des feuilles de style en cascade, mais c’est une page assez vieux; jusqu’à ce que je fais une réécriture massive de ce site entier, il aura des trucs assez à jour en elle.

Si vous laissez un programme de l’éditeur ou de l’utilité de générer des “effets de substitution” pour vous, assurez-vous qu’il utilise une technique grâce dégradant de ce genre, et assurez-vous mettre ALT attributs nécessaires dans les images (à la main, si nécessaire, si le programme ne parvient pas à vous donner un moyen de le faire).

Client et côté serveur formes

Si vous avez un formulaire qui fait des choses utiles au moyen de fonctions JavaScript, il est encore possible pour lui permettre de se dégrader gracieusement pour les utilisateurs qui n’ont pas le JavaScript, si vous assurez-vous qu’il soumet à une forme côté serveur qui exécute les mêmes fonctions , mais pas aussi efficacement que cela peut se faire au niveau du côté client. Par exemple, une page Web où l’utilisateur peut taper dans leur montant d’épargne par an et l’intérêt prévu ou le rendement du taux de dividende et savoir combien économies qu’ils auront à la retraite peut être fait avec JavaScript – ce produit d’un calcul rapide sans exiger quoi que ce soit d’être soumis à un serveur, mais ne fonctionne pas du tout pour les utilisateurs ayant désactivé JavaScript. Qui peut être facilement résolu en ayant l’action de soumission (en l’absence de JavaScript) aller à un script serveur qui effectue les mêmes calculs. La fonction JavaScript “de onsubmit” peut se terminer par “return false” pour empêcher le script de serveur à partir de l’activation quand elle n’est pas nécessaire.

Si votre formulaire est destiné à soumettre à un serveur, mais vous souhaitez tout de même utiliser des fonctions JavaScript aussi, comme pour valider ou corriger l’entrée avant d’être soumis, alors vous devriez reproduire les mêmes validation et de correction des mesures dans le script serveur afin qu’ils aren ‘t annulé si JavaScript n’est pas activé ou disponible. Ceci est important pour des raisons de sécurité de toute façon, comme un hacker malveillant pourrait créer une version de votre formulaire qui saute la validation JavaScript afin de tenter de saisir des données fausses dans votre programme, il doit être prêt à écarter de telles choses. Certaines personnes sur les forums de discussion demandent la mauvaise question, et disent: «Comment puis-je forcer mon formulaire ne pas comparaître, ou de ne pas présenter, pour les utilisateurs ayant désactivé le JavaScript, parce que mon validation JavaScript est essentiel à leur bon fonctionnement?” Vous pouvez tenter de le faire en faisant le bouton de soumission, ou la totalité du formulaire, sortie en JavaScript au lieu de HTML ordinaire, il ne se présente pas du tout sans script côté client. Cela peut facilement être défait par les pirates informatiques, qui peuvent voir votre source et reconstruire un formulaire avec un bouton de soumission non-JavaScript, mais poserait un problème d’accessibilité pour les utilisateurs plus normaux. Mieux concevoir vos scripts de serveur afin qu’ils fonctionnent bien avec ou sans l’assistance de JavaScript.

Les idées fausses

Si vous obtenez des discussions de groupes de discussion sur HTML, vous verrez probablement quelqu’un revendication que “la dégradation gracieuse” signifie vraiment rendre les sites plaine, ennuyeux, et “plus petit dénominateur commun.” C’est loin de la vérité. Les gens qui disent qu’il ne soit pas vraiment comprendre la dégradation gracieuse, ou essaient juste de faire des coups bas contre les soi-disant “puristes” plutôt que de discuter de création de pages Web d’une manière rationnelle. En fait, la dégradation progressive ne demande pas de ne pas utiliser quelque chose de compliqué ou joli, ou que vous “auteur pour les navigateurs obsolètes.” Il exige simplement de comprendre la structure de tous les éléments que vous utilisez, et de connaître et de bien utiliser les fonctionnalités intégrées qui permettent l’insertion de contenu alternatif qui est accessible pour les utilisateurs qui ne peuvent pas ou ne veulent pas utiliser la fantaisie choses.

Dégradation gracieuse vs amélioration progressive

Il ya eu des discussions ces derniers temps sur les sites de développement Web sur la distinction de mentalité entre «dégradé» et «amélioration progressive», qui sont en fait des concepts très similaires, mais regardé de différentes directions. Wikipedia a un article sur l’amélioration progressive, et il ya eu des essais sur le sujet. La différence fondamentale est que dans “l’amélioration progressive” de commencer avec un jeu simple, logique, compatible de contenu balisé, puis superposer des fonctionnalités améliorées pour les navigateurs modernes sur le dessus de celui-ci, tout en “mode dégradé” commence avec un plein de fonctionnalités , site avancé, plein de cloches et de sifflets, et fait en sorte qu’elle a aussi un contenu qui peut être accessible si les caractéristiques de fantaisie ne fonctionnent pas pour un utilisateur particulier. Selon cette norme, l’état d’esprit que j’ai préconisé s’inscrit plus dans PE de GD, si j’ai utilisé la terminologie GD parce que l’autre terme n’a pas été inventé à l’époque. En tout cas, si c’est fait habilement, pensif, et cluefully, les deux techniques devraient aboutir dans des sites très similaires.

Hall of Shame

Rendre votre site plus en consultant d’autres sites qui montrent, par exemple, ne pas faire!

NOTE: L’inscription d’un site dans mes “Hall of Shame” liens ne doit pas être interprétée comme une sorte d’attaque personnelle sur le créateur du site, qui peut être une personne vraiment formidable, ou même une attaque sur le site Web lié dans son ensemble , qui peut être une source de vraiment super d’information et / ou de divertissement. Au contraire, il est tout simplement de mettre en évidence les caractéristiques spécifiques (intentionnels ou accidentels) des sites liés qui causent des problèmes qui auraient pu être évités par une meilleure conception. Si vous trouvez un de vos sites est lié ici, ne soyez pas offensé; améliorer votre site afin que je vais devoir prendre vers le bas le lien!

  •      The Chess Association Leicestershire et Rutland en œuvre leur site afin que la page principale est enterré plus profondément que l’index par défaut, qui redirige vers l’emplacement réel de la page d’accueil. Ils ont utilisé pour ce faire avec un méta-redirect et un repli lien plaine HTML, mais après une refonte (pourquoi ne refontes dégradent presque toujours l’accessibilité par rapport à ce qui s’est passé avant?) Qu’ils utilisent un indice de défaut constituée uniquement d’une redirection JavaScript, afin que les utilisateurs non-Javascript seulement obtenir une page blanche.
  •      Hira utilisé pour offrir un “Flash” et la version “non-Flash” sur sa page d’accueil, mais la version “non-Flash” avait encore flash en elle! Il a juste sauté une page supplémentaire “intro” qui a encore plus de Flash. Maintenant, il ne le fait pas que l’idiotie, mais il a encore une intro Flash où l’option de sauter il est intégré dans le Flash lui-même, ce qui signifie que les navigateurs non-Flash de soutien obtiendrez juste une page vide avec aucun moyen de passer en le site. L’intro joue de la musique à thème gênant en continu, sans aucun moyen de l’arrêter.

links

  •      Création de suppléance – un regard différent sur la dégradation progressive
  •      Responsive Web Design – une manière encore plus dernier cri, moins “keep-il simple-bête» pour obtenir des sites de s’adapter (on l’espère gracieusement) pour différents modes de visualisation
  •      Exemple d’une forme de serveur et côté client grâce dégradant: il utilise JavaScript activé si, mais si ce n’est pas la forme soumet à un script côté serveur qui fait la même action que le JavaScript, de sorte que le formulaire fonctionne pour tout le monde.
  •      Tsutsumi – L’art de GIFTWRAPP le Web
  •      Flash Satay – discussion de la tentative d’une webmaster pour créer un code conforme aux normes et gracieusement dégradant pour insérer une animation Flash
  •      Dix tests rapides à vérifier votre site Web pour l’accessibilité

Comments are closed.