Los 5 errores más comunes que cometen los desarrolladores de HTML5: una guía para principiantes

Han pasado más de 20 años desde que Tim Berners-Lee y Robert Cailliau especificaron HTML, que se convirtió en el lenguaje de marcado estándar utilizado para construir Internet. Desde entonces, la comunidad de desarrollo de HTML ha rogado por mejoras en este lenguaje, pero este grito fue escuchado principalmente por los desarrolladores de navegadores web que intentaron aliviar los problemas de HTML de sus colegas. Desafortunadamente, esto generó aún más problemas que causaron muchos problemas de compatibilidad entre navegadores y la duplicación del trabajo de desarrollo. Durante estos 20 años, HTML se actualizó 4 veces, mientras que la mayoría de los navegadores obtuvieron números de dos dígitos de actualizaciones importantes además de numerosos parches pequeños.

Se suponía que HTML5 finalmente resolvería nuestros problemas y se convertiría en un estándar para gobernarlos a todos (navegadores) . Esta fue probablemente una de las tecnologías más esperadas desde la creación de la World Wide Web. ¿Ha sucedido? ¿Finalmente obtuvimos un lenguaje de marcado que sea totalmente compatible con todos los navegadores y que funcione en todas las plataformas móviles y de escritorio, brindándonos todas las características que estábamos solicitando? ¡No sé! Hace solo unos días (16 de septiembre de 2014) recibimos una nueva llamada de revisión por parte del W3C, por lo que la especificación HTML5 aún está incompleta.

Con suerte, cuando la especificación esté finalizada algún día, los navegadores no tendrán un código obsoleto significativo e implementarán de manera fácil y adecuada excelentes características como Web Workers , múltiples elementos de audio y video sincronizados y otros componentes de HTML5 que hemos necesitado para un largo tiempo.

Sin embargo, tenemos miles de empresas que han basado sus negocios en HTML5 y lo están haciendo muy bien. También hay muchas aplicaciones y juegos geniales basados ​​en HTML5 utilizados por millones de personas, por lo que el éxito es obviamente posible y HTML5 se usa, y se seguirá usando, independientemente del estado de su especificación.

Sin embargo, la receta que mencioné puede explotar fácilmente en nuestras narices y, por lo tanto, he enfatizado algunos de los errores más básicos de HTML5 que se pueden evitar. La mayoría de los errores enumerados a continuación son consecuencia de la implementación incompleta o faltante de ciertos elementos de HTML5 en diferentes navegadores, y esperamos que en un futuro cercano se vuelvan obsoletos. Hasta que esto suceda, sugiero leer la lista y tenerla en cuenta al crear su próxima aplicación HTML5, ya sea que sea un principiante de HTML5 o un veterano experimentado.

Error común #1: Confiar en el almacenamiento local

¡Déjalos comer pastel! Este enfoque ha sido una carga para los desarrolladores durante años. Debido al temor razonablemente sensible a las violaciones de seguridad y la protección de las computadoras, en la "edad oscura" cuando muchos temían Internet, las aplicaciones web podían dejar cantidades irrazonablemente pequeñas de datos en las computadoras. Cierto, había cosas como los datos de usuario que nos dieron los "grandes maestros de navegador de Microsoft(r)", o cosas como Objetos compartidos locales en Flash, pero esto estaba lejos de ser perfecto.

Por lo tanto, es razonable que una de las primeras características básicas de HTML5 adoptadas por los desarrolladores fuera el almacenamiento web. Sin embargo, tenga en cuenta que el almacenamiento web no es seguro. Es mejor que usar cookies porque no se transmitirá por cable, pero no está encriptado. Definitivamente, nunca debe almacenar tokens de seguridad allí. Su política de seguridad nunca debe depender de los datos almacenados en Web Storage, ya que un usuario malintencionado puede modificar fácilmente sus valores de localStorage y sessionStorage en cualquier momento.

Para obtener más información sobre el almacenamiento web y cómo usarlo, sugiero leer esta publicación.

Error común #2: Esperar compatibilidad entre navegadores

HTML5 es mucho más que un simple lenguaje de marcado. Ha madurado lo suficiente como para combinar el comportamiento junto con el diseño, y debe considerar HTML5 como HTML extendido con JavaScript avanzado en la parte superior. Si observa todos los problemas que tuvimos antes solo para hacer que una combinación estática de HTML + CSS se vea idéntica en todos los navegadores, es justo suponer que una mayor complejidad significará más esfuerzo para garantizar la compatibilidad entre navegadores.

La interpretación de HTML5 en diferentes navegadores está lejos de ser idéntica, al igual que sucedió con JavaScript. Todos los jugadores principales en la guerra de los navegadores echaron una mano en la especificación de HTML5, por lo que es justo suponer que las desviaciones entre los navegadores deberían reducirse con el tiempo. Pero incluso ahora, algunos navegadores decidieron ignorar por completo ciertos elementos de HTML5, lo que hace que sea muy difícil seguir una línea de base y un conjunto común de características. Si añadimos a la ecuación más dispositivos y plataformas conectados a Internet, la situación se complica aún más, causando problemas con HTML5.

Por ejemplo, las animaciones web son una gran característica que solo es compatible con Chrome y Opera, mientras que Internet Explorer ignora por completo la función de notificación web que permite alertar al usuario fuera del contexto de una página web de una ocurrencia, como la entrega de un correo electrónico.

Para obtener más información sobre las características de HTML5 y la compatibilidad con diferentes navegadores, consulte la guía de HTML5 en www.caniuse.com.

Entonces, el hecho es que, aunque HTML5 es nuevo y está bien especificado, deberíamos esperar una gran cantidad de problemas de compatibilidad entre navegadores y planificarlos con anticipación. Hay demasiados vacíos que los navegadores deben llenar, y es justo esperar que no puedan superar bien todas las diferencias entre plataformas.

Error común n.º 3: asumir un alto rendimiento

Independientemente del hecho de que HTML5 todavía está evolucionando, es una tecnología muy poderosa que tiene muchas ventajas sobre las plataformas alternativas utilizadas antes de su existencia. Pero un gran poder conlleva una gran responsabilidad , especialmente para los principiantes de HTML5. HTML5 ha sido adoptado por todos los principales navegadores en plataformas móviles y de escritorio. Teniendo esto en cuenta, muchos equipos de desarrollo eligen HTML5 como su plataforma preferida, con la esperanza de que sus aplicaciones se ejecuten por igual en todos los navegadores. Sin embargo, asumir un rendimiento razonable en las plataformas de escritorio y móviles solo porque la especificación HTML5 lo dice, no es sensato. Muchas empresas (¡khm! ¡Facebook khm!) apostaron por HTML5 para su plataforma móvil y sufrieron que HTML5 no funcionaba como habían planeado.

Una vez más, sin embargo, hay algunas grandes empresas que dependen en gran medida de HTML5. Solo mire los numerosos estudios de desarrollo de juegos en línea que están haciendo cosas increíbles mientras llevan HTML5 y los navegadores al límite. Obviamente, siempre que esté al tanto de los problemas de rendimiento y esté solucionándolos, puede estar en un gran lugar para crear aplicaciones increíbles.

Error común #4: Accesibilidad limitada

Web se ha convertido en una parte muy importante de nuestras vidas. Hacer que las aplicaciones sean accesibles para las personas que dependen de la tecnología de asistencia es un tema importante que a menudo se deja de lado en el desarrollo de software. HTML5 intenta superar esto implementando algunas de las características de accesibilidad avanzadas. Muchos desarrolladores aceptaron que esto es suficiente y realmente no han dedicado tiempo a implementar opciones de accesibilidad adicionales en sus aplicaciones. Desafortunadamente, en esta etapa, HTML5 tiene problemas que le impiden hacer que sus aplicaciones estén disponibles para todos y debe esperar invertir más tiempo si desea incluir una gama más amplia de usuarios.

Puede consultar este lugar para obtener más información sobre la accesibilidad en HTML5 y el estado actual de las funciones de accesibilidad más comunes.

Error común n.º 5: no usar las mejoras de HTML5

HTML5 ha ampliado significativamente el conjunto estándar de etiquetas HTML/XHTML. Además de las nuevas etiquetas, obtuvimos bastantes reglas y comportamientos nuevos. Demasiados desarrolladores seleccionaron solo algunas mejoras y se han saltado algunas de las nuevas y geniales características de HTML5.

Una de las mejores cosas de HTML5 es la validación del lado del cliente. Esta función fue probablemente uno de los primeros elementos de HTML5 que adoptaron los navegadores web. Pero, desafortunadamente, puede encontrar más de unos pocos desarrolladores que agregan el atributo novalidate a sus formularios de forma predeterminada. Las razones para hacer esto son razonables y estoy bastante seguro de que tendremos un debate al respecto. Debido a la compatibilidad con versiones anteriores, muchas aplicaciones implementaron validadores de JavaScript personalizados y tener una validación lista para usar realizada por los navegadores además de eso es inconveniente. Sin embargo, no es demasiado difícil asegurar que dos métodos de validación no colisionarán, y la estandarización de la validación del usuario garantizará una experiencia común mientras ayuda a resolver los problemas de accesibilidad que mencioné anteriormente.

Otra gran característica está relacionada con la forma en que se maneja la entrada del usuario en HTML5. Antes de que llegara HTML5, teníamos que mantener todos los campos de nuestro formulario dentro de la etiqueta <form></form> . Los nuevos atributos de formulario hacen que sea perfectamente válido hacer algo como esto:

 <form action="demo_form.asp"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> </form> Last name: <input type="text" name="lname" form="form1">

Incluso si lname no está dentro del formulario, se publicará junto con fname .

Para obtener más información sobre los nuevos atributos y mejoras de los formularios, puede consultar la Red de desarrolladores de Mozilla.

Envolver

Entiendo que los desarrolladores web son daños colaterales en la guerra de los navegadores, ya que muchos de los errores anteriores son una consecuencia directa de la implementación problemática de HTML5 en diferentes navegadores. Sin embargo, sigue siendo crucial que evitemos los problemas comunes de HTML5 y dediquemos algo de tiempo a comprender las nuevas funciones de HTML5. Una vez que tengamos todo bajo control, nuestras aplicaciones utilizarán grandes mejoras nuevas y llevarán la web al siguiente nivel.