Bit - loader

Cómo aprovechar al máximo el estándar HTML5


Netmind - Cómo aprovechar al máximo el estándar HTML5    Artículo | HTML5 Development
| 23/02/18

El nuevo (o ya no tan nuevo) estándar HTML5 ofrece un montón de posibilidades y formas de programar sitios y aplicaciones Web más allá de lo que era posible de forma nativa hasta hace bien poco: Solo hay que recordar que los vídeos y la publicidad, omnipresentes en estos momentos, se resolvían con elementos externos (plug-ins), vinculados a las etiquetas <object> y/o <embed>.

Pero todo poder implica una responsabilidad. En este caso, la de usar algunos principios bien establecidos que nos ayudarán a implementar bien estas tecnologías: Algo que pueda mantenerse y ser escalable y sobre todo, visible en cualquier dispositivo.

  • Lo primero es darse cuenta de que HTML5 es la última forma del lenguaje, ya que ofrece nuevos elementos y conjuntos de tipos que los navegadores deben admitir. Las tecnologías de “fallback” permiten simular ese comportamiento en navegadores antiguos, y una consulta al sitio nos puede indicar cómo resolver estos problemas y cuál es el nivel de soporte de una característica en los navegadores.

 

  • HTML5 viene con etiquetas descriptivas. HTML4 tenía las etiquetas <head> y <body> para establecer la estructura básica del documento. HTML5 va más allá. Elementos como el <header>, <section>, <aside> y <article> ofrecen un buen contexto para el lenguaje de marcado, por lo que es beneficioso para los navegadores y los motores de búsqueda pueden rastrear mejor los sitios web. Otras opciones interesantes son las etiquetas, <details>, <figcaption>, <figure>, <footer>, <main>, <mark>, <nav>, <summary> y <time>.

 

Cómo aprovechar al máximo el estándar HTML5 0

 

  • Las etiquetas que implican estilo (presentación) se consideran deprecadas. Para obtener los mejores resultados, todo el diseño debe realizarse en CSS para mantener las cosas limpias (recordar el principio de Separación de Responsabilidades).

 

  • Los nuevos tipos de dispositivos presentan nuevos mecanismos de entrada (no hay ratón en el móvil, por ejemplo). Por tanto disponemos de nuevos elementos que definen la clase de entrada o validación que nos interesa. Este es el caso de las entradas numéricas, de fechas, de e-mails o de sitios Web. Hasta un total de 13 nuevos tipos de <input> define el estándar.

 

  • Además, muchos de ellos llevan API’s internas que permiten extender la validación, para hacerla más coherente. No solo podemos validar el contenido del usuario mediante expresiones regulares: el API CustomValidity permite sencillamente definir con precisión de valores admitimos como correctos antes de enviar los datos al servidor.

 

  • Fue un gran anuncio cuando Apple eliminó las capacidades de Adobe Flash de su navegador Safari Mobile. No había ninguna alternativa a Flash para que los desarrolladores mostraran video o agregaran medios de audio en sus sitios web. HTML5 ahora incluye elementos multimedia (<audio>, <video>) que facilitan a los desarrolladores incluir video o audio en un sitio web, y que funciona en todos los dispositivos. Y gran parte de lo que se hacía mediante Flash está siendo migrado rápidamente al elemento <canvas> (basta con echar un vistazo al código fuente de cualquier periódico popular para verlo).

 

  • Se debe declarar un DOCTYPE. La declaración debe ser la primera línea en el documento HTML. Debería usarse <!doctype HTML5> y eso activará el modo estándar en la mayoría de los navegadores. HTML5 fue creado para ser compatible con versiones anteriores, por lo que no es necesario realizar declaraciones de atributos XML más antiguas; esto simplemente desordena el código y no es necesario.

 

  • Es importante no hacer todo desde cero. Cuando sea posible, haz uso de las bibliotecas y diseños existentes que se acercan a lo que se desea para un producto terminado. Una gran práctica de diseño es crear una carpeta de diseños que nos guste. A la hora de escoger un “framework” la oferta es muy amplia, pero eso es motivo de otro artículo.

 

Cómo aprovechar al máximo el estándar HTML5 1

 

Por último aquí hay una lista de prácticas de codificación para conseguir los mejores resultados:

  • Siempre planear los proyectos en papel antes de comenzar (a veces conocido como storyboard). Aquí es donde se pueden solucionar problemas rápidamente. Sería más difícil y requeriría más tiempo más tarde, si tienes que hacerlo mientras programas. Una vez que hayas planeado todo el flujo de trabajo, esencialmente, ya has construido el sitio. Todo lo que tienes que hacer es transferirlo al código. Cosa de nada, vamos…(*)

 

  • Cuando escribas código, asegúrate de comentar las partes difíciles, y crear una lista de verificación donde se detallen todos los pasos e incluya capturas de pantalla, si es necesario. Esto hará que sea más fácil para quienes te siguen.

 

  • Siempre prueba tu código. Nunca asumas que no hay problemas cuando haya terminado. Pocas cosas son peores que descubrir, después de terminado, que existen errores que podrían haberse resuelto con pruebas. Además las pruebas actuales deben incluir los móviles y la adaptabilidad a distintos dispositivos y “factores de forma”.


Entradas relacionadas

Cursos relacionados
Nuestro sitio utiliza cookies para análisis. Si no estás seguro de ello, echa un vistazo a nuestra política de privacidad.