Undolog.com

Permettre aux utilisateurs d'interagir avec une page Web ces dernières années a entraîné une augmentation significative de l'utilisation de scripts côté client: le code JavaScript peut réagir en temps réel et de manipuler une grande variété d'informations. Le Web2.0 est l'expression ultime de cette capacité d'interaction, dans laquelle l'utilisateur final - l'utilisateur participe activement à la construction et à «l'évolution du site Web, en interagissant avec lui et vous aider. Est appelée User Generated Content (UGC ou - user-generated content) qui voit le "navigateur" certainement pas passif!

Pour parvenir à cette interaction, permettant ainsi à l'utilisateur final d'ajouter sa contribution, nous avons développé une série de techniques qui ont changé l'apparence et le comportement de pages Web (statiques jusqu'ici, mais maintenant semblables à des applications traditionnelles de Desktop) au cours des dernières années. Changer le contenu d'une page, envoyer des fichiers, donnant leur vote à une vidéo ou un document, enregistrer ou modifier leurs données personnelles, sont quelques-unes des opérations les plus riches dans de nombreux services (2.0 beta) sur le Web

La demande croissante pour des outils clients ( Prototype , Dojo Toolkit , jQuery , ASP.NET Ajax , ...) et serveur (Ruby on Rails, bibliothèques PHP, JSP et ASP, ...) pour la construction du Web 2.0, a conduit à l'émergence de nombreuses outils de développement, des bibliothèques ou tout simplement les philosophies d'un nouveau développement sur ​​le Web;

Ces techniques et ces outils ont été utilisés dans presque toutes les combinaisons possibles, grâce à son caractère modulaire et la capacité de résoudre certaines tâches spécifiques à certains moments. Certains ont choisi, par conséquent, des solutions entièrement en Flash d'Adobe, qui a utilisé des solutions hybrides (Flash + Javascript), qui, à partir de bibliothèques comme générique de prototype , a atteint son cadre spécifique. La majorité de ces outils est également open source (gratuit ou non) et cela a sûrement contribué à une propagation énorme en un rien de temps.

Le prix a été payé, cependant, pour obtenir cette nouvelle interaction, a été une perte nette de l'accessibilité (et souvent la facilité d'utilisation) du Web Paradoxalement, la fonctionnalité accrue de l'interaction a limité le nombre d'utilisateurs qui, pour diverses raisons, ne peut pas accéder à ces nouvelles technologies! Il y avait, par conséquent, l'un'incremento fracture numérique , souvent uniquement due à l'abus de certaines techniques de développement ou tout simplement ne pas tenir compte de certains de l'objectif final.

Lors du développement d'un site Web, ou simplement une page Web, n'oubliez pas l'utilisateur final », qui peuvent visiter notre site web avec des périphériques (navigateur ou agent utilisateur) autres que ceux que nous attendons, mais surtout, avec des caractéristiques et d'autres paramètres que ceux que nous avons pris pour acquis (résolution d'écran, nombre de couleurs, vous devez activer JavaScript désactivé, sans applets, ActiveX ou des plugins, etc ...). Il s'ensuit que, en plus de compatibilité simple (fonctionnelle et visuelle) entre les différents navigateurs doivent prêter attention à des caractéristiques qu'ils ont. L'argument, bien sûr, est complexe et articulé.

Il est juste de forcer un utilisateur à avoir JavaScript disponible et a permis de naviguer sur notre site?

Je pense qu'il ya deux réponses possibles à cette question, le premier peut-être pas, pas juste, surtout si ce que vous voulez réaliser peut être structuré de telle manière à permettre l'accès est un accès de base est évolué. Toutefois, et c'est la deuxième réponse, bien sûr il ya des cas limites où l'obligation d'avoir une technologie particulière est indépendante de la capacité - et la volonté - analyste programmeur!

Aussi - question controversée - qui sommes-nous (les développeurs) pour décider qui devrait être et nécessitent quoi?

Si le projet que nous voulons réaliser, c'est qu'ils peuvent être utilisés par n'importe quel agent utilisateur, avec les précautions appropriées, le temps de développement et de la complexité croissante du code (HTML, JavaScript Scripting et Server) augmente. C'est une décision de production, le personnel, de commencer à dicter les règles. Cependant, la compatibilité n'est pas mis en service qui doivent être planifiées dès le début, vous pouvez en effet aborder la question à un moment plus tard, lorsque notre site Web (ou nos) est déjà en ligne.

Normalement, nous utilisons deux techniques, les approches ou les deux, pour construire un Web réellement accessibles:

• Dégradation gracieuse
• Amélioration progressive

Dégradation gracieuse

Cette technique, également utilisée dans différents domaines du web design, assume dès le départ pour se concentrer sur la création d'un site Web très sophistiqués, utilisant des techniques et technologies, le tout sans se soucier des problèmes de compatibilité et d'accessibilité. Convivialité, cependant, est - bien sûr - le premier ingrédient, par définition. La deuxième étape consiste à ajouter des fonctionnalités à supporter tous les navigateurs et les utilisateurs qui sont - en fait - sur le bord.

Il va alors utiliser les tables au format de notre mise en page, sans exaspérer l'utilisation de CSS et de flotter, de manière à respecter l'agencement du site, même sur les navigateurs plus anciens. Javascript apparaîtra et vous devrez utiliser la balise NOSCRIPT de fournir une alternative accessible. Utilisez la balise ALT</codee <code inline="true">TITLE riches où, etc ...

Dégradation gracieuse, cependant, a ses limites. Ne pas prendre sérieusement en compte les différents types d'agents utilisateurs (ou utilisateurs) depuis le début, peut avoir mauvaise (parfois laid) les conséquences dans la foulée. Pas toujours, en fait, vous pouvez ajouter ces artefizi et outils peuvent fournir un contenu véritable alternative aux différents utilisateurs. L'expérience de l'analyste développeur web / designer, dans ce cas, joue un rôle clé. Toutefois, un site Web évolue au fil du temps, il améliore, ajoute des fonctionnalités qui ne peuvent pas être résolues par d'autres moyens, si elle n'est pas forcer l'utilisation d'une technologie particulière: regarder une vidéo (Flash, QuickTime, etc) est difficile - voire impossible - à réaliser en HTML standard!

Amélioration progressive

Cette approche est probablement ce personalmentre préférez. Il est l'exact opposé de la dégradation gracieuse. Pour ceux qui aiment l'utilisation des feuilles de style est une technique déjà connue: il commence à partir de la structure de base, un balisage simple, et que vous ajoutez toutes les fonctionnalités avancées. Dans le cadre de la mise en page et le CSS, est l'approche utilisée pour le remplacement d'image », ou le remplacement par une feuille de style avec un fichier texte (puis il ya aussi des techniques qui exploitent Flash ou encore Ajax).

D'un intérêt particulier dans ce type d'approche, est la propagation de la soi-disant langage JavaScript non obstructif: JavaScript qui n'est pas intrusif. Cette technique peut améliorer la fonctionnalité d'un site Web en exploitant les capacités de JavaScript DOM manipulation. En l'insérant correctement les scripts JavaScript sur la page que vous pouvez faire pour rendre transparents les navigateurs qui ne prennent pas en charge JavaScript (ou avez désactivé JavaScript), mais travailler pour les autres.

Les caractéristiques d'un langage JavaScript non obstructif sont:

• Améliorer ou modifier - PAS met en œuvre - les caractéristiques trouvées
• Transparent dans le cas des agents utilisateurs qui ne supporte pas JavaScript ou désactiver

Le point 1 est essentielle pour l'accessibilité, de la même manière que les «utilisé en remplacement d'image CSS. Un exemple est snap , ce qui améliore la visibilité d'un lien. snap est un exemple classique de discrètes JavaScript: JavaScript est désactivé si le lien est toujours présent et fonctionne, mais si JavaScript est activé la fonctionnalité de prévisualisation est ajouté. Aussi, si vous ne pouvez pas accéder aux messages JavaScript est affiché: Section 2 - non-intrusive.

Un autre exemple de JavaScript non obstructif est bien fait Lightbox JS , ce qui améliore le diaporama des images. A partir d'une série de liens (<a>) avec l'attribut rel est correctement configuré peut afficher des images liées dans une très accrocheur!

Cette technique est extrêmement polyvalent et permet une approche d'amélioration progressive vrai - et, sans exagération, une vraie démarche web2.0.

Dans ce scénario, l'utilisation de la bibliothèque Prototype fournit un accès facile au DOM HTML permettant de passer outre et d'ajouter des fonctionnalités aux éléments d'une page, les rendant plus polyvalent.

Les deux techniques, par conséquent, permettre la création de sites web à la fin vraiment accessible. D'autre part nécessitent une attention et un travail supplémentaire qui est finalement payée par la grande quantité de visiteurs! Personnellement, je adopté la technique d'amélioration progressive, pour une habitude purement subjectif et. Choisissez entre les deux techniques peuvent être indifférents l'expérience, avec le type de projet, vous devez développer, joue certainement un rôle important.

Comme un exemple vaut mille mots, je propose que, avant mosrtare quelques extraits de code simple, vraiment éclairé.

Cet article a été utile pour vous?:

Chargement en cours ...

• 

• Tweet