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 CYC (you can also view the original English article)

Algunas veces, volvemos a visitar algunas de las publicaciones favoritas de nuestros lectores a lo largo de la historia de Tuts+. Este tutorial se publicó por primera vez en agosto de 2010.

Esta industria se mueve rápido, ¡muy rápido! Si no tienes cuidado, te quedarás en el polvo. Por lo tanto, si te sientes un poco abrumado con los próximos cambios/actualizaciones en HTML5, utiliza esto como un manual de las cosas que debes saber.


1. Nuevo Doctype

¿Todavía usas ese doctype XHTML molesto e imposible de memorizar?

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

De hecho, ¿sabías que ni siquiera es realmente necesario para HTML5? Sin embargo, se usa para navegadores actuales y antiguos que requieren un tipo de doctype específico. Los navegadores que no entienden este tipo de documento simplemente renderizarán el marcado contenido en modo estándar. Por lo tanto, sin preocupaciones, no dudes en tirar la precaución al viento y abre el nuevo tipo de documento HTML5.


2. El elemento Figure 

Considera el siguiente marcado para una imagen:

Desafortunadamente, no es una forma fácil o semántica de asociar el título, envuelto en una etiqueta de párrafo, con el elemento de imagen en sí. HTML5 rectifica esto, con la introducción del elemento <figure>. Cuando se combina con el elemento <figcaption> , podemos asociar semánticamente subtítulos con sus equivalentes de imagen.


3. <small> Redefinido

No hace mucho, utilicé el elemento <small> para crear subtítulos que están estrechamente relacionados con el logotipo. Es un elemento de presentación útil. Sin embargo, en este momento usarlo sería inadecuado. El elemento small ha sido redefinido, más apropiadamente, para referirse a letra pequeña. Imagina una declaración de derechos de autor en el pie de página de tu sitio; según la nueva definición HTML5 de este elemento; el <small> sería el envoltorio correcto para esta información.

El elemento small ahora se refiere a "letra pequeña".


4. No más Types para scripts y enlaces

Posiblemente aún 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. Como tal, podemos eliminar el atributo type.


5. Para Citar o no Citar.

...Esa es la pregunta. Recuerda que HTML5 no es XHTML. No es necesario que ajustes tus atributos entre comillas si no lo deseas No tienes que cerrar tus elementos. Dicho esto, no hay nada de malo en hacerlo, si te hace sentir más cómodo. Encuentro que esto es verdad para mí.

Haz tu propia opinión sobre esto. Si prefieres un documento más estructurado, apóyate con las citas.


6. Haz tu contenido editable

Los nuevos navegadores tienen un nuevo atributo ingenioso que se puede aplicar a los elementos, llamado contenteditable. Como su nombre lo indica, esto permite al usuario editar cualquier texto contenido dentro del elemento, incluidos sus elementos secundarios. Hay una variedad de usos para algo como esto, incluida una aplicación tan simple como una lista de tareas pendientes, que también aprovecha el almacenamiento local.

O, como aprendimos en el consejo anterior, podríamos escribirlo como:


7. Entradas de correo electrónico

Si aplicamos un type de "email" para formar entradas, podemos indicarle al navegador que solo permita cadenas que se ajusten a una estructura de dirección de correo electrónico válida. Está bien; ¡la validación de formularios incorporada pronto estará aquí! No podemos confiar al 100% en esto todavía, por razones obvias. En los navegadores más antiguos que no entienden este tipo de "email", simplemente recurren a un cuadro de texto común.

En este momento, no podemos depender de la validación del navegador. Una solución del lado del servidor/cliente todavía debe ser implementada.

También se debe tener en cuenta que todos los navegadores actuales son un poco inseguros cuando se trata de qué elementos y atributos hacen y cuáles no. Por ejemplo, Opera parece ser compatible con la validación de correo electrónico, siempre que se especifique el atributo name. Sin embargo, no es compatible con el atributo placeholder del cual aprenderemos en el próximo consejo. En pocas palabras, no debes depender de esta forma de validación todavía... ¡pero aún puedes usarla!


8. Placeholders

Antes, teníamos que utilizar un poco de JavaScript para crear placeholders en los cuadros de texto. Claro, inicialmente puedes establecer el atributo value como mejor te parezca, pero tan pronto como el usuario borre ese texto y haga clic, la entrada se dejará en blanco nuevamente. El atributo placeholder soluciona esto.

Nuevamente, el soporte es sombrío en el mejor de los navegadores, sin embargo, esto continuará mejorando con cada nuevo lanzamiento. Además, si el navegador, como Firefox y Opera, actualmente no admiten el atributo placeholder, no hay daño.


9. Almacenamiento local

Gracias al almacenamiento local (no oficialmente HTML5, pero agrupado por conveniencia), podemos hacer que los navegadores avanzados "recuerden" lo que escribimos, incluso después de que el navegador se cierra o se actualiza.

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

Aunque obviamente no es compatible con todos los navegadores, podemos esperar que este método funcione, más notablemente, en Internet Explorer 8, Safari 4 y Firefox 3.5. Ten en cuenta que, para compensar los navegadores antiguos que no reconocerán el almacenamiento local, primero debes probar para determinar si window.localStorage existe.

por http://www.findmebyip.com/litmus/

10. El Header semántico y el Footer

Atrás han quedado los días de:

Las Divs, por naturaleza, no tienen estructura semántica, incluso después de aplicar un id. Ahora, con HTML5, tenemos acceso a los elementos <header> y <footer>. El maquetado de arriba ahora puede ser reemplazado por:

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

Intenta no confundir estos elementos con el "header" y el "pie de página" o Footer de tu sitio web. Simplemente se refieren a su contenedor. Como tal, tiene sentido colocar, por ejemplo, meta-información en la parte inferior de una publicación de blog dentro del elemento de pie de página o Footer. Lo mismo es cierto para el encabezado o header.


11. Más funciones del formulario HTML5

Aprende más sobre las funciones del formulario en HTML5 en este rápido video.


12. Internet Explorer y HTML5

Desafortunadamente, Internet Explorer requiere un poco de disputas para comprender los nuevos elementos HTML5.

Todos los elementos, por defecto, tienen un display en línea o inline.

Para garantizar que los nuevos elementos HTML5 se procesen correctamente como elementos de nivel bloque, es necesario en este momento diseñarlos como tales.

Lastimosamente, Internet Explorer ignorará estos estilos, porque no tiene idea de qué es, por ejemplo, el elemento header. Afortunadamente, hay una solución fácil:

Por extraño que parezca, este código parece desencadenar Internet Explorer. Para simplificar este proceso en cada nueva aplicación, Remy Sharp creó una secuencia de comandos, comúnmente conocida como HTML5 Shiv. Este script también soluciona algunos problemas de impresión.


13. hgroup*

* Desde la primera publicación de este artículo, el elemento hgroup se ha vuelto completamente obsoleto y ya no se debe usar.


14. Atributo requerido

Los formularios permiten un nuevo atributo required, que especifica, naturalmente, si se requiere una entrada en particular. Dependiendo de tu preferencia de codificación, puedes declarar este atributo de las siguientes dos maneras:

O, con un enfoque más estructurado.

Cualquiera de los dos métodos servirá. Con este código, y dentro de los navegadores que admiten este atributo, no se puede enviar un formulario si esa entrada "algún input" está en blanco. Aquí hay un ejemplo rápido; también agregaremos el atributo placeholder, ya que no hay razón para no hacerlo.

Si la entrada (input) se deja en blanco y se envía el formulario, se resaltará el cuadro de texto.


15. Atributo Autofocus

De nuevo, HTML5 elimina la necesidad de soluciones de JavaScript. Si una entrada en particular debe ser "seleccionada" o enfocada, de forma predeterminada, ahora podemos utilizar el atributo de enfoque automático llamado autofocus.

Curiosamente, aunque personalmente prefiero un enfoque más XHTML (usando comillas, etc.), escribir "autofocus=autofocus" parece extraño. Como tal, nos mantendremos con el enfoque de palabra clave única.


16. Soporte para audio

Ya no tenemos que depender de complementos de terceros para reproducir audio. HTML5 ahora ofrece el elemento <audio>. Bueno, al menos, en última instancia, no tendremos que preocuparnos por estos complementos. Por el momento, solo los navegadores más recientes ofrecen soporte para audio HTML5. En este momento, sigue siendo una buena práctica ofrecer alguna forma de compatibilidad con versiones anteriores.

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

Cuando Safari carga la página, no reconoce ese formato .ogg, y se saltará y pasará a la versión mp3, en consecuencia. Ten en cuenta que IE, como es habitual, no es compatible con esto, y Opera 10 y versiones anteriores solo pueden funcionar con archivos .wav.


17. Soporte para video

Al igual que el elemento <audio>, por supuesto, tenemos videos HTML5 también en los nuevos navegadores. De hecho, hace poco, YouTube anunció un la posibilidad de incrustar sus videos en HTML5, para los navegadores que lo soportan. Desafortunadamente, una vez más, debido a que la especificación HTML5 no especifica un códec específico para el video, los navegadores deben decidirlo. Aunque se puede esperar que Safari e Internet Explorer 9 admitan video en formato H.264 (que los reproductores Flash pueden reproducir), Firefox y Opera se quedan con los formatos de código abierto Theora y Vorbis. Como tal, al mostrar video HTML5, debes ofrecer ambos formatos.

Chrome puede mostrar correctamente el video codificado en los formatos "ogg" y "mp4".

Hay algunas cosas que vale la pena mencionar aquí.

  1. No estamos técnicamente obligados a establecer el atributo type; sin embargo, si no lo hacemos, el navegador tiene que averiguar el tipo por sí mismo. Ahorra algo de ancho de banda, y declara esto.
  2. No todos los navegadores entienden el video HTML5. Debajo de los elementos source, podemos ofrecer un enlace de descarga o insertar una versión Flash del video. Tu decides.
  3. Los controles y los atributos de precarga se analizarán en los siguientes dos consejos.

18. Precargar videos

El atributo preload hace exactamente lo que seguramente adivinarías. Sin embargo, dicho esto, primero debes decidir si deseas o no que el navegador precargue el video. ¿Es necesario? Quizás, si el visitante accede a una página, que está específicamente diseñada para mostrar un video, definitivamente debe precargar el video y guardar al visitante un poco de tiempo de espera. Los videos pueden precargarse configurando preload="preload", o simplemente agregando preload. Yo prefiero la última solución; es menos redundante.


19. Mostrar controles

Si estás trabajando con cada uno de estos consejos y técnicas, es posible que hayas notado que, con el código anterior, el video parece ser solo una imagen, sin ningún tipo de control. Para representar estos controles de reproducción, debemos especificar el atributo controls dentro del elemento de video.

Ten en cuenta que cada navegador representa a reproductor de forma diferente el uno del otro.


20. Expresiones regulares

¿Con qué frecuencia te has encontrado escribiendo alguna expresión rápida para verificar un cuadro de texto en particular? Gracias al nuevo atributo pattern, podemos insertar una expresión regular directamente en nuestro marcado.

Si estás medianamente familiarizado con las expresiones regulares, sabrás que este patrón: [A-Za-z] {4,10} solo acepta letras mayúsculas y minúsculas. Esta cadena también debe tener un mínimo de cuatro caracteres y un máximo de diez.

¡Observa que estamos comenzando a combinar todos estos nuevos increíbles atributos!

Si las expresiones regulares son extrañas para ti, consulta aquí.


21. Detectar soporte para atributos

¿De qué sirven estos atributos si no tenemos forma de determinar si el navegador los reconoce? Bueno, buen punto; pero hay varias formas de resolver esto. Discutiremos dos. La primera opción es utilizar la excelente biblioteca de Modernizr. Alternativamente, podemos crear y diseccionar estos elementos para determinar de qué son capaces los navegadores. Por ejemplo, en nuestro ejemplo anterior, si queremos determinar si el navegador puede implementar el atributo pattern, podríamos agregar un poco de JavaScript a nuestra página:

De hecho, este es un método popular para determinar la compatibilidad del navegador. La biblioteca jQuery utiliza este truco. Arriba, estamos creando un nuevo elemento input y determinando si el atributo pattern se reconoce dentro. Si es así, el navegador admite esta funcionalidad. De lo contrario, por supuesto que no.

¡Ten en cuenta que esto depende de JavaScript!


22. Elemento Mark

Piensa en el elemento <mark> como un resaltador. Una cadena envuelta dentro de esta etiqueta debe ser relevante para las acciones actuales del usuario. Por ejemplo, si busqué "Abrir mi mente" en algún blog, podría utilizar algo de JavaScript para ajustar cada aparición de esta cadena dentro de las etiquetas <mark>.


23. Cuándo usar un <div>

Algunos de nosotros inicialmente nos preguntamos cuándo deberíamos usar divs simples. Ahora que tenemos acceso a headersarticlessections, y footers, ¿hay algún momento para usar un... div? Absolutamente.

Los Divs deben utilizarse cuando no hay un mejor elemento para el trabajo.

Por ejemplo, si encuentras que debes envolver un bloque de código dentro de un elemento contenedor específicamente para posicionar el contenido, un <div> tiene perfecto sentido. Sin embargo, si en su lugar estás envolviendo una nueva publicación de blog o, quizás, una lista de enlaces en tu footer, considera usar los elementos <article> y <nav> respectivamente. Son más semánticos.


24. Qué comenzar a usar inmediatamente

Con toda esta charla sobre HTML5 no completa hasta 2022, muchas personas la ignoran por completo, lo que es un gran error. De hecho, ¡hay un puñado de funciones HTML5 que podemos usar en todos nuestros proyectos ahora mismo! Un código más simple y limpio siempre es algo bueno. En la sugerencia rápida de video de hoy, te mostraré un puñado de opciones.


25. Qué no es HTML5

Se puede perdonar a las personas por suponer que las increíbles transiciones sin JavaScript se agrupan en el todo abarcador HTML5. Oye, incluso Apple ha promovido inadvertidamente esta idea. Para los no-desarrolladores, a quienes les importa; es una manera fácil de referirse a los estándares web modernos. Sin embargo, para nosotros, aunque solo sea semántica, es importante comprender exactamente qué no es HTML5.

  1. SVG: No es HTML5. Tiene al menos cinco años.
  2. CSS3: No es HTML5. Esto es... CSS.
  3. Geolocalización: No es HTML5.
  4. Client Storage: No es HTML5. Lo fue en un punto, pero fue eliminado de la especificación, debido al hecho de que a muchos les preocupaba que, en su conjunto, se estuviera volviendo demasiado complicado. Ahora tiene su propia especificación.
  5. Web Sockets: No es HTML5. De nuevo, se exportó a su propia especificación.

Independientemente de la cantidad de distinción que requieras, todas estas tecnologías se pueden agrupar en la pila web moderna. De hecho, muchas de estas especificaciones ramificadas todavía son administradas por las mismas personas.


26. El atributo de datos

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

... ¡los validadores armarían un escándalo! Pero ahora, mientras precedemos nuestro atributo personalizado con "data", oficialmente podemos utilizar este método. Si alguna vez te haz encontrado adjuntando datos importantes a algo así como un atributo class, probablemente para el uso de JavaScript, ¡esto será de gran ayuda!

HTML Snippet

Recuperar el valor del atributo personalizado

También se puede usar en tu CSS, como en este ejemplo de cambio de texto de CSS tonto y cojo.

Puedes ver una demostración del efecto anterior en JSBIN.


27. El elemento Output

Como probablemente hayas adivinado, el elemento output se usa para mostrar algún tipo de cálculo. Por ejemplo, si deseas mostrar las coordenadas de la posición del mouse o la suma de una serie de números, estos datos deben insertarse en el elemento output.

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

Inténtalo tú mismo.

Ten en cuenta que el soporte para el elemento output todavía es un poco inestable. En el momento de escribir esto, solo pude hacer que Opera mostrara esto agradable. Esto se refleja en el código anterior. Si el navegador no reconoce el elemento, este simplemente enviará un aviso informándote de ello. De lo contrario, encuentra el resultado con un nombre de "suma" y establece su valor en 15, en consecuencia, después de que se haya enviado el formulario.

Este elemento también puede recibir un atributo for, que refleja el nombre del elemento al que se refiere el resultado u output, similar a la forma en que funciona un label.


28. Crear controles deslizantes con la entrada de rango

HTML5 presenta el nuevo tipo de rango de entrada.

En particular, puede recibir atributos de minmaxstep, y value, entre otros. Aunque solo Opera parece ser compatible con este tipo de entrada en este momento, ¡será fantástico cuando podamos usar esto!

Para una demostración rápida, construyamos un medidor que permita a los usuarios decidir cuán asombroso es "Total Recall". No construiremos una solución de votación del mundo real, pero revisaremos cómo se podría hacer con bastante facilidad.

Paso 1: Marcado

Primero, creamos nuestro marcado.

Ten en cuenta que, además de establecer los valores min y max, siempre podemos especificar cuál será el step para cada transición. Si el paso se establece en 1, habrá entonces 10 valores para elegir. También aprovecharemos el nuevo elemento output que aprendimos en el consejo anterior.

Paso 2: CSS

Ahora, lo daremos un poco de estilo. También utilizaremos :before y :after para informar al usuario cuáles son nuestros valores min y max especificados. Muchas gracias a Remy y Bruce por enseñarme este truco, a través de "Introducción a HTML5".

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

Paso 3: JavaScript

Por último, nosotros:

  • Determina si el navegador actual sabe cuál es la entrada de rango. Si no, alertamos al usuario de que la demostración no funcionará.
  • Actualiza el elemento output dinámicamente, a medida que el usuario mueva el control deslizante.
  • Guarda el valor cuando el usuario salga del control deslizante, toma el valor y guárdalo en el almacenamiento local.
  • Luego, la próxima vez que el usuario actualice la página, el rango y la salida se establecerán automáticamente en la última selección.

¿Listo para el mundo real? Probablemente todavía no; ¡pero sigue siendo divertido jugar y prepararse!

Descarga el código fuente y pruébalo tu mismo. Pero usa Opera.


¡Gracias por leer! Hemos cubierto mucho, pero todavía solo hemos arañado la superficie de lo que es posible con HTML5. ¡Espero que esto sirva como una cartilla útil!

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.