Vous êtes sur la page 1sur 157

HTML5 y CSS3

Anls. ABRATTE, Diego Daniel.


MP CPCIPC: 2854

HTML5
Lecciones disponibles:

Leccin 1: Definicin de HTML5 Leccin 2: Conceptos bsicos de HTML, XHTML y CSS Leccin 3: Introduccin a la presentacin en pantalla con CSS Leccin 4: Uso de las etiquetas HTML5 Leccin 5: Trabajar con el Canvas Leccin 6: Contenidos multimedia y funciones Drag y Drop de HTML5

Ver Leccin 1: Definicin de HTML5


Objetivos: En esta leccin los estudiantes aprenden las funcionalidades y caractersticas que forman parte de la especificacin HTML5 y las tecnologas que involucran. Tambin podrn aprender la diferencia entre la sintaxis de HMTL5 y la de HTML4 y/o XHTML 1.0. Por otra parte, al finalizar esta leccin los estudiantes podrn identificar las principales caractersticas 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 tcnicamente forman parte de la especificacin de HTML5 y otras que se consideran tecnologas relacionadas, como la Geolocalizacin, Arrastrar y Soltar y CSS3.

Beneficios de HTML5 Principales caractersticas

o o o o

Nuevos elementos de markup y presentacin Los elementos <video>, <audio> y <canvas> Formularios Web Elementos revisados que se basan en HTML 4.0

Introduccin a las APIs de HTML5 y tecnologas de apoyo

o o o o o o

Geolocation Web Workers Almacenamiento Web CSS3: Animaciones y transiciones CSS3: Fondos, bordes, colores RGBa, gradientes, sombreados y esquinas redondeadas Tipos de letra @font-face para la web

HTML5 todava es un proyecto en fase de desarrollo

o o

Compatibilidad de navegadores Dnde se utiliza HTML5 actualmente

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 1 de 156

Ver Leccin 2: Conceptos bsicos de HTML, XHTML y CSS


Objetivos: En esta leccin los estudiantes aprenden los conceptos bsicos de HTML, XHTML y CSS, necesarios para saber crear la estructura y estilo de sus pginas web. Aprenden cmo se utilizan los tipos de documento (DOCTYPE) para ayudarles a validar sus pginas web y utilizarlos como herramienta de resolucin de errores. En esta leccin, los estudiantes crean una pgina web sencilla que les sirve para saber cmo se insertan imgenes, cmo se crean enlaces y cmo pueden trabajar con hojas de estilos tanto internas como externas.

Introduccin a la sintaxis de HTML

Detalles de la sintaxis XHTML

La funcin de DOCTYPE

Validacin W3C y de pgina

Creacin de una pgina HTML

o o o o

Definicin de elementos HTML Insercin de imgenes en HTML Uso de atributos Creacin de vnculos

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

o o

Aplicar estilos a una cabecera Clases de estilos y el elemento <span>

Tres formas de utilizar los estilos

o o o

Internos Externos En lnea

Cundo utilizar hojas de estilo Internas o externas Creacin de una hoja de estilos externa El concepto de "cascada" de CSS

Ver Leccin 3: Introduccin a la presentacin en pantalla con CSS


Objetivos: En esta leccin los estudiantes aprenden los conceptos bsicos de presentacin de elementos en pantalla con CSS, incluyendo una estructura visual de dos columnas con ancho fijo, utilizando HTML y CSS. Aprenden la funcin de un archivo de reset CSS y cmo se aade a la pgina Web. Esta leccin incluye el uso del elemento <div> y las propiedades float y clear de CSS para crear columnas en la pgina.

El papel del archivo de reset CSS

Aadir un enlace a una hoja de estilos de reset externa

Breve historia de las tcnicas de disposicin en pantalla de las pginas web

Introduccin a las opciones de presentacin de las pginas

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 2 de 156

Creacin de una estructura bsica de dos columnas de ancho fijo con CSS

o o

El elemento DIV Asociacin de IDs y clases CSS con elementos DIV

La propiedad float de CSS

Creacin de columnas con la propiedad float

Uso de la propiedad clear Creacin de una navegacin basada en listas con directivas float Uso de mrgenes y rellenos para controlar la disposicin de los elementos en pantalla Imgenes de fondo con CSS

Decoracin de un pie de pgina con una imagen de fondo

Ver Leccin 4: Uso de las etiquetas HTML5


Objetivos: En esta leccin los estudiantes aprenden a utilizar los nuevos elementos HTML5 para lograr presentaciones en pantalla ms avanzadas. Se revisan aqu los principales elementos de divisin en secciones y tambin se repasan las etiquetas de HTML4 que han sido objeto de actualizacin en HTML5. Los estudiantes aprenden a convertir una pgina existente que emplea elementos HTML4 en una pgina HTML5 sustituyendo elementos <div> por otros nuevos elementos HTML5. Adems, en esta leccin se aprende a trabajar con elementos de formulario HTML5 y a aadir contenidos multimedia con los elementos <video> y <audio>.

Revisin del concepto de semntica de las etiquetas HMTL Fundamentos de HTML5

Uso de la declaracin DOCTYPE de HTML5

Diferentes categoras utilizadas para contenidos HTML5

o o o o o o o

Contenidos de Metadatos Contenidos de Flujo Contenidos de Seccin Contenidos de Cabecera Contenidos de Frase Contenidos embebidos Contenidos interactivos

El nuevo elemento <header>de HTML5

Incorporar soporte para elementos HTML5 en los navegadores

Incorporacin de elementos <nav> de HTML5 Esquema de documentos con HTML5 Incorporacin de otros elementos de seccin de HTML5

o o o

Elemento <section> Elemento <article> Elemento <aside>

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 3 de 156

Elemento <footer>

Otros elementos HTML5

o o o

Elemento <figure> Elemento <figcaption> Elemento <time>

Elementos revisados de HTML 4.0

o o

La etiqueta <b> frente a <strong> La etiqueta <i> frente a <emphasis>

Uso de formularios HTML5

o o o

Tipos de datos de entrada email y url Atributos required y placeholder Atributos autofocus y autocomplete

Uso de los elementos Video y Audio

o o o

Uso del elemento <video> y sus atributos relacionados Uso del elemento <audio> y sus atributos relacionados Aspectos a tener en cuenta sobre los cdecs de vdeo y audio al trabajar con contenidos multimedia

Ver Leccin 5: Uso del elemento Canvas


Objetivos: En esta leccin los estudiantes aprenden en qu consiste el elemento Canvas, el API de dibujo en dos dimensiones que incluye la especificacin HTML5. En este tema se explica cmo se incorporan elementos de diseo grfico a una pgina web, por ejemplo formas, textos, rellenos y trazos de colores, imgenes y animaciones sencillas con Javascript. Esta leccin ensea tambin a los estudiantes los conceptos bsicos de la interactividad con Javascript.

El papel de JavaScript en las aplicaciones HTML5 Conceptos bsicos de JavaScript

o o o

Eventos de JavaScript Ubicacin del cdigo JavaScript en un documento externo El DOM (Document Object Model)

El elemento Canvas

Ventajas del elemento Canvas

Diseo grfico con Canvas

o o o o

Dibujo de trazos Dibujo de rectngulos Dibujo de lneas y crculos Dibujo de curvas

Insercin de textos

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 4 de 156

Colores, estilos y gradientes Insercin de imgenes Creacin de grficos en el Canvas

Uso de arrays de datos

Creacin de animaciones con Canvas y Animation

o o

Uso de transformaciones Creacin de un bucle de dibujo

Ver Leccin 6: Funciones Drag y Drop de HTML5


Objetivos: En esta leccin se ensea el uso de Drag and Drop, un API relacionada con la especificacin 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

Ventajas de las funciones Drag y Drop

Compatibilidad de Drag y Drop entre distintos navegadores

o o o o o o

Uso de la funcin preventDefault Los eventos dragenter y dragover Convertir un elemento en "arrastrable" (draggable) en HTML5 El atributo ondragstart Creacin de la funcin dragStarted Medidas para la compatibilidad con diferentes navegadores

Transferencia de datos con una operacin "Drag-and-Drop"

o o o

Uso del objeto dataTransfer Uso de la funcin setData La propiedad innerHTML

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 5 de 156

Leccin 1: Definicin de HTML


Objetivos:
En esta leccin vamos a descubrir las caractersticas y capacidades que forman parte de la especificacin de HTML5 y sus tecnologas conexas. Podrs conocer tambin los beneficios que aporta HTML5 a los desarrolladores, diseadores de pginas Web y a los usuarios finales.

Para comenzar
En esta leccin no se necesita ningn archivo complementario. Esta leccin es una revisin general de conceptos de HTML y en las siguientes ya se realizarn ejercicios prcticos paso a paso.

Definicin de HTML5
HTML5 es una combinacin de nuevas etiquetas de markup (lenguaje) HTML, propiedades CSS3, JavaScript y algunas tecnologas complementarias de apoyo, pero que tcnicamente son independientes de la propia especificacin HTML5. Por ello vamos a distinguir entre la especificacin HTML5 en s y la familia HTML5. Podemos definir la especificacin HTML5 como nuevos elementos de markup o sintaxis, utilizados por los diseadores para crear pginas web junto con las etiquetas utilizadas a da de hoy. Muchos de estos nuevos elementos ya son conocidos para los diseadores que trabajan con las etiquetas HTML tradicionales, como <p>, <ul> o <div>. Estas nuevas etiquetas suponen para desarrolladores y diseadores, unas herramientas ms avanzadas y se traducen en mejores experiencias para el usuario final. La familia HTML5 incluye las nuevas etiquetas y tecnologas como CSS3, Geolocalizacin, Almacenamiento Web (Web Storage), Web Workers y Web Sockets entre otras. Todas ellas suponen una actualizacin de gran potencia al conjunto de herramientas ya existente, y con ellas se pueden crear pginas web ms sofisticadas y tiles. Los nuevos navegadores incorporan funcionalidades para responder a las expectativas de los consumidores y tambin como fruto de la evolucin natural de la propia tecnologa. A medida que las aplicaciones web van ganando en capacidad de respuesta y velocidad y son capaces de resolver tareas complejas como la edicin de imgenes, representacin de mapas, hojas de clculo o vdeos, 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 programacin 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 ms interesantes, atractivos y tiles.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 6 de 156

historia de HTML5

TML4, que se dio por cerrado en 1998, es el lenguaje de markup que conforma la base de la gran mayora de las pginas web que podemos ver

s diseadores y desarrolladores web han estado utilizando la especificacin HTML 4.01 durante bastantes aos de manera satisfactoria, combin

S para la definicin de estilos y con JavaScript para aadir interactividad a los contenidos.

as la finalizacin de HTML 4.0.1, el W3C continu sus trabajos en consonancia con la evolucin de la web, y comenz con un lenguaje llamad

. Existe una pequea diferencia entre HTML 4.0.1 y XHTML 1.0 (XHTML es un lenguaje ms estricto: por ejemplo, todas las etiquetas deben

nsculas). Uno de los objetivos de XHTML 1.0 era crear un lenguaje de markup que pudiera extenderse y resolver las necesidades de las tecno

uras, por ejemplo para los dispositivos mviles. Muchos sitios web se han creado utilizando XHTML 1.0 como marco de desarrollo y muchos

sarrolladores valoran positivamente sus reglas sintcticas ms estrictas.

paralelo a la adopcin y difusin de XHTML 1.0, se empez con el desarrollo de otro lenguaje, XHTML 2.0, que aada una serie de novedad

ers a las pginas web y que se apoyaba de forma notoria en XML. No obstante, este nuevo lenguaje adoleca de diversos problemas de tipo t

olva adecuadamente las necesidades reales de los desarrolladores.

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

ependiente llamado WHATWG (iniciales de Web Hypertext Application Technology Working Group). Su misin consista en crear una espec

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

stentes.

rante unos dos aos y medio el W3C y el grupo WHATWG trabajaron en paralelo y de manera independiente hasta que en 2006, Tim Berners

la World Wide Web y fundador del W3C anunci que el W3C y WHATWG trabajaran juntos en la elaboracin del estndar.

mo resultado de todo ello, se abandon el desarrollo de XHTML 2.0 y la especificacin HTML 4.0 se reform con el nombre HTML5. No obs

nviene recordar que HTML5 empez siendo Web Applications 1.0, y eso nos da una pista muy clara para entender para qu fue diseado realm

acias a que el W3C tom el liderazgo para el desarrollo de HTML5, ahora los desarrolladores tenemos la garanta de que HTML5 ser realmen

ndar gratuito y con las suficientes garantas de no incurrir en problemas de propiedad intelectual.

HTML5 extiende la definicin de lo que puede hacer una pgina web


A da de hoy HTML no tiene capacidad para reproducir contenidos multimedia, como audio o vdeo, sin un complemento (un "plug-in") como los de AdobeFlash 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 tecnologa. No existe un formato de dibujo nativo en HTML. Los grficos y animaciones se ofrecen en estos momentos en forma de archivos de imgenes o con la ayuda de otros complementos (Adobe Flash, Java, Microsoft Silverlight u otros). En general, cada vez ms gente depende de la web y utiliza aplicaciones web y las expectativas que se generan alrededor de lo que puede (o podra) hacer una pgina web van creciendo da tras da. Esta demanda de los usuarios en favor de un mayor rendimiento y unos sitios web con prestaciones ms avanzadas y completas se ve limitada por el lenguaje HTML que se utiliza actualmente.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 7 de 156

Un sitio como Bing Maps es una aplicacin web de altas prestaciones que podra beneficiarse de las nuevas funcionalidades que incorpora HTML5 En los apartados siguientes vamos a explicar brevemente algunos de los aspectos ms importantes de HTML5.

El lenguaje HTML5
El lenguaje (o "markup") HTML5 incorpora algunas etiquetas nuevas pensadas para hacer que la estructura de la pgina web sea ms lgica y funcional. Antes de HTML5, la estructura de una pgina dependa fuertemente de las etiquetas <div>, generalmente asociadas a una clase CSS o un ID. Por ejemplo, en HTML 4.0 es una prctica comnmente aceptada definir la cabecera de una pgina web de esta forma: <div id="header" > Esta es la cabecera </div> En este caso, el cdigo 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 cdigo CSS podramos tener algo as:

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 8 de 156

#header { width:960px; height:100px; background-color:gray; } El ID utilizado header es arbitrario. Algunos diseadores prefieren nombres como masthead, topsection, o box. En la especificacin HTML5 existe ya una etiqueta llamada <header> que viene a sustituir al elemento <div> de forma que la sintaxis es mucho ms lgica y coherente: <header> Esta es la cabecera </header> En este ejemplo ya podemos aadir 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 difcil de entender si no ests 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 pginas 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 pgina ms consistente y legible. Como puedes ver, HTML5 no sustituye ningn elemento de sintaxis de HTML; simplemente aade 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 diseo visual de toda una pgina web.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 9 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 Leccin 4. Pero antes, en esta Leccin 1 vamos a mostrar una breve resea de las principales novedades que incorpora la sintaxis de HTML5.

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


La especificacin 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 pginas 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 animacin. Esta etiqueta puede servir, adems, como plataforma alternativa para los grficos y animaciones que a da de hoy podemos ver en pelculas Flash. No obstante, existen inconvenientes de cierta consideracin que es preciso resolver.

Elementos <video> y <audio> para incorporar contenidos multimedia


La estructura necesaria para incorporar contenidos de audio o vdeo a una pgina web es bastante sencilla, como podemos ver en el siguiente ejemplo donde aadimos un archivo de vdeo: <video src="catz.mp4" width="400" height="300"></video> Insertar un archivo de audio mp3 en la pgina se hace de forma similar. En el caso del audio y el vdeo podemos aadirle tambin controles de reproduccin y la posibilidad de precarga, utilizando los atributos controls, preload, y autobuffer: <audio src="high_seas_rip.mp3" controls preload="auto" autobuffer></audio> Esta caracterstica de HTML5 es muy til si se compara con los mtodos disponibles hasta ahora. Por ejemplo, para incorporar vdeo con Adobe Flash o Microsoft Silverlight es preciso aadir cdigo de programacin. Aparte, existe una amplia categora de dispositivos mviles 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 simplificacin que suponen las etiquetas <video> y <audio>, en seguida surge la pregunta de cmo vamos a hacer para manejar estos contenidos desde los navegadores anteriores que no reconocen estas etiquetas nuevas. Esta cuestin se ver en detalle en la Leccin 4, "Uso del lenguaje HTML5"

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 10 de 156

Reproductor de video de HTML5 con controles, integrado dentro de una pgina web. No necesita complementos.

El elemento <canvas> para dibujo y animacin


El elemento canvas funciona a modo de superficie de dibujo dentro de una pgina 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 esttica, como .PNG. Podemos tambin utilizar JavaScript o las nuevas funciones de animacin de CSS3 para que los objetos que creamos puedan moverse, desaparecer, cambiar de tamao, etc. Incorporar un elemento canvas a una pgina es muy sencillo: <canvas id="myCanvas"></canvas>

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 11 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 ms sencillos dentro del canvas, un rectngulo negro, el cdigo 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 lneas creamos un rectngulo de color negro con unas dimensiones concretas. El cdigo puede parecer excesivo para un resultado tan simple, pero la etiqueta canvas se limita a presentar el cdigo dentro de un documento HTML y este modelo nos aporta una serie de ventajas. Entre los usos previsibles estn elementos de la interfaz de usuario, como controles de reproduccin, elementos de ilustracin que se pueden animar o visualizacin dinmica de datos como diagramas y grficos. En la Leccin 5 "Trabajar con el Canvas" podrs aprender ms en detalle cmo se crean contenidos con la etiqueta <canvas>.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 12 de 156

Puedes ver ejemplos de <canvas> (incluyendo elementos de animacin) y otras funcionalidades de HTML5 en accin en el sitio webwww.nevermindthebullets.com.

Formularios web
Los nuevos elementos de formulario de HTML, cuando se implementen, harn que el trabajo con formularios sea ms sencillo que ahora. Por ejemplo, muchos diseadores 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 direccin de correo electrnico en un campo de un formulario. A da de hoy, para validar este dato se necesita programacin 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 Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 13 de 156

trminos de bsqueda, url para los campos de direcciones web y algunos ms. Estos nuevos elementos de formulario web seguramente tardarn algo en integrarse en la especificacin oficial, pero estn diseados de manera que puedan revertirse a campos genricos 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 genricos (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 imgenes dentro de la pgina web, el elemento <hgroup> para agrupar una serie de elementos de cabecera dentro de una seccin lgica, etc. HTML5 adems 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.

Introduccin a las APIs de HTML5 y las tecnologas de apoyo


Existen otra serie de tecnologas de desarrollo web vinculadas con la especificacin HTML5 o con su sintaxis. Estas tcnicas nos van a permitir llevar a cabo actividades desde el navegador web y dispositivos mviles compatibles que no eran posibles con las versiones anteriores de HTML. API?

pplication Programming Interfaces o, en espaol, Interfaces de Programacin de Aplicaciones o simplemente "interfaces de programacin") so

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

r o YouTube entre otros, ofrecen APIs al pblico de manera que los diseadores y desarrolladores pueden con ellas integrar algunas de sus

des dentro de sus propios sitios web (y tambin sirven para otros fines, como por ejemplo para crear aplicaciones para telfonos mviles o

personalizadas para equipos de escritorio). Uno de los objetivos principales de una API es el de normalizar el modo de trabajo de ciertos hay una serie de ellas que conviene conocer, como Web Storage, Microdata o Geolocation, entre otras.

y simplificar tareas de programacin, que de lo contrario, seran bastante complejas. Las APIs son un aspecto muy importante dentro del entor

as, lo primero que tenemos que saber es que la documentacin oficial de estas APIs es independiente de la documentacin oficial de HTML5.

e salvo que te muevas bien dentro de la parte ms tcnica del desarrollo web, esta documentacin no es demasiado intuitiva a primera vista. Pe

cuantos ejemplos de cdigo aqu que te pueden servir de orientacin:

.org/html5/webstorage/#introduction

.org/html5/md/#introduction

.org/geo/api/spec-source.html#introduction

La API de Geolocalizacin en accin


Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 14 de 156

Geolocation es una API que nos permite conocer el punto geogrfico desde el cual se conecta el navegador a Internet. Esta informacin se emplea para enviar al usuario datos de inters para l, ajustados a su ubicacin. Como ejemplo de su utilidad estn las pginas web de bsqueda asociadas a un mapa en el cual nos indican dnde estn 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 direccin, un navegador habilitado para geolocalizacin nos puede devolver estos resultados de manera automtica y transparente. Geolocation en estos momentos est disponible en algunos navegadores modernos. Podemos ver un ejemplo de cmo funciona en el sitio de mapas de Microsoft, Bing Maps (necesitars un navegador compatible con geolocalizacin, en este caso estamos utilizando Internet Explorer 9)

1 Abre el navegador compatible con la funcin de geolocalizacin y escribe esta direccin: http://www.bing.com/maps. En la pgina 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 localizacin y aparecer la opcin "Click to center the map on your current location".

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 15 de 156

Pulsando el icono de localizacin empieza el proceso de geolocalizacin. 3 Pulsando en el localizador aparece un mensaje "Allow bing.com to track your physical location." Todos los navegadores que aceptan la geolocalizacin preguntan al usuario y les dan la opcin de aceptar o rechazar la funcin de control de ubicacin.

En Internet Explorer 9 se pide al usuario que permita al navegador conocer su emplazamiento. 4 Para ver cmo acta la funcin de geolocalizacin, pulsa en el botn "permitir una vez" y despus pulsa otra vez en el localizador. El mapa se centrar automticamente en el punto geogrfico donde te encuentras. En los ltimos aos los telfonos mviles han ido incorporando la posibilidad de conectar datos geogrficos o de GPS dentro del navegador del dispositivo o con aplicaciones propias. Cuando la funcin de geolocalizacin est soportada por un gran nmero de navegadores web, podremos disfrutar de estas ventajas tanto en equipos de escritorio como en dispositivos mviles 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 programacin que resuelve problemas de rendimiento de los navegadores. Al acceder a aplicaciones web avanzadas, como las de mapas o aquellas que generan grficos o diagramas al entrar en la pgina web, se inician ciertas operaciones de computacin que consumen una gran cantidad de recursos de procesador y que pueden reducir notablemente el rendimiento de la aplicacin. Gran parte de la ralentizacin es debida a que se produce un conflicto a nivel de mquina entre las tareas interactivas de usuario (pulsacin del ratn, arrastre, etc.) y la necesidad de la propia aplicacin de acceder a recursos como datos, tarjeta grfica 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 ms fluido para ste. Web Workers estn an 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 tecnologas web bajo nuevas modalidades, ms potentes. El Web Storage mejora el concepto de cookies del navegador. Actualmente las cookies permiten que los sitios web puedan guardar informacin 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 informacin del usuario desde el ltimo acceso.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 16 de 156

Las cookies son una tecnologa bastante limitada y no resulta fcil su utilizacin por parte de los diseadores 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 utilizacin sea mucho ms fcil y eficiente. HTML5 nos ofrece dos maneras de guardar datos: localStorage y sessionStorage. Los datos guardados con localStorage quedan a disposicin 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 telfonos mviles. Los navegadores para smartphones, por ejemplo, pueden guardar datos en una sesin de navegador y permitir al usuario leerlos y/o modificarlos aunque no tengan conexin 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 combinacin de las tecnologas HTML5 descritas antes junto con JavaScript o CSS. CSS (iniciales de Cascading Style Sheets) es un lenguaje en evolucin que se identifica mediante nmeros de versin, y la ltima de ellas es la CSS 3.0, que ha ido evolucionando en paralelo con la especificacin de HTML5. Algunos componentes de CSS3 suelen considerarse errneamente como componentes de HTML5, como es el caso de las transiciones o la animacin. La confusin es comprensible, pero para los profesionales del diseo y desarrollo web es importante conocer la diferencia. A continuacin describimos brevemente algunas de las caractersticas ms 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 pgina web. Un ejemplo puede ser el girar levemente una foto dentro de una pgina para conseguir un efecto estticamente muy atractivo. Tambin podemos dar animacin a las transformaciones: por ejemplo, mediante animacin aplicada a la propiedad "scale" podemos conseguir un efecto de ampliacin o reduccin del tamao de una imagen o de cualquier otro elemento. Podemos tambin aadir la propiedad "perspective" al efecto de transformacin para simular la visin de un objeto en un espacio tridimensional, esttico o en movimiento.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 17 de 156

Un ejemplo de una transformacin 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 pgina. Un ejemplo sencillo es la propiedad "border-radius", con la que podemos poner esquinas redondeadas a los objetos rectangulares, y tambin 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 imgenes como bordes de objetos, o aadir varias imgenes de fondo a un mismo contenedor, evitando as la limitacin actual a una sola imagen que permite la propiedad background-image. La descripcin del espacio de color RGBa es otra novedad de CSS3, ya que la "a" representa el grado de transparencia (o "alpha"). Con la notacin RGBa de color ahora podemos aplicar efectos de transparencia a cualquier objeto de la pgina.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 18 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 ms extendido el soporte para aadir tipos de letra especiales a las pginas web mediante la propiedad @font-face, que permite especificar una fuente concreta y un enlace desde el cual el navegador pueda descargarla. Esta caracterstica puede cambiar de forma radical el aspecto de las pginas web, pero lamentablemente tambin se ve afectada por los muchos problemas de compatibilidad con navegadores antiguos que se pueden ver en otras funcionalidades de HTML5.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 19 de 156

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

Media Queries de CSS


La interaccin del usuario con Internet se basa casi de forma exclusiva en lo que se puede ver dentro de una pantalla, y el tamao de las pantallas que podemos encontrar vara enormemente. Un monitor de ordenador de gran formato puede llegar a resoluciones de 2.000 pixels de anchura, mientras que un pequeo telfono mvil 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 pgina y, a partir de esta informacin, enviar un estilo especfico, optimizado para esas dimensiones. Por ejemplo, la misma pgina web, en un monitor con 2.000 pixels de ancho podra mostrarse con cuatro o incluso cinco columnas, pero en pantallas de 320 pixels, podra enviar una plantilla de estilos que solo utilice una columna.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 20 de 156

Animaciones con CSS


Ciertas tecnologas como Flash o Silverlight se han venido utilizando hasta ahora para animar objetos dentro de las pginas 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 permitirn crear elementos animados e interactivos sobre la pgina. Las animaciones de CSS, y el tema siguiente, las transiciones, probablemente estarn soportadas por la mayora de los navegadores en los prximos aos. En el momento de escribir esta gua, el estndar todava 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
Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 21 de 156

Las transiciones de CSS estn muy relacionadas con el concepto de animacin, pero son algo completamente distinto. Una transicin permite variar el valor de una propiedad CSS de manera continua a lo largo de un intervalo de tiempo definido. Por ejemplo, un botn 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 diseadores 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 transicin


Las tecnologas que hay detrs de HTML5 estn en fase de transicin, por lo que es necesario tener claro cundo debemos utilizarlas y cundo no. A lo largo de este libro te iremos orientando y ofreciendo una perspectiva lo ms amplia posible al respecto del tipo de compatibilidad que puedes esperar en distintos navegadores y tambin ofreceremos ejemplos de uso donde el uso de HTML5 puede ser ms indicado que otros lenguajes. Todos los navegadores de mayor difusin hoy en da (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 tecnologas relacionadas. En algunos casos una pgina que

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 22 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 caractersticas no estn presentes aunque la pgina 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 prximo este tipo de situaciones y diferencias.

erspectivas de soporte por parte de los navegadores

o se puede prever con exactitud una fecha en la que tengamos cierta seguridad de que habr soporte completo para HTML5 en todos los naveg W3C ha marcado la segunda mitad de 2014 como la fecha en que debe estar finalizada la especificacin de HTML5. Los diseadores web m nservadores pueden optar por esperar hasta entonces para incorporar el HTML5 a sus entornos en produccin, pero el estndar es independien los navegadores. La mayora de los navegadores actuales soportan ya una serie de funcionalidades de HTML5. Algunas de ellas ya se muestra lativamente estables, bien desarrolladas y su uso parece fiable y seguro. Otras, sin embargo, siguen an en fase de desarrollo y los diseadores ilizarlas con fines experimentales, o incluso en sitios en produccin, pero sabiendo de antemano que estn apostando por la innovacin a costa abilidad.

Quin utiliza HTML5 a da de hoy?


Es una pregunta difcil de responder porque, como has podido ver, no existe una definicin nica para "HTML5". Existen numerosas demos de HTML5 que no se podran poner en entornos en produccin 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 ms vistosos, como border-radius o las funciones de transformacin. En estos casos, los diseadores pueden utilizar las funcionalidades y aadir alternativas adicionales para asegurarse de que la restitucin de estas pginas en navegadores no compatibles no es demasiado diferente de cmo se ven en los navegadores ms modernos. Un rea donde el uso de las funcionalidades de HTML5 est siendo muy activo es entre los dispositivos mviles 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 difusin apuestan por HTML5 en sus ltimas versiones y si aprendes hoy sus secretos, podrs formar parte activa de una nueva era que ahora comienza para la Web, llena de inters y asombrosas novedades.

Funcionalidades y caractersticas futuras de HTML5


Como ya anotbamos antes, las funcionalidades de HTML5 se presentan en distintos grados de madurez y aqu solo hemos visto unas pocas. La lista siguiente es una enumeracin de otras funcionalidades que forman parte de la especificacin HTML5 o de sus tecnologas adscritas que deben aadirse (o en algunos casos ya estn aadidas) 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 implementacin 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

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 23 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 mquina 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 podrn operar con archivos (por ejemplo para subirlos a un servidor). Una aplicacin de edicin de fotos basada en web, por ejemplo, podra ofrecer el mismo modo de operacin en todos los navegadores compatibles utilizando esta API. Disposicin de objetos en pantalla con Flexbox CSS3 introduce una nueva forma de crear diseos para la distribucin 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 ms fiables y potentes a los diseadores y desarrolladores para crear estructuras visuales complejas, vlidas para la web y para dispositivos mviles. Distribuciones en rejilla y columnas mltiples Tambin dentro de CSS, las definiciones de distribuciones en pantalla en formato de columnas mltiples y rejillas ("grids") son dos mejoras ms orientadas a facilitar la presentacin visual de las pginas web. La propiedad Multi-column de CSS nos permite distribuir un contenido (puede ser un bloque de texto, por ejemplo) en dos o ms 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 ms complejas, tanto para las pginas web como para las aplicaciones. En el sistema Grid se introduce el concepto de filas y columnas y tambin 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 leccin, puedes ampliar an ms tus conocimientos sobre estos conceptos, y dependiendo del navegador que utilices, puedes incluso empezar a crear pginas con esas funcionalidades. El libro "Digital Classroom HTML" aborda estos conceptos y contiene ejercicios prcticos que no se incluyen en este libro, por ejemplo para implementar Geolocalizacin, Consultas de medios CSS3, Offline Storage, Flexbox y algunas ms.

Identificacin de sitios web basados en HTML5


En enero de 2010 el W3C present el logo de HTML5 para uso pblico, con el cual quieren promocionar las nuevas capacidades de HTML5 y sus tecnologas asociadas.

El logo de HTML5 se puede descargar y utilizar libremente y de forma gratuita. Este logo puede obtenerse como archive grfico y se puede incorporar a los sitios web o cualquier otro contenido para indicar que se utiliza esta tecnologa. Conviene saber que el W3C utiliza el trmino HTML5 en un sentido amplio e incluye otras tecnologas tambin. Adems, el HTML5 se convertir en el ao 2014 en un estndar oficial, pero se recomienda a los diseadores y desarrolladores que empiecen ya a utilizar la especificacin. Si quieres ms informacin sobre HTML5 y el logo, puedes acceder a las explicaciones del W3C en su web: www.w3.org/html/logo/

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 24 de 156

Materiales de autoformacin
La compatibilidad de los navegadores es un asunto de importancia especial al hablar de HTML5. Cuando decidas utilizar la especificacin HTML5, sus diversas APIs relacionadas y CSS3, debers tener en cuenta una gran cantidad de aspectos y el distinto grado de soporte que encontrars para las funcionalidades entre los diferentes navegadores. Si quieres tener una visin ms amplia de la evolucin del estndar puedes consultar la ltima versin publicada en el sitio webhttp://www.w3.org/TR/html5/ Tambin 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 especificacin de HTML5 y la familia HTML5 tal y como la hemos definido en esta leccin? 3 Qu es la geolocalizacin?

Respuestas
1 Las etiquetas <video> y <audio> nos permiten integrar contenidos multimedia directamente en el cdigo 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 especificacin de HTML5 incorpora una serie de elementos nuevos (o etiquetas) que podemos utilizar para crear una estructura de presentacin nueva, o introducir nuevas funcionalidades en las pginas web. La familia HTML5 est compuesta de tecnologas relacionadas entre s, pero independientes, como las APIs Web Storage o Geolocation, y CSS3. 3 La geolocalizacin es una tecnologa web capaz de identificar la ubicacin geogrfica del usuario y, a partir de esa informacin, permite obtener datos tiles, como por ejemplo, representar su localizacin en un mapa, calcular rutas o sugerir establecimientos cercanos.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 25 de 156

Leccin 2: Conceptos bsicos de HTML, XHTML y CSS


Objetivos:
En esta leccin conocers los conceptos bsicos de HTML, XHTML y CSS. Juntos, estos tres sistemas de codificacin conforman la estructura y el estilo visual de las pginas web.

Para empezar
Vamos a trabajar con algunos archivos de la carpeta HTML5_02lessons. Comprueba que has descargado y copiado la carpeta de prcticas de HTML5 en tu ordenador.

Lenguajes Web
En esta leccin vamos a conocer los elementos bsicos de dos lenguajes: HTML y CSS. Aunque tienen distinta sintaxis y reglas, dependen fuertemente uno del otro. Al finalizar esta leccin podrs saber cmo crear paginas sencillas HTML, aadir imgenes, crear enlaces de una pgina a otra y modificar su aspecto en pantalla utilizando CSS. Este tema es enormemente extenso y muchos de los principios bsicos que se explican aqu te ensearn 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 pgina web se basa en HTML


Los documentos HTML (iniciales de Hypertext Markup Language) utilizan la extensin .htm o .html. Esta extensin avisa al navegador web o a un dispositivo como un telfono mvil, 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 pgina HTML. Estas etiquetas quedan enmarcadas dentro de los smbolos "menor que" (<) y "mayor que" (>) y se ponen al principio y al final de un objeto o texto utilizado en la pgina HTML. Aqu vemos un ejemplo de dos etiquetas de ttulo con textos en ellas. Las etiquetas no se muestran en pantalla, pero todos los navegadores saben que el texto entre las etiquetas es un ttulo 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 lnea de cdigo la denominamos "elemento". Ms concretamente, nos referiramos a ella como un "elemento de ttulo de nivel 1" o tambin "elemento heading 1" si preferimos utilizar el nombre en ingls original.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 26 de 156

HTML y XHTML estn estrechamente relacionados. Existe una lista de reglas definidas por el World Wide Web Consortium (organismo de normalizacin que tambin se conoce como W3C) que especifican los lmites de HTML y XHTML.

mo se representa el cdigo HTML en el navegador

ra entender mejor la relacin entre el cdigo HTML y lo que vemos en el navegador al abrir el archivo, en este ejemplo se muestra la conexin

Doctype. Esta lnea indica al navegador que debe interpretar todo el cdigo que sigue de acuerdo con un conjunto de reglas especfico.

Elemento HTML. Este elemento contiene a los dems y le indica al navegador que contiene un documento HTML.

Elemento HEAD. En esta seccin aparece informacin sobre la pgina, pero no se muestra en la pantalla.

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

rca una pgina como "favorito" en el navegador.

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

Elemento HEADING 1. El primero de seis elementos de cabecera. El contenido dentro de un heading de nivel 1 se muestra en tipografas gran

grita.

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

Elemento PARAGRAPH: por defecto, el navegador aade un salto antes y despus de este elemento, que suele contener varias lneas de texto

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

Elemento ORDERED LIST: abre una lista de elementos en forma de lneas numeradas por orden.

Elemento LIST: cada lnea con esta etiqueta recibe automticamente un nmero ordinal empezando por el 1.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 27 de 156

Detalles de la sintaxis de XHTML


Hay una diferencia esencial entre HTML 4.0 y XHTML 1.0 los dos estndares ms recientes publicados por el W3C (World Wide Web Consortium). Tal y como est definido el XHTML, las pginas escritas en XHTML se pueden ver tambin en los navegadores que muestran las pginas HTML actuales. Las etiquetas y atributos de XHTML y HTML siguen siendo las mismas, pero la sintaxis del cdigo XHTML es ms estricta. Las diferencias ms importantes entre XHTML y HTML son estas:

En XHTML, todas las etiquetas deben escribirse en minsculas. 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 ttulo, prrafo, imagen u otro. Todas las etiquetas XHTML deben tener cierre, aun en el caso de etiquetas especiales que tcnicamente no necesitan etiquetas de apertura y cierre. Por ejemplo, la etiqueta <br>, que inserta un salto de lnea, 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 inclusin 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 ttulo <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 cdigo ajustado a XHTML al hacer los ejemplos, lo que ayuda a que nuestros diseos sean compatibles con los navegadores y dispositivos mviles actuales, y tambin porque as es ms fcil la resolucin de errores cuando aparecen.

Doctype indica al navegador qu debe esperar


Al inicio de toda pgina web debe aparecer una declaracin Doctype. La declaracin de "tipo de documento" le aporta pistas al navegador sobre el tipo de informacin que se va a encontrar en la pgina. 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 pgina empezando por la primera lnea y va avanzando de principio a fin, por lo que esta indicacin en la primera lnea de todas tiene pleno sentido. Aunque no es obligatoria, es una buena prctica empezar siempre utilizando doctype al principio de nuestras pginas. La declaracin 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 declaracin Doctype, espera que todo en la pgina sea conforme con el lenguaje indicado. Si la pgina es totalmente conforme con las especificaciones, se considera vlida. En la Leccin 3 veremos qu cambios incorpora HTML5 en los requisitos de Doctype.

El W3C y la validacin de la pgina


W3C es la abreviatura con la que se conoce al World Wide Web Consortium una organizacin sin nimo de lucro cuyo objetivo consiste en orientar la evolucin de la Web. El W3C ofrece directrices y reglas para especificaciones como HTML y XHTML. Una forma de definir la validez del cdigo HTML o XHTML que generamos es utilizar el servicio online de validacin del W3C, que es gratuito.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 28 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 teora del proceso de validacin. 1 Abre el navegador y ve a la pgina http://validator.w3.org. 2 Pulsa en la pestaa "Validate by File Upload".

El validador del W3C permite analizar el cdigo 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 botn Check para validar el cdigo. 4 El sitio del W3C nos devuelve una serie de errores. Si te desplazas por la pgina hacia abajo puedes ver informacin detallada sobre los errores encontrados. No te preocupes por eso ahora. A continuacin vamos a cargar un archivo casi idntico, pero sin errores. 5 Pulsa en el botn Browse, ve de nuevo a la carpeta HTML5_02lessons, selecciona el archivo w3_compliant.html y pulsa Abrir. 6 Pulsa el botn Revalidate. Ahora vers un mensaje de felicitacin que dice que la pgina ha sido revisada y es conforme con las reglas de XHTML 1.0 Strict.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 29 de 156

Aunque la pgina es vlida, puede que no se vea muy atractiva en un navegador. Este ejemplo utiliza una pgina en la que no se aplican estilos y no lleva imgenes, para ilustrar mejor el proceso. Conviene saber que tener un cdigo conforme es solo un paso dentro de una serie que nos garantizar que nuestras pginas web se van a ver en el mayor nmero posible de ordenadores y dispositivos. Puedes validar tambin pginas web que ya se ven en Internet. Para ello puedes utilizar la opcin "Validate by URL". Tambin puedes pegar cdigo HTML directamente dentro del validador eligiendo la opcin "Validate by Direct Input". 7 En tu navegador, selecciona "Archivo Abrir" y muvete hacia la carpeta HTML5_02lessons. Selecciona el mismo documento w3_compliant.html que acabamos de validar, pulsa Abrir y despus en Aceptar. Si utilizas Internet Explorer 9, puedes tambin 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 pgina "vlida" puede tener enlaces a imgenes que no existen y ofrecer un diseo mediocre.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 30 de 156

Ya que sabemos que esta pgina utiliza un XHTML vlido, sabemos tambin que si tenemos problemas al representarla en pantalla, no se deben al cdigo XHTML. Sabemos que no faltan etiquetas y que todas ellas estn bien escritas. El proceso seguido puede ser til para resolver errores, ya que nos facilita la deteccin de cualquier problema de sintaxis. 8 Abre otra vez en tu navegador Ia pgina http://validator.w3.org y pulsa en la pestaa "Validate by File Upload". Aunque veremos las diferencias entre las pginas HTML5 y las escritas con HTML 4.01 y XHTML en la siguiente leccin, podemos ver no obstante los resultados de una pgina si se valida como HTML5. 9 Pulsa el botn Browse, ve a la carpeta HTML5_02lessons de tu ordenador y selecciona el archivo html5_compliant.html. Pulsa Abrir y despus el botn Check. Aparecer un resultado positivo: el documento es conforme con HTML5.

Otras ventajas del diseo basado en estndares


La validacin de pginas del W3C es el aspecto ms tangible de un diseo web conforme a estndares, pero hay tambin otras ventajas importantes al crear pginas bien estructuradas: Menos cdigo: el uso de HTML y CSS nos permite crear pginas similares con menos lneas de cdigo, es decir, menos trabajo para el desarrollador y tiempos de descarga menores para el visor. Mantenimiento ms sencillo: tener menos cdigo supone un mantenimiento ms sencillo, y esto beneficia tanto al que escribe el cdigo como a cualquier otra persona que despus deba encargarse de su mantenimiento y revisin. Accesibilidad: los documentos creados de forma semntica, es decir, que utilizan la etiqueta HTML ms adecuada a su funcin en cada momento, pueden facilitar la lectura y navegacin a personas con discapacidad visual y los usuarios que los visitan encuentran la informacin ms fcilmente. Optimizacin para motores de bsqueda: Las pginas web que incluyen secciones claras e identificadas de forma lgica, tanto a nivel de cdigo como de contenidos, facilitan la labor a los motores de bsqueda a la hora de indexarlas y clasificarlas puesto que con un contenido organizado y bien identificado resulta ms fcil evaluar el contexto temtico y la relevancia de la informacin que ofrecen. Compatibilidad: los sitios web que independizan la estructura con respecto al estilo se adaptan mucho ms fcilmente a dispositivos mviles y formatos de pantalla variados. CSS nos permite aplicar hojas de estilo alternativas que optimizan la presentacin en pantalla dependiendo del dispositivo utilizado.

Estructura HTML
Uno de los conceptos ms importantes que debemos dominar a la hora de disear 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 disear la estructura HTML de la pgina para despus continuar con los estilos, aplicando CSS. En este ejemplo podemos ver los elementos ms bsicos que nos vamos a encontrar en prcticamente toda pgina web:

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 31 de 156

<html> <body> </body> </html> El elemento <body> est anidado (incluido) dentro del elemento <html>. En trminos de programacin, <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 bsica de toda pgina web. Cuando un navegador abre un documento HTML busca esta estructura. El contenido dentro de la etiqueta body es la parte visible de la pgina, ya que es lo que se muestra en la ventana del navegador. <html> <body> Aqu estn los recursos internos y el centro de informacin 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 cdigo que queda oculta, aunque es de gran utilidad para el navegador, para los motores de bsqueda y para el desarrollador. Algunos ejemplos de este cdigo oculto son los scripts que sirven para aadir interactividad a la pgina, o tambin el cdigo que ayuda a los buscadores a clasificar el documento, y los estilos que definen el aspecto de la pgina. Este cdigo 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 estn los recursos internos y el centro de informacin de los empleados de Worldwide Apparel </body> </html> En este ejemplo, todava 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 podrn determinar si se trata de un ttulo, una lista, un prrafo, un comentario o un contenido de cualquier otra naturaleza. Para definir el texto como prrafo, 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>

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 32 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 aadir un enlace a este documento, asociando las palabrasWorldwide Apparel a una pgina web de Internet. 3 En el ltimo prrafo, 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 cdigo siguiente: . Esta etiqueta es la etiqueta de apertura de un elemento "anchor" (un enlace) que nos sirve para vincular el texto a otra pgina web en nuestro propio sitio web o a cualquier direccin 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 aadir automticamente las etiquetas de cierre. Puedes desactivar la funcin de "Autocompletar". En cada editor es diferente, pero en Visual Web Developer Express 2010 podemos cambiar esta configuracin por defecto desde el men Herramientas < Opciones > Formato y despus desmarcar la casilla "Insertar automticamente etiquetas de cierre". Para finalizar el proceso de creacin de un vnculo, necesitamos indicar la direccin web a donde debe remitir, lo que se hace con el atributo href. 5 En la etiqueta <a> de apertura, sita el cursor entre la letra <a y el signo de cierre (>). Pulsa la barra espaciadora una vez y despus href="". El cdigo completo de la etiqueta debera quedar ahora como <a href="">. Ahora tenemos una etiqueta anchor y el atributo href, pero este enlace no dirige a ninguna parte. Tenemos que aadir ahora un valor al atributo href, que en este caso ser una direccin de Internet (URL). 6 Dentro de las comillas escribe la direccin siguiente: http://www.digitalclassroombooks.com/worldwideapparel. 7 En el men Archivo selecciona Guardar y tras grabar el archivo, mustralo en el navegador web, bien abrindolo desde el propio navegador (Archivo Abrir) o bien pulsando Ctrl + click (el botn del ratn en Mac OS) o Ctrl + botn derecho en Windows, seleccionando despus el archivo desde el propio sistema operativo. El enlace aparece subrayado y con el color azul normal, indicativo de que se trata de una direccin Web que an no hemos visitado.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 33 de 156

Un enlace sencillo, creado con la etiqueta y el atributo href. 8 Cierra el navegador y vuelve al editor de texto.

Insertar imgenes en HTML


Para colocar imgenes 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 cmo ha de hacerse. Aqu vamos a insertar una imagen en nuestro documento HTML.

1 Mueve el cursor hacia el primer prrafo y sitalo inmediatamente despus de la etiqueta de cierre </p>. Pulsa Intro para pasar a la lnea siguiente. Escribe <img />. La etiqueta de imagen es una categora 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 separacin 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 ratn 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 direccin URL de la imagen que queremos mostrar dentro de la pgina. 3 En el interior de las comillas de src= escribe images/familysitting.jpg. El cdigo quedara as: <img src="images/familysitting.jpg" /> Esta lnea 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 separacin entre la comilla y el cierre de la etiqueta. Ahora vamos a aadir un atributo alt. El atributo alt representa el texto alternativo a la imagen, y es obligatorio aadirlo para mantener la validez de la pgina. Este atributo es muy til para las personas que utilizan sistemas de lectura de pantalla para navegar

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 34 de 156

por la Web, ya que permite convertir a voz el texto indicado como valor. Tambin sirve para dar un contenido al espacio vaco que se genera cuando, por cualquier razn, la imagen no se puede representar (porque el enlace est roto o el archivo tiene un formato incorrecto, por ejemplo). 4 Sita 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 despus escribe alt="". 5 Dentro de las comillas del paso anterior, escribe Familia sentada en unos escalones. 6 En el men Archivo, selecciona Guardar y despus abre el archivo en el navegador.

Las imgenes se aaden a las pginas web con el elemento src y una referencia al archivo grfico. Tanto el atributo src como el alt son obligatorios bajo XHTML. Hay tambin 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 pgina de manera ms 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 prcticas". Las buenas prcticas son un concepto amplio, que se utiliza para describir la manera generalmente aceptada

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 35 de 156

El empleo de atributos opcionales


de hacer las cosas en el diseo y programacin para la Web. Hay, en general, razones de sentido comn detrs de las buenas prcticas: por ejemplo, al indicar la altura y la anchura se crea un espacio (conocido como "placeholder") para la imagen, y permanece an en el caso de que la imagen no se haya descargado, debido a la lentitud de la conexin. Si no se crea este placeholder con una anchura y altura prefijadas, el aspecto y distribucin de los elementos en pantalla va cambiando a medida que se cargan las imgenes, 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 pgina en el navegador para ver la imagen. Mantn 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 pginas del sitio web, de modo que los ttulos, listas y prrafos pueden verse igual en todas y cada una de las pginas.

Cmo hacemos referencia a la sintaxis de CSS en este libro


Antes de que empecemos a trabajar con CSS es preciso aclarar cmo vamos a denominar a las distintas partes de la sintaxis de CSS en este libro. No es cosa fcil dicho as, porque ocurre que hay diferencias entre la especificacin oficial del lenguaje CSS y la forma en que los diseadores se refieren a CSS en el mundo real. En cualquier caso, los conceptos bsicos son estos: el siguiente cdigo es lo que conocemos como una regla de CSS:

Los componentes de esta regla son: A. Selector. B. Declaracin. 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 da a da la mayor parte de los diseadores no son tan concretos. Por ejemplo, podran referirse a la regla anterior como "estilo", "regla de estilo", "la regla h1", o "la regla CSS para h1". Adems, como puedes ver, el nombre oficial para el par propiedad-valor, se denomina "declaracin". De nuevo, en el mundo real los diseadores no suelen utilizar el trmino "declaracin", sino que a menudo utilizan el trmino "propiedad" o "propiedades" de forma indistinta.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 36 de 156

Definir un estilo para los ttulos


Para hacernos una idea de cmo funciona CSS vamos a crear una regla CSS sencilla que cambia el estilo de un ttulo en la pgina. 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 accin de CSS sea ver cmo se aplica el estilo por defecto para este ttulo al escribirlo en pantalla. 1 Dentro del navegador, analiza el texto de ttulo. El estilo y las instrucciones de formato las aportan las "reglas" que el propio navegador aplica por diseo a los elementos <h1> a la hora de presentarlos en pantalla. El tamao, 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 tamao 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 pgina busca la etiqueta <title>, y justo debajo de ella, aade una lnea nueva, con el siguiente texto: <style type="text/css"> 3 Pulsa Intro tres veces y despus 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 pgina. En HTML todo lo que queda dentro de la seccin <head> no se muestra en pantalla. Por ejemplo, tambin tenemos un elemento <title> en esta seccin. Este ttulo aparece en la parte superior de la ventana del navegador, pero no dentro de la pgina propiamente. 4 En la lnea vaca 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 despus el tabulador para poner el cursor debajo del signo de la llave en el editor, si es que el propio editor no te posiciona automticamente en ese lugar. La tabulacin es opcional, pero hace que el cdigo CSS se lea mejor. Como veremos ahora, el nmero de lneas en esta regla va a aumentar y es muy conveniente que el cdigo con facilidad. 6 Escribe este cdigo 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 declaracin. 7 Pulsa Intro otra vez y en la lnea 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 lneas: h1 { color:red; }

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 37 de 156

8 Guarda el archivo en disco y visualiza la pgina 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 ttulo dentro de la etiqueta H1 tiene un nuevo color, por aplicacin de una regla CSS. 9 En el archivo HTML, selecciona la palabra red y cmbiala por este otro cdigo, que representa un color de la gama de colores que pueden mostrarse en pantalla: #FF0000. Este valor es el mismo color rojo, pero en notacin hexadecimal. En CSS puedes utilizar colores por su nombre en ingls o mediante esta notacin. Guarda el archivo y mustralo de nuevo en el navegador. El color sigue siendo el mismo rojo. La notacin hexadecimal es el mtodo ms habitual para indicar colores en la Web.

Notacin hexadecimal de color


El color, tanto en HTML como CSS, se designa mediante un cdigo de seis caracteres precedido por el signo de almohadilla. A esta notacin se le llama cdigo hexadecimal, y es el sistema que se utiliza para identificar y establecer el color de los elementos. Con esta notacin podemos reproducir prcticamente cualquier color. Por ejemplo, el color rojo oscuro se representa como #CC0000. El cdigo se divide en tres pares de dgitos, y cada uno de ellos representa el valor RGB del espectro. Por ejemplo, el color blanco se representa en notacin RBG como R:255 G:255 B:255, y su equivalente en HTML en formato hexadecimal es #FFFFFF (siendo FF el equivalente hexadecimal del nmero 255 decimal, que se repite para los tres pares). Un programa de edicin de imgenes como Photoshop nos

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 38 de 156

Notacin 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 tambin una serie de sitios web donde podemos conocer las equivalencias entre los colores y sus cdigos, 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 mostrarn en pantalla con el texto en rojo. Los selectores de tipo tambin se les suele denominar "selectores de etiqueta". No es frecuente que oigas a nadie utilizar la expresin "selector de tipo", pero es el nombre oficial que tiene, por eso lo llamamos as en este captulo. Ahora vamos a ver otra categora de estilos CSS que se conocen como clases. Tambin 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 prrafo, 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 prrafo, el selector de etiqueta no es una buena opcin (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 pgina. 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 prrafo. 1 Sita el cursor en la lnea justo debajo de la llave de cierre de la regla h1 y escribe esto: .red { color:red; } Fjate 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 declaracin color:red es la misma que en la prctica 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>.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 39 de 156

2 En el primer prrafo <p> dentro de la etiqueta <body>, sita el cursor justo delante de las palabras Worldwide Apparel, pulsa y escribe: <span> 3 A la derecha de Apparel aade la siguiente etiqueta de cierre </span>. El cdigo debe quedar as: <p>... employees of <span> Worldwide Apparel</span> </p> Guarda el archivo. Si visualizas ahora la pgina en el navegador vers que no hay ningn cambio. La etiqueta <span> en nuestro HTML est vaca, no hace nada y tenemos que asociarla a un estilo. En este caso, la etiqueta <span> delimita el contenido dentro del prrafo al cual se aplicar un estilo, pero por s misma no aplica ningn estilo ni tampoco lo define. 4 Ve a la etiqueta de apertura <span>. Entre la letra "n" de "span" y smbolo ">", inserta un espacio en blanco y escribe esto: class="red" Ahora la lnea queda as: <p>... employees of <span class="red"> Worldwide Apparel</span> </p> 5 Busca el segundo prrafo donde aparece informacin 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 pgina y visualzala en el navegador. Todo el texto del prrafo (excepto el vnculo) 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 pgina. El vnculo no cambia de color porque se le aplica un estilo predefinido especfico (el de la etiqueta <a>). En un ejercicio ms adelante veremos cmo se cambia el estilo de un vnculo.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 40 de 156

Los estilos de clase CSS se pueden aplicar a elementos de lnea y de bloque, como ocurre en el ltimo prrafo. 7 Cierra el navegador, pero mantn abierto el documento en el editor de texto porque seguiremos trabajando sobre l en el siguiente ejercicio.

Tres maneras de utilizar estilos


En la prctica anterior los estilos estaban situados dentro de la seccin de cabecera (<head>) de la pgina. Esta modalidad recibe el nombre de hoja de estilos interna. Adems de hojas de estilo internas, tambin existen las hojas de estilos externas y los estilos aplicados directamente ("inline"). Una hoja de estilo externa es un documento independiente con la extensin .css. Cuando utilizamos un archivo externo, los estilos se definen en l y en las pginas HTML tenemos que insertar un enlace a dicho archivo. Mientras que las hojas de estilo internas solo se aplican a la pgina donde residen, las hojas externas se pueden aplicar a mltiples 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 ttulo 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 tuviramos 50 elementos <h1> en nuestro sitio web y utilizsemos estilos inline, necesitaramos aadir este cdigo de estilo 50 veces, pero lo peor es que

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 41 de 156

si quisiramos cambiar el color a verde, tendramos 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 electrnico en formato HTML. En las siguientes lecciones no vamos a utilizar mucho los estilos directos, en lnea con la forma en que se disean actualmente los sitios web. La prctica ms habitual consiste en combinar estilos internos y externos.

Cundo 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 seccin <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 pginas y decidimos utilizar hojas de estilo internas, deberemos crear una hoja de estilos dentro de cada una de esas 20 pginas. Un cambio en cualquier regla exigira modificar todas y cada una de las hojas de estilo internas en dichas pginas para mantener la consistencia. En las hojas externas las reglas CSS, como ya explicbamos anteriormente, se guardan en archivos independientes. Podemos asociar un mismo archivo .css a cualquier pgina 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 prrafos del sitio web quedan modificados de inmediato. En la prctica siguiente vamos a crear una hoja de estilo externa la asociaremos a una pgina HTML nueva.

Creacin de una hoja de estilos externa


Una pgina 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 organizacin y mantenimiento. Podemos incluso utilizar hojas de estilos para funciones concretas, como imprimir una pgina o visualizar el contenido en dispositivos mviles. Se pueden disear hojas de estilo tambin 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 despus asociaremos la hoja de estilos a una pgina HTML nueva

1 Desde el men Archivo Nuevo, selecciona la Plantilla de Estilos CSS y brela si tu editor web ofrece esta opcin. Puede que tu editor de textos tenga un men de opciones distinto, y debas seleccionar un comando equivalente. Por ejemplo, muchos editores tienen la opcin Archivo Nuevo documento CSS..

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 42 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 extensin .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 mantn abierta tambin la hoja de estilos. 4 En el documento HTML busca las reglas que has escrito dentro de las etiquetas <style> y seleccinalas con el ratn. 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 Edicin selecciona Cortar y pasa ahora al archivo styles.css. Si en este archivo aparece algn cdigo, tendrs que sobrescribirlo seleccionndolo y despus pegando (desde el men Edicin 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 vnculo a l en la pgina HTML para que el navegador sepa dnde estn las reglas de estilo que debe aplicarle. 6 En el editor, vuelve al archivo 02_index_work.html y gurdalo en disco. Ahora vamos a aadir la etiqueta <link> que apuntar a nuestro archivo styles.css. Este paso es fundamental porque si no vinculamos la hoja de estilos externa, la pgina HTML se mostrar sin aplicar esos estilos. 7 Pon el cursor detrs de la etiqueta de cierre </ style> y pulsa Intro para empezar a escribir en la lnea siguiente. Escribe esto: <link rel="stylesheet" type="text/css" href="styles.css" />

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 43 de 156

En esta lnea ests aadiendo los atributos rel, type y href. Probablemente recordaras que el atributo href ya lo habamos utilizado al insertar el vnculo 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 pgina HTML en el navegador. La pgina 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 aadiremos el mismo enlace al archive CSS externo, para ver cmo 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 Edicin, selecciona Copiar. 12Vuelve al documento test.html, pulsa debajo del elemento <title> y pega (Edicin- Pegar) para que aadir la lnea anterior. Guarda el archivo. Ahora, la hoja de estilo externa tambin est asociada a este documento HTML. Las etiquetas HTML que aadamos a este nuevo documento quedarn modificadas si existe alguna regla para ellas en el archivo CSS. Por ejemplo, vamos a aadir ahora un elemento heading 1 y su texto cambiar de forma automtica a color rojo. Pulsa dentro del elemento <body> y escribe: <h1> Worldwide Apparel benefits page </h1>

Guarda el archivo y visualzalo en el navegador.

La etiqueta <h1> obtiene su estilo de una hoja de estilos CSS externa que hemos creado. El ttulo 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 pginas: 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


Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 44 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 algn conflicto en la definicin de estilos entre las declaraciones inline, interna y/o externa, el estilo directo (inline) ser el que prevalezca porque es el que ms cerca se sita del cdigo 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 disear para la web, podemos formatear el texto de una forma parecida a como se hace en las aplicaciones de procesamiento de textos y diseo 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 pgina. Si el ordenador o dispositivo no dispone de esa fuente, el navegador la sustituye por otra. Puesto que es imposible saber qu fuentes estn 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 diseo que hemos previsto. Una opcin puede ser utilizar fuentes que sabemos que podemos encontrar en la mayora de los ordenadores. Lo malo es que son muy pocas estas fuentes de las cuales podemos tener la certeza de que se encuentran en prcticamente todos los ordenadores del mundo.

Tipos de letra de uso comn en la web


Estas son las Fuentes que podemos utilizar con ms confianza en la Web: Arial Verdana Georgia Times New Roman Courier Trebuchet Lucida Tahoma Impact La lista es pequea porque tiene en cuenta las plataformas Mac y Windows y suponemos adems que an acceden a la web muchos ordenadores antiguos. Estos equipos ms antiguos tienen una lista de fuentes preinstaladas ms reducida que los actuales, por lo que un diseador tiene que tener esto en cuenta a la hora de seleccionar el tipo de letra que usar en sus pginas. Por otra parte, esta lista es pequea tambin por razones de tipo esttico. Por ejemplo, las fuentes Courier e Impact se usan poco porque, aunque estn disponibles de forma general, su apariencia es muy peculiar y limita mucho su uso de forma habitual.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 45 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 ingls). 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. Fjate en las comillas del ejemplo. En la mayora de casos, cuando se indica una fuente, las comillas no hacen falta pero si el nombre de la fuente consta de ms de una palabra, son necesarias. Si el usuario no dispone de la Helvetica Neue, el navegador buscar una versin ms genrica de la Helvtica (segunda opcin de la lista). Si tampoco la encuentra, utilizar Arial, que es un tipo de letra muy similar a la Helvtica. Si por algn motivo tampoco estuviera presente la fuente Arial en el sistema, elegira sans-serif, lo que permite al navegador emplear cualquier fuente sans-serif que encuentre. "Sans-serif" es una definicin genrica para todos los tipos de letra que no llevan unos pequeos trazos (o "serifs") al final de cada letra. Ejemplos de fuentes "serif" son la Times New Roman y la Georgia.

Eleccin de font-family
En este ejercicio vamos a definir una lista de fuentes para toda la pgina y despus declararemos una lista especfica para los ttulos.

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 pgina, pero dado que nuestros estilos estn 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 pgina. 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 pgina 02_index_work.html en el navegador. Como decamos 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 sansserif.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 46 de 156

Cuando se define la fuente Trebuchet en la declaracin font-family para la regla de la etiqueta <body>, todo el texto de la pgina se muestra en ese tipo de letra. Ahora, todo el texto de la pgina 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 pgina. Ahora vamos a declarar una familia de fuentes especfica para el elemento de prrafo ("<p>"). 5 Vuelve a la hoja de estilos en el editor y debajo justo de la regla para el "body", aade 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 explcita para los prrafos, por la cual el tipo de letra aplicable es la Georgia. Los rtulos de ttulo siguen saliendo con letra Trebuchet, que es la que hemos definido para todo el cuerpo. Ten en cuenta que aunque podramos haber elegido cualquier tipo de letra presente en el ordenador, Trebuchet y Georgia son buenas opciones de partida porque se encuentran en la mayora 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 frustracin entre los diseadores Web durante muchos aos. Este problema va alivindose a medida que ciertas empresas han ido creando soluciones para que las pginas puedan verse en un navegador con los tipos de letra

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 47 de 156

El prometedor futuro de las fuentes


especificados por los creadores. El panorama de las fuentes est cambiando, sin embargo, con la aparicin de las llamadas "web fonts" y, en concreto, con la funcionalidad @font-face de CSS. Ahora es posible aadir una gran variedad de tipos de letra y tener la certeza de que nuestras pginas se podrn ver tal y como pretendemos. Si quieres leer un anlisis ms detallado sobre este asunto e instrucciones paso a paso para integrar web fonts en tus pginas, lee la seccin Aplicar estilos con CSS3 en la Leccin 11 del libro "HTML5 Digital Classroom".

Cambiar el tamao del texto con CSS


Cuando utilizamos CSS para formatear textos para la web, disponemos de algunas opciones para establecer su tamao y su grosor. La propiedad CSS que controla el tamao del texto se llama fontsize. Podemos modificar el valor de la propiedad font-size de varias formas: Tamao absoluto: se trata de una serie de palabras clave que indican tamaos predefinidos de letra. Los tamaos 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 nmero 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 tamao de letra del objeto padre. Tamao relativo: una serie de palabras clave que se interpretan como relativas al tamao de letra del objeto padre. Los valores posibles son larger ysmaller. La eleccin de la unidad de medida para el tamao de la letra en una pgina web es importante y no es tan fcil como parece. La principal dificultad en este sentido tiene que ver con la resolucin de la pantalla y las distintas maneras en que, a lo largo del tiempo, los navegadores han resuelto la presentacin de los textos. El texto en monitores pequeos a menudo tiene un aspecto distinto de como aparecen en monitores de gran formato; con un poco de previsin podemos resolver este problema, imaginando el efecto en cada caso. Adems del problema de la resolucin de pantalla, tenemos que considerar tambin la forma en que cada navegador resuelve la restitucin de los textos. Por ejemplo, nos navegadores permiten al usuario cambiar a mano el tamao de la letra. Ms an: cada vez hay ms gente que navega por la Web desde telfonos y dispositivos mviles, lo que hace que la eleccin del tamao de letra sea un asunto an ms crtico.

Las medidas en pixels y puntos no son la mejor opcin para el tamao


La declaracin del tamao de letra en puntos puede ser algo obvio si vienes del mundo de las artes grficas, y si tienes experiencia con el diseo grfico por ordenador, seguramente te manejars 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 prrafo con puntos y la segunda, una regla de prrafo basada en pixels:

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 48 de 156

p { font-size:12pt; } (regla CSS de tamao de letra basada en puntos) p { font-size:12px; } (regla CSS de tamao de letra basada en pixels) Aunque la unidad "points" est soportada, su uso es una mala prctica y no se recomienda en el diseo de pginas 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 grficos por ordenador. Los tamaos y resoluciones de pantalla se expresan en pixels. En un mundo ideal, los diseadores deberan poder utilizar sin riesgo los tamaos de letra expresados en pixels porque son unidades relativas pensadas para escalar de forma nativa. A lo largo de los aos, los navegadores han resuelto el proceso de cambio de tamao de los textos de diversas maneras. Por ejemplo, Internet Explorer 6 y 7 nomodifican el tamao del texto basado en pixels si el usuario opta por alterar la configuracin por defecto. Prcticamente todos los navegadores web ofrecen la posibilidad de alterar el tamao del texto. Esta opcin suele aparecer en el men de Opciones o de Configuracin. En algunos navegadores modernos la opcin de cambio de tamao del texto aparece en un submen llamado Zoom. Muchos navegadores adems ofrecen la combinacin de Ctrl + + (para ampliar) y Ctrl + (para reducir) que aumentan o reducen respectivamente el tamao del texto. En el Mac OS, estas combinaciones son Command + + [aumento] y Command + [reduccin].

Uso de una combinacin de porcentaje y medida "em"


Una forma de resolver el problema del cambio de tamao de los textos que causa el uso de pixels consiste en aplicar otras unidades de medida. Aqu vamos a establecer un cambio de tamao fiable combinando el porcentaje y la unidad "em". Para tener una idea de cmo 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 gurdalo con el nombre 02_sizing_work.html. Este archivo tiene cuatro bloques de texto: un ttulo de nivel 1 (heading 1, <h1>), un heading 2 <h2>, y dos prrafos <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 cmo se ve la pgina en su estado inicial. Visualiza este archivo en el navegador. Todos los navegadores aplican un tamao de letra por defecto si no hay estilos que aplicar. En la mayora de casos, el valor utilizado para el cuerpo es
Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 49 de 156

de 16 pixels (en este caso los prrafos 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 lnea:
body { font-family:"Trebuchet MS", Tahoma, Arial, sans-serif; font-size:10px; }

4 Guarda el archivo en disco y abre la pgina en el navegador. Vers que todo el texto es ahora bastante ms pequeo, y esto es debido a que el estilo del cuerpo define el tamao general del texto para toda la pgina, y los dems elementos como prrafos y ttulos, se restituyen en funcin de ese valor base.

Al establecer el tamao de letra para el cuerpo, todo el texto de la pgina se representa ms pequeo. 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 pgina en el navegador. Todo el texto es ahora algo ms 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 tamaos 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 pgina en el navegador. Podrs ver que ahora el tamao del texto es el mismo que tenamos al principio del ejercicio (cuando an no habamos definido ningn tamao de letra). Este paso nos sirve para definir expresamente que el tamao de letra para el cuerpo es el mismo que tiene predefinido el navegador.
Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 50 de 156

Tendrs que hacer un pequeo acto de fe y creer que la tcnica que ests aprendiendo resuelve ciertos problemas concretos de cambio de tamao 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 pginas web. 9 En la regla de estilo para el prrafo, 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 resolucin del monitor, mientras que los pixels s. Puede que al principio los ems no sean muy intuitivos, pero si aprendemos a utilizarlos, nos aportarn 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 ningn cambio en la pgina y eso se debe a que el valor em de 1 se vincula con un tamao de letra del 100%, que es lo que hemos definido para el cuerpo. Quiz nos ayude a entender esta relacin si la expresamos en forma matemtica:
1 em = 100% = 16 pixels.

Aqu tenemos que el tamao de letra para el prrafo es de 1em, el tamao de fuente para el cuerpo es 100% y el tamao de fuente por defecto para el navegador es de 16 pixels. Una vez definida la relacin, podemos empezar a variar el valor de "em" para agrandar o reducir el tamao de la letra. 11 Cierra el navegador y vuelve al editor de texto. En la regla para el prrafo, cambia este valor:
font-size:0.875em;

12 Guarda el archivo y brelo en el navegador. Ahora el texto del prrafo es ms pequeo.

Hemos declarado el tamao de fuente para el prrafo en unidades "em".

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 51 de 156

La razn por la que utilizamos un valor tan exacto como 0.875 es porque as el tamao de la fuente equivale a 14 pixels. Si ests empezando a pensar que el diseo de pginas web es una ciencia matemtica, no te preocupes demasiado. Todo ser ms fcil a partir de ahora. Si tienes curiosidad, vers que multiplicando el valor de 16 pixels que es el tamao por defecto del navegador, por el valor em (0,875) el resultado es 14.. 13 Ahora vamos a modificar el tamao de los ttulos, pero utilizando unidades em. En la regla h1, vamos a aadir esta lnea:
h1 { font-size:1.5em; }

Esto hace que el tamao de los ttulos de nivel 1 sea vez y media el tamao normal del texto del cuerpo. Es equivalente a 24 pixels. Guarda el archivo y mustralo otra vez en el navegador para ver el efecto. En este momento, el texto h1 es de aproximadamente el mismo tamao que h2, lo que no tiene mucha lgica, as que vamos a reducir tambin el tamao de letra para la etiqueta h2. 14 En la regla h2 aade la siguiente lnea:
h2 { font-size:1.25em; }

Esto provoca un cambio de escala que hace que los textos de h2 sean 1,25 veces ms grandes que el texto normal del cuerpo, lo que (siguiendo nuestra frmula matemtica) nos da un valor real de 20 pixels. 15 Guarda el archivo y mustralo otra vez en el navegador. Ahora tendrs que ver el texto manteniendo las proporciones adecuadas.

Establecemos el tamao de letra del elemento h2 (ttulo de nivel 2) a 1.25 ems. Recuerda que una de las razones ms importantes para utilizar em como unidad de medida es que se adapta en el caso de que un usuario altere el tamao del texto de su navegador. Podemos simular este efecto si aumentamos el tamao de la letra en el navegador. Por ejemplo, en Internet
Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 52 de 156

Explorer 9 podemos ir a la opcin View de la barra de men, seleccionar "Text Size" y elegir entre unas cuantas opciones. Podrs ver que el texto reacciona bien a este cambio de escala. Cuando termines asegrate de que vuelves a dejar el tamao del texto en el valor por defecto. Muchos navegadores tienen un comando que permite hacer esto. El problema que nos plantea el cambio de tamao del texto en los navegadores es algo ms complicado, ya que algunos utilizan la funcin "zoom" que aumenta o reduce la escala de toda la pgina. Los navegadores que disponen de zoom pueden tener, adems, una opcin aparte para variar solo el tamao de la letra. Otra de las ventajas de utilizar ems tiene que ver con la relacin 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 ms pequeo, y solo hemos cambiado un valor! Esto es por la relacin que mantiene la unidad em con el elemento body. Algunos diseadores asignan de esta forma un tamao de base si, por ejemplo, el cliente quiere que el tamao de letra sea ms grande o ms pequeo en todo el sitio web. En lugar de modificar las propiedades una a una, con una sola regla controlamos mltiples tamaos de letra de una manera ms fcil. 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 leccin.


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 grfico con los rtulos dentro). Si utilizamos textos en vez de imgenes con texto creadas con programas como Photoshop o Illustrator, nuestros sitios web sern accesibles para una audiencia ms amplia de usuarios, dispositivos y (muy importante), buscadores.

Auto estudio
1 Aade otro ttulo debajo del ltimo prrafo 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 rtulo con letra de color naranja.

Repaso Preguntas
1 Qu es un doctype y qu relacin tiene con la validacin de las pginas web?

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 53 de 156

2 En el siguiente cdigo XHTML, cul es el atributo y qu valor tiene? Qu otros atributos podramos 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 utilizacin.

Respuestas
1 Un doctype es una declaracin que se hace al principio de los documentos HTML. Los navegadores web la utilizan para saber qu lenguaje de markup y qu versin se utilizan en la pgina. La validacin de pginas comprueba la conformidad de la sintaxis del cdigo respecto de las especificaciones deldoctype declarado. La validacin de las pginas es una buena opcin para detectar problemas como etiquetas que faltan o errores de tipografa en el cdigo. 2 En esta lnea de cdigo, el atributo es src y su valor es "images/familysitting.jpg". El atributo src y su valor estn anidados dentro de la etiqueta <img>. Este atributo contiene un vnculo a un archivo de imagen que se mostrar en pantalla. Otros ejemplos de atributos para imgenes 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 tamao que debe tener la imagen dentro de la pgina. 3 Una hoja de estilos CSS externa es un documento de texto con extensin .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 mltiples pginas web, nos permiten disponer de un lugar centralizado para la definicin 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 mltiples hojas de estilos para facilitar su mantenimiento posterior e indicar hojas de estilo especficas para imprimir el documento o para optimizar su presentacin en dispositivos mviles.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 54 de 156

Leccin 3: Introduccin a la presentacin en pantalla con CSS


Objetivos:
En esta leccin aprenderemos los conceptos fundamentales de diseo Web basados en CSS y la preparacin de una estructura visual de pgina web con dos columnas y anchura fija. Adems veremos el empleo de un archivo de reset de CSS y cmo se aade a las pginas. Se aborda tambin el uso del elemento <div> y las propiedades float y clear para crear columnas en la pgina.

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 prcticas hemos utilizado como editor de textos Microsoft Visual Web Developer Express, pero existen numerosas alternativas para la creacin y edicin de pginas Web que puedes utilizar tambin.

El papel del archivo de reset CSS


Antes de empezar a crear un diseo visual de pgina Web vamos a ver cmo 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 captulo precedente cmo CSS nos permite definir estilos para tipos de letra, modificando el tamao y la fuente, pero hay otros estilos no tan obvios. Por ejemplo: el estilo por defecto para un elemento heading 1 (<h1>) incluye unos mrgenes de 10 pixels por encima y por debajo del texto. Si queremos modificar el estilo de h1 para que no lleve mrgenes, tendremos que indicar de manera explcita unas reglas que conviertan dichos valores a cero. Una regla CSS para anular los mrgenes superior e inferior de los elementos heading 1 es as: h1{ margin-top:0px; margin-bottom:0px; } Todos los elementos HTML incluyen mrgenes por defecto. Aunque los navegadores web actuales tienen una calidad muy superior a los antiguos, conviene saber que cada motores de restitucin empleado por los navegadores aplica sus propias reglas para mostrar los elementos en pantalla. En teora 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 homogneos a la hora de ver las pginas en distintos sistemas (no obstante, las diferencias tampoco son tan drsticas como hemos sugerido en este ejemplo, pero existen y hay que contar con ellas). Una tcnica 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 ms frecuencia. Con este reseteo de valores podemos conseguir una base fiable y coherente sobre la cual construir nuestros nuevos estilos. Para hacernos idea de cmo funcionan los estilos, vamos a abrir una pgina que ya tiene varios estilos y le asociaremos una hoja de estilos CSS de reset.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 55 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 genricos, como ttulos, prrafos, listas y formularios. No incluye estilos CSS. 2 Muestra en el navegador la pgina y mira el espacio de separacin que hay entre los ttulos, y fjate tambin 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 cmo afecta a la presentacin en pantalla de estos elementos. Cierra el navegador y vuelve al editor. 3 Aade la siguiente lnea de cdigo (destacada en color rojo) debajo de la etiqueta de ttulo para asociar la hoja de estilos reset.css que se encuentra tambin 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 visualzalo en el navegador

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 56 de 156

Una pgina con elementos HTML habituales con reset de estilos CSS. Muchos de los elementos en esta pgina tenan los mrgenes y distancias al borde prefijadas a cero. En consecuencia, el espacio entre ellos se ha eliminado. Se han reseteado tambin otros muchos estilos, como por ejemplo las listas de datos, que se han dejado en valor none, lo que elimina los puntos (las vietas o bullets como tambin se los denomina en los textos) de las lneas en las listas no ordenadas, as como los nmeros 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 mrgenes, mrgenes 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 pginas web. Recuerda que las hojas de estilos de reset son opcionales. Nos ayudan a normalizar la presentacin en los distintos navegadores, y algunos diseadores tambin incluyen en ellas sus propios estilos de uso frecuente para resetear los valores iniciales de los elementos.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 57 de 156

de la hoja de estilos de reset

ue el primer desarrollador que prepar hojas de estilo de reset, que despus distribuy para uso pblico. Puedes utilizar sus reglas de estilo en e

quieres buscar ms informacin sobre las tcnicas de reset, visita la web http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/.

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

uencia es Verdana, puedes aadir esta regla al estilo del elemento body. Si te gusta poner ms espacio de separacin entre prrafos, puedes fija

r de tamao de lnea que te parezca ms adecuado. Lo que importa es disponer de una serie de reglas coherentes que se puedan utilizar para

quier proyecto de inmediato.

jas de reset CSS puede tener algunas desventajas, sobre todo para los nefitos: tendrn que recordar constantemente que estn utilizando dicha

s y deben tener en cuenta cmo afectar a los distintos elementos del sitio web. Si estamos aplicando la hoja de reset a todo el sitio, algunos de

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

los mrgenes externos e internos de la mayora de los elementos de los formularios, y cuando utilizan por primera vez con campos de formula

eguntan por qu los botones, campos de texto y otros elementos aparecen de esa forma.

Breve historia de las tcnicas de presentacin en pantalla para la Web


Aunque aqu vas a aprender a crear un diseo visual de pgina utilizando estilos CSS, debes saber que esto no ha sido siempre la tcnica normal. Cuando se empez con el diseo web a mediados de los 90, el nico mtodo que se poda emplear para crear estructuras visuales complejas, como por ejemplo la presentacin en varias columnas, consista 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 diseadores empezaron a utilizar este elemento como base para las estructuras visuales de las pginas. En aquel momento esa tcnica estaba plenamente justificada: las tablas era lo nico que tenan para generar el tipo de diseos que se necesitaban y, adems, eran un recurso extremadamente flexible. A partir de aqu, empezaron a utilizarse tcnicas como el anidamiento de tablas, es decir, crear tablas dentro de celdas de otras tablas de mayor tamao. Por ejemplo, el cdigo para una pgina normal de dos columnas poda 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 seccin de cabedera, no interesara que quedase dividida en dos columnas. La etiqueta HTML <colspan> permite fusionar las dos celdas:

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 58 de 156

Una tabla cuya primera fila consta de dos celdas fusionadas en una sola. En esta primera fila el diseador, por ejemplo poda intentar insertar una seccin independiente de tres columnas, para mostrar un logo y otros elementos, como una barra de navegacin o un campo para pedir credenciales de usuario. Para aadir esta seccin, el diseador tena 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 diseador tena que configurar la tabla inicial con una anchura y altura fijas. Supongamos que el diseador tambin quisiera un borde negro fino para todos los elementos. La propiedad border de las tablas HTML es muy bsica no nos permite aadir colores. Una solucin frecuente consista en insertar la tabla actual dentro de otra, que consista 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 ms, el diseador poda as crear una estructura visual basada en tablas con un cierto estilo.

Tpica 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 pginas, por lo que los elementos de tabla de HTML van regresando, poco a poco, a su funcin original, que es la de mostrar datos

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 59 de 156

estructurados, y abandonan su papel como armazn visual de las pginas. Seguramente podrs 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 bsicos de CSS que nos permiten obtener los mismos resultados.

Introduccin a las distintas opciones de presentacin de pginas


Antes de la estructura visual de nuestras pginas web tenemos que decidir unas cuantas cosas. Lo primero es qu anchura va a tener. Hay dos categoras 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 pgina se anidan dentro de un contenedor que tiene un ancho explcito (en este ejemplo utilizamos el valor de 960 pixels, pero se suele utilizar tambin la unidad de medida em). La anchura fija es una solucin muy cmoda para el diseador ya que permite ubicar con precisin los distintos elementos (cabeceras, barras laterales y pies de pgina). Adems aporta un esqueleto robusto para otros elementos, como la anchura de prrafo o el posicionamiento de imgenes cuando stas aparecen en gran nmero (por ejemplo en sitios web de catlogos de producto).

Las estructuras de ancho fijo indican explcitamente la anchura y ocupan un espacio definido dentro de la pgina web. Las estructuras flexibles se llaman as porque estn 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 diseada es capaz de ajustarse automticamente al tamao de ventana del navegador.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 60 de 156

Las estructuras visuales flexibles se reajustan al cambiar el tamao de la ventana del navegador. Estas estructuras son adecuadas para la web porque permiten el reposicionamiento en pantalla de textos e imgenes. Puesto que los dispositivos mviles suponen actualmente una proporcin 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 telfonos mviles). Las estructuras de ancho variable son ms difciles de disear y obligan al creador a resolver una serie de asuntos adicionales. Por ello, en esta leccin vamos a empezar por crear una estructura de anchura fija.

El elemento <div>: creacin de una estructura CSS de dos columnas con anchura fija
En esta prctica vamos a crear una estructura visual de anchura fija con dos columnas. Para empezar vamos a trabajar con una pgina sencilla que ya hemos preparado para ti. Esta pgina emplea una serie de elementos <div> para generar su estructura de base. Podemos considerar al elemento <div> como un contenedor genrico en el que podemos poner elementos relacionados entre s de forma lgica. La apertura y cierre de etiquetas <div> suele hacerse rodeando a otros elementos de la pgina, de forma que dichos elementos quedan anidados dentro del contenedor. Puedes tener en la misma pgina todos los elementos <div> que consideres necesarios y con frecuencia se utilizan para crear el armazn visual. Un elemento <div> suele llevar un atributo ID (con lo que adquiere un nombre explcito dentro de la pgina) o bien pertenecer a una clase CSS, utilizndose ambos como medio para aplicar al contenedor uno o ms estilos CSS. El empleo de elementos <div> facilita a otras personas la identificacin de las diversas secciones en que se subdivide la pgina y tambin nos ayuda a controlar y aplicar estilos en cada una de ellas. En esta prctica 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

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 61 de 156

2 Guarda el archivo en el disco con el nombre 03_layoutwork.html. As conservars el archivo original como copia de seguridad. Esta pgina contiene una serie de elementos HTML <div> con algn contenido que queremos mostrar en pantalla en ciertas posiciones. Analiza el cdigo de la pgina para tratar de entender cmo se ha creado. Hemos incorporado algunos comentarios que te orientarn. La estructura de la pgina te la entregamos prediseada. A lo largo de esta prctica vamos a ver en detalle cmo funciona. El primer paso consiste en saber cul es la funcin de la etiqueta <div> y el papel tan importante que representa en la organizacin visual de las pginas con CSS. 3 En el editor, encuentra la lnea <div id="wrap">. Es el comienzo de una seccin de la pgina 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 dems elementos HTML, como los prrafos (<p>) o las listas (<ul>, <li>, <dl>), ejercen diversos efectos sobre sus contenidos. La etiqueta <div> as como los prrafos y listas, entre otros, son elementos de bloque. Los elementos de bloque generalmente se insertan en las pginas en la lnea 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 pgina tal y como se ve en el original. 4 Abre la pgina en el navegador. El archivo reset.css con el que hemos estado trabajando antes es el que hace que todos los elementos de la pgina aparezcan pegados unos a otros.

Esta pgina incluye una serie de secciones div y los estilos aplicables a los elementos HTML se han reseteado. Para ver cmo 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 aadido al documento. Inserta una regla de estilo para el ID llamado wrap. El siguiente cdigo (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 pgina en el navegador. El div wrap incluye dentro a todos los dems elementos de la pgina, 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 presentacin muy bsica, que

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 62 de 156

sigue el modelo de ancho variable. Si cambias el tamao de la ventana, vers que el texto se reorganiza. Ahora vamos a declarar una anchura fija para el div wrap. 6 En el editor de texto aade estas dos lneas de cdigo (destacadas en rojo) a tu estilo #wrap: #wrap { background-color:#E0B3B9; width:960px; border:thin solid black; } Guarda la pgina y vuelve a visualizarla en el navegador. Ahora el div wrap ocupa 960 pixels de la pgina.

El div wrap ahora tiene una anchura de 960 pixels y un borde fino de color negro alrededor. Tambin hemos cambiado el borde, para mostrar mejor los lmites 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 aade esta lnea de cdigo 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 mrgenes superior e inferior del div wrap, y el valor auto indica los mrgenes derecho e izquierdo. El valor auto calcula automticamente 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 tamao de la ventana). Guarda el archivo y visualzalo de nuevo en el navegador, para ver cmo 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 bsico 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 aadiendo este cdigo 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

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 63 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, aade el siguiente cdigo que se aplicar a masthead: #masthead { background-color:#FFF; } Guarda el archivo y mustralo 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 seccin masthead ahora tiene un logo y un color de fondo. 10 La seccin de navegacin va a exigir un trabajo ms avanzado, iremos con ello ms adelante en esta misma seccin. De momento vamos a declarar unas cuantas reglas de estilo bsicas para definir esta seccin en la pgina. Pon el siguiente selector y sus reglas debajo de la regla #masthead: #mainnav { background-color:#666; height:40px } 11 Guarda la pgina y visualzala en el navegador.

La seccin mainnav tiene ahora color de fondo y una altura definida. Estamos aplicando estilos a la pgina empezando por arriba y bajando hacia el final, y ya hemos llegado a la seccin interna que contiene la barra lateral y el contenido. Vamos a ver cmo se crean columnas para su colocacin mediante divs. La actual especificacin CSS no tiene un elemento columna. Las columnas

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 64 de 156

como tales son divs con estilo que normalmente son ms altas que anchas. Para ver cmo 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 diseo de imprenta, donde a este efecto se le llama justificacin del texto. CSS consigue el mismo efecto haciendo que los elementos que siguen a un elemento flotante puedan rodearlo, cambiando su posicin relativa con respecto a l. Este comportamiento tambin nos sirve para crear columnas en una pgina. En la imagen de la izquierda hay un grfico anidado dentro de un prrafo. El grfico 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 grfico. El grfico 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).

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 65 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 tambin declarar como left. En el ejemplo anterior, la imagen pasara al lado izquierdo del div contenedor, y el texto se empezara 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 mltiples 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 pginas web, como por ejemplo los mens horizontales o las galeras de imgenes. Es fundamental conocer cmo interactan mltiples elementos flotantes unos con otros a fin de utilizarlos correctamente. Veamos este ejemplo: son seis imgenes 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 imgenes, y 6 10 suman 60 pixels de margen. Por tanto, las imgenes junto con sus mrgenes nos caben dentro del div, que tiene una anchura total de 360 pixels.

Si hemos declarado una anchura explcita para el contenedor, al aadir una nueva imagen hacemos que se posicione en la fila siguiente:

Esto nos puede servir, por ejemplo, para crear una galera de imgenes en miniatura, pero no nos vale para un men! En la prctica siguiente vamos como usar la propiedad float para crear una estructura de dos columnas.

Creacin de columnas con la propiedad float


Vamos a aplicar la propiedad float a los divs de contenidos sidebar y main para ver cmo les afecta. 1 Aade el siguiente selector y las reglas de estilo debajo de la regla #mainnav: #sidebar { float:right; width:300px; background-color:#CCC; }

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 66 de 156

Guarda la pgina y mustrala en el navegador. La pgina aparece rota. Ahora vas a ver qu es lo que causa que la pgina salga rota como en este caso, ya que este efecto ensea cmo funciona la propiedad float. Aunque la pgina parece rota, los divs estn 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 lmites de otros elementos de la pgina. Ahora vamos a declarar como flotante al otro div, hacia el lado izquierdo, y vamos a ver cmo afecta eso a nuestra pgina. Vuelve al editor. 2 Aade 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 pgina en el navegador. El div main flota hacia la izquierda, pero el footer sube a la parte superior siguiendo el curso o flujo de restitucin de la pgina. 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. Tambin vemos que tenemos otro problema con el elemento footer: debera aparecer en la parte inferior de la pgina pero no es as. Para obligar al div footer a ponerse en la parte inferior de la pgina le vamos a asignar una nueva propiedad llamada clear.

La propiedad clear
Cuando aadimos 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 pgina, queremos eliminarlos de ambos lados. 1 Aade este nuevo selector y sus reglas debajo de las reglas de #main: #footer { clear:left; background-color:#BA2B22; } 2Guarda el archivo y visualzalo en el navegador. Ahora el pie de pgina 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 posicin disponible. Cierra el navegador y vuelve al editor.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 67 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 evitaramos, una forma ms segura de resolver esta situacin 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 pgina. 4 Guarda el archivo y vuelve a mostrarlo en el navegador. Vers que no cambia con respecto al paso 3 pero el pie de pgina ahora est mejor preparado para cambios futuros en el contenido.

Creacin de un men de navegacin basado en listas con float


Ahora que has aprendido los conceptos bsicos de float y clear, volvamos a la seccin de la barra de navegacin y vamos a aadir un men sencillo basado en una lista no ordenada (es decir, que sus lneas no llevan numeracin, sino vietas o signos). Los elementos de la lista dentro de este men tendrn que ser flotantes para modificar la presentacin vertical por defecto de las listas. Los mens de navegacin CSS se utilizan mucho en el diseo basado en estndares porque se pueden actualizar y modificar de manera mu sencilla, y porque se basan en textos ( y no en imgenes), lo que mejora la accesibilidad en dispositivos como los lectores de pantalla, e incluso ayudan a mejorar el posicionamiento de nuestras pginas en los buscadores.

1 Desde el editor de textos, busca el div mainnav y adele la siguiente lista no ordenada y estas lneas: <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 pginas que todava no existen. Pero necesitamos crear estos enlaces para que se apliquen correctamente los estilos que vamos a declarar ahora. 2 Guarda el archivo y visualzalo en el navegador.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 68 de 156

La lista aparece en la posicin vertical por defecto y se superpone a la barra lateral. Fjate que la pgina aparece otra vez como rota. Esto se debe a que la lista se est superponiendo a la barra lateral flotante. Adems la lista no tiene los puntos (vietas) indicadores. Recuerda que nuestra pgina 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 navegacin. 3 Vuelve al editor y localiza la regla #mainnav. Aade una nueva regla entre sta y la regla de la barra lateral pulsando Intro unas cuantas veces e insertando el cdigo siguiente: #mainnav li { float:left; } Fjate que en este paso estamos creando una nueva regla justo despus de #mainnav. Aunque podramos haber insertado la regla al final de la hoja de estilos, las buenas prcticas recomiendan que se pongan juntas las reglas que tienen relacin entre s para que el cdigo est ms organizado y sea ms fcil 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 definisemos una nueva regla para aplicarla a los elementos de lista (en general), afectara a todos los elementos de lista de nuestra pgina, lo que no nos valdra para nuestro ejemplo, ya que queremos organizar visualmente solo esta lista. 4 Guarda la pgina y visualzala 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 seccin mainnav, pero lo vamos a resolver aadiendo unas cuantas reglas de estilo ms.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 69 de 156

Al declarar los elementos de la lista como flotantes, se colocan en sentido horizontal. 5 Vuelve al editor y aade este cdigo 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 cdigo 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 aadido un color de fondo, hemos alineado cada elemento al centro del recuadro y adems, se dibujarn en pantalla los bordes verticales de cada recuadro con un trazo negro de 1 pixel. Guarda el archivo y visualzalo 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 fcil 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 declaracin de border-right, aade esta lnea de cdigo: line-height:40px; 7 Guarda el archivo y mustralo en el navegador, El texto aparece ahora centrado dentro del recuadro. Conviene notar que podemos tener problemas si en un futuro cambisemos el texto de los elementos de la navegacin, ya que tanto el valor de line-height como el tamao del propio contenedor se basan en el tamao de la fuente. Si cambisemos el tamao de la fuente o la altura de la seccin nav, habra que volver a ajustarlo todo para compensar los desplazamientos.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 70 de 156

Aadiendo el valor line-height a los elementos de la lista se posicionan verticalmente dentro de la barra de navegacin.

Aadir 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 Leccin 2. Hasta aqu hemos aadido los estilos dentro de una hoja de estilos interna en vez de hacerlo sobre una externa. Cuando estamos diseando la estructura de las pginas, el empleo de hojas de estilo internas es una cuestin de comodidad: resulta ms sencillo para crear y modificar reglas si las tenemos dentro de la pgina 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 aade reglas de base para elementos como ttulos, listas y prrafos.

1 En la parte inicial del archivo HTML busca la etiqueta <link> de la hoja de estilos reset.css. Para aadir otra hoja de estilos externa, selecciona esta lnea y pulsa Ctrl + C para copiarla. En la lnea 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 visualzalo en el navegador para ver cmo afectan estos nuevos valores a nuestra pgina. Ahora los titulares y el texto del cuerpo se escriben utilizando el tipo de letra MS Trebuchet y tambin se han aplicado algunos otros estilos. La pgina 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

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 71 de 156

incluye este archivo CSS. Los conceptos bsicos para los tipos de letra y tamaos ya los vimos en la Leccin2. Mantn abierto el archivo, porque lo vamos a modificar dentro de un momento. Existen algunas propiedades CSS adicionales aplicables a las fuentes, como font-weight, texttransform o letter-spacing. Si quieres ms informacin e instrucciones paso a paso para utilizar tcnicas avanzadas de estilos para texto, puedes leer la Leccin 3 Formateo de Textos con CSS en el libro HTML5 Digital Classroom.

Efecto de los mrgenes internos y externos en una estructura de anchura fija


En esta seccin vamos a separar las secciones de texto de nuestra pgina (que en este momento tienen mrgenes 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 pgina. El objetivo de esta prctica no consiste en mostrar un mtodo nico de organizacin con CSS, sino en conocer las diferentes opciones posibles, lo que te ayudar en futuros proyectos a la hora de decidir qu mtodo es el ms adecuado en cada caso. En este primer ejercicio vamos a aadir 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. Vers que el texto de la barra lateral est pegado al borde, quedara 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. Bsicamente 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 tcnicas, empezando por el padding. 2 Vuelve al editor, localiza la regla para el sidebar en el cdigo CSS y aade esta lnea:

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 72 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 separacin o margen interior con respecto al borde superior. El segundo valor (20px) corresponde a la separacin con respecto al margen derecho. El tercero (0px) es la separacin con respecto al borde inferior y el ultimo (20px) es el margen interior de separacin aplicable al borde izquierdo. Guarda la pgina y visualzala en el navegador.

Aadiendo 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 aadir 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 ms 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 ms del padding que acabamos de aadirle. Como veremos ahora, es sencillo de hacer pero nos genera otro tipo de problemas que podremos comprobar en seguida. 3 Vuelve al editor. Aade una cantidad de margen interno al div main porque tambin necesitamos separa el texto del borde en esa parte de la pgina. Encuentra la regla #main y aade el siguiente valor de padding: #main { width:600px; float:left; background-color:#ADA446;

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 73 de 156

padding:0px 20px 0px 20px; } Guarda el archivo y mustralo en el navegador: aparece un problema nuevo. La anchura total de las dos columnas, ahora que hemos aadido el padding, es mayor que la del contenedor donde estn 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 tambin podemos reducir el valor del margen interno. Todos estos mtodos se basan en el uso de padding y existe un mtodo 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 aadido en los pasos 2 y 3. Seleccinalas y elimnalas. Vamos a conseguir un efecto equivalente pero aadiendo reglas de margen a los elementos de texto dentro de las columnas en el paso siguiente. 5 Debajo de la regla #footer del cdigo CSS, aade esta regla nueva: p, h1, h2, h3 { margin-left:20px; margin-right:20px; } Esta regla aade un margen de 20 pixels a la derecha y la izquierda de todos los prrafos y ttulos de la pgina. Guarda el archivo y visualzalo en el navegador.

Si aadimos mrgenes a los elementos dentro de la barra lateral, aumenta la separacin con respecto al borde pero no se incrementa el tamao del contenedor. Como veamos 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 aadimos margen externo a los elementos de

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 74 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 distribucin en pantalla con tanta facilidad como cuando utilizamos el valor de padding. Pero esta tcnica tambin tiene sus desventajas, puesto que las reglas que acabamos de crear se van a aplicar a todos los prrafos y ttulos de nivel 1, 2 y 3 de la pgina. Por ejemplo, vers que el texto del pie de pgina se ha desplazado tambin 20 pixels a la derecha porque su contenido es un prrafo. 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 aadido en el paso 5 (pero deja la regla tal cual). Aade 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 prrafo, heading 1, heading 2 y heading 3 que puedan existir en los elementos cuyo ID sea sidebar y main, que, como recordars de la Leccin 2, se indica precediendo el nombre de ID con el smbolo de la almohadilla (#). A todos estos elementos se les aplicarn mrgenes 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. Prcticamente no veremos cambios excepto en el pie de pgina, 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 mtodo exige algo ms de atencin a los detalles que el mtodo 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 veran pegados a la izquierda, otra vez). Tambin puede que desees que alguno de los elementos tenga un margen distinto. Por ejemplo, que quieras indentar los prrafos dentro de la columna main hacia la derecha. En tal caso, habr que aadir otra regla expresamente para los elementos p del div #main, como se indica en el paso siguiente. 8 Aade una nueva regla justo debajo de la regla anterior, donde aparecan 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 habas creado en el paso 6. Guarda el archivo y visualzalo en el navegador. Los prrafos 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.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 75 de 156

Los prrafos del div main tienen reglas explcitas con un margen de 30 pixels. Excepto en el caso de los cambios que hemos hecho en esta prctica, todos los dems mrgenes internos y externos de los elementos se han dejado en cero, en aplicacin de la hoja de estilo de reset. Para aumentar la separacin del resto de elementos podemos utilizar el grupo de reglas que hemos creado hace un momento. 10 Encuentra la regla vaca 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 pgina y brela con el navegador. Ahora, casi todos los elementos se separan un poco ms unos de otros, al aadirse espacio a sus bordes inferiores. Podemos seguir afinando todos estos valores para mejorar el aspecto de la pgina, por ejemplo insertando un margen superior al ttulo 2 de la barra lateral, lo que podemos hacer con el cdigo del paso siguiente: 11 En el editor de texto, aade esta regla debajo del grupo de reglas para #main y #sidebar: #sidebar h2 { margin-top:15px; } Guarda de nuevo el archivo y mustralo en el navegador. Ahora el ttulo h2 de la barra lateral queda ms separado del borde superior del contenedor.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 76 de 156

Despus de aplicar un margen superior de 15 pixels al ttulo h2 de la barra lateral.

Repaso al uso de mrgenes internos y externos


En esta leccin hemos visto dos mtodos para separar los elementos dentro de una pgina. El primero consiste en aadir 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 solucin rpida y eficiente. Su desventaja es que aumenta la anchura total del propio contenedor. Para compensar esta expansin, tenemos que dejar algo de espacio adicional a los lados. Este comportamiento puede generar cierta confusin y provocar que las pginas se restituyan incorrectamente si no tenemos cuidado. El segundo mtodo consiste en aadir mrgenes externos a los elementos que estn dentro del propio div. Su desventaja es que necesitamos ms cdigo y hay que prestar atencin a los detalles, tenemos que ir viendo cmo se posicionan los elementos individualmente. Su ventaja es que el posicionamiento de la columna es ms predecible, puesto que solo tenemos que tener en cuenta una anchura total. Finalmente, conviene destacar que lo habitual es aplicar una combinacin de ambos mtodos en cualquier estructura de presentacin. Por tanto, debes conocer bien el comportamiento y los efectos de cada uno de ellos.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 77 de 156

Aplicar una imagen de fondo al pie de pgina


Hasta ahora nuestra estructura de pgina muestra los colores de fondo que hemos declarado a los elementos div. En esta prctica vas a aprender a insertar imgenes. Para ello empezaremos por aadir una imagen de fondo al pie de pgina 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 pgina y brela en el navegador. A cada uno de los prrafos se le aplican las reglas de prrafo descritas en la hoja de estilos. Ahora vamos a aadirle 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 pgina (#footer). Aade una nueva regla para aplicar una imagen de fondo indicando un archivo de la carpeta de imgenes de tu equipo: #footer { clear:both; background-color:#BA2B22; background-image:url(images/footer_background.jpg); background-repeat:no-repeat; }

Guarda la pgina y vuelve a mostrarla en el navegador. El pie de pgina tiene ahora una imagen de fondo por aplicacin de una nueva regla CSS. La imagen de fondo ahora aparece detrs de los textos. Fjate en la propiedad background-repeat del cdigo anterior. CSS, por defecto, considera a las imgenes de fondo como baldosas que se van aadiendo sin lmite 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 pgina 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 pgina aadiendo las lneas en rojo: #footer { clear:both; background-color:#BA2B22; background-image:url(images/footer_background.jpg); background-repeat:no-repeat; width:960px;

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 78 de 156

height:128px; } Guarda el archivo y vuelve a mostrar la pgina en el navegador. Ahora el tamao de la zona de pie de pgina coincide con el tamao de la foto. El paso siguiente consiste en ajustar los estilos del texto que va dentro, separndolos. 5 En el editor de texto, encuentra la regla #footer y justo debajo aade esta otra regla para prrafos, que se aplicar nicamente a los prrafos del footer: #footer p { margin:10px 0px 0px 20px; width:280px; font-family:Verdana, Geneva, sans-serif; font-size:0.689em; } Esta regla aade un margen superior de 10 pixels y margen izquierdo de 20 pixels a ambos prrafos del pie. Al definir la anchura de los prrafos podemos forzar un salto de lnea 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 ayudarn a conseguir un efecto ms atractivo con un tipo de letra ms pequeo. 6 Guarda la pgina y visualzala en el navegador.

Los prrafos de texto del pie de pgina con los nuevos estilos. En la seccin anterior hemos visto cmo se utilizan los mrgenes internos y externos, es una tcnica muy habitual. Podramos haber aadido algo ms de espacio entre el primer prrafo y el borde superior del pie de pgina, pero al aumentar el margen superior en la regla #footer p estamos aadiendo espacio tambin al segundo prrafo. En este caso, lo conveniente es aadir margen interior al div footer tal y como se indica en el paso siguiente. 7 Aade la declaracin 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 pgina


Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 79 de 156

Podemos aplicar colores de fondo y/o bordes a los elementos principales de nuestra estructura en las primeras fases del diseo, lo que nos ayudar a ver mejor sus lmites. Despus, 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 pgina, aadiremos algunas imgenes de fondo y mejoraremos algo el estilo de nuestra barra de navegacin. 1 Elimina toda la propiedad background-color en las siguientes 4 reglas de estilo: #wrap, #sidebar, #main y #footer. Guarda el archivo y visualzalo en el navegador.

Los mismos elementos estructurales una vez eliminados los colores de fondo. 2 Aunque nos vamos aproximando a un diseo de pgina unificado, an tenemos que hacer unas cuantas cosas ms. Vamos a empezar por poner un fondo de gradiente de color a la barra lateral. La mejor forma de hacerlo es mediante la insercin de una imagen de fondo. Vuelve al editor y aade 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 prctica anterior con el pie de pgina, ahora estamos aadiendo 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 Aade tambin esta otra declaracin para aplicarla al borde Izquierdo de la barra. Nos va a ayudar a delimitar mejor la separacin con respecto al contenido del rea principal (main).

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 80 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 mustralo 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 especfica para imgenes dentro del div masthead. Encuentra la regla #masthead y adele esta lnea justo debajo. #masthead img { margin-left: 20px; } Se trata de un selector contextual igual que otros que hemos ido aadiendo a los ttulos y prrafos dentro de las columnas main y sidebar. En este caso, se trata de una declaracin para aadirle margen por la izquierda a todas las imgenes que puedan aparecer en el div masthead. Lo ltimo que nos quedara por hacer es mejorar la apariencia de la barra de navegacin. En este momento estamos empleando unos estilos muy rudimentarios. Ahora los vamos a mejorar para ponerla a la altura del resto de nuestra pgina y adems le vamos a aadir algo de interactividad.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 81 de 156

5 Para mejorar la presencia visual de los enlaces dentro de la seccin mainnav vamos a aadir una regla explcita para los enlaces. Encuentra la regla #mainnav li y aade la siguiente regla justo debajo de ella: #mainnav ul li a { color:#ffffff; text-decoration: none; display:block; } La declaracin text-decoration elimina el subrayado del vnculo y le cambia el color a blanco. La declaracin display:block hace que estos elementos de navegacin llenen por complete todo el espacio de la barra de navegacin. Entenders mejor qu significa esto cuando creemos un efecto dinmico que se activar al pasar el ratn por encima, en el paso siguiente. Guarda el archivo y visualzalo de nuevo en el navegador.

La barra de navegacin con enlaces, despus de eliminar el subrayado 6 Cuando el usuario pasa el cursor por encima de los enlaces, sera interesante que cambiasen su apariencia, as sabe que se trata de vnculos y no de texto normal. Para ello podemos aprovechar una particularidad de los estilos que solo tienen los vnculos. Justo debajo de la regla #mainnav ul li a , aade esta otra: #mainnav ul li a:hover { background-color:#666666; color:#D2CD2F; }

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 82 de 156

Los enlaces poseen una categora exclusiva llamada pseudoclases. Hay cuatro estilos asociados a los vnculos, 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 navegacin cuando tienen encima el cursor. La pseudoclase a:visited se aplica al vinculo despus de que el usuario ha pulsado sobre l, y la pseudoclase a:active modifica su aspecto cuando le estamos pulsando con el botn. 7 Guarda el archivo y mustralo en el navegador. Pasa el cursor por encima de los enlaces para ver los cambios. Es el resultado del estiloa:hover.

Al pasar el ratn sobre los enlaces de la barra de navegacin se dispara el estilo a:hover. Ya has completado las prcticas de esta leccin. Hemos visto la diferencia entre las estructuras basadas en tablas y en CSS. Adems has aprendido el uso de las propiedades float y clear para crear columnas dentro de la pgina. Tambin hemos visto las ventajas y desventajas del uso de mrgenes externos (margin) e internos (padding) a la hora de definir el aspecto de los objetos dentro de los contenedores. EL diseo de estructuras visuales de las pginas web es un tema muchsimo ms amplio, si tienes inters en conocer ms a fondo las tcnicas avanzadas para diseo de pginas Web, te recomiendo que leas el libro "HTML5 Digital Classroom" y ms concretamente, el captulo Leccin 5: Diseo avanzado con CSS.

Autoestudio
1 Para seguir practicando con mrgenes internos y externos, aade otros contenidos a la seccin main. Por ejemplo, puedes aadir un ttulo de nivel 3 y una lista no ordenada entre los dos prrafos: <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 Despus de aadir este cdigo, utiliza los conocimientos adquiridos en esta leccin para experimentar con la colocacin de estos elementos dentro de la pgina.

Repaso Preguntas
Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 83 de 156

1 En qu consiste un diseo de anchura fija y un diseo de ancho variable?. Qu ventajas y desventajas presentan cada uno de ellos? 2 Qu hace la propiedad float de CSS y cundo conviene utilizarla? 3 Tu compaero ha aadido un prrafo al div sidebar que ha creado. El prrafo est pegado al borde mismo de la barra lateral. Indcale dos tcnicas que puede emplear para separar un poco el prrafo con respecto a los bordes del contenedor

Respuestas
1 En un diseo 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 diseos es que es ms fiable a la hora de colocar los dems elementos. Su desventaja ms importante es que no altera su tamao al cambiar las dimensiones de la ventana del navegador, y algunas funciones como la reorganizacin de los textos, se pierden. Las estructuras de diseo de ancho variable modifican sus dimensiones dependiendo de la pantalla o dispositivo, pero suponen un trabajo ms complicado para el diseador. 2 La propiedad CSS float permite eliminar cualquier elemento dentro del flujo HTML por defecto y moverlo (o hacerlo flotar) pegndolo 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 imgenes, para crear mens de navegacin horizontales o utilizar diseos de pgina en columnas. 3 Tu compaero puede aadir un valor de margen interno (padding) a la barra lateral, lo que har que todos los contenidos se separen automticamente del borde. Tambin puede aadir una regla para los prrafos 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 combinacin de mrgenes internos y externos.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 84 de 156

Leccin 4: Uso de las etiquetas HTML5


Objetivos:
En esta leccin aprenders cmo se actualizan las pginas HTML ya existentes para utilizar los elementos de divisin 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 leccin. Comprueba que has descargado y copiado la carpeta de prcticas de HTML5 en tu ordenador. Para poder tener vistas previas precisas del contenido HTML5 que vamos a crear en esta leccin, debers utilizar un navegador web compatible con las etiquetas ms importantes de HTML5, por ejemplo Internet Explorer 9. A lo largo de las siguientes secciones irs aprendiendo que muchos navegadores antiguos no soportan las etiquetas de HTML5. Uno de los objetivos de este captulo es mostrarte estos problemas y ensearte a resolverlos.

Una revisin de las etiquetas de semntica


En esta seccin vamos a ver algunos de los nuevos elementos que se han incorporado al lenguaje HTML5. Para poder completar esta leccin correctamente tienes que conocer bien los fundamentos de HTML y CSS y tener experiencia previa en la creacin de pginas web con estos lenguajes. La leccin comienza con una breve introduccin a las etiquetas de semntica (semantic markup en la literatura en ingls), que es una manera formal de decir elige en todo momento la etiqueta ms adecuada para el fin que pretendes. Una explicacin ms tcnica del concepto de etiquetado semntico 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 semntica tratan de dar un sentido explcito a los contenidos, a menudo con el uso de etiquetas. A priori, la eleccin de las etiquetas correctas parece una idea muy buena. Por ejemplo, pensemos en los ttulos 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 tamao, y <h6> el ms pequeo.

Los 6 elementos de ttulo mostrados segn los estilos por defecto, por orden de importancia. El contenido dentro de un elemento <h1> debera tener mayor importancia que otro dentro de un elemento <h3>. Por la misma razn, si se indica un estilo de letra para los ttulos, el tamao de letra Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 85 de 156

de un elemento <h1> debera ser mayor que el de un elemento <h3>. No hay ninguna razn de tipo tcnico que impida la creacin de un estilo para <h3> que le haga tener un tamao ms grande que <h1>. Desde el punto de vista del navegador web, no hay diferencia, pero cuando un ser humano examina el cdigo por primera vez su semntica le puede causar confusin: un elemento ttulo de tercer nivel supuestamente debera tener un tamao ms pequeo que otro de primer nivel. Uno de los objetivos del etiquetado semntico es conseguir que el cdigo de las pginas sea lgico y coherente. Un cdigo consistente y basado en conceptos lgicos es ms sencillo de actualizar y modificar para un diseador, y hace que la pgina sea ms flexible y adaptable a otros usos, por ejemplo para acceder desde dispositivos mviles. El etiquetado semntico nos garantiza que incluso en las pginas sin estilos puedan verse todos los elementos de manera comprensible y utilizable.

Fundamentos de HTML5
Antes de crear una pgina HTML5 vamos a ver las distintas categoras 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 maysculas y minsculas, es decir, podemos utilizar etiquetas en maysculas, en minsculas e incluso mezclarlas ambas y la pgina sigue siendo vlida. As, el cdigo siguiente es tcnicamente vlido: <H1> Ultimas noticias desde Madrid </h1>

No se exigen las etiquetas de cierre de los elementos. Por ejemplo, se admite la insercin de mltiples prrafos de esta forma: <p> Ha habido un accidente en la autopista A2 entre Madrid y Alcala. <p> Los conductores debern utilizar rutas alternativas. <p> La velocidad est limitada a 90 Kms/h.

Las comillas en los atributos son opcionales. Por ejemplo, se da por vlido este cdigo: <img src=trafficjam.jpg alt=traffic jam> A primera vista, estas reglas parece que favorecen ciertas prcticas de programacin 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 metfora trada del mundo agrario, donde un granjero podra esperar a ver por dnde 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 metfora se traduce en que cuando una prctica ha sido adoptada de forma general por parte de los desarrolladores y diseadores es el momento de aceptarla como buena en vez de prohibirla o inventar algo diferente. En HTML5 se pone especial empeo en mantener la compatibilidad con versiones anteriores, y muchas de las prcticas mencionadas antes (como es el uso de etiquetas en maysculas o no cerrarlas adecuadamente) se utilizaban en la creacin de documentos en los primeros tiempos de la Web. El W3C decidi integrar estas prcticas de codificacin tan dispersas dentro de la

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 86 de 156

especificacin para asegurarse de que los navegadores del futuro podran seguir mostrando el mayor nmero posible de pginas publicadas a da de hoy. Si quieres conocer una explicacin ms detallada de la filosofa aplicada por el W3C a los Principios de Diseo 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 prcticas. A lo largo de este libro te iremos orientando para que programes como si lo hicieras en XHTML 1.0, cerrando los elementos, empleando minsculas y aadiendo comillas a los atributos, porque creemos que siguen siendo buenas prcticas a mantener. Si empleamos una forma coherente y estndar a la hora de programar, reduciremos la probabilidad de errores y podremos aislar la fuente de cualquier problema si aparece.

La declaracin DOCTYPE de HTML5


Un cambio notable en la especificacin de HTML5 ya se puede ver en la primera lnea de cualquier documento HTML5. Un navegador web restituye las pginas desde el principio avanzando hacia el final del documento. La lnea inicial de la mayora 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 diseador utiliza la versin transicional de HTML (4.0.1), la declaracin DOCTYPE es: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Si utiliza la versin estricta de XHTML 1.0, la misma declaracin 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 declaracin DOCTYPE es bastante ms 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 incorreccin sintctica (por ejemplo una etiqueta mal escrita o un atributo que falta), devuelve un error. La validacin es un proceso opcional, pero los diseadores y los desarrolladores lo utilizan mucho para detectar posibles fallos en el cdigo o elementos que puedan faltar. Si es preciso, puedes volver a consultar los detalles de la validacin de pginas que vimos en la Leccin 2 Conceptos bsicos de HTML, XHTML y CSS En esta prctica vamos a convertir una pgina HTML antigua en HTML5. El documento est escrito en HTML 4.01, as que tenemos que modificar la declaracin DOCTYPE y utilizar la de HTML5, ms 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 pgina en tu navegador para comprobar el aspecto que tiene en este momento. Es, bsicamente, el diseo que hemos creado al final de la Leccin 3 y se clasifica como una estructura de dos columnas de anchura fija. SI no has estado trabajando recientemente con el diseo de las pginas web, debes repasar un poco su estructura interna: tenemos un elemento DIV con el atributo ID #wrap que contiene a los dems

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 87 de 156

elementos div que componen la estructura de la pgina. El estilo CSS para este grupo de DIVs establece una anchura de 960 pixels y unos mrgenes 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 leccin con respecto al diseo creado en la Leccin 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 declaracin <!DOCTYPE> en las dos primeras lneas y brrala. Escribe en su lugar esto: <!DOCTYPE html> 3 Guarda el archivo y brelo en el navegador. Vers 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 cmo se clasifican en HTML5 los distintos tipos de contenidos.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 88 de 156

Las distintas categoras de contenido utilizadas en HTML5


Podemos dividir el contenido de una pgina web en varias categoras que, en su mayor parte, no son novedades de HTML5, pero que nos ayudan a entender cmo se organiza internamente la informacin.

Metadatos Flujo Secciones Ttulos Textos Contenidos embebidos Contenidos interactivos Estas categoras son tiles a la hora de agrupar elementos dentro de una pgina. Por ejemplo, la categora de informacin de flujo describe todos los elementos que podemos utilizar en el cuerpo de una pgina, pero podemos subdividir el contenido de flujo en categoras ms pequeas, como titulares o textos.

Metadatos
A la informacin que establece el modo de restitucin o el comportamiento del resto del contenido de la pgina se le denomina Metadatos. Los metadatos se pueden utilizar tambin para establecer la relacin entre este documento y otros documentos. Un ejemplo obvio de metadatos es lo que aparece dentro de los elementos <meta>, que suelen contener una descripcin de la informacin contenida dentro de la pgina, o palabras clave y que los motores de bsqueda utilizan para clasificar las pginas. Otros elementos como <style> y <script>se consideran tambin metadatos puesto que intervienen en la presentacin y actividad del contenido principal. Los metadatos se ubican en la seccin <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 pgina web, o dicho de otra forma, todas las etiquetas utilizadas para definir contenidos entran dentro de esta categora, como por ejemplo, <p>, <h1>, <ol>, <table>, etc. El contenido de flujo normalmente es texto o un archivo insertado, como una imagen o un vdeo. En HTML5 aparecen algunos elementos nuevos dentro de esta categora, como <article>, <aside>, <audio>, <canvas>, <hgroup> y algunos ms. <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 categora de HTML5 y actualmente incluye cuatro elementos: <article>, <aside>, <nav> y <section>. El W3C define el contenido de Secciones como aquellos elementos que definen

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 89 de 156

el alcance de cabeceras y pies de pgina. El contenido de las secciones es un subconjunto del contenido de flujo. Veremos ms adelante en esta misma seccin cmo se distribuye una pgina en secciones. Las definiciones de las secciones y otras categoras 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>

Ttulos
Los ttulos contienen todos los elementos de encabezamiento que ya se vienen utilizando en HTML 4.0: <h1>,<h2> y sucesivos. HTML5 incorpora adems el elemento <hgroup>, pensado para agrupar dos o ms ttulos. 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 prrafos. El contenido de texto es un subconjunto del contenido de flujo. <p> La ventaja de tener unas <strong> buenas </strong> botas de montaa se pone de manifiesto <em>especialmente</em> a partir del tercer da de caminata.</p>

Contenidos embebidos
Los contenidos embebidos son aquellos que se importan de otros recursos dentro de la pgina, como son imgenes, vdeos o archivos para descargar. <audio src="high_seas_rip.mp3" controls preload="auto" autobuffer> </audio>

Contenidos interactivos
Uno de los elementos ms bsicos, como es la etiqueta <a> (utilizada en los vnculos), se la considera un elemento interactivo. Otros elementos han sido creados especficamente para dar cabida a la interaccin con el usuario, y tambin se incluyen en esta categora. Por ejemplo, elementos <textarea> o <button> que se utilizan en los formularios. <input type="button" value="Soy interactivo?" onClick='alert("S, soy interactivo")'> Botn con cdigo 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 seccin y algunas de las etiquetas propias de esta versin.

Uso del nuevo elemento header en HTML5


Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 90 de 156

La especificacin HTML5 extiende el conjunto actual de elementos que se usan actualmente para que el desarrollador y el diseador puedan disponer de unas opciones de etiquetado semntico ms precisas. Un ejemplo es el elemento <div> utilizado para dividir una pgina 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 diseadores y desarrolladores le otorgan un significado al aadirle 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 prctica vamos a analizar la estructura abriendo un archivo que utiliza el marco HTML actual y lo vamos a convertir en una pgina 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 Ms 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 fjate que indica como color de fondo el naranja. Sin embargo, cuando visualizaste la pgina en el ejercicio anterior no apareca 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 cdigo y vers que todas las reglas de estilo siguientes tambin 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 ningn sitio. Lo hacemos con el fin de ensearte y en los pasos siguientes vers 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 cdigo HTML, busca esta seccin: <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 sustityelas 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>

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 91 de 156

Es un nuevo elemento de HTML5 llamado <header>.La especificacin del W3C explica que el elemento header representa un grupo de textos de presentacin o ayudas a la navegacin. La especificacin indica tambin que el elemento header por lo general debe contener la cabecera de seccin (un elemento h1-h6 o un elemento hgroup), pero no es obligatorio. El elemento header puede utilizarse tambin como contenedor de una tabla de secciones a modo de ndice de contenidos, un formulario de bsqueda o cualquier tipo de logos de inters En HTML5 podemos utilizar el elemento <header> dentro de una misma pgina varias veces. Ms adelante, en esta misma seccin vamos a ver cundo y dnde tendra sentido aadir cabeceras adicionales. Puesto que este es el primer elemento HTML5 de tu pgina, tenemos que comprobar cmo funciona en navegadores web que no soportan las etiquetas HTML5. En los prrafos siguientes explicar este problema y cmo podemos resolverlo. 8 Guarda el archivo en disco y visualiza la pgina en tu navegador. Si el navegador soporta el elemento <header> de HTML5 no vers ninguna diferencia entre esta pgina y la pgina que habas abierto al principio de esta leccin. Si el navegador NO soporta el elemento <header> vers que el color de fondo de la cabecera se cambia a naranja.

La pgina visualizada en un navegador compatible con la etiqueta <header> HTML5.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 92 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. Fjate 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: cmo podemos utilizar estas etiquetas si los navegadores antiguos no reconocen sus estilos? En la siguiente seccin veremos dos soluciones para este problema.

Cmo 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 ms concreto, muchos navegadores antiguos tratan al elemento desconocido <header> como un elemento de lnea (o de nivel de texto) y no como elemento de bloque o simplemente ignoran el elemento desconocido. Los elementos de lnea generalmente nos los encontramos dentro de un bloque de texto, por ejemplo los elementos <strong> y <em> son elementos de lnea (tambin los vers citados como inline en los textos en ingls). Los elementos de bloque utilizan bloques de espacio en la pgina y aaden saltos de lnea automticamente cuando se insertan en el contenido. Por ejemplo, el elemento <p> y todos los elementos de ttulo (h1 y siguientes) son de nivel de bloque. Existen varias formas para conseguir que los navegadores ms antiguos apliquen adecuadamente los estilos a las nuevas etiquetas de HTML5. Una manera de conseguirlo de forma elegante nos la ofrece la librera Javascript llamada Modernizr. Esta librera incorpora los nuevos elementos HTML5 a los Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 93 de 156

navegadores antiguos. El cdigo Javascript de esta librera est pensado para detectar funcionalidades dentro de cualquier navegador y aadirles el soporte necesario para poder utilizar los nuevos objetos y estilos si no estn soportados. Vamos ahora a aadir un enlace a la librera Modernizr . 1 Ves al archivo 04_index_work.html. En la seccin <head> del cdigo HTML busca los enlaces a las dos hojas de estilo externas y despus de ellas aade la siguiente lnea: <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/javascript"></script> Este archivo se encuentra en la carpeta HTML5_04lessons. Puesto que Modernizr es una librera Javascript que est en proceso de mejora continua, puedes confirmar si existe alguna versin ms reciente en su sitio web http://www.modernizr.com 2 Guarda el archivo y si ests haciendo tus pruebas con algn navegador sin soporte a HTML5 vers que la seccin de cabecera ahora aparecer con el color blanco, como queramos.

Hemos incorporado la librera Javascript Modernizr para poder ver en un navegador antiguo como Firefox 3.6 o Internet Explorer 6 el elemento <header> HTML5. Este aadido significa que podemos seguir utilizando los nuevos elementos HTML5 con confianza, ahora que sabemos que pueden soportarlos prcticamente todos los navegadores ms conocidos. No obstante, tenemos que tener en cuenta algunas cuestiones. La librera 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 pgina se mostrar mal. De todas formas, la inmensa mayora de los navegadores Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 94 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 seccin de HTML5 para dividir la pgina en secciones lgicas. Los nuevos elementos de seccin son <section>, <article>, <aside> y <nav>. Vamos a empezar por el elemento <nav> porque es el ms fcil de entender. 1 Encuentra en el cdigo 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 cdigo se utiliza una tcnica de navegacin 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 cdigo 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 posicinate en el cdigo siguiente: #mainnav { background-color:#666; height:40px; } Cambia el selector de ID #mainnav por el selector nav como se indica a continuacin.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 95 de 156

4 Cambia el cdigo 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 pgina HTML, y gurdala tambin. Visualiza la pgina en el navegador. Podrs ver que todava no se ve correctamente la barra de navegacin.

La barra de navegacin se ve mal porque necesitamos actualizar todos los estilos asociados con el ID #nav. La barra de navegacin se ve mal porque hay ms 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 ms: #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; }

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 96 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 pgina en el navegador. Ahora la barra de navegacin aparece como al principio. Si la barra de navegacin sigue vindose 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 pgina anterior y necesitan recargarla para mostrar los cambios.

La barra de navegacin utiliza ahora el elemento <nav> HTML5.

Incorporacin de otros elementos de seccin HTML5


Los otros elementos de la categora de contenidos de seccin son <section>, <article> y <aside>. El primero que vamos a aadir es <section>. La definicin oficial del elemento section es que representa una seccin genrica de un documento o aplicacin. Una seccin, en este caso, es un grupo de elementos relacionados con un mismo tema, a menudo con un titular o cabecera. La definicin tambin indica que el elemento section no es un contenedor genrico. 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

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 97 de 156

elemento section es adecuado solo si su contenido puede enumerarse de forma explcita en el resumen o ndice del documento. Esta definicin puede consultarse en http://developers.whatwg.org/sections.html#sections. As pues, podemos utilizar <section> cuando queramos delimitar de forma lgica un bloque de contenido concreto e importante que puede llevar, por ejemplo, texto e imgenes. En el caso de la pgina que hemos utilizado para la prctica, vemos que es una pgina de inicio con un contenido distribuido visualmente: la columna de la izquierda es ms 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 relacin directa e inmediata con el contenido principal. Volveremos sobre esto ms adelante. 1 En el archivo 04_index_work.html, busca la etiqueta de apertura de la seccin principal (main): <div id="main"> Busca la etiqueta de cierre </div> ms abajo. Vamos a cambiar esta etiqueta en seguida. El Cdigo 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> <!-- End of Main Div --> 2 Sube otra vez a la etiqueta de apertura <div> y cmbiala por la etiqueta <section> as: <section id="main"> 3 Ahora baja hasta la etiqueta de cierre </div> que habas marcado en el paso 1 y sustityela con la etiqueta de cierre de seccin: <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> <!-- End of Main Div -->: El elemento padre de esta nueva seccin se llama <div id="innerwrap"> y se utiliza para fines de presentacin 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 prcticas recomiendan utilizarlos solo si no hay una opcin mejor dentro del conjunto de elementos HTML5 disponibles. 4 Guarda el archivo y muestra la pgina en el navegador. Antes de seguir con la prctica, necesitamos conocer el modelo que utiliza HTML5 para gestionar los esquemas de contenido.

Esquemas de contenidos en HTML5


Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 98 de 156

Una de las carencias ms notables en las especificaciones actuales de HTML y XHTML es la falta de un buen modelo de gestin 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 jerrquicas entre dichos bloques. Los elementos de seccin de HTML5 estn pensados para poder generar de manera natural un esquema o estructura de contenido a partir de la pgina web. Imagina que cada pgina web tuviera un ndice de contenidos generado automticamente 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 mviles, pero sern 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 pgina con el elemento <nav> y saltrselo directamente, o dar al usuario la opcin de saltrselo o acceder a cada lugar a donde apuntan los enlaces del elemento <nav>. Actualmente las pginas HTML y XHTML solo disponen de esquemas basados en las etiquetas de ttulo, por lo que su uso es muy limitado. El nuevo modelo de esquema de HTML5 permite generar esquemas ms 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>Navegacin</h1> </nav> <section> <h1>Ultimas noticias</h1> <h2>Grandes atascos en la autova</h2> </section> </body> Este cdigo HTML tendra el siguiente esquema de documento: 1. Bienvenido a nuestro sitio Web 1. Navegacin 2. ltimas noticias 1. Grandes atascos en la autova En este ejemplo, los elementos <nav> y <section> delimitan nuevas secciones dentro del esquema, pero sus nombres proceden del empleo de ttulos y subttulos siguiendo una jerarqua. De esta forma los ttulos se convierten en un elemento mucho ms significativo de cara a los esquemas de las pginas HTML5. El modelo de HTML5 nos permite aadir un nuevo elemento h1 por seccin, de modo que cada seccin de la pgina dispone de su propia jerarqua, tal y como se muestra el ejemplo anterior. Una posible complicacin es que a da de hoy la especificacin HTML5 dice que los elementos de seccin tienen que contener ttulos, o de lo contrario aparecern como sin ttulo en el esquema. Por ejemplo, en el caso anterior, si borramos el elemento h1 de la seccin <nav>, el esquema aparecer as: 1. Bienvenido a nuestro sitio Web 1. NAV sin ttulo 2. ltimas noticias

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 99 de 156

1. Grandes atascos de trfico en la autova En el ejemplo de lector de pantalla que comentbamos antes, este esquema de documento no es precisamente til puesto que la seccin de navegacin no lleva ttulo. Sin embargo, documentar con ttulos las secciones de navegacin no es una prctica habitual para los diseadores (incluso para muchos de ellos carecer de sentido) y por ello conviene que sepas que esta es una de las partes de la especificacin HTML5 que est, en estos momentos, en fase de revisin y depuracin. Las reglas de generacin de los esquemas HTML5 pueden cambiar, pero tenemos que tener en cuenta que los esquemas de documento nos permiten organizar el contenido y nos ensean mucho acerca de la organizacin interna de la informacin y su distribucin 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 diseadores y desarrolladores preocupados por los aspectos de accesibilidad de sus sitios web deben prestar especial atencin al papel que juegan (y jugarn) los esquemas de documento. En estos momentos el poder ver un esquema de documento HTML5 no es algo fcil puesto que no disponemos de muchas herramientas para ello. Podemos ver un ejemplo interactivo de un esquema de documento en esta pgina: http://ie.microsoft.com/testdrive/HTML5/SemanticNotepad

ccesibilidad con los roles WAI-ARIA

on el avance de la especificacin HTML5 se est desarrollando la Suite de Aplicaciones de Internet con Accesibilidad Avanzada (WAI-ARIA

Accessible Rich Internet Applications), cuyo objetivo es organizar y mejorar la accesibilidad en la Web. Un captulo de esta especificacin,

landmark roles (en espaol seran los roles de sealizacin) est pensada expresamente para utilizarse con elementos HTML y XHTML. U

acin es una forma de clasificar e identificar distintas partes de una pgina web. Por ejemplo, un rol llamado banner puede identificar una

ontenga la cabecera principal de la pgina. Podemos aadir este rol en forma de atributo al elemento <header> de HTML5:

="banner">

os roles de sealizacin tienen equivalentes directos con elementos HTML. Por ejemplo, el atributo role="form" se utiliza para los elementos d el role="navigation" se aplica al elemento <nav> de HTML5. Podemos utilizar los roles de sealizacin ya, pero debers revisar tu cdigo en

segurarse de que su uso sea conforme con la especificacin cuando el grupo que la desarrolla concluya sus trabajos.

s informacin sobre el WAI-ARIA y los roles de sealizacin, puedes consultar la webhttp://www.w3.org/WAI/PF/aria/usage#usage_intro

cin WAI-ARIA del W3C se puede consultar en http://www.w3.org/WAI/PF/aria-practices/

prcticas-aria que recomendamos incluye cdigos de ejemplo y buenas prcticas para insertar roles de sealizacin en tus pginas web

Incorporacin del elemento <footer> (pie de pgina)


Recordemos que el elemento <header> que hemos aadido antes no es un elemento de seccin y no delimita una nueva seccin en el esquema del documento. Por la misma razn, el elemento <footer> tampoco se considera un elemento de seccin. Podemos incluir ms de un elemento de pie de pgina en la misma pgina. Por ejemplo, podemos tener un pie de pgina para todo el sitio web y tambin un pie para una seccin concreta. In este ejercicio simplemente vamos a sustituir el div llamado footer por el nuevo elemento <footer> de HTML5. 1 En tu pgina HTML, busca el elemento DIV que lleva el atributo ID footer y haz el cambio siguiente:

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 100 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 prrafos que aparecen dentro del pie de pgina 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 pgina en el navegador. Desplzate hacia la parte inferior para ver si el pie de la pgina 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 pgina debe aparecer igual que se vea antes de empezar esta prctica.

En la pgina utilizamos ahora el elemento <footer> HTML5. En los ejercicios siguientes vamos a agrupar contenidos utilizando una combinacin de las etiquetas que hemos visto junto con otras nuevas.

Incorporacin de los elementos <article> y <aside>


En esta seccin vamos a ver en qu consisten los elementos <article> y <aside>, empezando por el primero. La definicin del W3C establece que el <article> es una composicin autocontenida dentro de un documento, pgina, aplicacin o sitio web y que, en principio, puede distribuirse o reutilizarse de manera independiente, p.ej. mediante sindicacin. 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 definicin anterior es el concepto auto-contenido. El elemento <article> est pensado para contenidos que se pueden extraer de su pgina contenedora. Por ejemplo, en la prctica siguiente vamos a copiar el cdigo HTML de una pgina distinta, y pegarlo dentro de nuestra pgina de inicio.

n el editor de textos, desde el men Archivo, selecciona Abrir y busca en la carpeta de la Leccin 4 un archivo llamado 04_article.html. Abre

l navegador. Vers que contiene informacin sobre lo que es un periodo de espera cuando una empresa sale a cotizar por primera vez en la b Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 101 de 156

o que leamos todo el texto con atencin, si lo revisamos podemos ver que se trata de un artculo monogrfico, autnomo y que no depende de

o externo para su comprensin.

Un artculo con contenido autnomo que vamos a pegar en nuestra pgina web.

itor de textos y selecciona todo el cdigo HTML del artculo pulsando Ctrl+A. Despus, para copiar este contenido puedes utilizar la

de teclas Ctrl+C.

es cerrar el documento y volver (o abrir) el archivo 04_index_work.html. Queremos que este texto quede dentro de la seccin que hemos crea

anterior, as que tenemos que encontrar el siguiente prrafo y poner el cursor detrs de la etiqueta de cierre </p>, pero antes de la etiqueta de

n>. Crate un elemento <article> vaco, como se indica aqu:

he information on this site is provided to help you be a happier, more productive employee. ave any questions about anything on the site or have other employee related questions, also call Jen Smith at extension 535! </p> > e> n>

que tienes el cursor entre las dos etiquetas de <article> y pulsa Ctrl + V o la opcin de men Edicin Pegar, y pega ah todo el cdigo que ha

paso 2. Todo ese contenido ahora aparece dentro de un elemento article.

utiliza el elemento article?

o article de HTML5 es ideal para los casos de contenidos que pueden acabar publicados en distintos contextos o incluso en s muy variados. Por ejemplo, si publicas una entrada en un blog, los lectores normalmente acuden a ese sitio web para leerlo.
Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 102 de 156

a de hoy, sin embargo, estos contenidos pueden redistribuirse de maneras muy variadas y sindicarse de muchas formas, por e ediante RSS o aplicaciones de lectura de noticias, por correo electrnico, desde aplicaciones para mviles, etc. Es decir, la es ntenido publicado ha de ser lo suficientemente flexible para que no sea necesario reformatearlo dependiendo del tipo de disp torno de publicacin de destino final. El elemento article adems sirve para mejorar la accesibilidad, ya que ofrece otro nuev ructura lgica dentro de un documento.

omo ya comentamos anteriormente, en HTML5 podemos tener ms de una cabecera, as que vamos ahora a aadir una nueva al contenido que

ar. Busca la etiqueta de apertura <article> e inmediatamente despus aade un nuevo elemento de cabecera al artculo:

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>

ms de poder poner mltiples cabeceras dentro de una pgina, podemos insertar tambin un elemento <footer> dentro del artculo para mejora

rna. Busca los datos del autor y la seccin de copyright y aade lo siguiente:

footer>

<p> The author is an expert on SEC accounting rules and can be contacted a href="mailto:cheri@smoothieworld.com">here</a>.</p>

<p><small>&copy; copyright 2012 Cheri White</small></p> /footer> /article> /section>

rda el archivo y mustralo en el navegador para comprobar los resultados.

esto de este ejercicio nos va a ensear cmo se utiliza el elemento "aside". Podemos emplearlo de dos maneras, la primera basada en el uso hab

as laterales en un sitio web y la segunda, como un rea de contenidos relacionados con un elemento <section>. Vamos a empezar por la primer

ificando nuestra barra lateral.

n el archivo HTML, encuentra la etiqueta de apertura <div> correspondiente a la barra lateral:

div id="sidebar"> h2>Volunteer Opportunities</h2> . . . .

mos a cambiar la etiqueta <div> por una <aside> y tambin el nombre de ID para hacerlo ms comprensible.

el fragmento de cdigo anterior no hemos incluido todo el cdigo de la barra lateral para ahorrar espacio.

ambia la etiqueta de apertura <div> por lo siguiente:

aside id="secondary-content"> h2> Volunteer Opportunities </h2> . . . ID representa de manera ms exacta la funcin de este contenido. Ahora, cambia tambin la etiqueta de cierre del div.

ncuentra la etiqueta de cierre original </div> de la barra lateral y cmbiala por </aside>:

p> Prepare meals for senior citizens and individuals recovering from surgery. Learn More </p> /aside>

bre el archivo base.css y busca el selector #sidebar; ahora tenemos que cambiarlo para que se asocie al nuevo ID, "#secondary-content". Camb que quede as:

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 103 de 156

ry-content { ght; 0px; nd-image:url(images/sidebar_bg.png); nd-repeat:repeat-x; und-repeat: thin solid gray; nd-color:#FFF;

mos este cambio? Tcnicamente no sera preciso, pero uno de los objetivos de un diseo web flexible es un correcto control de aquellos nombr

ner que ver con la estructura interna de la pgina. El ID "sidebar" suele interpretarse como una columna lateral en una pgina. Pero qu pasa s

o queremos meter este contenido debajo de la seccin principal?. El ID de la barra lateral ya no representara bien la funcin de esta parte del

uede provocar cierta confusin, por lo que el empleo de un ID como "#secondary-content" resulta ms flexible.

nos estilos que se utilizaban en el selector #sidebar original y tenemos que cambiarlos todos. Cambia los selectores en los tres conjuntos

eglas, y donde aparece "#sidebar", pon "#secondary-content":

ry-content p, #secondary-content h2, #secondary-content h3, #main p, #main h1, #main h2, #main abajo de estas reglas:

ry-content h2

hemos utilizado el elemento aside para la organizacin de secciones en nuestra pgina, y ahora vamos a ver el otro uso de este elemento.

vo 04_index_work.html busca el siguiente cdigo, que est dentro del elemento <section>: information on the Quiet Period<h3> more information on the quiet period <a href=#>here</a><p>

a pgina apunta a informacin adicional para los lectores que pueden tener inters en conocer ms en detalle los temas que se comentan en el

en realidad, en este ejemplo, apunta a la propia pgina (el valor href=# no hace nada realmente).

uy usada para romper el flujo natural de la lectura y conducir la atencin del lector hacia otro contenido es aadir un pequeo recuadro dentro

algunas ocasiones, este contenido puede ser un comentario o una frase extrada del propio artculo, que en la jerga periodstica de habla inglesa

pull quote o simplemente aside y de ah el nombre del elemento.

etiqueta <div class=articleaside> por el elemento aside tal para que quede as.

lass=moreinfo> information on the Quiet Period<h3> more information on the Quiet period <a href=#>here</a><p>

lemento <aside> dentro de un elemento <section>, como hemos hecho aqu, se interpreta que el contenido tiene alguna relacin directa con la

. Cuando se utiliza como barra lateral como hicimos en la prctica anterior, el elemento <aside> se considera un contenido secundario sin rela

contenido principal de la pgina. El nombre de clase moreinfo lo aadimos aqu para poder modificar el estilo de este contenido. hoja de estilos base.css y aade este cdigo al final del archivo:

ight; 00px; nd: #ddf; 10px; 6px;

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 104 de 156

cdigo genera un recuadro de 200 pixels de ancho con un fondo gris. Adems flota hacia la derecha, de forma que el resto del contenido apare

endolo por los lados libres.

Guarda los archivos HTML y CSS abiertos y visualiza la pgina en el navegador.

lemento aside de HTML5 se puede utilizar dentro de una seccin para indicar un contenido relacionado

Los elementos <figure> y <figurecaption> de HTML5


En la especificacin HTML5 puedes encontrar otros elementos nuevos que sirven para que la estructura interna de las pginas se entienda mejor. Por ejemplo, los elementos <figure> y <figurecaption> nos permiten identificar imgenes y sus rtulos dentro del contenido.

1 Busca la etiqueta de cierre </header> en el artculo y aade 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 pgina, pero ahora vamos a meterla dentro de un elemento <figure>. 2 Aade 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 pgina, como imgenes, diagramas o grficos. Podemos adems emparejar la figura con rtulo aadiendo un elemento <figcaption>. 3 El rtulo se aade 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 rtulo dentro del artculo. 4 Abre el archivo base.css y aade esta regla para la figura: figure { float:right; padding:4px; margin:6px; } Guarda los archivos HTML y CSS y visualiza la pgina en el navegador. La declaracin de estilo hace flotar la imagen hacia la derecha y le aplica valores de margen interno y externo para separarla del resto del contenido.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 105 de 156

El elemento <figure> flota hacia la derecha del artculo. El tamao del rtulo no se ve muy bien a este tamao, as que le vamos a dar estilo tambin. Vuelve al editor. 5 Aade 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 pgina. Con esta regla el rtulo queda centrado y el texto se muestra en cursiva.

Otros elementos de HTML5


Aunque en esta leccin hemos visto ya los elementos ms importantes de HTML5, en la especificacin hay unos cuantos ms. En la tabla siguiente se resumen los elementos ms novedosos y el uso al que estn destinados. Adems hemos destacado los elementos HTML que han sido objeto de revisin desde la versin HTML4 a HTML5.

Lista actualizada de elementos HTML5 Elemento a abbr Descripcin Vnculo web Abreviatura Atributos globals; href; target; rel; media; hreflang; type globals

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 106 de 156

Lista actualizada de elementos HTML5 Elemento address area article aside audio Descripcin Atributos

Informacin de contacto para una globals pgina o seccin. Vnculo o rea definible sobre un mapa globals; alt; coords; shape; href; target; rel; media; de imagen. hreflang; type Composicin autocontenida, globals reutilizable o sindicable Barra lateral o espacio con contenidos globals relacionados Reproductor de audio globals; src; preload; autoplay; mediagroup; loop; cotrols

Un segmento de texto destacado en el contexto de la frase sin que implique importancia adicional a nivel de cdigo globals HTML ni cambios en tono o intensidad de la voz.

URL de base y contexto de navegacin base de destino por defecto para los enlaces globals; href; target y formularios. Una seccin entrecomillada obtenida de blockquote globals; cite otro origen globals; onafterprint; onbeforeprint; onbeforeunload; onblur; onerror; onfocus; onhashchange; onload; body Cuerpo del documento onmessage; onoffline; ononline; onpagehide; onpageshow; onpopstate; onredo; onresize; onscroll; onstorage; onundo; onunload br Salto de lnea incondicional globals globals; autofocus; disabled; form; formaction; formenctype; formmethod; formnovalidate; formtarget; name; type; value

button

Control de botn de formulario

canvas caption cite code col

Espacio de bitmap manejable mediante globals; width; height scripting Rtulo de tabla Ttulo de un trabajo Cdigo de ordenador Columna de tabla globals globals globals globals; span

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 107 de 156

Lista actualizada de elementos HTML5 Elemento colgroup command datalist dd del div dl dt em embed fieldset figcaption figure footer Descripcin Grupo de columnas en una tabla Comando de men Contenedor para opciones para el control de lista desplegable Contenido para los elementos dt correspondiente Contenido a eliminar del documento Contenedor de flujo genrico. Atributos globals; span globals; type; label; icon; disabled; checked; radiogroup globals globals globals; cite; datetime globals

Lista de asociacin consistente en cero globals o ms pares nombre-valor Leyenda para el correspondiente globals elemento dd Destacar texto globals

Complemento embebible en la pgina globals; src; type; width; height; any* Grupo de controles de formulario Rtulo para una figura (opcional) Figura con rtulo opcional Pie de pgina o seccin Formulario de datos que se pueden enviar globals; disabled; form; name globals globals globals globals; accept-charset; action; autocomplete; enctype; method; name; novalidate; target

form

h1, h2, h3, Ttulos de seccin h4, h5, h6 head header hgroup hr Contenedor para metadatos del documento Introduccin o ayuda a la navegacin para una pgina o seccin Grupo de encabezamiento Lnea de separacin temtica

globals

globals globals globals globals

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 108 de 156

Lista actualizada de elementos HTML5 Elemento html i iframe img Descripcin Elemento raz del documento Voz alternativa Contexto de navegacin anidado Imagen Atributos globals; manifest globals globals; src; srcdoc; name; sandbox; seamless; width; height globals; alt; src; usemap; ismap; width; height 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 globals; cite; datetime globals; form; for globals globals; value* globals; href; rel; media; hreflang; type; sizes globals; name globals globals; type; label globals; name; http-equiv; content; charset globals; value; min; max; low; high; optimum; form globals globals globals; data; type; name; usemap; form; width; height globals; reversed; start

input

Control de formulario

ins label legend li link map mark menu meta meter nav noscript object ol

Aadido al document Rtulo para un control de formulario Rtulo para fieldset Elemento de lista Enlace a metadatos externos Mapa de imagen Destacado Men de comandos Metadatos en formato de texto Medidor Seccin con enlaces de navegacin Contenido de fallback para scripts Imagen, contenido de navegacin anidado o complemento Lista ordenada

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 109 de 156

Lista actualizada de elementos HTML5 Elemento optgroup option output p param pre progress q script section select small source span strong style sub summary sup table tbody Descripcin Atributos

Grupo de opciones en un control de globals; disabled; label formulario de lista desplegable Opcin en un control de lista o comboglobals; disabled; label; selected; value box Valor calculado de salida Prrafo Parmetro de un objeto Bloque de texto preformateado Barra de progreso Texto entrecomillado globals; for; form; name globals globals; name; value globals globals; value; max; form globals; cite

Cdigo de script embebido en la pgina globals; src; async; defer; type; charset Seccin genrica de documento o aplicacin Control de lista desplegable Comentario en letra pequea globals globals; autofocus; disabled; form; multiple; name; required; size globals

Origen de contenido para vdeo o audio globals; src; type; media Contenedor genrico de texto Importancia Informacin de estilo embebida en la pgina Subndice Rtulo para detalles Superndice Tabla Grupo de filas en una tabla globals globals globals; media; type; scoped globals globals globals globals; border globals

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 110 de 156

Lista actualizada de elementos HTML5 Elemento td Descripcin Celda de tabla Campo de texto multilnea (formularios) Grupo de filas de pie de tabla Celda de cabecera de tabla Grupo de filas de cabecera de tabla Fecha y/u hora Ttulo del documento Fila de tabla Subttulos para contenidos de vdeo Palabras clave Lista Variable Reproductor de vdeo Posibilidad de salto de lnea Atributos globals; colspan; rowspan; headers globals; autofocus; cols; disabled; form; maxlength; name; placeholder; readonly; required; rows; wrap globals globals; colspan; rowspan; headers; scope globals globals; datetime; pubdate globals globals globals; default; kind; label; src; srclang globals globals globals globals; src; poster; preload; autoplay; mediagroup; loop; controls; width; height globals

textarea

tfoot th thead time title tr track u ul var video wbr

Autoestudio
1 Hay algunos elementos ms de HTML5 que no hemos visto en esta leccin. Recuerda que la especificacin HTML5 estar terminada hacia el ao 2014. Si deseas consultar informacin ms actualizada, visita los progresos en la especificacin en el sitio web del W3Chttp://dev.w3.org/html5/spec/Overview.html

Repaso Preguntas
Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 111 de 156

1 Indica si es verdadero o falso: HTML5 solo permite utilizar un elemento <header> y <footer> en la misma pgina. 2 Qu son los elementos de seccin en HTML5? Nombra los cuatro elementos que se incluyen en la categora de seccin. 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 mltiples veces dentro de una pgina. Por ejemplo, podemos tener una cabecera o un pie comn para todo el sitio web y tambin cabecera o pie para cada seccin. 2 En HTML5 los elementos de seccin en HTML5 definen el alcance de cabeceras y pies de pgina y se utilizan para distribuir de forma lgica las diferentes reas dentro de un documento HTML. Los elementos de seccin tambin sirven para generar nuevas secciones dentro de un esquema de documento HTML5. Los cuatro elementos de seccin son <section>, <nav>, <aside> y <article>. 3 El elemento <aside> se utiliza para representar una porcin del contenido que suele llamarse barra lateral, cuando dicho contenido es independiente del que forma la base temtica de la pgina (el contexto). Cuando aparece dentro de un elemento <section>,el elemento <aside> debera llevar un contenido relacionado de alguna manera con el contexto que le rodea, como un extracto, un resumen o similar.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 112 de 156

Leccin 5: Trabajar con el Canvas


Objetivos:
El Canvas es una API de dibujo en dos dimensiones incluida en la especificacin HTML5. La inclusin de una API de dibujo nativa permite a los desarrolladores generar imgenes dinmicamente dentro de una pgina web, por lo general a partir de datos obtenidos desde alguna fuente o a partir de la interaccin con el usuario. A diferencia de los formatos conocidos de imgenes 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 leccin. Comprueba que has descargado y copiado la carpeta de prcticas de HTML5 en tu ordenador. En esta leccin vas a aprender los conceptos bsicos de la API Canvas, que incluyen el dibujo de figuras, trazos, textos y el uso de colores y gradientes. Despus vamos a continuar con conceptos ms avanzados de dibujo de imgenes, sombras, el empleo de transformaciones y la creacin 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 lneas, formas y colores resultantes. Aunque los conocimientos necesarios de JavaScript son mnimos, si nunca has programado en este lenguaje conviene que antes leas con atencin esta introduccin breve al lenguaje.

Conceptos bsicos de JavaScript


JavaScript es un lenguaje de scripting con su propia estructura y sintaxis. Queda fuera del alcance de esta leccin explicar por completo JavaScript y cmo se utiliza, pero s vamos a ver aqu algunos conceptos bsicos, ya que si no has programado antes en este lenguaje, necesitars tener unos conocimientos bsicos sobre la forma en que JavaScript interacta con el cdigo HTML, y estos conocimientos te servirn como una base que podrs aplicar a lenguajes de scripting ms 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, gurdalo con otro nombre. 2 En el men Archivo, selecciona "Guardar como" y gurdalo con el nombre 05_subscribe_work.html. Comprueba que lo has grabado en la carpeta HTML5_05lessons. Repasa durante un momento el cdigo HTML. Vers que est creado totalmente en HTML y que, en consecuencia, carece de toda interactividad o dinamismo. Es una pgina totalmente esttica.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 113 de 156

3 Visualiza la pgina en el navegador y pulsa despus el botn Submit. No ocurre nada salvo el comportamiento por defecto del botn, que es un elemento que no tiene en esta pgina web ninguna funcin concreta.

HTML no puede comprobar si un campo de formulario tiene datos. Necesitas JavaScript para eso. Necesitamos utilizar JavaScript para que el botn sea interactivo, ya que HTML nos permite hacer ciertas cosas, como modificar el texto que aparece en el botn, pero no aporta mtodos para controlar la interactividad. Vamos a aadir cdigo JavaScript para que al pulsar el botn se abra una ventana en el navegador y nos pida el nombre. Una vez escrito el nombre, al pulsar OK, el cdigo JavaScript mostrar este nombre en pantalla. 4 Debajo de la etiqueta <title> en la pgina, escribe estas lneas de cdigo: <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 cdigo HTML, pero las buenas prcticas recomendadas son aadir el cdigo de programacin en la seccin de la cabecera (<head>) de la pgina. El atributo type es opcional en HTML5. 5 Aade entre las etiquetas de <script> el siguiente cdigo (en rojo): <script type="text/javascript"> function show_prompt() </script> Una funcin en JavaScript es un cdigo que se ejecutar como resultado de algn evento en la pgina. En este caso, la funcin tiene un nombre, show_prompt(), y lo nico que har es indicarle al

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 114 de 156

navegador que abra una pequea ventana en pantalla . El evento que dispara esta funcin es la accin del usuario de pulsar el botn Submit. La funcin show_prompt() necesita ms cosas para conseguir lo que queremos. 6 Aade este cdigo (marcado en rojo) debajo de la funcin: <script type="text/javascript"> function show_prompt() { var name=prompt(); } </script> En esta lnea de cdigo hemos declarado una variable y le hemos asignado un valor. Esta variable, llamada name, obtiene su valor de la funcin "prompt()". Una lnea de cdigo es la cantidad mnima de informacin que se necesita para hacer que ocurra algo en JavaScript. Para que se ejecute el cdigo JavaScript necesitamos aadir una instruccin al botn HTML que le describir cmo ha de ejecutar el cdigo y qu funcin debe utilizar. 7 Aade este cdigo (indicado en rojo), al HTML del botn: <input type="button"onclick="show_prompt()" value="Submit" /> La instruccin onclick se conoce como evento JavaScript y el valor "show_prompt()" es la funcin JavaScript que hemos declarado en el paso 5 dentro de la etiqueta <script>. Ahora hemos cerrado la cadena lgica que, en resumen, viene a decir "cuando el usuario pulse el botn Submit, llama a la funcin show_prompt. Cuando se ejecute la funcin show_prompt, ejecutar otra funcin llamada prompt". 8 Guarda el archivo y visualiza la pgina en el navegador. Si la configuracin de seguridad del navegador est preparada para impedir la ejecucin de scripts, debers pulsar en el botn "Permitir el contenido bloqueado". Pulsa el botn Submit y vers aparecer una ventana pidiendo un dato en pantalla (un tipo de ventana especfica, denominada "User Prompt"). Es una demostracin realmente simple de JavaScript en accin. Ahora vamos a aadir algo ms de cdigo para insertar datos en esta ventana emergente, en los pasos siguientes. 9 Cierra el navegador y en el editor aade el cdigo marcado en rojo a la declaracin 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 mustralo en el navegador. Prueba a ver qu sucede ahora al pulsar Submit. Los nuevos valores aparecen en la ventana:

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 115 de 156

La ventana de introduccin de datos ("User Prompt") es una de las demostraciones ms simples JavaScript en accin. Ahora hay que aadir cdigo JavaScript para capturar el valor del texto introducido en esta ventana para poder mostrarlo despus en una pgina HTML nueva. 10 Cierra el navegador y aade este cdigo indicado en rojo al cdigo 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 cdigo aadido 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 algn valor, se ejecuta la instruccin document.write de la lnea siguiente, y se ve en pantalla el nombre que hemos escrito en la ventana emergente. Los caracteres != y && que aparecen en la expresin (name!=null && name!="") se conocen como operadores en JavaScript y son piezas bsicas en el diseo lgico de cualquier funcin. La expresin document.write es una sentencia que le dice al navegador web que escriba un dato en una pgina 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 terminara con las palabras "How are you today?". 11 Guarda la pgina y mustrala otra vez en el navegador. Deja el valor por defecto de momento y pulsa OK. Aparece una pgina nueva, como resultado del cdigo que hemos aadido en el paso anterior.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 116 de 156

El nombre escrito en el campo de texto se muestra en una pgina nueva. Pulsa el botn Atrs del navegador y pulsa el botn Submit de nuevo, pero esta vez escribe tu nombre en la lnea de texto. Pulsa Aceptar y aparecer este nuevo nombre en la pgina siguiente. Se trata de una funcin JavaScript relativamente sencilla, pero que nos permite saber a grandes rasgos cmo se comunica JavaScript con los elementos HTML de una pgina y ciertos conceptos bsicos de la lgica 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 ejecucin del cdigo al pulsar el botn Submit. Hay muchos otros eventos que podemos utilizar tambin y para saber mejor cmo funcionan, vamos a modificar nuestro ejemplo. 1 En el cdigo 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 botn, pero sin pulsar. La ventana emergente aparece. El eventoonmouseover lanza el cdigo JavaScript asociado en cuanto el cursor pasa por encima del rea del botn. En este momento el evento est asociado al botn, pero podemos mover el evento y en vez de reaccionar al botn, que lo haga asociado a toda la pgina. 3 Selecciona el evento onmouseover y su valor, y pulsa Ctrl + X para cortar el cdigo. Busca la etiqueta de abertura de <body> y pulsa Ctrl + V para pegar el cdigo, como se muestra aqu: <body onmouseover="show_prompt()"> El evento onmouseover aplicado a la pgina entera va a funcionar, pero es las buenas prcticas recomiendan el uso del evento "onload", que lanza el cdigo JavaScript en el momento en que se abre la pgina: <body onload="show_prompt()"> 4 Una vez hemos cambiado el evento a onload, guarda la pgina y brela en el navegador. En cuanto la pgina se abre, se nos muestra la ventana emergente pidiendo el nombre. Podramos

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 117 de 156

introducir el texto aqu, pero tal y como est estructurado el evento en este momento, el resultado sera que el texto escrito se mostrara en la misma pgina, as que pulsa Cancelar. Con este ejercicio has aprendido que JavaScript te deja elegir el momento y la forma de llamar al cdigo. En ambos casos la interaccin del usuario lanza la ejecucin de ese cdigo, pero el evento onload nos ofrece pocas opciones para elegir el momento, mientras que el eventoonclick (asociado al botn), nos da ms 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 convencin para acceder a los datos dentro de las pginas HTML. Este modelo describe cmo se relacionan todos los elementos de una pgina HTML por ejemplo textos, formularios o imgenes- 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 pgina 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 informacin desde/hacia el ordenador del usuario Recuerda el primer ejercicio y la seccin de cdigo que aadiste, que tena 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 seccin del cdigo en rojo se la denomina una funcin y el comportamiento que ha demostrado la pgina es uno de los ejemplos ms simples que se pueden hacer en JavaScript, puesto que tenemos muy pocos objetos en el documento. La mayora de documentos HTML tienen dentro mltiples objetos y podemos pasar un valor de texto a otra zona de la pgina, o enviar datos desde un formulario. Ahora que tienes una idea bsica de JavaScript y su funcionamiento, el trabajo con el elemento Canvas ser ms sencillo.

El elemento Canvas
El elemento canvas es algo distinto de los dems elementos de HTML5. Es ms complejo en el sentido de que necesita de JavaScript para funcionar. El primer paso que daremos ser aadir (o definir) un elemento canvas en nuestra pgina HTML. Despus tenemos que guardar una referencia

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 118 de 156

al contexto de dibujo para ese elemento en forma de variable de JavaScript. Ms 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 podrs 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 pgina, se llama a la funcin JavaScript setup(). Esta funcin 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 cdigo HTML de la plantilla del canvas es as: <body onload="setup();"> <canvas id="lessonCanvas" width="300"height="300" style="margin:100px;"></canvas> </body> El cdigo JavaScript tiene este aspecto: <script type="text/javascript"> function setup() { var canvas = document.getElementById('lessonCanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); <!--drawing instructions here --> } } </script> No vas a modificar este archivo, sino que cuando ests preparado para operar sobre el canvas por ti mismo, podrs utilizarlo como punto de partida. 2 En el men Archivo del editor, cierra el archivo sin hacer cambios.

Ventajas del elemento Canvas


Segn vayamos avanzando por los siguientes ejercicios seguramente pensars que la cantidad de scripting que se necesita es mayor de la esperada. El elementocanvas nos permite crear grficos que, de no disponer de l, tendramos 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 cdigo. El objetivo de esta leccin consiste en explicar los conceptos fundamentales del manejo del elemento canvas. Sin duda, en el futuro tendremos aplicaciones que nos permitirn crear objetos y animaciones para los canvas sin necesidad de programarlos a mano. De hecho veremos algunos de estos desarrollos al final de la leccin. De momento vamos a crear estos objetos desde cero, que es la mejor forma de saber cmo 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 tambin se utilizar para juegos, animaciones, diagramas, grficos, visualizacin de datos y para crear interfaces vectoriales de usuario, entre otros muchos usos posibles.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 119 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 ms casos de uso del canvas: los iconos de la interfaz de usuario son un ejemplo del tipo de grficos que, en teora, podemos crear con elementos canvas. Las imgenes creadas con este elemento pueden guardarse en el disco en forma de archivos PNG, as que podemos imaginar una aplicacin web que nos permitir exportar imgenes. Adems, utilizando una funcionalidad del Canvas llamada "data uri" podemos embeber imgenes creadas con el Canvas directamente dentro de CSS. Como sucede con la mayor parte de las funcionalidades de HTML5, queda a criterio de los diseadores y desarrolladores el empezar ya a utilizar este elemento. En los ejercicios siguientes puedes empezar a hacerlo por ti mismo. Al finalizar la leccin habrs creado un grfico de barras empleando el canvas.

Trazos de dibujo ("paths")


Los trazos y las formas bsicas son los componentes bsicos de la creacin de dibujos en el elemento canvas. Una vez te familiarices con las funciones ms importantes, podrs crear elementos grficos ms complicados, como diagramas basados en datos, figuras animadas para tus juegos y otros diseos de gran utilidad e inters. Las primeras funciones que veremos en este apartado tambin nos van a servir para tener un conocimiento general de cmo funciona el elemento canvas.

Dibujo de rectngulos
El rectngulo es el trazo ms sencillo que podemos dibujar. La funcin fillRect(x,y,width,height)que podemos utilizar dentro del objeto context , genera una figura rectangular en la posicin y con el tamao indicados por los parmetros, y con un relleno basado en el valor que tenga la variable fillStyle en ese momento. Una funcin estrechamente vinculada con sta es strokeRect, que genera la misma figura pero en lugar de rellenarla, dibuja el contorno basndose en el estilo definido en ese momento para la variable strokeStyle. La funcin clearRect emplea los mismos parmetros pero elimina ("limpia") todos los pixels del canvas que quedan dentro del rea de un rectngulo 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 cdigo vers un elemento Canvas ya definido y una funcin JavaScript llamada setup que se ejecuta al abrir la pgina. En la funcin 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, despus de la declaracin de la variable ctx, aade este cdigo para dibujar un rectngulo 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); } }

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 120 de 156

Como puedes ver, las coordenadas X e Y tienen un valor cero, es decir, el rectngulo 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 rectngulo ocupa todo el espacio del canvas. 3 Debajo de la lnea que acabas de escribir, aade estas otras dos lneas de cdigo que cambian el color del trazo, que ahora es negro, a rojo, y una segunda que dibuja un recuadro rojo ms pequeo: 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. Podrs 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).

Rectngulos 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 aade 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 lneas que acabas de escribir, aade la siguiente lnea para dibujar un rectngulo con relleno: ctx.fillRect(20, 20, 100, 100); 6 Aade otras dos lneas de cdigo para cambiar el color del relleno, que en este momento es negro, a verde, y dibuja otro segundo rectngulo 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 pgina estaba ya abierta, simplemente actualiza el contenido (pulsando F5) o vuelve a cargar el archivo. Ahora lo que deberamos ver es lo que aparece en esta figura:

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 121 de 156

Rectngulos con borde en rojo y negro, y otros rectngulos con relleno negro y verde creados con HTML5. La funcin fillRect sirve para crear un rectngulo slido (relleno), en vez de un recuadro. 8 Mantn abierta la pgina en el navegador y vuelve al editor. Debajo de las lneas del paso seis, aade este cdigo 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 pgina. Ahora vers un dibujo parecido al de la figura siguiente. La funcin clearRect convierte en transparentes todos los pixels que quedan dentro del rea delimitada por el rectngulo, eliminando en parte los cambios de color que hemos hecho antes con strokeRect y fillRect.

Recuadros negro y rojo con rectngulos en negro y verde, y dentro de ste, un agujero transparente.

Dibujo de lneas y crculos


Las funciones de dibujo de rectngulos del apartado anterior son, en realidad, una de funciones an ms bsicas combinadas de tal forma que su uso se hace ms sencillo. Supongamos que nos interesa crear el mismo rectngulo utilizando funciones ms bsicas. Veamos otra vez el cdigo de la funcin generadora: ctx.strokeRect(0, 0, 300, 300); El mismo rectngulo se puede generar siguiendo una secuencia de funciones ms bsicas: ctx.moveTo(0, 0); ctx.lineTo(300, 0); ctx.lineTo(300, 300); ctx.lineTo(0, 300); ctx.lineTo(0, 0); ctx.stroke();

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 122 de 156

Esta secuencia genera un trazo compuesto o lnea poligonal, que comienza en el punto definido por las coordenadas de moveTo(x, y). Las sucesivas funciones lineTo(x, y)van aadiendo puntos de inflexin al trazo, que se unirn posteriormente con lneas rectas. Finalmente, la funcin stroke es la que dibuja en el canvas las rectas que unen los puntos por orden, pero sin rellenar el espacio interior. Parece ms razonable emplear la funcin de rectngulo puesto que hace lo mismo con una sola lnea de cdigo, pero conviene conocer cmo se manejan las funciones ms bsicas 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 funcin setup. En esta prctica vamos a aadir un rectngulo y una serie de lneas en zig-zag. 2 Dentro de la funcin setup, detrs de la lnea var ctx = canvas.getContext('2d');, aade este cdigo: 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 pgina para revisar el resultado, que debe ser parecido a esta figura

Un recuadro negro y una lnea en zig.zag atravesando el canvas. Puedes ver que la funcin lineTo es bastante til a la hora de dibujar lneas o rectngulos. Ahora vamos a cambiar el color de relleno de las lneas en zig-zag y aadiremos un crculo rojo encima del trazo. 4 Vuelve al editor y aade estas lneas de cdigo 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 lnea cambia el color de relleno active, que pasa de blanco a rojo. La segunda lnea dibuja un crculo completo con su centro situado en las coordenadas (100, 100) y un radio de 16 pixels. Los ltimos tres parmetros de la funcin arc definen la longitud del arco. Los valores startAngle y endAngle, medidos en radianes, definen los puntos de inicio y final, y el ultimo parmetro, llamado anticlockwise define la direccin en que se dibujar la lnea entre estos el punto de inicio y el de trmino. Por tanto, en este cdigo se define el dibujo de un arco que

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 123 de 156

empieza en la posicin 0 (el punto ms a la derecha del crculo terico) y sigue, avanzando en sentido horario, hasta que alcanza el punto 2 radianes, es decir, una rotacin completa de 360 grados, con lo que cierra el crculo. Finalmente, la funcin 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 crculo ha quedado aadido al conjunto de lneas del trazo. Puesto que las lneas y el crculo forman parte del mismo trazado, el relleno de color se aplica a toda el rea, no solo al crculo.

Un contorno negro y una figura quebrada rellena en rojo. 6 Si queremos dibujar trazos independientes tenemos que utilizar la funcin beginPath, que da por concluido el trazo activo y comienza con otro nuevo. Vuelve al editor de textos y entre la funcin fillStyle y arc, inserta las lneas 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 lnea, ctx.stroke();, sirve para aadirle un borde al crculo. 7 Guarda el archivo y pasa al navegador para visualizar la pgina. El dibujo debe aparecer ahora as:

Un recuadro negro, lnea en zig-zag y un crculo rojo. 8 Una vez creado el crculo, ahora vamos a aadir otro objeto, en este caso un semicrculo. Escribe estas lneas debajo de las anteriores: ctx.beginPath(); ctx.arc(170, 170, 16, 0, Math.PI, true); ctx.fill(); Con este cdigo iniciamos un nuevo trazo, para dibujar un arco independiente del crculo anterior. Los valores 170,170 son las coordenadas del centro. El valor 16 es el radio, el valor cero es el punto

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 124 de 156

de inicio (startAngle)y el valor de endAngle lo dejamos en , con lo que solamente dibujar un semicrculo -180 grados- empezando desde el punto cero. El valor "true" para el parmetro anticlockwise hace que el semicrculo se desarrolle hacia arriba. 9 Guarda el archivo y visualiza la pgina en el navegador. Ahora debe verse esta imagen:

Un recuadro negro, lnea en zigzag, crculo rojo y semicrculo rojo. Si dejamos el valor de anticlockwise como "false", el arco se trazara en sentido horario, es decir un semicrculo 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 cdigo es el mismo que el del ejercicio inicial donde se defina 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 composicin semejante a una flor. 2 En la sentencia if, despus de la lnea donde se declara la variable ctx, aade este cdigo para dibujar un rectngulo que encuadra el canvas. ctx.strokeRect(0, 0, 300, 300); Es el mismo rectngulo de encuadre que vimos en la seccin anterior, que nos sirve de marco de referencia visual para saber dnde est el canvas dentro de nuestra pgina. 3 Aade las lneas siguientes debajo de la lnea 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 lnea de cdigo cambia el relleno a color verde. Las siguientes lneas definen los puntos iniciales, curvas y lneas de la forma del tallo. 4 Guarda el archivo. Pasa al navegador y muestra la pgina HTML. Debers ver esta figura:

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 125 de 156

La forma de un tallo de flor verde. Ahora vamos a crear un ptalo de la flor utilizando la funcin bezierCurveTo que utiliza dos puntos de control, a diferencia del nico punto de control que necesita la funcin quadraticCurveTo del paso anterior. Adems tenemos que dibujar una serie de guas utilizando los mismos puntos, para ver mejor cmo opera la funcin 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 aade este cdigo debajo de las lneas 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 cdigo cambia los colores del trazo y el relleno, y nos dibuja el primer ptalo 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 lneas del cdigo cambian el trazo a azul oscuro y el relleno a azul claro. Las siguientes cuatro lneas generan un trazo nuevo mediante la funcin bezierCurveTo para conseguir curvas suaves. Finalmente, rellena el trazo y dibuja el borde. 7 Guarda el archivo HTML y mustralo en el navegador para ver los cambios:

La forma de un tallo con un solo ptalo de la flor.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 126 de 156

8 Vuelve al editor de textos y aade las siguientes lneas de cdigo debajo de las que has escrito en el paso anterior. Estas nuevas lneas 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 cmo trabaja la funcin bezierCurveTo con los puntos de control para definir una curva, vamos a aadir una gua utilizando los mismos puntos de la primera curva del ptalo de la flor. Creamos las guas aadiendo las siguientes lneas de cdigo 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 lnea cambia el trazo a rojo brillante, que veremos por fuera del dibujo del ptalo. Las seis lneas siguientes generan una lnea poligonal con circulitos pequeos en cada punto utilizado por la primera curva de Bezier. 10 Guarda el archivo HTML y pasa al navegador para ver cmo queda el diseo tras estos cambios.

La flor con un solo ptalo y las lneas gua de desarrollo de la curva de Bezier.

s sobre los puntos de control

a vez terminada la seccin de Dibujo de Curvas, y para profundizar ms en la forma en que la funcin bezierCurveTo utiliza los puntos de con

valores de punto guardados en el paso 5. Si cambias los valores, vers que las guas siguen representando en pantalla los puntos utilizados y la

sarrolla hacia esos puntos de control.

mo ejemplo, cambia la coordenada X de la variable cp2 de 66 a 4. La curva de la parte de abajo del ptalo se dibuja ahora hacia el lado ms a l canvas, mientras que el segundo punto sigue siendo el mismo.

Uso de textos dentro del Canvas


Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 127 de 156

Adems de lneas y formas, en un canvas podemos dibujar textos. Los tipos de letra, tamaos 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, tamaos y grosores disponibles. A diferencia de CSS, no existe aqu el concepto de mrgenes internos o externos. En este caso el texto se sita en la posicin definida por las coordenadas X e Y, que expresan la distancia en pxels horizontal y vertical, con respecto al origen (la esquina superior izquierda del canvas). En esta seccin vamos a crear una tarjeta de identificacin 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 excepcin de dos rectngulos que sirven como fondo de la tarjeta. 2 Busca la segunda funcin strokeRect y aade este cdigo para dibujar el texto de cabecera: ctx.fillText('HELLO MY NAME IS', 12, 40); Esta lnea de cdigo dibuja un texto, que se indica en el primer parmetro, empezando en las coordenadas indicadas por los parmetros 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 cdigo. 3 Guarda el archivo HTML y vamos al navegador a ver el resultado, que debera quedar as:

La tarjeta de identificacin con un pequeo borde. 4 Para aumentar el tamao y grosor de la letra, inserta esta lnea de cdigo antes de la lnea 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 tamao de la fuente utilizando valores relativos. En este caso el texto de cabedera ser 1,8 veces el tamao de la fuente del elemento canvas, tamao que viene heredado del objeto <body> de la pgina HTML salvo que indiquemos expresamente otra cosa. 5 Guarda el archivo HTML y visualzalo en el navegador, para ver los cambios:

La tarjeta de identificacin con una cabecera ms grande.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 128 de 156

6 Para aadir 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 tamao mayor. Debajo del cdigo del paso 2, aade 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 lnea 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 lnea establece el alineamiento horizontal del texto con respecto a la coordenada de posicin, 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 visualzalo en el navegador:

La tarjeta de identificacin con el nombre y una bonita cabecera.

Uso de colores, estilos y gradientes


Hasta ahora hemos utilizado colores slidos, pero la mayora 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. Adems, en esta seccin 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 pgina HTML: el vaso aparece vaco:

Un vaso de Coca Cola vaco con una sombra negra. 3 Vuelve al editor y debajo de la funcin strokeRect Cambia el color de fillStyle desde el negro actual a gris, como se indica aqu:

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 129 de 156

ctx.fillStyle = 'gray'; En las secciones anteriores de esta leccin hemos utilizado siempre la notacin RGB para definir los colores, pero existen ciertas palabras reservadas que facilitan su uso. Otros trminos para designar colores son "red", "blue", "orange", "purple", etc.. 4 Guarda el archivo HTML y pasa al navegador para comprobar cmo ha quedado con los cambios.

Un vaso de Coca Cola vaco con una sombra mas clara. 5 Tambin se puede rellenar el vaso con algo que simula la Coca Cola utilizando un gradiente lineal. Despus de la seccin comentada con el texto "cup inline" y antes de la seccin que viene encabezada por el comentario "cup outline", inserta estas lneas de cdigo: 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 lnea 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 posicin se utilizan coordenadas X e Y, igual que cuando colocbamos rectngulos o crculos. Las siguientes cuatro lneas definen una serie de "puntos de parada" del gradiente. El primer parmetro define la posicin del punto de parada de color relativo al punto de comienzo y finalizacin del gradiente (donde 0 representa el punto de inicio y 1, el punto final). El segundo parmetro 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 funcin rgba, que ampla la funcin rgb aadiendo un cuarto parmetro, llamado "alpha" o tambin "opacidad" del color. La opacidad vara en una escala de 0 a 1, siendo cero el valor de la transparencia completa y 1 la mxima opacidad. Si quieres conocer mejor los conceptos de la notacin de color RGBA, puedes consultar el libro "HTML5 Digital Classroom" y en concreto, la Leccin 11 "Aplicando estilos con CSS3". La ltima lnea cambia el valor de fillStyle al nuevo pincel de gradiente lineal. 6 El ltimo paso ser rellenar el contorno del vaso. En la seccin que sigue al comentario "cup outline", aade la siguiente lnea despus de la funcin stroke. ctx.fill(); 7 Guarda el archivo HTML y visualzalo en el navegador para ver el resultado:

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 130 de 156

Un vaso lleno de Coca Cola. 8 Vuelve al editor. Mediante el empleo de varios gradientes radiales vamos a aadir burbujas al vaso de Coca Cola. Despus de la lnea de cdigo ctx.fill que has escrito en el paso 6, aade estas lneas: 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 lnea cambia la anchura del trazo desde el valor por defecto (1 pixel) a 2 pixels.. 9 Debajo de las lneas escritas en los pasos anteriores, aade 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 lnea 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 parmetros primero y segundo para el punto de inicio, y el tercer y cuarto argumentos, para el punto de finalizacin). 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 posicin 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 crculo que representa una burbuja. Despus de las lneas de los pasos anteriores, aade 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.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 131 de 156

12 Para aadir otra burbuja tenemos que definir otro pincel de gradiente porque las coordenadas han quedado establecidas en una posicin absoluta. Si movemos o cambiamos el tamao de la burbuja, tenemos que mover el pincel tambin. Debajo del cdigo del paso 10, aade estas lneas: 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(); 13 Guarda el archivo HTML y pasa al navegador para ver el resultado de estos cambios:

Un vaso lleno de Coca Cola con dos burbujas. 14 Aadiremos una burbuja ms para finalizar la composicin: debajo del cdigo del paso anterior, aade estas lneas: 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(); 15 Guarda el archivo HTML y pasa al navegador para ver el resultado de estos cambios:

Un vaso lleno de Coca Cola con tres burbujas.

Aadir imgenes
Podemos utilizar una funcin muy sencilla, llamada drawImage para dibujar una imagen en el canvas. La parte ms complicada es asegurarnos de que cuando llamemos a la funcin, le da tiempo suficiente al navegador para descargar la imagen externa. Una vez que la tiene disponible, la funcin Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 132 de 156

drawImage nos ofrece una gran flexibilidad a la hora de determinar el tamao 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 utilizbamos en la primera parte de esta leccin. 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, detrs de la declaracin de la variable ctx aade el cdigo siguiente: var img = new Image(); img.onload = function(){ } img.src = 'images/fishlake.jpg'; La primera lnea declara un nuevo objeto de tipo imagen y la segunda define una funcin para el evento onload de la propia imagen. En la ltima lnea se indica el URL del archivo de imagen a utilizar. Una vez que el navegador ha descargado la imagen, hace una llamada a la funcin de la segunda lnea. 4 Dentro de los smbolos de llaves ({, }) de la funcin onload, aade este cdigo marcado en rojo: img.onload = function(){ ctx.drawImage(img, 0, 0); } Esta instruccin 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 cmo queda despus de estos cambios:

La imagen original aparece est recortada. La imagen aparece en pantalla, pero recortada porque el tamao original del archivo es mayor que el tamao del canvas. 6 Para cambiar el tamao de la imagen y que quepa en el espacio disponible, vamos a aadir a la funcin drawImage una anchura de destino de 300 y una altura de 200 pixels. Modifica la lnea que has escrito en el paso cuatro aadiendo estos dos nuevos argumentos a la funcin: ctx.drawImage(img, 0, 0, 300, 200); Con ello le indicamos al canvas que tiene que mostrar la imagen en la posicin 0,0 y alterar su tamao para conseguir una vieta de 300x200 pixels. 7 Guarda el archivo HTML y visualzalo en el navegador para comprobar el efecto de este cambio:

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 133 de 156

La imagen del lago despus de cambiar el tamao para que quepa en el espacio disponible. 8 La ltima variacin que haremos sobre la funcin drawImage es definir la posicin de inicio, la anchura y la altura junto con la posicin de destino, anchura y altura. Modifica la misma lnea 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 posicin 0,0, con una anchura y altura de 300 pixels, utilizando una porcin rectangular de la imagen original que empieza en la posicin (287,132) y con una anchura y altura de 100 pixels. 9 Guarda el archivo HTML y vuelve al navegador para visualizar la pgina HTML y comprobar el efecto de este cambio. Esta tcnica de ampliacin de imgenes no es perfecta, ya que el resultado suele presentarse pixelado. En este caso lo vemos solo con fines de demostracin.

La imagen del lago, despus de ampliar una parte concreta .

Uso de las transformaciones


Las transformaciones, combinadas con los estados de dibujo del Canvas nos permiten crear diseos complejos y dinmicos. Como hemos visto en apartados anteriores de esta leccin, 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 ms tarde. Los tres tipos de transformaciones (cambio de escala, rotaciones y traslaciones) tambin se guardan en niveles de cambios de estado globales y se pueden utilizar fcilmente si sabemos cmo 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 pgina para ver los cuadrados. En realidad, aunque son figuras cuadradas, son "rectngulos" (de lados iguales). Aqu los consideraremos "rectngulos".

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 134 de 156

Cinco rectngulos. 3 Despus del comentario relativo al rectngulo 1 y antes del comentario del rectngulo 2, aade esta lnea de cdigo indicada en rojo: //rectangle1 ctx.fillRect(30, 120, 40, 40); ctx.translate(0, 20); //rectangle2 ctx.fillRect(80, 120, 40, 40); La transformacin de traslacin provoca un desplazamiento para cualquier instruccin posterior, basada en el primer parmetro que corresponde con el valor de desplazamiento sobre el eje X, y el segundo parmetro 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 rectngulos siguientes se han desplazado hacia abajo, al aplicar el desplazamiento sobre el eje Y. 5 Como ves, la transformacin de traslacin se aplica a todas las instrucciones que aparecen a partir de ella. Del comentario del rectngulo 1 y antes del cdigo que has escrito en el paso 3, aade la siguiente lnea, para que el cdigo quede as: //rectangle1 ctx.fillRect(30, 120, 40, 40); ctx.save(); ctx.translate(0, 20); 6 Despus del comentario del rectngulo 4 y antes del rectngulo 5, aade la lnea 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 aadir la transformacin de traslacin, guardamos una "instantnea" del estado global del canvas. Despus de dibujar el cuarto rectngulo

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 135 de 156

recuperamos el estado global del canvas a la situacin que tenamos antes de que se aplicase la transformacin. 7 Guarda el archivo HTML y vuelve al navegador para visualizar la pgina y comprobar el efecto de estos cambios.

Ahora, solo los tres rectngulos centrales se desplazan hacia abajo sobre el eje vertical. 8 Vuelve al editor, y despus del comentario del rectngulo 2 y antes del rectngulo 3, aade estas dos lneas: ctx.save(); ctx.rotate(0.19); La primera guarda otra vez una captura de los valores globales de estado del canvas. La segunda aade una transformacin de rotacin donde el parmetro corresponde al valor en radianes del giro que queremos aplicar a la figura. 9 Guarda al archivo HTML y visualzalo en el navegador para comprobar los cambios.

Los cuatro ltimos rectngulos aparecen ms abajo y en el centro, dos de ellos girados levemente. Al llamar a la funcin save dos veces y solo una a la funcin restore, el ltimo rectngulo queda afectado por la transformacin de traslacin, pero no por la de rotacin. 10 En el editor, detrs del comentario del rectngulo tres y antes del rectngulo 4, aade esta lnea: ctx.restore(); 11 Guarda el archivo HTML y vuelve al navegador para ver los cambios en la pgina.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 136 de 156

Tres rectngulos desplazados hacia abajo y uno de ellos girado 12 Debajo de la funcin restore del paso 6 y antes del rectngulo 5, aade esta lnea: ctx.scale(0.5, 0.7); 13 Guarda de nuevo el archivo y visualzalo en el navegador:

Tres rectngulos desplazados hacia abajo, uno rotado y otro con un cambio de escala.

Creacin de un bucle de dibujo


Ahora que tienes unas nociones bsicas de dibujo con el canvas, vamos a ver la parte "dinmica" de este elemento. Ciertas funciones de JavaScript como setInterval, nos permiten llamar de manera reiterada a una funcin de dibujo. En cada llamada podemos modificar ligeramente algn parmetro de la figura y con ello se genera la ilusin de animacin. 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 cdigo que dibuja un bonito cielo nocturno con un platillo volante. 2 Abre el navegador para ver la composicin inicial.

Un cielo nocturno y un platillo volante. 3 Revisa el cdigo JavaScript que genera el bucle de dibujo.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 137 de 156

Como suceda en los apartados anteriores, el evento onload del cuerpo de la pgina llama a la funcin setup que abre el objeto de imagen y descarga el archivo ufo.png. Fjate bien en que las variables ctx e img inicialmente se declaran fuera de la funcin setup. As conseguimos que estas variables puedan utilizarse desde otras funciones, en este caso las funciones draw y drawbackground. Despus de que se abre la imagen podemos utilizar la funcin setInterval para llamar a la funcin draw cada 36 milisegundos. La funcin draw despus llama a la funcin 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 lnea donde se define la variable img y antes de la funcin setup, aade las lneas de cdigo 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 posicin del platillo volante, pero tendremos que modificar la funcin drawpara que utilice estas nuevas variables. 5 En la funcin draw cambia drawImage para que utilice estas nuevas variables y actualice el valor de x de la siguiente manera: function draw() { drawBackground(); <!--ufo--> 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 movindose por el cielo nocturno. 7 Para repetir la accin 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. Adems, podemos variar la velocidad de desplazamiento si aumentamos el incremento de la variable x de esta forma:

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 138 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 tamao 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 imgenes podemos utilizar tambin la funcin 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 lnea que aparece aqu en rojo: x += 3; if(x > 300){ x = -50; y = Math.random() * 300; } Math.random devuelve un nmero aleatorio entre 0 y 1 que debe multiplicarse por el nmero mximo 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 movindose por el cielo en distintas alturas de forma aleatoria.

El platillo se desplaza cambiando de altura a cada ciclo.

Dibujo de grficas con Canvas


Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 139 de 156

El canvas no solo nos permite diseos estticos, sino tambin mostrar contenidos cuya forma puede venir derivada de datos externos. En la siguiente prctica vamos a crear un grfico 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 cdigo 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 nmero que utilizaremos en esta prctica para calcular el tamao relativo de cada barra dentro del diagrama. 2 Aade las siguientes variables para guardar informacin de color y formato necesaria para el grfico, 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 funcin window.onload que ya viene definida dentro del archivo HTML, aade este cdigo para indicar el estilo de la fuente y su alineamiento dentro del canvas (las lneas 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 cdigo, incluye tres nuevas variables que van a guardar valores temporales (las indicadas en rojo): ctx.textAlign = "center"; var value, label, highest = 0;

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 140 de 156

5 Despus necesitaremos establecer el valor mximo dentro de nuestra matriz de datos para poder dibujar las barras correctamente. Aade este bucle justo debajo del cdigo que acabas de escribir en el paso anterior, para calcular el valor ms 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 ms elevado de la serie de datos de nuestra matriz de ejemplo. 6 Para recordar los valores de medida y posicin de cada una de las barras que deben dibujarse, aade un objeto "bar" que va guardar los valores de posicin x e y, la anchura y la altura de cada barra. Este cdigo debe aadirse 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 prctica, todas las barras del diagrama tienen la misma anchura. Esta anchura la calculamos dividiendo el ancho total del canvas por el nmero de elementos de nuestra matriz, aadindole todos los mrgenes 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 continuacin vamos a crear un bucle para dibujar cada una de las barras del grfico. 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 cdigo debers aadirlo directamente despus 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 proporcin entre la barra ms 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. Aade este cdigo (la lnea 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 pequeo espacio entre medias, a fin de que aparezcan como columnas verticales independientes. Aumenta el valor de la posicin horizontal para cada barra Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 141 de 156

aadiendo a su valor de x la anchura de cada columna ms el tamao en pixels del espacio de separacin. Esto lo hace la lnea destacada en rojo: bar.height = -(canvas.offsetHeight / highest * value - margin * 2); bar.x += bar.width + spacing; } 10 Escribe la lnea siguiente directamente encima de la que acabas de escribir en el paso anterior para dibujar las barras (la lnea 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. Podrs ver tres barras con tres colores distintos.

El grfico muestra los valores en forma de barras, pero no incluye etiquetas.

Creacin de las etiquetas


Para que el diagrama de barras sea realmente til tendremos que aadir diversos indicadores visuales que aadan 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 lnea de cdigo aadida en el paso anterior, escribe la siguiente lnea de cdigo que genera una etiqueta de texto debajo de cada barra, con el nombre de la columna. Es la lnea 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 funcin 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 prcticas anteriores. El espacio vertical se calcula a partir de la altura de la fuente. 2 Guarda el archivo y visualzalo en el navegador. Los colores de las etiquetas coinciden con los de las barras correspondientes.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 142 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 trminos absolutos. Tendremos que aadir otra serie de etiquetas, en el lado izquierdo, para representar la escala de valores empleada. 3 Debajo de las llaves que delimitan el bucle, aade esta lnea de cdigo para reiniciar el color de la fuente del canvas a negro otra vez (la lnea destacada en rojo aqu). for( i = 0; i < sampleData.length; i++ ) { ... } ctx.fillStyle = "rgb(0,0,0)"; Dibujar textos en vertical seguramente acabar siendo ms fcil en el futuro, pero en el momento de redactar este manual, la forma ms 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 cdigo que hemos aadido 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 rotacin, lo que hacemos con la siguiente lnea (marcada en rojo). for( i = 0; i < 3; i++ ) { ctx.save(); } 6 Vamos a crear una sentencia switch debajo de esta lnea. Esta sentencia switch ejecuta una accin distinta dependiendo de la etiqueta que vayamos a dibujar (es el cdigo en rojo). for( i = 0; i < 3; i++ ) { ctx.save();

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 143 de 156

switch( i ) { } } 7 Dentro de la sentencia switch, aade una instruccin case para la primera etiqueta (que se escribir en la parte inferior del grfico), la cual va a mostrar el nmero 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 habrs 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 aadir una instruccin para rotar el canvas 90 grados con la lnea de cdigo 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. Aade estas lneas de cdigo que figuran aqu en rojo, justo a continuacin de la lnea que has escrito en el paso anterior para dibujar texto en el punto donde dejamos nuestro "puntero de dibujo" y despus 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 an no estn preparadas. Aade 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 cdigo sealado 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";

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 144 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 ms sobre Canvas

Las capacidades del elemento canvas han generado una gran expectacin entre la comunidad de desarrolladores y diseadores web. Aq te indicamos algunos recursos que te ayudaran a investigar ms a fondo las posibilidades de este elemento de HTML5. AI->Canvas nuestras pginas web. Incluso dispone de soporte integrado para animaciones. http://visitmix.com/work/ai2canvas/ Lucidchart Como extra, podemos exportar los diseos que generemos con ella.. http://www.lucidchart.com/documents/demo

Es un complemento para Illustrator que nos permite exportar creatividades desde la aplicacin y utilizar el cdigo canvas resultante en

Esta aplicacin web es muy parecida a las aplicaciones de diagramas como Visio, y est totalmente construida con el elemento canvas

Autoestudio
Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 145 de 156

Puedes seguir experimentando con el ejercicio de bucle de dibujo cambiando la imagen animada y la composicin del fondo de la escena. Para aadirle ms niveles de interaccin, cambia la posicin de la imagen en movimiento dependiendo de la posicin del ratn. Puedes probar a aplicar transformaciones a la composicin tambin, para ver cmo se aplican los efectos en transformaciones mltiples simultneas.

Repaso Preguntas
1 Cules son los requisitos bsicos para dibujar con Canvas en HTML5? 2 Cmo se dibuja un crculo en el Canvas? 3 Cmo podemos definir un color semitransparente?

Respuestas
1 Debe definirse e incorporarse un elemento canvas al cuerpo de la pgina. Las instrucciones de dibujo se aplican despus utilizando una referencia al Contexto 2D del elemento canvas. 2 Utilizando la funcin arc podemos dibujar un crculo completo si indicamos los valores startAngle a cero y endAngle como Math.PI*2. Los ngulos se miden en radianes y la funcin Math.PI equivale a 180 grados. 3 La funcin rgba tiene cuatro parmetros. 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 parmetro (alpha) admite valores entre cero y uno, y determina el grado de opacidad (cero es transparente y 1 totalmente opaco).

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 146 de 156

Leccin 6: Contenidos multimedia y funciones Drag y Drop de HTML5


Objetivos:
En esta leccin aprenders a incorporar contenidos multimedia a una pgina 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 leccin 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 prcticas de HTML5 en tu ordenador.

Multimedia e interactividad con HTML5


En esta leccin aprenders a integrar contenidos multimedia en tus pginas utilizando los nuevos elementos <video> y <audio> de HTML5. Adems podrs aprender los conceptos bsicos de la funcionalidad arrastrar y soltar (drag-and-drop) y cmo se aade a una pgina web con el API Drag and Drop. Aunque a primera vista puede parecer que estos dos elementos no tienen mucho en comn, 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 aprenders los conceptos bsicos de uso de multimedia y de las operaciones drag and drop, sino las tcnicas necesarias para asegurar la compatibilidad en el mayor nmero 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 botn. En el entorno de las aplicaciones de software y sistemas operativos esta capacidad de arrastre y liberacin 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 algn complemento para el navegador, por ejemplo hecho con Flash o Silverlight. El API Drag and Drop de HTML5 se basa en la implementacin 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 pgina web, pero otros navegadores no admiten esto.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 147 de 156

Conviene saber que en la mayora de los navegadores podemos arrastrar por defecto imgenes, enlaces y textos seleccionados. Podemos tambin, en algunos navegadores, arrastrar archivos y textos seleccionados desde el sistema operativo.

Operaciones Drag and Drop compatibles en distintos navegadores


En esta leccin nos centraremos en las funciones drag-and-drop soportadas en la mayora de navegadores. Hay algunas diferencias entre los indicadores visuales de una operacin drag-and-drop. La funcionalidad de la operacin, en general se conserva, con un nmero 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. Podrs ver que en la pgina tenemos una lista de la compra. El objetivo de esta prctica consiste en crear una interfaz basada en las operaciones de arrastrar y soltar para comprar artculos. Hemos creado el cdigo JavaScript inicial para evitarte este trabajo, pero tendrs que aadir el que falta para conseguir que la pgina funcione correctamente.

El aspecto inicial de la pgina. Mueve el cursor sobre los productos que aparecen en la pgina. El puntero cambia, y tambin cambian los bordes de las imgenes. As los usuarios saben que pueden arrastrar estas imgenes. 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 imgenes de las camisetas. A lo largo de esta leccin veremos que se pueden utilizar tambin otros indicadores visuales. 2 Pasa al editor de textos y mira dentro de la segunda seccin <script>. (El primer elemento <script> se utiliza para la librera Modernizr, que hace que los navegadores antiguos puedan reconocer los elementos nuevos de HTML5). Encuentra la variable shoppingcart dentro de la funcin setup. Esta variable contiene una referencia

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 148 de 156

al div de la lista de la compra., En tu cdigo utilizars esta referencia para registrar el div como zona para soltar los objetos arrastrados. Aade la siguiente lnea de cdigo 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 funcin preventDefault para mantener la consistencia entre los distintos navegadores. El cdigo que se muestra a continuacin ya est aadido a la seccin de script y define la preventDefault, que necesita lanzar tres tareas concretas para evitar la accin por defecto en algunos navegadores: function preventDefault( event ){ event.stopPropagation(); event.preventDefault(); return false; } La funcin stopPropagation evita que otros contenedores respondan al mismo evento. La funcin preventDefault evita el comportamiento por defecto de este evento en ciertos navegadores. Dado que preventDefault es una funcin 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, aade el cdigo marcado en rojo despus de la lnea de cdigo del paso anterior. function setup(){ shoppingcart = document.getElementById('shoppingcart'); shoppingcart.ondragenter = preventDefault; shoppingcart.ondragover = preventDefault; } 4 Desplzate hacia la mitad inferior del cdigo HTML de la pgina. Para permitir el arrastre desde la lista que contiene las imgenes de las camisetas, aade 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 diseada 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 implementacin aporta las capacidades de arrastre y pegado necesarias para poder hacer una aplicacin de carrito de la compra sencilla. 5 Dentro de la funcin dragStarted, ya definida para esta actividad, aade la siguiente lnea de cdigo 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 funcin dragDrop de modo que responda al evento drop de la lista de artculos elegidos: function setup(){ shoppingcart = document.getElementById('shoppingcart'); shoppingcart.ondragenter = preventDefault;

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 149 de 156

shoppingcart.ondragover = preventDefault; shoppingcart.ondrop = dragDrop; } 7 Dentro de la funcin dragDrop predefinida, introduce la siguiente lnea de cdigo para aadir a la lista de la compra el objeto que se ha arrastrado hacia l function dragDrop(event){ addToCart( dragging, 1 ); }

Cmo hacer que un objeto sea arrastrable en HTML5 En algunos navegadores, como Internet Explorer 10, podemos por defecto, arrastrar imgenes, 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 aadirles 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 pgina en el navegador. Dependiendo del navegador que utilices, vers resultados muy distintos si arrastras una de las imgenes 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 aadir la siguiente lnea de cdigo: 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, quedarn aadidas a la lista de artculos comprados.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 150 de 156

La lista de la compra mantiene la relacin 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 vdeo


Aadir video y sonido a una pgina web es una manera de hacerla ms atractiva. Los contenidos multimedia captan la atencin del visitante y nos permiten llegar a audiencias que, muy a menudo, adoptan una actitud de rechazo hacia las pginas con texto abundante. En HTML5 se resuelve directamente la construccin de pginas con audio y vdeo. Antes de la llegada de HTML5 dependamos del uso de complementos instalables, como Flash, QuickTime o Silverlight para poder mostrar contenidos de vdeo. 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 seccin aprenders a incorporar vdeo a tu pgina web, con la posibilidad de que el vdeo empiece a reproducirse automticamente al cargarse la pgina, y tambin aprenders a utilizar los controles de reproduccin que nos ofrecen los propios navegadores. 1 Desde la carpeta HTML5_06lessons, abre la pgina 06_video.html y guarda una copia de este archivo como 06_video_work.html. En la lnea 8 dentro del elemento <body>, aade esta lnea de cdigo: <video src='videos/BigBuck.mp4' autoplay></video> Como ya veamos en el caso del elemento imagen, el elemento video tiene un atributo src cuyo valor apunta a la ubicacin del archivo de vdeo que debe reproducir. El atributo autoplay le indica al navegador que debe empezar a reproducir el vdeo en cuanto haya cargado la pgina. Guarda el archivo y visualzalo en Internet Explorer 9. Podrs ver una pgina parecida a la que se muestra en la siguiente figura. El vdeo debe empezar a reproducirse automticamente. En versiones antiguas de Internet Explorer, Firefox o Chrome, no vas a ver probablemente ningn vdeo, pero este problema se resolver en seguida!

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 151 de 156

El elemento video tal y como se muestra en Internet Explorer 9. Puesto que la forma de declarar el vdeo en HTML5 es estndar, los desarrolladores de navegadores son los responsables de que cada navegador siga las directrices del estndar y muestre el vdeo 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 reproduccin del vdeo, elimina el atributo autoplay y aade el atributo controls, con lo que la lnea de cdigo quedara as (destacando los cambios en rojo): <video src='videos/BigBuck.mp4 controls></video> Guarda el archivo y brelo en el navegador (dependiendo de la configuracin de seguridad del navegador, puede que tengas que pulsar en el botn Aceptar contenido bloqueado). Pon el cursor sobre la pelcula y aparecern los controles por defecto. Los controles estndar de Internet Explorer 9 para vdeo son un botn de Pausa/Reproduccin, la barra de avance (donde podemos mover el punto de reproduccin pulsando y arrastrndolo sobre la lnea de tiempo hacia adelante y atrs), el botn 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 botn de reproduccin (play) y el vdeo debe empezar a reproducirse. Arrastra el puntero de reproduccin sobre la barra y el vdeo avanzar o retroceder en consecuencia. Si vuelves a cargar la pgina, vers que ahora ya no aparece el atributo autoplay y el primer frame del

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 152 de 156

vdeo es un rectngulo negro que aparece en la pantalla y permanece ah hasta que el vdeo empieza a reproducirse. Si quieres que en su lugar aparezca una imagen como vista previa personalizada en vez de este recuadro negro, debes aadirle el atributo poster. Cierra el navegador y vuelve al editor de texto. 4 Inserta el atributo poster despus del atributo controls y asgnale el valor "poster320.png" tal y como se ve aqu (destacado en rojo): <video src='videos/BigBuck.mp4' controls poster='poster320.png'> </video> Al aadir el atributo poster le estamos indicando al navegador que cargue una imagen y la ponga sobre el elemento de vdeo. Cuando empiece a reproducirse el vdeo, esta imagen desaparecer. Guarda el archivo y vuelve a abrirlo con el navegador. Antes de pulsar el botn permitir contenidos bloqueados podrs ver en pantalla la imagen indicada como poster en vez del cuadro negro.

Ahora muestra una imagen de vista previa al cargar la pgina. 5 Vuelve al editor de texto y aade 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 tamao para adecuarse a las dimensiones originales del archivo de vdeo. Para controlar el tamao en pantalla se utilizan los atributos width y height. En general se considera buena prctica que ambos valores coincidan con las dimensiones originales del vdeo. Tambin podemos ampliar el tamao en pantalla cambiando estos parmetros, pero no se recomienda. Si ampliamos a mano el tamao, la calidad de la imagen puede degradarse. Si reducimos su tamao, aunque su calidad puede que no se vea afectada, estamos obligando al usuario a cargar un archivo de tamao mayor del necesario. Una solucin ms correcta sera disponer del mismo vdeo en dos formatos, uno ms grande y otro ms pequeo para cada caso. 6 Guarda el archivo.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 153 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 vdeo. Actualmente el nico valor soportado es muted (silencio). loop: Este atributo hace que el vdeo vuelva a reproducirse desde el principio cuando llega al final. preload: Este atributo hace que el vdeo empiece a cargarse al mismo tiempo que se carga la pgina (aunque no se reproduzca de forma automtica), de modo que se evita la latencia es decir, el tiempo de retardo- que requiere su descarga cuando el usuario pulsa el botn Play.

Compatibilidad con los distintos navegadores


La especificacin de HTML5 no define un cdec estndar 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 vdeo funciona como un contenedor de mltiples archivos que contienen el vdeo, audio e informacin de control en algunos casos. La opcin ms popular y que ms aceptacin tiene en la industria es el formato MP4, y ms concretamente un contenedor de vdeo MP4, el estndar ISO/IEC 14496-14:2003, que utiliza el cdec de vdeo H.264 y el cdec AAC para el audio. Ambos cdecs, el H.264 y AAC se ofrecen adems en mltiples niveles de perfil, que se utilizan para conseguir distintos grados de calidad y compresin. Para poder servir vdeos en la mayor cantidad posible de dispositivos y navegadores nuestra recomendacin es utilizar el perfil de lnea de base de vdeo H.264 y el perfil AAC de baja complejidad. Tambin existe el formato Ogg que es un contenedor de vdeo mantenido por la fundacin Xiph. Los archivos MP4 codificados con este perfil estn soportados en las ltimas versiones de Internet Explorer, Safari, iOS y Android. Si conseguimos que nuestros vdeos estn disponibles tanto en formato MP4 como Ogg, tendremos la opcin de llegar a la mayora de los usuarios que emplean dispositivos y navegadores modernos. En esta seccin vamos a ver cmo se incorporan mltiples archivos de origen a un elemento de vdeo, lo que permite al navegador seleccionar el archivo adecuado dependiendo del formato que soporte. 1 En tu archivo de prcticas 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 aade 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>

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 154 de 156

4 Guarda el archivo y actualiza la pgina en el navegador. Cuando se abre este cdigo 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 vdeo, hasta encontrar el primero compatible, que es el que emplear para su reproduccin. Por ejemplo, si un usuario con Firefox abre esta pgina, el navegador debera descargar una porcin 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 cdecs de vdeo y audio que utiliza. 5 Aade 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 vdeo est codificado como H.264 utilizando el perfil de lnea de base y el audio va codificado como AAC con el perfil de baja complejidad. 6 Ahora aade el cdigo siguiente en la lnea 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 cdec Theora y el audio con el cdec Vorbis. Cuando el navegador cargue este cdigo HTML empezar por comprobar la compatibilidad en funcin del atributo type y as se ahorra tiempo y ancho de banda, ya que no descarga todos los archivos. El ltimo paso consiste en aadir un cdigo adicional para navegadores antiguos no compatibles con HTML5: tenemos que tener preparada una alternativa para cuando carguemos esta pgina en un navegador antiguo que no soporte el elemento video en absoluto. 7 Aade un elemento <h1> con un enlace al archivo BigBuck.mp4 despus 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 vdeo, pero si lo cargas en un navegador antiguo incompatible con HTML5, podrs ver simplemente un enlace que dice Descarga el vdeo y el usuario deber pulsar sobre l para

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 155 de 156

descargarlo manualmente y reproducirlo utilizando el reproductor de vdeo 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 aadir a un elemento <video> que pueden afectar a la forma en que aparece el vdeo en pantalla. 3 Por qu cuando aadimos la etiqueta video deberamos usar como fuente un archivo Ogg adems de MP4?

Respuestas
1 El comportamiento por defecto en muchos navegadores consiste en evitar el efecto de drag-anddrop y mostrar un indicador en pantalla para que el usuario sepa que no todos los contenedores son posibles destinos de la accin 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 mostrarn los controles de reproduccin en la pgina. El atributo autoplay indica si el vdeo debe empezar a reproducirse de forma automtica al abrir la pgina. Hay otros atributos tambin, como width, height, loop, poster, preload yaudio. 3 Aunque MP4 es el formato ms utilizado, si queremos que el video pueda verse en la mayora de navegadores deberemos incluir Ogg para que los usuarios de Firefox puedan visionar el video.

Diego Daniel Abratte LOGOS Desarrollo de sistemas Informticos Pgina 156 de 156