MSDN España

Noticias, avisos, reflexiones... del equipo que hay detrás de MSDN en España... también tendremos alguna que otra firma invitada :)

Reto HTML5: Primeros pasos con HTML5

Reto HTML5: Primeros pasos con HTML5

  • Comments 6

HTML5 es una nueva definición del estándar para la construcción de páginas Web. Pese a que la definición no está completada ya hay una gran cantidad de componentes que podemos aprovechar en los navegadores modernos.

¿Qué necesito para empezar?

image WebMatrix. La nueva herramienta de desarrollo de Microsoft que incluye todo lo necesario para el desarrollo de sitios web. Desarrollar sitios web con HTML5 nunca ha sido tan fácil. Descargalo ya.

clip_image001

Internet Explorer 9. Si no tienes instalado Internet Explorer 9 deberías probarlos. Puedes descargarlo desde aquí.

clip_image003

Visual Studio. Si ya tienes VS instalado perfecto, pero por si acaso, aquí tienes el enlace de descarga de la versión gratuita express o de la Ultimate Trial.

clip_image005

Web Standards Update for Microsoft Visual Studio 2010 SP1. Con esta extensión de Visual Studio tendrás acceso funcionalidades de soporte de HTML5 en el entorno de desarrollo. Haz clic aquí para descargarla.

Si necesitas ayuda o tienes algún problema con cualquiera de los pasos de instalación o del reto, puedes añadir un comentario a este post, twitearnos un mensaje a @esmsdn o simplemente twitear con el hashtag #retosmsdn.

¿Por qué comenzar a utilizar HTML5?

HTML5 es el futuro de la Web. Esta revisión del estándar supone un enorme avance en términos de claridad y simplicidad, y nos permite la construcción de HTML más rico de forma más limpia y mantenible.

HTML5 se construye desde HTML4, es decir todo lo que ya tenemos sigue funcionando. Sin cambios. Si queremos explotar las ventajas y funcionalidades nuevas tendremos que hacer pequeños cambios, sobre todo simplificaciones.

Veamos qué tipo de simplificaciones. En estos fragmentos de código podemos ver frente a frente las estructuras básicas de una página HTML4 y HTML5.

HTML4

HTML5

<!DOCTYPE HTML PUBLIC 
"-//W3C//DTD HTML 4.01 Transitional//EN"
 
     "http://www.w3.org/TR/html4/loose.dtd"> <html> <head>
     <meta http-equiv="Content-Type" 
content="text/html; charset=utf-8" />
     <link type="text/css" 
rel="stylesheet"
  href="somecss.css" />
     <title></title> </head> <body> </body> </html
>
<!DOCTYPE HTML>
<html>
<head>
     <meta charset="utf-8" />
      <link rel="stylesheet" 
href="somecss.css" />
     <title></title> </head> <body> </body> </html
>

Como podéis observar, las únicas diferencias entre ambas estructuras se refieren a la simplificación de los atributos para describir los elementos. Vamos a recorrerlos para entender las diferencias.

DOCTYPE

El elemento DOCTYPE queda reducido a la mínima expresión. Ya no se hace necesario declarar el esquema con un identificador público ("-//W3C//DTD HTML 4.01 Transitional//EN"), ni indicar una URI ("http://www.w3.org/TR/html4/loose.dtd"). Basta con nombrar el DOCTYPE como html. Se da por entendido que los navegadores saben de qué estamos hablando.

Este comportamiento, simplificar el lenguaje de marcado a base de no indicar lo evidente es el patrón habitual en HTML5.

Pasamos de largo sobre el elemento html dado que no se han producido cambios significativos.

head

Lo primero que observamos en este elemento es la reducción de los tags meta. En este caso podemos ver que la descripción del conjunto de caracteres de la página Web ha quedado reducido a la mínima expresión.

Se trata de un nuevo atributo de la etiqueta meta definido para HTML5 (http://www.w3.org/TR/html-markup/meta.html#meta). Los valores que se pueden asignar a este atributo son los habituales definidos por la IANA como nombres para los conjuntos de caracteres (http://www.iana.org/assignments/character-sets). Lo cierto es que utf-8 cubre completamente las necesidades de encoding que podamos tener y es soportado por las herramientas y navegadores habituales.

En el caso de la etiqueta link el uso del atributo type se hace opcional. Se supone que los navegadores pueden deducir por la extensión del archivo incluido el tipo de inclusión que debe hacerse.

La estructura del documento

En esta nueva versión del estándar encontraremos, entre otras cosas, un conjunto de etiquetas cuya misión es dar cierto contenido semántico a la estructura del documento.

Hasta ahora, hemos encontrado con frecuencia estructuras de páginas semejantes a la siguiente:

<html>
<head>
</head>
<body>
     <div id="header">
     </div>
     <div id="menu">
     </div>
     <div id="content">
     </div>
     <div id="footer">
     </div> </body> </html>

HTML5 define una serie de etiquetas cuya única misión es dotar de contenido semántico a los elementos estructurales de la página. De esta forma, aplicaremos las etiquetas al contenido en función del propósito del contenido.

Por ejemplo, sobre una página como la siguiente:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd"> <html> <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <link type="text/css" rel="stylesheet" href="somecss.css" />
     <title>html5, primer reto</title> </head> <body>
     <div id="header">
         <a href="home.htm" title="Home">
             <img src="cosa.png" class="logo" />
         </a>
         <h1>Este es el encabezado de mi pagina</h1>
     </div>
     <div id="nav">
         <a href="home.htm">Home</a>
         <a href="Users.htm">Users</a>
         <a href="Services.htm">Sevices</a>
     </div>
     <div id="content">
         <div>Este es el titulo de un articulo
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
         </div>
         <div>Otro articulo mas
             <p>Quisque iaculis placerat velit vestibulum ornare. </p>
         </div>
         <div>El tercero
             <p>Nulla consectetur blandit enim eget elementum. Nam magna arcu, vehicula</p>
          </div>
         <div>El ultimo articulo

             <p>Etiam fermentum, urna vitae gravida facilisis, felis eros sodales leo</p>
        </div>
     </div>
     <div id="footer">Pie de pagina</div> </body> </html>

Aplicaríamos las nueva etiquetas de contenido semántico para reforzar la estructura:

 
<!DOCTYPE html>
<html lang="es">
<head>
     <meta charset="utf-8" />
     <title>html5, primer reto</title> </head> <body>
     <header>
         <a href="home.htm" title="Home">
             <img src="cosa.png" class="logo" alt="logo" />
         </a>
         <h1>Este es el encabezado de mi pagina</h1>
     </header>
     <nav>
         <a href="home.htm">Home</a>
  <a href="Users.htm">Usuarios</a>
  <a href="Services.htm">Servicios</a>
     </nav>
     <section>
         <article>
             <h1>Este es el titulo de un articulo</h1>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
         </article>
         <article>
             <h1>Otro articulo mas</h1>
             <p>Quisque iaculis placerat velit vestibulum ornare.</p>
         </article>
         <article>
             <h1>El tercero</h1>
             <p>Nulla consectetur blandit enim eget elementum. Nam magna arcu, vehicula</p>
         </article>
         <article>
             <h1>El ultimo articulo</h1>
             <p>tiam fermentum, urna vitae gravida facilisis, felis eros sodales leo,</p>
         </article>
     </section>
     <footer>
     Pie de pagina
     </footer> </body> </html>

Es decir reemplazaríamos las etiquetas de división por las correspondientes header, footer, section, article, aside, etc.

Al mismo tiempo se ha reforzado el papel semántico de las ya existentes etiquetas h1…h6, en este caso al encontrarse en el contenido de etiquetas article, estos títulos son considerados como elementos descriptivos dentro del artículo.

En el código encontramos, también, un ejemplo de uso de la nueva etiqueta nav. La misión de esta etiqueta es definir grupos de vínculos para navegación. Aunque los navegadores y lectores de pantalla no implementan, todavía, el reconocimiento de la etiqueta nav es conveniente tener en cuenta la semántica de la etiqueta.

Tu turno… ¡el Reto! – Aplícale HTML5 a tu site

Es el momento de ponerse manos a la obra. Toma tu propio site, tu blog, tu aplicación Web, lo que sea… y aplícale la estructura que acabamos de ver. Enseguida verás lo sencillo que resulta.

Recuerda las descargas:

· Internet Explorer 9

· Visual Studio Express

· Web Standards Update for Microsoft Visual Studio 2010 SP1

Si teneis cualquier comentario que hacer en este post o en twitter (@esmsdn y el hashtag #retosmsdn) estaremos encantados de con vuestro feedback.

Boris Armenta -@borisarm- Developer Evangelist

Leave a Comment
  • Please add 8 and 1 and type the answer here:
  • Post
  • En qué casos hay que usar section? No debería ser también el footer, header y nav una "section" de la página también?

  • En realidad no.

    El estandar dice que "The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading

    Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information."

    Mientras que "The header element represents a group of introductory or navigational aids"

    Y también "The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like."

    www.w3.org/.../sections.html

    De todas formas puedes implementarlo como quieras, esta estructura semántica es solo una recomendación tendente a simplificar y enriquecer.

  • Pues estaba dispuesto a testar WebMatrix, pero al ver que me intentaba instalar toda la "morralla" de SQL Server... .Net Framework 4... mira, paso... ya me instalaré el dreamweaver o alguna otra alternativa.

    ¿Para qué rayos me intenta instalar esto el SQL Server? no lo entiendo.

    Instalacion cancelada. ;)

  • Hola Javi

    WebMatrix además de un entorno de desarrollo tiene la posibilidad de tener una plataforma completa para desarrollar :)  Tiene un IIS express, SQL Compact, .NET... todo en un único envase.

    Sobre el SQL Compact, aclarar que no es un SQL Server tradicional, es un servidor en memoria del proceso, muy ligero, para trabajar con datos en las aplicaciones web. En este post puedes echarle un vistazo rápido a cómo funciona el SQL Server compact  www.microsoft.com/.../web-development-101-part-5-using-data

    Saludos

    David Salgado - MS Technology Evangelist - @davidsb

  • Mi temor es si chocará con el XAMPP de Apache Friends, o sea, si habrá conflictos del WebMatrix (.net) con el servidor local (PHP, MySQL) que tengo para instalar y probar los Wordpress, Joomla! y Drupal. Me da un poco de respeto todo lo que hay que instalar para probar un servidor web con los producto de Microsoft. ¿Alguien tiene las dos plataformas instaladas?

  • Hola de nuevo :)

    No tenddrái porqué haber conflicto, los pones a servir en diferente puesto y listo. A modo anecdótico, te comento que webmatrix además de herramienta de desarrollo es una herramienta de instalación y despliegue de esas herramientas que comentas, puedes utilizarlo para descargar e instalar un Joomla, Drupal, Wordpress... si, aunque sean PHP :D  Te descarga e instala el stack que necesites para correr un drupal por ejemplo

    Saludos,

    David Salgado - @davidsb

Page 1 of 1 (6 items)