Exemples et meilleures pratiques – Smashing Magazine – Serveur d’impression
Lorsqu'il est utilisé correctement, jQuery peut vous aider à rendre votre site Web plus interactif, intéressant et passionnant. Cet article présente certaines des meilleures pratiques et des exemples d'utilisation du framework Javascript très répandu pour créer des effets de script DOM accessibles et discrets. L'article explorera ce qui constitue meilleures pratiques en matière de Javascript et, en outre, pourquoi jQuery est un bon choix de cadre pour mettre en œuvre les meilleures pratiques.
Vous voudrez peut-être jeter un coup d'œil aux nouveaux messages suivants:
1. Pourquoi jQuery?
jQuery est idéal car il peut créer des animations et des interactions impressionnantes. jQuery est simple à comprendre et à utiliser, ce qui signifie que la courbe d'apprentissage est petite, alors que les possibilités sont (presque) infinies.
Javascript et les meilleures pratiques
Javascript a longtemps fait l'objet de nombreux débats animés sur la possibilité de l'utiliser, tout en respectant les meilleures pratiques en matière d'accessibilité et de conformité aux normes.
La réponse à cette question n’est toujours pas résolue. Cependant, l’émergence de frameworks Javascript tels que jQuery a fourni les outils nécessaires pour créer de beaux sites Web sans avoir à s’inquiéter (autant) des problèmes d’accessibilité.
Évidemment, il existe des cas où une solution Javascript n'est pas la meilleure option. La règle de base est la suivante: utiliser les scripts DOM pour améliorer fonctionnalité, pas le créer.
Des scripts DOM discrets
Alors que le terme «script DOM» fait simplement référence à l'utilisation de scripts (dans ce cas, Javascripts) pour accéder au modèle objet de document, il est largement accepté comme un moyen de décrire ce que l'on devrait vraiment appeler «un script DOM peu encombrant» – en gros, l’art d’ajouter du Javascript à votre page de telle sorte que s’il n’y avait PAS de Javascript, la page fonctionnerait toujours (ou du moins se dégraderait gracieusement). Dans le monde des sites Web, notre script DOM est fait en Javascript.
The Bottom Line: contenu accessible et dégradable
L’objectif de tout producteur, concepteur ou développeur Web est de créer un contenu accessible au plus grand nombre. Cependant, cela doit être soigneusement mis en balance avec le design, l'interactivité et la beauté. En utilisant les théories exposées dans cet article, les concepteurs, développeurs et producteurs Web auront les connaissances et la compréhension nécessaires pour utiliser jQuery dans les scripts DOM de manière accessible et dégradable. maintenir un contenu beau, fonctionnel ET accessible.
2. Des scripts DOM discrets?
Dans un monde idéal, les sites Web auraient des fonctionnalités dynamiques ET des effets qui se dégradent bien. Qu'est-ce que ça veut dire? Cela impliquerait de trouver un moyen d’inclure, par exemple, un widget de type ticker d’actualités glissant animé avec Javascript Web 2.0 dans une page Web, tout en veillant à ce qu’il échoue normalement si le navigateur d’un visiteur ne peut pas (ou ne va pas) exécuter Javascripts.
La théorie derrière cette technique est assez simple: le but ultime est d'utiliser Javascript pour les éléments non invasifs «comportementaux» de la page. Javascript est utilisé pour ajouter ou améliorer l'interactivité et les effets. Les règles principales pour les scripts DOM sont les suivantes.
Règle n ° 1: fonctionnalité Javascript distincte
Séparez la fonctionnalité Javascript en une «couche de comportement», de sorte qu'elle soit séparée et indépendante du (X) HTML et du CSS. (X) HTML est le balisage, CSS la présentation et Javascript la couche comportementale. Cela signifie stocker TOUT le code Javascript dans des fichiers de script externes et créer des pages qui ne comptez pas sur Javascript pour être utilisable.
Pour une démonstration, consultez les extraits de code suivants:
Mauvais balisage:
N'incluez jamais les événements Javascript en tant qu'attributs en ligne. Cette pratique devrait être complètement effacée de votre esprit.
Cliquez sur!
Bon balisage:
Tous les comportements Javascript doivent être inclus dans des fichiers de script externes et liés au document avec un
Ce script en ligne est incorrect, car si le navigateur cible a le Javascript désactivé, RIEN ne sera rendu, ce qui laissera un espace dans la page. Ce n'est pas une dégradation gracieuse. L'utilisateur non-Javascript manque notre message de bienvenue.
Bon balisage:
Une méthode sémantiquement correcte et accessible pour implémenter cela nécessiterait un langage (X) HTML beaucoup plus simple et plus lisible, comme par exemple:
Bonjour!
En incluant l’attribut «title», ce paragraphe peut être sélectionné dans jQuery à l’aide d’un sélecteur (les sélecteurs sont expliqués plus loin dans cet article) comme celui de l'extrait de code Javascript suivant:
var now = new Date ();
if (now.getHours ()> = 12)
var goodDay = $ ('p[title="Good Day Message"]');
goodDay.text ('Bon après-midi!');
La beauté ici est que tout le Javascript réside dans un fichier de script externe et que la page est rendue au format standard (X) HTML, ce qui signifie que si le Javascript n'est pas exécuté, la page reste 100% sémantique (X) HTML - pas de Javascript cruft. Le seul problème serait que l'après-midi, la page continuerait à dire «Bonjour». Cependant, cela peut être considéré comme une dégradation acceptable.
Règle n ° 3: le balisage accessible et sémantique vient en premier
Il est très important que le balisage (X) HTML soit structuré sémantiquement. (Bien que l'explication de cet article n'entre pas dans le cadre de cet article, reportez-vous aux liens ci-dessous pour une meilleure lecture du balisage sémantique.) En règle générale, si le balisage de la page est structuré de manière sémantique, il devrait en découler qu'il est également accessible à un large gamme d'appareils. Ce n’est pas toujours vrai, mais c’est une bonne règle de base.
Le balisage sémantique est important pour les scripts DOM discrets, car il détermine le chemin que le développeur prendra pour créer l’effet scripté DOM. La première étape de la création d’un widget amélioré par jQuery dans une page consiste à écrire le balisage et à s’assurer que le balisage est sémantique. Une fois que cela est réalisé, le développeur peut ensuite utiliser jQuery pour interagir avec le balisage sémantiquement correct (en laissant un document (X) HTML propre et lisible et en séparant la couche comportementale).
Terrible balisage:
L'extrait suivant montre une liste typique d'éléments et de descriptions d'une manière typique (et terriblement non sémantique).
Première option
Description de la première option
Deuxième option
Description de la seconde option
Mauvais balisage:
L'extrait suivant montre une liste typique d'éléments et de descriptions d'une manière plus sémantique. Cependant, le Javascript en ligne est loin d'être parfait.
- Première option
- Description de la première option
- Deuxième option
- Description de la seconde option
Bon balisage:
Cet extrait montre comment la liste ci-dessus devrait être marqué. Toute interaction avec Javascript serait liée au chargement DOM à l'aide de jQuery, supprimant ainsi tout balisage comportemental du code (X) HTML rendu.
- Première option
- Description de la première option
- Deuxième option
- Description de la seconde option
le
3. Comprendre jQuery pour les scripts DOM discrets
Cette section explore trois astuces et astuces inestimables pour utiliser jQuery afin de mettre en œuvre les meilleures pratiques et les effets accessibles.
Comprendre les sélecteurs: l’épine dorsale de jQuery
La première étape de la création de scripts DOM non intrusifs (au moins dans jQuery et Prototype) consiste à utiliser des sélecteurs. Les sélecteurs peuvent (étonnamment) sélectionner un élément hors de l'arborescence DOM afin qu'il puisse être manipulé d'une manière ou d'une autre.
Si vous connaissez CSS, vous comprendrez les sélecteurs dans jQuery; ils sont presque la même chose et utilisent presque la même syntaxe. jQuery fournit un utilitaire spécial pour sélectionner des éléments. Cela s'appelle $.
Un ensemble d’exemples très simples de sélecteurs jQuery:
$ (document); // Activer jQuery pour l'objet
$ ('# mydiv') // Elément avec l'ID "mydiv"
$ ('p.first') // P balises avec la classe en premier.
$ ('p[title="Hello"]') // P tags avec le titre "Hello"
$ ('p[title^="H"]') // P titre des balises commençant par H
- $ (document); La première option appliquera les méthodes de la bibliothèque jQuery à un objet DOM (dans ce cas, l'objet document).
- $ ('# Mydiv') La deuxième option sélectionnera chaque
qui a le
attribut défini sur «mydiv». - $ ('P.first') La troisième option sélectionnera tous les
balises avec la classe de "premier".
- $ (‘P[title=“Hello”]«) Cette option sélectionnera dans la page tous
balises qui ont un titre de «Bonjour». Des techniques comme celle-ci permettent d'utiliser un balisage HTML (X) beaucoup plus correct, tout en facilitant les scripts DOM nécessaires à la création d'interactions complexes.
- $ (‘P[title^=“H”]«) Ceci permet la sélection de tous les
balises sur la page dont le titre commence par la lettre H.
Ces exemples ne font qu’effleurer la surface.
Presque tout ce que vous pouvez faire en CSS3 fonctionnera dans jQuery, ainsi que de nombreux sélecteurs plus complexes. La liste complète des sélecteurs est bien documentée sur la page de documentation de jQuery Selectors. Si vous vous sentez super-geek, vous pouvez également lire la spécification de sélecteur CSS3 du W3C.
Soit prêt. $ (document) .ready ()
Traditionnellement, les événements Javascript étaient attachés à un document en utilisant un attribut «onload» dans
balise de la page. Oubliez cette pratique. Essuyez-le de votre esprit.jQuery nous fournit un utilitaire spécial sur l'objet document appelé «prêt», nous permettant d'exécuter du code UNIQUEMENT une fois le chargement du DOM terminé. C’est la clé d’un script DOM discret, car elle nous permet de séparer complètement notre code Javascript de notre balisage. En utilisant
$ (document) .ready ()
, nous pouvons mettre en file d'attente une série d'événements et les exécuter après l'initialisation du DOM.Cela signifie que nous pouvons créer des effets complets pour nos pages sans modifier le balisage des éléments en question.
Bonjour le monde! Pourquoi $ (document) .ready () est si cool
Pour démontrer la beauté de cette fonctionnalité, nous allons recréer l’introduction standard à Javascript: une boîte d’alerte «Hello World».
Le balisage suivant montre comment nous avons pu exécuter une alerte «Hello World» sans jQuery:
Mauvais balisage:
Bon balisage:
L'utilisation de cette fonctionnalité dans jQuery est simple. L'extrait de code suivant montre comment nous pourrions appeler la vieille boîte d'alerte «Hello World» après le chargement de notre document. La vraie beauté de ce balisage est qu'il réside dans un fichier Javascript externe. Il n'y a AUCUN impact sur la page (X) HTML.
$ (document) .ready (fonction () alerte ('Hello World'); );
Comment ça marche
La fonction $ (document) .ready () prend une fonction comme argument. (Dans ce cas, une fonction anonyme est créée inline - une technique utilisée dans la documentation de jQuery.) La fonction transmise à $ (document) .ready () est appelée une fois que le DOM a fini de charger et exécute le code à l'intérieur de la fonction. , dans ce cas, l'appel de l'alerte.
Création dynamique de règles CSS
Un problème avec de nombreux effets de script DOM est qu’ils exigent souvent que nous masquions certains éléments du document. Cette dissimulation est généralement réalisée via CSS. Cependant, cela n’est pas souhaitable. Si le navigateur d’un utilisateur ne prend pas en charge Javascript (ou a Javascript désactivé), Est-ce que support CSS, les éléments que nous cachons en CSS ne seront jamais visibles, car nos interactions Javascript ne seront pas exécutées.
La solution à cela se présente sous la forme d'un plugin pour jQuery appelé cssRule, qui nous permet d'utiliser Javascript pour ajouter facilement des règles CSS à la feuille de style du document. Cela signifie que nous pouvons masquer des éléments de la page à l'aide de CSS. Toutefois, le CSS n'est exécuté que si Javascript est en cours d'exécution.
Mauvais balisage:
HTML:
Ceci est une rubrique
CSS: p.hide-me-first affichage: aucun;En supposant qu'un paragraphe de la classe “hide-me-first” va d'abord être masqué par CSS, puis affiché par un code Javascript après une interaction future de l'utilisateur, si le code Javascript ne s'exécute jamais, le contenu ne sera jamais visible.
Bon balisage:
HTML:
Ceci est une rubrique
jQuery Javascript: $ (document) .ready (fonction jQuery.cssRule ("p.hide-me-first", "display", "none"); );Utiliser un $ (document) .ready () Javascript ici pour cacher l’élément de paragraphe signifie que si le javascript est désactivé, les paragraphes ne seront jamais cachés - le contenu est donc toujours accessible. C'est la raison principale de la création de règles CSS dynamiques à l'exécution, basées sur Javascript.
4. Conclusion
jQuery est une bibliothèque extrêmement puissante qui fournit tous les outils nécessaires à la création de superbes interactions et animations dans les pages Web, tout en permettant au développeur de le faire de manière accessible et dégradable.
Cet article a couvert:
- Pourquoi les scripts DOM non intrusifs sont-ils si importants pour l'accessibilité?
- Pourquoi jQuery est le choix naturel d’implémenter des effets de script DOM discrets,
- Comment fonctionnent les sélecteurs jQuery,
- Comment implémenter des règles CSS discrètes dans jQuery.
5. Lectures complémentaires
Autres lectures: pratiques jQuery et JavaScript
- Site Web jQuery: Comment jQuery fonctionne et tutoriels John Resig + Autres contributeurs La documentation fournie par John Resig et son équipe est l’un des points forts de jQuery.
- Apprendre jQuery
- Tutoriels jQuery pour les concepteurs
- Les sept règles de l'amélioration progressive pragmatique
- Une liste à part: séparation comportementale Jeremy Keith Une explication plus détaillée de l’idée de séparer Javascript en une couche «comportementale» discrète.
Simon Willison
Un grand nombre de diapositives sur l’utilisation discrète de jQuery. En outre, termine avec un résumé des méthodes et de l’utilisation de jQuery.Lectures supplémentaires: balisage sémantique
- Wikipédia: Définition de la sémantique Il est utile de comprendre l’idée de la sémantique en général avant d’essayer de comprendre le concept de balisage sémantique.
- Qui se soucie du balisage sémantique? Dave Shea Dave Shea explore les avantages du balisage sémantique et
- Les normes n’ont rien à voir avec la sémantique correcte Jason Kottke Kottke discute des différences entre la conformité aux normes et le balisage sémantique.
- Spécification de sélecteur CSS3 W3C La spécification complète des sélecteurs CSS3 (dont la plupart fonctionnent parfaitement dans les sélecteurs jQuery également). C’est une excellente lecture pour ceux qui aiment se tenir au courant des meilleures pratiques et de la conformité aux normes.
- $ ('P.first') La troisième option sélectionnera tous les
Commentaires
Laisser un commentaire