5 cosas que no sabías que podrías hacer con HTML

Sep 10, 2025

Cómo

[dieciséis]

Vamos a enfrentarlo, el desarrollo web puede convertirse fácilmente en un desastre. HTML, CSS y Javascript Todos han evolucionado a partir de orígenes humildes durante muchos años, y son en gran medida equívocos en términos de cómo debe usarlos. Como resultado, es demasiado fácil construir un desastre inmancial. Adherirse a las normas y aprovechar las últimas mejoras en las especificaciones no garantiza un buen código, pero ciertamente puede ayudar.

En cualquier tipo de desarrollo de software, la modularidad es rey cuando se trata de construir un código mantenible. Como resultado, querrá mantener un ojo cercano en los componentes web. El soporte del navegador no es genial, pero si te agarras un poco relleno de poli , puede adelantarse a la curva y comenzar a aprovechar los elementos personalizados para estructurar su código de inmediato. Este estilo de desarrollo es el futuro, por lo que vale la pena familiarizarse con él ahora.

Keep code streamlined for clearer understanding

HTML5 introdujo una serie de nuevos elementos (y en desuso varias) para ayudar a fomentar las buenas prácticas de codificación. Es posible que haya oído hablar de Markup semántico, que se refiere al uso de los elementos descriptivos de HTML5, como & lt; article & gt; y & lt; figura & gt; para indicar el tipo de contenido que contienen.

Esto realmente puede ayudar con la limpieza de su código, ya que los elementos HTML identificarán inmediatamente, por ejemplo, en qué partes representan la barra de menú, sus secciones de contenido, el pie de página y así sucesivamente.

También ayudará si aprovecha los últimos estándares de JavaScript. JavaScript también puede volverse desordenado, pero es mucho más fácil trabajar en los últimos años. La sintaxis ES6 es ampliamente compatible con los navegadores, y las funciones como las funciones de flecha y las clases pueden hacer que su vida sea mucho más fácil, pero muchos desarrolladores son desconocidos o desconfían de usarlos.

Continuando con el tema del desarrollo modular, Javascript también es compatible ahora con la carga del módulo, lo que puede ayudarlo a administrar sus dependencias limpiamente.

01. Reconocer y sintetizar el habla.

Esto alguna vez habría sido funciones complejas que requieren software especializado, pero ahora se están construyendo directamente en los navegadores. La API del habla web tiene componentes que admiten texto a voz y habla a texto. Este último de estos usará un servicio en línea (Chrome usa la API de Google Cloud Speech) o el servicio de reconocimiento de voz nativo del dispositivo. Espere ver que esto se usa ampliamente en dispositivos móviles en el futuro.

02. Muestra un selector de color

Trivial Como puede sonar, este es un gran ejemplo de cómo HTML5 está simplificando las tareas comunes que antes habrían requerido la codificación personalizada de un componente UI bastante complejo. & lt; type = "Color" & gt; mostrará un selector de color visual al hacer clic, utilizando un selector de color nativo del dispositivo. Esto podría ser particularmente útil con el lienzo HTML. Es ampliamente apoyado con la excepción de Safari en Mobile.

03. Recolore el navegador ui

Esto puede ofrecer un buen toque estético en plataformas móviles. & lt; meta name = "theme-color" content = "# ffffff" / & gt; está diseñado para instruir al navegador que recoloe la barra de herramientas al ver su sitio. Desafortunadamente, es un poco no estandarizado, por lo que mientras "color del tema" trabaja con Chrome, Firefox y Opera, en iOS que necesitarás "Apple-Mobile-Web-App-Status-Bar-Bar-Bar-Bar-Bar (Solo funciona en modo de pantalla completa).

04. Diferentes imágenes para diferentes pantallas.

Esperemos que ya esté implementando un diseño receptivo, en cuyo caso sus imágenes cambiarán de tamaño para adaptarse a la ventana. Esto no es perfecto, ya que estará obligando al usuario para descargar la versión más grande de la imagen, lo que le da la cámara. Ingrese el HTML5 & lt; foto & gt; Elemento, que le permite especificar diferentes imágenes que se mostrarán según la resolución de la pantalla, se está viendo el sitio.

05. Vibrar tu teléfono

La API de vibración con nombre inequívocamente expone una función única, vibrará (), que hará exactamente lo que dice en los dispositivos que lo admiten. La función toma una lista que describe un patrón de vibración como su argumento. Trabajará en Chrome, Firefox y Opera, aunque estás fuera de la suerte en el borde o el safari. Se informa que algunos anuncios están usando esto para atraer la atención del usuario, por lo que el jurado está por salir de si en realidad es una buena idea.

Este artículo apareció originalmente en Diseñador web Número 266. Cómpralo aquí .

Artículos relacionados:

Los 10 mejores diseños de plantillas HTML5.
20 plantillas HTML para dar a sus proyectos de diseño web una cabeza
Clave su HTML con esta hoja de trucos

5 cosas que no sabías que podrías hacer con HTML

01. Reconocer y sintetizar el habla.

02. Muestra un selector de color

03. Recolore el navegador ui

04. Diferentes imágenes para diferentes pantallas.

05. Vibrar tu teléfono

Cómo - Artículos más populares

Comienza con pintor de llama

Comienza con Grav CMS

Cómo crear una página cómica

8 Reglas de oro de diseño móvil

Agregue animaciones de UI a su sitio

Scatter Trees con rayos V

Diseñe un sitio receptivo con dimensionamiento basado en EM

Cómo combinar los conjuntos de acuarelas del pintor

Categorías