Advertisement
  1. Code
  2. HTML5

¿Qué es HTML5?

Scroll to top
Read Time: 14 mins

Spanish (Español) translation by Naudys Angulo (you can also view the original English article)

What You'll Be Creating

Crédito: Tópico Simple - ¿Qué es HTML5? Hacen fantásticos videos animados.

Introducción al HTML5

Bienvenido a Envato Tuts +!  Este tutorial proporciona una introducción general de HTML5. Si usted no ha oído hablar mucho de ello o simplemente quiere entender su relevancia, ha llegado al lugar correcto.

HTML5 es el último estándar para que los navegadores puedan mostrar e interactuar con páginas web. Aprobado en 2014, es la primera actualización de HTML en 14 años. En este día y edad, que es una vida entre actualizaciones.

El propósito de HTML5 es principalmente hacer que sea más fácil para los desarrolladores web y los creadores de navegadores a seguir estándares basados ​​en el consenso que hacen el cumplimiento más eficiente y potenciador. También está diseñado para proporcionar mejores experiencias de usuarios, más rápidas y más consistentes para los visitantes de escritorio y móviles.

Estas son algunas mejoras clave en HTML5:

  • Hay una estructura de elementos más sencilla y más directa a las páginas, que facilita la creación, el ajuste y la depuración--así como la creación de servicios automatizados que le ayudan a encontrar recursos importantes en la Web.
  • Proporciona elementos estándar para objetos multimedia comunes que anteriormente requerían plugins molestos para audio, video, etc. Estos complementos necesitan ser actualizados regularmente, es decir, descargas repetidas para administrar la seguridad.
  • Hay integración nativa con interfaces para aprovechar las modernas necesidades de la Web y de los dispositivos móviles. Uno de mis ejemplos favoritos de esto es la geolocalización, que le permite determinar las coordenadas GPS de un visitante web a través de su navegador. Esta función estaba previamente restringida a aplicaciones de teléfono equipadas con GPS.

Por ejemplo, a continuación se muestra un ejemplo de geolocalización HTML5 desde Construir su Puesta en Marcha con PHP: Geolocalización y Sitios Google (Tuts +):

What is HTML5 Geolocation ExampleWhat is HTML5 Geolocation ExampleWhat is HTML5 Geolocation Example

¿A quién le importa HTML5?

¿Es usted un Usuario Web o un Fan de YouTube?

HTML5 mejorará la velocidad, la facilidad de uso y la consistencia en toda la web. Sí, su experiencia en YouTube se convertirá gradualmente en excelente. Habrá menos actualizaciones de navegadores y complementos, menos amenazas de seguridad y sitios web más elegantes, más legibles y más rápidos.

¿Es Usted un Desarrollador Web?

HTML5 hace su vida increíblemente más fácil y amplía enormemente lo que es posible. Ésto también significa que usted podrá construir cosas y confiar más en los constructores del navegador para asegurar la consistencia. Esto significa un mucho menos condicional código de diseño.

¿Quieres Construir un Navegador Web?

Por un lado, tendrás una gran hoja de ruta en la especificación HTML5 detallando cómo y qué debes construir. Por otro lado, hay más que hacer y hacerlo bien. No será tan fácil diferenciar su navegador contra la niña grande navegadora de  los fabricantes.

¿Quiere Aprender Más?

Sólo un rápido recordatorio antes de profundizar! Intento participar en las discusiones a continuación. Si tiene una pregunta o sugerencia propuesta para un tutorial futuro, por favor, publique un comentario a continuación o póngase en contacto conmigo en Twitter @reifman.

Antecedentes de HTML5

¿De dónde viene HTML5?

HTML5 es la última en más de 20 años de estándares de programación de navegadores desde el lanzamiento de la web en 1991.

Historia del HTML

HTML surgió por primera vez como un estándar en 1993, y aquí está la línea de tiempo de las versiones de HTML aceptadas por los comités de normas:

  • HTML 2.0: 1995
  • HTML 4.0: 1997
  • HTML 4.01: 2000
  • HTML 5: 2014

Los Objetivos de HTML5

Según Wikipedia, HTML5 pretende consolidar versiones anteriores y tipos de documentos diferenciados como XHTML 1 y DOM Level 2 HTML:

[HTML5] amplía, mejora y racionaliza el marcado disponible para documentos, e introduce marcado y ...(APIs) para aplicaciones web complejas...HTML5 es también un candidato potencial para aplicaciones móviles multiplataforma. Muchas características se han diseñado con dispositivos de baja potencia, como smartphones y tabletas tomadas en consideración.

He aquí un resumen de cómo HacerUsoDe explicó los objetivos de HTML5:

  • Eliminar plugins como Flash para funciones comunes que todo el mundo necesita. Generar soporte nativo para cosas como audio, video, etc.
  • Reducir la necesidad de JavaScript y código extra con nuevos elementos nativos.
  • Proporcionar consistencia entre navegadores y dispositivos.
  • Hacer todo esto lo más transparente posible.
What is HTML5 Plugin Past for Video ElementWhat is HTML5 Plugin Past for Video ElementWhat is HTML5 Plugin Past for Video Element

Crédito de la imagen: Tópico Simple

¿Qué Nuevas Características Ofrece HTML5?

Mucho, le resulta! HTML5 proporciona una lista tan impresionante de nuevas capacidades que los principales navegadores aún no son totalmente compatibles incluso 18 meses después de su aceptación:

What is HTML5 Browser compatiblityWhat is HTML5 Browser compatiblityWhat is HTML5 Browser compatiblity

Crédito de la imagen: PHPFlow

También hay este arco iris visual interactivo en HTML5Readiness. Coloca el cursor sobre distintos arcos y verás qué características son compatibles con los navegadores:

What is HTML5 Compatibility RainbowWhat is HTML5 Compatibility RainbowWhat is HTML5 Compatibility Rainbow

Es divertido, pero otras tablas en otros sitios pueden ser más funcionalmente intuitivas de usar.

Indices de adopción de HTML5

En 2011, Wikipedia reportó que cerca de un tercio de los 100 sitios web más importantes soportaban HTML5. En agosto de 2013, alrededor de 153 de los sitios web Fortune 500 lo hicieron.

He aquí una visualización de la inmensidad de las capacidades de HTML5:

What is HTML5 Feature OverviewWhat is HTML5 Feature OverviewWhat is HTML5 Feature Overview

Crédito de la imagen: Wikipedia

Los Nuevos Elementos de HTML5

Los elementos más básicos de HTML5 facilitan la creación de páginas web y la depuración de su código o de otros. También facilita que los servicios automatizados exploren la web y comprendan la importancia de los diferentes componentes de la página.

Para el diseño de página y características claves, ahora hay elementos específicos como:  y para que los navegadores nativos administren la reproducción de cada uno. No más complementos y actualizaciones de seguridad para este específicamente para permitirte dibujar gráficos en el uso de un lenguaje de scripting separado para colocar contenido externo o aplicaciones en la páginaAquí está un esquema visual agradable de éstos por Smashing Magazine:

  • <header> y <footer>
  • <nav> para todos los tipos de menús
  • <aside> para barras laterales o contenido relacionado cercano
  • <article> donde el contenido va tal como una entrada en el blog
  • <section> similar a <div> pero más orientado al contenido
  • <audio> y <video> etiquetas para que los navegadores nativos administren la reproducción de cada uno. No más complementos y actualizaciones de seguridad para este
  • <canvas> específicamente para permitirte dibujar gráficos en el uso de un lenguaje de scripting separado
  • <embed> para colocar contenido externo o aplicaciones en la página

Aquí está un esquema visual agradable de éstos por Smashing Magazine:

What is HTML5 New ElementsWhat is HTML5 New ElementsWhat is HTML5 New Elements

Estas son algunas de las características más avanzadas de HTML5, incluyendo la integración de API, lo que convierte la codificación en JavaScript en acciones sofisticadas más fáciles y más consistentes en los navegadores:

HTML5 y El futuro de la Web ofrece otra guía para estas características. Aquí está uno de sus aportes-ellos aprecian mucho la caché de la aplicación:

Google Gears nos dio almacenamiento de datos sin conexión y Flash nos introdujo en el poder de la caché de aplicaciones (Pandora lo usa para guardar su información de inicio de sesión). Con HTML5, estas capacidades ya están disponibles para usar directamente en el lenguaje y pueden ampliarse fácilmente con JavaScript.

¿Necesita ver qué características son compatibles con los navegadores? HTML5Test tiene una útil evaluación interactiva para las características y el soporte para el navegador:

What is HTML5 Feature Compatibility Browser MatrixWhat is HTML5 Feature Compatibility Browser MatrixWhat is HTML5 Feature Compatibility Browser Matrix

Hay tantas nuevas características que es imposible catalogar todas ellas aquí. Revise los enlaces de recursos en la parte inferior de este tutorial para obtener más recursos que recomiendo.

Algunos Pocos Ejemplos de HTML5 en Acción

Echemos un vistazo a algunos ejemplos interesantes de HTML5 en acción.

Una Plantilla de página HTML5

La simplicidad de HTML5 es clara en sus nuevos diseños de página. Los elementos más orientados al contenido hacen que el código de la página sea más fácil de comprender y depurar. He aquí un ejemplo sencillo que construí con el proyecto HTML5-Reset:

Observe que hay una etiqueta más simple de doctype, etiquetas de enlace y etiquetas de script. El script HTML5Shiv proporciona soporte heredado para versiones de Internet Explorer antes de 9.x.

Si desea ver algunos otros enfoques, consulte la Plantilla HTML5, una página HTML5 de código abierto más amplia.

El Elemento de Video y los Reproductores

Aquí hay un ejemplo de vídeo de W3Schools que muestra el código fuente a la izquierda y el reproductor resultante a la derecha:

What is HTML5 Video ExampleWhat is HTML5 Video ExampleWhat is HTML5 Video Example

No es necesario un complemento y no hay actualizaciones.

Formularios

HTML5 tiene una gran variedad de mejoras a los formularios y elementos de entrada para hacer la programación web más fácil y la experiencia del usuario mucho mejor. Por ejemplo, los elementos de entrada ahora soportan una variedad de validaciones integradas. Aquí hay una validación para números dentro de un rango específico:

What is HTML5 Input Element ExampleWhat is HTML5 Input Element ExampleWhat is HTML5 Input Element Example

Aquí hay un par de excelentes tutoriales para ir un paso más profundo en formularios en HTML5 Doctor:

Por ejemplo, he aquí una demostración del elemento de rango mostrado en un navegador Chrome:

What is HTML5 Range element exampleWhat is HTML5 Range element exampleWhat is HTML5 Range element example

Gráficos Vectoriales Escalables (SVG)

En HTML5, usted puede animar más fácilmente elementos con JavaScript y HTML5. Aquí hay un simple reloj animado que es escalable (cambia el zoom):

What is HTML5 SVG Animated Clock DemoWhat is HTML5 SVG Animated Clock DemoWhat is HTML5 SVG Animated Clock Demo

Aquí está un ejemplo del código para la demo integrando JavaScript:

¿Que sigue?

Espero que hayas disfrutado de esta visión general del surgimiento y el beneficio de HTML5. Si desea explorar más HTML5, hay dos recursos más que me gustaría sugerir:

  • Introducción a HTML5: Una excelente introducción a los avances de HTML5 para desarrolladores que desean un rápido recorrido de todos los nuevos elementos.
  • Demos HTML5 y Ejemplos: Perfecto para mostrarle un menú organizado de una variedad de demos HTML5, mostrándole lo que es posible.

He aquí un ejemplo de las demos navegables en Demos HTML5 (no todas funcionaron para mí):

What is HTML5 Demo site at HTML5TestcomWhat is HTML5 Demo site at HTML5TestcomWhat is HTML5 Demo site at HTML5Testcom

Si eres un administrador de sitio de WordPress como muchos lectores de Envato Tuts +, es posible que desee evaluar futuros temas para su cumplimiento con HTML5. El desarrollo basado en estándares con un soporte de navegador consistente hace que el desarrollo web sea mucho más fácil para muchos de nosotros y reducirá el número de errores a los que se enfrentan nuestros clientes al mismo tiempo que proporciona cada vez mejores experiencias de usuario.

En general, he estado bastante impresionado con HTML5. Y parece que seguirá evolucionando más rápido que cada 14 años.

Además, si está buscando otras utilidades para ayudarle a desarrollar sus habilidades HTML5, no olvide ver lo que tenemos disponible en Envato Market.

Me encantaría escuchar más acerca de sus comentarios sobre HTML5 y sugerencias sobre temas futuros sobre los que desee obtener más información. Por favor no dude en publicar sus preguntas y comentarios a continuación. También puede ponerse en contacto conmigo en Twitter @reifman directamente. Para ver otros tutoriales que he escrito, navegue por mi página Envato Tuts + instructor.

Enlaces Relacionados

Debido a que hay tantos recursos útiles para HTML5, he incluido una ayuda adicional de algunos de los que considero más útiles:

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.