5 propiedades de HTML5 que necesitas saber

HTML5 nos ha traído una serie de funcionalidades fenomenales, algunas de las cuales son bastante sencillas de implementar. Dentro de éstas, destacamos las siguientes cinco funciones las cuales debes conocer.

La nueva versión de HTML ya ha estado presente en el mundo del desarrollo web desde hace un tiempo. Su penetración ha sido tal, que actualmente cuenta con un alto nivel de aceptación, logrando que su uso se haya convertido en algo constante por parte de los desarrolladores y diseñadores que tratan de aprovechar sus beneficios y distintas funcionalidades suplementarias.

HTML5 introdujo un montón de nuevos y emocionantes procedimientos de aplicación, tanto para desarrollo de móvil como para escritorio, algunos de éstos utilizando JavaScript como complemento, mientras que otros yacen en su código nativo. En este artículo explicaremos algunas de las funciones, características y propiedades de HTML5 que te ayudarán a mejorar tus aplicaciones web y que te van a ahorrar mucho tiempo.

Obtención previa del DNS

La resolución de los nombres de dominio es una de las razones por las que un sitio web tiende a cargar lento. En lo que respecta a este tema, los navegadores modernos han estado implementando una serie de soluciones, las cuales les permiten anticiparse al problema y hacer que luzcan un poco más inteligentes ante la situación.

Actualmente, un navegador trata de resolver el nombre del dominio para después guardarlo en cache, todo esto antes de que el usuario busque utilizar cualquier enlace de la página web. Ha esta práctica comúnmente se le conoce con el término de prefetch, es decir obtener datos de manera previa.

Con la función dns-prefetch de HTML5, puedes controlar manualmente esta operación, indicándole al navegador los nombres de dominio que debe resolver.

<link rel="dns-prefetch" href="https://www.lawebera.com">
<link rel="dns-prefetch" href="http://www.jquery.com">
<link rel="dns-prefetch" href="http://www.google-analytics.com">

Obtención previa de enlaces

La funcionalidad de obtención previa de enlaces prefetch, permite a los desarrolladores especificar páginas, imágenes u otro tipo de elemento en archivo, que se desee precargar de manera sigilosa una vez que la carga de la página se ha completado. Por ejemplo, si quisiéramos cargar la foto de perfil del primer resultado que aparece en la búsqueda de usuarios, podemos añadir un link a nuestro código de la siguiente manera:

<link rel="prefetch" href="http://nuestrositiohostdeimagenes.es/folder/perfil_imagen_1.png" />

Otra función de la cual también podemos hacer uso para lograr un despliegue de elementos más rápido, es prerender. Con su implementación, los elementos se obtendrán, interpretarán y cargarán en un segundo plano, sin afectar el flujo normal de la página, pero acelerando en gran medida el despliegue de información cuando el usuario haga la llamada los datos precargados.

Por ejemplo, si tenemos un sitio donde manejamos alguna clase de paginación para nuestros artículos, es muy probable que sepamos que dirección tendrá la página a la que el usuario será dirigido una vez que de clic sobre el enlace “Siguiente”. Si es así, podemos utilizar un link con la funcionalidad prerender y así acelerar la carga de datos una vez que el cliente decida ingresar.

<link rel="prerender" href="http://lawebera.es/articulos/siguiente-pagina.html" />

Descargas

El atributo download de HTML5 permite a los desarrolladores crear enlaces que forcen la descarga de un archivo en vez de redirigir a otra página. Ya no es necesario hacer esta funcionalidad del lado servidor, basta con establecer un código como el siguiente:

<a href="archivo_pdf.php?id=333" download="archivo_manual.pdf">Descagar Manual (pdf)</a>

Expresiones regulares

Gracias a esta nueva funcionalidad que nos trae HTML5, ya no será necesario recurrir a lenguajes como JavaScript en el front end o Perl en el back end, para validar datos mediante expresiones regulares. Si deseas verificar que el usuario mandó información con un formato correcto para cada uno de los inputs que componen tu formulario, basta con utilizar el atributo pattern, el cual contendrá como valor la expresión regular ante la cual se comparará el valor introducido.

<input type="email" pattern="[^ @]*@[^ @]*" value="">

Elemento datalist

El elemento datalist es uno de esas pequeñas grandes implementaciones con las que cuenta HTML5. Gracias a este elemento, ya no será necesario utilizar jQuery o algún otro framework de JavaScript, en conjunto con cierto código en el lado servidor, para implementar la funcionalidad de autocomplemento en los inputs de búsqueda o de llenado de data en formularios, la cual comúnmente se dispara cuando el usuario ingresa una letra.

Si por ejemplo tuviéramos un input en donde el usuario tiene que incluir su país de origen, podemos agregar la lista mediante el elemento datalist, la cual le de al usuario ciertas sugerencias de llenado o limitando únicamente a los países que se aceptan para registro, aunque para ello podría ser mejor utilizar un elemento tipo select.

<form action="formulario_pais.php" method="post">
    <input list="pais" name="pais" >
    <datalist id="pais">
        <option value="Argentina">
        <option value="Chile">
        <option value="Colombia">
        <option value="España">
        <option value="Mexico">
        <option value="Venezuela">
    </datalist>
    <input type="submit" />
</form>

Conclusión

Como se pudo leer, son cinco funcionalidades bastantes sencillas de aplicar, las cuales pueden llegar a servir bastante y ser muy relevantes al momento de desarrollar. Espero que esto les ayude a ahorrar tiempo y les permita agilizar su codificación en proyectos venideros.