Advertisement
  1. Code
  2. Web Development
Code

28 características, consejos y técnicas de HTML5 que debes conocer

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called HTML5 and You.
Quick Tip: HTML5 Features you Should be Using Right Now
Quick Tip: New HTML5 Form Features

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

La industria se mueve rápido -- ¡realmente rápido! Si no eres cuidadoso, morderás el polvo. Así que si te sientes un poco abrumado por los cambios/actualizaciones en HTML5, usa esto como una guía de cosas que debes saber.

1. Nuevo Doctype

¡Aún usas ese maldito, imposible-de-memorizar doctype XHTML?

Si es así, ¿Por qué? Cambia al nuevo doctype HTML5. Vivirás más -- como diría Douglas Quaid.

De hecho, ¿sabías que realmente no es necesario para HTML5? Sin embargo, es usado para navegadores actuales y anteriores que requieren la especificación de un doctype. Los navegadores que no entienden éste doctype simplemente generarán el marcado en modo estándar. Así que, despreocúpate y adopta el nuevo doctype HTML5. 

2. El Elemento Figure

Considera el siguiente marcado para una imagen:

Desafortunadamente no hay una manera fácil o semántica para asociar el subtítulo, contenido en una etiqueta de párrafo, con el elemento de imagen en sí mismo. HTML5 corrige esto, con la introducción del elemento <figure>. Cuando se combina con el elemento <figcaption>, podemos ahora asociar subtítulos semánticamente con sus contrapartes de imagen.

3. <small> Redefinido

No hace mucho, yo utilizaba el elemento <small> para crear subencabezados que estaban relacionados con el logo. Es un elemento de presentación útil; sin embargo, ahora, sería un uso incorrecto. El elemento small ha sido redefinido, más apropiadamente, para referirse a letras pequeñas. Imagina una declaración de copyright en el footer de tu sitio; de acuerdo a la nueva definición de HTML5 de éste elemento; el <small> sería el envolvente correcto para esta información.

El elemento small se refiere ahora a  "letras pequeñas."

4. No Más types para Scripts y Enlaces

Posiblemente todavía agregues el atributo type a tus etiquetas  link y script .

Esto ya no es necesario. Está implícito que ambas etiquetas se refieren a hojas de estilo y scripts, respectivamente. De tal manera, podemos remover el elemento type .

5. Encomillar o No Encomillar.

… Esa es la cuestión. Recuerda, HTML5 no es XHTML. No tienes que envolver tus atributos en comillas si no quieres. No tienes que cerrar rus elementos. Con eso dicho, no hay nada malo con hacerlo, si te hace sentir más cómodo. Ha resultado para mí.

Toma tu propia decisión en esto. Si prefieres un documento más estructurado, apégate a las comillas sin falta.

6. Haz Tu Contenido Editable

Los nuevos navegadores tienen un ágil nuevo atributo que puede ser aplicado a elementos, llamado contenteditable. Como su nombre nos dice, esto permite al usuario editar cualquier texto contenido dentro del elemento, incluyendo a sus hijos. Hay una variedad de usos para algo como esto, incluyendo una app tan simple como una lista to-do, la cual también toma ventaja del almacenamiento local.

O, como aprendimos en el nuevo tip, podríamos escribirlo como:

7. Campos De Email

Si aplicamos un type de “email” a campos de formas, podemos instruir al navegador que sólo permita cadenas de texto que conformen una estructura de dirección de email válida. Es correcto; ¡la validación de formas incorporado estará pronto aquí! No podemos confiar al 100% en esto todavía, por obvias razones. En navegadores más antiguos que no entienden este type “email”, usarán simplemente un campo de texto regular.

Esta vez, no podemos depender en la validación del navegador. Una solución servidor/cliente debe ser aún implementada.

También debe tomarse en cuenta que todos los navegadores actuales son un poco flojos cuando se trata de elementos y atributos que no soportan. Por ejemplo, Opera parece soportar validación de email, siempre y cuando el atributo name sea especificado. Sin embargo, no soporta el atributo placeholder, del cual aprenderemos en el siguiente tip. Conclusión, no dependas de ésta forma de validación todavía… ¡aun así puedes usarla!

8. Placeholders

Antes, teníamos que utilizar un poco de JavaScript para crear placeholders para cuadros de texto. Seguro, puedes inicialmente fijar el atributo value como veas conveniente, pero, tan pronto como el usuario borre y de un click afuera, el campo será borrado otra vez. El atributo placeholder remedia esto.

Otra vez, el soporte es turbio a lo mucho en los diferentes navegadores, sin embargo, esto continuará mejorando con cada nueva versión. Además, si el navegador, como Firefox y Opera, no soporta actualmente el atributo placeholder  no hay problema.

9. Almacenamieto Local

Gracias al almacenamiento local (no es oficialmente HTML5, pero incluído por el bien de la conveniencia), podemos hacer que navegadores más avanzados “recuerden” lo que escribimos, incluso después de que el navegador es cerrado o refrescado.

"localStorage fija campos en el dominio. Incluso cuando cierras el navegador, lo vuelves a abrir, y regresas al sitio, éste recuerda todos los campos en localStorage."
-
QuirksBlog

Mientras que obviamente no es soportado por todos los navegadores, podemos esperar que éste método funcione, sobre todo, en Internet Explorer 8, Safari 4 y Firefox 3.5. Nótese que, para compensar por navegadores más antiguos que no reconocerán almacenamiento local, deberías probar primero para determinar si window.localStorage existe.

10. El Header y Footer Semánticos

Atrás quedaron los días de:

Los Divs, por naturaleza, no tienen estructura semántica – incluso después que un id es aplicado. Ahora, con HTML5, tenemos acceso a los elementos <header> y <footer>.El marcado de arriba puede ser remplazado con:

Es completamente apropiado tener múltiples headers y footers en tus proyectos.

Trata de no confundir estos elementos con el header y footer de tu sitio. Estos simplemente se refieren a sus contenedores. De tal manera, tiene sentido poner, por ejemplo, información meta al fondo del post de un blog dentro del elemento footer . Lo mismo aplica para header.

12. Más Características Para Formas HTML5

Aprende acerca de más características útiles de formas HTML5 en éste rápido video tip (Inglés).

12. Internet Explorer y HTML5

Desafortunadamente, ese condenado Internet Explorer requiere un poco de sacudidas para entender los nuevos elementos HTML5.

Todos los elementos, por defecto, tienen un display  de inline .

Con la finalidad de asegurar que los nuevos elementos HTML5 se muestren correctamente como elementos bloque de nivel, es necesario ésta vez estilizarlos como tales.

Desafortunadamente, Inernet Explorer seguirá ignorando estos estilos, porque no tiene idea que, como un ejemplo, que es siquiera el elemento header  Por suerte, hay una solución sencilla: 

Suficientemente extraño, éste código parece hacer funcionar Internet Explorer. Para simplificar este proceso para cada nueva aplicación, Remy Sharp creó un script, comúnmente denominado el nuevo cuchillo HTML5. Éste script resuelve algunos problemas de impresión también.

13. hgroup*

*Desde la primer publicación de éste archive, el  elemento hgroup se ha vuelto completamente obsoleto y ya no debe ser usado.

14. Atributo Required

Las formas permiten un nuevo atributo required, el cuál específica, naturalmente, si un campo en particular es requerido. Dependiendo de tu preferencia para codificar, puedes declarar éste atributo en una de dos maneras:

O, con una aproximación más estructurada.

Cualquier método funcionará. Con este código, y dentro de navegadores que soporten éste atributo, una forma no puede ser enviada y ese “alguncampo” está en blanco. Aquí un ejemplo rápido; añadiremos también el atributo placeholder, ya que no hay razón para no hacerlo.

Si el campo es dejado en blanco, y la forma es enviada, el campo de texto será resaltado.

15. Autofocus Attribute

Nuevamente, HTML5 remueve la necesidad de soluciones JavaScript. Si un campo en particular debe ser “seleccionado” o remarcado, por defecto, podemos ahora utilizar el atributo autofocus.

Suficientemente interesante, mientras que personalmente prefiero una aproximación más XHTML (usando comillas, etc.), escribir "autofocus=autofocus" se siente extraño. De tal manera, nos apegaremos con la aproximación de una sola palabra clave.

16. Soporte de Audio

Ya no tenemos que depender de plugins de terceros para poder generar audio. HTML5 ahora ofrece el elemento <audio>. Bueno, al menos, en última instancia, no tendremos que preocuparnos por estos plugins. Hasta la fecha, sólo los navegadores más recientes ofrecen soporte para audio HTML5. En este momento, es todavía una buena práctica ofrecer algo de compatibilidad inversa.

Mozilla y Webkit no se llevan bien completamente todavía, cuando se trata del formato de audio. Firefox querrá ver un archivo .ogg, mientras que los navegadores Webkit trabajarán bien con la extensión común .mp3. Esto significa que, al menos por ahora, deberías crear dos versiones del audio.

Cuando Safari carga la página, no reconocerá ese formato .ogg y lo saltará y continuará con la versión .mp3, en consecuencia. Por favor nota que IE, como es usual, no soporta esto y Opera 10 y anteriores solo pueden trabajar con archivos .wav.

17. Soporte de Video

Así como el elemento <audio>, nosotros también, por supuesto, ¡tenemos video HTML5 en los nuevos navegadores! De hecho, recientemente, YouTube anunció una nueva incrustación HTML5 para sus videos, para navegadores que lo soportan. Desafortunadamente, de nuevo, debido a que la especificación HTML5 no contempla un códec de video específico, se ha dejado que los navegadores decidan. Mientras que Safari e Internet Explorer 9 pueden soportar video en el formato H.264 (que los reproductores Flash pueden reproducir), Firefox y Opera se están apegando a los formatos código abierto Theora y Vorbis. De tal manera, cuando de muestra video HTML5, debes ofrecer ambos formatos.

Chrome puede mostrar correctamente video que está codificado en los formatos “ogg” y “mp4”.

Hay algunas cosas aquí que no valen de nada.

  1. No es técnicamente requerido fijar el atributo type ; sin embargo, si no lo hacemos, el navegador tiene que deducir el tipo por sí mismo. Ahorra un poco de ancho de banda y decláralo tú mismo.
  2. No todos los navegadores entiendo video HTML5. Debajo de los elementos source, podemos ya sea ofrecer un link de descarga o incrustar una versión Flash de video. Depende de ti.
  3. Los atributos controls y preload serán discutidos en los siguientes dos tips.

18. Pre-cargar Videos

El atributo preload hace exactamente lo que imaginarías. Aunque, dicho eso, deberías decidir primero si quieres o no que el navegador pre-cargue el video. ¿Es realmente necesario? Quizás, si el visitante ingresa a la página, que está hecha específicamente para mostrar el video, deberías definitivamente pre-cargar el video y ahorrarle al visitante un poco de tiempo. Los videos pueden ser pre-cargados usando preload="preload" , o simplemente agregando preload. Yo prefiero la solución, es un poco menos redundante. 

19. Mostrar Controles

Si estás trabajando a la par con cada uno de éstos tips y técnicas, habrás notado que, con el código de arriba, el video de arriba parece ser solo una imagen, sin ningunos controles. Para generar estos controles de reproducción, debemos especificar el atributo control dentro del elemento video.

Por favor nota que cada navegador genera de manera diferente su reproductor.

20. Expresiones Regulares

¿Qué tan seguido te has encontrado a ti mismo escribiendo alguna expresión regular rápida para verificar una caja de texto en particular? Gracias al nuevo atributo pattern, podemos insertar una expresión regular directamente en nuestro marcado.

Si estás moderadamente familiarizado con expresiones regulares, serás consciente de que éste patrón: [A-Za-z]{4,10}  acepta solamente mayúsculas y minúsculas. La cadena de texto debe tener también un mínimo de cuatro caracteres y un máximo de diez

Nota que estamos empezando a combinar todos éstos geniales nuevos atributos.

Si las expresiones regulares son desconocidas para ti, consulta aquí (Inglés).

21. Detectar Soporte Para Atributos

¡De que sirven estos atributos si no tenemos manera de determiner si el navegador los reconoce? Bueno, buen punto; pero hay varias maneras de averiguarlo. Discutiremos dos. La primera opción es utilizar la excelente librería Modernizr. De manera alternativa, podemos crear y analizar estos elementos para determinar de que son capaces los navegadores. Por ejemplo, en nuestro ejemplo previo, si queremos determinar si el navegador puede implementar el atributo pattern, podemos agregar un poco de JavaScript a nuestra página:

De hecho, este es un método popular de determinar la compatibilidad del navegador. La librería jQuery utiliza éste truco. Arriba, estamos creando un nuevo elemento input, y determinando si el atributo pattern es reconocido. Si lo es, el navegador soporta esta funcionalidad. De otro modo, por supuesto no lo soporta.

Ten en mente que esto depende de JavaScript!

22. Elemento Mark

Piensa en el elemento <mark> como un marcador. Una cadena de texto dentro de esta etiqueta debe ser relevante para las acciones actuales del usuario. Por ejemplo, si buscara por “Abre tu Mente” en algún blog, podría utilizar entonces algo de JavaScript para envolver cada aparición de la cadena de texto entre las etiquetas <mark>.

23. Cuando usar un  <div>

Algunos de nosotros inicialmente cuestionamos cuando deberíamos usar viejos y simples divs. Ahora que tenemos acceso a headers, articles, sections, y footers, ¿hay algún momento para usar un…div? Absolutamente.

DivS deberían ser utilizados cuando no hay un mejor elemento para el trabajo.

Por ejemplo, si encuentras que necesitas envolver un bloque de código dentro de un elemento contenedor específicamente con el propósito de posicionar el contenido, un <div> tiene mucho sentido. Sin embargo, si en su lugar estás envolviendo un nuevo post de un blog, o, tal vez, una lista de links en tu pie de página, considera usar los elementos <article> y <nav>, respectivamente. Son más semánticos.

24. Qué Empezar a Usar Inmediatamente

Con toda esta charla acerca de HTML5 inconclusa hasta 2022, a mucha gente le es indiferente por completo – lo que es un gran error. De hecho, ¡hay muchas características útiles de HMTL5 que podemos usar en nuestros proyectos ahora mismo! Código más simple y más limpio siempre es algo bueno. En el video tip rápido de hoy, te mostraré un puñado de opciones (Inglés).

25. Qué No Es HTML5

La gente puede ser disculpada por asumir que impresionantes transiciones sin JavaScript están agrupadas en el todo inclusivo HTML5. Bueno – incluso Apple ha promocionado esta idea inadvertidamente. Para los no-desarrolladores, que importa; es una manera fácil de referir a estándares web modernos. Sin embargo, para nosotros, aunque puede ser solo semántica, es importante entender exactamente que no es HTML5,

  • SVG: No es HTML5. Tiene por lo menos cinco años de antigüedad.
  • CSS3: No es HTML5. Es...CSS.
  • Geolocalización: No es HTML5.
  • Almacenamiento de Cliente: No es HTML5. Fue en algún punto, pero fue retirado de la especificación, debido al hecho de que a muchos les preocupaba que, como un todo, se estuviera volviendo muy complicado. Ahora tiene su propia especificación.
  • Web Sockets: No es HTML5. De nuevo, fueron exportados a su propia especificación.

Independientemente de cuanta distinción requieras, todas estas tecnologías pueden ser agrupadas en el conjunto de web moderna. De hecho, muchas de estas especificaciones ramificadas siguen siendo gestionadas por la misma gente.

26. El Atributo de Datos

Ahora oficialmente tenemos soporte para atributos personalizados dentro de todos los elementos HTML. Mientras que antes, aun podíamos salirnos con la nuestra con cosas como:

..¡los validadores harían un alboroto! Pero ahora, mientras que comencemos nuestro atributo personalizado con “data”, podemos oficialmente usar este método. Si alguna vez te encontraste adjuntando datos importantes a algo como un atributo class, probablemente para el uso de JavaScript, ¡esto será de mucha ayuda!

Snippet HTML

Recuperar El Valor del Atributo Personalizado.

Puede ser usado también incluso en tu CSS, como para este tonto y poco convincente ejemplo CSS de cambio de texto.

Puedes ver un demo del efecto de arriba en JSBIN.

27. El Elemento Output

Como habrás adivinado, el elemento output es usado para mostrar algún tipo de cálculo. Por ejemplo, si quisieras mostrar las coordenadas de la posición del ratón, o la suma de una serie de números, estos datos deberían ser introducidos en el elemento output.

Como un simple ejemplo, insertemos la suma de dos números en un output vacío con JavaScript, cuando un botón submit sea presionado.

Pruébalo por ti mismo.

Por favor nota que el soporte para el elemento output es todavía un poco deficiente. Al tiempo de ésta publicación, sólo fui capaz de hacer que funcionara bien en Opera. Esto está reflejado en el código de arriba. Si el navegador no reconoce el elemento, el navegador simplemente te lo hará saber con una alerta. De otro modo, encuentra el output con el nombre “sum”, y asigna su valor a 15, en consecuencia, después de que la forma ha sido enviada.

Este elemento también puede recibir un atributo for, el cual refleja el nombre del elemento al que el output se relaciona, similar al modo en que trabaja un label.

28. Crea Sliders con la entrada Range

HTML5 introduce el nuevo tipo de entrada range.

Más notablemente, puede recibir atributos min, max, step, y value, entre otros. Aunque sólo Opera parece soportar completamente esta clase de entrada por ahora, ¡será fantástico cuando realmente podamos usar esto!

Para una rápida demostración, construyamos un calibrador que permitirá a los usuarios decidir qué tan genial es “Total Recall”. No construiremos una solución de sondeo del mundo real, pero revisaremos como podría hacerse de manera bastante fácil. 

Paso 1: Marcado

Primero, creamos nuestro marcado.

Nota que, adicionalmente a fijar valores min y max, podemos siempre especificar cuál será el para step cada transición. Si el step es puesto a 1, habrá entonces 10 valores para elegir. También tomamos ventaja del nuevo elemento output que aprendimos en el tip anterior.

Paso 2: CSS

A continuación, lo estilizaremos un poco. Usaremos también :before:after para informar al usuario cuales son nuestros valores min y max. Muchas gracias a Remy y Bruce por enseñarme este truco, por medio de “Presentando HTML5.” 

Arriba, creamos contenido antes y después del rango de entrada, y hacemos sus valores igual a los valores min y max, respectivamente.

Paso 3: El JavaScript

Por último, nosotros:

  • Determinamos su el navegador actual sabe cuál es el rango de entrada. Si no, alertamos al usuario que el demo no funciona.
  • Actualizamos el elemento output dinámicamente, mientras que el usuario mueve el slider.
  • Escuchamos para cuando el usuario mueve el slider, tomamos el valor y lo guardamos en almacenamiento local.
  • Luego, la siguiente vez que el usuario actualice la página, el rango y la salida se ajustarán automáticamente a lo que ellos seleccionaron.

¿Listo para el mundo real? Probablemente no todavía; pero aun así es divertido para jugar y prepararse.

Descarga el código fuente, y pruébalo por ti mismo. Pero usa Opera.

¡Gracias por leer! Hemos cubierto bastante, pero solo hemos rascado la superficie de lo que es posible con H

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.