Fundamentos HTML5, Parte 1

Mojándose los pies

El HTML5 refleja los monumentales cambios en la forma en que usted hace negocios en la Web y en la nube. Este artículo es el primero de una serie de cuatro, diseñados para mostrar los cambios en HTML5, comenzando con las nuevas etiquetas y organización de página, y proporcionando información de alto nivel sobre diseño de páginas Web, la creación de formularios, el uso y valor de las APIs, y las posibilidades creativas que ofrece Canvas.

Grace Walker, IT Consultant, Walker Automated Services

Grace Walker, es asociada en Walker Automated Services en Chicago, Illinois, es consultor en TI con una formación diversa y amplia experiencia. Ella ha trabajado en las TI como gestora, administradora, programadora, instructora, analista de negocios, analista técnica, analista de sistemas y desarrolladora Web en varios entornos, incluyendo telecomunicaciones, educación, servicios financieros y software.



14-06-2011

HTML5 es un lenguaje diseñado para organizar contenido Web. Tiene por objeto facilitar el diseño y el desarrollo Web, mediante la creación de una IU estandarizada e intuitiva para lenguaje de marcación. HTML5 proporciona los medios para diseccionar y compartimentar sus páginas, y le permite crear componentes discretos que no sólo están diseñados para organizar su sitio lógicamente, sino también para darle a su sitio capacidades de sindicación. El HTML5 podría llamarse el"enfoque de correlación de información al diseño de sitios Web" porque incorpora la esencia de la correlación de la información, dividiendo y etiquetando la información para hacerla fácil de entender y de utilizar. Este es el fundamento de l la dramática utilidad semántica y estética del HTML5. El HTML5 da a diseñadores y desarrolladores de todos los niveles la capacidad para publicar cualquier cosa al mundo, desde simple contenido de texto, hasta rica en interactiva multimedia.

Acrónimos de uso frecuente

  • API: Application programming interface
  • CSS3: Cascading style sheet version 3
  • GUI: Graphical user interface
  • HTML: Hypertext Markup Language
  • HTML5: HTML version 5
  • SQL: Structured Query Language
  • IU: Interfaz de usuario

El HTML5 ofrece herramientas para la administración efectiva de datos, dibujo, video y audio. Facilita el desarrollo de aplicaciones para diferentes navegadores para la Web, así como para dispositivos portátiles. HTML5 es una de las tecnologías que está impulsando los avances de los servicios de computación móvil en nube, gracias a que permite mayor flexibilidad, permitiendo así el desarrollo de sitios Web emocionantes e interactivos. También introduce nuevas etiquetas y mejoras, incluyendo una elegante estructura, controles de formulario, APIs, multimedia, soporte de bases de datos, y una velocidad de procesamiento significativamente más rápida.

Las nuevas etiquetas en HTML5 son altamente evocadoras, encapsulando su rol y uso. Las versiones pasadas de HTML usaban etiquetas que no eran tan descriptivas. No obstante, HTML5 tiene etiquetas altamente descriptivas e intuitivas. Proporciona etiquetas de contenido enriquecido que identifican el contenido inmediatamente. Por ejemplo, la etiqueta <div> que ha sido bastante trabajada, ha sido complementada con las etiquetas <section> y <article> . La adición de las etiquetas <video>, <audio>, <canvas> y <figure> también ofrece una descripción más precisa del tipo específico del contenido.

El HTML5 proporciona:

  • Etiquetas que describen exactamente lo que están diseñadas a contener
  • Comunicaciones de red mejoradas
  • Almacenamiento general ampliamente mejorado
  • Web Workers para ejecutar procesos en segundo plano
  • La interfaz WebSocket para establecer conexión continua entre la aplicación residente y el servidor
  • Mejor recuperación de los datos almacenados
  • Velocidades mejoradas de almacenamiento y carga de páginas
  • Soporte para CSS3 para manejar la GUI, lo que significa que el HTML5 puede estar orientado a contenido
  • Manejo mejorado de formularios de navegador
  • Una API de base de datos basada en SQL que permite almacenamiento local del lado del cliente.
  • Bastidor y video, para añadir gráficas y video sin instalar plug-ins de terceros
  • La especificación Geolocation API, que utiliza capacidades de ubicación de teléfonos inteligentes para incorporar servicios y aplicaciones móviles de nube
  • Formularios mejorados que reducen la necesidad de descargar código JavaScript, permitiendo una comunicación más eficiente entre dispositivos móviles y servidores nube

El HTML5 crea una experiencia de usuario más atractiva: las páginas diseñadas utilizando HTML5 pueden proporcionar una experiencia similar a la de las aplicaciones de escritorio. El HTML5 también ofrece un desarrollo mejorado de múltiples plataformas al combinar la capacidad de las APIs con la ubicuidad del navegador. Usando HTML5 los desarrolladores pueden ofrecer una experiencia de aplicación moderna que cruza plataformas sin problemas.

Cuando usted dice HTML5, usted está usando método abreviado para innovación continua. Nuevas etiquetas, nuevas metodologías y una infraestructura de desarrollo general que descansa en la interacción del HTML5 y sus dos contrapartes, CSS3 y JavaScript. Esta es la esencia del fenómeno de procesamiento de aplicaciones centrado en el cliente. Además de las muchas implementaciones de escritorio de las tecnologías y métodos de la tecnología HTML5, el TML5 puede implementarse en navegadores Web de teléfonos móviles ricos en recursos—un mercado en crecimiento, como se ha visto con la popularidad y omnipresencia del Apple iPhone, Google Android y los teléfonos que operan el Palm webOS.

Un aspecto crítico del poder del HTML5 es el correlacionamiento de información—o bloqueo de contenido, si lo prefiere—que produce un proceso mucho más comprensible. Usted puede ver cuán efectiva se ha tornado esta herramienta para el diseño y el desarrollo al observar su dominio creciente sobre el mundo del procesamiento Web.

El HTML5 anuncia el advenimiento de un proceso semántico más efectivo a nivel de texto, y de mayor control sobre la construcción y el uso de los formularios. Todas estas cualidades y los muchos otros puntos finos de la innovación HTML5 son la base del dominio creciente de este paradigma. Muchas agencias de entidades, comerciales y de otro tipo—incluso muchas organizaciones involucradas más remotamente con el procesamiento de la información y las comunicaciones como actividad primaria de agencia—han sido presa de alguna u otra forma del desarrollo de este creciente fenómeno.

El HTML5 no es una lámpara mágica, y no hay ningún genio. Sin embargo, sus recursos técnicos y metodológicos lo han convertido en lo mejor que hay, después de frotar una lámpara.

Planee la página

Usted va a crear una página Web simple. Durante este proceso voy a hablar sobre varias de las nuevas etiquetas que han sido introducidas en el HTML5. Para crear una página Web efectiva y al mismo tiempo eficiente, usted debe desarrollar un plan que considere todos los componentes que desea elaborar.

La página que usted creará tendrá el alto nivel diseño mostrado en la Figura 1. El diseño de página contiene un área de Header, un área de Navigation, un área de Article que contiene tres secciones, un área Aside y, finalmente, un área Footer. Esta página está diseñada para funcionar en el navegador Google Chrome, eliminando parte de la obstrucción visual que puede traer consigo la rectificación de problemas de compatibilidad de navegador, y que también puede dificultar la comprensión de la estructura básica. La meta es crear una página que delinee claramente el uso de las nuevas etiquetas HTML5, mostrándole cómo usarlas para crear código bien formado y un diseño de página elegante.

Figura 1. Plan de la página Web de Acme United
Plan de la página Web de Acme United

En el proceso de creación de esta página, uso levemente CSS3, el cual es necesario para presentar adecuadamente páginas HTML5. El CSS3 es esencial para el estilo, la navegación y la sensación general de la página HTML5. Sus grupos de propiedades, que usted puede encontrar en el sitio de referencia W3Schools CSS3 (vea Recursos), incluyen algunos elementos útiles como fondo, fuente, marco y animación.

Sin embargo, antes de comenzar con la construcción de la página, usted necesita aprender sobre algunas de las nuevas etiquetas HTML5.


El área de Header de ejemplo contiene el título y el subtítulo de la página. Usted usa el contenido de la etiqueta <header> para crear el contenido del área Header de la página. La etiqueta <header> puede contener la información de apertura sobre una <section> y un <article> además de la página Web en sí. La página Web creada aquí tiene un área Header para la página, que se muestra en el alto nivel de diseño, así como un área de Header dentro de las áreas Article y Section. El Listado 1 muestra un ejemplo de etiqueta de marcación <header> .

Listado 1. Ejemplo de etiquete <header>
<header>
    <h1>Texto del encabezado</h1>
    <p> Aquí se puede incluir texto o imágenes</p>
    <p> Aquí también se ponen con frecuencia los logotipos</p>
</header>

La etiqueta <header> también puede contener una etiqueta <hgroup> , como se muestra en el Listado 2. La etiqueta <hgroup> agrupa los encabezados, usando los niveles de encabezado del <h1> al <h6> mostrados aquí con un encabezado principal y un sub-encabezado.

Listado 2. Ejemplo de etiqueta <hgroup>
<header>
    <hgroup>
          <h1>Encabezado Principal</h1>
          <h2>Sub-encabezado </h2>
    </hgroup>
    <p> Aquí se puede incluir texto o imágenes</p>
</header>

Usted crea el área Navigation de la página usando la etiqueta <nav> . El elemento <nav> define un área específicamente creada para la navegación. La etiqueta <nav> debe utilizarse para la navegación del sitio principal, no para que mantener enlaces contenidos en otras áreas de la página. El área Navigation puede contener código como el mostrado en el Listado 3.

Listado 3. Ejemplo de etiqueta <nav>
<nav>
     <ul>
          <li><a href="#">Inicio</a></li>
          <li><a href="#">Sobre nosotros</a></li>
          <li><a href="#">Nuestros productos</a></li>
          <li><a href="#">Contáctenos</a></li>
     </ul>
</nav>

Las áreas Article y Section

La página que usted está diseñando contiene una sección Article, que mantiene el contenido efectivo de la página. Usted usa la etiqueta <article> para crear esta área, y la etiqueta define contenido que puede ser usado independientemente de otro contenido que se encuentre en la página. Por ejemplo, si usted desea crear un feed RSS, puede usar <article> para identificar el contenido de forma única. La etiqueta <article> identifica contenido que puede ser removido y ubicado en otro contexto y ser completamente comprensible.

El área Article del plan de Acme United contiene tres áreas Section. Usted crea estas áreas usando la etiqueta <section> . Una <section> contiene áreas componentes relacionadas al contenido Web. La etiqueta <section> y—la etiqueta <article> también—pueden contener encabezados, pies de página, o cualquier otro componente requerido para completar la sección. La etiqueta <section> es para agrupar contenido. El contenido tanto de la etiqueta <section> como de la etiqueta <article> normalmente comienzan con un <header> y terminan con un <footer>, con el contenido de la etiqueta entre los dos.

La etiqueta <section> también puede contener etiquetas <article> , así como la etiqueta <article> puede contener la etiqueta <section> . La etiqueta <section> debe utilizarse para agrupar información similar, y la etiqueta <article> debe utilizarse para información como un artículo o blog que pueda ser removido y ubicado en un nuevo contexto sin afectar el significado del contenido. La etiqueta <article> , como su nombre lo indica, proporciona un paquete completo de información. En contraste, la etiqueta <section> contiene información relacionada, pero la información no puede ser colocada en un contexto diferente al suyo, porque se perderá su significado.

Vea el Listado 4 para un ejemplo del uso de las etiquetas <article> y <section> .

Listado 4. Ejemplo de uso de las etiquetas <article> y <section>
<article>
     <section>
          Content
     </section>
     <section>
          Content
     </section>
</article>
<section>
     <article>
          Content
     </article>
     <article>
          Content
     </article>
</section>

Elementos de Imagen

Tanto la etiqueta <section> como la etiqueta <article> , así como las etiquetas <header> y <footer> pueden contener la etiqueta <figure> . Utilice esta etiqueta para incluir imágenes, diagramas y fotos.

La etiqueta <figure> puede contener el <figcaption>, que a su vez contiene la leyenda de la figura contenida en la etiqueta <figure> , permitiéndole ingresar una descripción que puede vincular más la figura con su contenido. El Listado 5 proporciona un ejemplo de la estructura de las etiquetas <figure> y <figcaption> .

Listado 5. Ejemplo de etiquetas <figure> y <figcaption>
<figure>
     <img src="/figure.jpg" width="304" height="228" alt="Picture">
     <figcaption>Leyenda de la figura</figcaption>
</figure>

Elementos de Medios

Las etiquetas <section> y <article> pueden contener varios elementos de medios. El HTML5 ofrece etiquetas que permiten comprender rápidamente su contenido. Los elementos de medios, como música y video que antes sólo se incorporaban, ahora pueden identificarse con mayor precisión.

La etiqueta <audio> identifica contenido de sonido, como música u otras secuencias de audio. La etiqueta <audio> posee atributos que controlan qué, cuándo y cómo se reproducirá el audio. Los atributos son src, preload, control, loop y autoplay. En el ejemplo mostrado en el Listado 6, el audio comienza a reproducirse tan pronto se carga la página, sonará continuamente y ofrecerá controles para que el usuario pueda detener o reiniciar el audio.

Listado 6. Ejemplo de etiqueta <audio>
<audio src="MyFirstMusic.ogg" controls autoplay loop">
     Your browser does not support the audio tag.
</audio>

La etiqueta <video> le permite difundir archivos de video o transmitir medios visuales en modalidad continua. Este tiene todos los atributos de la etiqueta <audio> y tres más: poster, width y height. El atributo poster le permite identificar una imagen que se utilizará mientras el video está cargando, o en el desafortunado caso en el que el video definitivamente no vaya a cargar.

El Listado 7 proporciona un ejemplo de la estructura de la etiqueta <video> .

Listado 7. Ejemplo de etiqueta <video>
<video src="MyFirstMovie.ogg" controls="controls">
     Your browser does not support the video tag
</video>

Las etiquetas <video> y <audio> pueden contener la etiqueta <Source> , la cual define recursos multimedia para etiquetas <video> y <audio> . Con este elemento, usted especifica elementos alternativos de audio o video de los cuales el navegador puede seleccionar con base en su soporte de tipos o codecs de medios. En el Listado 8, hay dos opciones. Si la versión WMA del archivo no puede reproducirse en el navegador que se está utilizando, entonces intenta con el MP3. En caso contrario, muestra el mensaje para que el usuario sepa por qué el audio no está disponible.

Listado 8. Ejemplo de etiqueta <source>
<audio>
     <source src="/music/good_enough.wma" type="audio/x-ms-wma">
     <source src="/music/good_enough.mp3" type="audio/mpeg">
     <p>Your browser does not support the HTML 'audio' element.</p>
</audio>

La etiqueta <embed> define el contenido incorporado que se puede colocar en una página—por ejemplo, un plug-in para archivos Adobe Flash SWF. El Listado 9 contiene el atributo type , identificando la fuente incorporada como un archivo Flash.

Listado 9. Ejemplo de etiqueta <embed>
<embed src="MyFirstVideo.swf" type="application/x-shockwave-flash" />

Además de los atributos src y type, la etiqueta <embed> tiene atributos height y width .


El área Aside

Usted crea el área Aside del plan de Acme United utilizando la etiqueta <aside> . Piense en esta etiqueta como un contenedor de contenido complementario que no es parte del flujo del artículo al cual complementa. En las revistas, los apartes se utilizan frecuentemente para destacar una idea que se ha presentado en el artículo en sí. La etiqueta <aside> contiene información que puede removerse sin afectar la información comunicada por el artículo, sección o página que la contenga.

El Listado 10 proporciona un ejemplo del uso de la etiqueta <aside> .

Listado 10. Ejemplo de la etiqueta <aside>
<p>Mi familia y yo visitamos Euro Disney el año pasado.</p>
<aside>
     <h4>Disney en Francia</h4>
     <p>Además de Euro Disney, hay un Disneyland en California.</p>
</aside>

El elemento <footer> contiene información sobre una página, artículo o sección, como el autor o la fecha del artículo. Como es un pie de página, puede contener derechos de autor u otra información legal importante, como se muestra en el Listado 11.

Listado 11. Ejemplo de una etiqueta <footer>
<footer>
     <p>Copyright 2011 Acme United. Todos los derechos reservados.</p>
</footer>

Construyendo la página

Ahora que usted conoce las etiquetas básicas necesarias para crear una página HTML5, comencemos a construir su página. Usted va a construir una página Web para Acme United. La página completa se muestra en la Figura 2 y puede descargarse para que usted la use (vea Descargas).

Figura 2. La página Web de Acme United
La página Web de Acme United

Entonces, vamos a configurar la página. Primero, está el <!doctype>. En HTML5, el <!doctype> ha sido simplificado: Todo lo que usted debe recordar es el html. Esto no solo simplifica la entrada para esta etiqueta sino que también la prepara más para el futuro. Note que no se llama html5, sino simplemente html. No importa cuántas versiones de HTML puedan venir y pasar, <!doctype> siempre podrá ser simplemente html.

La etiqueta <html> contiene todos los otros elementos HTML, excluyendo la etiqueta <!doctype> . Cualquier otro elemento debe anidarse entre las etiquetas <html> y </html> . Vea el Listado 12.

Listado 12. Ejemplo de etiqueta <!doctype>
<!doctype html>
<html lang="en">

Después de indicar html y el idioma inglés, usted tiene el elemento <head> , que puede incluir scripts, información de soporte de navegador, enlaces de hoja de estilo, meta información y otras funciones de inicialización. Usted puede usar estas etiquetas en la sección head :

  • <base>
  • <link>
  • <meta>
  • <script>
  • <style>
  • <title>

La etiqueta <title> es la que contiene el título real del documento y es un elemento obligatorio de la sección <head> . Es el título que usted ve en la parte superior del navegador cuando ve la página. La etiqueta <link> en el Listado 13 identifica la hoja de estilo CSS3 que se utilizará para presentar la página HTML5. La hoja de estilo llamada es main-stylesheet.css.

Listado 13. Ejemplo de etiqueta <head>
<head>
     <title>Ejemplo de Fundamentos HTML5</title>
     <link rel="stylesheet" href="main-stylesheet.css"  />
</head>

Luego usted usa la etiqueta <body> , seguida por las etiquetas <header> y <hgroup> , que se describieron antes. El área <h1> en este ejemplo contiene el nombre de su compañía ficticia, Acme United, y el área <h2> contiene la información que le dice que está subtitulada "Un ejemplo simple de HTML5." El Listado 14 muestra la marcación.

Listado 14. Ejemplos de etiquetas <body> y <header>
<body >
     <header>
          <hgroup>
               <h1>Acme United</h1>
               <h2>Un ejemplo simple de HTML5</h2>
          </hgroup>
     </header>

El CSS3 usado para configurar la página hasta aquí se muestra en el Listado 15. Primero, usted establece la fuente para la página y luego las particularidades del cuerpo. Se definen las dimensiones del cuerpo y luego usted diseña la estructura del párrafo del encabezado para las etiquetas de encabezado de primer y segundo nivel. Estos son los encabezados que usted utilizará para su página.

Listado 15. Ejemplo de CSS3 #1
* {
	font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}

body {
	width: 800px;
	margin: 0em auto;
}

header h1 {
	font-size: 50px;
	margin: 0px;
	color: #006;
}

header h2 {
	font-size: 15px;
	margin: 0px;
	color: #99f;
	font-style: italic;
}

El Listado 16 muestra la etiqueta <nav> , que se diseña para manejar la navegación del sitio principal.

Listado 16. Ejemplo de <nav>
<nav>
     <ul>
          <li><a href="#">Inicio</a></li>
          <li><a href="#">Sobre nosotros</a></li>
          <li><a href="#">Contáctenos</a></li>
     </ul>
</nav>

El HTML5 también tiene una etiqueta de <menu> .—una etiqueta que ha causado confusión para algunos diseñadores y desarrolladores. La raíz de la confusión está en el hecho de que a menudo se hace referencia a la navegación como el "menú de navegación". La etiqueta <menu> , que entró en desuso desde la versión HTML 4.01 y que vuelve a utilizarse en HTML5, está diseñada para mejorar la interactividad. Esta no debería utilizarse para la navegación principal. La única etiqueta que debe utilizarse para la navegación principal es la etiqueta <nav> . Usted utilizará la etiqueta <menu> más adelante en este ejemplo.

El formato de la navegación es manejado por CSS3. Cada definición de etiqueta <nav> mostrado en el Listado 17 representa un estado particular de los elementos <ul> y <li> dentro de la etiqueta <nav> .

Listado 17. Ejemplo CSS3 #2
nav ul {
	list-style: none;
	padding: 0px;
	display: block;
	clear: right;
	background-color: #99f;
	padding-left: 4px;
	height: 24px;
}
nav ul li {
	display: inline;
	padding: 0px 20px 5px 10px;
	height: 24px;
	border-right: 1px solid #ccc;
}

nav ul li a {
	color: #006;
	text-decoration: none;
	font-size: 13px;
	font-weight: bold;
}

nav ul li a:hover {
	color: #fff;
}

Luego está el área Article. Esta área, definida por la etiqueta <article> incluye su propia información de <header> . La <section> contenida en el <article> también contiene su propia etiqueta <header> . Vea el Listado 18.

Listado 18. Ejemplo de <article> y <section>
<article>
     <header>
          <h1>
               <a href="#" title="Link to this post" rel="bookmark">Article Heading</a>
          </h1>

     </header>
     <p> Primum non nocere ad vitam Paramus . . . </p>
     <section>
          <header>
               <h1>This is the first section heading</h1>

          </header>
          <p>Scientia potentia est qua nocent docentp . . .</p>
     </section>

El Listado 19 muestra la marcación CSS3 que presenta este formato. Note que las definiciones para las áreas paragraph, header y section están todas definidas por la etiqueta <article> en que están contenidas. La etiqueta <h1> definida aquí no tiene el mismo formato que la etiqueta <h1> definida por la etiqueta de nivel de página <h1> .

Listado 19. Ejemplo de CSS3 #3
article > header h1 {
	font-size: 40px;
	float: left;
	margin-left: 14px;
}

article > header h1 a {
	color: #000090;
	text-decoration: none;
}

article > section header h1 {
	font-size: 20px;
	margin-left: 25px;
}

article p {
	clear: both;
	margin-top: 0px;
	margin-left: 50px;
}

La segunda etiqueta <section> del <article> contiene la misma información básica que la primera <section>, pero esta vez usted va a usar una etiqueta <aside>, una <figure>, una <menu> y una <mark> . Vea el Listado 20.

La etiqueta <aside> se utiliza aquí para presentar información que no hace parte del flujo que la contiene. La etiqueta <figure> incluye una gráfica de Stonehenge. Esta <section> también contiene la etiqueta <menu> , que usted utiliza para crear botones con los nombres de las cuatro Musas. Cuando se hace clic en alguno de los botones, este proporciona información sobre esa Musa en particular. La etiqueta <mark> se utiliza dentro de la etiqueta <p> para resaltar las palabras veni, vidi, vici.

Listado 20. Ejemplo de <article> y <section>
<section>
     <header>
          <h1>Segunda sección con mark, aside, menu & figure</h1>
     </header>
     <p class="next-to-aside"> . . .  <mark>veni, vidi, vici</mark>. Mater . . .</p>
     <aside>
          <p>Esta es un aside que tiene múltiples líneas. . . .</p>
     </aside>
     <menu label="File">
          <button type="button" onClick="JavaScript:alert('Clio . . .')">Clio</button>
          <button type="button" onClick="JavaScript:alert('Thalia . . .')">Thalia</button>
          <button type="button" onClick="JavaScript:alert
		                           ('Urania . . .')">Urania</button>
          <button type="button" onClick="JavaScript:alert
		                           ('Calliope . . .')">Calliope</button>
     </menu> 
     <figure><img src="stonehenge.jpg" alt="Stonehenge" width="200" height="131"/>
          <figcaption>Figure 1. Stonehenge</figcaption>
     </figure>
</section>

El CSS3 para esta sección incluyó una nueva definición para la etiqueta <p> que tiene menor amplitud que la que usted estableció para la página. Este cambio permite que el aparte flote a la derecha sin solaparse al texto. El Listado 21 muestra la marcación.

Listado 21. Ejemplo de CSS3 #4
article p.next-to-aside {
	width: 500px;
}

article >  section figure {
	margin-left: 180px;
	margin-bottom: 30px;
}

article > section > menu {  
	margin-left: 120px;
}	  

aside p {  
        position:relative;
        left:0px;
        top: -100px;
		z-index: 1;
        width: 200px;  
    	float: right;
	    font-style: italic; 
       	color: #99f;
}

Elementos de la sección de video

Este es el componente final del <article>: el video . El video de ejemplo es un ogg que se auto-reproduce cuando la página carga, se repite continuamente, y proporciona controles para pausa y reproducción. En muchas instancias contemporáneas los videos ogg usan la extensión ogv (lav para video), como se muestra en el Listado 22. La etiqueta <audio> funciona de la misma forma.

Listado 22. Ejemplo de <article> y <section>
     <section>
          <header>
               <h1>Esta es una sección de video</h1>
          </header>
          <p><video src="http://people.xiph.org/~maikmerten/demos/BigBuckBunny.ogv"
                                controls autoplay loop>
                <div class="no-html5-video"><p>This video will work in
                                Mozilla Firefox or Google Chrome only. </p>
                </div>
          </video></p>
     </section>
</article>

El Listado 23 proporciona las definiciones CSS3 para el vídeo .

Listado 23. Ejemplo de CSS3 #5
article > section video {
	height: 200px;
	margin-left: 180px;
}
	
article > section div.no-html5-video{
	height: 20px;
	text-align: center;
	color: #000090;
	font-size: 13px;
	font-style: italic;
	font-weight: bold ;
	background-color: #99f;
}

El pie de página y cierre de la página se muestran en el Listado 24.

Listado 24. Ejemplo de etiqueta <footer>
          <footer>
              <p>Copyright: 2011 Acme United. Todos los derechos reservados.</p>
          </footer>
     </body>
</html>

El CSS3 para el pie de página se muestra en el Listado 25.

Listado 25. Ejemplo de CSS3 #5
footer p {
	text-align: center;
	font-size: 12px;
	color: #888;
	margin-top: 24px;
}

Conclusión

Al completar su página Web termina la primera parte de esta serie en varios capítulos. La meta de este artículo es presentar el nuevo sistema HTML5. HTML5 es más que una simple versión siguiente al HTML4: Es la nueva forma de comunicarse digitalmente. Con las funcionalidades de CSS3 y JavaScript, el HTML5 se acerca a darle al desarrollador todo lo que necesita en un solo pseudo-paquete. Si usted desea asimilar lo que necesita, de las vastas cantidades de información HTML5 disponibles para nuestro uso común, únase a la creciente legión de diseñadores y desarrolladores Web multimedia competentes en HTML5. El siguiente episodio en esta serie tratará sobre cómo codificar y dar formato a formularios HTML5.


Descargar

DescripciónNombretamaño
Sample HTML, CSS3 files HTML5Fundamentals.zip10KB

Recursos

Aprender

Comentar

Comentarios

developerWorks: Ingrese

Los campos obligatorios están marcados con un asterisco (*).


¿Necesita un IBM ID?
¿Olvidó su IBM ID?


¿Olvidó su Password?
Cambie su Password

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


La primera vez que inicie sesión en developerWorks, se creará un perfil para usted. La información en su propio perfil (nombre, país/región y nombre de la empresa) se muestra al público y acompañará a cualquier contenido que publique, a menos que opte por la opción de ocultar el nombre de su empresa. Puede actualizar su cuenta de IBM en cualquier momento.

Toda la información enviada es segura.

Elija su nombre para mostrar



La primera vez que inicia sesión en developerWorks se crea un perfil para usted, teniendo que elegir un nombre para mostrar en el mismo. Este nombre acompañará el contenido que usted publique en developerWorks.

Por favor elija un nombre de 3 - 31 caracteres. Su nombre de usuario debe ser único en la comunidad developerWorks y debe ser distinto a su dirección de email por motivos de privacidad.

Los campos obligatorios están marcados con un asterisco (*).

(Por favor elija un nombre de 3 - 31 caracteres.)

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


Toda la información enviada es segura.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=90
Zone=WebSphere
ArticleID=680823
ArticleTitle=Fundamentos HTML5, Parte 1
publish-date=06142011