Share
Crédito: Tema simple: ¿Qué es HTML5? Ellos hacen buenos videos animados.
Bienvenido a Envato Tuts +! Este tutorial proporciona una introducción general de HTML5. Si no has escuchado mucho al respecto o simplemente quieres entender su relevancia, has venido al lugar correcto.
HTML5 es el último estándar para que los navegadores muestren e interactúen con páginas web. Aprobado en 2014, es la primera actualización a HTML en 14 años. En este día y edad, eso es toda una vida entre actualizaciones..
El propósito de HTML5 es principalmente facilitar que los desarrolladores web y los creadores de navegadores sigan los estándares basados en el consenso que hacen que el cumplimiento sea más eficiente y empoderador. También está diseñado para proporcionar experiencias de usuario mejores, más rápidas y más consistentes para visitantes de escritorio y móviles.
Aquí hay algunas mejoras clave en HTML5:
Por ejemplo, a continuación se muestra un ejemplo de geolocalización HTML5 de Creación de su inicio con PHP: Geolocalización y Google Places (Tuts +):
HTML5 mejorará la velocidad, la facilidad de uso y la consistencia en toda la web. Sí, tu experiencia en YouTube se volverá gradualmente maravillosa. 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.
HTML5 hace su vida increíblemente más fácil y expande enormemente lo que es posible. También significa que podrás construir cosas y depender más de los constructores de navegadores para garantizar la coherencia. Esto significa mucho menos código de diseño condicional.
Por un lado, tendrá una excelente hoja de ruta en la especificación HTML5 que detalla cómo y qué debe construir. Por otro lado, hay más que hacer y hacer lo correcto. No será tan fácil diferenciar su navegador frente a los fabricantes de navegadores big girl.
¡Solo un rápido recordatorio antes de que nos sumergamos! Trato de participar en las discusiones a continuación. Si tiene alguna pregunta o sugerencia sobre un tema para un futuro tutorial, publique un comentario a continuación o contácteme en Twitter @reifman.
HTML5 es el último en más de 20 años de estándares de programación de navegadores desde el lanzamiento de la web en 1991..
El HTML emergió como estándar en 1993, y aquí está la línea de tiempo de las versiones HTML aceptadas por los comités de estándares:
Según Wikipedia, HTML5 está destinado a consolidar versiones anteriores y tipos de documentos diferenciados, como XHTML 1 y DOM Level 2 HTML:
[HTML5] extiende, mejora y racionaliza el marcado disponible para documentos, e introduce el marcado y ... (API) para aplicaciones web complejas ... HTML5 también es un candidato potencial para aplicaciones móviles multiplataforma. Muchas características se han diseñado con dispositivos de baja potencia como teléfonos inteligentes y tabletas que se han tenido en cuenta.
Aquí hay un resumen de cómo MakeUseOf explicó los objetivos de HTML5:
Imagen Crédito: Tema Simple
¡Mucho, 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:
Crédito de la imagen: PHPFlow
También hay este arco iris visual interactivo en HTML5Readiness. Pase el ratón sobre diferentes arcos y verá qué funciones son compatibles con cada navegador:
Es divertido, pero otros gráficos en otros sitios pueden ser funcionalmente más intuitivos de usar.
En 2011, Wikipedia informó que aproximadamente un tercio de los 100 sitios web más importantes admitía algunos HTML5. En agosto de 2013, alrededor de 153 de los sitios web de Fortune 500 lo hicieron.
Aquí hay una visualización de la inmensidad de las capacidades de HTML5:
Credito de imagen: Wikipedia
Los nuevos elementos más básicos de HTML5 facilitan el diseño de páginas web y la depuración de su código o el de otros. También facilita que los servicios automatizados escaneen la web y entiendan la importancia de los diferentes componentes de la página..
Para el diseño de la página y las características clave, ahora hay elementos específicos como:
Aquí hay un buen resumen visual de estos por Smashing Magazine:
Estas son algunas de las características más avanzadas de HTML5, incluida la integración de API, que hacen que la codificación en JavaScript para acciones sofisticadas sea más fácil y coherente en todos los navegadores:
HTML5 y The Future of the Web ofrece otra guía para estas características. Aquí hay una de sus conclusiones: aprecian mucho el caché de la aplicación:
Google Gears nos dio almacenamiento de datos fuera de línea y Flash nos presentó el poder de la caché de aplicaciones (Pandora lo usa para guardar su información de inicio de sesión). Con HTML5, estas capacidades ahora están disponibles para usarlas directamente en el idioma y se pueden ampliar fácilmente con JavaScript.
¿Necesitas ver qué funciones son compatibles en qué navegadores? HTML5Test tiene una evaluación interactiva útil para las características y el soporte del navegador:
Hay tantas características nuevas que es imposible catalogarlas todas aquí. Verifique los enlaces de recursos al final de este tutorial para obtener recursos más profundos que recomiendo.
Echemos un vistazo a algunos ejemplos geniales de HTML5 en acción..
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. Aquí hay un ejemplo simple que construí con el proyecto HTML5-Reset:
Título de la página
Encabezado del artículo
Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.
Artículo Subtítulo
Vestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.
Observe que hay una etiqueta de tipo de documento, etiquetas de enlace y etiquetas de script más simples. La secuencia de comandos HTML5Shiv proporciona compatibilidad heredada para las versiones de Internet Explorer antes de 9.x.
Si desea ver otros enfoques, consulte la plantilla de HTML5, una página de HTML5 de código abierto más amplia..
Aquí hay un ejemplo de video de W3Schools que muestra el código fuente a la izquierda y el jugador resultante a la derecha:
No se requiere ningún complemento ni actualizaciones.
HTML5 tiene una amplia variedad de mejoras en los formularios y elementos de entrada para facilitar la programación web y mejorar la experiencia del usuario. Por ejemplo, los elementos de entrada ahora admiten una variedad de validaciones integradas. Aquí hay una validación para números dentro de un rango específico:
Aquí hay un par de excelentes tutoriales para profundizar en los formularios de HTML5 Doctor:
Por ejemplo, aquí hay una demostración de la distancia Elemento mostrado en un navegador Chrome:
En HTML5, puedes animar más fácilmente elementos con JavaScript y HTML5. Aquí hay un reloj animado simple que es escalable (cambiar el zoom):
Aquí hay un ejemplo del código para la demostración anterior que integra JavaScript:
HTML5 Demo: SVG clock animación Animación de reloj SVG
Animación de reloj SVG por David Basoko.
Espero que hayas disfrutado de esta descripción general de la aparición y el beneficio de HTML5. Si desea explorar HTML5 aún más, hay dos recursos más que me gustaría sugerir:
Aquí hay un ejemplo de las demostraciones navegables en HTML5 Demos. (no todos trabajaron para mi):
Si usted es un administrador de sitios de WordPress como muchos lectores Envato Tuts +, es posible que desee evaluar los temas futuros 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á la cantidad de errores en los que se encuentran nuestros clientes al tiempo que proporciona mejores experiencias de usuario.
En general, me ha impresionado bastante con HTML5. Y parece que seguirá evolucionando más rápido que cada 14 años..
Además, si está buscando otras utilidades que lo ayuden a aumentar sus habilidades de HTML5, no olvide ver lo que tenemos disponible en Envato Market.
Me encantaría escuchar más de tus comentarios sobre HTML5 y sugerencias para temas futuros sobre los que te gustaría aprender más. Por favor, siéntase libre de publicar sus preguntas y comentarios a continuación. También puedes contactarme en Twitter @reifman directamente. Para ver otros tutoriales que he escrito, navegue por la página de mi instructor Envato Tuts +.
Como hay muchos recursos útiles para HTML5, he incluido una ayuda adicional de algunos de los que me parecen más útiles:
Accentsconagua
