{"version":"1.1","schema_version":"1.1.0","plugin_version":"1.1.2","url":"https://tutos-gameserver.fr/2019/05/03/exemples-et-meilleures-pratiques-smashing-magazine-serveur-dimpression/","llm_html_url":"https://tutos-gameserver.fr/2019/05/03/exemples-et-meilleures-pratiques-smashing-magazine-serveur-dimpression/llm","llm_json_url":"https://tutos-gameserver.fr/2019/05/03/exemples-et-meilleures-pratiques-smashing-magazine-serveur-dimpression/llm.json","manifest_url":"https://tutos-gameserver.fr/llm-endpoints-manifest.json","language":"fr-FR","locale":"fr_FR","title":"Exemples et meilleures pratiques &#8211; Smashing Magazine\n\n &#8211; Serveur d&rsquo;impression","site":{"name":"Tutos GameServer","url":"https://tutos-gameserver.fr/"},"author":{"id":1,"name":"Titanfall","url":"https://tutos-gameserver.fr/author/titanfall/"},"published_at":"2019-05-03T18:56:06+00:00","modified_at":"2019-05-03T18:56:06+00:00","word_count":2743,"reading_time_seconds":823,"summary":"A propos de l&#39;auteur Alex Holt est un designer professionnel et développeur Web interactif qui a travaillé avec succès pour divers clients en Australie, au Royaume-Uni, aux États-Unis et plus récemment… Plus à propos Alex… Lorsqu&#39;il est utilisé correctement, jQuery peut vous aider à rendre votre site Web plus interactif, intéressant et excitant. Cet article [&hellip;]","summary_points":["A propos de l&#39;auteur\nAlex Holt est un designer professionnel et développeur Web interactif qui a travaillé avec succès pour divers clients en Australie, au Royaume-Uni, aux États-Unis et plus récemment…\nPlus à propos Alex…\n\n\nLorsqu&#39;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&#39;utilisation du framework Javascript très répandu pour créer des effets de script DOM accessibles et discrets.","Lorsqu&#39;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&#39;utilisation du framework Javascript très répandu pour créer des effets de script DOM accessibles et discrets."],"topics":["Serveur d'impression"],"entities":[],"entities_metadata":[{"id":10,"name":"Serveur d'impression","slug":"serveur-dimpression","taxonomy":"category","count":3907,"url":"https://tutos-gameserver.fr/category/serveur-dimpression/"}],"tags":["Serveur d'impression"],"content_hash":"4d927284db59d2fd5a175c72b0e34eb6","plain_text":"A propos de l&#39;auteur\nAlex Holt est un designer professionnel et développeur Web interactif qui a travaillé avec succès pour divers clients en Australie, au Royaume-Uni, aux États-Unis et plus récemment…\nPlus à propos Alex…\n\n\nLorsqu&#39;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&#39;utilisation du framework Javascript très répandu pour créer des effets de script DOM accessibles et discrets.\n\n\n\nLorsqu&#39;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&#39;utilisation du framework Javascript très répandu pour créer des effets de script DOM accessibles et discrets. L&#39;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.\nVous voudrez peut-être jeter un coup d&#39;œil aux nouveaux messages suivants:\n1. Pourquoi jQuery?\njQuery 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&#39;apprentissage est petite, alors que les possibilités sont (presque) infinies.\nJavascript et les meilleures pratiques\nJavascript a longtemps fait l&#39;objet de nombreux débats animés sur la possibilité de l&#39;utiliser, tout en respectant les meilleures pratiques en matière d&#39;accessibilité et de conformité aux normes.\nLa 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é.\nÉvidemment, il existe des cas où une solution Javascript n&#39;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.\nDes scripts DOM discrets\nAlors que le terme «script DOM» fait simplement référence à l&#39;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&#39;on devrait vraiment appeler «un script DOM peu encombrant» &#8211; 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.\nThe Bottom Line: contenu accessible et dégradable\nL’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&#39;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.\n2. Des scripts DOM discrets?\nDans un monde idéal, les sites Web auraient des fonctionnalités dynamiques ET des effets qui se dégradent bien. Qu&#39;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.\nLa théorie derrière cette technique est assez simple: le but ultime est d&#39;utiliser Javascript pour les éléments non invasifs «comportementaux» de la page. Javascript est utilisé pour ajouter ou améliorer l&#39;interactivité et les effets. Les règles principales pour les scripts DOM sont les suivantes.\nRègle n ° 1: fonctionnalité Javascript distincte\nSéparez la fonctionnalité Javascript en une «couche de comportement», de sorte qu&#39;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.\nPour une démonstration, consultez les extraits de code suivants:\nMauvais balisage:\nN&#39;incluez jamais les événements Javascript en tant qu&#39;attributs en ligne. Cette pratique devrait être complètement effacée de votre esprit.\nCliquez sur!\nBon balisage:\nTous les comportements Javascript doivent être inclus dans des fichiers de script externes et liés au document avec un \nCe 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&#39;est pas une dégradation gracieuse. L&#39;utilisateur non-Javascript manque notre message de bienvenue.\nBon balisage:\nUne 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:\nBonjour!\nEn 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&#39;extrait de code Javascript suivant:\nvar now = new Date ();\nif (now.getHours ()&gt; = 12)\n\n    var goodDay = $ (&#39;p[title=\"Good Day Message\"]&#39;);\n    goodDay.text (&#39;Bon après-midi!&#39;);\n\nLa 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&#39;est pas exécuté, la page reste 100% sémantique (X) HTML - pas de Javascript cruft. Le seul problème serait que l&#39;après-midi, la page continuerait à dire «Bonjour». Cependant, cela peut être considéré comme une dégradation acceptable.\nRègle n ° 3: le balisage accessible et sémantique vient en premier\nIl est très important que le balisage (X) HTML soit structuré sémantiquement. (Bien que l&#39;explication de cet article n&#39;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&#39;il est également accessible à un large gamme d&#39;appareils. Ce n’est pas toujours vrai, mais c’est une bonne règle de base.\nLe 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).\nTerrible balisage:\nL&#39;extrait suivant montre une liste typique d&#39;éléments et de descriptions d&#39;une manière typique (et terriblement non sémantique).\n\n    \n        Première option\n        Description de la première option\n    \n    \n        Deuxième option\n        Description de la seconde option\n    \n\nMauvais balisage:\nL&#39;extrait suivant montre une liste typique d&#39;éléments et de descriptions d&#39;une manière plus sémantique. Cependant, le Javascript en ligne est loin d&#39;être parfait.\n\n    Première option\n    Description de la première option\n    Deuxième option\n    Description de la seconde option\n\nBon balisage:\nCet extrait montre comment la liste ci-dessus devrait être marqué. Toute interaction avec Javascript serait liée au chargement DOM à l&#39;aide de jQuery, supprimant ainsi tout balisage comportemental du code (X) HTML rendu.\n\n    Première option\n    Description de la première option\n    Deuxième option\n    Description de la seconde option\n\nle  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.\n3. Comprendre jQuery pour les scripts DOM discrets\nCette section explore trois astuces et astuces inestimables pour utiliser jQuery afin de mettre en œuvre les meilleures pratiques et les effets accessibles.\nComprendre les sélecteurs: l’épine dorsale de jQuery\nLa 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&#39;arborescence DOM afin qu&#39;il puisse être manipulé d&#39;une manière ou d&#39;une autre.\nSi 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&#39;appelle $.\nUn ensemble d’exemples très simples de sélecteurs jQuery:\n$ (document); // Activer jQuery pour l&#39;objet\n$ (&#39;# mydiv&#39;) // Elément avec l&#39;ID &quot;mydiv&quot;\n$ (&#39;p.first&#39;) // P balises avec la classe en premier.\n$ (&#39;p[title=\"Hello\"]&#39;) // P tags avec le titre &quot;Hello&quot;\n$ (&#39;p[title^=\"H\"]&#39;) // P titre des balises commençant par H\n\n$ (document);    La première option appliquera les méthodes de la bibliothèque jQuery à un objet DOM (dans ce cas, l&#39;objet document).\n$ (&#39;# Mydiv&#39;)    La deuxième option sélectionnera chaque\nqui a le attribut défini sur «mydiv».\n$ (&#39;P.first&#39;)    La troisième option sélectionnera tous les\nbalises avec la classe de &quot;premier&quot;.\n\n$ (‘P[title=“Hello”]«)    Cette option sélectionnera dans la page tous\nbalises qui ont un titre de «Bonjour». Des techniques comme celle-ci permettent d&#39;utiliser un balisage HTML (X) beaucoup plus correct, tout en facilitant les scripts DOM nécessaires à la création d&#39;interactions complexes.\n\n$ (‘P[title^=“H”]«)    Ceci permet la sélection de tous les\nbalises sur la page dont le titre commence par la lettre H.\n\nCes exemples ne font qu’effleurer la surface.\nPresque 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.\nSoit prêt. $ (document) .ready ()\nTraditionnellement, 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.\njQuery nous fournit un utilitaire spécial sur l&#39;objet document appelé «prêt», nous permettant d&#39;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&#39;attente une série d&#39;événements et les exécuter après l&#39;initialisation du DOM.\nCela signifie que nous pouvons créer des effets complets pour nos pages sans modifier le balisage des éléments en question.\nBonjour le monde! Pourquoi $ (document) .ready () est si cool\nPour démontrer la beauté de cette fonctionnalité, nous allons recréer l’introduction standard à Javascript: une boîte d’alerte «Hello World».\nLe balisage suivant montre comment nous avons pu exécuter une alerte «Hello World» sans jQuery:\nMauvais balisage:\n\nBon balisage:\nL&#39;utilisation de cette fonctionnalité dans jQuery est simple. L&#39;extrait de code suivant montre comment nous pourrions appeler la vieille boîte d&#39;alerte «Hello World» après le chargement de notre document. La vraie beauté de ce balisage est qu&#39;il réside dans un fichier Javascript externe. Il n&#39;y a AUCUN impact sur la page (X) HTML.\n$ (document) .ready (fonction ()\n\n    alerte (&#39;Hello World&#39;);\n);\nComment ça marche\nLa 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&#39;intérieur de la fonction. , dans ce cas, l&#39;appel de l&#39;alerte.\nCréation dynamique de règles CSS\nUn 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.\nLa solution à cela se présente sous la forme d&#39;un plugin pour jQuery appelé cssRule, qui nous permet d&#39;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&#39;aide de CSS. Toutefois, le CSS n&#39;est exécuté que si Javascript est en cours d&#39;exécution.\nMauvais balisage:\nHTML:\nCeci est une rubrique\n\n\n\n\nVoici quelques informations sur la rubrique.\n\n\nCSS:\np.hide-me-first\n\n    affichage: aucun;\n\nEn supposant qu&#39;un paragraphe de la classe “hide-me-first” va d&#39;abord être masqué par CSS, puis affiché par un code Javascript après une interaction future de l&#39;utilisateur, si le code Javascript ne s&#39;exécute jamais, le contenu ne sera jamais visible.\nBon balisage:\nHTML:\nCeci est une rubrique\n\n\n\n\nVoici quelques informations sur la rubrique.\n\n\njQuery Javascript:\n$ (document) .ready (fonction \n    jQuery.cssRule (&quot;p.hide-me-first&quot;, &quot;display&quot;, &quot;none&quot;);\n);\nUtiliser 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&#39;est la raison principale de la création de règles CSS dynamiques à l&#39;exécution, basées sur Javascript.\n4. Conclusion\njQuery 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.\nCet article a couvert:\n\nPourquoi les scripts DOM non intrusifs sont-ils si importants pour l&#39;accessibilité?\nPourquoi jQuery est le choix naturel d’implémenter des effets de script DOM discrets,\nComment fonctionnent les sélecteurs jQuery,\nComment implémenter des règles CSS discrètes dans jQuery.\n\n5. Lectures complémentaires\nAutres lectures: pratiques jQuery et JavaScript\n\nSite 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.\nApprendre jQuery\nTutoriels jQuery pour les concepteurs\nLes sept règles de l&#39;amélioration progressive pragmatique\nUne 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.\n\nSimon Willison\nUn 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.\nLectures supplémentaires: balisage sémantique\n\nWikipé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.\nQui se soucie du balisage sémantique? Dave Shea Dave Shea explore les avantages du balisage sémantique et\nLes 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.\nSpé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.\n\n\n\n\n\nClick to rate this post!\r\n                                   \r\n                               [Total: 0  Average: 0]","paragraphs":["A propos de l&#39;auteur\nAlex Holt est un designer professionnel et développeur Web interactif qui a travaillé avec succès pour divers clients en Australie, au Royaume-Uni, aux États-Unis et plus récemment…\nPlus à propos Alex…","Lorsqu&#39;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&#39;utilisation du framework Javascript très répandu pour créer des effets de script DOM accessibles et discrets.","Lorsqu&#39;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&#39;utilisation du framework Javascript très répandu pour créer des effets de script DOM accessibles et discrets. L&#39;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.\nVous voudrez peut-être jeter un coup d&#39;œil aux nouveaux messages suivants:\n1. Pourquoi jQuery?\njQuery 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&#39;apprentissage est petite, alors que les possibilités sont (presque) infinies.\nJavascript et les meilleures pratiques\nJavascript a longtemps fait l&#39;objet de nombreux débats animés sur la possibilité de l&#39;utiliser, tout en respectant les meilleures pratiques en matière d&#39;accessibilité et de conformité aux normes.\nLa 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é.\nÉvidemment, il existe des cas où une solution Javascript n&#39;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.\nDes scripts DOM discrets\nAlors que le terme «script DOM» fait simplement référence à l&#39;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&#39;on devrait vraiment appeler «un script DOM peu encombrant» &#8211; 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.\nThe Bottom Line: contenu accessible et dégradable\nL’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&#39;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.\n2. Des scripts DOM discrets?\nDans un monde idéal, les sites Web auraient des fonctionnalités dynamiques ET des effets qui se dégradent bien. Qu&#39;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.\nLa théorie derrière cette technique est assez simple: le but ultime est d&#39;utiliser Javascript pour les éléments non invasifs «comportementaux» de la page. Javascript est utilisé pour ajouter ou améliorer l&#39;interactivité et les effets. Les règles principales pour les scripts DOM sont les suivantes.\nRègle n ° 1: fonctionnalité Javascript distincte\nSéparez la fonctionnalité Javascript en une «couche de comportement», de sorte qu&#39;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.\nPour une démonstration, consultez les extraits de code suivants:\nMauvais balisage:\nN&#39;incluez jamais les événements Javascript en tant qu&#39;attributs en ligne. Cette pratique devrait être complètement effacée de votre esprit.\nCliquez sur!\nBon balisage:\nTous les comportements Javascript doivent être inclus dans des fichiers de script externes et liés au document avec un \nCe 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&#39;est pas une dégradation gracieuse. L&#39;utilisateur non-Javascript manque notre message de bienvenue.\nBon balisage:\nUne 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:\nBonjour!\nEn 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&#39;extrait de code Javascript suivant:\nvar now = new Date ();\nif (now.getHours ()&gt; = 12)","    var goodDay = $ (&#39;p[title=\"Good Day Message\"]&#39;);\n    goodDay.text (&#39;Bon après-midi!&#39;);","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&#39;est pas exécuté, la page reste 100% sémantique (X) HTML - pas de Javascript cruft. Le seul problème serait que l&#39;après-midi, la page continuerait à dire «Bonjour». Cependant, cela peut être considéré comme une dégradation acceptable.\nRègle n ° 3: le balisage accessible et sémantique vient en premier\nIl est très important que le balisage (X) HTML soit structuré sémantiquement. (Bien que l&#39;explication de cet article n&#39;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&#39;il est également accessible à un large gamme d&#39;appareils. Ce n’est pas toujours vrai, mais c’est une bonne règle de base.\nLe 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).\nTerrible balisage:\nL&#39;extrait suivant montre une liste typique d&#39;éléments et de descriptions d&#39;une manière typique (et terriblement non sémantique).","Première option\n        Description de la première option\n    \n    \n        Deuxième option\n        Description de la seconde option","Mauvais balisage:\nL&#39;extrait suivant montre une liste typique d&#39;éléments et de descriptions d&#39;une manière plus sémantique. Cependant, le Javascript en ligne est loin d&#39;être parfait.","Première option\n    Description de la première option\n    Deuxième option\n    Description de la seconde option","Bon balisage:\nCet extrait montre comment la liste ci-dessus devrait être marqué. Toute interaction avec Javascript serait liée au chargement DOM à l&#39;aide de jQuery, supprimant ainsi tout balisage comportemental du code (X) HTML rendu.","Première option\n    Description de la première option\n    Deuxième option\n    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.\n3. Comprendre jQuery pour les scripts DOM discrets\nCette section explore trois astuces et astuces inestimables pour utiliser jQuery afin de mettre en œuvre les meilleures pratiques et les effets accessibles.\nComprendre les sélecteurs: l’épine dorsale de jQuery\nLa 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&#39;arborescence DOM afin qu&#39;il puisse être manipulé d&#39;une manière ou d&#39;une autre.\nSi 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&#39;appelle $.\nUn ensemble d’exemples très simples de sélecteurs jQuery:\n$ (document); // Activer jQuery pour l&#39;objet\n$ (&#39;# mydiv&#39;) // Elément avec l&#39;ID &quot;mydiv&quot;\n$ (&#39;p.first&#39;) // P balises avec la classe en premier.\n$ (&#39;p[title=\"Hello\"]&#39;) // P tags avec le titre &quot;Hello&quot;\n$ (&#39;p[title^=\"H\"]&#39;) // 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&#39;objet document).\n$ (&#39;# Mydiv&#39;)    La deuxième option sélectionnera chaque\nqui a le attribut défini sur «mydiv».\n$ (&#39;P.first&#39;)    La troisième option sélectionnera tous les\nbalises avec la classe de &quot;premier&quot;.","$ (‘P[title=“Hello”]«)    Cette option sélectionnera dans la page tous\nbalises qui ont un titre de «Bonjour». Des techniques comme celle-ci permettent d&#39;utiliser un balisage HTML (X) beaucoup plus correct, tout en facilitant les scripts DOM nécessaires à la création d&#39;interactions complexes.","$ (‘P[title^=“H”]«)    Ceci permet la sélection de tous les\nbalises sur la page dont le titre commence par la lettre H.","Ces exemples ne font qu’effleurer la surface.\nPresque 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.\nSoit prêt. $ (document) .ready ()\nTraditionnellement, 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.\njQuery nous fournit un utilitaire spécial sur l&#39;objet document appelé «prêt», nous permettant d&#39;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&#39;attente une série d&#39;événements et les exécuter après l&#39;initialisation du DOM.\nCela signifie que nous pouvons créer des effets complets pour nos pages sans modifier le balisage des éléments en question.\nBonjour le monde! Pourquoi $ (document) .ready () est si cool\nPour démontrer la beauté de cette fonctionnalité, nous allons recréer l’introduction standard à Javascript: une boîte d’alerte «Hello World».\nLe balisage suivant montre comment nous avons pu exécuter une alerte «Hello World» sans jQuery:\nMauvais balisage:","Bon balisage:\nL&#39;utilisation de cette fonctionnalité dans jQuery est simple. L&#39;extrait de code suivant montre comment nous pourrions appeler la vieille boîte d&#39;alerte «Hello World» après le chargement de notre document. La vraie beauté de ce balisage est qu&#39;il réside dans un fichier Javascript externe. Il n&#39;y a AUCUN impact sur la page (X) HTML.\n$ (document) .ready (fonction ()","    alerte (&#39;Hello World&#39;);\n);\nComment ça marche\nLa 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&#39;intérieur de la fonction. , dans ce cas, l&#39;appel de l&#39;alerte.\nCréation dynamique de règles CSS\nUn 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.\nLa solution à cela se présente sous la forme d&#39;un plugin pour jQuery appelé cssRule, qui nous permet d&#39;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&#39;aide de CSS. Toutefois, le CSS n&#39;est exécuté que si Javascript est en cours d&#39;exécution.\nMauvais balisage:\nHTML:\nCeci est une rubrique","Voici quelques informations sur la rubrique.","CSS:\np.hide-me-first","    affichage: aucun;","En supposant qu&#39;un paragraphe de la classe “hide-me-first” va d&#39;abord être masqué par CSS, puis affiché par un code Javascript après une interaction future de l&#39;utilisateur, si le code Javascript ne s&#39;exécute jamais, le contenu ne sera jamais visible.\nBon balisage:\nHTML:\nCeci est une rubrique","Voici quelques informations sur la rubrique.","jQuery Javascript:\n$ (document) .ready (fonction \n    jQuery.cssRule (&quot;p.hide-me-first&quot;, &quot;display&quot;, &quot;none&quot;);\n);\nUtiliser 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&#39;est la raison principale de la création de règles CSS dynamiques à l&#39;exécution, basées sur Javascript.\n4. Conclusion\njQuery 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.\nCet article a couvert:","Pourquoi les scripts DOM non intrusifs sont-ils si importants pour l&#39;accessibilité?\nPourquoi jQuery est le choix naturel d’implémenter des effets de script DOM discrets,\nComment fonctionnent les sélecteurs jQuery,\nComment implémenter des règles CSS discrètes dans jQuery.","5. Lectures complémentaires\nAutres 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.\nApprendre jQuery\nTutoriels jQuery pour les concepteurs\nLes sept règles de l&#39;amélioration progressive pragmatique\nUne 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\nUn 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.\nLectures 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.\nQui se soucie du balisage sémantique? Dave Shea Dave Shea explore les avantages du balisage sémantique et\nLes 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.\nSpé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!\n                                   \n                               [Total: 0  Average: 0]"],"content_blocks":[{"id":"text-1","type":"text","heading":"","plain_text":"A propos de l&#39;auteur\nAlex Holt est un designer professionnel et développeur Web interactif qui a travaillé avec succès pour divers clients en Australie, au Royaume-Uni, aux États-Unis et plus récemment…\nPlus à propos Alex…","html":"<p>A propos de l&#039;auteur\nAlex Holt est un designer professionnel et développeur Web interactif qui a travaillé avec succès pour divers clients en Australie, au Royaume-Uni, aux États-Unis et plus récemment…\nPlus à propos Alex…</p>"},{"id":"text-2","type":"text","heading":"","plain_text":"Lorsqu&#39;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&#39;utilisation du framework Javascript très répandu pour créer des effets de script DOM accessibles et discrets.","html":"<p>Lorsqu&#039;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&#039;utilisation du framework Javascript très répandu pour créer des effets de script DOM accessibles et discrets.</p>"},{"id":"text-3","type":"text","heading":"","plain_text":"Lorsqu&#39;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&#39;utilisation du framework Javascript très répandu pour créer des effets de script DOM accessibles et discrets. L&#39;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.\nVous voudrez peut-être jeter un coup d&#39;œil aux nouveaux messages suivants:\n1. Pourquoi jQuery?\njQuery 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&#39;apprentissage est petite, alors que les possibilités sont (presque) infinies.\nJavascript et les meilleures pratiques\nJavascript a longtemps fait l&#39;objet de nombreux débats animés sur la possibilité de l&#39;utiliser, tout en respectant les meilleures pratiques en matière d&#39;accessibilité et de conformité aux normes.\nLa 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é.\nÉvidemment, il existe des cas où une solution Javascript n&#39;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.\nDes scripts DOM discrets\nAlors que le terme «script DOM» fait simplement référence à l&#39;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&#39;on devrait vraiment appeler «un script DOM peu encombrant» &#8211; 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.\nThe Bottom Line: contenu accessible et dégradable\nL’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&#39;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.\n2. Des scripts DOM discrets?\nDans un monde idéal, les sites Web auraient des fonctionnalités dynamiques ET des effets qui se dégradent bien. Qu&#39;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.\nLa théorie derrière cette technique est assez simple: le but ultime est d&#39;utiliser Javascript pour les éléments non invasifs «comportementaux» de la page. Javascript est utilisé pour ajouter ou améliorer l&#39;interactivité et les effets. Les règles principales pour les scripts DOM sont les suivantes.\nRègle n ° 1: fonctionnalité Javascript distincte\nSéparez la fonctionnalité Javascript en une «couche de comportement», de sorte qu&#39;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.\nPour une démonstration, consultez les extraits de code suivants:\nMauvais balisage:\nN&#39;incluez jamais les événements Javascript en tant qu&#39;attributs en ligne. Cette pratique devrait être complètement effacée de votre esprit.\nCliquez sur!\nBon balisage:\nTous les comportements Javascript doivent être inclus dans des fichiers de script externes et liés au document avec un \nCe 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&#39;est pas une dégradation gracieuse. L&#39;utilisateur non-Javascript manque notre message de bienvenue.\nBon balisage:\nUne 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:\nBonjour!\nEn 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&#39;extrait de code Javascript suivant:\nvar now = new Date ();\nif (now.getHours ()&gt; = 12)","html":"<p>Lorsqu&#039;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&#039;utilisation du framework Javascript très répandu pour créer des effets de script DOM accessibles et discrets. L&#039;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.\nVous voudrez peut-être jeter un coup d&#039;œil aux nouveaux messages suivants:\n1. Pourquoi jQuery?\njQuery 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&#039;apprentissage est petite, alors que les possibilités sont (presque) infinies.\nJavascript et les meilleures pratiques\nJavascript a longtemps fait l&#039;objet de nombreux débats animés sur la possibilité de l&#039;utiliser, tout en respectant les meilleures pratiques en matière d&#039;accessibilité et de conformité aux normes.\nLa 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é.\nÉvidemment, il existe des cas où une solution Javascript n&#039;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.\nDes scripts DOM discrets\nAlors que le terme «script DOM» fait simplement référence à l&#039;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&#039;on devrait vraiment appeler «un script DOM peu encombrant» &#8211; 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.\nThe Bottom Line: contenu accessible et dégradable\nL’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&#039;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.\n2. Des scripts DOM discrets?\nDans un monde idéal, les sites Web auraient des fonctionnalités dynamiques ET des effets qui se dégradent bien. Qu&#039;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.\nLa théorie derrière cette technique est assez simple: le but ultime est d&#039;utiliser Javascript pour les éléments non invasifs «comportementaux» de la page. Javascript est utilisé pour ajouter ou améliorer l&#039;interactivité et les effets. Les règles principales pour les scripts DOM sont les suivantes.\nRègle n ° 1: fonctionnalité Javascript distincte\nSéparez la fonctionnalité Javascript en une «couche de comportement», de sorte qu&#039;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.\nPour une démonstration, consultez les extraits de code suivants:\nMauvais balisage:\nN&#039;incluez jamais les événements Javascript en tant qu&#039;attributs en ligne. Cette pratique devrait être complètement effacée de votre esprit.\nCliquez sur!\nBon balisage:\nTous les comportements Javascript doivent être inclus dans des fichiers de script externes et liés au document avec un \nCe 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&#039;est pas une dégradation gracieuse. L&#039;utilisateur non-Javascript manque notre message de bienvenue.\nBon balisage:\nUne 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:\nBonjour!\nEn 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&#039;extrait de code Javascript suivant:\nvar now = new Date ();\nif (now.getHours ()&gt; = 12)</p>"},{"id":"text-4","type":"text","heading":"","plain_text":"    var goodDay = $ (&#39;p[title=\"Good Day Message\"]&#39;);\n    goodDay.text (&#39;Bon après-midi!&#39;);","html":"<p>    var goodDay = $ (&#039;p[title=&quot;Good Day Message&quot;]&#039;);\n    goodDay.text (&#039;Bon après-midi!&#039;);</p>"},{"id":"text-5","type":"text","heading":"","plain_text":"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&#39;est pas exécuté, la page reste 100% sémantique (X) HTML - pas de Javascript cruft. Le seul problème serait que l&#39;après-midi, la page continuerait à dire «Bonjour». Cependant, cela peut être considéré comme une dégradation acceptable.\nRègle n ° 3: le balisage accessible et sémantique vient en premier\nIl est très important que le balisage (X) HTML soit structuré sémantiquement. (Bien que l&#39;explication de cet article n&#39;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&#39;il est également accessible à un large gamme d&#39;appareils. Ce n’est pas toujours vrai, mais c’est une bonne règle de base.\nLe 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).\nTerrible balisage:\nL&#39;extrait suivant montre une liste typique d&#39;éléments et de descriptions d&#39;une manière typique (et terriblement non sémantique).","html":"<p>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&#039;est pas exécuté, la page reste 100% sémantique (X) HTML - pas de Javascript cruft. Le seul problème serait que l&#039;après-midi, la page continuerait à dire «Bonjour». Cependant, cela peut être considéré comme une dégradation acceptable.\nRègle n ° 3: le balisage accessible et sémantique vient en premier\nIl est très important que le balisage (X) HTML soit structuré sémantiquement. (Bien que l&#039;explication de cet article n&#039;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&#039;il est également accessible à un large gamme d&#039;appareils. Ce n’est pas toujours vrai, mais c’est une bonne règle de base.\nLe 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).\nTerrible balisage:\nL&#039;extrait suivant montre une liste typique d&#039;éléments et de descriptions d&#039;une manière typique (et terriblement non sémantique).</p>"},{"id":"text-6","type":"text","heading":"","plain_text":"Première option\n        Description de la première option\n    \n    \n        Deuxième option\n        Description de la seconde option","html":"<p>Première option\n        Description de la première option\n    \n    \n        Deuxième option\n        Description de la seconde option</p>"},{"id":"text-7","type":"text","heading":"","plain_text":"Mauvais balisage:\nL&#39;extrait suivant montre une liste typique d&#39;éléments et de descriptions d&#39;une manière plus sémantique. Cependant, le Javascript en ligne est loin d&#39;être parfait.","html":"<p>Mauvais balisage:\nL&#039;extrait suivant montre une liste typique d&#039;éléments et de descriptions d&#039;une manière plus sémantique. Cependant, le Javascript en ligne est loin d&#039;être parfait.</p>"},{"id":"text-8","type":"text","heading":"","plain_text":"Première option\n    Description de la première option\n    Deuxième option\n    Description de la seconde option","html":"<p>Première option\n    Description de la première option\n    Deuxième option\n    Description de la seconde option</p>"},{"id":"text-9","type":"text","heading":"","plain_text":"Bon balisage:\nCet extrait montre comment la liste ci-dessus devrait être marqué. Toute interaction avec Javascript serait liée au chargement DOM à l&#39;aide de jQuery, supprimant ainsi tout balisage comportemental du code (X) HTML rendu.","html":"<p>Bon balisage:\nCet extrait montre comment la liste ci-dessus devrait être marqué. Toute interaction avec Javascript serait liée au chargement DOM à l&#039;aide de jQuery, supprimant ainsi tout balisage comportemental du code (X) HTML rendu.</p>"},{"id":"text-10","type":"text","heading":"","plain_text":"Première option\n    Description de la première option\n    Deuxième option\n    Description de la seconde option","html":"<p>Première option\n    Description de la première option\n    Deuxième option\n    Description de la seconde option</p>"},{"id":"text-11","type":"text","heading":"","plain_text":"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.\n3. Comprendre jQuery pour les scripts DOM discrets\nCette section explore trois astuces et astuces inestimables pour utiliser jQuery afin de mettre en œuvre les meilleures pratiques et les effets accessibles.\nComprendre les sélecteurs: l’épine dorsale de jQuery\nLa 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&#39;arborescence DOM afin qu&#39;il puisse être manipulé d&#39;une manière ou d&#39;une autre.\nSi 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&#39;appelle $.\nUn ensemble d’exemples très simples de sélecteurs jQuery:\n$ (document); // Activer jQuery pour l&#39;objet\n$ (&#39;# mydiv&#39;) // Elément avec l&#39;ID &quot;mydiv&quot;\n$ (&#39;p.first&#39;) // P balises avec la classe en premier.\n$ (&#39;p[title=\"Hello\"]&#39;) // P tags avec le titre &quot;Hello&quot;\n$ (&#39;p[title^=\"H\"]&#39;) // P titre des balises commençant par H","html":"<p>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.\n3. Comprendre jQuery pour les scripts DOM discrets\nCette section explore trois astuces et astuces inestimables pour utiliser jQuery afin de mettre en œuvre les meilleures pratiques et les effets accessibles.\nComprendre les sélecteurs: l’épine dorsale de jQuery\nLa 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&#039;arborescence DOM afin qu&#039;il puisse être manipulé d&#039;une manière ou d&#039;une autre.\nSi 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&#039;appelle $.\nUn ensemble d’exemples très simples de sélecteurs jQuery:\n$ (document); // Activer jQuery pour l&#039;objet\n$ (&#039;# mydiv&#039;) // Elément avec l&#039;ID &quot;mydiv&quot;\n$ (&#039;p.first&#039;) // P balises avec la classe en premier.\n$ (&#039;p[title=&quot;Hello&quot;]&#039;) // P tags avec le titre &quot;Hello&quot;\n$ (&#039;p[title^=&quot;H&quot;]&#039;) // P titre des balises commençant par H</p>"},{"id":"text-12","type":"text","heading":"","plain_text":"$ (document);    La première option appliquera les méthodes de la bibliothèque jQuery à un objet DOM (dans ce cas, l&#39;objet document).\n$ (&#39;# Mydiv&#39;)    La deuxième option sélectionnera chaque\nqui a le attribut défini sur «mydiv».\n$ (&#39;P.first&#39;)    La troisième option sélectionnera tous les\nbalises avec la classe de &quot;premier&quot;.","html":"<p>$ (document);    La première option appliquera les méthodes de la bibliothèque jQuery à un objet DOM (dans ce cas, l&#039;objet document).\n$ (&#039;# Mydiv&#039;)    La deuxième option sélectionnera chaque\nqui a le attribut défini sur «mydiv».\n$ (&#039;P.first&#039;)    La troisième option sélectionnera tous les\nbalises avec la classe de &quot;premier&quot;.</p>"},{"id":"text-13","type":"text","heading":"","plain_text":"$ (‘P[title=“Hello”]«)    Cette option sélectionnera dans la page tous\nbalises qui ont un titre de «Bonjour». Des techniques comme celle-ci permettent d&#39;utiliser un balisage HTML (X) beaucoup plus correct, tout en facilitant les scripts DOM nécessaires à la création d&#39;interactions complexes.","html":"<p>$ (‘P[title=“Hello”]«)    Cette option sélectionnera dans la page tous\nbalises qui ont un titre de «Bonjour». Des techniques comme celle-ci permettent d&#039;utiliser un balisage HTML (X) beaucoup plus correct, tout en facilitant les scripts DOM nécessaires à la création d&#039;interactions complexes.</p>"},{"id":"text-14","type":"text","heading":"","plain_text":"$ (‘P[title^=“H”]«)    Ceci permet la sélection de tous les\nbalises sur la page dont le titre commence par la lettre H.","html":"<p>$ (‘P[title^=“H”]«)    Ceci permet la sélection de tous les\nbalises sur la page dont le titre commence par la lettre H.</p>"},{"id":"text-15","type":"text","heading":"","plain_text":"Ces exemples ne font qu’effleurer la surface.\nPresque 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.\nSoit prêt. $ (document) .ready ()\nTraditionnellement, 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.\njQuery nous fournit un utilitaire spécial sur l&#39;objet document appelé «prêt», nous permettant d&#39;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&#39;attente une série d&#39;événements et les exécuter après l&#39;initialisation du DOM.\nCela signifie que nous pouvons créer des effets complets pour nos pages sans modifier le balisage des éléments en question.\nBonjour le monde! Pourquoi $ (document) .ready () est si cool\nPour démontrer la beauté de cette fonctionnalité, nous allons recréer l’introduction standard à Javascript: une boîte d’alerte «Hello World».\nLe balisage suivant montre comment nous avons pu exécuter une alerte «Hello World» sans jQuery:\nMauvais balisage:","html":"<p>Ces exemples ne font qu’effleurer la surface.\nPresque 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.\nSoit prêt. $ (document) .ready ()\nTraditionnellement, 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.\njQuery nous fournit un utilitaire spécial sur l&#039;objet document appelé «prêt», nous permettant d&#039;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&#039;attente une série d&#039;événements et les exécuter après l&#039;initialisation du DOM.\nCela signifie que nous pouvons créer des effets complets pour nos pages sans modifier le balisage des éléments en question.\nBonjour le monde! Pourquoi $ (document) .ready () est si cool\nPour démontrer la beauté de cette fonctionnalité, nous allons recréer l’introduction standard à Javascript: une boîte d’alerte «Hello World».\nLe balisage suivant montre comment nous avons pu exécuter une alerte «Hello World» sans jQuery:\nMauvais balisage:</p>"},{"id":"text-16","type":"text","heading":"","plain_text":"Bon balisage:\nL&#39;utilisation de cette fonctionnalité dans jQuery est simple. L&#39;extrait de code suivant montre comment nous pourrions appeler la vieille boîte d&#39;alerte «Hello World» après le chargement de notre document. La vraie beauté de ce balisage est qu&#39;il réside dans un fichier Javascript externe. Il n&#39;y a AUCUN impact sur la page (X) HTML.\n$ (document) .ready (fonction ()","html":"<p>Bon balisage:\nL&#039;utilisation de cette fonctionnalité dans jQuery est simple. L&#039;extrait de code suivant montre comment nous pourrions appeler la vieille boîte d&#039;alerte «Hello World» après le chargement de notre document. La vraie beauté de ce balisage est qu&#039;il réside dans un fichier Javascript externe. Il n&#039;y a AUCUN impact sur la page (X) HTML.\n$ (document) .ready (fonction ()</p>"},{"id":"text-17","type":"text","heading":"","plain_text":"    alerte (&#39;Hello World&#39;);\n);\nComment ça marche\nLa 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&#39;intérieur de la fonction. , dans ce cas, l&#39;appel de l&#39;alerte.\nCréation dynamique de règles CSS\nUn 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.\nLa solution à cela se présente sous la forme d&#39;un plugin pour jQuery appelé cssRule, qui nous permet d&#39;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&#39;aide de CSS. Toutefois, le CSS n&#39;est exécuté que si Javascript est en cours d&#39;exécution.\nMauvais balisage:\nHTML:\nCeci est une rubrique","html":"<p>    alerte (&#039;Hello World&#039;);\n);\nComment ça marche\nLa 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&#039;intérieur de la fonction. , dans ce cas, l&#039;appel de l&#039;alerte.\nCréation dynamique de règles CSS\nUn 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.\nLa solution à cela se présente sous la forme d&#039;un plugin pour jQuery appelé cssRule, qui nous permet d&#039;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&#039;aide de CSS. Toutefois, le CSS n&#039;est exécuté que si Javascript est en cours d&#039;exécution.\nMauvais balisage:\nHTML:\nCeci est une rubrique</p>"},{"id":"text-18","type":"text","heading":"","plain_text":"Voici quelques informations sur la rubrique.","html":"<p>Voici quelques informations sur la rubrique.</p>"},{"id":"text-19","type":"text","heading":"","plain_text":"CSS:\np.hide-me-first","html":"<p>CSS:\np.hide-me-first</p>"},{"id":"text-20","type":"text","heading":"","plain_text":"    affichage: aucun;","html":"<p>    affichage: aucun;</p>"},{"id":"text-21","type":"text","heading":"","plain_text":"En supposant qu&#39;un paragraphe de la classe “hide-me-first” va d&#39;abord être masqué par CSS, puis affiché par un code Javascript après une interaction future de l&#39;utilisateur, si le code Javascript ne s&#39;exécute jamais, le contenu ne sera jamais visible.\nBon balisage:\nHTML:\nCeci est une rubrique","html":"<p>En supposant qu&#039;un paragraphe de la classe “hide-me-first” va d&#039;abord être masqué par CSS, puis affiché par un code Javascript après une interaction future de l&#039;utilisateur, si le code Javascript ne s&#039;exécute jamais, le contenu ne sera jamais visible.\nBon balisage:\nHTML:\nCeci est une rubrique</p>"},{"id":"text-22","type":"text","heading":"","plain_text":"Voici quelques informations sur la rubrique.","html":"<p>Voici quelques informations sur la rubrique.</p>"},{"id":"text-23","type":"text","heading":"","plain_text":"jQuery Javascript:\n$ (document) .ready (fonction \n    jQuery.cssRule (&quot;p.hide-me-first&quot;, &quot;display&quot;, &quot;none&quot;);\n);\nUtiliser 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&#39;est la raison principale de la création de règles CSS dynamiques à l&#39;exécution, basées sur Javascript.\n4. Conclusion\njQuery 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.\nCet article a couvert:","html":"<p>jQuery Javascript:\n$ (document) .ready (fonction \n    jQuery.cssRule (&quot;p.hide-me-first&quot;, &quot;display&quot;, &quot;none&quot;);\n);\nUtiliser 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&#039;est la raison principale de la création de règles CSS dynamiques à l&#039;exécution, basées sur Javascript.\n4. Conclusion\njQuery 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.\nCet article a couvert:</p>"},{"id":"text-24","type":"text","heading":"","plain_text":"Pourquoi les scripts DOM non intrusifs sont-ils si importants pour l&#39;accessibilité?\nPourquoi jQuery est le choix naturel d’implémenter des effets de script DOM discrets,\nComment fonctionnent les sélecteurs jQuery,\nComment implémenter des règles CSS discrètes dans jQuery.","html":"<p>Pourquoi les scripts DOM non intrusifs sont-ils si importants pour l&#039;accessibilité?\nPourquoi jQuery est le choix naturel d’implémenter des effets de script DOM discrets,\nComment fonctionnent les sélecteurs jQuery,\nComment implémenter des règles CSS discrètes dans jQuery.</p>"},{"id":"text-25","type":"text","heading":"","plain_text":"5. Lectures complémentaires\nAutres lectures: pratiques jQuery et JavaScript","html":"<p>5. Lectures complémentaires\nAutres lectures: pratiques jQuery et JavaScript</p>"},{"id":"text-26","type":"text","heading":"","plain_text":"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.\nApprendre jQuery\nTutoriels jQuery pour les concepteurs\nLes sept règles de l&#39;amélioration progressive pragmatique\nUne 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.","html":"<p>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.\nApprendre jQuery\nTutoriels jQuery pour les concepteurs\nLes sept règles de l&#039;amélioration progressive pragmatique\nUne 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.</p>"},{"id":"text-27","type":"text","heading":"","plain_text":"Simon Willison\nUn 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.\nLectures supplémentaires: balisage sémantique","html":"<p>Simon Willison\nUn 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.\nLectures supplémentaires: balisage sémantique</p>"},{"id":"text-28","type":"text","heading":"","plain_text":"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.\nQui se soucie du balisage sémantique? Dave Shea Dave Shea explore les avantages du balisage sémantique et\nLes 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.\nSpé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.","html":"<p>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.\nQui se soucie du balisage sémantique? Dave Shea Dave Shea explore les avantages du balisage sémantique et\nLes 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.\nSpé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>"},{"id":"text-29","type":"text","heading":"","plain_text":"Click to rate this post!\n                                   \n                               [Total: 0  Average: 0]","html":"<p>Click to rate this post!\n                                   \n                               [Total: 0  Average: 0]</p>"}],"sections":[{"id":"text-1","heading":"Text","content":"A propos de l&#39;auteur\nAlex Holt est un designer professionnel et développeur Web interactif qui a travaillé avec succès pour divers clients en Australie, au Royaume-Uni, aux États-Unis et plus récemment…\nPlus à propos Alex…"},{"id":"text-2","heading":"Text","content":"Lorsqu&#39;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&#39;utilisation du framework Javascript très répandu pour créer des effets de script DOM accessibles et discrets."},{"id":"text-3","heading":"Text","content":"Lorsqu&#39;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&#39;utilisation du framework Javascript très répandu pour créer des effets de script DOM accessibles et discrets. L&#39;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.\nVous voudrez peut-être jeter un coup d&#39;œil aux nouveaux messages suivants:\n1. Pourquoi jQuery?\njQuery 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&#39;apprentissage est petite, alors que les possibilités sont (presque) infinies.\nJavascript et les meilleures pratiques\nJavascript a longtemps fait l&#39;objet de nombreux débats animés sur la possibilité de l&#39;utiliser, tout en respectant les meilleures pratiques en matière d&#39;accessibilité et de conformité aux normes.\nLa 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é.\nÉvidemment, il existe des cas où une solution Javascript n&#39;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.\nDes scripts DOM discrets\nAlors que le terme «script DOM» fait simplement référence à l&#39;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&#39;on devrait vraiment appeler «un script DOM peu encombrant» &#8211; 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.\nThe Bottom Line: contenu accessible et dégradable\nL’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&#39;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.\n2. Des scripts DOM discrets?\nDans un monde idéal, les sites Web auraient des fonctionnalités dynamiques ET des effets qui se dégradent bien. Qu&#39;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.\nLa théorie derrière cette technique est assez simple: le but ultime est d&#39;utiliser Javascript pour les éléments non invasifs «comportementaux» de la page. Javascript est utilisé pour ajouter ou améliorer l&#39;interactivité et les effets. Les règles principales pour les scripts DOM sont les suivantes.\nRègle n ° 1: fonctionnalité Javascript distincte\nSéparez la fonctionnalité Javascript en une «couche de comportement», de sorte qu&#39;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.\nPour une démonstration, consultez les extraits de code suivants:\nMauvais balisage:\nN&#39;incluez jamais les événements Javascript en tant qu&#39;attributs en ligne. Cette pratique devrait être complètement effacée de votre esprit.\nCliquez sur!\nBon balisage:\nTous les comportements Javascript doivent être inclus dans des fichiers de script externes et liés au document avec un \nCe 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&#39;est pas une dégradation gracieuse. L&#39;utilisateur non-Javascript manque notre message de bienvenue.\nBon balisage:\nUne 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:\nBonjour!\nEn 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&#39;extrait de code Javascript suivant:\nvar now = new Date ();\nif (now.getHours ()&gt; = 12)"},{"id":"text-4","heading":"Text","content":"    var goodDay = $ (&#39;p[title=\"Good Day Message\"]&#39;);\n    goodDay.text (&#39;Bon après-midi!&#39;);"},{"id":"text-5","heading":"Text","content":"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&#39;est pas exécuté, la page reste 100% sémantique (X) HTML - pas de Javascript cruft. Le seul problème serait que l&#39;après-midi, la page continuerait à dire «Bonjour». Cependant, cela peut être considéré comme une dégradation acceptable.\nRègle n ° 3: le balisage accessible et sémantique vient en premier\nIl est très important que le balisage (X) HTML soit structuré sémantiquement. (Bien que l&#39;explication de cet article n&#39;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&#39;il est également accessible à un large gamme d&#39;appareils. Ce n’est pas toujours vrai, mais c’est une bonne règle de base.\nLe 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).\nTerrible balisage:\nL&#39;extrait suivant montre une liste typique d&#39;éléments et de descriptions d&#39;une manière typique (et terriblement non sémantique)."},{"id":"text-6","heading":"Text","content":"Première option\n        Description de la première option\n    \n    \n        Deuxième option\n        Description de la seconde option"},{"id":"text-7","heading":"Text","content":"Mauvais balisage:\nL&#39;extrait suivant montre une liste typique d&#39;éléments et de descriptions d&#39;une manière plus sémantique. Cependant, le Javascript en ligne est loin d&#39;être parfait."},{"id":"text-8","heading":"Text","content":"Première option\n    Description de la première option\n    Deuxième option\n    Description de la seconde option"},{"id":"text-9","heading":"Text","content":"Bon balisage:\nCet extrait montre comment la liste ci-dessus devrait être marqué. Toute interaction avec Javascript serait liée au chargement DOM à l&#39;aide de jQuery, supprimant ainsi tout balisage comportemental du code (X) HTML rendu."},{"id":"text-10","heading":"Text","content":"Première option\n    Description de la première option\n    Deuxième option\n    Description de la seconde option"},{"id":"text-11","heading":"Text","content":"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.\n3. Comprendre jQuery pour les scripts DOM discrets\nCette section explore trois astuces et astuces inestimables pour utiliser jQuery afin de mettre en œuvre les meilleures pratiques et les effets accessibles.\nComprendre les sélecteurs: l’épine dorsale de jQuery\nLa 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&#39;arborescence DOM afin qu&#39;il puisse être manipulé d&#39;une manière ou d&#39;une autre.\nSi 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&#39;appelle $.\nUn ensemble d’exemples très simples de sélecteurs jQuery:\n$ (document); // Activer jQuery pour l&#39;objet\n$ (&#39;# mydiv&#39;) // Elément avec l&#39;ID &quot;mydiv&quot;\n$ (&#39;p.first&#39;) // P balises avec la classe en premier.\n$ (&#39;p[title=\"Hello\"]&#39;) // P tags avec le titre &quot;Hello&quot;\n$ (&#39;p[title^=\"H\"]&#39;) // P titre des balises commençant par H"},{"id":"text-12","heading":"Text","content":"$ (document);    La première option appliquera les méthodes de la bibliothèque jQuery à un objet DOM (dans ce cas, l&#39;objet document).\n$ (&#39;# Mydiv&#39;)    La deuxième option sélectionnera chaque\nqui a le attribut défini sur «mydiv».\n$ (&#39;P.first&#39;)    La troisième option sélectionnera tous les\nbalises avec la classe de &quot;premier&quot;."},{"id":"text-13","heading":"Text","content":"$ (‘P[title=“Hello”]«)    Cette option sélectionnera dans la page tous\nbalises qui ont un titre de «Bonjour». Des techniques comme celle-ci permettent d&#39;utiliser un balisage HTML (X) beaucoup plus correct, tout en facilitant les scripts DOM nécessaires à la création d&#39;interactions complexes."},{"id":"text-14","heading":"Text","content":"$ (‘P[title^=“H”]«)    Ceci permet la sélection de tous les\nbalises sur la page dont le titre commence par la lettre H."},{"id":"text-15","heading":"Text","content":"Ces exemples ne font qu’effleurer la surface.\nPresque 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.\nSoit prêt. $ (document) .ready ()\nTraditionnellement, 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.\njQuery nous fournit un utilitaire spécial sur l&#39;objet document appelé «prêt», nous permettant d&#39;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&#39;attente une série d&#39;événements et les exécuter après l&#39;initialisation du DOM.\nCela signifie que nous pouvons créer des effets complets pour nos pages sans modifier le balisage des éléments en question.\nBonjour le monde! Pourquoi $ (document) .ready () est si cool\nPour démontrer la beauté de cette fonctionnalité, nous allons recréer l’introduction standard à Javascript: une boîte d’alerte «Hello World».\nLe balisage suivant montre comment nous avons pu exécuter une alerte «Hello World» sans jQuery:\nMauvais balisage:"},{"id":"text-16","heading":"Text","content":"Bon balisage:\nL&#39;utilisation de cette fonctionnalité dans jQuery est simple. L&#39;extrait de code suivant montre comment nous pourrions appeler la vieille boîte d&#39;alerte «Hello World» après le chargement de notre document. La vraie beauté de ce balisage est qu&#39;il réside dans un fichier Javascript externe. Il n&#39;y a AUCUN impact sur la page (X) HTML.\n$ (document) .ready (fonction ()"},{"id":"text-17","heading":"Text","content":"    alerte (&#39;Hello World&#39;);\n);\nComment ça marche\nLa 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&#39;intérieur de la fonction. , dans ce cas, l&#39;appel de l&#39;alerte.\nCréation dynamique de règles CSS\nUn 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.\nLa solution à cela se présente sous la forme d&#39;un plugin pour jQuery appelé cssRule, qui nous permet d&#39;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&#39;aide de CSS. Toutefois, le CSS n&#39;est exécuté que si Javascript est en cours d&#39;exécution.\nMauvais balisage:\nHTML:\nCeci est une rubrique"},{"id":"text-18","heading":"Text","content":"Voici quelques informations sur la rubrique."},{"id":"text-19","heading":"Text","content":"CSS:\np.hide-me-first"},{"id":"text-20","heading":"Text","content":"    affichage: aucun;"},{"id":"text-21","heading":"Text","content":"En supposant qu&#39;un paragraphe de la classe “hide-me-first” va d&#39;abord être masqué par CSS, puis affiché par un code Javascript après une interaction future de l&#39;utilisateur, si le code Javascript ne s&#39;exécute jamais, le contenu ne sera jamais visible.\nBon balisage:\nHTML:\nCeci est une rubrique"},{"id":"text-22","heading":"Text","content":"Voici quelques informations sur la rubrique."},{"id":"text-23","heading":"Text","content":"jQuery Javascript:\n$ (document) .ready (fonction \n    jQuery.cssRule (&quot;p.hide-me-first&quot;, &quot;display&quot;, &quot;none&quot;);\n);\nUtiliser 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&#39;est la raison principale de la création de règles CSS dynamiques à l&#39;exécution, basées sur Javascript.\n4. Conclusion\njQuery 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.\nCet article a couvert:"},{"id":"text-24","heading":"Text","content":"Pourquoi les scripts DOM non intrusifs sont-ils si importants pour l&#39;accessibilité?\nPourquoi jQuery est le choix naturel d’implémenter des effets de script DOM discrets,\nComment fonctionnent les sélecteurs jQuery,\nComment implémenter des règles CSS discrètes dans jQuery."},{"id":"text-25","heading":"Text","content":"5. Lectures complémentaires\nAutres lectures: pratiques jQuery et JavaScript"},{"id":"text-26","heading":"Text","content":"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.\nApprendre jQuery\nTutoriels jQuery pour les concepteurs\nLes sept règles de l&#39;amélioration progressive pragmatique\nUne 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."},{"id":"text-27","heading":"Text","content":"Simon Willison\nUn 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.\nLectures supplémentaires: balisage sémantique"},{"id":"text-28","heading":"Text","content":"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.\nQui se soucie du balisage sémantique? Dave Shea Dave Shea explore les avantages du balisage sémantique et\nLes 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.\nSpé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."},{"id":"text-29","heading":"Text","content":"Click to rate this post!\n                                   \n                               [Total: 0  Average: 0]"}],"media":{"primary_image":""},"relations":[{"rel":"canonical","href":"https://tutos-gameserver.fr/2019/05/03/exemples-et-meilleures-pratiques-smashing-magazine-serveur-dimpression/"},{"rel":"alternate","href":"https://tutos-gameserver.fr/2019/05/03/exemples-et-meilleures-pratiques-smashing-magazine-serveur-dimpression/llm","type":"text/html"},{"rel":"alternate","href":"https://tutos-gameserver.fr/2019/05/03/exemples-et-meilleures-pratiques-smashing-magazine-serveur-dimpression/llm.json","type":"application/json"},{"rel":"llm-manifest","href":"https://tutos-gameserver.fr/llm-endpoints-manifest.json","type":"application/json"}],"http_headers":{"X-LLM-Friendly":"1","X-LLM-Schema":"1.1.0","Content-Security-Policy":"default-src 'none'; img-src * data:; style-src 'unsafe-inline'"},"license":"CC BY-ND 4.0","attribution_required":true,"allow_cors":false}