Buenas prácticas de desarrollo web que deberías tener presente💻 📓 ➡️parte 1 HTML
Nuestro interés es generar experiencias agradables a los clientes, por eso, queremos hablarte de las buenas prácticas de desarrollo en el mundo web.
Para ello creamos un conjunto de estándares para la implementación de nuestras aplicaciones web … ¿Te gustaría saber cuáles son y cómo hacemos para medir la correcta implementación de las mismas? Si tu respuesta es afirmativa, te animamos a que nos acompañes en esta serie de artículos que darán respuesta a dicha pregunta.
Se debe evitar el uso de “div” y en su lugar emplear etiquetas más dicientes en HTML5
¡Así como lees!, el uso de “div” para todos los escenarios resulta en un sitio web poco semántico. Por dar algunos ejemplos, supongamos que vas a crear la estructura inicial de una página web y lo implementas en la siguiente forma:
Aparentemente todo anda bien, pero realmente un sitio semántico web emplearía las etiqueta <header>, <main> y <footer> resultando lo siguiente:
Esto resultará en un mejor manejo de estilos, semántica y se adaptará de buena forma a los lectores de pantalla.
Otro ejemplo es a la hora de definir el contenedor de nuestras imágenes:
Esta forma resulta algo de HTML4, pero en HTML5 tenemos etiquetas más semánticas como <figure>; por lo tanto, una buena práctica sería la siguiente:
Esto no solo pasa para estas etiquetas, existen muchas que podrías utilizar en lugar de los mismos “div” de toda la vida. En la página de Mozilla para desarrolladores hace un muy buen resumen de las mismas.
Así que la próxima vez que estés construyendo un sitio web, piénsalo dos veces antes de usar un “div”. Puedes encontrar más etiquetas semánticas el siguiente enlace.
Los elementos tipo formulario deben tener la etiqueta “autocomplete”
¿Cuántas veces has ingresado a un sitio web y te piden llenar un formulario de inscripción largo y para colmo sin autocompletado? 😐. Esto suele suceder por que no se ha seleccionado el atributo “autocomplete” para este elemento (no se debe hacer con información sensible).
Existen varios elementos de autocompletado, puedes consultarlos aquí.
Los elementos de selección deben aprovechar las bondades de los “datalist”
Cuando hacemos elementos de selección de datos, a la vez debemos permitir la búsqueda en medio de la lista. En ocasiones utilizamos un select y adicionamos código en JavaScript para habilitar la búsqueda desde el selector. Sin embargo, el uso de un input atado a un datalist resulta una implementación bastante simple
No utilices estilos en línea de código
Los “inline styles”, consisten en ubicar estilos en las líneas de código de HTML, pero esto es invadir las responsabilidades de la plantilla de estilos; lo que afectará la especificidad, siendo más importantes que los estilos asignados por una clase, por un id o por una etiqueta. Debido a esto, es una práctica que deseamos evitar.
<h1 style="color: blue;">Hello World!</h1> <!—No cumple -->Las páginas web no deben tener rutas absolutas
Se considera una buena práctica utilizar URL’s relativas en las páginas web para evitar tener que actualizar las direcciones si cambia la dirección web en uso. Además, si se pierden algunas URL absolutas en dicho proceso, afectará la experiencia del usuario.
Ejemplo de código incompatible
<img src = "http://www.myserver.com/smiley.gif" alt = "Cara sonriente"/>Solución compatible
<img src = "smiley.gif" alt = "Carita sonriente" />Implementa “Lazy Loading”
La carga perezosa (o por su nombre en inglés lazy loading) nos permite cargar nuestros artefactos únicamente cuando son necesarios. Esto posibilita que una imagen que aun no es visible por el usuario, solo se cargue cuando el usuario navegue en la página hasta donde deba aparecer.
Tal vez pensarás que te vamos a recomendar una librería para implementar lazy loading, pero la verdad es que no 😲. Esto se puede utilizar de la siguiente forma :
El atributo loading con valor “lazy” se encargará de hacer la carga perezosa de nuestros contenidos. ¿Qué tanto impacta en nuestros sitios el uso de la carga perezosa? ¡Veamos!
En el primer escenario nos arrojó 3960 ms para desarrollar la primera carga; en el segundo escenario, al emplear carga perezosa, se demoró 12 veces menos (311 ms). Te dejo a continuación los dos código para que lo compruebes en tu propia máquina (no lazy, lazy).
Sin embargo, no todos los exploradores lo admiten; deberás asegurarte que en tu contexto esté funcional (navegadores compatibles). En la parte 3 de esta serie de artículos explicaremos cómo implementar la misma estrategia para los navegadores no compatibles.
Reduce el tamaño de las imágenes hasta donde sea posible
Minificar el tamaño de las imágenes resulta en una carga más rápida. Por ejemplo, si tienes una imagen que ocupará 500px en las pantallas xl no tiene sentido que la imagen tenga una resolución de 1920x1080px. Por otro lado existen herramientas que eliminan los metadatos de las imágenes (estos suelen contener información no relevante para la experiencia digital tales como fecha en la que se tomó, dispositivo, etc). El estándar es que un buen tamaño para las imágenes debería ser menor o igual a 200kb.
Usa buenas prácticas de accesibilidad en HTML
Este estándar no solo beneficia a aquellas personas que tengan circunstancias diferenciadas. También mejoran la calidad de nuestro código, veamos un ejemplo de ello :
Según la W3C y la WAI todas las imágenes deben tener el atributo alt el cual nos permite describir el contenido de las mismas.
Por ejemplo; para el caso anterior, si el atributo “alt” no posee la descripción y la imagen no carga desde el servidor, se vería lo siguiente
Esto no es diciente para ningún usuario, en cambio con la propiedad alt se ve esto:
De forma que la persona se puede imaginar que en ese espacio estaba el dibujo de una casa. Esto es descriptivo para todos los usuarios de la experiencia digital.
Al igual que esta norma existen muchas más referentes a este tema de accesibilidad puedes consultar algunas en los siguientes links :
- https://developer.mozilla.org/es/docs/Learn/Accessibility/HTML
- https://www.w3.org/WAI/standards-guidelines/es
- https://danielherresan.medium.com/accesibilidad-en-el-mundo-digital-m%C3%A1s-que-un-concepto-un-deber-151e8b841898
También te animo a desarrollar el siguiente test para conocer qué tanto sabes medir la accesibilidad en las aplicaciones web.
Con esto damos fin al primer artículo. En los siguientes hablaremos de buenas prácticas en el manejo de estilos (parte2), en JavaScript (parte3), en Angular (parte4) y cómo podemos medir las buenas prácticas en nuestros desarrollos de forma automática (parte5).
¿Qué tal te pareció el artículo? ¿Te sabías todos estos estándares? Si conoces algún otro por favor escríbelo en la caja de comentarios. ¡¡Regálanos +50 aplausos 👏!!, nos dará muchos ánimos para seguir con esta serie de artículos.
