¿Qué es HTML5?

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

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 +):

¿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 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:

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:

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:

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:

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:

Reproducción de audio y video: proporciona reproducción multimedia a través de navegadores sin complementos.
Geolocalización: identifica la ubicación del visitante.
Arrastrar y soltar: para cargar archivos desde el navegador con gestos simples.
Caché de aplicaciones: proporciona soporte para ejecutar sitios HTML sin conexión.
Trabajadores web: ejecuta JavaScript en segundo plano (sin bloqueo).
Servidor de eventos enviados: permite a los servidores actualizar las páginas web en un navegador después de que se han cargado, más simple y más eficiente que AJAX y JavaScript.
Almacenamiento de datos sin conexión: proporciona una forma de almacenar datos localmente en el navegador independientemente de las cookies. Cómo Utilizar HTML5 Almacenamiento en Su Sitio Web Sin Conexión ofrece un buen recorrido.

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 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:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title></title>
    <meta name="author" content="" />
  <meta name="description" content="" />

 <link rel="stylesheet" href="assets/css/style.css" />

  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <header>
    	<h1><a href="/">Page Title</a></h1>
		<nav>
			<ol>
				<li><a href="">Nav Link 1</a></li>
				<li><a href="">Nav Link 2</a></li>
				<li><a href="">Nav Link 3</a></li>
			</ol>
		</nav>
	</header>
	<article>
		<h1>Article Header</h1>
		<p>Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.</p>

		<h2>Article Subhead</h2>
		<p>Vestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.</p>

	</article>

	<aside>
		<h2>Sidebar Content</h2>
	</aside>

	<footer>
		<p><small>&copy; Copyright Your Name Here 2014. All Rights Reserved.</small></p>
	</footer>

</div>

  <script src="scripts/js/scripts.js"></script>
</body>
</html>

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:

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:

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:

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):

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=620">
<title>HTML5 Demo: SVG clock animation</title>
<link rel="stylesheet" href="css/html5demos.css">
<script src="js/h5utils.js"></script></head>
<body>
<section id="wrapper">
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/14060/azcarbon_2_1_0_VERT"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
    <header>
      <h1>SVG clock animation</h1>
    </header>

<style>
  /* any custom styles live here */
  line {
  stroke-width: 3px;
  stroke: black;
  }      
</style>
<article>
  <p>SVG clock animation by <a href="http://twitter.com/davidbasoko">David Basoko</a>.</p>
    <div>
      <label for="zoominput">Zoom</label>
      <select id="rangeinput" onchange="CLOCK.zoom();">
        <option value="1" selected="selected">1x</option>
        <option value="2">2x</option>
        <option value="3">3x</option>
        <option value="4">4x</option>
        <option value="5">5x</option>
      </select>
    </div>
    <div>
      <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" >
        <g>
          <circle id="circle" style="stroke: black; fill: #f8f8f8;" cx="100" cy="100" r="100"/>
          <line id="hour0" x1="100" y1="10"  x2="100" y2="0"/>
          <line id="hour1" x1="150" y1="13"  x2="145" y2="22"/>
          <line id="hour2" x1="187" y1="50"  x2="178" y2="55"/>
          <line id="hour3" x1="190" y1="100" x2="200" y2="100"/>
          <line id="hour4" x1="187" y1="150" x2="178" y2="145"/>
          <line id="hour5" x1="150" y1="187" x2="145" y2="178"/>
          <line id="hour6" x1="100" y1="190" x2="100" y2="200"/>
          <line id="hour7" x1="50"  y1="187" x2="55"  y2="178"/>
          <line id="hour8" x1="13"  y1="150" x2="22"  y2="145"/>
          <line id="hour9" x1="0"   y1="100" x2="10"  y2="100"/>
          <line id="hour10" x1="13"  y1="50"  x2="22"  y2="55" />
          <line id="hour11" x1="50"  y1="13"  x2="55"  y2="22" />
        </g>
        <g>
          <line x1="100" y1="100" x2="100" y2="45" style="stroke-width: 6px; stroke: green;" id="hourhand"/>
          <line x1="100" y1="100" x2="100" y2="15" style="stroke-width: 4px; stroke: blue;"  id="minutehand"/>
          <line x1="100" y1="100" x2="100" y2="5"  style="stroke-width: 2px; stroke: red;"   id="secondhand"/>
        </g>
      </svg>
    </div>

</article>
<script>
var CLOCK = (function() {
    var drawClock = function() {
        var INITIAL_R = 100;

        var zoom = document.getElementById("rangeinput").value;
        
        var r = INITIAL_R * zoom;

        // Draw Circle
        var circle = document.getElementById("circle");
        circle.setAttribute('r', r);
        circle.setAttribute('cx', r);
        circle.setAttribute('cy', r);

        // Draw Hours
        for(var i = 0; i < 12; i++) {
            var hour = document.getElementById("hour"+i);
            var degrees = i * 30;
            hour.setAttribute('x1', getX(degrees, r, 0.9)); // 90% of radio's length.
            hour.setAttribute('y1', getY(degrees, r, 0.9)); // 90% of radio's length.
            hour.setAttribute('x2', getX(degrees, r));
            hour.setAttribute('y2', getY(degrees, r));
        }

        // Draw hands
        drawHands();
    };

    var drawHands = function() {
        // Constants for hand's sizes.
        var SECONDS_HAND_SIZE = 0.95,
        MINUTES_HAND_SIZE = 0.85,
        HOURS_HAND_SIZE = 0.55;

        var circle = document.getElementById("circle");

        // Clock Circle's Properties
        var r = circle.getAttribute('r'),
        cx = parseInt(circle.getAttribute('cx')),
        cy = parseInt(circle.getAttribute('cy'));

        // Current time.
        var currentTime = new Date();

        // Draw Hands
        drawHand(document.getElementById("secondhand"),
                 currentTime.getSeconds(),
                 SECONDS_HAND_SIZE,
                 6);
        drawHand(document.getElementById("minutehand"),
                 currentTime.getMinutes(),
                 MINUTES_HAND_SIZE,
                 6);
        drawHand(document.getElementById("hourhand"),
                 currentTime.getHours(),
                 HOURS_HAND_SIZE,
                 30);
        
        function drawHand(hand, value, size, degrees) {
            var deg = degrees * value;
            x2 = getX(deg, r, size, cx),
            y2 = getY(deg, r, size, cy);
            
            hand.setAttribute('x1', cx);
            hand.setAttribute('y1', cy); 
            hand.setAttribute('x2', x2);
            hand.setAttribute('y2', y2); 
        }
    };

    /*
     * Get a Point X value.
     * degress. Angle's degrees.
     * r. Circle's radio.
     * adjust. Percent of length.
     * x. Start of X point.
     */
    function getX(degrees, r, adjust, x) {
        var x = x || r, 
        adj = adjust || 1;
        return x + r * adj * Math.cos(getRad(degrees));
    }

    /*
     * Get a Point Y value.
     * degress. Angle's degrees.
     * r. Circle's radio.
     * adjust. Percent of length.
     * x. Start of Y point.
     */   
    function getY(degrees, r, adjust, y) {
        var y = y || r,
        adj = adjust || 1;
        return y + r * adj * Math.sin(getRad(degrees));
    }

    // Convert from degrees to radians.
    function getRad(degrees) {
        var adjust = Math.PI / 2;
        return (degrees * Math.PI / 180) - adjust;
    }
        
    return {
        init: function() {
            drawClock();
            setInterval(drawHands, 1000);
        },
        zoom: function() {
            drawClock();
        }
    };
})();
CLOCK.init();
</script>
<a id="html5badge" href="http://www.w3.org/html/logo/">
<img src="http://www.w3.org/html/logo/badge/html5-badge-h-connectivity-device-graphics-multimedia-performance-semantics-storage.png" width="325" height="64" alt="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage" title="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage">
</a>
    <footer><a href="/">HTML5 demos</a>/<a id="built" href="http://twitter.com/rem">@rem built this</a>/<a href="#view-source">view source</a></footer> 
</section>
<a href="http://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
<script src="js/prettify.packed.js"></script>
<script>
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
</body>
</html>

¿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í):

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: