Índice
- 1. ¿Por qué jQuery?
- 2. ¿Secuencias de comandos DOM discretas?
- 3. Comprender jQuery para secuencias de comandos DOM discretas
- 4. Conclusión
- 5. Lecturas adicionales
Cuando se usa correctamente, jQuery puede ayudarlo a hacer que su sitio web sea más interactivo, interesante y emocionante. Este artículo compartirá algunas de las mejores prácticas y ejemplos para usar el popular marco Javascript para crear efectos de secuencias de comandos DOM accesibles y discretos.
Cuando se usa correctamente, jQuery puede ayudarlo a hacer que su sitio web sea más interactivo, interesante y emocionante. Este artículo compartirá algunas de las mejores prácticas y ejemplos para usar el popular marco Javascript para crear efectos de secuencias de comandos DOM accesibles y discretos. El artículo explorará qué constituyen las mejores prácticas con respecto a Javascript y, además, por qué jQuery es una buena opción como marco para implementar las mejores prácticas.
Quizás quieras echar un vistazo a las siguientes publicaciones más recientes:
- Patrones esenciales del complemento jQuery
- Bibliotecas JavaScript útiles y complementos jQuery
- Codificación jQuery y JavaScript: ejemplos y mejores prácticas
- Demostraciones útiles de funciones jQuery para sus proyectos
1. ¿Por qué jQuery?
jQuery es ideal porque puede crear animaciones e interacciones impresionantes. jQuery es sencillo de entender y fácil de usar, lo que significa que la curva de aprendizaje es pequeña, mientras que las posibilidades son (casi) infinitas.
Javascript y mejores prácticas
Javascript ha sido durante mucho tiempo objeto de muchos debates acalorados sobre si es posible utilizarlo y al mismo tiempo seguir las mejores prácticas en materia de accesibilidad y cumplimiento de estándares.
La respuesta a esta pregunta aún está sin resolver, sin embargo, la aparición de frameworks Javascript como jQuery ha proporcionado las herramientas necesarias para crear sitios web hermosos sin tener que preocuparse (tanto) por problemas de accesibilidad.
Evidentemente hay casos en los que una solución Javascript no es la mejor opción. La regla general aquí es: utilizar secuencias de comandos DOM para mejorar la funcionalidad, no crearla.
Secuencias de comandos DOM discretas
Si bien el término “scripting DOM” en realidad solo se refiere al uso de scripts (en este caso, Javascripts) para acceder al Modelo de Objetos de Documento, ha sido ampliamente aceptado como una forma de describir lo que realmente debería llamarse “scripting DOM discreto”: Básicamente, el arte de agregar Javascript a su página de tal manera que si NO hubiera Javascript, la página aún funcionaría (o al menos se degradaría con gracia). En el mundo de los sitios web, nuestras secuencias de comandos DOM se realizan utilizando Javascript.
Conclusión: contenido accesible y degradable
El objetivo de cualquier productor, diseñador o desarrollador web es crear contenido que sea accesible para la más amplia gama de audiencias. Sin embargo, esto debe equilibrarse cuidadosamente con el diseño, la interactividad y la belleza. Utilizando las teorías expuestas en este artículo, los diseñadores, desarrolladores y productores web tendrán el conocimiento y la comprensión para utilizar jQuery para secuencias de comandos DOM de una manera accesible y degradable; manteniendo contenido que sea hermoso, funcional Y accesible.
2. ¿Secuencias de comandos DOM discretas?
En un mundo ideal, los sitios web tendrían funciones dinámicas Y efectos que se degradarían bien. ¿Qué quiere decir esto? Significaría encontrar una manera de incluir, digamos, un elegante widget de noticias deslizante animado Javascript Web 2.0 en una página web, y al mismo tiempo garantizar que falle correctamente si el navegador de un visitante no puede (o no quiere) ejecutar Javascripts.
La teoría detrás de esta técnica es bastante simple: el objetivo final es utilizar Javascript para elementos "comportamentales" no invasivos de la página. Javascript se utiliza para agregar o mejorar la interactividad y los efectos. A continuación se detallan las reglas principales para las secuencias de comandos DOM.
Regla n.º 1: funcionalidad de JavaScript independiente
Separe la funcionalidad de Javascript en una “capa de comportamiento”, de modo que esté separada e independiente de (X)HTML y CSS. (X)HTML es el marcado, CSS la presentación y Javascript la capa de comportamiento. Esto significa almacenar TODO el código Javascript en archivos de script externos y crear páginas que no dependan de Javascript para ser utilizables.
Para ver una demostración, consulte los siguientes fragmentos de código:
Mal marcado:
Nunca incluya eventos de Javascript como atributos en línea. Esta práctica debería ser completamente borrada de tu mente.
a href="#"Click!/aBuen marcado:
Todos los comportamientos de Javascript deben incluirse en archivos de script externos y vincularse al documento con una etiqueta script en el encabezado de la página. Entonces, la etiqueta de anclaje se vería así:
a href="backuplink.html"Click!/aY el Javascript dentro del archivo myscript.js contendría algo como esto:
...$('a.doSomething').click(function(){ // Do something here! alert('You did something, woo hoo!');});...El método .click() en jQuery nos permite adjuntar fácilmente un evento de clic a los resultados de nuestro selector. Entonces, el código seleccionará todas las etiquetas a de la clase "hacer algo" y adjuntará un evento de clic que llamará a la función. En la práctica, esto
En la regla número 2 hay una demostración adicional de cómo se puede lograr un fin similar sin código Javascript en línea.
Regla #2: NUNCA dependa de Javascript
Para ser verdaderamente discreto, un desarrollador nunca debe confiar en el soporte de Javascript para entregar contenido o información. Está bien usar Javascript para mejorar la información, hacerla más bonita o más interactiva, pero nunca asuma que el navegador del usuario tendrá Javascript habilitado. De hecho, esta regla general se puede aplicar a cualquier tecnología de terceros, como Flash o Java. Si no está integrado en todos los navegadores web (y siempre habilitado), asegúrese de que la página siga siendo completamente accesible y utilizable sin él.
Mal marcado:
El siguiente fragmento muestra Javascript que podría usarse para mostrar un mensaje de "Buenos días" (o "tardes") en un sitio, según la hora del día. (Obviamente, este es un ejemplo rudimentario y, de hecho, probablemente se lograría en algún lenguaje de programación del lado del servidor).
script language="javascript"var now = new Date();if(now.getHours() 12) document.write('Good Morning!');else document.write('Good Afternoon!');/scriptEste script en línea es malo porque si el navegador de destino tiene Javascript deshabilitado, no se mostrará NADA, dejando un espacio en la página. Esto NO es una degradación elegante. El usuario que no utiliza Javascript se está perdiendo nuestro mensaje de bienvenida.
Buen marcado:
Una forma semánticamente correcta y accesible de implementar esto requeriría (X)HTML mucho más simple y legible, como:
pGood Morning!/pAl incluir el atributo "título", este párrafo se puede seleccionar en jQuery usando un selector ( los selectores se explican más adelante en este artículo ) como el que se muestra en el siguiente fragmento de Javascript:
var now = new Date();if(now.getHours() = 12){ var goodDay = $('p[title="Good Day Message"]'); goodDay.text('Good Afternoon!');}Lo bueno aquí es que todo el Javascript se encuentra en un archivo de script externo y la página se representa como HTML (X) estándar, lo que significa que si no se ejecuta el Javascript, la página sigue siendo HTML (X) 100% semánticamente pura. sin problemas de Javascript. El único problema sería que por la tarde la página todavía diría “Buenos días”. Sin embargo, esto puede verse como una degradación aceptable. Armario escobero
° 3: el marcado semántico y accesible es lo primero
Es muy importante que el marcado (X)HTML esté estructurado semánticamente. (Si bien está fuera del alcance de este artículo explicar por qué, consulte los enlaces a continuación para obtener más información sobre el marcado semántico). La regla general aquí es que si el marcado de la página está estructurado semánticamente, se debe seguir que también es accesible para un amplia gama de dispositivos. Sin embargo, esto no siempre es cierto, pero es una buena regla general para comenzar.
El marcado semántico es importante para las secuencias de comandos DOM discretas porque da forma a la ruta que tomará el desarrollador para crear el efecto de secuencia de comandos DOM. El PRIMER paso para crear cualquier widget mejorado con jQuery en una página es escribir el marcado y asegurarse de que sea semántico. Una vez logrado esto, el desarrollador puede usar jQuery para interactuar con el marcado semánticamente correcto (dejando un documento (X)HTML que sea limpio y legible, y separando la capa de comportamiento).
Marcado terrible:
El siguiente fragmento muestra una lista típica de elementos y descripciones de una manera típica (y terriblemente poco semántica).
table tr tdFirst Option/td tdFirst option description/td /tr tr tdSecond Option/td tdSecond option description/td /tr/tableMal marcado:
El siguiente fragmento muestra una lista típica de elementos y descripciones de una forma más semántica. Sin embargo, el Javascript en línea está lejos de ser perfecto.
dl dtFirst Option/dt ddFirst option description/dd dtSecond Option/dt ddSecond option description/dd/dlBuen marcado:
Este fragmento muestra cómo se debe marcar la lista anterior . Cualquier interacción con Javascript se adjuntaría en la carga DOM usando jQuery, eliminando efectivamente todo el marcado de comportamiento del (X)HTML renderizado.
dl dtFirst Option/dt ddFirst option description/dd dtSecond Option/dt ddSecond option description/dd/dlEl id de “OptionList” nos permitirá apuntar a esta lista de definiciones particular en jQuery usando un selector ( más sobre esto más adelante) .
3. Comprender jQuery para secuencias de comandos DOM discretas
Esta sección explorará tres consejos y trucos invaluables para usar jQuery para implementar mejores prácticas y efectos accesibles.
Comprender los selectores: la columna vertebral de jQuery
El primer paso para una secuencia de comandos DOM discreta (al menos en jQuery y Prototype) es utilizar selectores. Los selectores pueden (sorprendentemente) seleccionar un elemento del árbol DOM para poder manipularlo de alguna manera.
Si está familiarizado con CSS, comprenderá los selectores en jQuery; son casi lo mismo y usan casi la misma sintaxis. jQuery proporciona una función de utilidad especial para seleccionar elementos. Se llama $.
Un conjunto de ejemplos muy simples de selectores jQuery:
$(document); // Activate jQuery for object$('#mydiv') // Element with ID "mydiv"$('p.first') // P tags with class first.$('p[title="Hello"]') // P tags with title "Hello"$('p[title^="H"]') // P tags title starting with HEntonces, como sugieren los comentarios de Javascript:
- $(documento); La primera opción aplicará los métodos de la biblioteca jQuery a un objeto DOM (en este caso, el objeto del documento).
- $('#mydiv') La segunda opción seleccionará cadaque tiene el
atributo establecido en "mydiv". - $('p.first') La tercera opción seleccionará todos los
etiquetas con la clase de “primero”.
- $('p[title=“Hello”]') Esta opción seleccionará de la página todos
etiquetas que tienen el título "Hola". Técnicas como esta permiten el uso de marcado (X)HTML mucho más semánticamente correcto, al mismo tiempo que facilitan las secuencias de comandos DOM necesarias para crear interacciones complejas.
- $('p[title^=“H”]') Esto permite la selección de todos los
etiquetas en la página que tienen un título que comienza con la letra H.
Estos ejemplos apenas arañan la superficie.
Casi todo lo que puedas hacer en CSS3 funcionará en jQuery, además de muchos selectores más complicados. La lista completa de selectores está bien documentada en la página de documentación de jQuery Selectors . Si te sientes súper geek, también puedes leer la especificación del selector CSS3 del W3C.
Prepararse. $(documento).listo()
Tradicionalmente, los eventos de Javascript se adjuntaban a un documento mediante un atributo "onload" en la etiqueta body de la página. Olvídate de esta práctica. Límpialo de tu mente.
jQuery nos proporciona una utilidad especial en el objeto del documento, llamada "listo", que nos permite ejecutar código SÓLO después de que el DOM haya terminado de cargarse por completo. Esta es la clave para una secuencia de comandos DOM discreta, ya que nos permite separar completamente nuestro código Javascript de nuestro marcado. Usando $(document).ready(), podemos poner en cola una serie de eventos y hacer que se ejecuten después de que se inicialice el DOM.
Esto significa que podemos crear efectos completos para nuestras páginas sin cambiar el marcado de los elementos en cuestión.
¡Hola Mundo! Por qué $(document).ready() es TAN genial
Para demostrar la belleza de esta funcionalidad, recreemos la introducción estándar a Javascript: un cuadro de alerta "Hola mundo".
El siguiente marcado muestra cómo podríamos haber ejecutado una alerta "Hola mundo" sin jQuery:
Mal marcado:
script language="javascript"alert('Hello World');/scriptBuen marcado:
Usar esta funcionalidad en jQuery es simple. El siguiente fragmento de código demuestra cómo podríamos llamar al antiguo cuadro de alerta "Hola mundo" después de que se haya cargado nuestro documento. La verdadera belleza de este marcado es que reside en un archivo Javascript externo. NO hay impacto en la página (X)HTML.
$(document).ready(function(){ alert('Hello World');});Cómo funciona
La función $(document).ready() toma una función como argumento. (En este caso, se crea una función anónima en línea, una técnica que se utiliza en toda la documentación de jQuery). La función pasada a $(document).ready() se llama después de que el DOM haya terminado de cargarse y ejecute el código dentro de la función. , en este caso, llamando a la alerta.
Creación de reglas CSS dinámicas
Un problema con muchos efectos de secuencias de comandos DOM es que a menudo requieren que ocultemos elementos del documento de la vista. Esta ocultación generalmente se logra mediante CSS. Sin embargo, esto es menos que deseable. Si el navegador de un usuario no soporta Javascript (o tiene Javascript deshabilitado), pero sí soporta CSS, entonces los elementos que ocultamos en CSS nunca serán visibles, ya que nuestras interacciones con Javascript no se habrán ejecutado.
La solución a esto viene en forma de un complemento para jQuery llamado cssRule, que nos permite usar Javascript para agregar fácilmente reglas CSS a la hoja de estilos del documento. Esto significa que podemos ocultar elementos de la página usando CSS; sin embargo, CSS SÓLO se ejecuta SI se está ejecutando Javascript.
Mal marcado:
HTML:h2This is a heading/h2pThis is some information about the heading./pCSS:p.hide-me-first{ display: none;}Suponiendo que CSS ocultará primero un párrafo con la clase "escóndeme primero" y luego Javascript lo mostrará después de alguna interacción futura del usuario, si Javascript nunca se ejecuta, el contenido nunca será visible.
Buen marcado:
HTML:h2This is a heading/h2pThis is some information about the heading./pjQuery Javascript:$(document).ready(function{ jQuery.cssRule("p.hide-me-first", "display", "none");});Usar un Javascript $(document).ready() aquí para ocultar el elemento de párrafo significa que si Javascript está deshabilitado, los párrafos nunca se ocultarán, por lo que el contenido aún será accesible. Esta es la razón clave para la creación de reglas CSS dinámicas basadas en Javascript en tiempo de ejecución.
4. Conclusión
jQuery es una biblioteca extremadamente poderosa que proporciona todas las herramientas necesarias para crear hermosas interacciones y animaciones en páginas web, al tiempo que permite al desarrollador hacerlo de una manera accesible y degradable.
Este artículo ha cubierto:
- ¿Por qué las secuencias de comandos DOM discretas son tan importantes para la accesibilidad?
- Por qué jQuery es la elección natural para implementar efectos de secuencias de comandos DOM discretos,
- Cómo funcionan los selectores de jQuery
- Cómo implementar reglas CSS discretas en jQuery.
5. Lecturas adicionales
Lectura adicional: Prácticas de jQuery y JavaScript
- Sitio web de jQuery: cómo funciona jQuery y tutoriales John Resig + Otros colaboradores Una de las verdaderas fortalezas de jQuery es la documentación proporcionada por John Resig y su equipo.
- Aprendiendo jQuery
- Tutoriales de jQuery para diseñadores
- Las siete reglas de la mejora pragmática progresiva
- Una lista aparte: separación de comportamiento Jeremy Keith Una explicación más profunda de la idea de separar Javascript en una capa "conductual" discreta.
Simon Willison Un gran conjunto de diapositivas sobre el uso discreto de jQuery. Además, termina con un maravilloso resumen de los métodos y el uso de jQuery.
Lectura adicional: marcado semántico
- Wikipedia: Definición de semántica Vale la pena entender la idea de semántica en general antes de intentar entender el concepto de marcado semántico.
- ¿A quién le importa el marcado semántico? Dave Shea Dave Shea explora los beneficios del marcado semántico y
- Los estándares no necesariamente tienen nada que ver con ser semánticamente correcto Jason Kottke Kottke analiza las diferencias entre el cumplimiento de estándares y el marcado semántico.
- Especificación del selector CSS3 W3C La especificación completa para selectores CSS3 (la mayoría de los cuales también funcionan perfectamente en selectores jQuery). Esta es una lectura excelente para cualquiera a quien le guste mantenerse actualizado sobre las mejores prácticas y el cumplimiento de estándares.
Explora más en
- Codificación
- javascript
- jQuery
Tal vez te puede interesar:
- Cómo mantener organizado su flujo de trabajo de codificación
- Cómo crear una aplicación de codificación geográfica en Vue.js usando Mapbox
Codificación jQuery y JavaScript: ejemplos y mejores prácticas
1. ¿Por qué jQuery?2. ¿Secuencias de comandos DOM discretas?3. Comprender jQuery para secuencias de comandos DOM discretas4. Conclusión5. Lecturas adiciona
programar
es
https://aprendeprogramando.es/static/images/programar-codificacion-jquery-y-javascript-ejemplos-y-mejores-practicas-756-0.jpg
2024-12-02
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente