Categorías del Tutorial

icono_twiter
Jose Manuel Sánchez Suárez

Consultor tecnológico de desarrollo de proyectos informáticos.

Puedes encontrarme en Autentia: Ofrecemos servicios de soporte a desarrollo, factoría y formación

Somos expertos en Java/J2EE

Ver todos los tutoriales del autor

Fecha de publicación del tutorial: 2010-10-09

Tutorial visitado 16.798 veces Descargar en PDF
Introducción a HTML 5.

Introducción a HTML 5.


0. Índice de contenidos.


1. Introducción

En este tutorial vamos a realizar una breve introducción a las novedades que traerá la versión 5 de html. Sí, el título está bien escrito, hablamos de html, aunque también habrá la correlativa versión en xhtml, las diferencias entre ambas solo vendrán dadas por las restricciones típicas de un documento xml bien formado.

Visto lo anterior, lo primero que debemos saber es que no se trata solo de una actualización de la colección de marcas que podemos utilizar dentro del etiquetado de nuestras páginas. En versiones anteriores, frente a una nueva especificación, o al pasar a xhtml, las diferencias con las versiones anteriores venían dadas por la supresión de etiquetas en desuso y la incorporación de nuevas etiquetas que ampliaban funcionalidad. La nueva versión del estandar, además de lo anterior, viene de la mano de nuevas y muy interesantes características, como las que veremos a continuación.

Lo que debe quedar claro es que estas características, como la estandarización de CSS3, geolocalización, soporte de audio y video o la ampliación de los métodos de acceso al árbol DOM en javascript, no son estictamente del estándar HTML5, pero se asocian con la nueva versión, le dan mucha más potencia y la hacen mucho más atractiva.



2. A nivel de etiquetado.

Tenemos las siguientes características destacables:

  • Nuevas etiquetas:
    • hay una etiqueta específica para el menú de navegación, nav
    • hay etiquetas para distinguir secciones y artículos, pensadas para páginas de noticias o blogs, section y article
    • por fin hay un footer, siempre escribiendo la cabecera y hasta ahora no teníamos pie de página.
    • pero también hay un header, distinto del head, que serviría para insertar contenido visible en la cabecera de la página,
    • mark, indicará un texto resaltado,
    • time, indica una fecha u hora,
    • meter, representa un valor numérico,
    • progress, indica el estado de una tarea, lo que es una barra de progeso,
  • Nueva colección de tags que añaden contenido semántico:
    • aside, anotaciones que complementan el texto pero quedan fuera del texto,
    • figure, se podrá asociar contenido multimedia a un título o legend,
  • Nuevos tipos de componenentes de formulario:
    • input type="date | time | email | url | tel | search | ...", que permite introducir distintos tipos de contenidos produciendo una validación automática de los mismos, como un email válido; los input de selección de fecha y hora se pueden convertir en un date picker en función del navegador,
    • validación de campo requerido mediante el atributo required, así como mínimo y máximo,
    • input spinner, a través del atributo step y type,
    • sliders, a través de type="range"
    • validaciones con expresiones regulares
    • restricción de valores en un input a través de un dataList
    • el atributo placeholder permitirá asignar un texto por defecto sombreado a los inputs (el típico de Google en el campo de búsqueda de firefox),

Hay etiquetas que han caido en desuso y otras características también interesantes que no he incluido, podéis consultar todas las etiquetas en forma de tabla periódica en el siguiente enlace

  • http://joshduck.com/periodic-table.html

    A continuación un ejemplo de documento html5:

    <!DOCTYPE html>
    <html>
    <head>
      <title>HTML5 test</title>
      <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
    </head>
    <body>
      <header>
         <nav>
           <ul>
             <li><a href="#">Inicio</a></li>
             <li><a href="#">Pedidos</a></li>
             <li><a href="#">Facturas</a></li>
             <li><a href="#">Administración</a></li>
           </ul>
        </nav>
        <form>
          <input type="search" name="q" placeholder="Búsqueda" />
        </form>
      </header>
      <section>
          <article>
            <header>
              <h2>Noticia #1</h2>
            </header>
            <section>
              <p>Texto de la noticia #1...</p>
            </section>
          </article>
          <article>
            <header>
              <h2>Noticia #2</h2>
            </header>
            <section>
              <p>Texto de la noticia #2...</p>
            </section>
          </article>
      </section>
      <aside>
        <form>
         <p><label>Nombre: <input name="name" required></label></p>
         <p><label>E-mail: <input name="email" type="email" required></label></p>
         <p><label>Edad: <input type="number" min="0" max="99" step="1" value="33"></label></p>
         <p><label>Edad: <input type="range" min="0" max="10" step="2" value="6"></label></p>
         <p><label>URL: <input name="url" type="url"></label></p>
         <p><label>Commentario: <textarea name="comment" required></textarea></label></p>
         <p><input type="submit" value="Enviar"></p>
        </form> 
      </aside>
      <footer>
        <p>Copyleft 2010</p>
      </footer>
    </body>
    </html>
    


    3. A nivel de javascript.

    Tenemos las siguientes características destacables:

    • nuevos métodos de acceso a los nodos del árbol DOM que incorporan las facilidades que, hasta ahora, solo teníamos con librerías de javascript como prototype.js o jQuery. Son métodos como:
      • document.getElementsByClassName: que permite recuperar todos los nodos del árbol DOM con el mismo estilo de clase,
      • document.querySelectorAll y document.querySelector: viene a sustituir lo que en jQuery es la propia función jQuery o el alias $, heredado de prototype, que permite realizar consultas al árbol DOM para recuperar nodos con distintos selectores o combinación de los mismos,
      • <script language="javascript">
          document.getElementsByClassName("style1");
        
          document.querySelectorAll("ul li:nth-child(odd)");
        
          document.querySelector("table.test > tr > td");
        </script>
        
    • soporte drag & drop nativo.
      <script language="javascript">
      var dragItems = document.querySelectorAll('[draggable=true]');
      
      for (var i = 0; i < dragItems.length; i++) {
        addEvent(dragItems[i], 'dragstart', function (event) {
          event.dataTransfer.setData('Text', this.id);
        });
      }
      
      var bin = document.querySelector('#dropable');
      
      addEvent(bin, 'drop', function (e) {
        if (e.stopPropagation) e.stopPropagation();
      
        var el = document.getElementById(e.dataTransfer.getData('Text'));
        el.parentNode.removeChild(el);
      
        return false;
      });
        
      </script>
      
    • web storage o almacenamiento local de datos, que viene a solventar las limitaciones de almacenamiento de las cookies, permitiendo almacenar mucha más información en el cliente dando pie a trabajar con aplicaciones web como si fuesen aplicaciones de escritorio en modo offline, para ello también disponemos de un API de caché que permite indicar a través de un fichero de manifest, qué recursos deben ser cacheados,
      <script language="javascript">
      
      window.localStorage['value'] = document.getElementById("comments");
      
      document.getElementById("comments") = window.localStorage['value'];
      
      </script>
      
    • existirá la posibilidad de disponer de bases de datos SQL en cliente, ¿habíais pensado alguna vez en la posibilidad de tener que escribir sentencias SQL en javascript?, pues si; ¿que será lo siguiente? ¿cuánto tardaremos en tener una versión de hibernate para javascript? ;-),
      <script language="javascript">
      var db = window.openDatabase("Items", "1.0");
      db.transaction(function(tx) {
        tx.executeSql("SELECT * FROM Item", [], successCallback, errorCallback);
      });
      </script>
      
    • geolocalización: mediante una simple invocación a un método javascript nativo, podremos obtener la localización del equipo cliente, previa aceptación del usuario a facilitar dicha información,
      <script language="javascript">
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
          var lat = position.coords.latitude;
          var lng = position.coords.longitude;
        });
      }
      </script>
      
    • web workers: permite la ejecución de scripts en segundo plano, son procesos de larga duración y pueden consumir mucha memoria que hasta ahora se podían implementar con la función window.setTimeOut(). Los workers tienen las siguientes ventajas: se ejecutan en threads separados, de forma concurrente, no bloquean la interfaz de usuario, pueden ser dedicados (al tab) o compartidos por varios tabs o por la ventana e, incluso, podrían persistir al cierre de la misma.
      <script language="javascript">
        var worker = new Worker('myjavascript.js');
        worker.onmessage = function(event) { alert(event.data); };
      </script>
      
    • web sockets: es la implementación de la comunicación bidireccional entre el cliente y el servidor, lo que podemos denominar push o comet, y que antes hacíamos con Ajax a través del objeto XMLHttpRequest. Con HTML5 ya no será necesario su uso puesto que provee de un mecanismo estándar para realizar dicha comunicación invocando directamente a un método send() que remitirá la información al servidor.
      <script language="javascript">
      var socket = new WebSocket(location);
      socket.onopen = function(event) {
        socket.postMessage("Hola mundo, WebSocket");
      }
      socket.onmessage = function(event) { alert(event.data); }
      socket.onclose = function(event) { alert("closed"); }
      
      </script>
      
    • notificaciones: huyendo de los alerts, permiten notificar al usuario eventos que se producen en una ventana fuera del navegador, con lo que, aunque esté minimizada la misma se mostrarán al usuario,
      <script language="javascript">
      function RequestPermission (callback) {
         window.webkitNotifications.requestPermission(callback);
      }
       
      function showNotification(){
         if (window.webkitNotifications.checkPermission() > 0) {
            RequestPermission(showNotification);
         }
         else {
            window.webkitNotifications.createNotification("image.png",
            "Título", "Cuerpo").show();
         }
      }
      
      </script>
      


    4. Soporte para media.

    • Soporte para audio y video: que nos permitirá insertar contenido media sin necesidad de hacer uso de flash,
      
      <audio src="mp3/sonido.mp3" type="audio/mp3" controls>
        		Your browser does not support the audio element.  
      </audio>
      <br />
      <video src="video/presentacion.ogg" autoplay />
      
      
      

      Es bastante interesante la compatibilidad con navegadores con versiones anteriores, de modo que si el navegador no soporta html5 se renderizará el contenido de las etiquetas, en el que se podría introducir, por ejemplo, un plugin en flash que proporcione el mismo soporte de audio o video.

    • Posibilidad de acceso a los dispositivos de micro y webcam, que nos permitirán:

      • mostrar el video al propio usuario,
      • grabar el video y audio,
      • enviar y recibir imágenes de la webcam,
    • svg: renderización de gráficos en función de un documento SVG (Scalable Vector Graphics),
          <svg>
            <circle id="myCircle"
                    cx="100" cy="75" r="50"
                    fill="blue"
                    stroke="firebrick"
                    stroke-width="3" />
            <text x="60" y="155">Hello World</text>
          </svg>
      
    • canvas: nos permitirá renderizar imágenes sin necesidad de plugins, generando de forma dinámica el contenido a través de javascript , y es el elemento de la polémica, en el que muchos han visto la muerte del flash, como hasta ahora lo conocíamos,
      <canvas id="mycanvas" width="200" height="100">
      	Your browser does not support the canvas element.  
      </canvas>
      
      <script language="javascript">
      
      var canvas = document.getElementById('mycanvas');
      
      var context = canvas.getContext('2d');
      
      contexto.fillRect(50, 0, 10, 150);
      
      </script>
      
      


    5. Soporte para css3.

    Tenemos las siguientes características destacables:

    • un estilo nativo para esquinas redondeadas, gradient y sombreado.
      
      <style type="text/css">
      #style1 {
      border-radius: 15px;
      }
      </style>
      
      
    • será posible utilizar cualquier tipo de fuente, no solo las que tenga instaladas el cliente. Para ello, bastará con añadir al estilo la url de la tipografía, del ttf.
      
      <style type="text/css">
      @font-face {
        font-family: 'Comics';
        src: url(Comics.ttf);
      }
      header {
        font-family: 'Comics';
      }
      </style>
      
      
    • text wrapping con mayor parametrización que permite por ejemplo incluir puntos suspensivos...
      
      <style type="text/css">
      div {
        text-overflow: ellipsis;
      }
      </style>
      
      
    • opacidad estándar en todos los navegadores,
      
      <div style="background: rgba(255, 0, 0, 1)  ;"></div>
      
      
    • soporte para transiciones entre estilos basadas en el concepto análogo de jQuery, con un periodo de cadencia,
      
      <style type="text/css">
      
      #box {
        -webkit-transition: margin-left 1s ease-in-out;
      }
      
      </style>
      
      <script language="javascript">
      
      document.getElementById('box').className = 'left';
      document.getElementById('box').className = 'right'; 
      
      </script>
      
      
      
    • animaciones, al estilo de las que disponemos con script.aculo.us para prototype.js o con jqueryUI para jQuery.
      <style type="text/css">
      div {
        -webkit-animation-name: pulse;
        -webkit-animation-duration: 2s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-direction: alternate;
      }
      </style>
      
      

    6. ¿Una página de ejemplo?.

    Lo primero que debemos conocer es que el DOCTYPE de HTML5 es el siguiente:

    <!DOCTYPE html>
    

    El DOCTYPE es lo que diferencia las versiones de los documentos html, y define el contrato que deben seguir los documentos XML en general. En HTML5 es sencillo, no hay referencia a DTD, de modo que los navegadores que no lo soporten harán uso de su versión de html por defecto.

    Me voy a remitir en este punto a la página de ejemplo que ha generado la gente de Google para explorar las capacidades de HTML5 y que se usó en el reciente Google D3vF3st de Madrid para demostrar la compatibilidad de Google Chrome con el estándar; por esto último la recomendación, hoy día, es verla con Google Chrome.

    http://slides.html5rocks.com

    También es buena recomendación:

    http://html5demos.com/

    donde se puede ver la compatibilidad hoy día con los navegadores.



    7. ¿Cuál es el estado actual de la especificación y las implementaciones?.

    La especificación está aún en borrador, aunque sufrirá ya pocas modificaciones y, si bien en el arranque se barajaban como fechas para tener las primeras implementaciones 2012 e incluso 2022, los navegadores soportan ya bastante del estándar, algunos más que otros. La idea es que la especificación se cerrará cuando haya, al menos, dos implementaciones completas del estándar, esto es, dos navegadores que la soporten al 100%.

    Para saber qué de compatible es tu navegador favorito con HTML5, puedes visitar la siguiente página: http://www.html5test.com.

    ¿Comenzaríamos ahora a desarrollar basándonos en HTML5?, si no fuese una aplicación para internet y tuviesemos poder de decisión sobre qué navegador tendrá instalado el cliente, sí. Podríamos decir que estamos en un primer estadio de la tecnología y que si lo pillamos a tiempo nos podemos subir al carro y estar preparados para cuando esté maduro.



    8. Referencias.



    9. Conclusiones.

    Como os podéis imaginar, esta breve introducción da pie a muchos más tutoriales sobre cada una de las nuevas características de HTML5, iremos poco a poco sumergiéndonos en ellos.

    Siempre intentaremos no tener que bajar a nivel del lenguaje de cliente para desarrollar, porque es más dificil depurar, siempre estaremos a expensas de cómo se comporte el código en los distintos navegadores,... que os voy a contar, que no sepáis, a los que habéis estado trabajando los últimos años con interfaces|documentos web.

    La esperanza es que tendremos librerías de componentes visuales que nos den soporte a las nuevas características, las librerías de componentes JSF se terminarán adaptando y, para los que trabajen con Spring MVC ya hay una primera implementación basada en HTML5 de un proyecto llamado Summer, como la continuación del Spring ;-)

    Un saludo.

    Jose

    jmsanchez@autentia.com

    A continuación puedes evaluarlo:

    Regístrate para evaluarlo

    Por favor, vota +1 o compártelo si te pareció interesante

    Share |
    Anímate y coméntanos lo que pienses sobre este TUTORIAL: