Serveur d'impression

Exemples et meilleures pratiques – Smashing Magazine – Serveur d’impression

Par Titanfall , le 3 mai 2019 - 16 minutes de lecture

Lorsqu'il est utilisé correctement, jQuery peut vous aider à rendre votre site Web plus interactif, intéressant et excitant. 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.

Choses à faire aujourd'hui..

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:

TraverserMauvais 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!
CocherBon 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.

CocherBon 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).

TraverserTerrible 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
TraverserMauvais 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
CocherBon 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 de “OptionList” nous permettra de cibler cette liste de définitions particulière dans jQuery en utilisant un sélecteur - pour plus de détails à ce sujet plus tard.

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
  1. $ (document); La première option appliquera les méthodes de la bibliothèque jQuery à un objet DOM (dans ce cas, l'objet document).
  2. $ ('# Mydiv') La deuxième option sélectionnera chaque
    qui a le attribut défini sur «mydiv».

  3. $ ('P.first') La troisième option sélectionnera tous les

    balises avec la classe de "premier".

  4. $ (‘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.

  5. $ (‘P[title^=“H”]«) Ceci permet la sélection de tous les

    balises sur la page dont le titre commence par la lettre H.

  6. 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:

    TraverserMauvais balisage:
    CocherBon 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.

    TraverserMauvais balisage:
    HTML:
    

    Ceci est une rubrique

    Voici quelques informations sur la 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.

    CocherBon balisage:
    HTML:
    

    Ceci est une rubrique

    Voici quelques informations sur la 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:

    1. Pourquoi les scripts DOM non intrusifs sont-ils si importants pour l'accessibilité?
    2. Pourquoi jQuery est le choix naturel d’implémenter des effets de script DOM discrets,
    3. Comment fonctionnent les sélecteurs jQuery,
    4. Comment implémenter des règles CSS discrètes dans jQuery.

    5. Lectures complémentaires

    Autres lectures: pratiques jQuery et JavaScript

    1. 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.
    2. Apprendre jQuery
    3. Tutoriels jQuery pour les concepteurs
    4. Les sept règles de l'amélioration progressive pragmatique
    5. 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

    1. 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.
    2. Qui se soucie du balisage sémantique? Dave Shea Dave Shea explore les avantages du balisage sémantique et
    3. 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.
    4. 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.

Click to rate this post!
[Total: 0 Average: 0]

Commentaires

Laisser un commentaire

Votre commentaire sera révisé par les administrateurs si besoin.