Curso HTML5

Anls. ABRATTE, Diego Daniel.

MP CPCIPC: 2854

HTML5 y CSS3

Diego Daniel Abratte

LOGOS – Desarrollo de sistemas Informáticos

Página 1 de 156

HTML5 Lecciones disponibles:

• Lección 1: Definición de HTML5

• Lección 2: Conceptos básicos de HTML, XHTML y CSS

• Lección 3: Introducción a la presentación en pantalla con CSS

• Lección 4: Uso de las etiquetas HTML5

• Lección 5: Trabajar con el Canvas

• Lección 6: Contenidos multimedia y funciones Drag y Drop de HTML5

Ver Lección 1: Definición de HTML5

Objetivos: En esta lección los estudiantes aprenden las funcionalidades y características que forman parte de la

especificación HTML5 y las tecnologías que involucran. También podrán aprender la diferencia entre la sintaxis de

HMTL5 y la de HTML4 y/o XHTML 1.0. Por otra parte, al finalizar esta lección los estudiantes podrán identificar las

principales características de HTML5, como los nuevos elementos HTML5, elementos multimedia, el elemento

Canvas, formularios web, etc. Otro objetivo es que los estudiantes puedan distinguir entre funcionalidades que

técnicamente forman parte de la especificación de HTML5 y otras que se consideran tecnologías relacionadas, como

la Geolocalización, Arrastrar y Soltar y CSS3.

• Beneficios de HTML5

• Principales características

o Nuevos elementos de markup y presentación

o Los elementos <video>, <audio> y <canvas>

o Formularios Web

o Elementos revisados que se basan en HTML 4.0

• Introducción a las APIs de HTML5 y tecnologías de apoyo

o Geolocation

o Web Workers

o Almacenamiento Web

o CSS3: Animaciones y transiciones

o CSS3: Fondos, bordes, colores RGBa, gradientes, sombreados y esquinas redondeadas

o Tipos de letra @font-face para la web

• HTML5 todavía es un proyecto en fase de desarrollo

o Compatibilidad de navegadores

o Dónde se utiliza HTML5 actualmente



Página 2 de 156

Ver Lección 2: Conceptos básicos de HTML, XHTML y CSS

Objetivos: En esta lección los estudiantes aprenden los conceptos básicos de HTML, XHTML y CSS, necesarios

para saber crear la estructura y estilo de sus páginas web. Aprenden cómo se utilizan los tipos de documento

(DOCTYPE) para ayudarles a validar sus páginas web y utilizarlos como herramienta de resolución de errores. En

esta lección, los estudiantes crean una página web sencilla que les sirve para saber cómo se insertan imágenes,

cómo se crean enlaces y cómo pueden trabajar con hojas de estilos tanto internas como externas.

• Introducción a la sintaxis de HTML

o Detalles de la sintaxis XHTML

• La función de DOCTYPE

o Validación W3C y de página

• Creación de una página HTML

o Definición de elementos HTML

o Inserción de imágenes en HTML

o Uso de atributos

o Creación de vínculos

• El papel de las hojas de estilos CSS (Cascading Style Sheets)

o Aplicar estilos a una cabecera

o Clases de estilos y el elemento <span>

• Tres formas de utilizar los estilos

o Internos

o Externos

o En línea

• Cuándo utilizar hojas de estilo Internas o externas

• Creación de una hoja de estilos externa

• El concepto de "cascada" de CSS

Ver Lección 3: Introducción a la presentación en pantalla con CSS

Objetivos: En esta lección los estudiantes aprenden los conceptos básicos de presentación de elementos en

pantalla con CSS, incluyendo una estructura visual de dos columnas con ancho fijo, utilizando HTML y CSS.

Aprenden la función de un archivo de “reset” CSS y cómo se añade a la página Web. Esta lección incluye el uso del

elemento <div> y las propiedades float y clear de CSS para crear columnas en la página.

• El papel del archivo de reset CSS

o Añadir un enlace a una hoja de estilos de reset externa

• Breve historia de las técnicas de disposición en pantalla de las páginas web

o Introducción a las opciones de presentación de las páginas



Página 3 de 156

• Creación de una estructura básica de dos columnas de ancho fijo con CSS

o El elemento DIV

o Asociación de IDs y clases CSS con elementos DIV

• La propiedad float de CSS

o Creación de columnas con la propiedad float

• Uso de la propiedad clear

• Creación de una navegación basada en listas con directivas float

• Uso de márgenes y rellenos para controlar la disposición de los elementos en pantalla

• Imágenes de fondo con CSS

o Decoración de un pie de página con una imagen de fondo

Ver Lección 4: Uso de las etiquetas HTML5

Objetivos: En esta lección los estudiantes aprenden a utilizar los nuevos elementos HTML5 para lograr

presentaciones en pantalla más avanzadas. Se revisan aquí los principales elementos de división en secciones y

también se repasan las etiquetas de HTML4 que han sido objeto de actualización en HTML5. Los estudiantes

aprenden a convertir una página existente que emplea elementos HTML4 en una página HTML5 sustituyendo

elementos <div> por otros nuevos elementos HTML5. Además, en esta lección se aprende a trabajar con elementos

de formulario HTML5 y a añadir contenidos multimedia con los elementos <video> y <audio>.

• Revisión del concepto de semántica de las etiquetas HMTL

• Fundamentos de HTML5

o Uso de la declaración DOCTYPE de HTML5

• Diferentes categorías utilizadas para contenidos HTML5

o Contenidos de Metadatos

o Contenidos de Flujo

o Contenidos de Sección

o Contenidos de Cabecera

o Contenidos de Frase

o Contenidos embebidos

o Contenidos interactivos

• El nuevo elemento <header>de HTML5

o Incorporar soporte para elementos HTML5 en los navegadores

• Incorporación de elementos <nav> de HTML5

• Esquema de documentos con HTML5

• Incorporación de otros elementos de sección de HTML5

o Elemento <section>

o Elemento <article>

o Elemento <aside>



Página 4 de 156

o Elemento <footer>

• Otros elementos HTML5

o Elemento <figure>

o Elemento <figcaption>

o Elemento <time>

• Elementos revisados de HTML 4.0

o La etiqueta <b> frente a <strong>

o La etiqueta <i> frente a <emphasis>

• Uso de formularios HTML5

o Tipos de datos de entrada email y url

o Atributos required y placeholder

o Atributos autofocus y autocomplete

• Uso de los elementos Video y Audio

o Uso del elemento <video> y sus atributos relacionados

o Uso del elemento <audio> y sus atributos relacionados

o Aspectos a tener en cuenta sobre los códecs de vídeo y audio al trabajar con contenidos

multimedia

Ver Lección 5: Uso del elemento Canvas

Objetivos: En esta lección los estudiantes aprenden en qué consiste el elemento Canvas, el API de dibujo en dos

dimensiones que incluye la especificación HTML5. En este tema se explica cómo se incorporan elementos de diseño

gráfico a una página web, por ejemplo formas, textos, rellenos y trazos de colores, imágenes y animaciones sencillas

con Javascript. Esta lección enseña también a los estudiantes los conceptos básicos de la interactividad con

Javascript.

• El papel de JavaScript en las aplicaciones HTML5

• Conceptos básicos de JavaScript

o Eventos de JavaScript

o Ubicación del código JavaScript en un documento externo

o El DOM (Document Object Model)

• El elemento Canvas

o Ventajas del elemento Canvas

• Diseño gráfico con Canvas

o Dibujo de trazos

o Dibujo de rectángulos

o Dibujo de líneas y círculos

o Dibujo de curvas

• Inserción de textos



Página 5 de 156

• Colores, estilos y gradientes

• Inserción de imágenes

• Creación de gráficos en el Canvas

o Uso de arrays de datos

• Creación de animaciones con Canvas y Animation

o Uso de transformaciones

o Creación de un bucle de dibujo

Ver Lección 6: Funciones Drag y Drop de HTML5

Objetivos: En esta lección se enseña el uso de Drag and Drop, un API relacionada con la especificación HTML5.

Concretamente, los estudiantes aprenden a crear una interfaz de carrito de la compra sencilla arrastrando y soltando

objetos en pantalla.

• Diferentes formatos de Drag y Drop en la web

o Ventajas de las funciones Drag y Drop

• Compatibilidad de Drag y Drop entre distintos navegadores

o Uso de la función preventDefault

o Los eventos dragenter y dragover

o Convertir un elemento en "arrastrable" (draggable) en HTML5

o El atributo ondragstart

o Creación de la función dragStarted

o Medidas para la compatibilidad con diferentes navegadores

• Transferencia de datos con una operación "Drag-and-Drop"

o Uso del objeto dataTransfer

o Uso de la función setData

o La propiedad innerHTML



Página 6 de 156

Lección 1: Definición de HTML

Objetivos:

En esta lección vamos a descubrir las características y capacidades que forman parte de la especificación de HTML5 y sus tecnologías conexas. Podrás conocer también los beneficios que aporta HTML5 a los desarrolladores, diseñadores de páginas Web y a los usuarios finales.

Para comenzar

En esta lección no se necesita ningún archivo complementario.

Esta lección es una revisión general de conceptos de HTML y en las siguientes ya se realizarán ejercicios prácticos paso a paso.

Definición de HTML5

HTML5 es una combinación de nuevas etiquetas de markup (lenguaje) HTML, propiedades CSS3, JavaScript y algunas tecnologías complementarias de apoyo, pero que técnicamente son independientes de la propia especificación HTML5. Por ello vamos a distinguir entre la especificación HTML5 en sí y la familia HTML5. Podemos definir la especificación HTML5 como nuevos elementos de markup o sintaxis, utilizados por los diseñadores para crear páginas web junto con las etiquetas utilizadas a día de hoy. Muchos de estos nuevos elementos ya son conocidos para los diseñadores que trabajan con las etiquetas HTML tradicionales, como <p>, <ul> o <div>. Estas nuevas etiquetas suponen para desarrolladores y diseñadores, unas herramientas más avanzadas y se traducen en mejores experiencias para el usuario final.

La familia HTML5 incluye las nuevas etiquetas y tecnologías como CSS3, Geolocalización, Almacenamiento Web (Web Storage), Web Workers y Web Sockets entre otras. Todas ellas suponen una actualización de gran potencia al conjunto de herramientas ya existente, y con ellas se pueden crear páginas web más sofisticadas y útiles.

Los nuevos navegadores incorporan funcionalidades para responder a las expectativas de los consumidores y también como fruto de la evolución natural de la propia tecnología. A medida que las aplicaciones web van ganando en capacidad de respuesta y velocidad y son capaces de resolver tareas complejas como la edición de imágenes, representación de mapas, hojas de cálculo o vídeos, los usuarios ya exigen este mismo nivel de rendimiento en todas las aplicaciones de la web. Existen limitaciones con las capacidades de los lenguajes de programación actuales y no todas las funcionalidades se pueden implementar e incorporar de manera sencilla. HTML5 aporta nuevas funcionalidades y herramientas con el fin de conseguir que los sitios web sean más interesantes, atractivos y útiles.



Página 7 de 156

historia de HTML5

HTML4, que se dio por cerrado en 1998, es el lenguaje de markup que conforma la base de la gran mayoría de las páginas web que podemos ver a día de hoy.

Los diseñadores y desarrolladores web han estado utilizando la especificación HTML 4.01 durante bastantes años de manera satisfactoria, combinándola con

CSS para la definición de estilos y con JavaScript para añadir interactividad a los contenidos.

Tras la finalización de HTML 4.0.1, el W3C continuó sus trabajos en consonancia con la evolución de la web, y comenzó con un lenguaje llamado XHTML

1.0. Existe una pequeña diferencia entre HTML 4.0.1 y XHTML 1.0 (XHTML es un lenguaje más estricto: por ejemplo, todas las etiquetas deben indicarse en

minúsculas). Uno de los objetivos de XHTML 1.0 era crear un lenguaje de markup que pudiera extenderse y resolver las necesidades de las tecnologías

futuras, por ejemplo para los dispositivos móviles. Muchos sitios web se han creado utilizando XHTML 1.0 como marco de desarrollo y muchos diseñadores y

desarrolladores valoran positivamente sus reglas sintácticas más estrictas.

En paralelo a la adopción y difusión de XHTML 1.0, se empezó con el desarrollo de otro lenguaje, XHTML 2.0, que añadía una serie de novedades de gr

interés a las páginas web y que se apoyaba de forma notoria en XML. No obstante, este nuevo lenguaje adolecía de diversos problemas de tipo técnico y no

resolvía adecuadamente las necesidades reales de los desarrolladores.

En 2004, un grupo de representantes de los principales fabricantes de navegadores y un grupo de trabajo de desarrolladores web formaron un grupo

independiente llamado WHATWG (iniciales de Web Hypertext Application Technology Working Group). Su misión consistía en crear una especificaci

lenguaje HTML mejor, orientada a crear un nuevo tipo de aplicaciones web pero manteniendo la compatibilidad con las versiones en activo de los navegadores

existentes.

Durante unos dos años y medio el W3C y el grupo WHATWG trabajaron en paralelo y de manera independiente hasta que en 2006, Tim Berners

de la World Wide Web y fundador del W3C anunció que el W3C y WHATWG trabajarían juntos en la elaboración del estándar.

Como resultado de todo ello, se abandonó el desarrollo de XHTML 2.0 y la especificación HTML 4.0 se reformó con el nombre HTML5. No obstante,

conviene recordar que HTML5 empezó siendo Web Applications 1.0, y eso nos da una pista muy clara para entender para qué fue diseñado realmente HTML5.

Gracias a que el W3C tomó el liderazgo para el desarrollo de HTML5, ahora los desarrolladores tenemos la garantía de que HTML5 será realmente un

estándar gratuito y con las suficientes garantías de no incurrir en problemas de propiedad intelectual.

HTML5 extiende la definición de lo que puede hacer una

página web

A día de hoy HTML no tiene capacidad para reproducir contenidos multimedia, como audio o vídeo, sin un complemento (un "plug-in") como los de Adobe®Flash® o Microsoft® Silverlight®. HTML tampoco tiene capacidad para almacenar datos en el ordenador del usuario, esto se hace actualmente mediante un lenguaje de scripting o con alguna otra tecnología. No existe un formato de dibujo nativo en HTML. Los gráficos y animaciones se ofrecen en estos momentos en forma de archivos de imágenes o con la ayuda de otros complementos (Adobe Flash, Java, Microsoft Silverlight u otros). En general, cada vez más gente depende de la web y utiliza aplicaciones web y las expectativas que se generan alrededor de lo que puede (o podría) hacer una página web van creciendo día tras día. Esta demanda de los usuarios en favor de un mayor rendimiento y unos sitios web con prestaciones más avanzadas y completas se ve limitada por el lenguaje HTML que se utiliza actualmente.



Página 8 de 156

Un sitio como Bing™ Maps es una aplicación web de altas prestaciones que podría beneficiarse de las nuevas

funcionalidades que incorpora HTML5 En los apartados siguientes vamos a explicar brevemente algunos de los aspectos más importantes de HTML5.

El lenguaje HTML5

El lenguaje (o "markup") HTML5 incorpora algunas etiquetas nuevas pensadas para hacer que la estructura de la página web sea más lógica y funcional. Antes de HTML5, la estructura de una página dependía fuertemente de las etiquetas <div>, generalmente asociadas a una clase CSS o un ID. Por ejemplo, en HTML 4.0 es una práctica comúnmente aceptada definir la cabecera de una página web de esta forma:

<div id="header" > Esta es la cabecera </div>

En este caso, el código destacado en color rojo es el ID de CSS que sirve para definir la anchura y altura de la cabecera así como su color de fondo. En el código CSS podríamos tener algo así:



Página 9 de 156

#header { width:960px; height:100px; background-color:gray; }

El ID utilizado header es arbitrario. Algunos diseñadores prefieren nombres como masthead, topsection, o box. En la especificación HTML5 existe ya una etiqueta llamada <header> que viene a sustituir al elemento <div> de forma que la sintaxis es mucho más lógica y coherente:

<header> Esta es la cabecera </header>

En este ejemplo ya podemos añadir directamente las propiedades de estilo (ancho, alto, color de fondo, etc.) en una regla para el nuevo elemento header de CSS:

header { width:960px; height:100px; background-color:gray; }

La diferencia entre estos dos ejemplos anteriores puede que sea difícil de entender si no estás familiarizado con CSS. En el primer caso se utiliza un selector (#header) que refiere a un atributo ID de CSS. En el segundo caso utilizamos un selector (header) que es una novedad de HTML5 y nos permite aplicar un estilo al elemento directamente. HTML5 dispone de unos cuantos elementos nuevos aparte de éste, como <footer>, <nav>, <section>, <aside>, y <article>. Estos nombres se basan en los que se vienen utilizando habitualmente para distinguir secciones dentro de las páginas web que vemos a diario (div id="footer", div id="nav", etc.). El objetivo de los nuevos elementos HTML5 no es otro que evitar una excesiva dependencia de las etiquetas <div> y sustituirlas por una estructura de página más consistente y legible. Como puedes ver, HTML5 no sustituye ningún elemento de sintaxis de HTML; simplemente añade nuevos elementos de vocabulario a la lista existente. Dicho de otra forma, podemos seguir utilizando la etiqueta <div>, pero esta etiqueta ya no necesariamente tiene que ser la viga maestra que soporte el diseño visual de toda una página web.



Página 10 de 156

La estructura de un sitio web con elementos HTML5.

A. Header. B. Nav. C. Section. D. Article. E. Aside. F. Footer.

Breve recorrido por los principales elementos de HTML5

En este libro se explican muchos de los elementos nuevos de HTML5 en detalle, a partir de la Lección 4. Pero antes, en esta Lección 1 vamos a mostrar una breve reseña de las principales novedades que incorpora la sintaxis de HTML5.

Los elementos <video>, <audio> y <canvas>

La especificación HTML5 incluye etiquetas que nos permiten integrar contenidos multimedia sin necesidad de complementos de navegador. Las etiquetas <video> y <audio> sirven para integrar video y audio en las páginas web de la misma forma que actualmente se hace con los archivos de imagen utilizando la etiqueta <img>. La etiqueta <canvas> dota al lenguaje HTML de un formato nativo para el dibujo y la animación. Esta etiqueta puede servir, además, como plataforma alternativa para los gráficos y animaciones que a día de hoy podemos ver en películas Flash. No obstante, existen inconvenientes de cierta consideración que es preciso resolver.

Elementos <video> y <audio> para incorporar contenidos

multimedia

La estructura necesaria para incorporar contenidos de audio o vídeo a una página web es bastante sencilla, como podemos ver en el siguiente ejemplo donde añadimos un archivo de vídeo:

<video src="catz.mp4" width="400" height="300"></video>

Insertar un archivo de audio mp3 en la página se hace de forma similar. En el caso del audio y el vídeo podemos añadirle también controles de reproducción y la posibilidad de precarga, utilizando los atributos controls, preload, y autobuffer:

<audio src="high_seas_rip.mp3" controls preload="auto" autobuffer></audio>

Esta característica de HTML5 es muy útil si se compara con los métodos disponibles hasta ahora. Por ejemplo, para incorporar vídeo con Adobe Flash o Microsoft Silverlight es preciso añadir código de programación. Aparte, existe una amplia categoría de dispositivos móviles como los iPhone® de Apple® o Windows® Phone 7 que no soportan Flash o Silverlight, y en estos casos el elemento video de HTML5 es la principal alternativa. Aunque es de agradecer la simplificación que suponen las etiquetas <video> y <audio>, en seguida surge la pregunta de cómo vamos a hacer para manejar estos contenidos desde los navegadores anteriores que no reconocen estas etiquetas nuevas.

Esta cuestión se verá en detalle en la Lección 4, "Uso del lenguaje HTML5"



Página 11 de 156

Reproductor de video de HTML5 con controles, integrado dentro de una página web. No necesita

complementos.

El elemento <canvas> para dibujo y animación El elemento canvas funciona a modo de superficie de dibujo dentro de una página web (de ahí le viene el nombre). Dentro de esta superficie de dibujo podemos crear formas con colores, gradientes y patrones de relleno. Podemos manipular los pixels de forma interactiva en pantalla, mostrar textos y exportar los contenidos hacia archivos de imagen estática, como .PNG. Podemos también utilizar JavaScript o las nuevas funciones de animación de CSS3 para que los objetos que creamos puedan moverse, desaparecer, cambiar de tamaño, etc. Incorporar un elemento canvas a una página es muy sencillo:

<canvas id="myCanvas"></canvas>



Página 12 de 156

JavaScript se encarga de todo el trabajo y nos ofrece un contexto para el objeto creado. Por ejemplo, para crear uno de los objetos más sencillos dentro del canvas, un rectángulo negro, el código necesario puede ser como este:

<script> var canvas = document.getElementById ("myCanvas"), context = canvas.getContext("2d"); // x = 10, y = 20, width = 200, height = 100 context.fillRect(10, 20, 200, 100); </script>

Con estas pocas líneas creamos un rectángulo de color negro con unas dimensiones concretas. El código puede parecer excesivo para un resultado tan simple, pero la etiqueta canvas se limita a presentar el código dentro de un documento HTML y este modelo nos aporta una serie de ventajas. Entre los usos previsibles están elementos de la interfaz de usuario, como controles de reproducción, elementos de ilustración que se pueden animar o visualización dinámica de datos como diagramas y gráficos.

En la Lección 5 "Trabajar con el Canvas" podrás aprender más en detalle cómo se crean contenidos con la etiqueta <canvas>.



Página 13 de 156

Puedes ver ejemplos de <canvas> (incluyendo elementos de animación) y otras funcionalidades de HTML5 en

acción en el sitio webwww.nevermindthebullets.com.

Formularios web

Los nuevos elementos de formulario de HTML, cuando se implementen, harán que el trabajo con formularios sea más sencillo que ahora. Por ejemplo, muchos diseñadores web necesitan crear formularios en donde los datos tienen que comprobarse antes de enviarlos al servidor. Es casi obligado que el usuario, por ejemplo, tenga que escribir una dirección de correo electrónico en un campo de un formulario. A día de hoy, para validar este dato se necesita programación en Javascript o cualquier otro lenguaje de scripting, pero HTML5 incorpora el atributo required a la lista de tipos de datos de entrada utilizables en formularios, como se muestra en este ejemplo:

<input type="email" required>

Se han definido unos cuantos tipos de datos nuevos para los formularios, como es el caso de email para las direcciones de correo, search para designar los campos de formulario que deben recibir



Página 14 de 156

términos de búsqueda, url para los campos de direcciones web y algunos más. Estos nuevos elementos de formulario web seguramente tardarán algo en integrarse en la especificación oficial, pero están diseñados de manera que puedan revertirse a campos genéricos de formulario, o dicho de otra forma, podemos empezar a utilizar estos nuevos tipos de campos y si un navegador no los soporta, los sustituirá internamente con elementos genéricos (soportados).

Muchos elementos nuevos en HTML5

Aparte de los nuevos elementos <video>, <audio>, <canvas>, y tipos de datos de formulario, hay otros nuevos elementos dentro de HTML5 que podemos utilizar, como <figure> y <figurecaption>, que se emplean para etiquetar imágenes dentro de la página web, el elemento <hgroup> para agrupar una serie de elementos de cabecera dentro de una sección lógica, etc. HTML5 además resuelve el caso de ciertas etiquetas que aparecen en HTML 4.01 pero que han quedado obsoletas o necesitaban ciertas precisiones, como ocurre con <i>, <b>, <small>, <strong> y <abbr>, que ahora tienen significados y usos nuevos con HTML5.

Introducción a las APIs de HTML5 y las tecnologías de apoyo Existen otra serie de tecnologías de desarrollo web vinculadas con la especificación HTML5 o con su sintaxis. Estas técnicas nos van a permitir llevar a cabo actividades desde el navegador web y dispositivos móviles compatibles que no eran posibles con las versiones anteriores de HTML.

API?

Las APIs (Application Programming Interfaces o, en español, Interfaces de Programación de Aplicaciones o simplemente "interfaces de programación") son

una forma de crear aplicaciones utilizando componentes preconfigurados cuyo uso no se restringe a la web, ni siquiera a los lenguajes de scripting. Sitios web

como Twitter o YouTube entre otros, ofrecen APIs al público de manera que los diseñadores y desarrolladores pueden con ellas integrar algunas de sus

funcionalidades dentro de sus propios sitios web (y también sirven para otros fines, como por ejemplo para crear aplicaciones para teléfonos móviles o

iones personalizadas para equipos de escritorio). Uno de los objetivos principales de una API es el de normalizar el modo de trabajo de ciertos

mecanismos y simplificar tareas de programación, que de lo contrario, serían bastante complejas. Las APIs son un aspecto muy importante dentro del entorno

de HTML5 y hay una serie de ellas que conviene conocer, como Web Storage, Microdata o Geolocation, entre otras.

Para utilizarlas, lo primero que tenemos que saber es que la documentación oficial de estas APIs es independiente de la documentación oficial de HTML5. Ten

en cuenta que salvo que te muevas bien dentro de la parte más técnica del desarrollo web, esta documentación no es demasiado intuitiva a primera vista. Pero

existen unos cuantos ejemplos de código aquí que te pueden servir de orientación:

http://dev.w3.org/html5/webstorage/#introduction

http://dev.w3.org/html5/md/#introduction

http://dev.w3.org/geo/api/spec-source.html#introduction

La API de Geolocalización en acción



Página 15 de 156

Geolocation es una API que nos permite conocer el punto geográfico desde el cual se conecta el navegador a Internet. Esta información se emplea para enviar al usuario datos de interés para él, ajustados a su ubicación. Como ejemplo de su utilidad están las páginas web de búsqueda asociadas a un mapa en el cual nos indican dónde están situados ciertos comercios o restaurantes a una distancia concreta a pie desde el punto donde estamos en ese momento. En vez de tener que introducir a mano la dirección, un navegador habilitado para geolocalización nos puede devolver estos resultados de manera automática y transparente.

Geolocation en estos momentos está disponible en algunos navegadores modernos. Podemos ver un ejemplo de cómo funciona en el sitio de mapas de Microsoft, Bing™ Maps (necesitarás un navegador compatible con geolocalización, en este caso estamos utilizando Internet Explorer 9)

1 Abre el navegador compatible con la función de geolocalización y escribe esta

dirección: http://www.bing.com/maps. En la página se muestra por defecto el mapa de EE.UU y Canadá.

2 En la esquina superior izquierda del mapa, pon el cursor sobre el icono de localización y aparecerá la opción

"Click to center the map on your current location".



Página 16 de 156

Pulsando el icono de localización empieza el proceso de geolocalización.

3 Pulsando en el localizador aparece un mensaje "Allow bing.com to track your physical location." Todos los

navegadores que aceptan la geolocalización preguntan al usuario y les dan la opción de aceptar o rechazar la

función de control de ubicación.

En Internet Explorer 9 se pide al usuario que permita al navegador conocer su emplazamiento.

4 Para ver cómo actúa la función de geolocalización, pulsa en el botón "permitir una vez" y después pulsa otra

vez en el localizador. El mapa se centrará automáticamente en el punto geográfico donde te encuentras.

En los últimos años los teléfonos móviles han ido incorporando la posibilidad de conectar datos geográficos o de GPS dentro del navegador del dispositivo o con aplicaciones propias. Cuando la función de geolocalización esté soportada por un gran número de navegadores web, podremos disfrutar de estas ventajas tanto en equipos de escritorio como en dispositivos móviles que soporten la API Geolocation de HTML5.

Web Workers

Web Workers es otra API que se suele considerar de la familia HTML5. Web Workers es un marco de programación que resuelve problemas de rendimiento de los navegadores. Al acceder a aplicaciones web avanzadas, como las de mapas o aquellas que generan gráficos o diagramas al entrar en la página web, se inician ciertas operaciones de computación que consumen una gran cantidad de recursos de procesador y que pueden reducir notablemente el rendimiento de la aplicación. Gran parte de la ralentización es debida a que se produce un conflicto a nivel de máquina entre las tareas interactivas de usuario (pulsación del ratón, arrastre, etc.) y la necesidad de la propia aplicación de acceder a recursos como datos, tarjeta gráfica u otros.

Los Web Workers son scripts que se ejecutan en threads independientes. Esto quiere decir que ciertos procesos como puede ser obtener datos desde una base de datos, se ejecutan de forma independiente de las actividades que desarrolle el usuario, lo que da como resultado un entorno mucho más fluido para éste. Web Workers están aún en una fase inicial de su desarrollo pero ya puedes ver demos enhttp://ie.microsoft.com/testdrive/HTML5/WebWorkerTest262/Default.html utilizando la platform Preview de Internet Explorer 10.

Almacenamiento Web El Almacenamiento Web (Web Storage) es un ejemplo de uso de modelos preexistentes de tecnologías web bajo nuevas modalidades, más potentes. El Web Storage mejora el concepto de cookies del navegador. Actualmente las cookies permiten que los sitios web puedan guardar información en cantidades muy reducidas en los equipos de los usuarios, datos que normalmente sirven para volver a utilizarlos en momentos posteriores, y de esta manera, por ejemplo, ciertos sitios web recuerdan la información del usuario desde el último acceso.



Página 17 de 156

Las cookies son una tecnología bastante limitada y no resulta fácil su utilización por parte de los diseñadores web. Ahora, Web Storage actualiza este modelo para que las aplicaciones web puedan almacenar una cantidad de datos muy superior y que su acceso y utilización sea mucho más fácil y eficiente.

HTML5 nos ofrece dos maneras de guardar datos: localStorage y sessionStorage. Los datos guardados con localStorage quedan a disposición del navegador en todo momento, aunque cerremos el programa o se reinicie el sistema. Los datos guardados bajo la modalidad sessionStorage se pierden al cerrar el navegador.

Un ejemplo del uso de Web Storage puede ser la forma en que se almacenan datos en algunos teléfonos móviles. Los navegadores para smartphones, por ejemplo, pueden guardar datos en una sesión de navegador y permitir al usuario leerlos y/o modificarlos aunque no tengan conexión a la red.

CSS3 no forma parte de HTML5, pero está íntimamente

relacionado

Como ya se dijo anteriormente, muchos de los aspectos novedosos designados bajo el nombre "HTML5" son en realidad una combinación de las tecnologías HTML5 descritas antes junto con JavaScript o CSS. CSS (iniciales de Cascading Style Sheets) es un lenguaje en evolución que se identifica mediante números de versión, y la última de ellas es la CSS 3.0, que ha ido evolucionando en paralelo con la especificación de HTML5. Algunos componentes de CSS3 suelen considerarse erróneamente como componentes de HTML5, como es el caso de las transiciones o la animación. La confusión es comprensible, pero para los profesionales del diseño y desarrollo web es importante conocer la diferencia. A continuación describimos brevemente algunas de las características más relevantes de CSS3.

Transformaciones CSS 2D y 3D

La propiedad transform de CSS nos permite rotar, cambiar la escala o sesgar un elemento de una página web. Un ejemplo puede ser el girar levemente una foto dentro de una página para conseguir un efecto estéticamente muy atractivo. También podemos dar animación a las transformaciones: por ejemplo, mediante animación aplicada a la propiedad "scale" podemos conseguir un efecto de ampliación o reducción del tamaño de una imagen o de cualquier otro elemento. Podemos también añadir la propiedad "perspective" al efecto de transformación para simular la visión de un objeto en un espacio tridimensional, estático o en movimiento.



Página 18 de 156

Un ejemplo de una transformación 2D-CSS que podemos ver en http://ie.microsoft.com/testdrive

Fondos, bordes, colores RGBa, gradientes, sombras y esquinas

redondeadas

Ahora, con CSS3 es posible aplicar mejoras muy interesantes a la presencia visual de una página. Un ejemplo sencillo es la propiedad "border-radius", con la que podemos poner esquinas redondeadas a los objetos rectangulares, y también podemos crear muchos efectos nuevos, como gradientes de color o sombreados. Algunos efectos tradicionales, como background-image y la propiedad border han sido mejorados en CSS3. Por ejemplo, podemos utilizar la propiedad border-image para utilizar imágenes como bordes de objetos, o añadir varias imágenes de fondo a un mismo contenedor, evitando así la limitación actual a una sola imagen que permite la propiedad background-image. La descripción del espacio de color RGBa es otra novedad de CSS3, ya que la "a" representa el grado de transparencia (o "alpha"). Con la notación RGBa de color ahora podemos aplicar efectos de transparencia a cualquier objeto de la página.



Página 19 de 156

Dibujar esquinas redondeadas mediante el uso de la propiedad border-radius es solo una de las muchas

novedades de estilo que se han incorporado a CSS3.

Fuentes de letra Web @font-face

Cada vez está más extendido el soporte para añadir tipos de letra especiales a las páginas web mediante la propiedad @font-face, que permite especificar una fuente concreta y un enlace desde el cual el navegador pueda descargarla. Esta característica puede cambiar de forma radical el aspecto de las páginas web, pero lamentablemente también se ve afectada por los muchos problemas de compatibilidad con navegadores antiguos que se pueden ver en otras funcionalidades de HTML5.



Página 20 de 156

El potencial de las web fonts puede verse en www.lostworldsfairs.com/atlantis.

Media Queries de CSS

La interacción del usuario con Internet se basa casi de forma exclusiva en lo que se puede ver dentro de una pantalla, y el tamaño de las pantallas que podemos encontrar varía enormemente. Un monitor de ordenador de gran formato puede llegar a resoluciones de 2.000 pixels de anchura, mientras que un pequeño teléfono móvil apenas nos ofrecerá 320 pixels. El reto que supone presentar una experiencia equivalente en ambas pantallas puede resolverse mediante las nuevas directivas de CSS de consulta de tipo de medios ("media queries"). En esencia se trata de lanzar una consulta al navegador para determinar el tipo de pantalla en el cual se va a restituir la página y, a partir de esta información, enviar un estilo específico, optimizado para esas dimensiones. Por ejemplo, la misma página web, en un monitor con 2.000 pixels de ancho podría mostrarse con cuatro o incluso cinco columnas, pero en pantallas de 320 pixels, podría enviar una plantilla de estilos que solo utilice una columna.



Página 21 de 156

Animaciones con CSS

Ciertas tecnologías como Flash o Silverlight se han venido utilizando hasta ahora para animar objetos dentro de las páginas web. Ahora ya podemos conseguir algunos de estos efectos utilizando las reglas y propiedades de CSS3. En el futuro, el elemento Canvas de HTML5 y las transiciones de CSS3 permitirán crear elementos animados e interactivos sobre la página. Las animaciones de CSS, y el tema siguiente, las transiciones, probablemente estarán soportadas por la mayoría de los navegadores en los próximos años. En el momento de escribir esta guía, el estándar todavía no está cerrado por lo que no está soportado en todos los navegadores, en cualquier caso puedes empezar a probar algunos ejemplos con la platform preview de Internet Explorer 10.

Visita http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_animations.htm utilizando la

platform preview de Internext Explorer 10 o cualquier otro navegador que soporte animaciones basadas en

CSS.

Transiciones de CSS



Página 22 de 156

Las transiciones de CSS están muy relacionadas con el concepto de animación, pero son algo completamente distinto. Una transición permite variar el valor de una propiedad CSS de manera continua a lo largo de un intervalo de tiempo definido. Por ejemplo, un botón con un fondo de color verde puede cambiar de forma progresiva y suave a un color distinto cuando el usuario pasa el cursor sobre él.

Actualmente podemos conseguir este tipo de transiciones utilizando JavaScript y Flash, pero igual que sucede con otros muchos elementos de CSS3, las transiciones ofrecen a los diseñadores web una alternativa para conseguir los mismos resultados sin necesidad de convertirse en programadores expertos.

Visita el sitio http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_transitions.htm utilizando la

platform preview de Internext Explorer 10 o cualquier otro navegador que soporte transiciones basadas en

CSS.

HTML5 está en un momento de transición

Las tecnologías que hay detrás de HTML5 están en fase de transición, por lo que es necesario tener claro cuándo debemos utilizarlas y cuándo no. A lo largo de este libro te iremos orientando y ofreciendo una perspectiva lo más amplia posible al respecto del tipo de compatibilidad que puedes esperar en distintos navegadores y también ofreceremos ejemplos de uso donde el uso de HTML5 puede ser más indicado que otros lenguajes.

Todos los navegadores de mayor difusión hoy en día (Microsoft Internet Explorer, Mozilla Firefox, Apple Safari, Google Chrome y Opera) ofrecen soporte, en grado variable, para las funcionalidades de HTML5 en cuanto a su sintaxis y tecnologías relacionadas. En algunos casos una página que



Página 23 de 156

ofrece alguna funcionalidad nueva o un aspecto especial en un navegador puede que no se consiga ver en absoluto en otro, o que algunas características no estén presentes aunque la página siga siendo funcional. Estos escenarios sin duda van a cambiar en el futuro, pero el mundo de los navegadores web en equipos de sobremesa evoluciona muy lentamente, por lo que seguiremos observando en el futuro próximo este tipo de situaciones y diferencias.

Perspectivas de soporte por parte de los navegadores

No se puede prever con exactitud una fecha en la que tengamos cierta seguridad de que habrá soporte completo para HTML5 en todos los navegadores, pero

el W3C ha marcado la segunda mitad de 2014 como la fecha en que debe estar finalizada la especificación de HTML5. Los diseñadores web más

conservadores pueden optar por esperar hasta entonces para incorporar el HTML5 a sus entornos en producción, pero el estándar es independiente del soporte

de los navegadores. La mayoría de los navegadores actuales soportan ya una serie de funcionalidades de HTML5. Algunas de ellas ya se muestran

relativamente estables, bien desarrolladas y su uso parece fiable y seguro. Otras, sin embargo, siguen aún en fase de desarrollo y los diseñadores pueden

utilizarlas con fines experimentales, o incluso en sitios en producción, pero sabiendo de antemano que están apostando por la innovación a costa de la

fiabilidad.

¿Quién utiliza HTML5 a día de hoy?

Es una pregunta difícil de responder porque, como has podido ver, no existe una definición única para "HTML5". Existen numerosas demos de HTML5 que no se podrían poner en entornos en producción debido al distinto grado de soporte que ofrecen los navegadores. Si decides incorporar funciones de estilo de CSS3, hay muchos sitios web personales y de empresas que utilizan los elementos más vistosos, como border-radius o las funciones de transformación. En estos casos, los diseñadores pueden utilizar las funcionalidades y añadir alternativas adicionales para asegurarse de que la restitución de estas páginas en navegadores no compatibles no es demasiado diferente de cómo se ven en los navegadores más modernos.

Un área donde el uso de las funcionalidades de HTML5 está siendo muy activo es entre los dispositivos móviles y smartphones. En este mundo podemos encontrar aplicaciones web que aprovechan las ventajas de los nuevos tags de Video o Audio, puesto que ciertos dispositivos como Windows Phone o iPhone soportan HTML5 pero no soportan complementos como Flash o Silverlight.

Todos los navegadores web de mayor difusión apuestan por HTML5 en sus últimas versiones y si aprendes hoy sus secretos, podrás formar parte activa de una nueva era que ahora comienza para la Web, llena de interés y asombrosas novedades.

Funcionalidades y características futuras de HTML5

Como ya anotábamos antes, las funcionalidades de HTML5 se presentan en distintos grados de madurez y aquí solo hemos visto unas pocas. La lista siguiente es una enumeración de otras funcionalidades que forman parte de la especificación HTML5 o de sus tecnologías adscritas que deben añadirse (o en algunos casos ya están añadidas) a los navegadores del futuro.

• Drag and Drop Las operaciones Drag-and-Drop ("arrastrar y soltar") permiten al usuario mover en pantalla los elementos de forma visual en lugar de hacerlo pulsando botones. La API Drag and Drop de HTML5 se basa en la implementación original de Internet Explorer. Han cambiado algunos detalles y ciertos navegadores ofrecen una sintaxis diferente, pero ya está a punto de cerrarse una API normalizada. En el momento de escribir este



Página 24 de 156

libro, no todos los navegadores ofrecen soporte para algunas de las funcionalidades de drag-and-drop. Por ejemplo, algunos permiten seleccionar objetos o archivos desde otras ventanas o aplicaciones y depositarlos dentro de la ventana del navegador, pero otros no.

• La API File (Archivo) La API llamada "File" (Archivo) permite a los desarrolladores acceder a archivos del disco duro de la máquina cliente sin necesidad de instalar extensiones o complementos. Con esta API, al fin podremos disponer de un modelo unificado de acceso mediante el cual las aplicaciones web podrán operar con archivos (por ejemplo para subirlos a un servidor). Una aplicación de edición de fotos basada en web, por ejemplo, podría ofrecer el mismo modo de operación en todos los navegadores compatibles utilizando esta API.

• Disposición de objetos en pantalla con Flexbox CSS3 introduce una nueva forma de crear diseños para la distribución de los objetos en pantalla, llamado Flexible Box Layout ("Flexbox"). En este sistema se pueden crear disposiciones fluidas sin necesidad de acudir a las habituales directivas "float" y "clear" de CSS. Su objetivo es ofrecer herramientas más fiables y potentes a los diseñadores y desarrolladores para crear estructuras visuales complejas, válidas para la web y para dispositivos móviles.

• Distribuciones en rejilla y columnas múltiples También dentro de CSS, las definiciones de distribuciones en pantalla en formato de columnas múltiples y rejillas ("grids") son dos mejoras más orientadas a facilitar la presentación visual de las páginas web. La propiedad Multi-column de CSS nos permite distribuir un contenido (puede ser un bloque de texto, por ejemplo) en dos o más columnas, facilitando así su lectura sin tener que recurrir a complicados juegos visuales. El sistema de rejilla o Grid se relaciona de alguna forma con los Flexbox en el sentido de que esta funcionalidad está pensada para crear disposiciones en pantalla más complejas, tanto para las páginas web como para las aplicaciones. En el sistema Grid se introduce el concepto de filas y columnas y también el procedimiento para apilar y alinear objetos dentro de estas rejillas.

A pesar de que existen distintos niveles de compatibilidad entre los navegadores actuales para estas y algunas

otras funcionalidades descritas en esta lección, puedes ampliar aún más tus conocimientos sobre estos

conceptos, y dependiendo del navegador que utilices, puedes incluso empezar a crear páginas con esas

funcionalidades. El libro "Digital Classroom HTML" aborda estos conceptos y contiene ejercicios prácticos

que no se incluyen en este libro, por ejemplo para implementar Geolocalización, Consultas de medios CSS3,

Offline Storage, Flexbox y algunas más.

Identificación de sitios web basados en HTML5

En enero de 2010 el W3C presentó el logo de HTML5 para uso público, con el cual quieren promocionar las nuevas capacidades de HTML5 y sus tecnologías asociadas.

El logo de HTML5 se puede descargar y utilizar libremente y de forma gratuita. Este logo puede obtenerse como archive gráfico y se puede incorporar a los sitios web o cualquier otro contenido para indicar que se utiliza esta tecnología. Conviene saber que el W3C utiliza el término HTML5 en un sentido amplio e incluye otras tecnologías también. Además, el HTML5 se convertirá en el año 2014 en un estándar oficial, pero se recomienda a los diseñadores y desarrolladores que empiecen ya a utilizar la especificación. Si quieres más información sobre HTML5 y el logo, puedes acceder a las explicaciones del W3C en su web: www.w3.org/html/logo/



Página 25 de 156

Materiales de autoformación

La compatibilidad de los navegadores es un asunto de importancia especial al hablar de HTML5. Cuando decidas utilizar la especificación HTML5, sus diversas APIs relacionadas y CSS3, deberás tener en cuenta una gran cantidad de aspectos y el distinto grado de soporte que encontrarás para las funcionalidades entre los diferentes navegadores. Si quieres tener una visión más amplia de la evolución del estándar puedes consultar la última versión publicada en el sitio webhttp://www.w3.org/TR/html5/ También puedes comprobar los diferentes tests que implementa el W3C para garantizar la interoperabilidad entre todos los navegadoreshttp://test.w3.org/html/tests/reporting/report.htm

Repaso

Preguntas

1 Enumera tres componentes de HTML5 que ofrecen alternativas a los complementos o plug-ins de

los navegadores, como Flash y Silverlight.

2 ¿Qué diferencia hay entre la especificación de HTML5 y la familia HTML5 tal y como la hemos

definido en esta lección?

3 ¿Qué es la geolocalización?

Respuestas

1 Las etiquetas <video> y <audio> nos permiten integrar contenidos multimedia directamente en el

código HTML sin necesidad de complementos. El elemento <canvas> nos ofrece una superficie

para dibujar, crear formas, rellenos, gradientes, etc. y con la ayuda de CSS, incluso podemos crear

animaciones con estos objetos.

2 La especificación de HTML5 incorpora una serie de elementos nuevos (o etiquetas) que podemos

utilizar para crear una estructura de presentación nueva, o introducir nuevas funcionalidades en las

páginas web. La familia HTML5 está compuesta de tecnologías relacionadas entre sí, pero

independientes, como las APIs Web Storage o Geolocation, y CSS3.

3 La geolocalización es una tecnología web capaz de identificar la ubicación geográfica del usuario

y, a partir de esa información, permite obtener datos útiles, como por ejemplo, representar su

localización en un mapa, calcular rutas o sugerir establecimientos cercanos.



Página 26 de 156

Lección 2: Conceptos básicos de HTML, XHTML y CSS

Objetivos:

En esta lección conocerás los conceptos básicos de HTML, XHTML y CSS. Juntos, estos tres sistemas de codificación conforman la estructura y el estilo visual de las páginas web.

Para empezar

Vamos a trabajar con algunos archivos de la carpeta HTML5_02lessons. Comprueba que has

descargado y copiado la carpeta de prácticas de HTML5 en tu ordenador.

Lenguajes Web

En esta lección vamos a conocer los elementos básicos de dos lenguajes: HTML y CSS. Aunque tienen distinta sintaxis y reglas, dependen fuertemente uno del otro. Al finalizar esta lección podrás saber cómo crear paginas sencillas HTML, añadir imágenes, crear enlaces de una página a otra y modificar su aspecto en pantalla utilizando CSS.

Este tema es enormemente extenso y muchos de los principios básicos que se explican aquí te enseñarán a crear sitios web de calidad con los medios disponibles en este momento, al tiempo que te preparan para el futuro, al avanzar las nuevas funcionalidades de HTML5.

La estructura de la página web se basa en HTML

Los documentos HTML (iniciales de Hypertext Markup Language) utilizan la extensión .htm o .html. Esta extensión avisa al navegador web o a un dispositivo como un teléfono móvil, que en este archivo hay contenido HTML y dicho contenido se restituye en la ventana del navegador o la pantalla del dispositivo siguiendo las reglas del lenguaje HTML.

Las etiquetas se utilizan para definir el contenido de una página HTML. Estas etiquetas quedan enmarcadas dentro de los símbolos "menor que" (<) y "mayor que" (>) y se ponen al principio y al final de un objeto o texto utilizado en la página HTML. Aquí vemos un ejemplo de dos etiquetas de título con textos en ellas. Las etiquetas no se muestran en pantalla, pero todos los navegadores saben que el texto entre las etiquetas es un título de primer nivel:

<h1>Welcome to Worldwide Apparel's intranet</h1>

En este ejemplo, el <h1> es la etiqueta de apertura, y </h1> la etiqueta de cierre. A toda esta línea de código la denominamos "elemento". Más concretamente, nos referiríamos a ella como un "elemento de título de nivel 1" o también "elemento heading 1" si preferimos utilizar el nombre en inglés original.



Página 27 de 156

HTML y XHTML están estrechamente relacionados. Existe una lista de reglas definidas por el World Wide Web Consortium (organismo de normalización que también se conoce como W3C) que especifican los límites de HTML y XHTML.

Cómo se representa el código HTML en el navegador

Para entender mejor la relación entre el código HTML y lo que vemos en el navegador al abrir el archivo, en este ejemplo se muestra la conexión entre ambos:

A. Doctype. Esta línea indica al navegador que debe interpretar todo el código que sigue de acuerdo con un conjunto de reglas específico.

B. Elemento HTML. Este elemento contiene a los demás y le indica al navegador que contiene un documento HTML.

C. Elemento HEAD. En esta sección aparece información sobre la página, pero no se muestra en la pantalla.

D. Elemento TITLE. Cualquier contenido dentro de las etiquetas "title" se muestra en la parte superior del navegador. Es lo que se utiliza cuando un usuario

marca una página como "favorito" en el navegador.

E. Elemento BODY. Todo el contenido dentro del body se muestra en la ventana principal del navegador.

F. Elemento HEADING 1. El primero de seis elementos de cabecera. El contenido dentro de un heading de nivel 1 se muestra en tipografías grandes y en

negrita.

G. Elemento IMAGE: enlaza a un archivo de imagen y la muestra en pantalla.

H. Elemento PARAGRAPH: por defecto, el navegador añade un salto antes y después de este elemento, que suele contener varias líneas de texto.

I. Elemento STRONG: el texto dentro de él se muestra en negrita.

J. Elemento ORDERED LIST: abre una lista de elementos en forma de líneas numeradas por orden.

K. Elemento LIST: cada línea con esta etiqueta recibe automáticamente un número ordinal empezando por el 1.



Página 28 de 156

Detalles de la sintaxis de XHTML

Hay una diferencia esencial entre HTML 4.0 y XHTML 1.0 – los dos estándares más recientes publicados por el W3C (World Wide Web Consortium). Tal y como está definido el XHTML, las páginas escritas en XHTML se pueden ver también en los navegadores que muestran las páginas HTML actuales. Las etiquetas y atributos de XHTML y HTML siguen siendo las mismas, pero la sintaxis del código XHTML es más estricta.

Las diferencias más importantes entre XHTML y HTML son estas:

• En XHTML, todas las etiquetas deben escribirse en minúsculas. • XHTML exige que todas las etiquetas de apertura lleven su correspondiente etiqueta de cierre, es decir,

siempre debe existir una etiqueta al principio y otra al final de cualquier elemento, sea un título, párrafo, imagen u otro.

Todas las etiquetas XHTML deben tener cierre, aun en el caso de etiquetas especiales que técnicamente no

necesitan etiquetas de apertura y cierre. Por ejemplo, la etiqueta <br>, que inserta un salto de línea, utiliza

una sintaxis especial de autocierre. Una etiqueta que se cierra ella misma tiene este aspecto (con un espacio y

la barra inclinada antes del signo ">": <br /> • XHTML exige que el anidamiento de etiquetas (su inclusión unas dentro de otras), siga unas reglas estrictas.

En el ejemplo siguiente, la etiqueta <em>, que se utiliza para enfatizar un texto, se abre dentro de la etiqueta de título <h1>. Por tanto, tiene que cerrarse antes de que se cierre el elemento <h1>:

<h1> Esta es la intranet de <em>Worldwide Apparel</em>. Bienvenido</h1>

En este libro hemos utilizado código ajustado a XHTML al hacer los ejemplos, lo que ayuda a que nuestros diseños sean compatibles con los navegadores y dispositivos móviles actuales, y también porque así es más fácil la resolución de errores cuando aparecen.

Doctype indica al navegador qué debe esperar Al inicio de toda página web debe aparecer una declaración Doctype. La declaración de "tipo de documento" le aporta pistas al navegador sobre el tipo de información que se va a encontrar en la página. Puesto que las especificaciones de HTML y XHTML son distintas, el navegador sabe así qué lenguaje va a interpretar y representar. El navegador restituye la página empezando por la primera línea y va avanzando de principio a fin, por lo que esta indicación en la primera línea de todas tiene pleno sentido. Aunque no es obligatoria, es una buena práctica empezar siempre utilizando doctype al principio de nuestras páginas. La declaración doctype en HTML 4.01 tiene este aspecto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "

http://www.w3.org/TR/html4/loose.dtd">

Cuando un navegador lee una declaración Doctype, espera que todo en la página sea conforme con el lenguaje indicado. Si la página es totalmente conforme con las especificaciones, se considera válida. En la Lección 3 veremos qué cambios incorpora HTML5 en los requisitos de Doctype.

El W3C y la validación de la página

W3C es la abreviatura con la que se conoce al World Wide Web Consortium una organización sin ánimo de lucro cuyo objetivo consiste en orientar la evolución de la Web. El W3C ofrece directrices y reglas para especificaciones como HTML y XHTML. Una forma de definir la validez del código HTML o XHTML que generamos es utilizar el servicio online de validación del W3C, que es gratuito.



Página 29 de 156

Para este ejercicio es necesario tener acceso a Internet. Si no dispones de acceso a Internet puedes seguir

leyendo este apartado y conocer la teoría del proceso de validación.

1 Abre el navegador y ve a la página http://validator.w3.org.

2 Pulsa en la pestaña "Validate by File Upload".

El validador del W3C permite analizar el código HTML para verificar su conformidad o posibles errores.

3 Pulsa en Browse y ve a la carpeta HTML5_02lessons. Selecciona el archivo w3_noncompliant.html y

pulsa Abrir. Pulsa en el botón Check para validar el código.

4 El sitio del W3C nos devuelve una serie de errores. Si te desplazas por la página hacia abajo puedes ver

información detallada sobre los errores encontrados. No te preocupes por eso ahora. A continuación vamos a

cargar un archivo casi idéntico, pero sin errores.

5 Pulsa en el botón Browse, ve de nuevo a la carpeta HTML5_02lessons, selecciona el

archivo w3_compliant.html y pulsa Abrir.

6 Pulsa el botón Revalidate. Ahora verás un mensaje de felicitación que dice que la página ha sido revisada y

es conforme con las reglas de XHTML 1.0 Strict.



Página 30 de 156

Aunque la página es válida, puede que no se vea muy atractiva en un navegador. Este ejemplo utiliza una

página en la que no se aplican estilos y no lleva imágenes, para ilustrar mejor el proceso. Conviene saber que

tener un código conforme es solo un paso dentro de una serie que nos garantizará que nuestras páginas web se

van a ver en el mayor número posible de ordenadores y dispositivos.

Puedes validar también páginas web que ya se ven en Internet. Para ello puedes utilizar la opción "Validate

by URL". También puedes pegar código HTML directamente dentro del validador eligiendo la opción

"Validate by Direct Input".

7 En tu navegador, selecciona "Archivo – Abrir" y muévete hacia la carpeta HTML5_02lessons. Selecciona el

mismo documento w3_compliant.html que acabamos de validar, pulsa Abrir y después en Aceptar. Si utilizas

Internet Explorer 9, puedes también abrir la carpeta HTML5_02lessons desde el sistema operativo y arrastrar

el documento w3_compliant.html y soltarlo dentro de la ventana del navegador.

Una página "válida" puede tener enlaces a imágenes que no existen y ofrecer un diseño mediocre.



Página 31 de 156

Ya que sabemos que esta página utiliza un XHTML válido, sabemos también que si tenemos problemas al

representarla en pantalla, no se deben al código XHTML. Sabemos que no faltan etiquetas y que todas ellas

están bien escritas. El proceso seguido puede ser útil para resolver errores, ya que nos facilita la detección de

cualquier problema de sintaxis.

8 Abre otra vez en tu navegador Ia página http://validator.w3.org y pulsa en la pestaña "Validate by File

Upload". Aunque veremos las diferencias entre las páginas HTML5 y las escritas con HTML 4.01 y XHTML

en la siguiente lección, podemos ver no obstante los resultados de una página si se valida como HTML5.

9 Pulsa el botón Browse, ve a la carpeta HTML5_02lessons de tu ordenador y selecciona el

archivo html5_compliant.html. Pulsa Abrir y después el botón Check. Aparecerá un resultado positivo: el

documento es conforme con HTML5.

Otras ventajas del diseño basado en estándares

La validación de páginas del W3C es el aspecto más tangible de un diseño web conforme a estándares,

pero hay también otras ventajas importantes al crear páginas bien estructuradas:

Menos código: el uso de HTML y CSS nos permite crear páginas similares con menos líneas de código,

es decir, menos trabajo para el desarrollador y tiempos de descarga menores para el visor.

Mantenimiento más sencillo: tener menos código supone un mantenimiento más sencillo, y esto

beneficia tanto al que escribe el código como a cualquier otra persona que después deba encargarse de su

mantenimiento y revisión.

Accesibilidad: los documentos creados de forma semántica, es decir, que utilizan la etiqueta HTML más

adecuada a su función en cada momento, pueden facilitar la lectura y navegación a personas con

discapacidad visual y los usuarios que los visitan encuentran la información más fácilmente.

Optimización para motores de búsqueda: Las páginas web que incluyen secciones claras e

identificadas de forma lógica, tanto a nivel de código como de contenidos, facilitan la labor a los motores

de búsqueda a la hora de indexarlas y clasificarlas puesto que con un contenido organizado y bien

identificado resulta más fácil evaluar el contexto temático y la relevancia de la información que ofrecen.

Compatibilidad: los sitios web que independizan la estructura con respecto al estilo se adaptan mucho

más fácilmente a dispositivos móviles y formatos de pantalla variados. CSS nos permite aplicar hojas de

estilo alternativas que optimizan la presentación en pantalla dependiendo del dispositivo utilizado.

Estructura HTML

Uno de los conceptos más importantes que debemos dominar a la hora de diseñar contenidos web es la estructura anidada de los documentos HTML. Los elementos suelen presentarse contenidos unos dentro de otros. Por lo general tenemos que empezar por diseñar la estructura HTML de la página para después continuar con los estilos, aplicando CSS.

En este ejemplo podemos ver los elementos más básicos que nos vamos a encontrar en prácticamente toda página web:



Página 32 de 156

<html> <body> </body> </html>

El elemento <body> está anidado (incluido) dentro del elemento <html>. En términos de programación, <body> está colocado entre la etiqueta de apertura <html> y la de cierre </html>, y por eso decimos que las etiquetas anidadas son las que se encuentran entre otras etiquetas de apertura y cierre. Ambos elementos, <body> y <html>, forman la estructura básica de toda página web. Cuando un navegador abre un documento HTML busca esta estructura.

El contenido dentro de la etiqueta body es la parte visible de la página, ya que es lo que se muestra en la ventana del navegador.

<html> <body> Aquí están los recursos internos y el centro de información de los empleados de Worldwide Apparel </body> </html>

En los documentos HTML parte del contenido se muestra en pantalla dentro de la ventana del navegador, pero hay otra parte del código que queda oculta, aunque es de gran utilidad para el navegador, para los motores de búsqueda y para el desarrollador. Algunos ejemplos de este código oculto son los scripts que sirven para añadir interactividad a la página, o también el código que ayuda a los buscadores a clasificar el documento, y los estilos que definen el aspecto de la página. Este código suele aparecer dentro del elemento <head>, el cual a su vez, está anidado dentro de las etiquetas <html>.

Un ejemplo:

<html> <head> </head> <body> Aquí están los recursos internos y el centro de información de los empleados de Worldwide Apparel </body> </html>

En este ejemplo, todavía no tenemos nada dentro del elemento <head>. Puedes ver que está anidado dentro del elemento <html>, pero no dentro del elemento <body>. El elemento <head> se abre y se cierra antes de que empiece el elemento <body>. Por su parte, el elemento <body> contiene texto, pero le falta un contexto y por ello los buscadores no podrán determinar si se trata de un título, una lista, un párrafo, un comentario o un contenido de cualquier otra naturaleza. Para definir el texto como párrafo, se utiliza la etiqueta <p>:

<html> <head> </head> <body> <p> The internal resource and information center for all employees of Worldwide Apparel </p> </body> </html>



Página 33 de 156

El elemento paragraph ahora queda anidado dentro del elemento <body> que, a su vez, está anidado dentro del elemento <html>. Ahora vamos practicar con un archivo html.

1 Abre un editor de textos (p.ej. Notepad) y selecciona Archivo – Abrir. Ve a la carpeta HTML5_02lessons.

Dependiendo del editor de textos que utilices, puede que tengas que seleccionar "Todos los archivos" en vez de

"Documentos de Texto" para poder ver el archivo. Selecciona el archivo 02_index.htmly pulsa Abrir.

2Selecciona Archivo – Guardar como, ponle el nombre 02_index_work.html y pulsa Guardar. Así hemos

creado una copia con la que podremos trabajar manteniendo el archivo original como copia de seguridad.

Para entender mejor la estructura del HTML y el anidamiento de etiquetas, vamos a añadir un enlace a este

documento, asociando las palabrasWorldwide Apparel a una página web de Internet.

3 En el último párrafo, donde dice "Todo el contenido de este sitio web es copyright de Worldwide Apparel,"

pulsa una vez antes de la palabra "Worldwide" y luego escribe el código siguiente: .

Esta etiqueta es la etiqueta de apertura de un elemento "anchor" (un enlace) que nos sirve para vincular el texto

a otra página web en nuestro propio sitio web o a cualquier dirección de Internet.

4 Pulsa a la derecha de la palabra "Apparel" y escribe . Esta es la etiqueta de cierre del enlace, y es obligatoria

en XHTML.

Algunos editores web, como el editor gratuito Visual Web Developer Express de Microsoft, se encargan de

añadir automáticamente las etiquetas de cierre. Puedes desactivar la función de "Autocompletar". En cada

editor es diferente, pero en Visual Web Developer Express 2010 podemos cambiar esta configuración por

defecto desde el menú Herramientas < Opciones > Formato y después desmarcar la casilla "Insertar

automáticamente etiquetas de cierre".

Para finalizar el proceso de creación de un vínculo, necesitamos indicar la dirección web a donde debe remitir,

lo que se hace con el atributo href.

5 En la etiqueta “<a>” de apertura, sitúa el cursor entre la letra <a y el signo de cierre (>). Pulsa la barra

espaciadora una vez y después href="" . El código completo de la etiqueta debería quedar ahora como <a

href="">.

Ahora tenemos una etiqueta anchor y el atributo href, pero este enlace no dirige a ninguna parte. Tenemos que

añadir ahora un valor al atributo href, que en este caso será una dirección de Internet (URL).

6 Dentro de las comillas escribe la dirección

siguiente: http://www.digitalclassroombooks.com/worldwideapparel.

7 En el menú Archivo selecciona Guardar y tras grabar el archivo, muéstralo en el navegador web, bien

abriéndolo desde el propio navegador (Archivo – Abrir) o bien pulsando Ctrl + click (el botón del ratón en

Mac OS) o Ctrl + botón derecho en Windows, seleccionando después el archivo desde el propio sistema

operativo. El enlace aparece subrayado y con el color azul normal, indicativo de que se trata de una dirección

Web que aún no hemos visitado.



Página 34 de 156

Un enlace sencillo, creado con la etiqueta y el atributo href.

8 Cierra el navegador y vuelve al editor de texto.

Insertar imágenes en HTML

Para colocar imágenes dentro de un documento HTML se utiliza la etiqueta <img>. Al igual que ocurre con la etiqueta <a>, la etiqueta de imagen por sí sola no hace nada. Depende del valor de los atributos que especifiquemos, que indican qué imagen se debe mostrar y cómo ha de hacerse. Aquí vamos a insertar una imagen en nuestro documento HTML.

1 Mueve el cursor hacia el primer párrafo y sitúalo inmediatamente después de la etiqueta de cierre </p>. Pulsa

Intro para pasar a la línea siguiente. Escribe <img />.

La etiqueta de imagen es una categoría especial dentro de las etiquetas HTML, de las que admiten el

autocierre. No necesitamos escribir por separado etiqueta de apertura y cierre: con una sola es suficiente, pero

es importante que la escribamos bien. Hay un espacio de separación entre la palabra img y la barra /. Así se

cumplen los requisitos de sintaxis de XHTML y el archivo de imagen que vamos a utilizar se indicará en el

espacio que queda entre img y /.

2 Mueve el ratón a la derecha de la palabra img, inserta un espacio en blanco y escribe src="".

src es la abreviatura del atributo source (origen), y tenemos que indicar un valor para él, que es la dirección

URL de la imagen que queremos mostrar dentro de la página.

3 En el interior de las comillas de src= escribe images/familysitting.jpg.

El código quedaría así:

<img src="images/familysitting.jpg" />

Esta línea le indica al navegador que busque dentro de la carpeta images y presente en pantalla el

archivo familysitting.jpg . En los pasos siguientes debemos asegurarnos de que se mantiene el espacio en

blanco de separación entre la comilla y el cierre de la etiqueta. Ahora vamos a añadir un atributo alt.

El atributo alt representa el texto alternativo a la imagen, y es obligatorio añadirlo para mantener la validez de

la página. Este atributo es muy útil para las personas que utilizan sistemas de lectura de pantalla para navegar



Página 35 de 156

por la Web, ya que permite convertir a voz el texto indicado como valor. También sirve para dar un contenido

al espacio vacío que se genera cuando, por cualquier razón, la imagen no se puede representar (porque el

enlace está roto o el archivo tiene un formato incorrecto, por ejemplo).

4 Sitúa el cursor a la derecha de la comilla de cierre que sigue al nombre de archivo familysitting.jpg e inserta

un espacio en blanco, y después escribe alt="".

5 Dentro de las comillas del paso anterior, escribe Familia sentada en unos escalones.

6 En el menú Archivo, selecciona Guardar y después abre el archivo en el navegador.

Las imágenes se añaden a las páginas web con el elemento src y una referencia al archivo gráfico.

Tanto el atributo src como el alt son obligatorios bajo XHTML. Hay también otros atributos, opcionales, que

podemos utilizar. Vamos a ver dos de ellos: height y width.

7 Regresa al editor de textos y pon el cursor a la derecha de las últimas comillas que siguen al atributo alt,

inserta un espacio y escribe lo siguiente: width="296" height="250". Estos dos atributos indican al navegador

las dimensiones que tendrá esta imagen en pantalla (ancho y alto respectivamente). Estos atributos le indican al

navegador las dimensiones que tendrá la imagen en pantalla (que no necesariamente tienen que coincidir con

las dimensiones originales), y aunque estos valores son opcionales, ayudan a restituir la página de manera más

eficiente y siempre que sea posible, debemos utilizarlos.

El empleo de atributos opcionales

Muchos de los atributos opcionales se encuadran dentro de lo que se denomina "buenas prácticas". Las

buenas prácticas son un concepto amplio, que se utiliza para describir la manera generalmente aceptada



Página 36 de 156

El empleo de atributos opcionales

de hacer las cosas en el diseño y programación para la Web. Hay, en general, razones de sentido común

detrás de las buenas prácticas: por ejemplo, al indicar la altura y la anchura se crea un espacio (conocido

como "placeholder") para la imagen, y permanece aún en el caso de que la imagen no se haya descargado,

debido a la lentitud de la conexión. Si no se crea este placeholder con una anchura y altura prefijadas, el

aspecto y distribución de los elementos en pantalla va cambiando a medida que se cargan las imágenes, lo

que en ciertos casos impide al usuario poder leer los contenidos durante ese proceso.

8 En el menú Archivo, selecciona Guardar y visualiza la página en el navegador para ver la imagen.

Mantén abierto el documento mientras trabajas con él en el siguiente ejercicio.

El papel de CSS

CSS (Cascading Style Sheets) utiliza un lenguaje distinto de HTML. CSS nos permite aplicar estilos de manera coherente a los distintos elementos de las páginas del sitio web, de modo que los títulos, listas y párrafos pueden verse igual en todas y cada una de las páginas.

Cómo hacemos referencia a la sintaxis de CSS en este libro

Antes de que empecemos a trabajar con CSS es preciso aclarar cómo vamos a denominar a las distintas

partes de la sintaxis de CSS en este libro. No es cosa fácil dicho así, porque ocurre que hay diferencias

entre la especificación oficial del lenguaje CSS y la forma en que los diseñadores se refieren a CSS en el

mundo real. En cualquier caso, los conceptos básicos son estos: el siguiente código es lo que conocemos

como una regla de CSS:

Los componentes de esta regla son:

A. Selector. B. Declaración. C. Propiedad. D.Valor.

De vez en cuando iremos mencionando los distintos componentes en el libro, así que si te pedimos que

cambies el valor "blue" por "red", debes tener claro lo que hay que hacer. O, si te pedimos que busques y

cambies el selector h1 por un selector h2, que ello tenga sentido para ti.

En el día a día la mayor parte de los diseñadores no son tan concretos. Por ejemplo, podrían referirse a la

regla anterior como "estilo", "regla de estilo", "la regla h1", o "la regla CSS para h1". Además, como

puedes ver, el nombre oficial para el par propiedad-valor, se denomina "declaración". De nuevo, en el

mundo real los diseñadores no suelen utilizar el término "declaración", sino que a menudo utilizan el

término "propiedad" o "propiedades" de forma indistinta.



Página 37 de 156

Definir un estilo para los títulos

Para hacernos una idea de cómo funciona CSS vamos a crear una regla CSS sencilla que cambia el estilo de un título en la página. En el archivo02_index_work.html ya tenemos el texto "Welcome to Worldwide Apparel's intranet" dentro de una etiqueta <h1>. Puede que una de las mejores maneras de entender la acción de CSS sea ver cómo se aplica el estilo por defecto para este título al escribirlo en pantalla.

1 Dentro del navegador, analiza el texto de título. El estilo y las instrucciones de formato las aportan las

"reglas" que el propio navegador aplica por diseño a los elementos <h1> a la hora de presentarlos en pantalla.

El tamaño, color y tipo de letra los resuelve el navegador ya que no dispone de otras instrucciones de formato.

El navegador solo sabe que hay un elemento "heading 1" y lo muestra de la forma en que considera adecuado.

Por ejemplo, el tamaño por defecto es 16 pixels, el color es el negro y la fuente, Times New Roman. Esto es lo

que nos encontramos, por ejemplo, en Internet Explorer, Firefox y algunos otros navegadores. Ahora podemos

modificar esta apariencia con una regla de CSS.

2 En la parte superior de la página busca la etiqueta <title>, y justo debajo de ella, añade una línea nueva, con

el siguiente texto: <style type="text/css">

3 Pulsa Intro tres veces y después escribe </style>. En este momento tenemos un elemento de estilo sin

contenido alguno, pero nos servirá para insertar ahí una regla con la que vamos a modificar el estilo del

elemento <h1>.

El elemento <style> queda dentro de las etiquetas delimitadoras de la cabecera <head> de la página. En HTML

todo lo que queda dentro de la sección <head> no se muestra en pantalla. Por ejemplo, también tenemos un

elemento <title> en esta sección. Este título aparece en la parte superior de la ventana del navegador, pero no

dentro de la página propiamente.

4 En la línea vacía que hay debajo de la etiqueta de apertura <style>, escribe esto: h1 {

Este es el selector, el que nos dice a qué elemento de HTML queremos aplicar el estilo, y en este caso es el

elemento heading 1.

5 Pulsa Intro y después el tabulador para poner el cursor debajo del signo de la llave en el editor, si es que el

propio editor no te posiciona automáticamente en ese lugar. La tabulación es opcional, pero hace que el código

CSS se lea mejor. Como veremos ahora, el número de líneas en esta regla va a aumentar y es muy conveniente

que el código con facilidad.

6 Escribe este código debajo de h1 {: color: red;

La palabra color se denomina como una propiedad en la sintaxis CSS y la palabra red es el valor que le

aplicamos a esa propiedad. Al par compuesto por una propiedad y un valor se le denomina declaración.

7 Pulsa Intro otra vez y en la línea siguiente escribe el signo } el signo de llave que cierra al signo { que hemos

escrito en el paso 4. Ahora tenemos una regla con estas tres líneas: h1 { color:red; }



Página 38 de 156

8 Guarda el archivo en disco y visualiza la página en el navegador. La cabecera aparece ahora en color rojo y

eso nos indica que hemos escrito bien la regla CSS. Cierra el navegador y vuelve al editor.

El título dentro de la etiqueta H1 tiene un nuevo color, por aplicación de una regla CSS.

9 En el archivo HTML, selecciona la palabra red y cámbiala por este otro código, que representa un color de la

gama de colores que pueden mostrarse en pantalla: #FF0000. Este valor es el mismo color rojo, pero en

notación hexadecimal. En CSS puedes utilizar colores por su nombre en inglés o mediante esta notación.

Guarda el archivo y muéstralo de nuevo en el navegador. El color sigue siendo el mismo rojo. La notación

hexadecimal es el método más habitual para indicar colores en la Web.

Notación hexadecimal de color

El color, tanto en HTML como CSS, se designa mediante un código de seis caracteres precedido por el

signo de almohadilla. A esta notación se le llama código hexadecimal, y es el sistema que se utiliza para

identificar y establecer el color de los elementos. Con esta notación podemos reproducir prácticamente

cualquier color. Por ejemplo, el color rojo oscuro se representa como #CC0000.

El código se divide en tres pares de dígitos, y cada uno de ellos representa el valor RGB del espectro. Por

ejemplo, el color blanco se representa en notación RBG como R:255 G:255 B:255, y su equivalente en

HTML en formato hexadecimal es #FFFFFF (siendo FF el equivalente hexadecimal del número 255

decimal, que se repite para los tres pares). Un programa de edición de imágenes como Photoshop nos



Página 39 de 156

Notación hexadecimal de color

permite elegir un color concreto de una paleta y obtener directamente su equivalente RGB, tanto decimal

como hexadecimal, para insertarlo en una regla CSS.

Hay también una serie de sitios web donde podemos conocer las equivalencias entre los colores y sus

códigos, como por ejemplo: www.w3schools.com/Html/html_colorvalues.asp

La regla que acabamos de crear emplea lo que se conoce como "selector de tipo", puesto que se aplica a todas las apariciones del elemento tipo h1 en el documento. Los selectores de tipo asignan propiedades CSS a cualquier etiqueta HTML del documento. En este caso, a la etiqueta <h1>. Todas las apariciones de <h1> se mostrarán en pantalla con el texto en rojo. Los selectores de tipo también se les suele denominar "selectores de etiqueta". No es frecuente que oigas a nadie utilizar la expresión "selector de tipo", pero es el nombre oficial que tiene, por eso lo llamamos así en este capítulo.

Ahora vamos a ver otra categoría de estilos CSS que se conocen como clases. También vamos a empezar a trabajar con el elemento <span> de HTML, que nos permite separar y controlar partes de un contenido, como por ejemplo una frase dentro de un párrafo, o una palabra concreta dentro de una frase.

Los estilos de clase y el elemento <span>

Los selectores de etiqueta se utilizan con mucha frecuencia, pero solo se pueden aplicar a elementos HTML. Cuando lo que queremos es modificar el estilo de alguna cosa que no coincide exactamente con una etiqueta, por ejemplo cambiar el color de una única palabra dentro de un párrafo, el selector de etiqueta no es una buena opción (e incluso en algunas ocasiones resulta imposible de aplicar). En este caso podemos utilizar el selector de clase, que es una regla CSS que se puede aplicar a cualquier elemento dentro de una página. Los selectores de clase tienen unas opciones de nomenclatura flexibles, pero es muy conveniente utilizar nombres que describan adecuadamente lo que hacen. Por ejemplo, podemos crear selectores de clase como .caption, .imageborder, o .redtext. En este ejercicio vamos a crear un estilo de clase que aplica color rojo a las palabras Worldwide

Apparel en un párrafo.

1 Sitúa el cursor en la línea justo debajo de la llave de cierre de la regla h1 y escribe esto: .red { color:red; }

Fíjate en el punto al principio del selector de clase. El texto que sigue al punto es el nombre de la clase. Puedes

utilizar cualquier nombre, pero el punto al principio del mismo es obligatorio, para poder identificarlo como

una clase. La declaración color:red es la misma que en la práctica anterior, pero en este caso el selector no es el

elemento h1.

Ahora aplicaremos esta clase a las palabras Worldwide Apparel para que se vean en color rojo. Para ello

tenemos que insertar una etiqueta <span>.



Página 40 de 156

2 En el primer párrafo <p> dentro de la etiqueta <body>, sitúa el cursor justo delante de las

palabras Worldwide Apparel, pulsa y escribe: <span>

3 A la derecha de Apparel añade la siguiente etiqueta de cierre </span>.

El código debe quedar así:

<p>... employees of <span> Worldwide Apparel</span> </p>

Guarda el archivo. Si visualizas ahora la página en el navegador verás que no hay ningún cambio. La etiqueta

<span> en nuestro HTML está vacía, no hace nada y tenemos que asociarla a un estilo. En este caso, la

etiqueta <span> delimita el contenido dentro del párrafo al cual se aplicará un estilo, pero por sí misma no

aplica ningún estilo ni tampoco lo define.

4 Ve a la etiqueta de apertura <span>. Entre la letra "n" de "span" y símbolo ">", inserta un espacio en blanco

y escribe esto: class="red"

Ahora la línea queda así:

<p>... employees of <span class="red"> Worldwide Apparel</span> </p>

5 Busca el segundo párrafo donde aparece información de copyright y dentro de la etiqueta de apertura <p>

escribe esto que destaco en color rojo: <p class="red"> All content on this site is the copyright of <a href=" http://www.digitalclassroombooks.com/worldwideapparel"> Worldwide Apparel</a>.</p>

6 Guarda la página y visualízala en el navegador. Todo el texto del párrafo (excepto el vínculo) aparece ahora

en rojo. Aquí es donde vemos la flexibilidad de las clases CSS: se pueden utilizar y reutilizar para aplicar

estilos a distintas partes de la página. El vínculo no cambia de color porque se le aplica un estilo predefinido

específico (el de la etiqueta <a>). En un ejercicio más adelante veremos cómo se cambia el estilo de un

vínculo.



Página 41 de 156

Los estilos de clase CSS se pueden aplicar a elementos de línea y de bloque, como ocurre en el último párrafo.

7 Cierra el navegador, pero mantén abierto el documento en el editor de texto porque seguiremos trabajando

sobre él en el siguiente ejercicio.

Tres maneras de utilizar estilos

En la práctica anterior los estilos estaban situados dentro de la sección de cabecera (<head>) de la página. Esta modalidad recibe el nombre de hoja de estilos interna. Además de hojas de estilo internas, también existen las hojas de estilos externas y los estilos aplicados directamente ("inline"). Una hoja de estilo externa es un documento independiente con la extensión .css. Cuando utilizamos un archivo externo, los estilos se definen en él y en las páginas HTML tenemos que insertar un enlace a dicho archivo. Mientras que las hojas de estilo internas solo se aplican a la página donde residen, las hojas externas se pueden aplicar a múltiples documentos HTML.

Los estilos inline o directos son la tercera posibilidad pero se utilizan mucho menos que las otras dos. En este caso, las reglas se declaran dentro de las propias etiquetas HTML. Un ejemplo de estilo inline para escribir en rojo el texto del título puede ser:

<h1 style="color:red">Worldwide Apparel</h1>

Los estilos directos son herramientas potentes porque se superponen tanto a los estilos internos como a los externos, aunque solamente se aplican a una etiqueta cada vez. Por su propia naturaleza, resulta complicado reutilizarlos. En el ejemplo anterior podemos ver que el estilo para presentar el texto en rojo va dentro de la etiqueta <h1>. Si tuviéramos 50 elementos <h1> en nuestro sitio web y utilizásemos estilos inline, necesitaríamos añadir este código de estilo 50 veces, pero lo peor es que



Página 42 de 156

si quisiéramos cambiar el color a verde, tendríamos que buscar las 50 apariciones de este estilo y remplazar la palabra "red" por "green". Los estilos inline son útiles para aplicaciones puntuales o cuando no podemos utilizar una hoja de estilos interna o externa. Uno de estos casos puede ser un correo electrónico en formato HTML.

En las siguientes lecciones no vamos a utilizar mucho los estilos directos, en línea con la forma en que se diseñan actualmente los sitios web. La práctica más habitual consiste en combinar estilos internos y externos.

Cuándo utilizar hojas de estilo internas y externas

En las hojas de estilo internas, las reglas CSS quedan escritas directamente dentro del documento utilizando la etiqueta <style>. La hoja de estilos queda ubicada dentro de la sección <head> del documento.

En el caso de las hojas internas, las reglas CSS solo se aplican al documento en donde residen. Por ejemplo, si tenemos un sitio web con 20 páginas y decidimos utilizar hojas de estilo internas, deberemos crear una hoja de estilos dentro de cada una de esas 20 páginas. Un cambio en cualquier regla exigiría modificar todas y cada una de las hojas de estilo internas en dichas páginas para mantener la consistencia.

En las hojas externas las reglas CSS, como ya explicábamos anteriormente, se guardan en archivos independientes. Podemos asociar un mismo archivo .css a cualquier página HTML, y con ello nos ahorraremos mucho trabajo y ganamos en flexibilidad. Si definimos una regla para el elemento <p> en una hoja de estilo externa, todos los párrafos del sitio web quedan modificados de inmediato. En la práctica siguiente vamos a crear una hoja de estilo externa la asociaremos a una página HTML nueva.

Creación de una hoja de estilos externa

Una página HTML no tiene por qué limitarse a utilizar solamente una hoja de estilos externa, y en muchos sitios web de grandes dimensiones, las definiciones de estilos suelen repartirse entre varios archivos, para facilitar su organización y mantenimiento. Podemos incluso utilizar hojas de estilos para funciones concretas, como imprimir una página o visualizar el contenido en dispositivos móviles. Se pueden diseñar hojas de estilo también para que nuestros sitios web sean compatibles con navegadores antiguos.

En este ejercicio vamos a crear una hoja de estilos externa, traspasaremos las reglas desde el documento HTML a la hoja externa y después asociaremos la hoja de estilos a una página HTML nueva

1 Desde el menú Archivo – Nuevo, selecciona la Plantilla de Estilos CSS y ábrela si tu editor web ofrece esta

opción.

Puede que tu editor de textos tenga un menú de opciones distinto, y debas seleccionar un comando

equivalente. Por ejemplo, muchos editores tienen la opción Archivo – Nuevo documento CSS..



Página 43 de 156

2 Desde el menú Archivo, selecciona "Guardar como" y ponle al archivo el nombre styles.css, y lo guardas

dentro de la carpeta HTML5_02lessonsfolder. Una hoja de estilos CSS lleva la extensión .css, pero en

realidad se trata de un archivo de texto plano.

3 Pasa ahora al documento HTML que hemos utilizado en el último ejercicio (02_index_work.html), pero

mantén abierta también la hoja de estilos.

4 En el documento HTML busca las reglas que has escrito dentro de las etiquetas <style> y selecciónalas con

el ratón. No selecciones las etiquetas <style> y </style>, solo las reglas, a partir de h1 y hasta encontrar el

último signo de llaves de cierre (}).

Selecciona solo las reglas de estilo, no las etiquetas <style>.

5 En el menú Edición selecciona Cortar y pasa ahora al archivo styles.css. Si en este archivo aparece algún

código, tendrás que sobrescribirlo seleccionándolo y después pegando (desde el menú Edición – Pegar) las

reglas que acabas de seleccionar. Guarda el archivo en el disco.

La hoja de estilos externa funciona como sustituta de las etiquetas <style> del documento HTML. Ahora que

hemos pasado las reglas a este nuevo documento, necesitamos insertar un vínculo a él en la página HTML para

que el navegador sepa dónde están las reglas de estilo que debe aplicarle.

6 En el editor, vuelve al archivo 02_index_work.html y guárdalo en disco. Ahora vamos a añadir la etiqueta

<link> que apuntará a nuestro archivo styles.css. Este paso es fundamental porque si no vinculamos la hoja de

estilos externa, la página HTML se mostrará sin aplicar esos estilos.

7 Pon el cursor detrás de la etiqueta de cierre </ style> y pulsa Intro para empezar a escribir en la línea

siguiente. Escribe esto: <link rel="stylesheet" type="text/css" href="styles.css" />



Página 44 de 156

En esta línea estás añadiendo los atributos rel, type y href. Probablemente recordaras que el atributo href ya lo

habíamos utilizado al insertar el vínculo en uno de los ejercicios anteriores. Para que funcione correctamente

nuestra hoja de estilos externa, debemos escribir de forma precisa tanto el nombre como el path del archivo.

8 Selecciona Archivo – Guardar y visualiza la página HTML en el navegador. La página debe verse igual que

antes, ya que estamos utilizando los mismos estilos. Simplemente ocurre que se aplican desde fuera del

documento.

9 Cierra el navegador y vuelve al editor de texto. Vamos a crear un nuevo documento HTML y le añadiremos

el mismo enlace al archive CSS externo, para ver cómo se aplican las reglas.

10 Desde el menú Archivo, abre el archive test.html que está en la carpeta HTML5_02lessons. Es un

documento que no contiene nada.

11Sin salir del editor, vuelve al archivo 02_index_work.html y selecciona todo el elemento <link> que has

escrito en el paso 7: <link rel="stylesheet" type="text/css" href="styles.css" />

En el menú Edición, selecciona Copiar.

12Vuelve al documento test.html, pulsa debajo del elemento <title> y pega (Edición- Pegar) para que añadir

la línea anterior. Guarda el archivo.

Ahora, la hoja de estilo externa también está asociada a este documento HTML. Las etiquetas HTML que

añadamos a este nuevo documento quedarán modificadas si existe alguna regla para ellas en el archivo CSS.

Por ejemplo, vamos a añadir ahora un elemento heading 1 y su texto cambiará de forma automática a color

rojo.

Pulsa dentro del elemento <body> y escribe:

<h1> Worldwide Apparel benefits page </h1>

Guarda el archivo y visualízalo en el navegador.

La etiqueta <h1> obtiene su estilo de una hoja de estilos CSS externa que hemos creado. El título se escribe en rojo porque la regla de estilo para el elemento <h1> es color:#FF0000 y dicha regla está dentro de una hoja externa asociada a dos páginas: 02_index_work.html y test.html. Esto nos permite controlar el estilo de ambos documentos HTML desde un único sitio.

En qué consisten los estilos en cascada



Página 45 de 156

Hemos visto que hay tres sitios donde podemos indicar reglas CSS: dentro de la propia etiqueta (inline), internamente y en archivos externos asociados. Si surgiera algún conflicto en la definición de estilos entre las declaraciones inline, interna y/o externa, el estilo directo (inline) será el que prevalezca porque es el que más cerca se sitúa del código HTML. La hoja de estilo interna tiene precedencia sobre cualquier otra externa, y las definiciones utilizadas en hojas de estilo externas se utilizan solo si no entran en conflicto con las declaraciones internas o directas.

Uso de textos y tipos de letra en la web

A la hora de diseñar para la web, podemos formatear el texto de una forma parecida a como se hace en las aplicaciones de procesamiento de textos y diseño publicitario de los equipos de escritorio, pero debemos tener en cuenta algunas diferencias importantes. Cuando especificamos el uso de una fuente (tipo de letra) concreta, esta fuente ha de estar instalada en el ordenador o el dispositivo del usuario donde se va a restituir la página. Si el ordenador o dispositivo no dispone de esa fuente, el navegador la sustituye por otra.

Puesto que es imposible saber qué fuentes están instaladas en los ordenadores de los usuarios, y debido a la capacidad que tienen los navegadores para sustituir unos tipos de letra por otros, es posible que los resultados obtenidos en ciertos equipos no se correspondan con el diseño que hemos previsto. Una opción puede ser utilizar fuentes que sabemos que podemos encontrar en la mayoría de los ordenadores. Lo malo es que son muy pocas estas fuentes de las cuales podemos tener la certeza de que se encuentran en prácticamente todos los ordenadores del mundo.

Tipos de letra de uso común en la web

Estas son las Fuentes que podemos utilizar con más confianza en la Web:

Arial Verdana Georgia Times New Roman Courier Trebuchet Lucida Tahoma Impact

La lista es pequeña porque tiene en cuenta las plataformas Mac y Windows y suponemos además que aún

acceden a la web muchos ordenadores antiguos. Estos equipos más antiguos tienen una lista de fuentes

preinstaladas más reducida que los actuales, por lo que un diseñador tiene que tener esto en cuenta a la

hora de seleccionar el tipo de letra que usará en sus páginas.

Por otra parte, esta lista es pequeña también por razones de tipo estético. Por ejemplo, las fuentes Courier

e Impact se usan poco porque, aunque estén disponibles de forma general, su apariencia es muy peculiar y

limita mucho su uso de forma habitual.



Página 46 de 156

Una de las soluciones que nos puede ayudar a resolver la falta de tipos de letra variados en la Web es el uso de una "pila" de fuentes, ("font stack" en inglés). En CSS, la pila de fuentes es una lista de varios tipos de letra que puede utilizar el navegador para mostrar texto en pantalla.

Aquí vemos un ejemplo de pila de fuentes CSS:

font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;

En este ejemplo, el navegador primero busca la fuente Helvetica Neue en el sistema del usuario. Fíjate en las comillas del ejemplo. En la mayoría de casos, cuando se indica una fuente, las comillas no hacen falta pero si el nombre de la fuente consta de más de una palabra, son necesarias. Si el usuario no dispone de la Helvetica Neue, el navegador buscará una versión más genérica de la Helvética (segunda opción de la lista). Si tampoco la encuentra, utilizará Arial, que es un tipo de letra muy similar a la Helvética. Si por algún motivo tampoco estuviera presente la fuente Arial en el sistema, elegiría sans-serif, lo que permite al navegador emplear cualquier fuente sans-serif que encuentre. "Sans-serif" es una definición genérica para todos los tipos de letra que no llevan unos pequeños trazos (o "serifs") al final de cada letra. Ejemplos de fuentes "serif" son la Times New Roman y la Georgia.

Elección de font-family

En este ejercicio vamos a definir una lista de fuentes para toda la página y después declararemos una lista específica para los títulos.

1 En el editor de textos, vuelve al archivo 02_index_work.html si sigue abierto, o ábrelo si es preciso. Vamos

a modificar el estilo del texto en esta página, pero dado que nuestros estilos están ahora declarados en una hoja

de estilos externa, tendremos que realizar estas modificaciones en dicha hoja.

2 Volvamos a nuestro documento styles.css que hemos creado en el ejercicio anterior. Ahora mismo tenemos

estilos para la etiqueta h1 y para una clase llamada ".red". Vamos a crear un estilo para el cuerpo de la página.

3 En la parte superior del documento, por encima de la regla del estilo h1, escribe:: body { font-family:"Trebuchet MS", Tahoma, Arial, sans-serif; }

4 Guarda el archivo (Menú Archivo – Guardar) y visualiza la página 02_index_work.html en el navegador.

Como decíamos antes, el navegador muestra el tipo de letra Trebuchet si la tenemos instalada en el equipo; en

caso contrario, lo intenta primero con Tahoma, luego con Arial y finalmente, con cualquier tipo de letra sans-

serif.



Página 47 de 156

Cuando se define la fuente Trebuchet en la declaración font-family para la regla de la etiqueta <body>, todo

el texto de la página se muestra en ese tipo de letra.

Ahora, todo el texto de la página se escribe con letra Trebuchet porque es el estilo que hemos declarado para el

cuerpo. Recordemos que la etiqueta "body" de HTML engloba a todos los elementos visuales de la página.

Ahora vamos a declarar una familia de fuentes específica para el elemento de párrafo ("<p>").

5 Vuelve a la hoja de estilos en el editor y debajo justo de la regla para el "body", añade una nueva regla de

estilo para la etiqueta <p> con este contenido: p { font-family:Georgia, "Times New Roman", Times, serif; }

6 Guarda de nuevo el documento y visualiza el archivo 02_index_work.html en el navegador. Ahora tenemos

una regla explícita para los párrafos, por la cual el tipo de letra aplicable es la Georgia. Los rótulos de título

siguen saliendo con letra Trebuchet, que es la que hemos definido para todo el cuerpo. Ten en cuenta que

aunque podríamos haber elegido cualquier tipo de letra presente en el ordenador, Trebuchet y Georgia son

buenas opciones de partida porque se encuentran en la mayoría de los ordenadores del mundo.

El prometedor futuro de las fuentes

La escasez de opciones a la hora de utilizar distintas fuentes en la web ha causado frustración entre los

diseñadores Web durante muchos años. Este problema va aliviándose a medida que ciertas empresas han

ido creando soluciones para que las páginas puedan verse en un navegador con los tipos de letra



Página 48 de 156

El prometedor futuro de las fuentes

especificados por los creadores.

El panorama de las fuentes está cambiando, sin embargo, con la aparición de las llamadas "web fonts" y,

en concreto, con la funcionalidad @font-face de CSS. Ahora es posible añadir una gran variedad de tipos

de letra y tener la certeza de que nuestras páginas se podrán ver tal y como pretendemos.

Si quieres leer un análisis más detallado sobre este asunto e instrucciones paso a paso para integrar web

fonts en tus páginas, lee la sección Aplicar estilos con CSS3 en la Lección 11 del libro "HTML5 Digital

Classroom".

Cambiar el tamaño del texto con CSS

Cuando utilizamos CSS para formatear textos para la web, disponemos de algunas opciones para establecer su tamaño y su grosor. La propiedad CSS que controla el tamaño del texto se llama font-

size. Podemos modificar el valor de la propiedad font-size de varias formas:

• Tamaño absoluto: se trata de una serie de palabras clave que indican tamaños predefinidos de letra. Los tamaños nominados escalan de acuerdo con las preferencias del usuario con respecto a la letra. Los valores posibles xx-small, x-small, small, medium, large, x-large y xx-large.

• Longitud : Es un número seguido de un indicador del sistema de medida (cm, mm, in, pt, o pc) o bien un de unidades relativas (em, ex, o px).

• Porcentaje: Un entero seguido del signo de porcentaje (%). El valor es un tanto por ciento del tamaño de letra del objeto padre.

• Tamaño relativo: una serie de palabras clave que se interpretan como relativas al tamaño de letra del objeto padre. Los valores posibles son larger ysmaller.

La elección de la unidad de medida para el tamaño de la letra en una página web es importante y no es tan fácil como parece. La principal dificultad en este sentido tiene que ver con la resolución de la pantalla y las distintas maneras en que, a lo largo del tiempo, los navegadores han resuelto la presentación de los textos.

El texto en monitores pequeños a menudo tiene un aspecto distinto de como aparecen en monitores de gran formato; con un poco de previsión podemos resolver este problema, imaginando el efecto en cada caso. Además del problema de la resolución de pantalla, tenemos que considerar también la forma en que cada navegador resuelve la restitución de los textos. Por ejemplo, nos navegadores permiten al usuario cambiar a mano el tamaño de la letra. Más aún: cada vez hay más gente que navega por la Web desde teléfonos y dispositivos móviles, lo que hace que la elección del tamaño de letra sea un asunto aún más crítico.

Las medidas en pixels y puntos no son la mejor opción para el

tamaño

La declaración del tamaño de letra en puntos puede ser algo obvio si vienes del mundo de las artes gráficas, y si tienes experiencia con el diseño gráfico por ordenador, seguramente te manejarás muy bien usando los pixels como unidad de medida. La propiedad font-size en CSS nos permite utilizar ambas unidades. En el siguiente ejemplo, el selector CSS muestra una regla de párrafo con puntos y la segunda, una regla de párrafo basada en pixels:



Página 49 de 156

p { font-size:12pt; }

(regla CSS de tamaño de letra basada en puntos)

p { font-size:12px; }

(regla CSS de tamaño de letra basada en pixels)

Aunque la unidad "points" está soportada, su uso es una mala práctica y no se recomienda en el diseño de páginas Web. Los puntos son un sistema de medida pensado para la imprenta de papel que indican una unidad absoluta de medida que no tiene una equivalencia exacta en pantalla. Los pixels, por su parte, son la unidad de medida que se suele emplear en los gráficos por ordenador. Los tamaños y resoluciones de pantalla se expresan en pixels. En un mundo ideal, los diseñadores deberían poder utilizar sin riesgo los tamaños de letra expresados en pixels porque son unidades relativas pensadas para escalar de forma nativa. A lo largo de los años, los navegadores han resuelto el proceso de cambio de tamaño de los textos de diversas maneras. Por ejemplo, Internet Explorer 6 y 7 nomodifican el tamaño del texto basado en pixels si el usuario opta por alterar la configuración por defecto. Prácticamente todos los navegadores web ofrecen la posibilidad de alterar el tamaño del texto. Esta opción

suele aparecer en el menú de Opciones o de Configuración. En algunos navegadores modernos la opción de

cambio de tamaño del texto aparece en un submenú llamado Zoom. Muchos navegadores además ofrecen la

combinación de Ctrl + + (para ampliar) y Ctrl + – (para reducir) que aumentan o reducen respectivamente el

tamaño del texto. En el Mac OS, estas combinaciones son Command + + [aumento] y Command + -

[reducción].

Uso de una combinación de porcentaje y medida "em"

Una forma de resolver el problema del cambio de tamaño de los textos que causa el uso de pixels consiste en aplicar otras unidades de medida. Aquí vamos a establecer un cambio de tamaño fiable combinando el porcentaje y la unidad "em". Para tener una idea de cómo funciona, vamos a introducir unas reglas de estilo CSS directamente en un archivo HTML que hemos preparado previamente para ti.

1 En el menú Archivo del editor de texto, selecciona Abrir y ve a la carpeta HTML5_02lessons. Localiza el archivo 02_sizing.html y pulsa Aceptar. En el menú Archivo, selecciona "Guardar

como" y guárdalo con el nombre 02_sizing_work.html. Este archivo tiene cuatro bloques de texto: un título de nivel 1 (heading 1, <h1>), un heading 2

<h2>, y dos párrafos <p>. Este archivo utiliza una hoja de estilos interna por comodidad, y

hemos declarado el tipo de letra Trebuchet para todo el cuerpo. Vamos a empezar por modificar

algunas propiedades en el propio cuerpo para ver qué ocurre.

2 Antes de cambiar nada, tenemos que comprobar cómo se ve la página en su estado inicial.

Visualiza este archivo en el navegador. Todos los navegadores aplican un tamaño de letra por

defecto si no hay estilos que aplicar. En la mayoría de casos, el valor utilizado para el cuerpo es



Página 50 de 156

de 16 pixels (en este caso los párrafos heredan el valor de la etiqueta <body>). Cierra el

navegador y regresa al editor de textos.

3 En la regla de estilos para el cuerpo, escribe esta línea: body { font-family:"Trebuchet MS", Tahoma, Arial, sans-serif; font-size:10px; }

4 Guarda el archivo en disco y abre la página en el navegador. Verás que todo el texto es ahora

bastante más pequeño, y esto es debido a que el estilo del cuerpo define el tamaño general del

texto para toda la página, y los demás elementos como párrafos y títulos, se restituyen en función

de ese valor base.

Al establecer el tamaño de letra para el cuerpo, todo el texto de la página se representa más

pequeño.

5 Vuelve al editor de textos y cambia el siguiente valor en la propiedad font-size:

font-size:small;

6 De nuevo, guarda el archivo y abre la página en el navegador. Todo el texto es ahora algo más

grande que el valor de 10 pixels que le indicamos en el paso 3. Como explicaba anteriormente, el

valor "small" es una unidad de medida absoluta, llamada "palabra clave". Los navegadores web

tienen tamaños predefinidos asignados a las palabras clave y, aunque algunos prefieren las

palabras clave porque así se evitan tener que usar unidades (y los problemas que acarrean), en

general no nos aportan el nivel de detalle que seguramente necesitaremos en muchas ocasiones.

7 Vuelve al editor y cambia el valor de la propiedad font-size poniendo esto:

font-size:100%;

8 Guarda el archivo y visualiza la página en el navegador. Podrás ver que ahora el tamaño del

texto es el mismo que teníamos al principio del ejercicio (cuando aún no habíamos definido

ningún tamaño de letra). Este paso nos sirve para definir expresamente que el tamaño de letra

para el cuerpo es el mismo que tiene predefinido el navegador.



Página 51 de 156

Tendrás que hacer un pequeño acto de fe y creer que la técnica que estás aprendiendo resuelve

ciertos problemas concretos de cambio de tamaño del texto en los navegadores antiguos. Si

atendemos a este tipo de problemas ahora nos evitaremos muchos problemas en el futuro y nos

aseguraremos una mejor compatibilidad para nuestras páginas web.

9 En la regla de estilo para el párrafo, escribe esto:

p { font-size:1em; }

La unidad de medida llamada "em" es muy parecida a los pixels en el sentido de que está

pensada para variar la escala. La diferencia principal es que los "ems" no dependen de la

resolución del monitor, mientras que los pixels sí. Puede que al principio los ems no sean muy

intuitivos, pero si aprendemos a utilizarlos, nos aportarán grandes ventajas en el futuro.

10 Guarda el archivo y vuelve a mostrarlo en el navegador. Dependiendo de qué navegador

utilices, probablemente no vas a ver ningún cambio en la página y eso se debe a que el valor em

de 1 se vincula con un tamaño de letra del 100%, que es lo que hemos definido para el cuerpo.

Quizá nos ayude a entender esta relación si la expresamos en forma matemática:

1 em = 100% = 16 pixels.

Aquí tenemos que el tamaño de letra para el párrafo es de 1em, el tamaño de fuente para el

cuerpo es 100% y el tamaño de fuente por defecto para el navegador es de 16 pixels. Una vez

definida la relación, podemos empezar a variar el valor de "em" para agrandar o reducir el

tamaño de la letra.

11 Cierra el navegador y vuelve al editor de texto. En la regla para el párrafo, cambia este valor:

font-size:0.875em;

12 Guarda el archivo y ábrelo en el navegador. Ahora el texto del párrafo es más pequeño.

Hemos declarado el tamaño de fuente para el párrafo en unidades "em".



Página 52 de 156

La razón por la que utilizamos un valor tan exacto como 0.875 es porque así el tamaño de la

fuente equivale a 14 pixels.

Si estás empezando a pensar que el diseño de páginas web es una ciencia matemática, no te

preocupes demasiado. Todo será más fácil a partir de ahora. Si tienes curiosidad, verás que

multiplicando el valor de 16 pixels que es el tamaño por defecto del navegador, por el valor em

(0,875) el resultado es 14..

13 Ahora vamos a modificar el tamaño de los títulos, pero utilizando unidades em. En la regla

h1, vamos a añadir esta línea: h1 { font-size:1.5em; }

Esto hace que el tamaño de los títulos de nivel 1 sea vez y media el tamaño normal del texto del

cuerpo. Es equivalente a 24 pixels. Guarda el archivo y muéstralo otra vez en el navegador para

ver el efecto.

En este momento, el texto h1 es de aproximadamente el mismo tamaño que h2, lo que no tiene

mucha lógica, así que vamos a reducir también el tamaño de letra para la etiqueta h2.

14 En la regla h2 añade la siguiente línea: h2 { font-size:1.25em; }

Esto provoca un cambio de escala que hace que los textos de h2 sean 1,25 veces más grandes que

el texto normal del cuerpo, lo que (siguiendo nuestra fórmula matemática) nos da un valor real

de 20 pixels.

15 Guarda el archivo y muéstralo otra vez en el navegador. Ahora tendrás que ver el texto

manteniendo las proporciones adecuadas.

Establecemos el tamaño de letra del elemento h2 (título de nivel 2) a 1.25 ems.

Recuerda que una de las razones más importantes para utilizar em como unidad de medida es que

se adapta en el caso de que un usuario altere el tamaño del texto de su navegador. Podemos

simular este efecto si aumentamos el tamaño de la letra en el navegador. Por ejemplo, en Internet



Página 53 de 156

Explorer 9 podemos ir a la opción View de la barra de menú, seleccionar "Text Size" y elegir

entre unas cuantas opciones. Podrás ver que el texto reacciona bien a este cambio de escala.

Cuando termines asegúrate de que vuelves a dejar el tamaño del texto en el valor por defecto.

Muchos navegadores tienen un comando que permite hacer esto.

El problema que nos plantea el cambio de tamaño del texto en los navegadores es algo más

complicado, ya que algunos utilizan la función "zoom" que aumenta o reduce la escala de toda

la página. Los navegadores que disponen de zoom pueden tener, además, una opción aparte

para variar solo el tamaño de la letra.

Otra de las ventajas de utilizar ems tiene que ver con la relación de escala entre todos los

elementos que utilizan esta unidad de medida.

16 Vuelve al editor de texto y en la regla correspondiente al body, modifica el siguiente valor: font-size: 85%;

17 Guarda el archivo y vuelve a mostrarlo en el navegador. Ahora todo el texto es más pequeño,

¡y solo hemos cambiado un valor! Esto es por la relación que mantiene la unidad em con el

elemento body. Algunos diseñadores asignan de esta forma un tamaño de base si, por ejemplo, el

cliente quiere que el tamaño de letra sea más grande o más pequeño en todo el sitio web. En

lugar de modificar las propiedades una a una, con una sola regla controlamos múltiples tamaños

de letra de una manera más fácil.

18 Vuelve a dejar la propiedad font-size del cuerpo en su valor original de 100%: font-size: 100%;

19 Guarda el documento, con esto hemos concluido la lección.

En este ejercicio has podido explorar distintas maneras de dar formato a los textos. Cuando quieras cambia el

aspecto de los textos, casi siempre lo mejor será utilizar el texto real en vez de una imagen del texto (esto es,

un archivo gráfico con los rótulos dentro). Si utilizamos textos en vez de imágenes con texto creadas con

programas como Photoshop o Illustrator, nuestros sitios web serán accesibles para una audiencia más amplia

de usuarios, dispositivos y (muy importante), buscadores.

Auto estudio

1 Añade otro título debajo del último párrafo en el archivo 02_index_work.html con esto: <h2> Worldwide Apparel volunteer opportunities </h2>

2 Crea un estilo para la etiqueta en tu hoja externa de estilos que defina este rótulo con letra de color

naranja.

Repaso

Preguntas

1 ¿Qué es un doctype y qué relación tiene con la validación de las páginas web?



Página 54 de 156

2 En el siguiente código XHTML, ¿cuál es el atributo y qué valor tiene? ¿Qué otros atributos podríamos

encontrar con frecuencia en un elemento imgcomo este?

<img src="images/familysitting.jpg"/>

3 Indica la finalidad de las hojas de estilo externas y alguna de las ventajas que ofrece su utilización.

Respuestas

1 Un doctype es una declaración que se hace al principio de los documentos HTML. Los

navegadores web la utilizan para saber qué lenguaje de markup y qué versión se utilizan en

la página. La validación de páginas comprueba la conformidad de la sintaxis del código

respecto de las especificaciones deldoctype declarado. La validación de las páginas es una

buena opción para detectar problemas como etiquetas que faltan o errores de tipografía en el

código.

2 En esta línea de código, el atributo es src y su valor es "images/familysitting.jpg". El

atributo src y su valor están anidados dentro de la etiqueta <img>. Este atributo contiene un

vínculo a un archivo de imagen que se mostrará en pantalla. Otros ejemplos de atributos

para imágenes son alt, que aporta un texto alternativo a la imagen para uso en dispositivos

como sintetizadores de voz o lectores de pantalla, y los atributos width y height, que indican

el tamaño que debe tener la imagen dentro de la página.

3 Una hoja de estilos CSS externa es un documento de texto con extensión .css. Este

documento contiene reglas CSS que definen el aspecto de los elementos HTML. Puesto que

las hojas de estilos externas se pueden asociar a múltiples páginas web, nos permiten

disponer de un lugar centralizado para la definición de estilos de todo un sitio web. Una de

las ventajas es que podemos modificar el aspecto de todo el sitio web con un solo cambio en

una regla CSS. Otras ventajas pueden ser la posibilidad de utilizar múltiples hojas de estilos

para facilitar su mantenimiento posterior e indicar hojas de estilo específicas para imprimir

el documento o para optimizar su presentación en dispositivos móviles.



Página 55 de 156

Lección 3: Introducción a la presentación en pantalla con CSS Objetivos:

En esta lección aprenderemos los conceptos fundamentales de diseño Web basados en CSS y la preparación de una estructura visual de página web con dos columnas y anchura fija. Además veremos el empleo de un archivo de “reset” de CSS y cómo se añade a las páginas. Se aborda también el uso del elemento <div> y las propiedades “float” y “clear” para crear columnas en la página.

Para empezar

Vamos a trabajar con algunos archivos de la carpeta HTML5_03lessons. Comprueba que has

descargado y que tienes en tu disco duro la carpetaHTML5lessons. Para las prácticas hemos utilizado como editor de textos Microsoft Visual Web Developer Express, pero

existen numerosas alternativas para la creación y edición de páginas Web que puedes utilizar también.

El papel del archivo de reset CSS

Antes de empezar a crear un diseño visual de página Web vamos a ver cómo se utiliza un archivo de reset de CSS. Todos los elementos HTML se muestran en pantalla utilizando los estilos por defecto que aplica cada navegador. Ya hemos visto en el capítulo precedente cómo CSS nos permite definir estilos para tipos de letra, modificando el tamaño y la fuente, pero hay otros estilos no tan obvios. Por ejemplo: el estilo por defecto para un elemento heading 1 (<h1>) incluye unos márgenes de 10 pixels por encima y por debajo del texto. Si queremos modificar el estilo de h1 para que no lleve márgenes, tendremos que indicar de manera explícita unas reglas que conviertan dichos valores a cero. Una regla CSS para anular los márgenes superior e inferior de los elementos heading 1 es así:

h1{ margin-top:0px; margin-bottom:0px; }

Todos los elementos HTML incluyen márgenes por defecto. Aunque los navegadores web actuales tienen una calidad muy superior a los antiguos, conviene saber que cada motores de restitución empleado por los navegadores aplica sus propias reglas para mostrar los elementos en pantalla. En teoría esto quiere decir que el margen por defecto de 10 pixeles en un navegador X puede transformarse en 15 pixels en el navegador Y. Estas diferencias generan resultados no homogéneos a la hora de ver las páginas en distintos sistemas (no obstante, las diferencias tampoco son tan drásticas como hemos sugerido en este ejemplo, pero existen y hay que contar con ellas).

Una técnica para homogeneizar las presentaciones en pantalla consiste en utilizar un archivo CSS de reset que elimine los estilos por defecto aplicados a los elementos HTML utilizados con más frecuencia. Con este reseteo de valores podemos conseguir una base fiable y coherente sobre la cual construir nuestros nuevos estilos. Para hacernos idea de cómo funcionan los estilos, vamos a abrir una página que ya tiene varios estilos y le asociaremos una hoja de estilos CSS de reset.



Página 56 de 156

1 En el editor de textos, en Archivo selecciona Abrir. Abre en la carpeta HTML5_03lessons el

archivo 03_reset.html.

Este archivo contiene una serie de elementos HTML genéricos, como títulos, párrafos, listas y formularios. No

incluye estilos CSS.

2 Muestra en el navegador la página y mira el espacio de separación que hay entre los títulos, y fíjate también

en el aspecto de las listas de datos y el formulario. Lo que haremos ahora es asociar una hoja de estilo CSS de

reset para ver cómo afecta a la presentación en pantalla de estos elementos. Cierra el navegador y vuelve al

editor.

3 Añade la siguiente línea de código (destacada en color rojo) debajo de la etiqueta de título para asociar la

hoja de estilos reset.css que se encuentra también en la carpeta HTML5_03lessons:

<head> <meta charset="utf-8" /> <title> CSS Reset</title> <link href="reset.css" rel="stylesheet" type="text/css"> </head>

Guarda el archivo y visualízalo en el navegador



Página 57 de 156

Una página con elementos HTML habituales con reset de estilos CSS.

Muchos de los elementos en esta página tenían los márgenes y distancias al borde prefijadas a cero. En

consecuencia, el espacio entre ellos se ha eliminado. Se han reseteado también otros muchos estilos, como por

ejemplo las listas de datos, que se han dejado en valor “none”, lo que elimina los puntos (las “viñetas”

o “bullets” como también se los denomina en los textos) de las líneas en las listas no ordenadas, así como los

números de orden en las listas ordenadas. Cierra el navegador y vuelve al editor de textos.

4 Selecciona Archivo-Abrir. En la ventana, selecciona el archivo reset.css y pulsa Abrir. Revisa un momento

el contenido.

Esta serie de reglas elimina los valores por defecto de márgenes, márgenes interiores (“padding”), y los bordes

de casi todos los elementos HTML.

5 Ahora vamos a modificar la hoja de estilos, pero tenemos que asociarla a las páginas web. Recuerda que las

hojas de estilos de reset son opcionales. Nos ayudan a normalizar la presentación en los distintos navegadores,

y algunos diseñadores también incluyen en ellas sus propios estilos de uso frecuente para resetear los valores

iniciales de los elementos.



Página 58 de 156

de la hoja de estilos de reset

Eric Meyer fue el primer desarrollador que preparó hojas de estilo de reset, que después distribuyó para uso público. Puedes utilizar sus reglas de estilo en este

ejercicio. Si quieres buscar más información sobre las técnicas de reset, visita la web http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/.

Muchos diseñadores se preparan sus propias hojas de estilos de reset para resolver sus propias necesidades. Por ejemplo, si la familia de fuentes que utilizas

con más frecuencia es Verdana, puedes añadir esta regla al estilo del elemento body. Si te gusta poner más espacio de separación entre párrafos, puedes fijar el

valor estándar de tamaño de línea que te parezca más adecuado. Lo que importa es disponer de una serie de reglas coherentes que se puedan utilizar para

empezar cualquier proyecto de inmediato.

EL uso de hojas de reset CSS puede tener algunas desventajas, sobre todo para los neófitos: tendrán que recordar constantemente que están utilizando dicha

hoja de estilos y deben tener en cuenta cómo afectará a los distintos elementos del sitio web. Si estamos aplicando la hoja de reset a todo el sitio, algunos de

s efectos pueden resultar sorprendentes, sobre todo con elementos con los que no estamos especialmente familiarizados. Por ejemplo, un archivo CSS de

reset elimina los márgenes externos e internos de la mayoría de los elementos de los formularios, y cuando utilizan por primera vez con campos de formulario,

muchos se preguntan por qué los botones, campos de texto y otros elementos aparecen de esa forma.

Breve historia de las técnicas de presentación en pantalla para

la Web

Aunque aquí vas a aprender a crear un diseño visual de página utilizando estilos CSS, debes saber que esto no ha sido siempre la técnica normal. Cuando se empezó con el diseño web a mediados de los 90, el único método que se podía emplear para crear estructuras visuales complejas, como por ejemplo la presentación en varias columnas, consistía en emplear el elemento tabla (<table>). La tabla HTML estaba pensada inicialmente para mostrar datos de manera estructurada, en filas, columnas y celdas. Sin embargo los diseñadores empezaron a utilizar este elemento como base para las estructuras visuales de las páginas. En aquel momento esa técnica estaba plenamente justificada: las tablas era lo único que tenían para generar el tipo de diseños que se necesitaban y, además, eran un recurso extremadamente flexible.

A partir de aquí, empezaron a utilizarse técnicas como el anidamiento de tablas, es decir, crear tablas dentro de celdas de otras tablas de mayor tamaño. Por ejemplo, el código para una página normal de dos columnas podía empezar creando una tabla de tres filas y dos columnas:

Una tabla web de tres filas y dos columnas. Puesto que la primera fila se iba a convertir en la sección de cabedera, no interesaría que quedase dividida en dos columnas. La etiqueta HTML <colspan> permite fusionar las dos celdas:



Página 59 de 156

Una tabla cuya primera fila consta de dos celdas fusionadas en una sola. En esta primera fila el diseñador, por ejemplo podía intentar insertar una sección independiente de tres columnas, para mostrar un logo y otros elementos, como una barra de navegación o un campo para pedir credenciales de usuario. Para añadir esta sección, el diseñador tenía que crear una nueva tabla (esta vez con una fila de tres columnas) dentro de la primera fila de la tabla inicial:

Una nueva tabla, con una fila y tres columnas, anidada dentro de la primera fila de la tabla original. Para generar esta estructura de tabla, el diseñador tenía que configurar la tabla inicial con una anchura y altura fijas. Supongamos que el diseñador también quisiera un borde negro fino para todos los elementos. La propiedad “border” de las tablas HTML es muy básica no nos permite añadir colores. Una solución frecuente consistía en insertar la tabla actual dentro de otra, que consistía simplemente en una única celda con el fondo en color negro. Al modificar el margen interior y el color de fondo, y fusionar otras celdas más, el diseñador podía así crear una estructura visual basada en tablas con un cierto estilo.

Típica “plantilla” para una estructura basada en tablas tal y como se muestra en un navegador. Si quieres practicar un poco con tablas en tu editor, puedes encontrar un ejemplo en la carpeta

HTML5_03lessons el archivo 03_table.html. CSS ha sustituido ya el empleo de tablas para organizar las páginas, por lo que los elementos de tabla de HTML van regresando, poco a poco, a su función original, que es la de mostrar datos



Página 60 de 156

estructurados, y abandonan su papel como armazón visual de las páginas. Seguramente podrás seguir encontrando numerosos ejemplos de este tipo de estructuras en la web, pero en este libro no vas a aprender a crearlas, sino que vas a aprender los conceptos básicos de CSS que nos permiten obtener los mismos resultados.

Introducción a las distintas opciones de presentación de

páginas

Antes de la estructura visual de nuestras páginas web tenemos que decidir unas cuantas cosas. Lo primero es qué anchura va a tener. Hay dos categorías principales de estructuras en base a su anchura: las de anchura fija y las de ancho variable. En las estructuras de ancho fijo todos los elementos de la página se anidan dentro de un contenedor que tiene un ancho explícito (en este ejemplo utilizamos el valor de 960 pixels, pero se suele utilizar también la unidad de medida em). La anchura fija es una solución muy cómoda para el diseñador ya que permite ubicar con precisión los distintos elementos (cabeceras, barras laterales y pies de página). Además aporta un esqueleto robusto para otros elementos, como la anchura de párrafo o el posicionamiento de imágenes cuando éstas aparecen en gran número (por ejemplo en sitios web de catálogos de producto).

Las estructuras de ancho fijo indican explícitamente la anchura y ocupan un espacio definido dentro de la

página web. Las estructuras flexibles se llaman así porque están pensadas para adaptarse a la anchura de la ventana del navegador en cualquier momento. Este tipo de disposiciones es útil cuando los usuarios acceden desde pantallas con resoluciones muy variadas, lo que hace imposible elegir un ancho fijo que ofrezca el mismo aspecto en todas ellas. Una estructura flexible bien diseñada es capaz de ajustarse automáticamente al tamaño de ventana del navegador.



Página 61 de 156

Las estructuras visuales flexibles se reajustan al cambiar el tamaño de la ventana del navegador. Estas estructuras son adecuadas para la web porque permiten el reposicionamiento en pantalla de textos e imágenes. Puesto que los dispositivos móviles suponen actualmente una proporción importante de los navegadores en uso en el mercado, las estructuras flexibles por lo general se prefieren para ofrecer una mejor experiencia en este nuevo tipo de interfaces frente a las estructuras de ancho fijo, que habitualmente tienen problemas por falta de espacio (sobre todo en teléfonos móviles).

Las estructuras de ancho variable son más difíciles de diseñar y obligan al creador a resolver una serie de asuntos adicionales. Por ello, en esta lección vamos a empezar por crear una estructura de anchura fija.

El elemento <div>: creación de una estructura CSS de dos

columnas con anchura fija

En esta práctica vamos a crear una estructura visual de anchura fija con dos columnas. Para empezar vamos a trabajar con una página sencilla que ya hemos preparado para ti. Esta página emplea una serie de elementos <div> para generar su estructura de base. Podemos considerar al elemento <div> como un contenedor genérico en el que podemos poner elementos relacionados entre sí de forma lógica. La apertura y cierre de etiquetas <div> suele hacerse rodeando a otros elementos de la página, de forma que dichos elementos quedan anidados dentro del contenedor. Puedes tener en la misma página todos los elementos <div> que consideres necesarios y con frecuencia se utilizan para crear el armazón visual. Un elemento <div> suele llevar un atributo ID (con lo que adquiere un “nombre” explícito dentro de la página) o bien pertenecer a una clase CSS, utilizándose ambos como medio para aplicar al contenedor uno o más estilos CSS. El empleo de elementos <div> facilita a otras personas la identificación de las diversas secciones en que se subdivide la página y también nos ayuda a controlar y aplicar estilos en cada una de ellas.

En esta práctica vamos a utilizar el elemento div con identificadores ID de CSS.

1 En el editor de textos, desde el menú Archivo- Abrir, ve a la carpeta HTML5_03lessons y selecciona el

archivo 03_layoutstart.html y pulsa Abrir



Página 62 de 156

2 Guarda el archivo en el disco con el nombre 03_layoutwork.html. Así conservarás el archivo original como

copia de seguridad. Esta página contiene una serie de elementos HTML <div> con algún contenido que

queremos mostrar en pantalla en ciertas posiciones. Analiza el código de la página para tratar de entender

cómo se ha creado. Hemos incorporado algunos comentarios que te orientarán.

La estructura de la página te la entregamos prediseñada. A lo largo de esta práctica vamos a ver en detalle

cómo funciona. El primer paso consiste en saber cuál es la función de la etiqueta <div> y el papel tan

importante que representa en la organización visual de las páginas con CSS.

3 En el editor, encuentra la línea <div id="wrap">. Es el comienzo de una sección de la página en donde se

anidan el resto de elementos. Por sí sola, una etiqueta <div> no hace nada, que es algo que diferencia a esta

etiqueta de las otras, ya que los demás elementos HTML, como los párrafos (<p>) o las listas (<ul>, <li>,

<dl>), ejercen diversos efectos sobre sus contenidos.

La etiqueta <div> así como los párrafos y listas, entre otros, son elementos de bloque. Los elementos de

bloque generalmente se insertan en las páginas en la línea siguiente al elemento previo. La etiqueta div suele

asociarse bien con una clase CSS o con un ID, y con ello ya podemos aplicarles reglas individualizadas para

controlar su aspecto. Antes de hacer esto vamos a echar un vistazo a la página tal y como se ve en el original.

4 Abre la página en el navegador. El archivo

reset.css con el que hemos estado trabajando antes es el que hace que todos los elementos de la página

aparezcan pegados unos a otros.

Esta página incluye una serie de secciones div y los estilos aplicables a los elementos HTML se han reseteado.

Para ver cómo responden las etiquetas div vamos a aplicar estilo al elemento con el ID “wrap” de forma que

tenga ancho fijo. Cierra el navegador y vuelve al editor de texto.

5 Encuentra la etiqueta <style> que hemos añadido al documento. Inserta una regla de estilo para el ID

llamado “wrap”. El siguiente código (destacado en rojo) es lo que tienes que escribir: <style type="text/css"> #wrap { background-color:#E0B3B9; } </style>

Guarda el archivo y vuelve a abrir la página en el navegador. El div wrap incluye dentro a todos los demás

elementos de la página, como se puede ver ahora que le hemos puesto un fondo de color morado. En este

momento el div se extiende para cubrir toda la anchura de la pantalla. Es una presentación muy básica, que



Página 63 de 156

sigue el modelo de ancho variable. Si cambias el tamaño de la ventana, verás que el texto se reorganiza. Ahora

vamos a declarar una anchura fija para el div wrap.

6 En el editor de texto añade estas dos líneas de código (destacadas en rojo) a tu estilo #wrap: #wrap { background-color:#E0B3B9; width:960px; border:thin solid black; }

Guarda la página y vuelve a visualizarla en el navegador. Ahora el div wrap ocupa 960 pixels de la página.

El div wrap ahora tiene una anchura de 960 pixels y un borde fino de color negro alrededor.

También hemos cambiado el borde, para mostrar mejor los límites del div wrap. Resize your browser window

again. The text no longer reflows, and if your browser window is narrower than 960 pixels, your content is

cropped. When the browser window is wider than 960 pixels, the box defined by the wrap div is aligned to the

left. There is a simple way to position this div so it will always be centered in the browser window.

7 Vuelve al editor y añade esta línea de código marcada en rojo: #wrap { background-color:#E0B3B9; width:960px; border:thin solid black; margin:0 auto; }

Es una regla abreviada para el margen. El valor ‘0’ define los márgenes superior e inferior del div wrap, y el

valor auto indica los márgenes derecho e izquierdo. El valor “auto” calcula automáticamente un margen igual a

ambos lados del div wrap y de esta manera el cuadro queda centrado en pantalla (y permanece centrado aunque

cambiemos el tamaño de la ventana).

Guarda el archivo y visualízalo de nuevo en el navegador, para ver cómo funciona la regla abreviada. Cierra el

navegador y vuelve al editor. Ahora vamos a trabajar con otros elementos div pero antes tenemos que aplicar

un estilo básico a la cabecera.

8 En el editor de textos, inserta una imagen dentro del div llamado masthead — en este caso es el sitio donde

pondremos el logo. Para empezar vamos a hacer que sea la imagen quien defina la altura del header añadiendo

este código para insertar el archivo de imagen del logo que tenemos en la carpeta HTML5_03lessons. <div id="masthead"> <img src="images/wa_logo.jpg" width="200" height="123" alt=" Worldwide Apparel logo" /> </div>

La etiqueta div no lleva estilo, aunque la altura del div header viene definida por la altura de la imagen inserta

dentro. El color del área donde se ha insertado es el mismo morado que corresponde al color de fondo



Página 64 de 156

declarado antes para el div que sirve de encuadre (“wrap”). Si definimos otro color de fondo para nuestro div

“masthead” lo veremos en pantalla.

9 Debajo de las reglas de #wrap, añade el siguiente código que se aplicará a masthead: #masthead { background-color:#FFF; }

Guarda el archivo y muéstralo en el navegador. Ahora todo el div masthead aparece con el fondo de color

blanco, ya que se superpone al color del div wrap.

La sección masthead ahora tiene un logo y un color de fondo.

10 La sección de navegación va a exigir un trabajo más avanzado, iremos con ello más adelante en esta misma

sección. De momento vamos a declarar unas cuantas reglas de estilo básicas para definir esta sección en la

página. Pon el siguiente selector y sus reglas debajo de la regla #masthead: #mainnav { background-color:#666; height:40px }

11 Guarda la página y visualízala en el navegador.

La sección mainnav tiene ahora color de fondo y una altura definida.

Estamos aplicando estilos a la página empezando por arriba y bajando hacia el final, y ya hemos llegado a la

sección interna que contiene la barra lateral y el contenido. Vamos a ver cómo se crean columnas para su

colocación mediante divs. La actual especificación CSS no tiene un elemento “columna”. Las “columnas”



Página 65 de 156

como tales son divs con estilo que normalmente son más altas que anchas. Para ver cómo se consiguen

representar en pantalla, tenemos que entender antes el concepto de la propiedad float de CSS.

La propiedad float CSS

La propiedad float en CSS hace posible que un texto pueda escribirse alrededor de una imagen. Este estilo ha sido tomado del diseño de imprenta, donde a este efecto se le llama “justificación” del texto. CSS consigue el mismo efecto haciendo que los elementos que siguen a un elemento “flotante” puedan rodearlo, cambiando su posición relativa con respecto a él. Este comportamiento también nos sirve para crear columnas en una página.

En la imagen de la izquierda hay un gráfico anidado dentro de un párrafo. El gráfico ocupa un espacio vertical completo y el texto posterior se empieza a escribir a partir de su esquina inferior derecha, ya que no se ha aplicado aquí la propiedad float. En la imagen de la derecha, los elementos son los mismos, pero hemos aplicado la regla float: right al gráfico. El gráfico se desplaza a la derecha todo lo que puede y el texto se escribe a su izquierda a partir del primer punto disponible de su contenedor (en este caso, la esquina superior izquierda del div contenedor).



Página 66 de 156

Una imagen con su emplazamiento por defecto con HTML (izquierda) y la misma imagen “flotando” hacia la

derecha. El valor float se puede también declarar como “left”. En el ejemplo anterior, la imagen pasaría al lado izquierdo del div contenedor, y el texto se empezaría llenando el lado derecho restante.

Los únicos valores posibles para float son “left”, “right” y “none”. No se puede centrar un objeto utilizando

esta propiedad. Si queremos tener múltiples elementos flotantes dentro del mismo contenedor, el resultado es que se alinean entre sí. Este comportamiento se suele utilizar en ciertas funciones habituales de las páginas web, como por ejemplo los menús horizontales o las galerías de imágenes.

Es fundamental conocer cómo interactúan múltiples elementos flotantes unos con otros a fin de utilizarlos correctamente. Veamos este ejemplo: son seis imágenes dentro de un div de 360 pixels de ancho. Cada imagen tiene una anchura de 50 pixels y hay 10 pixels de margen (5 a la derecha y otros 5 a la izquierda). Al sumar los valores podemos ver que 6 × 50 son 300 pixels par alas imágenes, y 6 × 10 suman 60 pixels de margen. Por tanto, las imágenes junto con sus márgenes nos caben dentro del div, que tiene una anchura total de 360 pixels.

Si hemos declarado una anchura explícita para el contenedor, al añadir una nueva imagen hacemos que se posicione en la fila siguiente:

Esto nos puede servir, por ejemplo, para crear una galería de imágenes en miniatura, ¡pero no nos vale para un menú!

En la práctica siguiente vamos como usar la propiedad float para crear una estructura de dos columnas.

Creación de columnas con la propiedad float

Vamos a aplicar la propiedad float a los divs de contenidos sidebar y main para ver cómo les afecta.

1 Añade el siguiente selector y las reglas de estilo debajo de la regla #mainnav: #sidebar { float:right; width:300px; background-color:#CCC; }



Página 67 de 156

Guarda la página y muéstrala en el navegador. La página aparece “rota”. Ahora vas a ver qué es lo

que causa que la página salga “rota” como en este caso, ya que este efecto enseña cómo funciona la

propiedad float.

Aunque la página parece rota, los divs están realmente funcionando tal y como debe ser: cuando

convertimos en flotante un elemento (en este caso el div sidebar), queda eliminado del flujo normal

del HTML. Es por eso que la barra lateral se extiende por todo el contenedor.

La barra lateral queda flotando, pero se superpone sobre los límites de otros elementos de la página.

Ahora vamos a declarar como flotante al otro div, hacia el lado izquierdo, y vamos a ver cómo

afecta eso a nuestra página. Vuelve al editor.

2 Añade este selector y las reglas de estilo debajo de la regla #sidebar: #main { width:600px; float:left; background-color:#ADA446; }

3 Guarda el archivo y vuelve a mostrar la página en el navegador.

El div “main” flota hacia la izquierda, pero el “footer” sube a la parte superior siguiendo el curso o

“flujo” de restitución de la página.

Al hacer flotar este div hacia la izquierda hemos resuelto el problema de que parte de su contenido

apareciera debajo de sidebar; a pesar de que por la cantidad de contenido que tiene el div main parte

de él se sale del propio contenedor. También vemos que tenemos otro problema con el elemento

footer: debería aparecer en la parte inferior de la página pero no es así.

Para obligar al div footer a ponerse en la parte inferior de la página le vamos a asignar una nueva

propiedad llamada clear.

La propiedad clear

Cuando añadimos la propiedad CSS clear a un objeto, le estamos indicando una regla que dice “no admito elementos flotantes a mi lado”. Podemos especificar si queremos que no haya elementos flotantes a la izquierda, a la derecha o en ambos lados. En el caso del pie de página, queremos eliminarlos de ambos lados.

1 Añade este nuevo selector y sus reglas debajo de las reglas de #main: #footer { clear:left; background-color:#BA2B22; }

2Guarda el archivo y visualízalo en el navegador. Ahora el pie de página queda en la parte inferior

del div main. Lo que hace la regla clear:left es impedir la presencia de elementos flotantes a su

izquierda. El div main es flotante, por lo que el pie se mueve a la siguiente posición disponible.

Cierra el navegador y vuelve al editor.



Página 68 de 156

El problema es que el div “sidebar” siguen superpuesto al pie y aunque podemos cambiar la regla a

clear:right y con ello lo evitaríamos, una forma más segura de resolver esta situación es asegurarnos

de que no se van a colocar objetos flotantes ni a su derecha ni a su izquierda.

3 Cambia el valor de la propiedad clear así: clear:both;

De esta forma nos aseguramos de que no habrá elementos flotantes en ambos lados del pie de

página.

4 Guarda el archivo y vuelve a mostrarlo en el navegador. Verás que no cambia con respecto al

paso 3 pero el pie de página ahora está mejor preparado para cambios futuros en el contenido.

Creación de un menú de navegación basado en listas con

“float”

Ahora que has aprendido los conceptos básicos de “float” y “clear”, volvamos a la sección de la barra de navegación y vamos a añadir un menú sencillo basado en una lista no ordenada (es decir, que sus líneas no llevan numeración, sino viñetas o signos). Los elementos de la lista dentro de este menú tendrán que ser flotantes para modificar la presentación vertical por defecto de las listas. Los menús de navegación CSS se utilizan mucho en el diseño basado en estándares porque se pueden actualizar y modificar de manera mu sencilla, y porque se basan en textos ( y no en imágenes), lo que mejora la accesibilidad en dispositivos como los lectores de pantalla, e incluso ayudan a mejorar el posicionamiento de nuestras páginas en los buscadores.

1 Desde el editor de textos, busca el div mainnav y añádele la siguiente lista no ordenada y estas líneas: <div id="mainnav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="ourcompany.html">Our Company</a></li> <li><a href="policies.html">Policies and Procedures</a></li> <li><a href="doc_repository.html">Document Repository</a></li> <li><a href="news.html">News & Events</a></li> </ul> </div>

Los elementos de la lista son enlaces a páginas que todavía no existen. Pero necesitamos crear estos enlaces

para que se apliquen correctamente los estilos que vamos a declarar ahora.

2 Guarda el archivo y visualízalo en el navegador.



Página 69 de 156

La lista aparece en la posición vertical por defecto y se superpone a la barra lateral.

Fíjate que la página aparece otra vez como “rota”. Esto se debe a que la lista se está superponiendo a la barra

lateral flotante. Además la lista no tiene los puntos (viñetas) indicadores. Recuerda que nuestra página está

asociada a una hoja de estilo CSS de reset y una de sus reglas declara la propiedad list-style:none, que elimina

los puntos indicadores en las listas. En el caso de este ejemplo, la falta de puntos es deseable, ya que vamos a

utilizar la lista como menú de navegación.

3 Vuelve al editor y localiza la regla #mainnav. Añade una nueva regla entre ésta y la regla de la barra lateral

pulsando Intro unas cuantas veces e insertando el código siguiente: #mainnav li { float:left; }

Fíjate que en este paso estamos creando una nueva regla justo después de #mainnav. Aunque podríamos

haber insertado la regla al final de la hoja de estilos, las buenas prácticas recomiendan que se pongan juntas

las reglas que tienen relación entre sí para que el código esté más organizado y sea más fácil de mantener.

Es un nuevo tipo de regla CSS llamada selector de contexto; se aplica exclusivamente a los elementos de lista

que hay dentro del div mainnav. Si definiésemos una nueva regla para aplicarla a los elementos de lista (en

general), afectaría a todos los elementos de lista de nuestra página, lo que no nos valdría para nuestro ejemplo,

ya que queremos organizar visualmente solo esta lista.

4 Guarda la página y visualízala en el navegador. Todos los elementos aparecen ahora colocados en

horizontal. Los enlaces casi no se ven porque hay muy poco contraste entre el enlace que se escribe en color

azul oscuro y el gris oscuro del fondo de la sección “mainnav”, pero lo vamos a resolver añadiendo unas

cuantas reglas de estilo más.



Página 70 de 156

Al declarar los elementos de la lista como flotantes, se colocan en sentido horizontal.

5 Vuelve al editor y añade este código a la regla #mainnav li: #mainnav li { float:left; width:170px; height:40px; background-color:#CCC; text-align:center; border-left:1px black solid; border-right:1px black solid; }

En este código hemos hecho estos cambios: hemos definido el recuadro alrededor de cada elemento de la lista

con una anchura de 170 pixels y una altura de 40 pixels. Hemos añadido un color de fondo, hemos alineado

cada elemento al centro del recuadro y además, se dibujarán en pantalla los bordes verticales de cada recuadro

con un trazo negro de 1 pixel. Guarda el archivo y visualízalo en el navegador.

Al declarar la altura y la anchura del recuadro, el texto se pone de forma natural en la parte superior.

Lamentablemente, aunque existe la propiedad text-align:center que nos permite centrar el texto en la vertical,

no tenemos una forma fácil de centrar los objetos en la vertical con CSS. En este caso vamos a utilizar la

propiedad line-height para mover hacia abajo el texto del interior.

6 Debajo de la declaración de border-right, añade esta línea de código: line-height:40px;

7 Guarda el archivo y muéstralo en el navegador, El texto aparece ahora centrado dentro del recuadro.

Conviene notar que podemos tener problemas si en un futuro cambiásemos el texto de los elementos de la

navegación, ya que tanto el valor de “line-height” como el tamaño del propio contenedor se basan en el tamaño

de la fuente. Si cambiásemos el tamaño de la fuente o la altura de la sección “nav”, habría que volver a

ajustarlo todo para compensar los desplazamientos.



Página 71 de 156

Añadiendo el valor line-height a los elementos de la lista se posicionan verticalmente dentro de la barra de

navegación.

Añadir estilos para el texto

Antes de seguir con nuestra estructura visual vamos a importar algunos estilos de texto basados en los que hemos creado en la Lección 2. Hasta aquí hemos añadido los estilos dentro de una hoja de estilos interna en vez de hacerlo sobre una externa. Cuando estamos diseñando la estructura de las páginas, el empleo de hojas de estilo internas es una cuestión de comodidad: resulta más sencillo para crear y modificar reglas si las tenemos dentro de la página y podemos llegar a ellas desplazando la ventana que si las tenemos en un archivo externo. De momento vamos a asociar una hoja de estilos externa que añade reglas de base para elementos como títulos, listas y párrafos.

1 En la parte inicial del archivo HTML busca la etiqueta <link> de la hoja de estilos reset.css. Para

añadir otra hoja de estilos externa, selecciona esta línea y pulsa Ctrl + C para copiarla. En la línea

siguiente pulsa Ctrl + V para pegarla. Ahora cambia el nombre de archivo “reset.css” por el

siguiente “base.css”: <link href="reset.css" rel="stylesheet" type="text/css" /> <link href="base.css" rel="stylesheet" type="text/css" />

2 Guarda el archivo y visualízalo en el navegador para ver cómo afectan estos nuevos valores a

nuestra página. Ahora los titulares y el texto del cuerpo se escriben utilizando el tipo de letra MS

Trebuchet y también se han aplicado algunos otros estilos.

La página utiliza ahora una hoja de estilos externa para los elementos de texto.

3 Regresa al editor y selecciona el menú Archivo – Abrir. En la ventana que aparece, ve a la

carpeta HTML5_03lessons, selecciona el archivo base.css y pulsa Abrir. Revisa los estilos que



Página 72 de 156

incluye este archivo CSS. Los conceptos básicos para los tipos de letra y tamaños ya los vimos en la

Lección2. Mantén abierto el archivo, porque lo vamos a modificar dentro de un momento.

Existen algunas propiedades CSS adicionales aplicables a las fuentes, como “font-weight”, “text-

transform” o “letter-spacing”. Si quieres más información e instrucciones paso a paso para

utilizar técnicas avanzadas de estilos para texto, puedes leer la Lección 3 “Formateo de Textos con

CSS” en el libro “HTML5 Digital Classroom”.

Efecto de los márgenes internos y externos en una estructura

de anchura fija

En esta sección vamos a separar las secciones de texto de nuestra página (que en este momento tienen márgenes de cero pixels, por efecto de la hoja de estilos de reset). Vamos a ver ahora algunas estrategias para controlar la estructura visual de la página. El objetivo de esta práctica no consiste en mostrar un método único de organización con CSS, sino en conocer las diferentes opciones posibles, lo que te ayudará en futuros proyectos a la hora de decidir qué método es el más adecuado en cada caso.

En este primer ejercicio vamos a añadir un margen interior (“padding”) al elemento sidebar.

1 En el editor de texto, abre el archivo 03_layoutwork.html y visualiza la pantalla en el navegador. Verás que

el texto de la barra lateral está pegado al borde, quedaría mejor si estuviera un poco separado.

El texto aparece pegado al borde izquierdo de la barra lateral.

El ancho de esta barra lateral está declarado como 300 pixels. Básicamente podemos separar el texto del borde

izquierdo de dos manera: la primera consiste en utilizar el valor de margen interior o “padding” del contenedor

y la segunda, utilizar el margen externo de los objetos contenidos. Vamos a ver ahora los pros y contras de

ambas técnicas, empezando por el padding.

2 Vuelve al editor, localiza la regla para el “sidebar” en el código CSS y añade esta línea:



Página 73 de 156

#sidebar { float:right; width:300px; background-color:#CCC; padding:0px 20px 0px 20px; }

Es una regla abreviada y los valores se leen imaginando el curso de las manillas del reloj. El primer valor (0px)

es la separación o margen interior con respecto al borde superior. El segundo valor (20px) corresponde a la

separación con respecto al margen derecho. El tercero (0px) es la separación con respecto al borde inferior y el

ultimo (20px) es el margen interior de separación aplicable al borde izquierdo. Guarda la página y visualízala

en el navegador.

Añadiendo un margen interior (“padding”) de 20 pixels a la derecha e izquierda de la barra lateral el ancho

total del contenedor aumenta en 40 pixels.

Al añadir 20 pixels de espacio interior a la derecha e izquierda del div sidebar, aumentamos en 40 pixels la

anchura de la columna. En efecto, vemos que la columna ahora es más ancha, justo esos 40 pixels, es decir,

que ahora mide 340 pixels: 300 vienen de la propiedad “width” de la regla CSS correspondiente y otros 40 más

del padding que acabamos de añadirle. Como veremos ahora, es sencillo de hacer pero nos genera otro tipo de

problemas que podremos comprobar en seguida.

3 Vuelve al editor. Añade una cantidad de margen interno al div main porque también necesitamos separa el

texto del borde en esa parte de la página.

Encuentra la regla #main y añade el siguiente valor de padding: #main { width:600px; float:left; background-color:#ADA446;



Página 74 de 156

padding:0px 20px 0px 20px; }

Guarda el archivo y muéstralo en el navegador: aparece un problema nuevo. La anchura total de las dos

columnas, ahora que hemos añadido el padding, es mayor que la del contenedor donde están anidadas.

Podemos ver que el div main se ha desplazado hasta el único sitio donde puede desplegarse por completo, que

es debajo de sidebar.

Podemos resolver esto de varias formas: podemos aumentar la anchura total del div wrap, podemos reducir el

ancho de sidebar o de main (o ambos), o también podemos reducir el valor del margen interno. Todos estos

métodos se basan en el uso de “padding” y existe un método alternativo que nos permite separar el texto del

borde de las columnas y que no utiliza el padding en absoluto. Ahora lo vemos.

4 Vuelve al editor y localiza las reglas de margen interno que has añadido en los pasos 2 y 3. Selecciónalas y

elimínalas. Vamos a conseguir un efecto equivalente pero añadiendo reglas de margen a los elementos de texto

dentro de las columnas en el paso siguiente.

5 Debajo de la regla #footer del código CSS, añade esta regla nueva: p, h1, h2, h3 { margin-left:20px; margin-right:20px; }

Esta regla añade un margen de 20 pixels a la derecha y la izquierda de todos los párrafos y títulos de la página.

Guarda el archivo y visualízalo en el navegador.

Si añadimos márgenes a los elementos dentro de la barra lateral, aumenta la separación con respecto al

borde pero no se incrementa el tamaño del contenedor.

Como veíamos en el ejemplo anterior con el margen interno, el resultado es un espacio adicional entre el texto

y el borde de las columnas. La diferencia esencial es que cuando añadimos margen externo a los elementos de



Página 75 de 156

texto, la anchura de las columnas no se ve modificada. Esta es una gran ventaja, puesto que el ancho de las

columnas es un valor absoluto y ya no se “rompe” la distribución en pantalla con tanta facilidad como cuando

utilizamos el valor de padding.

Pero esta técnica también tiene sus desventajas, puesto que las reglas que acabamos de crear se van a aplicar

a todos los párrafos y títulos de nivel 1, 2 y 3 de la página. Por ejemplo, verás que el texto del pie de página se

ha desplazado también 20 pixels a la derecha porque su contenido es un párrafo. En el caso de que solo

queramos aplicar el margen a los elementos dentro de los divs “sidebar” y “main”, nos vendrá muy bien el

selector de contexto que ya hemos utilizado antes.

6 Vuelve al editor y borra las reglas para margin-left y margin-right que has añadido en el paso 5 (pero deja la

regla tal cual). Añade ahora este grupo de reglas: p, h1, h2, h3 { } #sidebar p, #sidebar h2, #sidebar h3, #main p, #main h1, #main h2, #main h3 { margin-left:20px; margin-right:20px; }

Se trata de una regla CSS abreviada que agrupa los estilos para los elementos de párrafo, heading 1, heading 2

y heading 3 que puedan existir en los elementos cuyo ID sea “sidebar” y “main”, que, como recordarás de la

Lección 2, se indica precediendo el nombre de ID con el símbolo de la almohadilla (#). A todos estos

elementos se les aplicarán márgenes de 20 pixels a la derecha y la izquierda, lo que equivale a restarles un total

de 40 pixels de anchura para su despliegue en pantalla.

7 Guarda el archivo y ábrelo con el navegador. Prácticamente no veremos cambios excepto en el pie de página,

que queda de nuevo totalmente pegado al lado izquierdo. Puedes pensar que el cambio es poca cosa, pero

ahora nuestro archivo está preparado para cambios futuros. Cierra el navegador y vuelve al editor.

Este método exige algo más de atención a los detalles que el método basado en el margen interno. Por ejemplo,

si queremos insertar nuevos elementos dentro de un div, tendremos que crear reglas nuevas para ellos (por

ejemplo una imagen o una tabla se verían pegados a la izquierda, otra vez).

También puede que desees que alguno de los elementos tenga un margen distinto. Por ejemplo, que quieras

indentar los párrafos dentro de la columna “main” hacia la derecha. En tal caso, habrá que añadir otra regla

expresamente para los elementos p del div #main, como se indica en el paso siguiente.

8 Añade una nueva regla justo debajo de la regla anterior, donde aparecían todos los elementos: #sidebar p, #sidebar h2, #sidebar h3, #main p, #main h1, #main h2, #main h3{ margin-left:20px; margin-right:20px; } #main p { margin-left:30px; }

9 Esta regla sobrescribe parcialmente la que habías creado en el paso 6. Guarda el archivo y visualízalo en el

navegador. Los párrafos dentro de la columna “main” ahora tienen un margen a la izquierda de 30 pixels, y en

contraste con el resto de los elementos, aparecen indentados.



Página 76 de 156

Los párrafos del div “main” tienen reglas explícitas con un margen de 30 pixels.

Excepto en el caso de los cambios que hemos hecho en esta práctica, todos los demás márgenes internos y

externos de los elementos se han dejado en cero, en aplicación de la hoja de estilo de reset. Para aumentar la

separación del resto de elementos podemos utilizar el grupo de reglas que hemos creado hace un momento.

10 Encuentra la regla vacía para los elementos p, h1, h2 y h3 en tu hoja de estilos. Modifica la regla así: p, h1, h2, h3 { margin-bottom:20px; }

Guarda la página y ábrela con el navegador. Ahora, casi todos los elementos se separan un poco más unos de

otros, al añadirse espacio a sus bordes inferiores. Podemos seguir afinando todos estos valores para mejorar el

aspecto de la página, por ejemplo insertando un margen superior al título 2 de la barra lateral, lo que podemos

hacer con el código del paso siguiente:

11 En el editor de texto, añade esta regla debajo del grupo de reglas para #main y #sidebar: #sidebar h2 { margin-top:15px; }

Guarda de nuevo el archivo y muéstralo en el navegador. Ahora el título h2 de la barra lateral queda más

separado del borde superior del contenedor.



Página 77 de 156

Después de aplicar un margen superior de 15 pixels al título h2 de la barra lateral.

Repaso al uso de márgenes internos y externos

En esta lección hemos visto dos métodos para separar los elementos dentro de una página. El primero consiste en añadir margen interno (padding) al elemento div contenedor. En este caso la ventaja es que todos los elementos dentro de este div se ven afectados al mismo tiempo, es una solución rápida y eficiente. Su desventaja es que aumenta la anchura total del propio contenedor. Para compensar esta expansión, tenemos que dejar algo de espacio adicional a los lados. Este comportamiento puede generar cierta confusión y provocar que las páginas se restituyan incorrectamente si no tenemos cuidado.

El segundo método consiste en añadir márgenes externos a los elementos que están dentro del propio div. Su desventaja es que necesitamos más código y hay que prestar atención a los detalles, tenemos que ir viendo cómo se posicionan los elementos individualmente. Su ventaja es que el posicionamiento de la columna es más predecible, puesto que solo tenemos que tener en cuenta una anchura total.

Finalmente, conviene destacar que lo habitual es aplicar una combinación de ambos métodos en cualquier estructura de presentación. Por tanto, debes conocer bien el comportamiento y los efectos de cada uno de ellos.



Página 78 de 156

Aplicar una imagen de fondo al pie de página

Hasta ahora nuestra estructura de página muestra los colores de fondo que hemos declarado a los elementos div. En esta práctica vas a aprender a insertar imágenes. Para ello empezaremos por añadir una imagen de fondo al pie de página mediante CSS.

1 Localiza el div #footer y sustituye todo el contenido de texto que hay dentro por este que aparece

aquí : <div id="footer"> <p>Copyright Worldwide Apparel 2011 </p> <p>All content on this site is confidential and should not be shared with anyone outside of Worldwide Apparel.<p> </div>

2 Guarda la página y ábrela en el navegador. A cada uno de los párrafos se le aplican las reglas de

párrafo descritas en la hoja de estilos. Ahora vamos a añadirle una imagen de fondo a todo el

contenedor div. Es una imagen de 960 pixels de ancho y 128 de alto.

3 En la hoja de estilos interna, encuentra la regla para el pie de página (“#footer”). Añade una

nueva regla para aplicar una imagen de fondo indicando un archivo de la carpeta de imágenes de tu

equipo: #footer { clear:both; background-color:#BA2B22; background-image:url(images/footer_background.jpg); background-repeat:no-repeat; }

Guarda la página y vuelve a mostrarla en el navegador.

El pie de página tiene ahora una imagen de fondo por aplicación de una nueva regla CSS.

La imagen de fondo ahora aparece detrás de los textos. Fíjate en la propiedad background-repeat

del código anterior. CSS, por defecto, considera a las imágenes de fondo como “baldosas” que se

van añadiendo sin límite hasta llenar todo el espacio del objeto al que pertenecen. Al indicar el

valor no-repeat nos aseguramos que la imagen solo se muestra una vez. Las dimensiones del pie de

página deben ser tales que nos permitan ver la imagen correctamente, tal y como veremos en el

paso siguiente.

4 Modifica la regla para el pie de página añadiendo las líneas en rojo: #footer { clear:both; background-color:#BA2B22; background-image:url(images/footer_background.jpg); background-repeat:no-repeat; width:960px;



Página 79 de 156

height:128px; }

Guarda el archivo y vuelve a mostrar la página en el navegador. Ahora el tamaño de la zona de pie

de página coincide con el tamaño de la foto. El paso siguiente consiste en ajustar los estilos del

texto que va dentro, separándolos.

5 En el editor de texto, encuentra la regla #footer y justo debajo añade esta otra regla para párrafos,

que se aplicará únicamente a los párrafos del footer: #footer p { margin:10px 0px 0px 20px; width:280px; font-family:Verdana, Geneva, sans-serif; font-size:0.689em; }

Esta regla añade un margen superior de 10 pixels y margen izquierdo de 20 pixels a ambos párrafos

del pie. Al definir la anchura de los párrafos podemos forzar un salto de línea en el punto

aproximado que nos interesa: dentro del espacio en blanco que nos deja la foto. Las propiedades

“font-family” y “font-size” nos ayudarán a conseguir un efecto más atractivo con un tipo de letra

más pequeño.

6 Guarda la página y visualízala en el navegador.

Los párrafos de texto del pie de página con los nuevos estilos.

En la sección anterior hemos visto cómo se utilizan los márgenes internos y externos, es una técnica

muy habitual. Podríamos haber añadido algo más de espacio entre el primer párrafo y el borde

superior del pie de página, pero al aumentar el margen superior en la regla #footer p estamos

añadiendo espacio también al segundo párrafo. En este caso, lo conveniente es añadir margen

interior al div “footer” tal y como se indica en el paso siguiente.

7 Añade la declaración que aparece en rojo a la regla #footer: #footer { clear:both; background-color:#BA2B22; background-image:url(images/footer_background.jpg); background-repeat:no-repeat; width:960px; height:128px; padding-top:10px; }

Ajuste fino de la estructura visual de la página



Página 80 de 156

Podemos aplicar colores de fondo y/o bordes a los elementos principales de nuestra estructura en las primeras fases del diseño, lo que nos ayudará a ver mejor sus límites. Después, si no queremos conservarlos, podemos eliminarlos y la estructura seguirá funcionando sin problemas. Ahora vamos a eliminar los colores de fondo de los divs del centro de la página, añadiremos algunas imágenes de fondo y mejoraremos algo el estilo de nuestra barra de navegación.

1 Elimina toda la propiedad background-color en las siguientes 4 reglas de estilo: #wrap, #sidebar, #main y

#footer. Guarda el archivo y visualízalo en el navegador.

Los mismos elementos estructurales una vez eliminados los colores de fondo.

2 Aunque nos vamos aproximando a un diseño de página unificado, aún tenemos que hacer unas cuantas cosas

más. Vamos a empezar por poner un fondo de gradiente de color a la barra lateral. La mejor forma de hacerlo

es mediante la inserción de una imagen de fondo.

Vuelve al editor y añade estas declaraciones a la regla #sidebar: #sidebar { float:right; width:300px; background-image:url(images/sidebar_bg.png); background-repeat:repeat-x; }

Como hicimos en la práctica anterior con el pie de página, ahora estamos añadiendo una imagen de fondo

desde CSS a este elemento div. pero en este caso el valor de background-repeat ahora es “repeat-x”. Esto

provoca que la imagen se repita en sentido horizontal (el eje X).

3 Añade también esta otra declaración para aplicarla al borde Izquierdo de la barra. Nos va a ayudar a

delimitar mejor la separación con respecto al contenido del área principal (“main”).



Página 81 de 156

#sidebar { float:right; width:300px; background-image:url(images/sidebar_bg.png); background-repeat:repeat-x; border-left: thin solid gray; }

Guarda el archivo y muéstralo en el navegador.

La barra lateral tiene ahora un gradiente de color como imagen de fondo y un borde en el lado izquierdo.

4 Otro problema de nuestra estructura es el logo dentro de la cabecera. En este momento está anidado y se

presenta en pantalla pegado al borde del contenedor. Podemos separarlo un poco creando una regla específica

para imágenes dentro del div “masthead”. Encuentra la regla #masthead y añádele esta línea justo debajo. #masthead img { margin-left: 20px; }

Se trata de un selector contextual igual que otros que hemos ido añadiendo a los títulos y párrafos dentro de las

columnas “main” y “sidebar”. En este caso, se trata de una declaración para añadirle margen por la izquierda a

todas las imágenes que puedan aparecer en el div “masthead”.

Lo último que nos quedaría por hacer es mejorar la apariencia de la barra de navegación. En este momento

estamos empleando unos estilos muy rudimentarios. Ahora los vamos a mejorar para ponerla a la altura del

resto de nuestra página y además le vamos a añadir algo de interactividad.



Página 82 de 156

5 Para mejorar la presencia visual de los enlaces dentro de la sección “mainnav” vamos a añadir una regla

explícita para los enlaces. Encuentra la regla #mainnav li y añade la siguiente regla justo debajo de ella: #mainnav ul li a { color:#ffffff; text-decoration: none; display:block; }

La declaración text-decoration elimina el subrayado del vínculo y le cambia el color a blanco. La declaración

display:block hace que estos elementos de navegación llenen por complete todo el espacio de la barra de

navegación. Entenderás mejor qué significa esto cuando creemos un efecto dinámico que se activará al pasar el

ratón por encima, en el paso siguiente.

Guarda el archivo y visualízalo de nuevo en el navegador.

La barra de navegación con enlaces, después de eliminar el subrayado

6 Cuando el usuario pasa el cursor por encima de los enlaces, sería interesante que cambiasen su apariencia,

así sabe que se trata de vínculos y no de texto normal. Para ello podemos aprovechar una particularidad de los

estilos que solo tienen los vínculos. Justo debajo de la regla #mainnav ul li a , añade esta otra: #mainnav ul li a:hover { background-color:#666666; color:#D2CD2F; }



Página 83 de 156

Los enlaces poseen una categoría exclusiva llamada pseudoclases. Hay cuatro estilos asociados a los vínculos,

que son a:link, a:visited, a:hover y a:active. No es obligatorio aplicar estilos a los cuatro, por ejemplo aquí

hemos creado estilos para a:hover que modifican el aspecto de todos los enlaces de la barra de navegación

cuando tienen encima el cursor. La pseudoclase a:visited se aplica al vinculo después de que el usuario ha

pulsado sobre él, y la pseudoclase a:active modifica su aspecto cuando le estamos pulsando con el botón.

7 Guarda el archivo y muéstralo en el navegador. Pasa el cursor por encima de los enlaces para ver los

cambios. Es el resultado del estiloa:hover.

Al pasar el ratón sobre los enlaces de la barra de navegación se dispara el estilo a:hover.

Ya has completado las prácticas de esta lección. Hemos visto la diferencia entre las estructuras basadas en

tablas y en CSS. Además has aprendido el uso de las propiedades float y clear para crear columnas dentro de la

página. También hemos visto las ventajas y desventajas del uso de márgenes externos (“margin”) e internos

(“padding”) a la hora de definir el aspecto de los objetos dentro de los contenedores.

EL diseño de estructuras visuales de las páginas web es un tema muchísimo más amplio, si tienes interés en

conocer más a fondo las técnicas avanzadas para diseño de páginas Web, te recomiendo que leas el libro

"HTML5 Digital Classroom" y más concretamente, el capítulo “Lección 5: Diseño avanzado con CSS”.

Autoestudio

1 Para seguir practicando con márgenes internos y externos, añade otros contenidos a la sección

“main”. Por ejemplo, puedes añadir un título de nivel 3 y una lista no ordenada entre los dos

párrafos: <h3>Quick Links</h3> <ul> <li>New Employee Forms</li> <li>Flexible Spending Plans</li> <li>401K paperwork</li> <li>Employee Discounts</li> </ul>

2 Después de añadir este código, utiliza los conocimientos adquiridos en esta lección para

experimentar con la colocación de estos elementos dentro de la página.

Repaso

Preguntas



Página 84 de 156

1 ¿En qué consiste un diseño de anchura fija y un diseño de ancho variable?. ¿Qué ventajas y

desventajas presentan cada uno de ellos?

2 ¿Qué hace la propiedad float de CSS y cuándo conviene utilizarla?

3 Tu compañero ha añadido un párrafo al div sidebar que ha creado. El párrafo está pegado al

borde mismo de la barra lateral. Indícale dos técnicas que puede emplear para separar un poco el

párrafo con respecto a los bordes del contenedor

Respuestas

1 En un diseño de anchura fija, el contenedor primario tiene una anchura absoluta (declarada

generalmente en pixels o ems) . Una de las ventajas principales de este tipo de diseños es que es

más fiable a la hora de colocar los demás elementos. Su desventaja más importante es que no altera

su tamaño al cambiar las dimensiones de la ventana del navegador, y algunas funciones como la

reorganización de los textos, se pierden. Las estructuras de diseño de ancho variable modifican sus

dimensiones dependiendo de la pantalla o dispositivo, pero suponen un trabajo más complicado

para el diseñador.

2 La propiedad CSS float permite eliminar cualquier elemento dentro del flujo HTML por defecto

y moverlo (o “hacerlo flotar”) pegándolo a la derecha o a la izquierda del contenedor donde está

situado. Podemos utilizar la propiedad float cuando queremos que el texto se organice alrededor de

imágenes, para crear menús de navegación horizontales o utilizar diseños de página en columnas.

3 Tu compañero puede añadir un valor de margen interno (“padding”) a la barra lateral, lo que

hará que todos los contenidos se separen automáticamente del borde. También puede añadir una

regla para los párrafos dentro del div y aplicar en ella unos valores de margen que separen los

textos con respecto al borde. Y por supuesto, puede utilizar una combinación de márgenes internos

y externos.



Página 85 de 156

Lección 4: Uso de las etiquetas HTML5

Objetivos:

En esta lección aprenderás cómo se actualizan las páginas HTML ya existentes para utilizar los elementos de división en secciones y otros elementos nuevos de HTML5.

Para empezar

Vas a trabajar con algunos archivos que se encuentran en la carpeta HTML5_04lessons a lo largo de esta lección. Comprueba que has descargado y copiado la carpeta de prácticas de HTML5 en tu ordenador. Para poder tener vistas previas precisas del contenido HTML5 que vamos a crear en esta lección, deberás utilizar un navegador web compatible con las etiquetas más importantes de HTML5, por ejemplo Internet Explorer 9. A lo largo de las siguientes secciones irás aprendiendo que muchos navegadores antiguos no soportan las etiquetas de HTML5. Uno de los objetivos de este capítulo es mostrarte estos problemas y enseñarte a resolverlos.

Una revisión de las etiquetas de semántica

En esta sección vamos a ver algunos de los nuevos elementos que se han incorporado al lenguaje HTML5. Para poder completar esta lección correctamente tienes que conocer bien los fundamentos de HTML y CSS y tener experiencia previa en la creación de páginas web con estos lenguajes.

La lección comienza con una breve introducción a las etiquetas de semántica (“semantic markup” en la literatura en inglés), que es una manera formal de decir “elige en todo momento la etiqueta más adecuada para el fin que pretendes”. Una explicación más técnica del concepto de etiquetado semántico es que se trata de una sintaxis que pueden entender tanto los seres humanos como los programas, por ejemplo un navegador o un buscador. Las etiquetas de semántica tratan de dar un sentido explícito a los contenidos, a menudo con el uso de etiquetas. A priori, la elección de las etiquetas correctas parece una idea muy buena. Por ejemplo, pensemos en los títulos de HTML, de los cuales tenemos 6 niveles: <h1>, <h2>, <h3>, <h4>, <h5>, y <h6>. Si los presentamos en un navegador, vemos que el elemento <h1> es el de mayor tamaño, y <h6> el más pequeño.

Los 6 elementos de título mostrados según los estilos por defecto, por orden de importancia. El contenido dentro de un elemento <h1> debería tener mayor importancia que otro dentro de un elemento <h3>. Por la misma razón, si se indica un estilo de letra para los títulos, el tamaño de letra



Página 86 de 156

de un elemento <h1> debería ser mayor que el de un elemento <h3>. No hay ninguna razón de tipo técnico que impida la creación de un estilo para <h3> que le haga tener un tamaño más grande que <h1>. Desde el punto de vista del navegador web, no hay diferencia, pero cuando un ser humano examina el código por primera vez su semántica le puede causar confusión: un elemento “título de tercer nivel” supuestamente debería tener un tamaño más pequeño que otro de primer nivel.

Uno de los objetivos del etiquetado semántico es conseguir que el código de las páginas sea lógico y coherente. Un código consistente y basado en conceptos lógicos es más sencillo de actualizar y modificar para un diseñador, y hace que la página sea más flexible y adaptable a otros usos, por ejemplo para acceder desde dispositivos móviles. El etiquetado semántico nos garantiza que incluso en las páginas sin estilos puedan verse todos los elementos de manera comprensible y utilizable.

Fundamentos de HTML5

Antes de crear una página HTML5 vamos a ver las distintas categorías de contenidos dentro de un documento HTML. Aunque los cambios que introduce HTML5 son numerosos, los conceptos esenciales de HTML y XHTML no han cambiado gran cosa. Un desarrollo interesante es que la sintaxis en HTML5 es menos estricta, sobre todo si se compara con la de XHTML 1.0. Por ejemplo, en HTML5 nos encontramos con estas situaciones:

• En HTML5 no se diferencia entre mayúsculas y minúsculas, es decir, podemos utilizar etiquetas en mayúsculas, en minúsculas e incluso mezclarlas ambas y la página sigue siendo válida. Así, el código siguiente es técnicamente válido:

<H1> Ultimas noticias desde Madrid </h1>

• No se exigen las etiquetas de cierre de los elementos. Por ejemplo, se admite la inserción de múltiples párrafos de esta forma:

<p> Ha habido un accidente en la autopista A2 entre Madrid y Alcala. <p> Los conductores deberán utilizar rutas alternativas. <p> La velocidad está limitada a 90 Kms/h.

• Las comillas en los atributos son opcionales. Por ejemplo, se da por válido este código:

<img src=trafficjam.jpg alt=traffic jam>

A primera vista, estas reglas parece que favorecen ciertas prácticas de programación poco coherentes. Si es así ¿por qué HTML5 las permite? La respuesta la resumen muy bien los arquitectos de HTML5 como un intento de “pavimentar el sendero” a los desarrolladores. Es una metáfora traída del mundo agrario, donde un granjero podría esperar a ver por dónde pasean los animales y, una vez han definido el sendero preferente, entonces procederá a pavimentarlo, en lugar de empezar por poner los adoquines primero, con el riesgo de que las reses acaben eligiendo otro camino distinto. En el mundo del desarrollo web, esta metáfora se traduce en que cuando una práctica ha sido adoptada de forma general por parte de los desarrolladores y diseñadores es el momento de “aceptarla como buena en vez de prohibirla o inventar algo diferente”.

En HTML5 se pone especial empeño en mantener la compatibilidad con versiones anteriores, y muchas de las prácticas mencionadas antes (como es el uso de etiquetas en mayúsculas o no cerrarlas adecuadamente) se utilizaban en la creación de documentos en los primeros tiempos de la Web. El W3C decidió integrar estas prácticas de codificación tan dispersas dentro de la



Página 87 de 156

especificación para asegurarse de que los navegadores del futuro podrían seguir mostrando el mayor número posible de páginas publicadas a día de hoy.

Si quieres conocer una explicación más detallada de la filosofía aplicada por el W3C a los Principios de

Diseño de HTML, visita http://www.w3.org/TR/html-design-principles/. ¡Pero cuidado!: el que HTML5 permita este tipo de sintaxis relajada no significa que debamos adoptar semejantes malas prácticas. A lo largo de este libro te iremos orientando para que programes como si lo hicieras en XHTML 1.0, cerrando los elementos, empleando minúsculas y añadiendo comillas a los atributos, porque creemos que siguen siendo buenas prácticas a mantener. Si empleamos una forma coherente y estándar a la hora de programar, reduciremos la probabilidad de errores y podremos aislar la fuente de cualquier problema si aparece.

La declaración DOCTYPE de HTML5

Un cambio notable en la especificación de HTML5 ya se puede ver en la primera línea de cualquier documento HTML5. Un navegador web restituye las páginas desde el principio avanzando hacia el final del documento. La línea inicial de la mayoría de los archivos HTML es la que se llama DOCTYPE, que le indica al navegador el tipo de documento que tiene que traducir. Por ejemplo, cuando un diseñador utiliza la versión transicional de HTML (4.0.1), la declaración DOCTYPE es:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Si utiliza la versión estricta de XHTML 1.0, la misma declaración se queda en:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

En HTML5 la declaración DOCTYPE es bastante más sencilla:

<!DOCTYPE html>

DOCTYPE sirve para validar documentos. Los navegadores actuales y futuros pueden comprobar la sintaxis de documentos que se declaran a sí mismos como HTML. Cualquier incorrección sintáctica (por ejemplo una etiqueta mal escrita o un atributo que falta), devuelve un error. La validación es un proceso opcional, pero los diseñadores y los desarrolladores lo utilizan mucho para detectar posibles fallos en el código o elementos que puedan faltar.

Si es preciso, puedes volver a consultar los detalles de la validación de páginas que vimos en la Lección 2

“Conceptos básicos de HTML, XHTML y CSS” En esta práctica vamos a convertir una página HTML antigua en HTML5. El documento está escrito en HTML 4.01, así que tenemos que modificar la declaración DOCTYPE y utilizar la de HTML5, más corta.

En el editor de texto, abre el menú Archivo – Abrir y ve a la carpeta HTML5_04lessons. Selecciona el archive E04_index.html y pulsa Abrir. Guarda el documento con otro nombre para asegurarte de que conservas una copia de seguridad: en el menú Archivo, selecciona Guardar como y lo guardas en disco con el nombre 04_index_work.html, dentro de la misma carpeta HTML5_04lessons.

1 Visualiza la página en tu navegador para comprobar el aspecto que tiene en este momento. Es, básicamente,

el diseño que hemos creado al final de la Lección 3 y se clasifica como una estructura de dos columnas de

anchura fija. SI no has estado trabajando recientemente con el diseño de las páginas web, debes repasar un

poco su estructura interna: tenemos un elemento DIV con el atributo ID #wrap que contiene a los demás



Página 88 de 156

elementos div que componen la estructura de la página. El estilo CSS para este grupo de DIVs establece una

anchura de 960 pixels y unos márgenes a derecha e izquierda, con el valor “auto” para que el contenedor quede

centrado en la ventana del navegador.

El elemento DIV identificado con el ID “wrap” tiene una anchura de 960 pixels y contiene al resto de

secciones.

Un cambio que tendremos en esta lección con respecto al diseño creado en la Lección 3 es que hemos sacado

todos los estilos internos del archivo 03_layout_work.html a una hoja de estilos CSS externa,

llamada base.css.

2 Cierra el navegador y vuelve al editor. Selecciona toda la declaración <!DOCTYPE> en las dos primeras

líneas y bórrala. Escribe en su lugar esto:

<!DOCTYPE html>

3 Guarda el archivo y ábrelo en el navegador. Verás que no hay cambios, pero el navegador reconoce este

archive como HTML5, no como HTML 4.01.

4 Cierra el navegador. Vamos a sustituir algunos de los elementos DIV por elementos HTML5 nuevos, pero

antes tenemos que ver cómo se clasifican en HTML5 los distintos tipos de contenidos.



Página 89 de 156

Las distintas categorías de contenido utilizadas en HTML5

Podemos dividir el contenido de una página web en varias categorías que, en su mayor parte, no son novedades de HTML5, pero que nos ayudan a entender cómo se organiza internamente la información.

• Metadatos • Flujo • Secciones • Títulos • Textos • Contenidos embebidos • Contenidos interactivos

Estas categorías son útiles a la hora de agrupar elementos dentro de una página. Por ejemplo, la categoría de información de flujo describe todos los elementos que podemos utilizar en el cuerpo de una página, pero podemos subdividir el contenido de flujo en categorías más pequeñas, como titulares o textos.

Metadatos A la información que establece el modo de restitución o el comportamiento del resto del contenido de la página se le denomina Metadatos. Los metadatos se pueden utilizar también para establecer la relación entre este documento y otros documentos. Un ejemplo obvio de metadatos es lo que aparece dentro de los elementos <meta>, que suelen contener una descripción de la información contenida dentro de la página, o palabras clave y que los motores de búsqueda utilizan para clasificar las páginas. Otros elementos como <style> y <script>se consideran también metadatos puesto que intervienen en la presentación y actividad del contenido principal. Los metadatos se ubican en la sección <head> del documento:

<head> <title> Worldwide Apparel Intranet </title> <meta charset=utf-8> <link rel="stylesheet" href="styles.css" media="all"> <script src= "jquery-1.4.2.min.js"></script> </head>

Flujo Por “flujo” entendemos los elementos que se consideran propiamente el contenido de una página web, o dicho de otra forma, todas las etiquetas utilizadas para definir contenidos entran dentro de esta categoría, como por ejemplo, <p>, <h1>, <ol>, <table>, etc. El contenido de flujo normalmente es texto o un archivo insertado, como una imagen o un vídeo. En HTML5 aparecen algunos elementos nuevos dentro de esta categoría, como <article>, <aside>, <audio>, <canvas>, <hgroup> y algunos más.

<h3> Esto es un contenido de flujo </h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>

Secciones Es una nueva categoría de HTML5 y actualmente incluye cuatro elementos: <article>, <aside>, <nav> y <section>. El W3C define el contenido de Secciones como aquellos elementos que “definen



Página 90 de 156

el alcance de cabeceras y pies de página”. El contenido de las secciones es un subconjunto del contenido de flujo. Veremos más adelante en esta misma sección cómo se distribuye una página en secciones.

Las definiciones de las secciones y otras categorías se pueden consultar en la web: http://dev.w3.org/html5/spec/content-models.html

<aside> <h1> Volunteer Opportunities </h1> <p> Sort and inspect home goods and supplies for kids.</p> </aside>

Títulos Los títulos contienen todos los elementos de encabezamiento que ya se vienen utilizando en HTML 4.0: <h1>,<h2> y sucesivos. HTML5 incorpora además el elemento <hgroup>, pensado para agrupar dos o más títulos. El contenido de titulares forma parte del contenido de flujo.

<hgroup> <h2>Top Rated Smoothies</h2> <h3>The Funky Orange</h3> </hgroup>

Contenido de textos Engloba todo el texto del documento, incluyendo los elementos delimitadores de texto dentro de los párrafos. El contenido de texto es un subconjunto del contenido de flujo.

<p> La ventaja de tener unas <strong> buenas </strong> botas de montaña se pone de manifiesto <em>especialmente</em> a partir del tercer día de caminata.</p>

Contenidos embebidos Los contenidos embebidos son aquellos que se importan de otros recursos dentro de la página, como son imágenes, vídeos o archivos para descargar.

<audio src="high_seas_rip.mp3" controls preload="auto" autobuffer> </audio>

Contenidos interactivos Uno de los elementos más básicos, como es la etiqueta <a> (utilizada en los vínculos), se la considera un elemento interactivo. Otros elementos han sido creados específicamente para dar cabida a la interacción con el usuario, y también se incluyen en esta categoría. Por ejemplo, elementos <textarea> o <button> que se utilizan en los formularios.

<input type="button" value="¿Soy interactivo?" onClick='alert("Sí, soy interactivo")'>

Botón con código Javascript asociado al acto de pulsar.

En el ejercicio siguiente vas a aprender a utilizar algunos de los nuevos elementos de HTML5 convirtiendo una estructura basada en divs en otra que aplique los nuevos elementos de sección y algunas de las etiquetas propias de esta versión.

Uso del nuevo elemento header en HTML5



Página 91 de 156

La especificación HTML5 extiende el conjunto actual de elementos que se usan actualmente para que el desarrollador y el diseñador puedan disponer de unas opciones de etiquetado semántico más precisas. Un ejemplo es el elemento <div> utilizado para dividir una página en secciones. La etiqueta de apertura <div> suele incluir un atributo ID o un indicador de clase, y a partir de ellos se le modifican mediante CSS diversas propiedades como width, height o background-color. Por sí solo, el elemento <div> no dice nada. Los diseñadores y desarrolladores le otorgan un significado al añadirle un ID o nombres de clases, pero estos nombres son arbitrarios y no tienen significado alguno para el navegador. Uno de los objetivos de HTML5 es, precisamente, incorporar nuevos elementos que tengan un sentido concreto dentro de la estructura interna del documento.

En esta práctica vamos a analizar la estructura abriendo un archivo que utiliza el marco HTML actual y lo vamos a convertir en una página HTML5.

1 En el editor de textos, abre el menú Archivo – Abrir y ve a la carpeta HTML5_04lessons, selecciona

el archivo base.css y pulsa en Aceptar

2 Más o menos hacia el primer tercio de la hoja de estilos, aparece la regla de ID siguiente, para la

cabecera original:

#masthead{ background-color: #FFF; }

Se trata de una regla sencilla que define el estilo aplicable a un objeto con ID “masthead”. Este estilo

indica que se aplicará el color de fondo blanco (“#FFF”). Recuerda este mismo nombre de estilo para los

pasos siguientes.

3 Encuentra la regla para #wrap y fíjate que indica como color de fondo el naranja. Sin embargo, cuando

visualizaste la página en el ejercicio anterior no aparecía nada con fondo naranja. Esto se debe a que el

color blanco de “masthead” está superpuesto al del contenedor “wrap”.

4 Sigue descendiendo por el código y verás que todas las reglas de estilo siguientes también indican un

color de fondo blanco: #sidebar, #main, #innerwrap y #footer. El resultado final es que el color de fondo

naranja del div “wrap” no se ve por ningún sitio. Lo hacemos con el fin de enseñarte y en los pasos

siguientes verás por qué, cuando empecemos a insertar elementos HTML5.

5 Vuelve al archivo 04_index_work.html.

6 El primer paso consiste en sustituir la etiqueta <div> actual de la cabecera por uno de los nuevos

elementos de HTML5. Dentro del código HTML, busca esta sección:

<div id="masthead"> <img src="images/wa_logo.jpg" width="200" height="123" alt="Worldwide Apparel logo" /> </div>

El único contenido dentro de este elemento div es la imagen del logo del sitio web.

7 Borra las etiquetas de apertura y cierre del div y sustitúyelas por esto: <header id="masthead"> <h1> The web's #1 resource for smoothie recipes </h1> <img src="images/smoothieworld_logo.jpg" width="200" height="150" alt="smoothieworld_logo" /> </header>



Página 92 de 156

Es un nuevo elemento de HTML5 llamado <header>.La especificación del W3C explica que “el

elemento header representa un grupo de textos de presentación o ayudas a la navegación”. La

especificación indica también que “el elemento header por lo general debe contener la cabecera de

sección (un elemento h1-h6 o un elemento hgroup), pero no es obligatorio. El elemento header puede

utilizarse también como contenedor de una tabla de secciones a modo de índice de contenidos, un

formulario de búsqueda o cualquier tipo de logos de interés”

En HTML5 podemos utilizar el elemento <header> dentro de una misma página varias veces. Más

adelante, en esta misma sección vamos a ver cuándo y dónde tendría sentido añadir cabeceras

adicionales.

Puesto que este es el primer elemento HTML5 de tu página, tenemos que comprobar cómo funciona en

navegadores web que no soportan las etiquetas HTML5. En los párrafos siguientes explicaré este

problema y cómo podemos resolverlo.

8 Guarda el archivo en disco y visualiza la página en tu navegador. Si el navegador soporta el elemento

<header> de HTML5 no verás ninguna diferencia entre esta página y la página que habías abierto al

principio de esta lección. Si el navegador NO soporta el elemento <header> verás que el color de fondo

de la cabecera se cambia a naranja.

La página visualizada en un navegador compatible con la etiqueta <header> HTML5.



Página 93 de 156

Los navegadores que no soportan el elemento <header> HTML5 no reconocen el estilo asociado a él

Las diferencias en el color de fondo se deben a que el navegador no compatible con HTML5 no aplica el

estilo del elemento <header> correctamente; el color naranja que ves es en realidad el color de fondo del

div subyacente. Fíjate que el logo del sitio web, aunque está dentro del elemento <header> sigue siendo

visible porque utiliza el elemento <img> , que sí reconocen todos los navegadores.

Este ejemplo sencillo ilustra de alguna forma el dilema a que nos conducen los nuevos elementos

HTML5: ¿cómo podemos utilizar estas etiquetas si los navegadores antiguos no reconocen sus estilos?

En la siguiente sección veremos dos soluciones para este problema.

Cómo incorporar soporte para los elementos HTML5 en

navegadores antiguos

Cuando un navegador se encuentra un elemento desconocido y este elemento tiene estilos CSS asociados, tenemos un problema. Para ser más concreto, muchos navegadores antiguos tratan al elemento desconocido <header> como un elemento de línea (o de nivel de texto) y no como elemento de bloque o simplemente ignoran el elemento desconocido. Los elementos de línea generalmente nos los encontramos dentro de un bloque de texto, por ejemplo los elementos <strong> y <em> son elementos de línea (también los verás citados como “inline” en los textos en inglés). Los elementos de bloque utilizan bloques de espacio en la página y añaden saltos de línea automáticamente cuando se insertan en el contenido. Por ejemplo, el elemento <p> y todos los elementos de título (h1 y siguientes) son de nivel de bloque.

Existen varias formas para conseguir que los navegadores más antiguos apliquen adecuadamente los estilos a las nuevas etiquetas de HTML5. Una manera de conseguirlo de forma elegante nos la ofrece la librería Javascript llamada Modernizr . Esta librería incorpora los nuevos elementos HTML5 a los



Página 94 de 156

navegadores antiguos. El código Javascript de esta librería está pensado para detectar funcionalidades dentro de cualquier navegador y añadirles el soporte necesario para poder utilizar los nuevos objetos y estilos si no están soportados. Vamos ahora a añadir un enlace a la librería Modernizr .

1 Ves al archivo 04_index_work.html. En la sección <head> del código HTML busca los enlaces a las dos

hojas de estilo externas y después de ellas añade la siguiente línea: <link href="reset.css" rel="stylesheet" type="text/css" /> <link href="base.css" rel="stylesheet" type="text/css" /> <script src="modernizr-2.0.js" type="text/javascrip t"></script>

Este archivo se encuentra en la carpeta HTML5_04lessons. Puesto que Modernizr es una librería Javascript

que está en proceso de mejora continua, puedes confirmar si existe alguna versión más reciente en su sitio

web http://www.modernizr.com

2 Guarda el archivo y si estás haciendo tus pruebas con algún navegador sin soporte a HTML5 verás que la

sección de cabecera ahora aparecerá con el color blanco, como queríamos.

Hemos incorporado la librería Javascript Modernizr para poder ver en un navegador antiguo como Firefox

3.6 o Internet Explorer 6 el elemento <header> HTML5.

Este añadido significa que podemos seguir utilizando los nuevos elementos HTML5 con confianza, ahora que

sabemos que pueden soportarlos prácticamente todos los navegadores más conocidos. No obstante, tenemos

que tener en cuenta algunas cuestiones. La librería Modernizr no es infalible ya que depende de que el usuario

active el uso de Javascript, y puede darse la circunstancia (rara por otra parte) de que el navegador del usuario

no soporte Javascript o que su uso esté desactivado por motivos de seguridad. En tal caso no nos vale ninguna

de las alternativas y la página se mostrará mal. De todas formas, la inmensa mayoría de los navegadores



Página 95 de 156

soportan Javascript, y en muy pocas ocasiones nos encontraremos con que Javascript esté desactivado por

defecto.

Incorporar elementos <nav> HTML5

Ahora vamos a utilizar los nuevos elementos de sección de HTML5 para dividir la página en secciones lógicas. Los nuevos elementos de sección son <section>, <article>, <aside> y <nav>. Vamos a empezar por el elemento <nav> porque es el más fácil de entender.

1 Encuentra en el código HTML este bloque:

<div id="mainnav"> <ul> <li><a href="index.html">Home </a></li> <li><a href="ourcompany.html">Our Company</a></li> <li><a href="policies.html">Policies and Procedures </a></li> <li><a href="doc_repository.html">Document Repository</a></li> <li><a href="forum.html">News & Events</a></li> </ul> </div>

En este código se utiliza una técnica de navegación muy corriente, basada en listas no numeradas y CSS.

Se trata aquí de una lista no ordenada anidada dentro de un div llamado “mainnav”. El nuevo elemento

<nav> de HTML5 puede sustituir al div y su ID originales.

2 Sustituye las etiquetas <div> por el código siguiente:

<nav> <ul> <li><a href="index.html">Home </a></li> <li><a href="ourcompany.html">Our Company</a></li> <li><a href="policies.html">Policies and Procedures </a></li> <li><a href="doc_repository.html">Document Repository</a></li> <li><a href="forum.html">News & Events</a></li> </nav>

3 Ahora tenemos que modificar el selector CSS que utilizamos en la hoja de estilo. En el editor de textos,

abre la hoja de estilos base.css y posiciónate en el código siguiente:

#mainnav { background-color:#666; height:40px; }

Cambia el selector de ID #mainnav por el selector nav como se indica a continuación.



Página 96 de 156

4 Cambia el código para que quede así:

nav { background-color:#666; height:40px; }

Ahora estos estilos se asocian al elemento nav, no al ID #mainnav. Guarda la hoja de estilo a disco y

vuelve a la página HTML, y guárdala también. Visualiza la página en el navegador. Podrás ver que

todavía no se ve correctamente la barra de navegación.

La barra de navegación se ve mal porque necesitamos actualizar todos los estilos asociados con el ID

#nav.

La barra de navegación se ve mal porque hay más estilos que utilizan el ID #mainnav como selector.

Tenemos que cambiarlos todos.

Cierra el navegador y vuelve al editor.

5 En el archivo base.css, busca las reglas que hay debajo de la regla nav. Necesitaremos modificar tres

selectores más: #mainnav li, #mainnav ul li a y #mainnav ul li a:hover. Estos son selectores de contexto

en CSS y apuntan a etiquetas concretas dentro del contexto del estilo del objeto padre (en este caso, es el

ID #mainnav, que ahora ha dejado de existir ya que lo hemos cambiado por el elemento nav). Por

ejemplo,#mainnav li define un estilo para los elementos de lista (li) dentro del elemento div que lleva el

identificador #mainnav.

Haz los cambios que se indican en rojo:

nav li { float:left; width:170px; height:40px; background-color:#CCC; text-align:center; border-left:1px black solid; border-right:1px black solid; line-height:40px; }



Página 97 de 156

nav ul li a { color:#ffffff; text-decoration:none; display:block; } nav ul li a:hover { background-color:#666666; color:#D2CD2F; }

5 Guarda el archivo y visualiza la página en el navegador. Ahora la barra de navegación aparece como al

principio.

Si la barra de navegación sigue viéndose mal, prueba a actualizarla dentro del navegador pulsando F5 o

mediante el comando de menú que corresponda. Algunos navegadores mantienen en su memoria cache la

página anterior y necesitan recargarla para mostrar los cambios.

La barra de navegación utiliza ahora el elemento <nav> HTML5.

Incorporación de otros elementos de sección HTML5 Los otros elementos de la categoría de contenidos de sección son <section>, <article> y <aside>. El primero que vamos a añadir es <section>. La definición oficial del elemento section es que “representa una sección genérica de un documento o aplicación. Una sección, en este caso, es un grupo de elementos relacionados con un mismo tema, a menudo con un titular o cabecera”. La definición también indica que “el elemento section no es un contenedor genérico. Si se necesita aplicar un estilo a un elemento o interesa independizarlo para su tratamiento posterior mediante scripting, los autores recomiendan el uso del elemento DIV en su lugar. Como regla general, el

Página 98 de 156

elemento section es adecuado solo si su contenido puede enumerarse de forma explícita en el resumen o índice del documento.” Esta definición puede consultarse en http://developers.whatwg.org/sections.html#sections. Así pues, podemos utilizar <section> cuando queramos delimitar de forma lógica un bloque de contenido concreto e importante que puede llevar, por ejemplo, texto e imágenes. En el caso de la página que hemos utilizado para la práctica, vemos que es una página de inicio con un contenido distribuido visualmente: la columna de la izquierda es más ancha y con un color diferente que la segunda columna, a la derecha. Esta segunda columna es la barra lateral y su contenido no tiene relación directa e inmediata con el contenido principal. Volveremos sobre esto más adelante.

1 En el archivo 04_index_work.html, busca la etiqueta de apertura de la sección principal

(“main”):

<div id="main">

Busca la etiqueta de cierre </div> más abajo. Vamos a cambiar esta etiqueta en seguida. El Código

de comentario nos ayudará a identificarla.

<p>The information on this site is provided to help you be a happier, more productive employee. If you have any questions about anything on the site or have other employee related questions, you can also call Jen Smith at extension 535! </p> </div> 

2 Sube otra vez a la etiqueta de apertura <div> y cámbiala por la etiqueta <section> así:

<section id="main">

3 Ahora baja hasta la etiqueta de cierre </div> que habías marcado en el paso 1 y sustitúyela con la

etiqueta de cierre de sección:

<p>The information on this site is provided to help you be a happier, more productive employee. If you have any questions about anything on the site or have other employee related questions, you can also call Jen Smith at extension 535! </p> </section> :

El elemento padre de esta nueva sección se llama <div id="innerwrap"> y se utiliza para fines de

presentación únicamente, no para guardar contenidos. El estilo asociado a este div incluye un color

de fondo (blanco) y puesto que ese div solo se usa como elemento de la estructura visual, podemos

dejarlo tal cual está.

En HTML5 podemos seguir utilizando elementos DIV, pero las buenas prácticas recomiendan

utilizarlos solo si no hay una opción mejor dentro del conjunto de elementos HTML5 disponibles.

4 Guarda el archivo y muestra la página en el navegador. Antes de seguir con la práctica,

necesitamos conocer el modelo que utiliza HTML5 para gestionar los esquemas de contenido.

Esquemas de contenidos en HTML5



Página 99 de 156

Una de las carencias más notables en las especificaciones actuales de HTML y XHTML es la falta de un buen modelo de gestión de esquemas de los contenidos. Pensemos en los esquemas tradicionales que podemos crear antes de desarrollar un informe o un escrito cualquiera. Los esquemas representan el nivel de importancia de cada bloque de contenidos y las relaciones jerárquicas entre dichos bloques. Los elementos de sección de HTML5 están pensados para poder generar de manera natural un esquema o estructura de contenido a partir de la página web. Imagina que cada página web tuviera un “Índice de contenidos” generado automáticamente a partir de la estructura interna de etiquetas. Eso es precisamente lo que se pretende con el modelo de esquema de documento en HTML5.

Las ventajas de los esquemas de documento no son evidentes de forma inmediata en los navegadores web actuales ni en los dispositivos móviles, pero serán sin duda muy útiles en los dispositivos de ayuda, como los lectores de pantalla. Por ejemplo, un lector de pantalla habilitado para HTML5 puede encontrar una página con el elemento <nav> y saltárselo directamente, o dar al usuario la opción de saltárselo o acceder a cada lugar a donde apuntan los enlaces del elemento <nav>.

Actualmente las páginas HTML y XHTML solo disponen de esquemas basados en las etiquetas de título, por lo que su uso es muy limitado. El nuevo modelo de esquema de HTML5 permite generar esquemas más detallados y relevantes. Mira este ejemplo:

<body> <header> <h1>Bienvenido a nuestro sitio Web</h1> <p>¡El mejor sitio web del mundo!</p> </header> <nav> <h1>Navegación</h1> </nav> <section> <h1>Ultimas noticias</h1> <h2>Grandes atascos en la autovía</h2> </section> </body>

Este código HTML tendría el siguiente esquema de documento:

1. Bienvenido a nuestro sitio Web 1. Navegación

2. Últimas noticias 1. Grandes atascos en la autovía

En este ejemplo, los elementos <nav> y <section> delimitan nuevas secciones dentro del esquema, pero sus nombres proceden del empleo de títulos y subtítulos siguiendo una jerarquía. De esta forma los títulos se convierten en un elemento mucho más significativo de cara a los esquemas de las páginas HTML5. El modelo de HTML5 nos permite añadir un nuevo elemento h1 por sección, de modo que cada sección de la página dispone de su propia jerarquía, tal y como se muestra el ejemplo anterior.

Una posible complicación es que a día de hoy la especificación HTML5 dice que los elementos de sección tienen que contener títulos, o de lo contrario aparecerán como “sin título” en el esquema. Por ejemplo, en el caso anterior, si borramos el elemento h1 de la sección <nav>, el esquema aparecerá así:

1. Bienvenido a nuestro sitio Web 1. NAV sin título

2. Últimas noticias



Página 100 de 156

1. Grandes atascos de tráfico en la autovía

En el ejemplo de lector de pantalla que comentábamos antes, este esquema de documento no es precisamente útil puesto que la sección de navegación no lleva título. Sin embargo, documentar con títulos las secciones de navegación no es una práctica habitual para los diseñadores (incluso para muchos de ellos carecerá de sentido) y por ello conviene que sepas que esta es una de las partes de la especificación HTML5 que está, en estos momentos, en fase de revisión y depuración. Las reglas de generación de los esquemas HTML5 pueden cambiar, pero tenemos que tener en cuenta que los esquemas de documento nos permiten organizar el contenido y nos enseñan mucho acerca de la organización interna de la información y su distribución en secciones. Crear ahora un buen esquema de documento nos garantizar grandes beneficios en el futuro, cuando los navegadores empiecen a utilizarlos de forma generalizada. Los diseñadores y desarrolladores preocupados por los aspectos de accesibilidad de sus sitios web deben prestar especial atención al papel que juegan (y jugarán) los esquemas de documento.

En estos momentos el poder ver un esquema de documento HTML5 no es algo fácil puesto que no disponemos

de muchas herramientas para ello. Podemos ver un ejemplo interactivo de un esquema de documento en esta

página: http://ie.microsoft.com/testdrive/HTML5/SemanticNotepad

accesibilidad con los roles WAI-ARIA

En paralelo con el avance de la especificación HTML5 se está desarrollando la Suite de Aplicaciones de Internet con Accesibilidad Avanzada (WAI-ARIA,

iniciales de Accessible Rich Internet Applications), cuyo objetivo es organizar y mejorar la accesibilidad en la Web. Un capítulo de esta especificación,

llamada los “landmark roles” (en español serían los “roles de señalización”) está pensada expresamente para utilizarse con elementos HTML y XHTML. Un

rol de señalización es una forma de clasificar e identificar distintas partes de una página web. Por ejemplo, un rol llamado “banner” puede identificar una

región que contenga la cabecera principal de la página. Podemos añadir este rol en forma de atributo al elemento <header> de HTML5:

<header role="banner">

Algunos de los roles de señalización tienen equivalentes directos con elementos HTML. Por ejemplo, el atributo role="form" se utiliza para los elementos d

formulario, y el role="navigation" se aplica al elemento <nav> de HTML5. Podemos utilizar los roles de señalización ya, pero deberás revisar tu código en el

futuro, para asegurarse de que su uso sea conforme con la especificación cuando el grupo que la desarrolla concluya sus trabajos.

Si quieres más información sobre el WAI-ARIA y los roles de señalización, puedes consultar la webhttp://www.w3.org/WAI/PF/aria/usage#usage_intro

La especificación WAI-ARIA del W3C se puede consultar en http://www.w3.org/WAI/PF/aria-practices/

La página de prácticas-aria que recomendamos incluye códigos de ejemplo y buenas prácticas para insertar roles de señalización en tus páginas web

Incorporación del elemento <footer> (pie de página)

Recordemos que el elemento <header> que hemos añadido antes no es un elemento de sección y no delimita una nueva sección en el esquema del documento. Por la misma razón, el elemento <footer> tampoco se considera un elemento de sección. Podemos incluir más de un elemento de pie de página en la misma página. Por ejemplo, podemos tener un pie de página para todo el sitio web y también un pie para una sección concreta. In este ejercicio simplemente vamos a sustituir el div llamado “footer” por el nuevo elemento <footer> de HTML5.

1 En tu página HTML, busca el elemento DIV que lleva el atributo ID “footer” y haz el cambio siguiente:



Página 101 de 156

<footer id="siteinfo"> <p>Copyright Worldwide Apparel 2011 </p> <p>All content on this site is confidential and should not be shared with anyone outside of Worldwide Apparel./a></p> </footer>

2 Abre la hoja de estilo externa base.css, busca el ID #footer y cambia su selector así: #siteinfo { clear:both; background-color:#FFF; background-image:url(images/footer_background.jpg); background-repeat:no-repeat; width:960px; height:128px; padding-top:10px; }

3 Por debajo de esta regla existe un selector contextual para los párrafos que aparecen dentro del pie de página

que tenemos que modificar. Sustituye el selector #footer p por lo siguiente: #siteinfo p { margin:10px 0 0 20px; width:280px; font-family:Verdana, Geneva, sans-serif; font-size:0.689em; }

4 Guarda en disco los archivos HTML y CSS y muestra la página en el navegador. Desplázate hacia la parte

inferior para ver si el pie de la página se ve como queremos. (Si la imagen no aparece, prueba a pulsar F5 para

recargar el contenido y revisa si aparecen mensajes de error). En un navegador compatible con HTML5 la

página debe aparecer igual que se veía antes de empezar esta práctica.

En la página utilizamos ahora el elemento <footer> HTML5.

En los ejercicios siguientes vamos a agrupar contenidos utilizando una combinación de las etiquetas que

hemos visto junto con otras nuevas.

Incorporación de los elementos <article> y <aside>

En esta sección vamos a ver en qué consisten los elementos <article> y <aside>, empezando por el primero. La definición del W3C establece que el <article> es “una composición autocontenida dentro de un documento, página, aplicación o sitio web y que, en principio, puede distribuirse o reutilizarse de manera independiente, p.ej. mediante sindicación. Puede tratarse de un post en un blog, un texto en una revista online o cualquier otra pieza de contenido independiente”.

La clave para entender la definición anterior es el concepto “auto-contenido”. El elemento <article> está pensado para contenidos que se pueden extraer de su página contenedora. Por ejemplo, en la práctica siguiente vamos a copiar el código HTML de una página distinta, y pegarlo dentro de nuestra página de inicio.

En el editor de textos, desde el menú Archivo, selecciona Abrir y busca en la carpeta de la Lección 4 un archivo llamado 04_article.html. Abre esta página

en el navegador. Verás que contiene información sobre lo que es un “periodo de espera” cuando una empresa sale a cotizar por primera vez en la bolsa. Aunque



Página 102 de 156

no es necesario que leamos todo el texto con atención, si lo revisamos podemos ver que se trata de un artículo monográfico, autónomo y que no depende de

ningún recurso externo para su comprensión.

Un artículo con contenido autónomo que vamos a pegar en nuestra página web.

Vuelve al editor de textos y selecciona todo el código HTML del artículo pulsando Ctrl+A. Después, para copiar este contenido puedes utilizar la

combinación de teclas Ctrl+C.

Ahora puedes cerrar el documento y volver (o abrir) el archivo 04_index_work.html. Queremos que este texto quede dentro de la sección que hemos creado

en la práctica anterior, así que tenemos que encontrar el siguiente párrafo y poner el cursor detrás de la etiqueta de cierre </p>, pero antes de la etiqueta de

</section>. Créate un elemento <article> vacío, como se indica aquí:

<p>The information on this site is provided to help you be a happier, more productive employee. If you have any questions about anything on the site or have other employee related questions, you can also call Jen Smith at extension 535! </p> <article> </article> </section>

Comprueba que tienes el cursor entre las dos etiquetas de <article> y pulsa Ctrl + V o la opción de menú Edición – Pegar, y pega ahí todo el código que has

copiado en el paso 2. Todo ese contenido ahora aparece dentro de un elemento “article”.

utiliza el elemento article?

El elemento article de HTML5 es ideal para los casos de contenidos que pueden acabar publicados en distintos contextos o incluso en dispositivos muy variados. Por ejemplo, si publicas una entrada en un blog, los lectores normalmente acuden a ese sitio web para leerlo. A



Página 103 de 156

día de hoy, sin embargo, estos contenidos pueden redistribuirse de maneras muy variadas y sindicarse de muchas formas, por ejemplmediante RSS o aplicaciones de lectura de noticias, por correo electrónico, desde aplicaciones para móviles, etc. Es decir, la escontenido publicado ha de ser lo suficientemente flexible para que no sea necesario reformatearlo dependiendo del tipo de dispositivo o el entorno de publicación de destino final. El elemento article además sirve para mejorar la accesibilidad, ya que ofrece otro nuevo nivel de estructura lógica dentro de un documento.

Como ya comentamos anteriormente, en HTML5 podemos tener más de una cabecera, así que vamos ahora a añadir una nueva al contenido que acabamos de

pegar. Busca la etiqueta de apertura <article> e inmediatamente después añade un nuevo elemento de cabecera al artículo:

<header> <h2>Understanding the Quiet Period</h2> <p>By Cheri White, posted December 21, 2012 <p> <h3>What all employees need to know during an IPO </h3> </header>

Además de poder poner múltiples cabeceras dentro de una página, podemos insertar también un elemento <footer> dentro del artículo para mejorar su estructura

interna. Busca los datos del autor y la sección de copyright y añade lo siguiente:

<footer>

<p> The author is an expert on SEC accounting rules and can be contacted <a href="mailto:[email protected]">here</a>.</p>

<p><small>© copyright 2012 Cheri White</small></p> </footer> </article> </section>

Guarda el archivo y muéstralo en el navegador para comprobar los resultados.

El resto de este ejercicio nos va a enseñar cómo se utiliza el elemento "aside". Podemos emplearlo de dos maneras, la primera basada en el uso habitual de las

barras laterales en un sitio web y la segunda, como un área de contenidos relacionados con un elemento <section>. Vamos a empezar por la primera opción,

modificando nuestra barra lateral.

En el archivo HTML, encuentra la etiqueta de apertura <div> correspondiente a la barra lateral:

<div id="sidebar"> <h2>Volunteer Opportunities</h2> . . . .

Vamos a cambiar la etiqueta <div> por una <aside> y también el nombre de ID para hacerlo más comprensible.

el fragmento de código anterior no hemos incluido todo el código de la barra lateral para ahorrar espacio.

Cambia la etiqueta de apertura <div> por lo siguiente:

<aside id="secondary-content"> <h2> Volunteer Opportunities </h2> . . .

Este ID representa de manera más exacta la función de este contenido. Ahora, cambia también la etiqueta de cierre del div.

Encuentra la etiqueta de cierre original </div> de la barra lateral y cámbiala por </aside>:

<p> Prepare meals for senior citizens and individuals recovering from surgery. Learn More </p> </aside>

Abre el archivo base.css y busca el selector #sidebar; ahora tenemos que cambiarlo para que se asocie al nuevo ID, "#secondary-content". Cambia el código

para que quede así:



Página 104 de 156

#secondary-content { float:right; width:300px; background-image:url(images/sidebar_bg.png); background-repeat:repeat-x; background-repeat: thin solid gray; background-color:#FFF;

¿Por qué hacemos este cambio? Técnicamente no sería preciso, pero uno de los objetivos de un diseño web flexible es un correcto control de aquellos nombres

que puedan tener que ver con la estructura interna de la página. El ID "sidebar" suele interpretarse como una columna lateral en una página. Pero ¿qué pasa si en

algún momento queremos meter este contenido debajo de la sección principal?. El ID de la barra lateral ya no representaría bien la función de esta parte del

contenido y puede provocar cierta confusión, por lo que el empleo de un ID como "#secondary-content" resulta más flexible.

Había algunos estilos que se utilizaban en el selector #sidebar original y tenemos que cambiarlos todos. Cambia los selectores en los tres conjuntos

siguientes de reglas, y donde aparece "#sidebar", pon "#secondary-content":

#secondary-content p, #secondary-content h2, #secondary-content h3, #main p, #main h1, #main h2, #main

y un poco más abajo de estas reglas:

#secondary-content h2

Realmente no hemos utilizado el elemento “aside” para la organización de secciones en nuestra página, y ahora vamos a ver el otro uso de este elemento.

En el archivo 04_index_work.html busca el siguiente código, que está dentro del elemento <section>:

<h3>More information on the Quiet Period<h3> <p> Read more information on the quiet period <a href=”#”>here</a><p>

Esta parte de la página apunta a información adicional para los lectores que pueden tener interés en conocer más en detalle los temas que se comentan en el

artículo, pero en realidad, en este ejemplo, apunta a la propia página (el valor href=”#” no hace nada realmente).

Una técnica muy usada para romper el flujo natural de la lectura y conducir la atención del lector hacia otro contenido es añadir un pequeño recuadro dentro de

la página. En algunas ocasiones, este contenido puede ser un comentario o una frase extraída del propio artículo, que en la jerga periodística de habla inglesa se

conoce como “pull quote” o simplemente “aside” y de ahí el nombre del elemento.

Cambia la etiqueta <div class=”articleaside”> por el elemento aside tal para que quede así.

<aside class=”moreinfo”> <h3>More information on the Quiet Period<h3> <p> Read more information on the Quiet period <a href=”#”>here</a><p>

Al utilizar el elemento <aside> dentro de un elemento <section>, como hemos hecho aquí, se interpreta que el contenido tiene alguna relación directa con la

propia sección. Cuando se utiliza como barra lateral como hicimos en la práctica anterior, el elemento <aside> se considera un contenido secundario sin relación

directa con el contenido principal de la página. El nombre de clase “moreinfo” lo añadimos aquí para poder modificar el estilo de este contenido.

a hoja de estilos base.css y añade este código al final del archivo:

.moreinfo

float: right; width: 200px; background: #ddf; padding: 10px; margin: 6px;



Página 105 de 156

Este código genera un recuadro de 200 pixels de ancho con un fondo gris. Además flota hacia la derecha, de forma que el resto del contenido aparece

rodeándolo por los lados libres.

Guarda los archivos HTML y CSS abiertos y visualiza la página en el navegador.

El elemento “aside” de HTML5 se puede utilizar dentro de una sección para indicar un contenido relacionado

Los elementos <figure> y <figurecaption> de HTML5

En la especificación HTML5 puedes encontrar otros elementos nuevos que sirven para que la estructura interna de las páginas se entienda mejor. Por ejemplo, los elementos <figure> y <figurecaption> nos permiten identificar imágenes y sus rótulos dentro del contenido.

1 Busca la etiqueta de cierre </header> en el artículo y añade una imagen así: <h3> What all employees need to know during an IPO </h3> </header> <img src="images/shhh.jpg" alt="Woman saying be quiet" />

Simplemente incorporamos la imagen a la página, pero ahora vamos a meterla dentro de un

elemento <figure>.

2 Añade el elemento “figure” de esta manera:

<figure> <img src="images/shhh.jpg" alt="Woman saying be quiet" /> </figure>

Este elemento está pensado para identificar o destacar ciertas partes de la página, como imágenes,

diagramas o gráficos. Podemos además emparejar la figura con rótulo añadiendo un elemento

<figcaption>.

3 El rótulo se añade de esta manera: <figure> <img src="images/shhh.jpg" alt="Woman saying be quiet" /> <figcaption> Quiet needed during an IPO. </figcaption> </figure>

Podemos modificar el estilo de los nuevos elementos igual que hemos hecho con los otros. Ahora

vamos a dar formato a la figura y al rótulo dentro del artículo.

4 Abre el archivo base.css y añade esta regla para la figura: figure { float:right; padding:4px; margin:6px; }

Guarda los archivos HTML y CSS y visualiza la página en el navegador. La declaración de estilo

hace flotar la imagen hacia la derecha y le aplica valores de margen interno y externo para separarla

del resto del contenido.



Página 106 de 156

El elemento <figure> flota hacia la derecha del artículo.

El tamaño del rótulo no se ve muy bien a este tamaño, así que le vamos a dar estilo también. Vuelve

al editor.

5 Añade la siguiente regla de estilo debajo de la regla para figure: figcaption { text-align:center; font:italic 0.7em Georgia, "Times New Roman", Times, serif; }

Guarda los archivos HTML y CSS y visualiza la página. Con esta regla el rótulo queda centrado y

el texto se muestra en cursiva.

Otros elementos de HTML5

Aunque en esta lección hemos visto ya los elementos más importantes de HTML5, en la especificación hay unos cuantos más. En la tabla siguiente se resumen los elementos más novedosos y el uso al que están destinados. Además hemos destacado los elementos HTML que han sido objeto de revisión desde la versión HTML4 a HTML5.

Lista actualizada de elementos HTML5

Elemento Descripción Atributos

a Vínculo web globals; href; target; rel; media; hreflang; type

abbr Abreviatura globals



Página 107 de 156



address Información de contacto para una

página o sección. globals

area Vínculo o área definible sobre un mapa

de imagen.

globals; alt; coords; shape; href; target; rel; media;

hreflang; type

article Composición autocontenida,

reutilizable o sindicable globals

aside Barra lateral o espacio con contenidos

relacionados globals

audio Reproductor de audio globals; src; preload; autoplay; mediagroup; loop; cotrols

b

Un segmento de texto destacado en el

contexto de la frase sin que implique

importancia adicional a nivel de código

HTML ni cambios en tono o intensidad

de la voz.

globals

base

URL de base y contexto de navegación

de destino por defecto para los enlaces

y formularios.

globals; href; target

blockquote Una sección entrecomillada obtenida de

otro origen globals; cite

body Cuerpo del documento

globals; onafterprint; onbeforeprint; onbeforeunload;

onblur; onerror; onfocus; onhashchange; onload;

onmessage; onoffline; ononline; onpagehide;

onpageshow; onpopstate; onredo; onresize; onscroll;

onstorage; onundo; onunload

br Salto de línea incondicional globals

button Control de botón de formulario

globals; autofocus; disabled; form; formaction;

formenctype; formmethod; formnovalidate; formtarget;

name; type; value

canvas Espacio de bitmap manejable mediante

scripting globals; width; height

caption Rótulo de tabla globals

cite Título de un trabajo globals

code Código de ordenador globals

col Columna de tabla globals; span



Página 108 de 156



colgroup Grupo de columnas en una tabla globals; span

command Comando de menú globals; type; label; icon; disabled; checked; radiogroup

datalist Contenedor para opciones para el

control de lista desplegable globals

dd Contenido para los elementos dt

correspondiente globals

del Contenido a eliminar del documento globals; cite; datetime

div Contenedor de flujo genérico. globals

dl Lista de asociación consistente en cero

o más pares nombre-valor globals

dt Leyenda para el correspondiente

elemento dd globals

em Destacar texto globals

embed Complemento embebible en la página globals; src; type; width; height; any*

fieldset Grupo de controles de formulario globals; disabled; form; name

figcaption Rótulo para una figura (opcional) globals

figure Figura con rótulo opcional globals

footer Pie de página o sección globals

form Formulario de datos que se pueden

enviar

globals; accept-charset; action; autocomplete; enctype;

method; name; novalidate; target

h1, h2, h3,

h4, h5, h6 Títulos de sección globals

head Contenedor para metadatos del

documento globals

header Introducción o ayuda a la navegación

para una página o sección globals

hgroup Grupo de encabezamiento globals

hr Línea de separación temática globals



Página 109 de 156



html Elemento raíz del documento globals; manifest

i Voz alternativa globals

iframe Contexto de navegación anidado globals; src; srcdoc; name; sandbox; seamless; width;

height

img Imagen globals; alt; src; usemap; ismap; width; height

input Control de formulario

globals; accept; alt; autocomplete; autofocus; checked;

dirname; disabled; form; formaction; formenctype;

formmethod; formnovalidate; formtarget; height; list;

max; maxlength; min; multiple; name; pattern;

placeholder; readonly; required; size; src; step; type;

value; width

ins Añadido al document globals; cite; datetime

label Rótulo para un control de formulario globals; form; for

legend Rótulo para fieldset globals

li Elemento de lista globals; value*

link Enlace a metadatos externos globals; href; rel; media; hreflang; type; sizes

map Mapa de imagen globals; name

mark Destacado globals

menu Menú de comandos globals; type; label

meta Metadatos en formato de texto globals; name; http-equiv; content; charset

meter Medidor globals; value; min; max; low; high; optimum; form

nav Sección con enlaces de navegación globals

noscript Contenido de fallback para scripts globals

object Imagen, contenido de navegación

anidado o complemento globals; data; type; name; usemap; form; width; height

ol Lista ordenada globals; reversed; start



Página 110 de 156



optgroup Grupo de opciones en un control de

formulario de lista desplegable globals; disabled; label

option Opción en un control de lista o combo-

box globals; disabled; label; selected; value

output Valor calculado de salida globals; for; form; name

p Párrafo globals

param Parámetro de un objeto globals; name; value

pre Bloque de texto preformateado globals

progress Barra de progreso globals; value; max; form

q Texto entrecomillado globals; cite

script Código de script embebido en la página globals; src; async; defer; type; charset

section Sección genérica de documento o

aplicación globals

select Control de lista desplegable globals; autofocus; disabled; form; multiple; name;

required; size

small Comentario en letra pequeña globals

source Origen de contenido para vídeo o audio globals; src; type; media

span Contenedor genérico de texto globals

strong Importancia globals

style Información de estilo embebida en la

página globals; media; type; scoped

sub Subíndice globals

summary Rótulo para detalles globals

sup Superíndice globals

table Tabla globals; border

tbody Grupo de filas en una tabla globals



Página 111 de 156



td Celda de tabla globals; colspan; rowspan; headers

textarea Campo de texto multilínea

(formularios)

globals; autofocus; cols; disabled; form; maxlength;

name; placeholder; readonly; required; rows; wrap

tfoot Grupo de filas de pie de tabla globals

th Celda de cabecera de tabla globals; colspan; rowspan; headers; scope

thead Grupo de filas de cabecera de tabla globals

time Fecha y/u hora globals; datetime; pubdate

title Título del documento globals

tr Fila de tabla globals

track Subtítulos para contenidos de vídeo globals; default; kind; label; src; srclang

u Palabras clave globals

ul Lista globals

var Variable globals

video Reproductor de vídeo globals; src; poster; preload; autoplay; mediagroup; loop;

controls; width; height

wbr Posibilidad de salto de línea globals

Autoestudio

1 Hay algunos elementos más de HTML5 que no hemos visto en esta lección. Recuerda que la

especificación HTML5 estará terminada hacia el año 2014. Si deseas consultar información más

actualizada, visita los progresos en la especificación en el sitio web del

W3Chttp://dev.w3.org/html5/spec/Overview.html

Repaso

Preguntas



Página 112 de 156

1 Indica si es verdadero o falso: “HTML5 solo permite utilizar un elemento <header> y <footer> en

la misma página”.

2 ¿Qué son los elementos de sección en HTML5? Nombra los cuatro elementos que se incluyen en

la categoría de sección.

3 Define el elemento <aside> y pon algunos ejemplos de las dos formas en que se puede utilizar.

Respuestas

1 Falso. Los elementos <header> y <footer> se pueden utilizar múltiples veces dentro de una

página. Por ejemplo, podemos tener una cabecera o un pie común para todo el sitio web y también

cabecera o pie para cada sección.

2 En HTML5 los elementos de sección en HTML5 definen el alcance de cabeceras y pies de página

y se utilizan para distribuir de forma lógica las diferentes áreas dentro de un documento HTML.

Los elementos de sección también sirven para generar nuevas secciones dentro de un esquema de

documento HTML5. Los cuatro elementos de sección son <section>, <nav>, <aside> y <article>.

3 El elemento <aside> se utiliza para representar una porción del contenido que suele llamarse

“barra lateral”, cuando dicho contenido es independiente del que forma la base temática de la

página (el contexto). Cuando aparece dentro de un elemento <section>,el elemento <aside> debería

llevar un contenido relacionado de alguna manera con el contexto que le rodea, como un extracto,

un resumen o similar.



Página 113 de 156

Lección 5: Trabajar con el Canvas

Objetivos:

El Canvas es una API de dibujo en dos dimensiones incluida en la especificación HTML5. La inclusión de una API de dibujo nativa permite a los desarrolladores generar imágenes dinámicamente dentro de una página web, por lo general a partir de datos obtenidos desde alguna fuente o a partir de la interacción con el usuario. A diferencia de los formatos conocidos de imágenes como JPG o PNG, los dibujos que se crean con Canvas se pueden modificar en tiempo real.

Para empezar

Vas a trabajar con algunos archivos que se encuentran en la carpeta HTML5_05lessons a lo largo de esta lección. Comprueba que has descargado y copiado la carpeta de prácticas de HTML5 en tu ordenador. En esta lección vas a aprender los conceptos básicos de la API Canvas, que incluyen el dibujo de figuras, trazos, textos y el uso de colores y gradientes. Después vamos a continuar con conceptos más avanzados de dibujo de imágenes, sombras, el empleo de transformaciones y la creación de animaciones. Puedes utilizar el elemento Canvas de HTML5 para definir la superficie de dibujo, pero tendremos que programar en JavaScript las instrucciones de dibujo y las líneas, formas y colores resultantes. Aunque los conocimientos necesarios de JavaScript son mínimos, si nunca has programado en este lenguaje conviene que antes leas con atención esta introducción breve al lenguaje.

Conceptos básicos de JavaScript

JavaScript es un lenguaje de scripting con su propia estructura y sintaxis. Queda fuera del alcance de esta lección explicar por completo JavaScript y cómo se utiliza, pero sí vamos a ver aquí algunos conceptos básicos, ya que si no has programado antes en este lenguaje, necesitarás tener unos conocimientos básicos sobre la forma en que JavaScript interactúa con el código HTML, y estos conocimientos te servirán como una base que podrás aplicar a lenguajes de scripting más avanzados, como C# o PHP. En los pasos siguientes vamos a trabajar con un formulario sencillo, para entender algunos de los conceptos fundamentales de JavaScript.

1 En el editor de textos, en el Menú Archivo selecciona Abrir y ve a la carpeta HTML5_05lessons.

Selecciona el archivo 05_subscribe.html y pulsa Abrir. Para mantener una copia de seguridad de

este archivo, guárdalo con otro nombre.

2 En el menú Archivo, selecciona "Guardar como" y guárdalo con el

nombre 05_subscribe_work.html. Comprueba que lo has grabado en la

carpeta HTML5_05lessons.

Repasa durante un momento el código HTML. Verás que está creado totalmente en HTML y que,

en consecuencia, carece de toda interactividad o dinamismo. Es una página totalmente estática.



Página 114 de 156

3 Visualiza la página en el navegador y pulsa después el botón Submit. No ocurre nada salvo el

comportamiento por defecto del botón, que es un elemento que no tiene en esta página web ninguna

función concreta.

HTML no puede comprobar si un campo de formulario tiene datos. Necesitas JavaScript para eso.

Necesitamos utilizar JavaScript para que el botón sea interactivo, ya que HTML nos permite hacer

ciertas cosas, como modificar el texto que aparece en el botón, pero no aporta métodos para

controlar la interactividad. Vamos a añadir código JavaScript para que al pulsar el botón se abra una

ventana en el navegador y nos pida el nombre. Una vez escrito el nombre, al pulsar OK, el código

JavaScript mostrará este nombre en pantalla.

4 Debajo de la etiqueta <title> en la página, escribe estas líneas de código: <script type="text/javascript"> </script>

Tenemos que indicar a HTML que queremos utilizar JavaScript, igual que hemos hecho ya con

CSS. Podemos insertar esas instrucciones en cualquier lugar del código HTML, pero las buenas

prácticas recomendadas son añadir el código de programación en la sección de la cabecera

(<head>) de la página.

El atributo type es opcional en HTML5.

5 Añade entre las etiquetas de <script> el siguiente código (en rojo): <script type="text/javascript"> function show_prompt() </script>

Una función en JavaScript es un código que se ejecutará como resultado de algún evento en la

página. En este caso, la función tiene un nombre, show_prompt(), y lo único que hará es indicarle al



Página 115 de 156

navegador que abra una pequeña ventana en pantalla . El evento que dispara esta función es la

acción del usuario de pulsar el botón Submit.

La función show_prompt() necesita más cosas para conseguir lo que queremos.

6 Añade este código (marcado en rojo) debajo de la función: <script type="text/javascript"> function show_prompt() { var name=prompt(); } </script>

En esta línea de código hemos declarado una variable y le hemos asignado un valor. Esta variable,

llamada name, obtiene su valor de la función "prompt()". Una línea de código es la cantidad mínima

de información que se necesita para hacer que ocurra algo en JavaScript.

Para que se ejecute el código JavaScript necesitamos añadir una instrucción al botón HTML que le

describirá cómo ha de ejecutar el código y qué función debe utilizar.

7 Añade este código (indicado en rojo), al HTML del botón: <input type="button"onclick="show_prompt()" value="Submit" />

La instrucción onclick se conoce como evento JavaScript y el valor "show_prompt()" es la función

JavaScript que hemos declarado en el paso 5 dentro de la etiqueta <script>. Ahora hemos cerrado

la cadena lógica que, en resumen, viene a decir "cuando el usuario pulse el botón Submit, llama a la

función show_prompt. Cuando se ejecute la función show_prompt, ejecutará otra función

llamada prompt".

8 Guarda el archivo y visualiza la página en el navegador. Si la configuración de seguridad del

navegador está preparada para impedir la ejecución de scripts, deberás pulsar en el botón "Permitir

el contenido bloqueado". Pulsa el botón Submit y verás aparecer una ventana pidiendo un dato en

pantalla (un tipo de ventana específica, denominada "User Prompt"). Es una demostración

realmente simple de JavaScript en acción. Ahora vamos a añadir algo más de código para insertar

datos en esta ventana emergente, en los pasos siguientes.

9 Cierra el navegador y en el editor añade el código marcado en rojo a la declaración de la variable

JavaScript (la que hemos insertado en el paso 6): var name=prompt("Please enter your name","Chris P. Bacon");

Guarda el archivo y muéstralo en el navegador. Prueba a ver qué sucede ahora al pulsar Submit.

Los nuevos valores aparecen en la ventana:



Página 116 de 156

La ventana de introducción de datos ("User Prompt") es una de las demostraciones más simples

JavaScript en acción.

Ahora hay que añadir código JavaScript para capturar el valor del texto introducido en esta ventana

para poder mostrarlo después en una página HTML nueva.

10 Cierra el navegador y añade este código indicado en rojo al código JavaScript: <script type="text/javascript"> function show_prompt() { var name=prompt("Please enter your name","Chris P. Bacon"); if (name!=null && name!="") { document.write("Hello " + name + "! How are you today?"); } } </script>

El nuevo código añadido se compone de dos partes: una sentencia IF y una sentencia THEN. La

sentencia IF busca un valor en el campo de texto. Si hay algún valor, se ejecuta la

instrucción document.write de la línea siguiente, y se ve en pantalla el nombre que hemos escrito en

la ventana emergente.

Los caracteres != y && que aparecen en la expresión (name!=null && name!="") se conocen

como operadores en JavaScript y son piezas básicas en el diseño lógico de cualquier función.

La expresión document.write es una sentencia que le dice al navegador web que escriba un dato en

una página web. En este caso, se trata de escribir la frase "Hello" seguida de las palabras que

hayamos escrito en el campo de texto de la ventana emergente anterior, y terminaría con las

palabras "How are you today?".

11 Guarda la página y muéstrala otra vez en el navegador. Deja el valor por defecto de momento y

pulsa OK. Aparece una página nueva, como resultado del código que hemos añadido en el paso

anterior.



Página 117 de 156

El nombre escrito en el campo de texto se muestra en una página nueva.

Pulsa el botón Atrás del navegador y pulsa el botón Submit de nuevo, pero esta vez escribe tu

nombre en la línea de texto. Pulsa Aceptar y aparecerá este nuevo nombre en la página siguiente.

Se trata de una función JavaScript relativamente sencilla, pero que nos permite saber a grandes

rasgos cómo se comunica JavaScript con los elementos HTML de una página y ciertos conceptos

básicos de la lógica con la que operan las funciones de JavaScript. En el siguiente ejercicio vamos a

practicar con los eventos de JavaScript.

Eventos de JavaScript

El evento JavaScript con el que hemos practicado en el ejercicio anterior era onclick , el cual forzaba la ejecución del código al pulsar el botón Submit. Hay muchos otros eventos que podemos utilizar también y para saber mejor cómo funcionan, vamos a modificar nuestro ejemplo.

1 En el código HTML cambia el evento onclick por el evento onmouseover (como se muestra en la

parte destacada en rojo): <input type="button" onmouseover="show_prompt()" value="Submit" />

2 Guarda el archivo y ábrelo ahora en el navegador. Pasa el cursor sobre el botón, pero sin pulsar.

La ventana emergente aparece. El eventoonmouseover lanza el código JavaScript asociado en

cuanto el cursor pasa por encima del área del botón.

En este momento el evento está asociado al botón, pero podemos mover el evento y en vez de

reaccionar al botón, que lo haga asociado a toda la página.

3 Selecciona el evento onmouseover y su valor, y pulsa Ctrl + X para cortar el código. Busca la

etiqueta de abertura de <body> y pulsa Ctrl + V para pegar el código, como se muestra aquí: <body onmouseover="show_prompt()">

El evento onmouseover aplicado a la página entera va a funcionar, pero es las buenas prácticas

recomiendan el uso del evento "onload", que lanza el código JavaScript en el momento en que se

abre la página: <body onload="show_prompt()">

4 Una vez hemos cambiado el evento a onload, guarda la página y ábrela en el navegador. En

cuanto la página se abre, se nos muestra la ventana emergente pidiendo el nombre. Podríamos



Página 118 de 156

introducir el texto aquí, pero tal y como está estructurado el evento en este momento, el resultado

sería que el texto escrito se mostraría en la misma página, así que pulsa Cancelar.

Con este ejercicio has aprendido que JavaScript te deja elegir el momento y la forma de llamar al

código. En ambos casos la interacción del usuario lanza la ejecución de ese código, pero el

evento onload nos ofrece pocas opciones para elegir el momento, mientras que el

eventoonclick (asociado al botón), nos da más control.

El Modelo de Objeto de Documento (DOM)

JavaScript tiene acceso a los objetos dentro del navegador. Así es como aparece la ventana emergente en el ejercicio anterior. Para este acceso se utiliza el denominado DOM (Document Object Model) o Modelo de Objeto de Documento, que es una convención para acceder a los datos dentro de las páginas HTML. Este modelo describe cómo se relacionan todos los elementos de una página HTML –por ejemplo textos, formularios o imágenes- con la estructura de mayor nivel, que es la que se denomina "documento".

JavaScript tiene acceso al documento y todos los elementos relacionados dentro de la página Web de un modo que no puede hacerse con HTML. Entre otras cosas, gracias a este acceso, con JavaScript se puede:

• Validar campos de formulario • Detectar qué navegador estamos utilizando • Responder a los eventos de usuario (a su "actividad") • Guardar y devolver información desde/hacia el ordenador del usuario

Recuerda el primer ejercicio y la sección de código que añadiste, que tenía una etiqueta document.write (the seventh line from the top). <script type="text/javascript"> function show_prompt() { var name=prompt("Please enter your name","Chris P. Bacon"); if (name!=null && name!="") { document.write("Hello " + name + "! How are you today?"); } } </script>

A esta sección del código en rojo se la denomina una función y el comportamiento que ha demostrado la página es uno de los ejemplos más simples que se pueden hacer en JavaScript, puesto que tenemos muy pocos objetos en el documento. La mayoría de documentos HTML tienen dentro múltiples objetos y podemos pasar un valor de texto a otra zona de la página, o enviar datos desde un formulario. Ahora que tienes una idea básica de JavaScript y su funcionamiento, el trabajo con el elemento Canvas será más sencillo.

El elemento Canvas

El elemento canvas es algo distinto de los demás elementos de HTML5. Es más complejo en el sentido de que necesita de JavaScript para funcionar. El primer paso que daremos será añadir (o definir) un elemento canvas en nuestra página HTML. Después tenemos que guardar una referencia

Página 119 de 156

al contexto de dibujo para ese elemento en forma de variable de JavaScript. Más tarde utilizaremos el propio contexto para escribir nuestras instrucciones de dibujo.

1 Abre el archivo 05_canvastemplate.html dentro de la carpeta HTML5_05lessons y busca la

plantilla que vamos a utilizar en los siguientes ejercicios (y que podrás modificar en futuros

proyectos). Esta plantilla define un elemento <canvas> HTML , un cuadrado de 300 pixels de lado,

que delimita la superficie de dibujo. Cuando se abre el cuerpo de la página, se llama a la función

JavaScript setup(). Esta función encuentra el elemento canvas por su nombre y declara una variable

con la referencia al contexto de dibujo del canvas. Una vez que tenemos disponible esa referencia,

podemos dibujar libremente sobre esa superficie. El código HTML de la plantilla del canvas es así:

<body onload="setup();"> <canvas id="lessonCanvas" width="300"height="300" style="margin:100px;"></canvas> </body> El código JavaScript tiene este aspecto: <script type="text/javascript"> function setup() { var canvas = document.getElementById('lessonCanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d');  } } </script>

No vas a modificar este archivo, sino que cuando estés preparado para operar sobre el canvas por ti

mismo, podrás utilizarlo como punto de partida.

2 En el menú Archivo del editor, cierra el archivo sin hacer cambios.

Ventajas del elemento Canvas

Según vayamos avanzando por los siguientes ejercicios seguramente pensarás que la cantidad de scripting que se necesita es mayor de la esperada. El elementocanvas nos permite crear gráficos que, de no disponer de él, tendríamos que generar con otros programas como Photoshop, Illustrator, o si se trata de animaciones, con Flash o Silverlight. La diferencia es que en vez de utilizar las herramientas de dibujo de estos programas, vamos a poder crear formas, gradientes, textos y otros elementos visuales con nuestro propio código. El objetivo de esta lección consiste en explicar los conceptos fundamentales del manejo del elemento canvas. Sin duda, en el futuro tendremos aplicaciones que nos permitirán crear objetos y animaciones para los canvas sin necesidad de programarlos a mano. De hecho veremos algunos de estos desarrollos al final de la lección. De momento vamos a crear estos objetos desde cero, que es la mejor forma de saber cómo se hacen las cosas con el canvas.

El elemento canvas ha tenido un soporte razonablemente bueno entre los navegadores a lo largo del tiempo y podemos suponer que acabará sustituyendo a la amplia variedad de soluciones que conocemos con el nombre de "contenidos multimedia avanzados" y también se utilizará para juegos, animaciones, diagramas, gráficos, visualización de datos y para crear interfaces vectoriales de usuario, entre otros muchos usos posibles.



Página 120 de 156

Una de las grandes ventajas del Canvas en todos estos casos de uso es que no necesita que instalemos un complemento en el navegador. Hay más casos de uso del canvas: los iconos de la interfaz de usuario son un ejemplo del tipo de gráficos que, en teoría, podemos crear con elementos canvas. Las imágenes creadas con este elemento pueden guardarse en el disco en forma de archivos PNG, así que podemos imaginar una aplicación web que nos permitirá exportar imágenes. Además, utilizando una funcionalidad del Canvas llamada "data uri" podemos embeber imágenes creadas con el Canvas directamente dentro de CSS. Como sucede con la mayor parte de las funcionalidades de HTML5, queda a criterio de los diseñadores y desarrolladores el empezar ya a utilizar este elemento. En los ejercicios siguientes puedes empezar a hacerlo por ti mismo. Al finalizar la lección habrás creado un gráfico de barras empleando el canvas.

Trazos de dibujo ("paths")

Los trazos y las formas básicas son los componentes básicos de la creación de dibujos en el elemento canvas. Una vez te familiarices con las funciones más importantes, podrás crear elementos gráficos más complicados, como diagramas basados en datos, figuras animadas para tus juegos y otros diseños de gran utilidad e interés. Las primeras funciones que veremos en este apartado también nos van a servir para tener un conocimiento general de cómo funciona el elemento canvas.

Dibujo de rectángulos

El rectángulo es el trazo más sencillo que podemos dibujar. La función fillRect(x,y,width,height)que podemos utilizar dentro del objeto context , genera una figura rectangular en la posición y con el tamaño indicados por los parámetros, y con un relleno basado en el valor que tenga la variable fillStyle en ese momento. Una función estrechamente vinculada con ésta es strokeRect, que genera la misma figura pero en lugar de rellenarla, dibuja el contorno basándose en el estilo definido en ese momento para la variable strokeStyle. La función clearRect emplea los mismos parámetros pero elimina ("limpia") todos los pixels del canvas que quedan dentro del área de un rectángulo definido.

1 Abre el archivo 05_drawingrectangles.html y guarda en la misma carpeta una copia con el

nombre 05_drawingrectangles_work.html. En el código verás un elemento Canvas ya definido y

una función JavaScript llamada setup que se ejecuta al abrir la página. En la función setup se

guarda una referencia al contexto 2D del Canvas en una variable que es la que vamos a utilizar para

dibujar.

2 En la sentencia if, después de la declaración de la variable ctx, añade este código para dibujar un

rectángulo que ocupe todo el canvas: function setup() { var canvas = document.getElementById('lessonCanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.strokeRect(0, 0, 300, 300); } }



Página 121 de 156

Como puedes ver, las coordenadas X e Y tienen un valor cero, es decir, el rectángulo se empieza a

dibujar a partir de la esquina superior izquierda del canvas. Puesto que su anchura y altura valen

300 pixels, esto quiere decir que el rectángulo ocupa todo el espacio del canvas.

3 Debajo de la línea que acabas de escribir, añade estas otras dos líneas de código que cambian el

color del trazo, que ahora es negro, a rojo, y una segunda que dibuja un recuadro rojo más

pequeño: ctx.strokeStyle = 'rgb(255, 0, 0)'; ctx.strokeRect(0.5, 0.5, 100, 100);

4 Guarda el archivo drawingrectangle_work.html y ábrelo en el navegador. Podrás ver algo

similar a esta figura. Igual que con otras muchas funcionalidades de HTML5, si no vemos nada en

pantalla lo que tenemos que hacer es confirmar que el navegador soporta el elemento HTML5 (el

canvas en este caso).

Rectángulos con borde negro (el mayor, coincidiendo con la superficie del canvas) y rojo

(interior).

Como ves, el elemento Canvas tiene un margen definido en CSS que se añade solo a efectos de

ayuda visual. Esto nos muestra que podemos utilizar CSS para modificar el estilo del elemento

Canvas, igual que se hace con otros elementos HTML.

5 Vuelve al editor de textos y debajo de las líneas que acabas de escribir, añade la siguiente línea

para dibujar un rectángulo con relleno: ctx.fillRect(20, 20, 100, 100);

6 Añade otras dos líneas de código para cambiar el color del relleno, que en este momento es negro,

a verde, y dibuja otro segundo rectángulo con este nuevo color: ctx.fillStyle = 'rgb(0, 255, 0)'; ctx.fillRect(50, 50, 100, 100);

7 Guarda el archivo y vuelve a mostrarlo en el navegador. SI la página estaba ya abierta,

simplemente actualiza el contenido (pulsando F5) o vuelve a cargar el archivo. Ahora lo que

deberíamos ver es lo que aparece en esta figura:



Página 122 de 156

Rectángulos con borde en rojo y negro, y otros rectángulos con relleno negro y verde creados con

HTML5.

La función fillRect sirve para crear un rectángulo sólido (relleno), en vez de un recuadro.

8 Mantén abierta la página en el navegador y vuelve al editor. Debajo de las líneas del paso seis,

añade este código para borrar los pixels de una zona del canvas: ctx.clearRect(80, 80, 30, 30);

9 Guarda el documento, vuelve al navegador y actualiza la página. Ahora verás un dibujo parecido

al de la figura siguiente. La función clearRect convierte en transparentes todos los pixels que

quedan dentro del área delimitada por el rectángulo, eliminando en parte los cambios de color que

hemos hecho antes con strokeRect y fillRect.

Recuadros negro y rojo con rectángulos en negro y verde, y dentro de éste, un agujero

transparente.

Dibujo de líneas y círculos

Las funciones de dibujo de rectángulos del apartado anterior son, en realidad, una de funciones aún más básicas combinadas de tal forma que su uso se hace más sencillo. Supongamos que nos interesa crear el mismo rectángulo utilizando funciones más básicas. Veamos otra vez el código de la función generadora:

ctx.strokeRect(0, 0, 300, 300);

El mismo rectángulo se puede generar siguiendo una secuencia de funciones más básicas:

ctx.moveTo(0, 0); ctx.lineTo(300, 0); ctx.lineTo(300, 300); ctx.lineTo(0, 300); ctx.lineTo(0, 0); ctx.stroke();



Página 123 de 156

Esta secuencia genera un trazo compuesto o línea poligonal, que comienza en el punto definido por las coordenadas de moveTo(x, y). Las sucesivas funciones lineTo(x, y)van añadiendo puntos de inflexión al trazo, que se unirán posteriormente con líneas rectas. Finalmente, la función stroke es la que dibuja en el canvas las rectas que unen los puntos por orden, pero sin rellenar el espacio interior. Parece más razonable emplear la función de rectángulo puesto que hace lo mismo con una sola línea de código, pero conviene conocer cómo se manejan las funciones más básicas porque las podemos utilizar para dibujar cualquier forma.

1 Abre el archivo 05_drawinglinesandcircles.html y guarda una copia en disco, con el nombre

05_drawinglinesandcircles_work.html. Este archivo ya tiene un contexto de dibujo declarado en la

función setup. En esta práctica vamos a añadir un rectángulo y una serie de líneas en zig-zag.

2 Dentro de la función setup, detrás de la línea var ctx = canvas.getContext('2d');, añade este

código: ctx.strokeRect(0, 0, 300, 300); ctx.moveTo(20, 20); ctx.lineTo(100, 100); ctx.lineTo(80, 200); ctx.lineTo(200, 80); ctx.lineTo(200, 200); ctx.lineTo(280, 280); ctx.stroke();

3 Guarda los cambios y pasa al navegador. Abre la página para revisar el resultado, que debe ser

parecido a esta figura

Un recuadro negro y una línea en zig.zag atravesando el canvas.

Puedes ver que la función lineTo es bastante útil a la hora de dibujar líneas o rectángulos. Ahora

vamos a cambiar el color de relleno de las líneas en zig-zag y añadiremos un círculo rojo encima

del trazo.

4 Vuelve al editor y añade estas líneas de código debajo de las que has escrito en el paso 2: ctx.fillStyle = 'rgb(255,0,0)'; ctx.arc(100, 100, 16, 0, Math.PI * 2, false); ctx.fill();

La primera línea cambia el color de relleno active, que pasa de blanco a rojo. La segunda línea

dibuja un círculo completo con su centro situado en las coordenadas (100, 100) y un radio de 16

pixels. Los últimos tres parámetros de la función arc definen la longitud del arco. Los

valores startAngle y endAngle, medidos en radianes, definen los puntos de inicio y final, y el

ultimo parámetro, llamado anticlockwise define la dirección en que se dibujará la línea entre estos

el punto de inicio y el de término. Por tanto, en este código se define el dibujo de un arco que



Página 124 de 156

empieza en la posición 0 (el punto más a la derecha del círculo teórico) y sigue, avanzando en

sentido horario, hasta que alcanza el punto 2 π radianes, es decir, una rotación completa de 360

grados, con lo que cierra el círculo. Finalmente, la función fill se encarga de darle color al interior.

5 Selecciona en el menú Archivo – Guardar y pasa al navegador para ver el efecto de estos cambios

en pantalla. Como ves, el círculo ha quedado añadido al conjunto de líneas del trazo. Puesto que las

líneas y el círculo forman parte del mismo trazado, el relleno de color se aplica a toda el área, no

solo al círculo.

Un contorno negro y una figura quebrada rellena en rojo.

6 Si queremos dibujar trazos independientes tenemos que utilizar la función beginPath, que da por

concluido el trazo activo y comienza con otro nuevo. Vuelve al editor de textos y entre la

función fillStyle y arc, inserta las líneas siguientes: ctx.fillStyle = 'rgb(255,0,0)'; ctx.beginPath(); ctx.arc(100, 100, 16, 0, Math.PI * 2, false); ctx.fill(); ctx.stroke();

Esta segunda línea, ctx.stroke();, sirve para añadirle un borde al círculo.

7 Guarda el archivo y pasa al navegador para visualizar la página. El dibujo debe aparecer ahora

así:

Un recuadro negro, línea en zig-zag y un círculo rojo.

8 Una vez creado el círculo, ahora vamos a añadir otro objeto, en este caso un semicírculo. Escribe

estas líneas debajo de las anteriores: ctx.beginPath(); ctx.arc(170, 170, 16, 0, Math.PI, true); ctx.fill();

Con este código iniciamos un nuevo trazo, para dibujar un arco independiente del círculo anterior.

Los valores 170,170 son las coordenadas del centro. El valor 16 es el radio, el valor cero es el punto



Página 125 de 156

de inicio (startAngle)y el valor de endAngle lo dejamos en π, con lo que solamente dibujará un

semicírculo -180 grados- empezando desde el punto cero. El valor "true" para el

parámetro anticlockwise hace que el semicírculo se desarrolle hacia arriba.

9 Guarda el archivo y visualiza la página en el navegador. Ahora debe verse esta imagen:

Un recuadro negro, línea en zigzag, círculo rojo y semicírculo rojo.

Si dejamos el valor de anticlockwise como "false", el arco se trazaría en sentido horario, es decir un

semicírculo curvado hacia abajo.

Dibujar figuras con curvas

El elemento canvas nos proporciona dos funciones de dibujo con las que podemos trazar curvas: quadraticCurveTo(cpx, cpy, x, y) y bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y). Ambas funciones utilizan puntos de control para definir la curva del trazo cuando dibuja desde un punto al siguiente.

1 En la carpeta HTML5_05lessons, abre el archivo 05_drawingcurves.html y guarda una copia en

la misma carpeta, con el nombre05_drawingcurves_work.html. El código es el mismo que el del

ejercicio inicial donde se definía un elemento canvas y se guardaba una referencia al contexto 2D

en una variable para su uso posterior. En este ejercicio vamos a dibujar algunas formas para crear

una composición semejante a una flor.

2 En la sentencia if, después de la línea donde se declara la variable ctx, añade este código para

dibujar un rectángulo que encuadra el canvas. ctx.strokeRect(0, 0, 300, 300);

Es el mismo rectángulo de encuadre que vimos en la sección anterior, que nos sirve de marco de

referencia visual para saber dónde está el canvas dentro de nuestra página.

3 Añade las líneas siguientes debajo de la línea del paso anterior, para dibujar el tallo de la flor: ctx.fillStyle = 'rgb(0,173,104)'; ctx.moveTo(145, 150); ctx.quadraticCurveTo(120, 200, 170, 280); ctx.lineTo(190, 280); ctx.quadraticCurveTo(125, 190, 155, 150); ctx.fill();

La primera línea de código cambia el relleno a color verde. Las siguientes líneas definen los puntos

iniciales, curvas y líneas de la forma del tallo.

4 Guarda el archivo. Pasa al navegador y muestra la página HTML. Deberás ver esta figura:



Página 126 de 156

La forma de un tallo de flor verde.

Ahora vamos a crear un pétalo de la flor utilizando la función bezierCurveTo que utiliza dos puntos

de control, a diferencia del único punto de control que necesita la función quadraticCurveTo del

paso anterior. Además tenemos que dibujar una serie de guías utilizando los mismos puntos, para

ver mejor cómo opera la función bezierCurveTo.

Puesto que vamos a utilizar una serie de puntos varias veces, lo mejor será guardar los valores de

las coordenadas en variables que podremos reutilizar.

5 Vuelve al editor y añade este código debajo de las líneas de paso 3. var pt1 = { x: 155, y: 145 }; var pt2 = { x: 93, y: 106 }; var cp1 = { x: 111, y: 154 }; var cp2 = { x: 66, y: 131 };

6 Este código cambia los colores del trazo y el relleno, y nos dibuja el primer pétalo de la flor: ctx.fillStyle = 'rgb(115,206,226)'; ctx.strokeStyle = 'rgb(0,111,174)'; ctx.beginPath(); ctx.moveTo(pt1.x, pt1.y); ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, pt2.x, pt2.y); ctx.bezierCurveTo(89, 65, 159, 118, 155, 145); ctx.fill(); ctx.stroke();

Las dos primeras líneas del código cambian el trazo a azul oscuro y el relleno a azul claro. Las

siguientes cuatro líneas generan un trazo nuevo mediante la función bezierCurveTo para conseguir

curvas suaves. Finalmente, rellena el trazo y dibuja el borde.

7 Guarda el archivo HTML y muéstralo en el navegador para ver los cambios:

La forma de un tallo con un solo pétalo de la flor.



Página 127 de 156

8 Vuelve al editor de textos y añade las siguientes líneas de código debajo de las que has escrito en

el paso anterior. Estas nuevas líneas cambian el color del borde y del relleno y dibujan el centro de

la flor que sirve de centro para todo el conjunto: ctx.fillStyle = 'rgb(243,237,99)'; ctx.strokeStyle = 'rgb(253,183,58)'; ctx.beginPath(); ctx.arc(155, 145, 10, 0, Math.PI * 2, false); ctx.fill(); ctx.stroke();

9 Para hacernos una idea de cómo trabaja la función bezierCurveTo con los puntos de control para

definir una curva, vamos a añadir una guía utilizando los mismos puntos de la primera curva del

pétalo de la flor. Creamos las guías añadiendo las siguientes líneas de código debajo de las del paso

anterior: ctx.strokeStyle = 'rgb(255,0,0)'; ctx.beginPath(); ctx.arc(pt1.x, pt1.y, 2, 0, Math.PI * 2, false); ctx.arc(cp1.x, cp1.y, 2, 0, Math.PI * 2, false); ctx.arc(cp2.x, cp2.y, 2, 0, Math.PI * 2, false); ctx.arc(pt2.x, pt2.y, 2, 0, Math.PI * 2, false); ctx.stroke();

La primera línea cambia el trazo a rojo brillante, que veremos por fuera del dibujo del pétalo. Las

seis líneas siguientes generan una línea poligonal con circulitos pequeños en cada punto utilizado

por la primera curva de Bezier.

10 Guarda el archivo HTML y pasa al navegador para ver cómo queda el diseño tras estos cambios.

La flor con un solo pétalo y las líneas guía de desarrollo de la curva de Bezier.

Más sobre los puntos de control

Una vez terminada la sección de Dibujo de Curvas, y para profundizar más en la forma en que la función bezierCurveTo utiliza los puntos de control, modifica

los valores de punto guardados en el paso 5. Si cambias los valores, verás que las guías siguen representando en pantalla los puntos utilizados y la curva se

desarrolla hacia esos puntos de control.

Como ejemplo, cambia la coordenada X de la variable cp2 de 66 a 4. La curva de la parte de abajo del pétalo se dibuja ahora hacia el lado más a la izquierda

del canvas, mientras que el segundo punto sigue siendo el mismo.

Uso de textos dentro del Canvas



Página 128 de 156

Además de líneas y formas, en un canvas podemos dibujar textos. Los tipos de letra, tamaños y grosores se establecen de manera parecida a como se hace con CSS y siguen las mismas reglas con respecto a los tipos de letras, tamaños y grosores disponibles. A diferencia de CSS, no existe aquí el concepto de márgenes internos o externos. En este caso el texto se sitúa en la posición definida por las coordenadas X e Y, que expresan la distancia en píxels horizontal y vertical, con respecto al origen (la esquina superior izquierda del canvas). En esta sección vamos a crear una tarjeta de identificación con tu nombre para practicar con la escritura de textos en el canvas.

1 Abre el archivo 05_addingtext.html que está en la carpeta HTML5_05lessons y guarda una

copia del mismo con el nombre 05_addingtext_work.html. Este archivo utiliza la misma plantilla

que hemos estado usando hasta ahora, con la excepción de dos rectángulos que sirven como fondo

de la tarjeta.

2 Busca la segunda función strokeRect y añade este código para dibujar el texto de cabecera: ctx.fillText('HELLO MY NAME IS', 12, 40);

Esta línea de código dibuja un texto, que se indica en el primer parámetro, empezando en las

coordenadas indicadas por los parámetros segundo (valor x) y tercero (valor y). Utiliza la fuente por

defecto y el color del texto será blanco, heredado del valor de fillStyle que se ha declarado

anteriormente en el código.

3 Guarda el archivo HTML y vamos al navegador a ver el resultado, que debería quedar así:

La tarjeta de identificación con un pequeño borde.

4 Para aumentar el tamaño y grosor de la letra, inserta esta línea de código antes de la línea del paso

anterior: ctx.font = "bold 1.8em sans-serif"; ctx.fillText('HELLO MY NAME IS', 12, 40);

Puedes ver que, igual que ocurre con CSS, puedes definir el tamaño de la fuente utilizando valores

relativos. En este caso el texto de cabedera será 1,8 veces el tamaño de la fuente del elemento

canvas, tamaño que viene heredado del objeto <body> de la página HTML salvo que indiquemos

expresamente otra cosa.

5 Guarda el archivo HTML y visualízalo en el navegador, para ver los cambios:

La tarjeta de identificación con una cabecera más grande.



Página 129 de 156

6 Para añadir tu nombre a la tarjeta, inserta otra llamada a fillText. Para conseguir que el texto

destaque y parezca escrito a mano, vamos a utilizar una fuente distinta, con un tamaño mayor.

Debajo del código del paso 2, añade lo siguiente: ctx.fillStyle = 'rgb(0, 0, 0)'; ctx.font = 'bold 84px Comic Sans MS'; ctx.textAlign = 'center'; ctx.fillText('Dianne', 150, 150);

La primera línea cambia el color del texto a negro. La segunda, fija la fuente con un valor absoluto

de 84 pixels de altura y el tipo de letra será Comic Sans MS, que es un tipo de letra que imita la

escritura manual. La siguiente línea establece el alineamiento horizontal del texto con respecto a la

coordenada de posición, y le aplica el valor center. Otras posibilidades de alineamiento horizontal

son right y el valor por defecto (left).

7 Guarda el archivo HTML y visualízalo en el navegador:

La tarjeta de identificación con el nombre y una bonita cabecera.

Uso de colores, estilos y gradientes

Hasta ahora hemos utilizado colores sólidos, pero la mayoría de objetos reales presentan transiciones suaves de un color a otro. Este tipo de transiciones se reproducen en el canvas utilizando gradientes, que pueden ser de tipo lineal o radial. Además, en esta sección vamos a ver distintas maneras de definir los colores, incluyendo valores de transparencia.

1 Abre el archivo 05_colorsstylesandgradients.html que se encuentra en la

carpeta HTML5_05lessons y guarda una copia con el

nombre05_colorsstylesandgradients_work.html. El archivo utiliza algunos trazos que sirven para

dibujar la silueta de un vaso de Coca Cola.

2 Abre el navegador y visualiza la página HTML: el vaso aparece vacío:

Un vaso de Coca Cola vacío con una sombra negra.

3 Vuelve al editor y debajo de la función strokeRect Cambia el color de fillStyle desde el negro

actual a gris, como se indica aquí:



Página 130 de 156

ctx.fillStyle = 'gray';

En las secciones anteriores de esta lección hemos utilizado siempre la notación RGB para definir

los colores, pero existen ciertas palabras reservadas que facilitan su uso. Otros términos para

designar colores son "red", "blue", "orange", "purple", etc..

4 Guarda el archivo HTML y pasa al navegador para comprobar cómo ha quedado con los cambios.

Un vaso de Coca Cola vacío con una sombra mas clara.

5 También se puede rellenar el vaso con algo que simula la Coca Cola utilizando un gradiente

lineal. Después de la sección comentada con el texto "cup inline" y antes de la sección que viene

encabezada por el comentario "cup outline", inserta estas líneas de código: var lineGrad = ctx.createLinearGradient(150, 81, 150, 268); lineGrad.addColorStop(0, '#fff'); lineGrad.addColorStop(0.05, '#450c0c'); lineGrad.addColorStop(0.6, '#874040'); lineGrad.addColorStop(1, 'rgba(202, 147, 147, 0.6)'); ctx.fillStyle = lineGrad;

La primera línea define un nuevo pincel de gradiente lineal donde los dos primeros argumentos

definen el punto inicial del gradiente y los dos siguientes, el punto final. Para fijar la posición se

utilizan coordenadas X e Y, igual que cuando colocábamos rectángulos o círculos.

Las siguientes cuatro líneas definen una serie de "puntos de parada" del gradiente. El primer

parámetro define la posición del punto de parada de color relativo al punto de comienzo y

finalización del gradiente (donde 0 representa el punto de inicio y 1, el punto final). El segundo

parámetro define el color del punto de parada.

El formato hexadecimal se utiliza para declarar los tres primeros colores. El último color queda

definido utilizando la función rgba, que amplía la función rgb añadiendo un cuarto parámetro,

llamado "alpha" o también "opacidad" del color. La opacidad varía en una escala de 0 a 1, siendo

cero el valor de la transparencia completa y 1 la máxima opacidad.

Si quieres conocer mejor los conceptos de la notación de color RGBA, puedes consultar el libro

"HTML5 Digital Classroom" y en concreto, la Lección 11 "Aplicando estilos con CSS3".

La última línea cambia el valor de fillStyle al nuevo pincel de gradiente lineal.

6 El último paso será rellenar el contorno del vaso. En la sección que sigue al comentario "cup

outline", añade la siguiente línea después de la función stroke. ctx.fill();

7 Guarda el archivo HTML y visualízalo en el navegador para ver el resultado:



Página 131 de 156

Un vaso lleno de Coca Cola.

8 Vuelve al editor. Mediante el empleo de varios gradientes radiales vamos a añadir burbujas al

vaso de Coca Cola. Después de la línea de código ctx.fill que has escrito en el paso 6, añade estas

líneas: ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)'; ctx.lineWidth = 2;

La primera cambia el trazo, que pasa del negro por defecto a un blanco semitransparente. La

segunda línea cambia la anchura del trazo desde el valor por defecto (1 pixel) a 2 pixels..

9 Debajo de las líneas escritas en los pasos anteriores, añade estas: >var radGrad = ctx.createRadialGradient(116, 107, 1, 120, 110, 10); radGrad.addColorStop(0, 'white'); radGrad.addColorStop(0.9, 'rgba(255, 255, 255, 0)');

La primera línea define un gradiente radial de manera similar a como se hace con el gradiente

lineal. Se indican los puntos de inicio y final del gradiente (los parámetros primero y segundo para

el punto de inicio, y el tercer y cuarto argumentos, para el punto de finalización). La diferencia

principal son los argumentos tercero y sexto, que se utilizan para indicar los radios de los

respectivos puntos.

En este ejemplo, el punto de inicio se define en la posición x=116, y=107, con un radio de 1. El

punto final queda definido por las coordenadas x=120, y=110, con un radio de 10.

10 Una vez definido el gradiente radial, podemos utilizarlo para rellenar un círculo que representa

una burbuja. Después de las líneas de los pasos anteriores, añade estas otras. ctx.fillStyle = radGrad; ctx.beginPath(); ctx.arc(120, 110, 10, 0, Math.PI * 2, false); ctx.fill(); ctx.stroke();

11 Guarda el archivo HTML y pasa al navegador para ver el resultado de estos cambios:

Un vaso lleno de Coca Cola con una burbuja.



Página 132 de 156

12 Para añadir otra burbuja tenemos que definir otro pincel de gradiente porque las coordenadas

han quedado establecidas en una posición absoluta. Si movemos o cambiamos el tamaño de la

burbuja, tenemos que mover el pincel también. Debajo del código del paso 10, añade estas líneas: radGrad = ctx.createRadialGradient(164, 140, 1, 168, 143, 8); radGrad.addColorStop(0, 'white'); radGrad.addColorStop(0.9, 'rgba(255, 255, 255, 0)'); ctx.fillStyle = radGrad; ctx.beginPath(); ctx.arc(168, 143, 8, 0, Math.PI * 2, false); ctx.fill(); ctx.stroke();


Un vaso lleno de Coca Cola con dos burbujas.

14 Añadiremos una burbuja más para finalizar la composición: debajo del código del paso anterior,

añade estas líneas: radGrad = ctx.createRadialGradient(127, 185, 1, 130, 188, 6); radGrad.addColorStop(0, 'white'); radGrad.addColorStop(0.9, 'rgba(255, 255, 255, 0)'); ctx.fillStyle = radGrad; ctx.beginPath(); ctx.arc(130, 188, 6, 0, Math.PI * 2, false); ctx.fill(); ctx.stroke();


Un vaso lleno de Coca Cola con tres burbujas.

Añadir imágenes

Podemos utilizar una función muy sencilla, llamada drawImage para dibujar una imagen en el canvas. La parte más complicada es asegurarnos de que cuando llamemos a la función, le da tiempo suficiente al navegador para descargar la imagen externa. Una vez que la tiene disponible, la función



Página 133 de 156

drawImage nos ofrece una gran flexibilidad a la hora de determinar el tamaño de la imagen y el sitio donde se mostrará.

1 En la carpeta HTML5_05lessons, abre el archivo 05_addingimages.html y guarda una copia en

esa misma carpeta con el nombre 05_addingimages_work.html. El archivo está preparado como

copia de la plantilla original del canvas que utilizábamos en la primera parte de esta lección.

2 Visualiza desde el sistema operativo el archivo fishlake.jpg que hay en la carpeta images para

que veas la imagen que vamos a utilizar en este ejercicio.

3 En la sentencia if, detrás de la declaración de la variable ctx añade el código siguiente: var img = new Image(); img.onload = function(){ } img.src = 'images/fishlake.jpg';

La primera línea declara un nuevo objeto de tipo imagen y la segunda define una función para el

evento onload de la propia imagen. En la última línea se indica el URL del archivo de imagen a

utilizar. Una vez que el navegador ha descargado la imagen, hace una llamada a la función de la

segunda línea.

4 Dentro de los símbolos de llaves ({, }) de la función onload, añade este código marcado en rojo: img.onload = function(){ ctx.drawImage(img, 0, 0); }

Esta instrucción le indica al canvas que tiene que reproducir la imagen en las coordenadas 0,0.

5 Guarda el archivo HTML y ábrelo en el navegador para ver cómo queda después de estos

cambios:

La imagen original aparece está recortada.

La imagen aparece en pantalla, pero recortada porque el tamaño original del archivo es mayor que

el tamaño del canvas.

6 Para cambiar el tamaño de la imagen y que quepa en el espacio disponible, vamos a añadir a la

función drawImage una anchura de destino de 300 y una altura de 200 pixels. Modifica la línea que

has escrito en el paso cuatro añadiendo estos dos nuevos argumentos a la función: ctx.drawImage(img, 0, 0, 300, 200);

Con ello le indicamos al canvas que tiene que mostrar la imagen en la posición 0,0 y alterar su

tamaño para conseguir una viñeta de 300x200 pixels.

7 Guarda el archivo HTML y visualízalo en el navegador para comprobar el efecto de este cambio:



Página 134 de 156

La imagen del lago después de cambiar el tamaño para que quepa en el espacio disponible.

8 La última variación que haremos sobre la función drawImage es definir la posición de inicio, la

anchura y la altura junto con la posición de destino, anchura y altura. Modifica la misma línea del

paso cuatro de esta manera: ctx.drawImage(img, 287, 132, 100, 100, 0, 0, 300, 300);

Con este cambio le estamos indicando al canvas que tiene que mostrar la imagen en la posición 0,0,

con una anchura y altura de 300 pixels, utilizando una porción rectangular de la imagen original que

empieza en la posición (287,132) y con una anchura y altura de 100 pixels.

9 Guarda el archivo HTML y vuelve al navegador para visualizar la página HTML y comprobar el

efecto de este cambio.

Esta técnica de ampliación de imágenes no es perfecta, ya que el resultado suele presentarse

pixelado. En este caso lo vemos solo con fines de demostración.

La imagen del lago, después de ampliar una parte concreta .

Uso de las transformaciones

Las transformaciones, combinadas con los estados de dibujo del Canvas nos permiten crear diseños complejos y dinámicos. Como hemos visto en apartados anteriores de esta lección, los cambios globales como los que provocan strokeStyle, fillStyle y lineWidth, se guardan en distintos niveles de cambio de estado que podemos guardar y recuperar más tarde. Los tres tipos de transformaciones (cambio de escala, rotaciones y traslaciones) también se guardan en niveles de cambios de estado globales y se pueden utilizar fácilmente si sabemos cómo hacerlo, empleando las funciones save y restore.

1 En la carpeta HTML5_05lessons, abre el archivo 05_usingtransforms.html y guarda una copia

en la misma carpeta con el nombre 05_usingtransforms_work.html. El archivo muestra cinco

cuadrados negros en fila, dentro del canvas.

2 Abre el navegador y muestra la página para ver los cuadrados. En realidad, aunque son figuras

cuadradas, son "rectángulos" (de lados iguales). Aquí los consideraremos "rectángulos".



Página 135 de 156

Cinco rectángulos.

3 Después del comentario relativo al rectángulo 1 y antes del comentario del rectángulo 2, añade

esta línea de código indicada en rojo: //rectangle1 ctx.fillRect(30, 120, 40, 40); ctx.translate(0, 20); //rectangle2 ctx.fillRect(80, 120, 40, 40);

La transformación de traslación provoca un desplazamiento para cualquier instrucción posterior,

basada en el primer parámetro que corresponde con el valor de desplazamiento sobre el eje X, y el

segundo parámetro que es el valor de desplazamiento sobre el eje Y.

4 Guarda el archivo HTML y pasa al navegador para ver el resultado de este cambio.

Los cuatro rectángulos siguientes se han desplazado hacia abajo, al aplicar el desplazamiento

sobre el eje Y.

5 Como ves, la transformación de traslación se aplica a todas las instrucciones que aparecen a partir

de ella. Del comentario del rectángulo 1 y antes del código que has escrito en el paso 3, añade la

siguiente línea, para que el código quede así: //rectangle1 ctx.fillRect(30, 120, 40, 40); ctx.save(); ctx.translate(0, 20);

6 Después del comentario del rectángulo 4 y antes del rectángulo 5, añade la línea indicada aquí en

rojo: //rectangle4 ctx.fillRect(180, 120, 40, 40); ctx.restore(); //rectangle5 ctx.fillRect(230, 120, 40, 40);

Con estos cambios, lo que hacemos es que antes de añadir la transformación de traslación,

guardamos una "instantánea" del estado global del canvas. Después de dibujar el cuarto rectángulo



Página 136 de 156

recuperamos el estado global del canvas a la situación que teníamos antes de que se aplicase la

transformación.

7 Guarda el archivo HTML y vuelve al navegador para visualizar la página y comprobar el efecto

de estos cambios.

Ahora, solo los tres rectángulos centrales se desplazan hacia abajo sobre el eje vertical.

8 Vuelve al editor, y después del comentario del rectángulo 2 y antes del rectángulo 3, añade estas

dos líneas: ctx.save(); ctx.rotate(0.19);

La primera guarda otra vez una captura de los valores globales de estado del canvas. La segunda

añade una transformación de rotación donde el parámetro corresponde al valor en radianes del giro

que queremos aplicar a la figura.

9 Guarda al archivo HTML y visualízalo en el navegador para comprobar los cambios.

Los cuatro últimos rectángulos aparecen más abajo y en el centro, dos de ellos girados levemente.

Al llamar a la función save dos veces y solo una a la función restore, el último rectángulo queda

afectado por la transformación de traslación, pero no por la de rotación.

10 En el editor, detrás del comentario del rectángulo tres y antes del rectángulo 4, añade esta línea: ctx.restore();

11 Guarda el archivo HTML y vuelve al navegador para ver los cambios en la página.



Página 137 de 156

Tres rectángulos desplazados hacia abajo y uno de ellos girado

12 Debajo de la función restore del paso 6 y antes del rectángulo 5, añade esta línea: ctx.scale(0.5, 0.7);

13 Guarda de nuevo el archivo y visualízalo en el navegador:

Tres rectángulos desplazados hacia abajo, uno rotado y otro con un cambio de escala.

Creación de un bucle de dibujo

Ahora que tienes unas nociones básicas de dibujo con el canvas, vamos a ver la parte "dinámica" de este elemento. Ciertas funciones de JavaScript como setInterval, nos permiten llamar de manera reiterada a una función de dibujo. En cada llamada podemos modificar ligeramente algún parámetro de la figura y con ello se genera la ilusión de animación.

1 En la carpeta HTML5_05lessons, abre el archivo 05_drawingloop.html y guarda una copia del

mismo con el nombre 05_drawingloop_work.html. Este archivo contiene un código que dibuja un

bonito cielo nocturno con un platillo volante.

2 Abre el navegador para ver la composición inicial.

Un cielo nocturno y un platillo volante.

3 Revisa el código JavaScript que genera el bucle de dibujo.

Página 138 de 156

Como sucedía en los apartados anteriores, el evento onload del cuerpo de la página llama a la

función setup que abre el objeto de imagen y descarga el archivo ufo.png. Fíjate bien en que las

variables ctx e img inicialmente se declaran fuera de la función setup. Así conseguimos que estas

variables puedan utilizarse desde otras funciones, en este caso las funciones draw y

drawbackground.

Después de que se abre la imagen podemos utilizar la función setInterval para llamar a la función

draw cada 36 milisegundos.

La función draw después llama a la función drawbackground que se encarga de dibujar el cielo y

las estrellas. Acto seguido, llega al comentario de "ufo" y a partir de ahí empieza a dibujar el

platillo volador.

4 Debajo de la línea donde se define la variable img y antes de la función setup, añade las líneas de

código que se muestran en rojo aquí: <script type="text/javascript"> var ctx; var img; var x = 0; var y = 40;

Estas variables se utilizan para cambiar la posición del platillo volante, pero tendremos que

modificar la función drawpara que utilice estas nuevas variables.

5 En la función draw cambia drawImage para que utilice estas nuevas variables y actualice el valor

de x de la siguiente manera: function draw() { drawBackground();  ctx.drawImage(img, x, y); x += 1; }

6 Guarda el archivo HTML y vuelve al navegador para comprobar el resultado de estos cambios. El

platillo volador se mueve ahora lentamente por el canvas.

El platillo volante moviéndose por el cielo nocturno.

7 Para repetir la acción y que el platillo volador vuelva a su sitio cuando se sale del área visible,

tenemos que reiniciar la variable x en el momento en que su valor supere la anchura del canvas.

Además, podemos variar la velocidad de desplazamiento si aumentamos el incremento de la

variable x de esta forma:



Página 139 de 156

x += 3; if(x > 300){ x = -50; }

El valor de la variable x se reinicia a –50 en lugar de cero porque tenemos que tener en cuenta el

tamaño de la propia imagen del platillo volante (50 pixels).

8 Guarda el archivo HTML y vuelve al navegador para comprobar el efecto de estos cambios.

Cuando el platillo volante llega al borde derecho del canvas, desaparece y reaparece luego en el

lado izquierdo.

El platillo volante se mueve por el cielo, sale por el lado derecho y regresa por el izquierdo

9 Para animar imágenes podemos utilizar también la función Math.random de JavaScript. Por

ejemplo, podemos cambiar el valor de la variable y de forma aleatoria, y así nuestro platillo

volador, al desaparecer por el lado derecho, volverá por el izquierdo en un lugar imprevisible. En

la sentencia if que utilizamos para reiniciar la variable x, inserta la línea que aparece aquí en rojo: x += 3; if(x > 300){ x = -50; y = Math.random() * 300; }

Math.random devuelve un número aleatorio entre 0 y 1 que debe multiplicarse por el número

máximo que queremos que nos devuelva. En este caso es 300, que es la altura del canvas.

10 Guarda el archivo HTML y vuelve al navegador para ver el efecto de este cambio. El platillo va

moviéndose por el cielo en distintas alturas de forma aleatoria.

El platillo se desplaza cambiando de altura a cada ciclo.

Dibujo de gráficas con Canvas



Página 140 de 156

El canvas no solo nos permite diseños estáticos, sino también mostrar contenidos cuya forma puede venir derivada de datos externos. En la siguiente práctica vamos a crear un gráfico de barras tomando como fuentes de datos una matriz simple.

1 Abre el archivo 05_graphing.html en el editor. Guarda una copia en la misma carpeta con el

nombre 05_graphing_work.html. Como ves, en el código de este archivo hay una matriz de datos

que ya hemos definido con una serie de objetos que representan cada uno de los componentes que

vamos a dibujar en el diagrama de barras.

var sampleData = [ { label:"Profit", value: 1200 }, { label:"Expenses", value: 800 }, { label:"Budget", value: 1000 } ];

La matriz se compone de tres objetos, cada uno compuesto a su vez por una etiqueta y un valor. La

propiedad "label" contiene el nombre de cada componente. La propiedad "value" define el valor de

ese componente, y es el número que utilizaremos en esta práctica para calcular el tamaño relativo

de cada barra dentro del diagrama.

2 Añade las siguientes variables para guardar información de color y formato necesaria para el

gráfico, directamente debajo de la matriz de datos que hemos comentado en el paso anterior.

var colors = ["rgb(255, 0, 0)", "rgb(0, 255, 0)", "rgb(0, 0, 255)"]; var margin = 30; var spacing = 5; var labelFont = "12px sans-serif";

3 En la función window.onload que ya viene definida dentro del archivo HTML, añade este código

para indicar el estilo de la fuente y su alineamiento dentro del canvas (las líneas en rojo): window.onload = function() { var canvas = document.getElementById('barGraph'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.font = labelFont; ctx.textAlign = "center"; } }

4 Justo debajo de ese mismo código, incluye tres nuevas variables que van a guardar valores

temporales (las indicadas en rojo): ctx.textAlign = "center"; var value, label, highest = 0;



Página 141 de 156

5 Después necesitaremos establecer el valor máximo dentro de nuestra matriz de datos para poder

dibujar las barras correctamente. Añade este bucle justo debajo del código que acabas de escribir en

el paso anterior, para calcular el valor más alto.

for( var i = 0; i < sampleData.length; i++ ) { value = sampleData[i].value; if( value && value > highest ) highest = value; }

La variable highest va a contener el valor más elevado de la serie de datos de nuestra matriz de

ejemplo.

6 Para recordar los valores de medida y posición de cada una de las barras que deben dibujarse,

añade un objeto "bar" que va guardar los valores de posición x e y, la anchura y la altura de cada

barra. Este código debe añadirse justo debajo del bucle del paso anterior.

var bar = { x: margin, y: canvas.offsetHeight - margin, width: (canvas.offsetWidth - margin * 2 - ( spacing * ( sampleData.length - 1 ) ) ) / sampleData.length, height: 0 };

En esta práctica, todas las barras del diagrama tienen la misma anchura. Esta anchura la calculamos

dividiendo el ancho total del canvas por el número de elementos de nuestra matriz, añadiéndole

todos los márgenes y espacios necesarios. El valor vertical (y) se especifica a partir del borde

inferior del canvas, puesto que es donde se empiezan a dibujar las barras.

7 A continuación vamos a crear un bucle para dibujar cada una de las barras del gráfico.

Guardamos la etiqueta y el valor del elemento en curso dentro de variables temporales y cambiamos

el valor de fillColor activo del canvas a un color distinto, recorriendo la matriz de colores definida

anteriormente. Este código deberás añadirlo directamente después del que has escrito en el paso

anterior.

for( i = 0; i < sampleData.length; i++ ) { value = parseInt(sampleData[i].value); label = sampleData[i].label; ctx.fillStyle = colors[ i % sampleData.length ]; }

8 La altura de cada barra se obtiene calculando la proporción entre la barra más grande y la altura

del canvas. La altura debe ser un valor negativo ya que las barras se vana dibujar desde abajo hacia

arriba partiendo de la base del canvas. Añade este código (la línea destacada en rojo) dentro del

bucle del paso anterior: ctx.fillStyle = colors[ i % sampleData.length ]; bar.height = -(canvas.offsetHeight / highest * value - margin * 2); }

9 Lo siguiente que necesitamos es desplazar el puntero de dibujo un poco para separar cada barra

con respecto a la anterior, y darles un pequeño espacio entre medias, a fin de que aparezcan como

columnas verticales independientes. Aumenta el valor de la posición horizontal para cada barra



Página 142 de 156

añadiendo a su valor de x la anchura de cada columna más el tamaño en pixels del espacio de

separación. Esto lo hace la línea destacada en rojo: bar.height = -(canvas.offsetHeight / highest * value - margin * 2); bar.x += bar.width + spacing; }

10 Escribe la línea siguiente directamente encima de la que acabas de escribir en el paso anterior

para dibujar las barras (la línea en rojo). ctx.fillRect( bar.x, bar.y, bar.width, bar.height ); bar.x += bar.width + spacing;

11 Guarda el archivo y ábrelo ahora en el navegador. Podrás ver tres barras con tres colores

distintos.

El gráfico muestra los valores en forma de barras, pero no incluye etiquetas.

Creación de las etiquetas

Para que el diagrama de barras sea realmente útil tendremos que añadir diversos indicadores visuales que añadan un contexto, tanto para conocer a qué dato refiere cada barra como para saber el valor a que corresponde. Estas etiquetas deben obtenerse a partir del origen de datos.

1 Tras la línea de código añadida en el paso anterior, escribe la siguiente línea de código que

genera una etiqueta de texto debajo de cada barra, con el nombre de la columna. Es la línea

indicada en rojo aquí: ctx.fillRect( bar.x, bar.y, bar.width, bar.height ); ctx.fillText( label, bar.x + bar.width/2, bar.y + spacing + parseInt(labelFont) ); bar.x += bar.width + spacing;

La función fillText empezará a escribir en el centro de la columna. Se muestra correctamente en

pantalla al aplicarse el alineamiento centrado del texto que hemos visto ya en prácticas anteriores.

El espacio vertical se calcula a partir de la altura de la fuente.

2 Guarda el archivo y visualízalo en el navegador. Los colores de las etiquetas coinciden con los de

las barras correspondientes.



Página 143 de 156

Cada barra tiene ahora una etiqueta debajo que sirve para identificarla.

Pero ahora, aunque las columnas tienen nombre no sabemos realmente qué valores representan

estas barras en términos absolutos. Tendremos que añadir otra serie de etiquetas, en el lado

izquierdo, para representar la escala de valores empleada.

3 Debajo de las llaves que delimitan el bucle, añade esta línea de código para reiniciar el color de

la fuente del canvas a negro otra vez (la línea destacada en rojo aquí). for( i = 0; i < sampleData.length; i++ ) { ... } ctx.fillStyle = "rgb(0,0,0)";

Dibujar textos en vertical seguramente acabará siendo más fácil en el futuro, pero en el momento de

redactar este manual, la forma más sencilla de rotar textos consiste en rotar el propio canvas. Por

suerte, el canvas nos permite guardar su estado previo, así que solamente tenemos que rotarlo de

forma temporal.

4 Creamos un bucle sencillo que se ejecutará tres veces, una por cada barra. Este bucle debe

aparecer debajo del código que hemos añadido en el paso anterior.

for( i = 0; i < 3; i++ ) { }

5 Dentro de este bucle vamos a guardar el estado del canvas antes de aplicar cualquier rotación, lo

que hacemos con la siguiente línea (marcada en rojo). for( i = 0; i < 3; i++ ) { ctx.save(); }

6 Vamos a crear una sentencia switch debajo de esta línea. Esta sentencia switch ejecuta una

acción distinta dependiendo de la etiqueta que vayamos a dibujar (es el código en rojo). for( i = 0; i < 3; i++ ) { ctx.save();



Página 144 de 156

switch( i ) { } }

7 Dentro de la sentencia switch, añade una instrucción case para la primera etiqueta (que se

escribirá en la parte inferior del gráfico), la cual va a mostrar el número cero. for( i = 0; i < 3; i++ ) { ctx.save(); switch( i ) { case 0: label = "0"; ctx.textAlign = "right"; ctx.translate( margin-spacing-parseInt(labelFont), canvas.offsetWidth - margin ); break; } }

Te habrás dado cuenta de que el canvas se desplaza al ejecutar la sentencia case. Aunque no es

absolutamente necesario, esto facilita mucho la tarea de dibujar textos en vertical.

8 Debajo de la llave de cierre de la sentencia switch vamos a añadir una instrucción para rotar el

canvas 90 grados con la línea de código que se indica aquí en rojo: for( i = 0; i < 3; i++ ) { ctx.save(); switch( i ) { ... } ctx.rotate( Math.PI/2 );

9 Ahora, con el canvas girado y colocado, solo tenemos que escribir el texto en él. Añade estas

líneas de código que figuran aquí en rojo, justo a continuación de la línea que has escrito en el paso

anterior para dibujar texto en el punto donde dejamos nuestro "puntero de dibujo" y después

devolvemos al canvas a su estado anterior. for( i = 0; i < 3; i++ ) { ... ctx.rotate( Math.PI/2 ); ctx.fillText( label, 0, 0 ); ctx.restore(); }

10 Aunque se mostrará una de las etiquetas, las otras dos aún no están preparadas. Añade dos

instrucciones "case" al selector "switch" que has modificado en el paso 7 para indicar las

ubicaciones y los textos de las otras dos barras (escribe el código señalado en rojo): switch( i ) { case 0: label = "0"; ctx.textAlign = "right"; ctx.translate( margin-spacing-parseInt(labelFont), canvas.offsetWidth - margin ); break; case 1: label = (highest/2).toString(); ctx.textAlign = "center";



Página 145 de 156

ctx.translate( margin-spacing-parseInt(labelFont), canvas.offsetHeight /2 ); break; case 2: label = (highest).toString(); ctx.textAlign = "left"; ctx.translate( margin-spacing-parseInt(labelFont), margin ); break; }

11 Guarda el archivo y comprueba el resultado en el navegador. Ahora ya tenemos un diagrama de

barras completo creado a partir de un grupo de datos de ejemplo.

La altura de las columnas ahora se puede comparar con una escala en el lado izquierdo.

Recursos disponibles para saber más sobre Canvas

Las capacidades del elemento canvas han generado una gran expectación entre la comunidad de desarrolladores y diseñadores web. Aquí

te indicamos algunos recursos que te ayudaran a investigar más a fondo las posibilidades de este elemento de HTML5.

AI->Canvas

Es un complemento para Illustrator que nos permite exportar creatividades desde la aplicación y utilizar el código canvas resultante en

nuestras páginas web. Incluso dispone de soporte integrado para animaciones.

http://visitmix.com/work/ai2canvas/

Lucidchart

Esta aplicación web es muy parecida a las aplicaciones de diagramas como Visio, y está totalmente construida con el elemento canvas.

Como extra, podemos exportar los diseños que generemos con ella..

http://www.lucidchart.com/documents/demo

Autoestudio



Página 146 de 156

Puedes seguir experimentando con el ejercicio de bucle de dibujo cambiando la imagen animada y la composición del fondo de la escena. Para añadirle más niveles de interacción, cambia la posición de la imagen en movimiento dependiendo de la posición del ratón. Puedes probar a aplicar transformaciones a la composición también, para ver cómo se aplican los efectos en transformaciones múltiples simultáneas.

Repaso

Preguntas

1 ¿Cuáles son los requisitos básicos para dibujar con Canvas en HTML5?

2 ¿Cómo se dibuja un círculo en el Canvas?

3 ¿Cómo podemos definir un color semitransparente?

Respuestas

1 Debe definirse e incorporarse un elemento canvas al cuerpo de la página. Las instrucciones de

dibujo se aplican después utilizando una referencia al Contexto 2D del elemento canvas.

2 Utilizando la función arc podemos dibujar un círculo completo si indicamos los valores

startAngle a cero y endAngle como Math.PI*2. Los ángulos se miden en radianes y la función

Math.PI equivale a 180 grados.

3 La función rgba tiene cuatro parámetros. Los tres primeros representan los valores de color rojo,

verde y azul, y pueden tener un valor entre 0 y 255, que modifica la fuerza de cada componente de

color. El último parámetro (alpha) admite valores entre cero y uno, y determina el grado de

opacidad (cero es transparente y 1 totalmente opaco).



Página 147 de 156

Lección 6: Contenidos multimedia y

funciones Drag y Drop de HTML5

Objetivos:

En esta lección aprenderás a incorporar contenidos multimedia a una página web con las etiquetas <video> y <audio> de HTML5 y a utilizar las funciones “arrastrar” (“drag”) y “soltar” (“drop”) que permiten a los usuarios interactuar visualmente con los objetos de tu sitio web.

Para empezar

En esta lección vamos a trabajar con algunos archivos de la carpeta HTML5_06lessons. Comprueba que has cargado la carpeta HTML5lessons en tu disco duro. Comprueba que has descargado y copiado la carpeta de prácticas de HTML5 en tu ordenador.

Multimedia e interactividad con HTML5

En esta lección aprenderás a integrar contenidos multimedia en tus páginas utilizando los nuevos elementos <video> y <audio> de HTML5. Además podrás aprender los conceptos básicos de la funcionalidad “arrastrar y soltar” (“drag-and-drop”) y cómo se añade a una página web con el API Drag and Drop. Aunque a primera vista puede parecer que estos dos elementos no tienen mucho en común, en ambos se pone en evidencia un aspecto fundamental de HTML5 como es la compatibilidad con los distintos navegadores. En los ejercicios siguientes no solo aprenderás los conceptos básicos de uso de multimedia y de las operaciones “drag and drop”, sino las técnicas necesarias para asegurar la compatibilidad en el mayor número posible de navegadores.

Las operaciones Arrastrar y Pegar en la Web

Las operaciones “arrastrar” (drag) y “soltar” (drop) permiten a los usuarios colocar visualmente ciertos elementos en pantalla en lugar de hacerlo pulsando un botón. En el entorno de las aplicaciones de software y sistemas operativos esta capacidad de arrastre y liberación de objetos está muy asentada y su uso es muy intuitivo. La funcionalidad de arrastrar y soltar objetos en pantalla ha tardado en trasladarse a la web, y las funcionalidades que podemos encontrar en algunos sitios web probablemente se han logrado programando con Javascript o mediante algún complemento para el navegador, por ejemplo hecho con Flash o Silverlight. El API “Drag and Drop” de HTML5 se basa en la implementación original de Internet Explorer. Han cambiado algunos detalles, y ciertos navegadores ofrecen una sintaxis alternativa, pero la API normalizada está a punto de cerrarse ya. En el momento de redactar este manual, no todos los navegadores soportan ciertas funciones de arrastre y pegado. Por ejemplo, algunos navegadores permiten que se puedan seleccionar objetos o archivos desde otras ventanas o aplicaciones y liberarlos en la página web, pero otros navegadores no admiten esto.



Página 148 de 156

Conviene saber que en la mayoría de los navegadores podemos arrastrar por defecto imágenes, enlaces y textos seleccionados. Podemos también, en algunos navegadores, arrastrar archivos y textos seleccionados desde el sistema operativo.

Operaciones Drag and Drop compatibles en distintos

navegadores

En esta lección nos centraremos en las funciones drag-and-drop soportadas en la mayoría de navegadores. Hay algunas diferencias entre los indicadores visuales de una operación drag-and-drop. La funcionalidad de la operación, en general se conserva, con un número reducido de fallbacks.

1 Desde el editor de texto, abre el archivo 06_shopping.html que aparece dentro de la

carpeta HTML5_06lessons. Guarda una copia del archive con el nombre 06_shopping_work.html. Abre este

archive en tu navegador. Podrás ver que en la página tenemos una lista de la compra. El objetivo de esta

práctica consiste en crear una interfaz basada en las operaciones de arrastrar y soltar para comprar artículos.

Hemos creado el código JavaScript inicial para evitarte este trabajo, pero tendrás que añadir el que falta para

conseguir que la página funcione correctamente.

El aspecto inicial de la página.

Mueve el cursor sobre los productos que aparecen en la página. El puntero cambia, y también cambian los

bordes de las imágenes. Así los usuarios saben que pueden arrastrar estas imágenes. Estas reglas se han

indicado en la hoja de estilos base.css utilizando la clase .tile_list que se ha aplicado a los elementos div que

contienen las imágenes de las camisetas. A lo largo de esta lección veremos que se pueden utilizar también

otros indicadores visuales.

2 Pasa al editor de textos y mira dentro de la segunda sección <script>. (El primer elemento <script> se utiliza

para la librería Modernizr , que hace que los navegadores antiguos puedan reconocer los elementos nuevos de

HTML5). Encuentra la variable shoppingcart dentro de la función setup. Esta variable contiene una referencia



Página 149 de 156

al div de la lista de la compra., En tu código utilizarás esta referencia para registrar el div como zona para

soltar los objetos arrastrados.

Añade la siguiente línea de código para evitar el comportamiento por defecto del evento dragenter: function setup(){ shoppingcart = document.getElementById('shoppingcart'); shoppingcart.ondragenter = preventDefault; }

Por defecto, en algunos navegadores el evento dragenter muestra un icono que indica que cierta área no es una

zona donde se pueda liberar un objeto arrastrado. Necesitamos asignar a este evento la

función preventDefault para mantener la consistencia entre los distintos navegadores. El código que se muestra

a continuación ya está añadido a la sección de script y define la preventDefault, que necesita lanzar tres tareas

concretas para evitar la acción por defecto en algunos navegadores:

function preventDefault( event ){ event.stopPropagation(); event.preventDefault(); return false; }

La función stopPropagation evita que otros contenedores respondan al mismo evento.

La función preventDefault evita el comportamiento por defecto de este evento en ciertos navegadores.

Dado que preventDefault es una función de callback de evento, al devolver el valor false evitamos el

comportamiento por defecto en ciertos navegadores.

3 En algunos navegadores el evento dragover muestra un icono parecido al del evento dragenter, indicando

que este contenedor no es una zona donde se puedan soltar objetos. Para evitar el comportamiento por defecto

del evento dragover, añade el código marcado en rojo después de la línea de código del paso anterior. function setup(){ shoppingcart = document.getElementById('shoppingcart'); shoppingcart.ondragenter = preventDefault; shoppingcart.ondragover = preventDefault; }

4 Desplázate hacia la mitad inferior del código HTML de la página. Para permitir el arrastre desde la lista que

contiene las imágenes de las camisetas, añade el atributo ondragstart al DIV que tiene asignada una clase CSS

llamada tile_list, y asigna al atributo el valor que se indica aquí: <div class="tile_list" ondragstart="dragStarted(event);">

En el momento de redactar este manual, el API Drag and Drop no está diseñada para realizar operaciones de

arrastrar y soltar. El API Drag and Drop API permite a los desarrolladores responder a los eventos, pero no

moverlos realmente. La siguiente implementación aporta las capacidades de arrastre y pegado necesarias para

poder hacer una aplicación de carrito de la compra sencilla.

5 Dentro de la función dragStarted, ya definida para esta actividad, añade la siguiente línea de código para

mantener una referencia al elemento arrastrado por el usuario dentro de la variable dragging predefinida: function dragStarted( event ){ dragging = event.target; }

6 Para implementar la actividad de soltar en nuestra lista de la compra, utiliza la función dragDrop de modo

que responda al evento drop de la lista de artículos elegidos: function setup(){ shoppingcart = document.getElementById('shoppingcart'); shoppingcart.ondragenter = preventDefault;



Página 150 de 156

shoppingcart.ondragover = preventDefault; shoppingcart.ondrop = dragDrop; }

7 Dentro de la función dragDrop predefinida, introduce la siguiente línea de código para añadir a la lista de la

compra el objeto que se ha arrastrado hacia él function dragDrop(event){ addToCart( dragging, 1 ); }

Cómo hacer que un objeto sea arrastrable en HTML5

En algunos navegadores, como Internet Explorer 10, podemos por defecto, arrastrar imágenes, enlaces y

textos seleccionados y mantener su incapacidad para soltarlos en otros lugares, y todo ello sin utilizar

callbacks de Javascript. Para que el usuario pueda arrastrar objetos hacia otros elementos, hay que añadirles

el atributodraggable con el valor true, como se hace en este ejemplo:

<li draggable="true">Elemento 1 de la lista</li>

8 En el menú Archivo, selecciona Guardar y visualiza la página en el navegador. Dependiendo del navegador

que utilices, verás resultados muy distintos si arrastras una de las imágenes dentro de la lista de la compra. en

los navegadores Webkit, como Safari 5 o Chrome 11, el efecto que obtenemos es el esperado y la imagen

aparece en la lista de la compra. En otros navegadores como Firefox 4, el comportamiento por defecto de una

imagen arrastrada a la zona de destino consiste en que esa imagen se abre en la misma ventana donde aparece

la zona de destino. Para asegurarnos de que este comportamiento queda anulado, debemos volver al editor y

añadir la siguiente línea de código: function dragDrop(event){ addToCart( dragging, 1 ); return preventDefault(event); }

9 Guarda el archive y vuelve a probarlo e el navegador. Si arrastras las camisetas hacia la zona de la lista,

quedarán añadidas a la lista de artículos comprados.



Página 151 de 156

La lista de la compra mantiene la relación de elementos arrastrados hacia él, los visualiza y muestra un

enlace para proceder a la siguiente fase de la compra (“checkout”).

Incorporar elementos de audio y vídeo

Añadir video y sonido a una página web es una manera de hacerla más atractiva. Los contenidos multimedia captan la atención del visitante y nos permiten llegar a audiencias que, muy a menudo, adoptan una actitud de rechazo hacia las páginas con texto abundante. En HTML5 se resuelve directamente la construcción de páginas con audio y vídeo. Antes de la llegada de HTML5 dependíamos del uso de complementos instalables, como Flash, QuickTime o Silverlight para poder mostrar contenidos de vídeo. Con HTML5 se resuelve esta necesidad ya que especifica un elemento HTML llamado <video> que funciona de manera nativa en el navegador y se integra con Javascript.

En esta sección aprenderás a incorporar vídeo a tu página web, con la posibilidad de que el vídeo empiece a reproducirse automáticamente al cargarse la página, y también aprenderás a utilizar los controles de reproducción que nos ofrecen los propios navegadores.

1 Desde la carpeta HTML5_06lessons, abre la página 06_video.html y guarda una copia de este

archivo como 06_video_work.html. En la línea 8 dentro del elemento <body>, añade esta línea de

código: <video src='videos/BigBuck.mp4' autoplay></video>

Como ya veíamos en el caso del elemento imagen, el elemento video tiene un atributo src cuyo

valor apunta a la ubicación del archivo de vídeo que debe reproducir. El atributo autoplay le indica

al navegador que debe empezar a reproducir el vídeo en cuanto haya cargado la página. Guarda el

archivo y visualízalo en Internet Explorer 9. Podrás ver una página parecida a la que se muestra en

la siguiente figura. El vídeo debe empezar a reproducirse automáticamente.

En versiones antiguas de Internet Explorer, Firefox o Chrome, no vas a ver probablemente ningún

vídeo, ¡pero este problema se resolverá en seguida!



Página 152 de 156

El elemento video tal y como se muestra en Internet Explorer 9.

Puesto que la forma de declarar el vídeo en HTML5 es estándar, los desarrolladores de navegadores

son los responsables de que cada navegador siga las directrices del estándar y muestre el vídeo

correctamente. Como desarrollador Web, tu trabajo consiste en centrarte en los contenidos y las

personalizaciones, y ahora vamos a ver algunas maneras en que podemos hacer esto.

2 Cierra el navegador y vuelve al editor de texto. Para tener un mayor control sobre la reproducción

del vídeo, elimina el atributo autoplay y añade el atributo controls, con lo que la línea de código

quedaría así (destacando los cambios en rojo): <video src='videos/BigBuck.mp4 controls></video>

Guarda el archivo y ábrelo en el navegador (dependiendo de la configuración de seguridad del

navegador, puede que tengas que pulsar en el botón “Aceptar contenido bloqueado”). Pon el cursor

sobre la película y aparecerán los controles por defecto. Los controles estándar de Internet Explorer

9 para vídeo son un botón de Pausa/Reproducción, la barra de avance (donde podemos mover el

punto de reproducción pulsando y arrastrándolo sobre la línea de tiempo hacia adelante y atrás), el

botón de silencio (mute) y el deslizante de volumen. Ten en cuenta que estos controles nativos

tienen un aspecto diferente en cada familia de navegadores web.

La barra de controles de video por defecto de Internet Explorer 9.

3 Pulsa en el botón de reproducción (“play”) y el vídeo debe empezar a reproducirse. Arrastra el

puntero de reproducción sobre la barra y el vídeo avanzará o retrocederá en consecuencia. Si

vuelves a cargar la página, verás que ahora ya no aparece el atributo autoplay y el primer frame del



Página 153 de 156

vídeo es un rectángulo negro que aparece en la pantalla y permanece ahí hasta que el vídeo empieza

a reproducirse. Si quieres que en su lugar aparezca una imagen como vista previa personalizada en

vez de este recuadro negro, debes añadirle el atributo poster. Cierra el navegador y vuelve al editor

de texto.

4 Inserta el atributo poster después del atributo controls y asígnale el valor "poster320.png" tal y

como se ve aquí (destacado en rojo): <video src='videos/BigBuck.mp4' controls poster='poster320.png'> </video>

Al añadir el atributo poster le estamos indicando al navegador que cargue una imagen y la ponga

sobre el elemento de vídeo. Cuando empiece a reproducirse el vídeo, esta imagen desaparecerá.

Guarda el archivo y vuelve a abrirlo con el navegador. Antes de pulsar el botón “permitir

contenidos bloqueados” podrás ver en pantalla la imagen indicada como “poster” en vez del cuadro

negro.

Ahora muestra una imagen de vista previa al cargar la página.

5 Vuelve al editor de texto y añade los siguientes atributos y valores de anchura y altura: <video src='videos/BigBuck.mp4' controls poster='poster320.png' width='320' height='180'>

Por defecto, el elemento video modifica su tamaño para adecuarse a las dimensiones originales del

archivo de vídeo. Para controlar el tamaño en pantalla se utilizan los atributos width y height. En

general se considera buena práctica que ambos valores coincidan con las dimensiones originales del

vídeo. También podemos ampliar el tamaño en pantalla cambiando estos parámetros, pero no se

recomienda. Si ampliamos a mano el tamaño, la calidad de la imagen puede degradarse. Si

reducimos su tamaño, aunque su calidad puede que no se vea afectada, estamos obligando al

usuario a cargar un archivo de tamaño mayor del necesario. Una solución más correcta sería

disponer del mismo vídeo en dos formatos, uno más grande y otro más pequeño para cada caso.

6 Guarda el archivo.



Página 154 de 156

Otros atributos del elemento video

Aparte de autoplay, controls y poster, el elemento video tiene algunos otros atributos que podemos utilizar:

• audio: este atributo nos permite silenciar el audio del vídeo. Actualmente el único valor soportado es “muted” (silencio).

• loop: Este atributo hace que el vídeo vuelva a reproducirse desde el principio cuando llega al final. • preload: Este atributo hace que el vídeo empiece a cargarse al mismo tiempo que se carga la página (aunque

no se reproduzca de forma automática), de modo que se evita la latencia –es decir, el tiempo de retardo- que requiere su descarga cuando el usuario pulsa el botón Play.

Compatibilidad con los distintos navegadores

La especificación de HTML5 no define un códec estándar para no limitar los codecs existentes o futuros que pueden utilizarse para reproducir video, disponer de esta flexibilidad ha supuesto que no todos los navegadores compatibles con HTML5 soporten los mismos codecs.

Cada archivo de vídeo funciona como un contenedor de múltiples archivos que contienen el vídeo, audio e información de control en algunos casos. La opción más popular y que más aceptación tiene en la industria es el formato MP4, y más concretamente un contenedor de vídeo MP4, el estándar ISO/IEC 14496-14:2003, que utiliza el códec de vídeo H.264 y el códec AAC para el audio. Ambos códecs, el H.264 y AAC se ofrecen además en múltiples niveles de perfil, que se utilizan para conseguir distintos grados de calidad y compresión. Para poder servir vídeos en la mayor cantidad posible de dispositivos y navegadores nuestra recomendación es utilizar el perfil de línea de base de vídeo H.264 y el perfil AAC de “baja complejidad”. También existe el formato Ogg que es un contenedor de vídeo mantenido por la fundación Xiph. Los archivos MP4 codificados con este perfil están soportados en las últimas versiones de Internet Explorer, Safari, iOS y Android.

Si conseguimos que nuestros vídeos estén disponibles tanto en formato MP4 como Ogg, tendremos la opción de llegar a la mayoría de los usuarios que emplean dispositivos y navegadores modernos. En esta sección vamos a ver cómo se incorporan múltiples archivos de origen a un elemento de vídeo, lo que permite al navegador seleccionar el archivo adecuado dependiendo del formato que soporte.

1 En tu archivo de prácticas 06_video.html elimina del elemento video todo el atributo src

(incluyendo la referencia al archivo BigBuck.mp4).

2 Inserta un elemento <source> como hijo del elemento <video> y añade el atributo src al

elemento source con el valor 'videos/BigBuck.mp4' como se indica aquí (destacado en rojo) <video controls poster='poster320.jpg' width='320' height='180'> <source src='videos/BigBuck.mp4' /> </video>

3 Inserta otro elemento <source> hijo debajo del anterior, esta vez con un atributo src que apunte al

archivo videos/BigBuck.ogg. as (como aparece indicado en rojo aquí): <video controls poster='poster320.jpg' width='320' height='180'> <source src='videos/BigBuck.mp4' /> <source src='videos/BigBuck.ogg' /> </video>



Página 155 de 156

4 Guarda el archivo y actualiza la página en el navegador. Cuando se abre este código HTML en

Internet Explorer o Safari, ambos utilizan el primer archivo de origen ya que soportan el formato

MP4. Cuando se abre en Chrome, Firefox u Opera, dado que no soportan MP4 el archivo que se

utiliza como origen es el segundo. El navegador va comprobando los distintos archivos fuente por

el mismo orden en que se enumeran dentro del elemento vídeo, hasta encontrar el primero

compatible, que es el que empleará para su reproducción.

Por ejemplo, si un usuario con Firefox abre esta página, el navegador debería descargar una porción

suficiente del archivo con formato MP4 para ver si puede reproducirlo. Cuando detecta que no

puede hacerlo, el propio navegador salta al siguiente archivo fuente, que en este caso es un archivo

en formato Ogg, que sí está soportado en Firefox. Para ayudar a los navegadores a detectar los

archivos compatibles y evitarle al usuario la espera mientras descarga archivos no soportados,

podemos emplear el atributo type del elemento source. El valor del atributo type describe el

formato del archivo y los códecs de vídeo y audio que utiliza.

5 Añade un atributo type al primer elemento source para indicar el formato de archivo MP4,

utilizando la sintaxis siguiente: <source src='videos/BigBuck.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>

Con esto le decimos al navegador que el archivo “BigBuck.mp4” está creado en formato MP4, el

vídeo está codificado como H.264 utilizando el perfil de línea de base y el audio va codificado

como AAC con el perfil de “baja complejidad”.

6 Ahora añade el código siguiente en la línea source del formato Ogg: <source src='videos/BigBuck.ogg' type='video/ogg; codecs="theora,vorbis"'/>

Aquí le estamos indicando al navegador que el archivo “BigBuck.ogg” se ha guardado en formato

Ogg, que el video está codificado utilizando el códec Theora y el audio con el códec Vorbis.

Cuando el navegador cargue este código HTML empezará por comprobar la compatibilidad en

función del atributo type y así se ahorra tiempo y ancho de banda, ya que no descarga todos los

archivos. El último paso consiste en añadir un código adicional para navegadores antiguos no

compatibles con HTML5: tenemos que tener preparada una alternativa para cuando carguemos esta

página en un navegador antiguo que no soporte el elemento video en absoluto.

7 Añade un elemento <h1> con un enlace al archivo “BigBuck.mp4” después del segundo elemento

source, tal y como se muestra aquí (destacado en rojo). <video controls poster='poster320.jpg' width='320' height='180'> <source src='videos/BigBuck.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src='videos/BigBuck.ogg' type='video/ogg; codecs="theora, vorbis"'> <h1><a href="videos/BigBuck.mp4">Descarga el video</a></h1> </video>

No vas a poder probar este cambio en el navegador que utilizas ya que –obviamente- soporta el

elemento vídeo, pero si lo cargas en un navegador antiguo incompatible con HTML5, podrás ver

simplemente un enlace que dice “Descarga el vídeo” y el usuario deberá pulsar sobre él para



Página 156 de 156

descargarlo manualmente y reproducirlo utilizando el reproductor de vídeo por defecto de su

sistema.

8 Guarda el archivo.

Cuestionario de repaso

Preguntas

1 ¿Por qué es necesario evitar el comportamiento por defecto y devolver el valor false a la mayor

parte de funciones de callback dedrag-and-drop?

2 Enumera dos atributos que puedes añadir a un elemento <video> que pueden afectar a la forma en

que aparece el vídeo en pantalla.

3 ¿Por qué cuando añadimos la etiqueta video deberíamos usar como fuente un archivo Ogg además

de MP4?

Respuestas

1 El comportamiento por defecto en muchos navegadores consiste en evitar el efecto de drag-and-

drop y mostrar un indicador en pantalla para que el usuario sepa que no todos los contenedores son

posibles destinos de la acción de soltar. Al evitar el comportamiento por defecto aparece un

indicador visual independiente y se activa la funcionalidad de arrastrar y soltar en ciertos

navegadores.

2 El atributo controls nos permite especificar si se mostrarán los controles de reproducción en la

página. El atributo autoplay indica si el vídeo debe empezar a reproducirse de forma automática al

abrir la página. Hay otros atributos también, como width, height, loop, poster, preload yaudio.

3 Aunque MP4 es el formato más utilizado, si queremos que el video pueda verse en la mayoría de

navegadores deberemos incluir Ogg para que los usuarios de Firefox puedan visionar el video.

Curso HTML5

Documents

Transcript of Curso HTML5