Actualmente, dominar los lenguajes de marcado como HTML y CSS es fundamental si te orientas hacia el desarrollo y diseño web. Estos lenguajes son claves para transformar los diseños en experiencias interactivas. Si estás buscando Cómo aprender HTML5: Recomendaciones y trucos es porque no eres un principiante en el tema. Sin embargo, si este fuera tu caso te aconsejamos que primero aprendas HTML y CSS, para luego iniciarte en HTML5 con el conocimiento básico necesario.
Contenidos de la página
¿En qué se diferencia HTML normal del HTML5?
HTML5 es una versión de HTML que facilita las tareas para maquetar sitios web por medio de un conjunto de nuevas etiquetas y api´s incorporados que ofrecen muchísimas mejoras respecto a la versión anterior. Entre las diferencias que podemos destacar está:
- Las etiquetas y los atributos se pueden escribir en mayúsculas o minúsculas o ambos.
- Ya no es obligada la sintaxis de las etiquetas html o body para que sea validado un documento en html5.
- El uso de comillas no es necesario para darle valor a los atributos, a menos que se tengan que colocar varios valores delimitados por espacios.
Mejoras que integró HTML5
- Manipulación de elementos multimedia a través de las etiquetas <audio>, <video>, <canvas> y <svg>.
- Nuevos tipos de campos de texto para los formularios como time, number, email, range, color entre otros.
- Nuevas etiquetas para optimizar la sintaxis de un documento: <header>, <section>, <nav>, <article>, <footer>, <aside>.
- Integración de nuevas Apis, que por medio de JavaScript permite transformar en tiempo real videos e imágenes, acceder a la cámara o el micrófono, al GPS bases de datos en el explorador web respuestas a eventos táctiles, entre otros.
Recomendaciones y trucos para HTML5
Uno de los aspectos fuertes de HTML5 es su sintaxis mejorada, pues la nueva incorporación de etiquetas permite estructurar el código de una forma más simple y prolija. Entre tantos nuevos atributos te recomendamos altamente la etiqueta data-XXXX por su gran usabilidad ya que permite evitar la utilización de múltiples clases. Sirve para guardar información adicional de los elementos HTML.
Ejemplo:
<a href="#elenlace" target="_white" data-rel="4">ENLACE</a>
Este atributo es muy manejable y va servir para ayudar con los scripts personalizados en JavaScript para conseguir y manipular las diferentes etiquetas.
Trucos en HTML5
Uno de los atributos más usados y útiles es el placeholder, este elemento es básico para trabajar con formularios sirve para mostrar un mensaje de explicación en cualquier campo de texto.
Su sintaxis quedaría como este ejemplo:
<input type="text" placeholder="Introduzca el nombre aquí" />
Atributos para capturar eventos
Los eventos funcionan parecidos a los atributos, se usan para activar los códigos JavaScript cuando surja un evento determinado. Algunos de estos atributos de control de eventos son: onautocomplete, onblur, oncancel, onclick, ondblclick, onclose, ondrag, ondragend, ondragexit, ondragover, ondragstart, ondrop, onemptied, onended, onerror, oninput, oninvalid.
CANVAS la etiqueta para dibujar y más
Este elemento te proporciona una sencilla y potente forma de crear gráficos usando JavaScript. Además, es útil para hacer composiciones fotográficas, animaciones simples o hasta juegos interactivos. Esta etiqueta usa los atributos width y height, incluyendo los atributos básicos de HTML5 como id, class, name y otros.
<canvas id="tucanvas" width="80" height="80"></canvas>
Fácilmente se puede ubicar esta etiqueta en el DOM usando el método getElementById ( ), la sintaxis es así:
var tucanvas = document.getElementById ("tucanvas");
Un ejemplo de como sería la implementación de este elemento en HTML5 sería así:
<!DOCTYPE HTML>
<html>
<head>
<style>
#tucanvas{border:2px solid blue;}
</style>
</head>
<body>
<canvas id="tucanvas" width="80" height="80"></canvas>
</body>
</html>
Debido al almacenamiento local se puede hacer que los navegadores más sofisticados conserven lo que hemos introducido por teclado. Localstorage es una propiedad que permite almacenar indefinidamente información aun después de que el navegador se haya cerrado o recargado.
Soporte para audio en HTML
Ya no será necesario depender de plugins externos para reproducir audio, HTML dispone de la etiqueta <audio>. Es bueno señalar que solamente los navegadores más recientes son los que soportan audio HTML5.
<audio autoplay="autoplay" controls="controls">
<source src="archivo.ogg" />
<source src="archivo.mp3" /> <c/ode>
<a>Descargar este archivo. </a>
</Audio>
Por el momento solo puedes trabajar con dos formatos de audio .ogg y mp3, esto porque unos navegadores son compatibles con unos formatos, mientras que otros no lo son.
Etiqueta para letras pequeñas
Este elemento fue redefinido especialmente para las letras pequeñas. Por ejemplo, el <small> puede ser usado en una declaración de derechos de autor.
Momento de utilizar <div>
Ahora que tenemos etiquetas como headers, sections, footers muchos se cuestionan si vale la pena usar DivS y la respuesta es sí. Los DivS tienen que ser implementados cuando no existan mejores opciones para el trabajo.
En el caso de que necesites envolver un fragmento de código dentro de un elemento contenedor solo con el objetivo de ubicar el contenido, usar un <div> tiene mucha lógica.
Campo de texto para el correo
Usando un type de email a campo de texto de formas, le estamos indicando al navegador que solamente permita introducir allí cadenas de texto válidas que constituyan una dirección de correo electrónica. Un fragmento de código para esta sintaxis del correo sería:
<body>
<form action="" method="get">
<label for="email">Email:</label>
<input id="email" name="email" type="email" />
<button type="submit"> Submit Form </button>
</form>
</body>
Ha de tenerse presente que no todos los navegadores tienen la capacidad de soportar cualquier cantidad de elementos y atributos. Así, que por sobradas razones no debes confiarte de este tipo de validaciones todavía.
Crea contenidos editables
Los navegadores modernos tienen un novedoso atributo que se puede aplicar a elementos, se llama contenteditable. Tal como lo indica su nombre, esto permite editar textos contenidos en otro elemento, incluyendo a sus descendientes. Existen diferentes usos para algo así, hasta una app tan sencilla como una lista de hacer, lo que además toma la ventaja de almacenamiento local. El extracto de código luciría como este:
<body>
<h2> To-Do List </h2>
<ul contenteditable="true">
<li> Comprar papel toilet </li>
<li> Recoger la ropa limpia </li>
<li> Lavar el auto </li>
</ul>
</body>
En fin, este ha sido solo un abreboca de la infinidad de acciones y características que puedes programar bajo HTML5. Existen muchos más atributos y elementos que puedes conocer y aprender a usar. No dejes de seguir explorando este interesante mundo del lenguaje de marcado para que te conviertas en un experto del diseño y programación web.
Deja una respuesta