May 4, 2017 | Author: Diego Daniel Abratte | Category: N/A
HTML5 y CSS3
Anls. ABRATTE, Diego Daniel. MP CPCIPC: 2854
HTML5 Lecciones disponibles:
•
Lección 1: Definición de HTML5
•
Lección 2: Conceptos básicos de HTML, XHTML y CSS
•
Lección 3: Introducción a la presentación en pantalla con CSS
•
Lección 4: Uso de las etiquetas HTML5
•
Lección 5: Trabajar con el Canvas
•
Lección 6: Contenidos multimedia y funciones Drag y Drop de HTML5
Ver Lección 1: Definición de HTML5 Objetivos: En esta lección los estudiantes aprenden las funcionalidades y características que forman parte de la especificación HTML5 y las tecnologías que involucran. También podrán aprender la diferencia entre la sintaxis de HMTL5 y la de HTML4 y/o XHTML 1.0. Por otra parte, al finalizar esta lección los estudiantes podrán identificar las principales características de HTML5, como los nuevos elementos HTML5, elementos multimedia, el elemento Canvas, formularios web, etc. Otro objetivo es que los estudiantes puedan distinguir entre funcionalidades que técnicamente forman parte de la especificación de HTML5 y otras que se consideran tecnologías relacionadas, como la Geolocalización, Arrastrar y Soltar y CSS3.
•
Beneficios de HTML5
•
Principales características
•
•
o
Nuevos elementos de markup y presentación
o
Los elementos , y
o
Formularios Web
o
Elementos revisados que se basan en HTML 4.0
Introducción a las APIs de HTML5 y tecnologías de apoyo
o
Geolocation
o
Web Workers
o
Almacenamiento Web
o
CSS3: Animaciones y transiciones
o
CSS3: Fondos, bordes, colores RGBa, gradientes, sombreados y esquinas redondeadas
o
Tipos de letra @font-face para la web
HTML5 todavía es un proyecto en fase de desarrollo
o
Compatibilidad de navegadores
o
Dónde se utiliza HTML5 actualmente
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 1 de 156
Ver Lección 2: Conceptos básicos de HTML, XHTML y CSS Objetivos: En esta lección los estudiantes aprenden los conceptos básicos de HTML, XHTML y CSS, necesarios para saber crear la estructura y estilo de sus páginas web. Aprenden cómo se utilizan los tipos de documento (DOCTYPE) para ayudarles a validar sus páginas web y utilizarlos como herramienta de resolución de errores. En esta lección, los estudiantes crean una página web sencilla que les sirve para saber cómo se insertan imágenes, cómo se crean enlaces y cómo pueden trabajar con hojas de estilos tanto internas como externas.
•
Introducción a la sintaxis de HTML
o •
La función de DOCTYPE
o •
•
•
Detalles de la sintaxis XHTML
Validación W3C y de página
Creación de una página HTML
o
Definición de elementos HTML
o
Inserción de imágenes en HTML
o
Uso de atributos
o
Creación de vínculos
El papel de las hojas de estilos CSS (Cascading Style Sheets)
o
Aplicar estilos a una cabecera
o
Clases de estilos y el elemento
Tres formas de utilizar los estilos
o
Internos
o
Externos
o
En línea
•
Cuándo utilizar hojas de estilo Internas o externas
•
Creación de una hoja de estilos externa
•
El concepto de "cascada" de CSS
Ver Lección 3: Introducción a la presentación en pantalla con CSS Objetivos: En esta lección los estudiantes aprenden los conceptos básicos de presentación de elementos en pantalla con CSS, incluyendo una estructura visual de dos columnas con ancho fijo, utilizando HTML y CSS. Aprenden la función de un archivo de “reset” CSS y cómo se añade a la página Web. Esta lección incluye el uso del elemento y las propiedades float y clear de CSS para crear columnas en la página.
•
El papel del archivo de reset CSS
o •
Añadir un enlace a una hoja de estilos de reset externa
Breve historia de las técnicas de disposición en pantalla de las páginas web
o
Introducción a las opciones de presentación de las páginas
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 2 de 156
•
•
Creación de una estructura básica de dos columnas de ancho fijo con CSS
o
El elemento DIV
o
Asociación de IDs y clases CSS con elementos DIV
La propiedad float de CSS
o
Creación de columnas con la propiedad float
•
Uso de la propiedad clear
•
Creación de una navegación basada en listas con directivas float
•
Uso de márgenes y rellenos para controlar la disposición de los elementos en pantalla
•
Imágenes de fondo con CSS
o
Decoración de un pie de página con una imagen de fondo
Ver Lección 4: Uso de las etiquetas HTML5 Objetivos: En esta lección los estudiantes aprenden a utilizar los nuevos elementos HTML5 para lograr presentaciones en pantalla más avanzadas. Se revisan aquí los principales elementos de división en secciones y también se repasan las etiquetas de HTML4 que han sido objeto de actualización en HTML5. Los estudiantes aprenden a convertir una página existente que emplea elementos HTML4 en una página HTML5 sustituyendo elementos por otros nuevos elementos HTML5. Además, en esta lección se aprende a trabajar con elementos de formulario HTML5 y a añadir contenidos multimedia con los elementos y .
•
Revisión del concepto de semántica de las etiquetas HMTL
•
Fundamentos de HTML5
o •
•
Uso de la declaración DOCTYPE de HTML5
Diferentes categorías utilizadas para contenidos HTML5
o
Contenidos de Metadatos
o
Contenidos de Flujo
o
Contenidos de Sección
o
Contenidos de Cabecera
o
Contenidos de Frase
o
Contenidos embebidos
o
Contenidos interactivos
El nuevo elemento de HTML5
o
Incorporar soporte para elementos HTML5 en los navegadores
•
Incorporación de elementos de HTML5
•
Esquema de documentos con HTML5
•
Incorporación de otros elementos de sección de HTML5
o
Elemento
o
Elemento
o
Elemento
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 3 de 156
o •
•
•
•
Elemento
Otros elementos HTML5
o
Elemento
o
Elemento
o
Elemento
Elementos revisados de HTML 4.0
o
La etiqueta frente a
o
La etiqueta frente a
Uso de formularios HTML5
o
Tipos de datos de entrada email y url
o
Atributos required y placeholder
o
Atributos autofocus y autocomplete
Uso de los elementos Video y Audio
o
Uso del elemento y sus atributos relacionados
o
Uso del elemento y sus atributos relacionados
o
Aspectos a tener en cuenta sobre los códecs de vídeo y audio al trabajar con contenidos multimedia
Ver Lección 5: Uso del elemento Canvas Objetivos: En esta lección los estudiantes aprenden en qué consiste el elemento Canvas, el API de dibujo en dos dimensiones que incluye la especificación HTML5. En este tema se explica cómo se incorporan elementos de diseño gráfico a una página web, por ejemplo formas, textos, rellenos y trazos de colores, imágenes y animaciones sencillas con Javascript. Esta lección enseña también a los estudiantes los conceptos básicos de la interactividad con Javascript.
•
El papel de JavaScript en las aplicaciones HTML5
•
Conceptos básicos de JavaScript
•
o
Eventos de JavaScript
o
Ubicación del código JavaScript en un documento externo
o
El DOM (Document Object Model)
El elemento Canvas
o •
•
Ventajas del elemento Canvas
Diseño gráfico con Canvas
o
Dibujo de trazos
o
Dibujo de rectángulos
o
Dibujo de líneas y círculos
o
Dibujo de curvas
Inserción de textos
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 4 de 156
•
Colores, estilos y gradientes
•
Inserción de imágenes
•
Creación de gráficos en el Canvas
o •
Uso de arrays de datos
Creación de animaciones con Canvas y Animation
o
Uso de transformaciones
o
Creación de un bucle de dibujo
Ver Lección 6: Funciones Drag y Drop de HTML5 Objetivos: En esta lección se enseña el uso de Drag and Drop, un API relacionada con la especificación HTML5. Concretamente, los estudiantes aprenden a crear una interfaz de carrito de la compra sencilla arrastrando y soltando objetos en pantalla.
•
Diferentes formatos de Drag y Drop en la web
o •
•
Ventajas de las funciones Drag y Drop
Compatibilidad de Drag y Drop entre distintos navegadores
o
Uso de la función preventDefault
o
Los eventos dragenter y dragover
o
Convertir un elemento en "arrastrable" (draggable) en HTML5
o
El atributo ondragstart
o
Creación de la función dragStarted
o
Medidas para la compatibilidad con diferentes navegadores
Transferencia de datos con una operación "Drag-and-Drop"
o
Uso del objeto dataTransfer
o
Uso de la función setData
o
La propiedad innerHTML
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 5 de 156
Lección 1: Definición de HTML Objetivos: En esta lección vamos a descubrir las características y capacidades que forman parte de la especificación de HTML5 y sus tecnologías conexas. Podrás conocer también los beneficios que aporta HTML5 a los desarrolladores, diseñadores de páginas Web y a los usuarios finales.
Para comenzar En esta lección no se necesita ningún archivo complementario. Esta lección es una revisión general de conceptos de HTML y en las siguientes ya se realizarán ejercicios prácticos paso a paso.
Definición de HTML5 HTML5 es una combinación de nuevas etiquetas de markup (lenguaje) HTML, propiedades CSS3, JavaScript y algunas tecnologías complementarias de apoyo, pero que técnicamente son independientes de la propia especificación HTML5. Por ello vamos a distinguir entre la especificación HTML5 en sí y la familia HTML5. Podemos definir la especificación HTML5 como nuevos elementos de markup o sintaxis, utilizados por los diseñadores para crear páginas web junto con las etiquetas utilizadas a día de hoy. Muchos de estos nuevos elementos ya son conocidos para los diseñadores que trabajan con las etiquetas HTML tradicionales, como , o . Estas nuevas etiquetas suponen para desarrolladores y diseñadores, unas herramientas más avanzadas y se traducen en mejores experiencias para el usuario final. La familia HTML5 incluye las nuevas etiquetas y tecnologías como CSS3, Geolocalización, Almacenamiento Web (Web Storage), Web Workers y Web Sockets entre otras. Todas ellas suponen una actualización de gran potencia al conjunto de herramientas ya existente, y con ellas se pueden crear páginas web más sofisticadas y útiles. Los nuevos navegadores incorporan funcionalidades para responder a las expectativas de los consumidores y también como fruto de la evolución natural de la propia tecnología. A medida que las aplicaciones web van ganando en capacidad de respuesta y velocidad y son capaces de resolver tareas complejas como la edición de imágenes, representación de mapas, hojas de cálculo o vídeos, los usuarios ya exigen este mismo nivel de rendimiento en todas las aplicaciones de la web. Existen limitaciones con las capacidades de los lenguajes de programación actuales y no todas las funcionalidades se pueden implementar e incorporar de manera sencilla. HTML5 aporta nuevas funcionalidades y herramientas con el fin de conseguir que los sitios web sean más interesantes, atractivos y útiles.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 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 mayoría de las páginas web que podemos ver
s diseñadores y desarrolladores web han estado utilizando la especificación HTML 4.01 durante bastantes años de manera satisfactoria, combin
S para la definición de estilos y con JavaScript para añadir interactividad a los contenidos.
as la finalización de HTML 4.0.1, el W3C continuó sus trabajos en consonancia con la evolución de la web, y comenzó con un lenguaje llamad
. Existe una pequeña diferencia entre HTML 4.0.1 y XHTML 1.0 (XHTML es un lenguaje más estricto: por ejemplo, todas las etiquetas deben
núsculas). 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 móviles. Muchos sitios web se han creado utilizando XHTML 1.0 como marco de desarrollo y muchos
sarrolladores valoran positivamente sus reglas sintácticas más estrictas.
paralelo a la adopción y difusión de XHTML 1.0, se empezó con el desarrollo de otro lenguaje, XHTML 2.0, que añadía una serie de novedad
erés a las páginas web y que se apoyaba de forma notoria en XML. No obstante, este nuevo lenguaje adolecía de diversos problemas de tipo té
olvía 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 misión consistía 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 años 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 trabajarían juntos en la elaboración del estándar.
mo resultado de todo ello, se abandonó el desarrollo de XHTML 2.0 y la especificación HTML 4.0 se reformó con el nombre HTML5. No obs
nviene recordar que HTML5 empezó siendo Web Applications 1.0, y eso nos da una pista muy clara para entender para qué fue diseñado realm
acias a que el W3C tomó el liderazgo para el desarrollo de HTML5, ahora los desarrolladores tenemos la garantía de que HTML5 será realmen
ándar gratuito y con las suficientes garantías de no incurrir en problemas de propiedad intelectual.
HTML5 extiende la definición de lo que puede hacer una página web A día de hoy HTML no tiene capacidad para reproducir contenidos multimedia, como audio o vídeo, sin un complemento (un "plug-in") como los de Adobe®Flash® o Microsoft® Silverlight®. HTML tampoco tiene capacidad para almacenar datos en el ordenador del usuario, esto se hace actualmente mediante un lenguaje de scripting o con alguna otra tecnología. No existe un formato de dibujo nativo en HTML. Los gráficos y animaciones se ofrecen en estos momentos en forma de archivos de imágenes o con la ayuda de otros complementos (Adobe Flash, Java, Microsoft Silverlight u otros). En general, cada vez más gente depende de la web y utiliza aplicaciones web y las expectativas que se generan alrededor de lo que puede (o podría) hacer una página web van creciendo día tras día. Esta demanda de los usuarios en favor de un mayor rendimiento y unos sitios web con prestaciones más avanzadas y completas se ve limitada por el lenguaje HTML que se utiliza actualmente.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 7 de 156
Un sitio como Bing™ Maps es una aplicación web de altas prestaciones que podría beneficiarse de las nuevas funcionalidades que incorpora HTML5 En los apartados siguientes vamos a explicar brevemente algunos de los aspectos más importantes de HTML5.
El lenguaje HTML5 El lenguaje (o "markup") HTML5 incorpora algunas etiquetas nuevas pensadas para hacer que la estructura de la página web sea más lógica y funcional. Antes de HTML5, la estructura de una página dependía fuertemente de las etiquetas , generalmente asociadas a una clase CSS o un ID. Por ejemplo, en HTML 4.0 es una práctica comúnmente aceptada definir la cabecera de una página web de esta forma: Esta es la cabecera En este caso, el código destacado en color rojo es el ID de CSS que sirve para definir la anchura y altura de la cabecera así como su color de fondo. En el código CSS podríamos tener algo así:
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 8 de 156
#header { width:960px; height:100px; background-color:gray; } El ID utilizado header es arbitrario. Algunos diseñadores prefieren nombres como masthead, topsection, o box. En la especificación HTML5 existe ya una etiqueta llamada que viene a sustituir al elemento de forma que la sintaxis es mucho más lógica y coherente: Esta es la cabecera En este ejemplo ya podemos añadir directamente las propiedades de estilo (ancho, alto, color de fondo, etc.) en una regla para el nuevo elemento header de CSS: header { width:960px; height:100px; background-color:gray; } La diferencia entre estos dos ejemplos anteriores puede que sea difícil de entender si no estás familiarizado con CSS. En el primer caso se utiliza un selector (#header) que refiere a un atributo ID de CSS. En el segundo caso utilizamos un selector (header) que es una novedad de HTML5 y nos permite aplicar un estilo al elemento directamente. HTML5 dispone de unos cuantos elementos nuevos aparte de éste, como , , , , y . Estos nombres se basan en los que se vienen utilizando habitualmente para distinguir secciones dentro de las páginas web que vemos a diario (div id="footer", div id="nav", etc.). El objetivo de los nuevos elementos HTML5 no es otro que evitar una excesiva dependencia de las etiquetas y sustituirlas por una estructura de página más consistente y legible. Como puedes ver, HTML5 no sustituye ningún elemento de sintaxis de HTML; simplemente añade nuevos elementos de vocabulario a la lista existente. Dicho de otra forma, podemos seguir utilizando la etiqueta , pero esta etiqueta ya no necesariamente tiene que ser la viga maestra que soporte el diseño visual de toda una página web.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 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 Lección 4. Pero antes, en esta Lección 1 vamos a mostrar una breve reseña de las principales novedades que incorpora la sintaxis de HTML5.
Los elementos , y La especificación HTML5 incluye etiquetas que nos permiten integrar contenidos multimedia sin necesidad de complementos de navegador. Las etiquetas y sirven para integrar video y audio en las páginas web de la misma forma que actualmente se hace con los archivos de imagen utilizando la etiqueta . La etiqueta dota al lenguaje HTML de un formato nativo para el dibujo y la animación. Esta etiqueta puede servir, además, como plataforma alternativa para los gráficos y animaciones que a día de hoy podemos ver en películas Flash. No obstante, existen inconvenientes de cierta consideración que es preciso resolver.
Elementos y para incorporar contenidos multimedia La estructura necesaria para incorporar contenidos de audio o vídeo a una página web es bastante sencilla, como podemos ver en el siguiente ejemplo donde añadimos un archivo de vídeo: Insertar un archivo de audio mp3 en la página se hace de forma similar. En el caso del audio y el vídeo podemos añadirle también controles de reproducción y la posibilidad de precarga, utilizando los atributos controls, preload, y autobuffer: Esta característica de HTML5 es muy útil si se compara con los métodos disponibles hasta ahora. Por ejemplo, para incorporar vídeo con Adobe Flash o Microsoft Silverlight es preciso añadir código de programación. Aparte, existe una amplia categoría de dispositivos móviles como los iPhone® de Apple® o Windows® Phone 7 que no soportan Flash o Silverlight, y en estos casos el elemento video de HTML5 es la principal alternativa. Aunque es de agradecer la simplificación que suponen las etiquetas y , en seguida surge la pregunta de cómo vamos a hacer para manejar estos contenidos desde los navegadores anteriores que no reconocen estas etiquetas nuevas. Esta cuestión se verá en detalle en la Lección 4, "Uso del lenguaje HTML5"
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 10 de 156
Reproductor de video de HTML5 con controles, integrado dentro de una página web. No necesita complementos.
El elemento para dibujo y animación El elemento canvas funciona a modo de superficie de dibujo dentro de una página web (de ahí le viene el nombre). Dentro de esta superficie de dibujo podemos crear formas con colores, gradientes y patrones de relleno. Podemos manipular los pixels de forma interactiva en pantalla, mostrar textos y exportar los contenidos hacia archivos de imagen estática, como .PNG. Podemos también utilizar JavaScript o las nuevas funciones de animación de CSS3 para que los objetos que creamos puedan moverse, desaparecer, cambiar de tamaño, etc. Incorporar un elemento canvas a una página es muy sencillo:
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 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 más sencillos dentro del canvas, un rectángulo negro, el código necesario puede ser como este: var canvas = document.getElementById ("myCanvas"), context = canvas.getContext("2d"); // x = 10, y = 20, width = 200, height = 100 context.fillRect(10, 20, 200, 100); Con estas pocas líneas creamos un rectángulo de color negro con unas dimensiones concretas. El código puede parecer excesivo para un resultado tan simple, pero la etiqueta canvas se limita a presentar el código dentro de un documento HTML y este modelo nos aporta una serie de ventajas. Entre los usos previsibles están elementos de la interfaz de usuario, como controles de reproducción, elementos de ilustración que se pueden animar o visualización dinámica de datos como diagramas y gráficos. En la Lección 5 "Trabajar con el Canvas" podrás aprender más en detalle cómo se crean contenidos con la etiqueta .
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 12 de 156
Puedes ver ejemplos de (incluyendo elementos de animación) y otras funcionalidades de HTML5 en acción en el sitio webwww.nevermindthebullets.com.
Formularios web Los nuevos elementos de formulario de HTML, cuando se implementen, harán que el trabajo con formularios sea más sencillo que ahora. Por ejemplo, muchos diseñadores web necesitan crear formularios en donde los datos tienen que comprobarse antes de enviarlos al servidor. Es casi obligado que el usuario, por ejemplo, tenga que escribir una dirección de correo electrónico en un campo de un formulario. A día de hoy, para validar este dato se necesita programación en Javascript o cualquier otro lenguaje de scripting, pero HTML5 incorpora el atributo required a la lista de tipos de datos de entrada utilizables en formularios, como se muestra en este ejemplo: 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 Informáticos Página 13 de 156
términos de búsqueda, url para los campos de direcciones web y algunos más. Estos nuevos elementos de formulario web seguramente tardarán algo en integrarse en la especificación oficial, pero están diseñados de manera que puedan revertirse a campos genéricos de formulario, o dicho de otra forma, podemos empezar a utilizar estos nuevos tipos de campos y si un navegador no los soporta, los sustituirá internamente con elementos genéricos (soportados).
Muchos elementos nuevos en HTML5 Aparte de los nuevos elementos , , , y tipos de datos de formulario, hay otros nuevos elementos dentro de HTML5 que podemos utilizar, como y , que se emplean para etiquetar imágenes dentro de la página web, el elemento para agrupar una serie de elementos de cabecera dentro de una sección lógica, etc. HTML5 además resuelve el caso de ciertas etiquetas que aparecen en HTML 4.01 pero que han quedado obsoletas o necesitaban ciertas precisiones, como ocurre con , , , y , que ahora tienen significados y usos nuevos con HTML5.
Introducción a las APIs de HTML5 y las tecnologías de apoyo Existen otra serie de tecnologías de desarrollo web vinculadas con la especificación HTML5 o con su sintaxis. Estas técnicas nos van a permitir llevar a cabo actividades desde el navegador web y dispositivos móviles compatibles que no eran posibles con las versiones anteriores de HTML. API?
pplication Programming Interfaces o, en español, Interfaces de Programación de Aplicaciones o simplemente "interfaces de programación") 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 público de manera que los diseñadores y desarrolladores pueden con ellas integrar algunas de sus
des dentro de sus propios sitios web (y también sirven para otros fines, como por ejemplo para crear aplicaciones para teléfonos móviles o
personalizadas para equipos de escritorio). Uno de los objetivos principales de una API es el de normalizar el modo de trabajo de ciertos
y simplificar tareas de programación, que de lo contrario, serían bastante complejas. Las APIs son un aspecto muy importante dentro del entor hay una serie de ellas que conviene conocer, como Web Storage, Microdata o Geolocation, entre otras.
as, lo primero que tenemos que saber es que la documentación oficial de estas APIs es independiente de la documentación oficial de HTML5.
e salvo que te muevas bien dentro de la parte más técnica del desarrollo web, esta documentación no es demasiado intuitiva a primera vista. Pe
cuantos ejemplos de código aquí que te pueden servir de orientación:
.org/html5/webstorage/#introduction
.org/html5/md/#introduction
.org/geo/api/spec-source.html#introduction
La API de Geolocalización en acción Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 14 de 156
Geolocation es una API que nos permite conocer el punto geográfico desde el cual se conecta el navegador a Internet. Esta información se emplea para enviar al usuario datos de interés para él, ajustados a su ubicación. Como ejemplo de su utilidad están las páginas web de búsqueda asociadas a un mapa en el cual nos indican dónde están situados ciertos comercios o restaurantes a una distancia concreta a pie desde el punto donde estamos en ese momento. En vez de tener que introducir a mano la dirección, un navegador habilitado para geolocalización nos puede devolver estos resultados de manera automática y transparente. Geolocation en estos momentos está disponible en algunos navegadores modernos. Podemos ver un ejemplo de cómo funciona en el sitio de mapas de Microsoft, Bing™ Maps (necesitarás un navegador compatible con geolocalización, en este caso estamos utilizando Internet Explorer 9)
1 Abre el navegador compatible con la función de geolocalización y escribe esta dirección: http://www.bing.com/maps. En la página se muestra por defecto el mapa de EE.UU y Canadá. 2 En la esquina superior izquierda del mapa, pon el cursor sobre el icono de localización y aparecerá la opción "Click to center the map on your current location".
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 15 de 156
Pulsando el icono de localización empieza el proceso de geolocalización. 3 Pulsando en el localizador aparece un mensaje "Allow bing.com to track your physical location." Todos los navegadores que aceptan la geolocalización preguntan al usuario y les dan la opción de aceptar o rechazar la función de control de ubicación.
En Internet Explorer 9 se pide al usuario que permita al navegador conocer su emplazamiento. 4 Para ver cómo actúa la función de geolocalización, pulsa en el botón "permitir una vez" y después pulsa otra vez en el localizador. El mapa se centrará automáticamente en el punto geográfico donde te encuentras. En los últimos años los teléfonos móviles han ido incorporando la posibilidad de conectar datos geográficos o de GPS dentro del navegador del dispositivo o con aplicaciones propias. Cuando la función de geolocalización esté soportada por un gran número de navegadores web, podremos disfrutar de estas ventajas tanto en equipos de escritorio como en dispositivos móviles que soporten la API Geolocation de HTML5.
Web Workers Web Workers es otra API que se suele considerar de la familia HTML5. Web Workers es un marco de programación que resuelve problemas de rendimiento de los navegadores. Al acceder a aplicaciones web avanzadas, como las de mapas o aquellas que generan gráficos o diagramas al entrar en la página web, se inician ciertas operaciones de computación que consumen una gran cantidad de recursos de procesador y que pueden reducir notablemente el rendimiento de la aplicación. Gran parte de la ralentización es debida a que se produce un conflicto a nivel de máquina entre las tareas interactivas de usuario (pulsación del ratón, arrastre, etc.) y la necesidad de la propia aplicación de acceder a recursos como datos, tarjeta gráfica u otros. Los Web Workers son scripts que se ejecutan en threads independientes. Esto quiere decir que ciertos procesos como puede ser obtener datos desde una base de datos, se ejecutan de forma independiente de las actividades que desarrolle el usuario, lo que da como resultado un entorno mucho más fluido para éste. Web Workers están aún en una fase inicial de su desarrollo pero ya puedes ver demos enhttp://ie.microsoft.com/testdrive/HTML5/WebWorkerTest262/Default.html utilizando la platform Preview de Internet Explorer 10.
Almacenamiento Web El Almacenamiento Web (Web Storage) es un ejemplo de uso de modelos preexistentes de tecnologías web bajo nuevas modalidades, más potentes. El Web Storage mejora el concepto de cookies del navegador. Actualmente las cookies permiten que los sitios web puedan guardar información en cantidades muy reducidas en los equipos de los usuarios, datos que normalmente sirven para volver a utilizarlos en momentos posteriores, y de esta manera, por ejemplo, ciertos sitios web recuerdan la información del usuario desde el último acceso.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 16 de 156
Las cookies son una tecnología bastante limitada y no resulta fácil su utilización por parte de los diseñadores web. Ahora, Web Storage actualiza este modelo para que las aplicaciones web puedan almacenar una cantidad de datos muy superior y que su acceso y utilización sea mucho más fácil y eficiente. HTML5 nos ofrece dos maneras de guardar datos: localStorage y sessionStorage. Los datos guardados con localStorage quedan a disposición del navegador en todo momento, aunque cerremos el programa o se reinicie el sistema. Los datos guardados bajo la modalidad sessionStorage se pierden al cerrar el navegador. Un ejemplo del uso de Web Storage puede ser la forma en que se almacenan datos en algunos teléfonos móviles. Los navegadores para smartphones, por ejemplo, pueden guardar datos en una sesión de navegador y permitir al usuario leerlos y/o modificarlos aunque no tengan conexión a la red.
CSS3 no forma parte de HTML5, pero está íntimamente relacionado Como ya se dijo anteriormente, muchos de los aspectos novedosos designados bajo el nombre "HTML5" son en realidad una combinación de las tecnologías HTML5 descritas antes junto con JavaScript o CSS. CSS (iniciales de Cascading Style Sheets) es un lenguaje en evolución que se identifica mediante números de versión, y la última de ellas es la CSS 3.0, que ha ido evolucionando en paralelo con la especificación de HTML5. Algunos componentes de CSS3 suelen considerarse erróneamente como componentes de HTML5, como es el caso de las transiciones o la animación. La confusión es comprensible, pero para los profesionales del diseño y desarrollo web es importante conocer la diferencia. A continuación describimos brevemente algunas de las características más relevantes de CSS3.
Transformaciones CSS 2D y 3D La propiedad transform de CSS nos permite rotar, cambiar la escala o sesgar un elemento de una página web. Un ejemplo puede ser el girar levemente una foto dentro de una página para conseguir un efecto estéticamente muy atractivo. También podemos dar animación a las transformaciones: por ejemplo, mediante animación aplicada a la propiedad "scale" podemos conseguir un efecto de ampliación o reducción del tamaño de una imagen o de cualquier otro elemento. Podemos también añadir la propiedad "perspective" al efecto de transformación para simular la visión de un objeto en un espacio tridimensional, estático o en movimiento.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 17 de 156
Un ejemplo de una transformación 2D-CSS que podemos ver en http://ie.microsoft.com/testdrive
Fondos, bordes, colores RGBa, gradientes, sombras y esquinas redondeadas Ahora, con CSS3 es posible aplicar mejoras muy interesantes a la presencia visual de una página. Un ejemplo sencillo es la propiedad "border-radius", con la que podemos poner esquinas redondeadas a los objetos rectangulares, y también podemos crear muchos efectos nuevos, como gradientes de color o sombreados. Algunos efectos tradicionales, como background-image y la propiedad border han sido mejorados en CSS3. Por ejemplo, podemos utilizar la propiedad border-image para utilizar imágenes como bordes de objetos, o añadir varias imágenes de fondo a un mismo contenedor, evitando así la limitación actual a una sola imagen que permite la propiedad background-image. La descripción del espacio de color RGBa es otra novedad de CSS3, ya que la "a" representa el grado de transparencia (o "alpha"). Con la notación RGBa de color ahora podemos aplicar efectos de transparencia a cualquier objeto de la página.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 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á más extendido el soporte para añadir tipos de letra especiales a las páginas web mediante la propiedad @font-face, que permite especificar una fuente concreta y un enlace desde el cual el navegador pueda descargarla. Esta característica puede cambiar de forma radical el aspecto de las páginas web, pero lamentablemente también se ve afectada por los muchos problemas de compatibilidad con navegadores antiguos que se pueden ver en otras funcionalidades de HTML5.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 19 de 156
El potencial de las web fonts puede verse en www.lostworldsfairs.com/atlantis.
Media Queries de CSS La interacción del usuario con Internet se basa casi de forma exclusiva en lo que se puede ver dentro de una pantalla, y el tamaño de las pantallas que podemos encontrar varía enormemente. Un monitor de ordenador de gran formato puede llegar a resoluciones de 2.000 pixels de anchura, mientras que un pequeño teléfono móvil apenas nos ofrecerá 320 pixels. El reto que supone presentar una experiencia equivalente en ambas pantallas puede resolverse mediante las nuevas directivas de CSS de consulta de tipo de medios ("media queries"). En esencia se trata de lanzar una consulta al navegador para determinar el tipo de pantalla en el cual se va a restituir la página y, a partir de esta información, enviar un estilo específico, optimizado para esas dimensiones. Por ejemplo, la misma página web, en un monitor con 2.000 pixels de ancho podría mostrarse con cuatro o incluso cinco columnas, pero en pantallas de 320 pixels, podría enviar una plantilla de estilos que solo utilice una columna.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 20 de 156
Animaciones con CSS Ciertas tecnologías como Flash o Silverlight se han venido utilizando hasta ahora para animar objetos dentro de las páginas web. Ahora ya podemos conseguir algunos de estos efectos utilizando las reglas y propiedades de CSS3. En el futuro, el elemento Canvas de HTML5 y las transiciones de CSS3 permitirán crear elementos animados e interactivos sobre la página. Las animaciones de CSS, y el tema siguiente, las transiciones, probablemente estarán soportadas por la mayoría de los navegadores en los próximos años. En el momento de escribir esta guía, el estándar todavía no está cerrado por lo que no está soportado en todos los navegadores, en cualquier caso puedes empezar a probar algunos ejemplos con la platform preview de Internet Explorer 10.
Visita http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_animations.htm utilizando la platform preview de Internext Explorer 10 o cualquier otro navegador que soporte animaciones basadas en CSS.
Transiciones de CSS Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 21 de 156
Las transiciones de CSS están muy relacionadas con el concepto de animación, pero son algo completamente distinto. Una transición permite variar el valor de una propiedad CSS de manera continua a lo largo de un intervalo de tiempo definido. Por ejemplo, un botón con un fondo de color verde puede cambiar de forma progresiva y suave a un color distinto cuando el usuario pasa el cursor sobre él. Actualmente podemos conseguir este tipo de transiciones utilizando JavaScript y Flash, pero igual que sucede con otros muchos elementos de CSS3, las transiciones ofrecen a los diseñadores web una alternativa para conseguir los mismos resultados sin necesidad de convertirse en programadores expertos.
Visita el sitio http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_transitions.htm utilizando la platform preview de Internext Explorer 10 o cualquier otro navegador que soporte transiciones basadas en CSS.
HTML5 está en un momento de transición Las tecnologías que hay detrás de HTML5 están en fase de transición, por lo que es necesario tener claro cuándo debemos utilizarlas y cuándo no. A lo largo de este libro te iremos orientando y ofreciendo una perspectiva lo más amplia posible al respecto del tipo de compatibilidad que puedes esperar en distintos navegadores y también ofreceremos ejemplos de uso donde el uso de HTML5 puede ser más indicado que otros lenguajes. Todos los navegadores de mayor difusión hoy en día (Microsoft Internet Explorer, Mozilla Firefox, Apple Safari, Google Chrome y Opera) ofrecen soporte, en grado variable, para las funcionalidades de HTML5 en cuanto a su sintaxis y tecnologías relacionadas. En algunos casos una página que
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 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 características no estén presentes aunque la página siga siendo funcional. Estos escenarios sin duda van a cambiar en el futuro, pero el mundo de los navegadores web en equipos de sobremesa evoluciona muy lentamente, por lo que seguiremos observando en el futuro próximo este tipo de situaciones y diferencias.
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 especificación de HTML5. Los diseñadores web má nservadores pueden optar por esperar hasta entonces para incorporar el HTML5 a sus entornos en producción, pero el estándar es independien los navegadores. La mayoría 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 aún en fase de desarrollo y los diseñadores ilizarlas con fines experimentales, o incluso en sitios en producción, pero sabiendo de antemano que están apostando por la innovación a costa abilidad.
¿Quién utiliza HTML5 a día de hoy? Es una pregunta difícil de responder porque, como has podido ver, no existe una definición única para "HTML5". Existen numerosas demos de HTML5 que no se podrían poner en entornos en producción debido al distinto grado de soporte que ofrecen los navegadores. Si decides incorporar funciones de estilo de CSS3, hay muchos sitios web personales y de empresas que utilizan los elementos más vistosos, como border-radius o las funciones de transformación. En estos casos, los diseñadores pueden utilizar las funcionalidades y añadir alternativas adicionales para asegurarse de que la restitución de estas páginas en navegadores no compatibles no es demasiado diferente de cómo se ven en los navegadores más modernos. Un área donde el uso de las funcionalidades de HTML5 está siendo muy activo es entre los dispositivos móviles y smartphones. En este mundo podemos encontrar aplicaciones web que aprovechan las ventajas de los nuevos tags de Video o Audio, puesto que ciertos dispositivos como Windows Phone o iPhone soportan HTML5 pero no soportan complementos como Flash o Silverlight. Todos los navegadores web de mayor difusión apuestan por HTML5 en sus últimas versiones y si aprendes hoy sus secretos, podrás formar parte activa de una nueva era que ahora comienza para la Web, llena de interés y asombrosas novedades.
Funcionalidades y características futuras de HTML5 Como ya anotábamos antes, las funcionalidades de HTML5 se presentan en distintos grados de madurez y aquí solo hemos visto unas pocas. La lista siguiente es una enumeración de otras funcionalidades que forman parte de la especificación HTML5 o de sus tecnologías adscritas que deben añadirse (o en algunos casos ya están añadidas) a los navegadores del futuro. •
Drag and Drop Las operaciones Drag-and-Drop ("arrastrar y soltar") permiten al usuario mover en pantalla los elementos de forma visual en lugar de hacerlo pulsando botones. La API Drag and Drop de HTML5 se basa en la implementación original de Internet Explorer. Han cambiado algunos detalles y ciertos navegadores ofrecen una sintaxis diferente, pero ya está a punto de cerrarse una API normalizada. En el momento de escribir este
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 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 máquina cliente sin necesidad de instalar extensiones o complementos. Con esta API, al fin podremos disponer de un modelo unificado de acceso mediante el cual las aplicaciones web podrán operar con archivos (por ejemplo para subirlos a un servidor). Una aplicación de edición de fotos basada en web, por ejemplo, podría ofrecer el mismo modo de operación en todos los navegadores compatibles utilizando esta API. • Disposición de objetos en pantalla con Flexbox CSS3 introduce una nueva forma de crear diseños para la distribución de los objetos en pantalla, llamado Flexible Box Layout ("Flexbox"). En este sistema se pueden crear disposiciones fluidas sin necesidad de acudir a las habituales directivas "float" y "clear" de CSS. Su objetivo es ofrecer herramientas más fiables y potentes a los diseñadores y desarrolladores para crear estructuras visuales complejas, válidas para la web y para dispositivos móviles. • Distribuciones en rejilla y columnas múltiples También dentro de CSS, las definiciones de distribuciones en pantalla en formato de columnas múltiples y rejillas ("grids") son dos mejoras más orientadas a facilitar la presentación visual de las páginas web. La propiedad Multi-column de CSS nos permite distribuir un contenido (puede ser un bloque de texto, por ejemplo) en dos o más columnas, facilitando así su lectura sin tener que recurrir a complicados juegos visuales. El sistema de rejilla o Grid se relaciona de alguna forma con los Flexbox en el sentido de que esta funcionalidad está pensada para crear disposiciones en pantalla más complejas, tanto para las páginas web como para las aplicaciones. En el sistema Grid se introduce el concepto de filas y columnas y también el procedimiento para apilar y alinear objetos dentro de estas rejillas. A pesar de que existen distintos niveles de compatibilidad entre los navegadores actuales para estas y algunas otras funcionalidades descritas en esta lección, puedes ampliar aún más tus conocimientos sobre estos conceptos, y dependiendo del navegador que utilices, puedes incluso empezar a crear páginas con esas funcionalidades. El libro "Digital Classroom HTML" aborda estos conceptos y contiene ejercicios prácticos que no se incluyen en este libro, por ejemplo para implementar Geolocalización, Consultas de medios CSS3, Offline Storage, Flexbox y algunas más.
Identificación de sitios web basados en HTML5 En enero de 2010 el W3C presentó el logo de HTML5 para uso público, con el cual quieren promocionar las nuevas capacidades de HTML5 y sus tecnologías asociadas.
El logo de HTML5 se puede descargar y utilizar libremente y de forma gratuita. Este logo puede obtenerse como archive gráfico y se puede incorporar a los sitios web o cualquier otro contenido para indicar que se utiliza esta tecnología. Conviene saber que el W3C utiliza el término HTML5 en un sentido amplio e incluye otras tecnologías también. Además, el HTML5 se convertirá en el año 2014 en un estándar oficial, pero se recomienda a los diseñadores y desarrolladores que empiecen ya a utilizar la especificación. Si quieres más información sobre HTML5 y el logo, puedes acceder a las explicaciones del W3C en su web: www.w3.org/html/logo/
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 24 de 156
Materiales de autoformación La compatibilidad de los navegadores es un asunto de importancia especial al hablar de HTML5. Cuando decidas utilizar la especificación HTML5, sus diversas APIs relacionadas y CSS3, deberás tener en cuenta una gran cantidad de aspectos y el distinto grado de soporte que encontrarás para las funcionalidades entre los diferentes navegadores. Si quieres tener una visión más amplia de la evolución del estándar puedes consultar la última versión publicada en el sitio webhttp://www.w3.org/TR/html5/ También puedes comprobar los diferentes tests que implementa el W3C para garantizar la interoperabilidad entre todos los navegadoreshttp://test.w3.org/html/tests/reporting/report.htm
Repaso Preguntas 1 Enumera tres componentes de HTML5 que ofrecen alternativas a los complementos o plug-ins de los navegadores, como Flash y Silverlight. 2 ¿Qué diferencia hay entre la especificación de HTML5 y la familia HTML5 tal y como la hemos definido en esta lección? 3 ¿Qué es la geolocalización?
Respuestas 1 Las etiquetas y nos permiten integrar contenidos multimedia directamente en el código HTML sin necesidad de complementos. El elemento nos ofrece una superficie para dibujar, crear formas, rellenos, gradientes, etc. y con la ayuda de CSS, incluso podemos crear animaciones con estos objetos. 2 La especificación de HTML5 incorpora una serie de elementos nuevos (o etiquetas) que podemos utilizar para crear una estructura de presentación nueva, o introducir nuevas funcionalidades en las páginas web. La familia HTML5 está compuesta de tecnologías relacionadas entre sí, pero independientes, como las APIs Web Storage o Geolocation, y CSS3. 3 La geolocalización es una tecnología web capaz de identificar la ubicación geográfica del usuario y, a partir de esa información, permite obtener datos útiles, como por ejemplo, representar su localización en un mapa, calcular rutas o sugerir establecimientos cercanos.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 25 de 156
Lección 2: Conceptos básicos de HTML, XHTML y CSS Objetivos: En esta lección conocerás los conceptos básicos de HTML, XHTML y CSS. Juntos, estos tres sistemas de codificación conforman la estructura y el estilo visual de las páginas web.
Para empezar Vamos a trabajar con algunos archivos de la carpeta HTML5_02lessons. Comprueba que has descargado y copiado la carpeta de prácticas de HTML5 en tu ordenador.
Lenguajes Web En esta lección vamos a conocer los elementos básicos de dos lenguajes: HTML y CSS. Aunque tienen distinta sintaxis y reglas, dependen fuertemente uno del otro. Al finalizar esta lección podrás saber cómo crear paginas sencillas HTML, añadir imágenes, crear enlaces de una página a otra y modificar su aspecto en pantalla utilizando CSS. Este tema es enormemente extenso y muchos de los principios básicos que se explican aquí te enseñarán a crear sitios web de calidad con los medios disponibles en este momento, al tiempo que te preparan para el futuro, al avanzar las nuevas funcionalidades de HTML5.
La estructura de la página web se basa en HTML Los documentos HTML (iniciales de Hypertext Markup Language) utilizan la extensión .htm o .html. Esta extensión avisa al navegador web o a un dispositivo como un teléfono móvil, que en este archivo hay contenido HTML y dicho contenido se restituye en la ventana del navegador o la pantalla del dispositivo siguiendo las reglas del lenguaje HTML. Las etiquetas se utilizan para definir el contenido de una página HTML. Estas etiquetas quedan enmarcadas dentro de los símbolos "menor que" () y se ponen al principio y al final de un objeto o texto utilizado en la página HTML. Aquí vemos un ejemplo de dos etiquetas de título con textos en ellas. Las etiquetas no se muestran en pantalla, pero todos los navegadores saben que el texto entre las etiquetas es un título de primer nivel: Welcome to Worldwide Apparel's intranet En este ejemplo, el es la etiqueta de apertura, y la etiqueta de cierre. A toda esta línea de código la denominamos "elemento". Más concretamente, nos referiríamos a ella como un "elemento de título de nivel 1" o también "elemento heading 1" si preferimos utilizar el nombre en inglés original.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 26 de 156
HTML y XHTML están estrechamente relacionados. Existe una lista de reglas definidas por el World Wide Web Consortium (organismo de normalización que también se conoce como W3C) que especifican los límites de HTML y XHTML.
ómo se representa el código HTML en el navegador
ra entender mejor la relación entre el código HTML y lo que vemos en el navegador al abrir el archivo, en este ejemplo se muestra la conexión
Doctype. Esta línea indica al navegador que debe interpretar todo el código que sigue de acuerdo con un conjunto de reglas específico.
Elemento HTML. Este elemento contiene a los demás y le indica al navegador que contiene un documento HTML.
Elemento HEAD. En esta sección aparece información sobre la página, 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 página 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 tipografías gran
grita.
Elemento IMAGE: enlaza a un archivo de imagen y la muestra en pantalla.
Elemento PARAGRAPH: por defecto, el navegador añade un salto antes y después de este elemento, que suele contener varias líneas de texto
Elemento STRONG: el texto dentro de él se muestra en negrita.
Elemento ORDERED LIST: abre una lista de elementos en forma de líneas numeradas por orden.
Elemento LIST: cada línea con esta etiqueta recibe automáticamente un número ordinal empezando por el 1.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 27 de 156
Detalles de la sintaxis de XHTML Hay una diferencia esencial entre HTML 4.0 y XHTML 1.0 – los dos estándares más recientes publicados por el W3C (World Wide Web Consortium). Tal y como está definido el XHTML, las páginas escritas en XHTML se pueden ver también en los navegadores que muestran las páginas HTML actuales. Las etiquetas y atributos de XHTML y HTML siguen siendo las mismas, pero la sintaxis del código XHTML es más estricta. Las diferencias más importantes entre XHTML y HTML son estas: • •
En XHTML, todas las etiquetas deben escribirse en minúsculas. XHTML exige que todas las etiquetas de apertura lleven su correspondiente etiqueta de cierre, es decir, siempre debe existir una etiqueta al principio y otra al final de cualquier elemento, sea un título, párrafo, imagen u otro. Todas las etiquetas XHTML deben tener cierre, aun en el caso de etiquetas especiales que técnicamente no necesitan etiquetas de apertura y cierre. Por ejemplo, la etiqueta , que inserta un salto de línea, utiliza una sintaxis especial de autocierre. Una etiqueta que se cierra ella misma tiene este aspecto (con un espacio y
•
la barra inclinada antes del signo ">": XHTML exige que el anidamiento de etiquetas (su inclusión unas dentro de otras), siga unas reglas estrictas. En el ejemplo siguiente, la etiqueta , que se utiliza para enfatizar un texto, se abre dentro de la etiqueta de título . Por tanto, tiene que cerrarse antes de que se cierre el elemento : Esta es la intranet de Worldwide Apparel. Bienvenido En este libro hemos utilizado código ajustado a XHTML al hacer los ejemplos, lo que ayuda a que nuestros diseños sean compatibles con los navegadores y dispositivos móviles actuales, y también porque así es más fácil la resolución de errores cuando aparecen.
Doctype indica al navegador qué debe esperar Al inicio de toda página web debe aparecer una declaración Doctype. La declaración de "tipo de documento" le aporta pistas al navegador sobre el tipo de información que se va a encontrar en la página. Puesto que las especificaciones de HTML y XHTML son distintas, el navegador sabe así qué lenguaje va a interpretar y representar. El navegador restituye la página empezando por la primera línea y va avanzando de principio a fin, por lo que esta indicación en la primera línea de todas tiene pleno sentido. Aunque no es obligatoria, es una buena práctica empezar siempre utilizando doctype al principio de nuestras páginas. La declaración doctype en HTML 4.01 tiene este aspecto: Cuando un navegador lee una declaración Doctype, espera que todo en la página sea conforme con el lenguaje indicado. Si la página es totalmente conforme con las especificaciones, se considera válida. En la Lección 3 veremos qué cambios incorpora HTML5 en los requisitos de Doctype.
El W3C y la validación de la página W3C es la abreviatura con la que se conoce al World Wide Web Consortium una organización sin ánimo de lucro cuyo objetivo consiste en orientar la evolución de la Web. El W3C ofrece directrices y reglas para especificaciones como HTML y XHTML. Una forma de definir la validez del código HTML o XHTML que generamos es utilizar el servicio online de validación del W3C, que es gratuito.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 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 teoría del proceso de validación. 1 Abre el navegador y ve a la página http://validator.w3.org. 2 Pulsa en la pestaña "Validate by File Upload".
El validador del W3C permite analizar el código HTML para verificar su conformidad o posibles errores. 3 Pulsa en Browse y ve a la carpeta HTML5_02lessons. Selecciona el archivo w3_noncompliant.html y pulsa Abrir. Pulsa en el botón Check para validar el código. 4 El sitio del W3C nos devuelve una serie de errores. Si te desplazas por la página hacia abajo puedes ver información detallada sobre los errores encontrados. No te preocupes por eso ahora. A continuación vamos a cargar un archivo casi idéntico, pero sin errores. 5 Pulsa en el botón Browse, ve de nuevo a la carpeta HTML5_02lessons, selecciona el archivo w3_compliant.html y pulsa Abrir. 6 Pulsa el botón Revalidate. Ahora verás un mensaje de felicitación que dice que la página ha sido revisada y es conforme con las reglas de XHTML 1.0 Strict.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 29 de 156
Aunque la página es válida, puede que no se vea muy atractiva en un navegador. Este ejemplo utiliza una página en la que no se aplican estilos y no lleva imágenes, para ilustrar mejor el proceso. Conviene saber que tener un código conforme es solo un paso dentro de una serie que nos garantizará que nuestras páginas web se van a ver en el mayor número posible de ordenadores y dispositivos. Puedes validar también páginas web que ya se ven en Internet. Para ello puedes utilizar la opción "Validate by URL". También puedes pegar código HTML directamente dentro del validador eligiendo la opción "Validate by Direct Input". 7 En tu navegador, selecciona "Archivo – Abrir" y muévete hacia la carpeta HTML5_02lessons. Selecciona el mismo documento w3_compliant.html que acabamos de validar, pulsa Abrir y después en Aceptar. Si utilizas Internet Explorer 9, puedes también abrir la carpeta HTML5_02lessons desde el sistema operativo y arrastrar el documento w3_compliant.html y soltarlo dentro de la ventana del navegador.
Una página "válida" puede tener enlaces a imágenes que no existen y ofrecer un diseño mediocre.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 30 de 156
Ya que sabemos que esta página utiliza un XHTML válido, sabemos también que si tenemos problemas al representarla en pantalla, no se deben al código XHTML. Sabemos que no faltan etiquetas y que todas ellas están bien escritas. El proceso seguido puede ser útil para resolver errores, ya que nos facilita la detección de cualquier problema de sintaxis. 8 Abre otra vez en tu navegador Ia página http://validator.w3.org y pulsa en la pestaña "Validate by File Upload". Aunque veremos las diferencias entre las páginas HTML5 y las escritas con HTML 4.01 y XHTML en la siguiente lección, podemos ver no obstante los resultados de una página si se valida como HTML5. 9 Pulsa el botón Browse, ve a la carpeta HTML5_02lessons de tu ordenador y selecciona el archivo html5_compliant.html. Pulsa Abrir y después el botón Check. Aparecerá un resultado positivo: el documento es conforme con HTML5.
Otras ventajas del diseño basado en estándares La validación de páginas del W3C es el aspecto más tangible de un diseño web conforme a estándares, pero hay también otras ventajas importantes al crear páginas bien estructuradas: Menos código: el uso de HTML y CSS nos permite crear páginas similares con menos líneas de código, es decir, menos trabajo para el desarrollador y tiempos de descarga menores para el visor. Mantenimiento más sencillo: tener menos código supone un mantenimiento más sencillo, y esto beneficia tanto al que escribe el código como a cualquier otra persona que después deba encargarse de su mantenimiento y revisión. Accesibilidad: los documentos creados de forma semántica, es decir, que utilizan la etiqueta HTML más adecuada a su función en cada momento, pueden facilitar la lectura y navegación a personas con discapacidad visual y los usuarios que los visitan encuentran la información más fácilmente. Optimización para motores de búsqueda: Las páginas web que incluyen secciones claras e identificadas de forma lógica, tanto a nivel de código como de contenidos, facilitan la labor a los motores de búsqueda a la hora de indexarlas y clasificarlas puesto que con un contenido organizado y bien identificado resulta más fácil evaluar el contexto temático y la relevancia de la información que ofrecen. Compatibilidad: los sitios web que independizan la estructura con respecto al estilo se adaptan mucho más fácilmente a dispositivos móviles y formatos de pantalla variados. CSS nos permite aplicar hojas de estilo alternativas que optimizan la presentación en pantalla dependiendo del dispositivo utilizado.
Estructura HTML Uno de los conceptos más importantes que debemos dominar a la hora de diseñar contenidos web es la estructura anidada de los documentos HTML. Los elementos suelen presentarse contenidos unos dentro de otros. Por lo general tenemos que empezar por diseñar la estructura HTML de la página para después continuar con los estilos, aplicando CSS. En este ejemplo podemos ver los elementos más básicos que nos vamos a encontrar en prácticamente toda página web:
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 31 de 156
El elemento está anidado (incluido) dentro del elemento . En términos de programación, está colocado entre la etiqueta de apertura y la de cierre , y por eso decimos que las etiquetas anidadas son las que se encuentran entre otras etiquetas de apertura y cierre. Ambos elementos, y , forman la estructura básica de toda página web. Cuando un navegador abre un documento HTML busca esta estructura. El contenido dentro de la etiqueta body es la parte visible de la página, ya que es lo que se muestra en la ventana del navegador. Aquí están los recursos internos y el centro de información de los empleados de Worldwide Apparel En los documentos HTML parte del contenido se muestra en pantalla dentro de la ventana del navegador, pero hay otra parte del código que queda oculta, aunque es de gran utilidad para el navegador, para los motores de búsqueda y para el desarrollador. Algunos ejemplos de este código oculto son los scripts que sirven para añadir interactividad a la página, o también el código que ayuda a los buscadores a clasificar el documento, y los estilos que definen el aspecto de la página. Este código suele aparecer dentro del elemento , el cual a su vez, está anidado dentro de las etiquetas . Un ejemplo: Aquí están los recursos internos y el centro de información de los empleados de Worldwide Apparel En este ejemplo, todavía no tenemos nada dentro del elemento . Puedes ver que está anidado dentro del elemento , pero no dentro del elemento . El elemento se abre y se cierra antes de que empiece el elemento . Por su parte, el elemento contiene texto, pero le falta un contexto y por ello los buscadores no podrán determinar si se trata de un título, una lista, un párrafo, un comentario o un contenido de cualquier otra naturaleza. Para definir el texto como párrafo, se utiliza la etiqueta : The internal resource and information center for all employees of Worldwide Apparel
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 32 de 156
El elemento paragraph ahora queda anidado dentro del elemento que, a su vez, está anidado dentro del elemento . Ahora vamos practicar con un archivo html.
1 Abre un editor de textos (p.ej. Notepad) y selecciona Archivo – Abrir. Ve a la carpeta HTML5_02lessons. Dependiendo del editor de textos que utilices, puede que tengas que seleccionar "Todos los archivos" en vez de "Documentos de Texto" para poder ver el archivo. Selecciona el archivo 02_index.htmly pulsa Abrir. 2Selecciona Archivo – Guardar como, ponle el nombre 02_index_work.html y pulsa Guardar. Así hemos creado una copia con la que podremos trabajar manteniendo el archivo original como copia de seguridad. Para entender mejor la estructura del HTML y el anidamiento de etiquetas, vamos a añadir un enlace a este documento, asociando las palabrasWorldwide Apparel a una página web de Internet. 3 En el último párrafo, donde dice "Todo el contenido de este sitio web es copyright de Worldwide Apparel," pulsa una vez antes de la palabra "Worldwide" y luego escribe el código siguiente: . Esta etiqueta es la etiqueta de apertura de un elemento "anchor" (un enlace) que nos sirve para vincular el texto a otra página web en nuestro propio sitio web o a cualquier dirección de Internet. 4 Pulsa a la derecha de la palabra "Apparel" y escribe . Esta es la etiqueta de cierre del enlace, y es obligatoria en XHTML. Algunos editores web, como el editor gratuito Visual Web Developer Express de Microsoft, se encargan de añadir automáticamente las etiquetas de cierre. Puedes desactivar la función de "Autocompletar". En cada editor es diferente, pero en Visual Web Developer Express 2010 podemos cambiar esta configuración por defecto desde el menú Herramientas < Opciones > Formato y después desmarcar la casilla "Insertar automáticamente etiquetas de cierre". Para finalizar el proceso de creación de un vínculo, necesitamos indicar la dirección web a donde debe remitir, lo que se hace con el atributo href. 5 En la etiqueta “” de apertura, sitúa el cursor entre la letra ). Pulsa la barra espaciadora una vez y después href="". El código completo de la etiqueta debería quedar ahora como . Ahora tenemos una etiqueta anchor y el atributo href, pero este enlace no dirige a ninguna parte. Tenemos que añadir ahora un valor al atributo href, que en este caso será una dirección de Internet (URL). 6 Dentro de las comillas escribe la dirección siguiente: http://www.digitalclassroombooks.com/worldwideapparel. 7 En el menú Archivo selecciona Guardar y tras grabar el archivo, muéstralo en el navegador web, bien abriéndolo desde el propio navegador (Archivo – Abrir) o bien pulsando Ctrl + click (el botón del ratón en Mac OS) o Ctrl + botón derecho en Windows, seleccionando después el archivo desde el propio sistema operativo. El enlace aparece subrayado y con el color azul normal, indicativo de que se trata de una dirección Web que aún no hemos visitado.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 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 imágenes en HTML Para colocar imágenes dentro de un documento HTML se utiliza la etiqueta . Al igual que ocurre con la etiqueta , la etiqueta de imagen por sí sola no hace nada. Depende del valor de los atributos que especifiquemos, que indican qué imagen se debe mostrar y cómo ha de hacerse. Aquí vamos a insertar una imagen en nuestro documento HTML.
1 Mueve el cursor hacia el primer párrafo y sitúalo inmediatamente después de la etiqueta de cierre . Pulsa Intro para pasar a la línea siguiente. Escribe . La etiqueta de imagen es una categoría especial dentro de las etiquetas HTML, de las que admiten el autocierre. No necesitamos escribir por separado etiqueta de apertura y cierre: con una sola es suficiente, pero es importante que la escribamos bien. Hay un espacio de separación entre la palabra img y la barra /. Así se cumplen los requisitos de sintaxis de XHTML y el archivo de imagen que vamos a utilizar se indicará en el espacio que queda entre img y /. 2 Mueve el ratón a la derecha de la palabra img, inserta un espacio en blanco y escribe src="". src es la abreviatura del atributo source (origen), y tenemos que indicar un valor para él, que es la dirección URL de la imagen que queremos mostrar dentro de la página. 3 En el interior de las comillas de src= escribe images/familysitting.jpg. El código quedaría así: Esta línea le indica al navegador que busque dentro de la carpeta images y presente en pantalla el archivo familysitting.jpg. En los pasos siguientes debemos asegurarnos de que se mantiene el espacio en blanco de separación entre la comilla y el cierre de la etiqueta. Ahora vamos a añadir un atributo alt. El atributo alt representa el texto alternativo a la imagen, y es obligatorio añadirlo para mantener la validez de la página. Este atributo es muy útil para las personas que utilizan sistemas de lectura de pantalla para navegar
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 34 de 156
por la Web, ya que permite convertir a voz el texto indicado como valor. También sirve para dar un contenido al espacio vacío que se genera cuando, por cualquier razón, la imagen no se puede representar (porque el enlace está roto o el archivo tiene un formato incorrecto, por ejemplo). 4 Sitúa el cursor a la derecha de la comilla de cierre que sigue al nombre de archivo familysitting.jpg e inserta un espacio en blanco, y después escribe alt="". 5 Dentro de las comillas del paso anterior, escribe Familia sentada en unos escalones. 6 En el menú Archivo, selecciona Guardar y después abre el archivo en el navegador.
Las imágenes se añaden a las páginas web con el elemento src y una referencia al archivo gráfico. Tanto el atributo src como el alt son obligatorios bajo XHTML. Hay también otros atributos, opcionales, que podemos utilizar. Vamos a ver dos de ellos: height y width. 7 Regresa al editor de textos y pon el cursor a la derecha de las últimas comillas que siguen al atributo alt, inserta un espacio y escribe lo siguiente: width="296" height="250". Estos dos atributos indican al navegador las dimensiones que tendrá esta imagen en pantalla (ancho y alto respectivamente). Estos atributos le indican al navegador las dimensiones que tendrá la imagen en pantalla (que no necesariamente tienen que coincidir con las dimensiones originales), y aunque estos valores son opcionales, ayudan a restituir la página de manera más eficiente y siempre que sea posible, debemos utilizarlos.
El empleo de atributos opcionales Muchos de los atributos opcionales se encuadran dentro de lo que se denomina "buenas prácticas". Las buenas prácticas son un concepto amplio, que se utiliza para describir la manera generalmente aceptada
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 35 de 156
El empleo de atributos opcionales de hacer las cosas en el diseño y programación para la Web. Hay, en general, razones de sentido común detrás de las buenas prácticas: por ejemplo, al indicar la altura y la anchura se crea un espacio (conocido como "placeholder") para la imagen, y permanece aún en el caso de que la imagen no se haya descargado, debido a la lentitud de la conexión. Si no se crea este placeholder con una anchura y altura prefijadas, el aspecto y distribución de los elementos en pantalla va cambiando a medida que se cargan las imágenes, lo que en ciertos casos impide al usuario poder leer los contenidos durante ese proceso. 8 En el menú Archivo, selecciona Guardar y visualiza la página en el navegador para ver la imagen. Mantén abierto el documento mientras trabajas con él en el siguiente ejercicio.
El papel de CSS CSS (Cascading Style Sheets) utiliza un lenguaje distinto de HTML. CSS nos permite aplicar estilos de manera coherente a los distintos elementos de las páginas del sitio web, de modo que los títulos, listas y párrafos pueden verse igual en todas y cada una de las páginas.
Cómo hacemos referencia a la sintaxis de CSS en este libro Antes de que empecemos a trabajar con CSS es preciso aclarar cómo vamos a denominar a las distintas partes de la sintaxis de CSS en este libro. No es cosa fácil dicho así, porque ocurre que hay diferencias entre la especificación oficial del lenguaje CSS y la forma en que los diseñadores se refieren a CSS en el mundo real. En cualquier caso, los conceptos básicos son estos: el siguiente código es lo que conocemos como una regla de CSS:
Los componentes de esta regla son: A. Selector. B. Declaración. C. Propiedad. D.Valor. De vez en cuando iremos mencionando los distintos componentes en el libro, así que si te pedimos que cambies el valor "blue" por "red", debes tener claro lo que hay que hacer. O, si te pedimos que busques y cambies el selector h1 por un selector h2, que ello tenga sentido para ti. En el día a día la mayor parte de los diseñadores no son tan concretos. Por ejemplo, podrían referirse a la regla anterior como "estilo", "regla de estilo", "la regla h1", o "la regla CSS para h1". Además, como puedes ver, el nombre oficial para el par propiedad-valor, se denomina "declaración". De nuevo, en el mundo real los diseñadores no suelen utilizar el término "declaración", sino que a menudo utilizan el término "propiedad" o "propiedades" de forma indistinta.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 36 de 156
Definir un estilo para los títulos Para hacernos una idea de cómo funciona CSS vamos a crear una regla CSS sencilla que cambia el estilo de un título en la página. En el archivo02_index_work.html ya tenemos el texto "Welcome to Worldwide Apparel's intranet" dentro de una etiqueta . Puede que una de las mejores maneras de entender la acción de CSS sea ver cómo se aplica el estilo por defecto para este título al escribirlo en pantalla. 1 Dentro del navegador, analiza el texto de título. El estilo y las instrucciones de formato las aportan las "reglas" que el propio navegador aplica por diseño a los elementos a la hora de presentarlos en pantalla. El tamaño, color y tipo de letra los resuelve el navegador ya que no dispone de otras instrucciones de formato. El navegador solo sabe que hay un elemento "heading 1" y lo muestra de la forma en que considera adecuado. Por ejemplo, el tamaño por defecto es 16 pixels, el color es el negro y la fuente, Times New Roman. Esto es lo que nos encontramos, por ejemplo, en Internet Explorer, Firefox y algunos otros navegadores. Ahora podemos modificar esta apariencia con una regla de CSS. 2 En la parte superior de la página busca la etiqueta , y justo debajo de ella, añade una línea nueva, con el siguiente texto: 3 Pulsa Intro tres veces y después escribe . 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 . El elemento queda dentro de las etiquetas delimitadoras de la cabecera de la página. En HTML todo lo que queda dentro de la sección no se muestra en pantalla. Por ejemplo, también tenemos un elemento en esta sección. Este título aparece en la parte superior de la ventana del navegador, pero no dentro de la página propiamente. 4 En la línea vacía que hay debajo de la etiqueta de apertura , escribe esto: h1 { Este es el selector, el que nos dice a qué elemento de HTML queremos aplicar el estilo, y en este caso es el elemento heading 1. 5 Pulsa Intro y después el tabulador para poner el cursor debajo del signo de la llave en el editor, si es que el propio editor no te posiciona automáticamente en ese lugar. La tabulación es opcional, pero hace que el código CSS se lea mejor. Como veremos ahora, el número de líneas en esta regla va a aumentar y es muy conveniente que el código con facilidad. 6 Escribe este código debajo de h1 {: color: red; La palabra color se denomina como una propiedad en la sintaxis CSS y la palabra red es el valor que le aplicamos a esa propiedad. Al par compuesto por una propiedad y un valor se le denomina declaración. 7 Pulsa Intro otra vez y en la línea siguiente escribe el signo } el signo de llave que cierra al signo { que hemos escrito en el paso 4. Ahora tenemos una regla con estas tres líneas: h1 { color:red; }
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 37 de 156
8 Guarda el archivo en disco y visualiza la página en el navegador. La cabecera aparece ahora en color rojo y eso nos indica que hemos escrito bien la regla CSS. Cierra el navegador y vuelve al editor.
El título dentro de la etiqueta H1 tiene un nuevo color, por aplicación de una regla CSS. 9 En el archivo HTML, selecciona la palabra red y cámbiala por este otro código, que representa un color de la gama de colores que pueden mostrarse en pantalla: #FF0000. Este valor es el mismo color rojo, pero en notación hexadecimal. En CSS puedes utilizar colores por su nombre en inglés o mediante esta notación. Guarda el archivo y muéstralo de nuevo en el navegador. El color sigue siendo el mismo rojo. La notación hexadecimal es el método más habitual para indicar colores en la Web.
Notación hexadecimal de color El color, tanto en HTML como CSS, se designa mediante un código de seis caracteres precedido por el signo de almohadilla. A esta notación se le llama código hexadecimal, y es el sistema que se utiliza para identificar y establecer el color de los elementos. Con esta notación podemos reproducir prácticamente cualquier color. Por ejemplo, el color rojo oscuro se representa como #CC0000. El código se divide en tres pares de dígitos, y cada uno de ellos representa el valor RGB del espectro. Por ejemplo, el color blanco se representa en notación RBG como R:255 G:255 B:255, y su equivalente en HTML en formato hexadecimal es #FFFFFF (siendo FF el equivalente hexadecimal del número 255 decimal, que se repite para los tres pares). Un programa de edición de imágenes como Photoshop nos
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 38 de 156
Notación hexadecimal de color permite elegir un color concreto de una paleta y obtener directamente su equivalente RGB, tanto decimal como hexadecimal, para insertarlo en una regla CSS. Hay también una serie de sitios web donde podemos conocer las equivalencias entre los colores y sus códigos, como por ejemplo: www.w3schools.com/Html/html_colorvalues.asp
La regla que acabamos de crear emplea lo que se conoce como "selector de tipo", puesto que se aplica a todas las apariciones del elemento tipo h1 en el documento. Los selectores de tipo asignan propiedades CSS a cualquier etiqueta HTML del documento. En este caso, a la etiqueta . Todas las apariciones de se mostrarán en pantalla con el texto en rojo. Los selectores de tipo también se les suele denominar "selectores de etiqueta". No es frecuente que oigas a nadie utilizar la expresión "selector de tipo", pero es el nombre oficial que tiene, por eso lo llamamos así en este capítulo. Ahora vamos a ver otra categoría de estilos CSS que se conocen como clases. También vamos a empezar a trabajar con el elemento de HTML, que nos permite separar y controlar partes de un contenido, como por ejemplo una frase dentro de un párrafo, o una palabra concreta dentro de una frase.
Los estilos de clase y el elemento Los selectores de etiqueta se utilizan con mucha frecuencia, pero solo se pueden aplicar a elementos HTML. Cuando lo que queremos es modificar el estilo de alguna cosa que no coincide exactamente con una etiqueta, por ejemplo cambiar el color de una única palabra dentro de un párrafo, el selector de etiqueta no es una buena opción (e incluso en algunas ocasiones resulta imposible de aplicar). En este caso podemos utilizar el selector de clase, que es una regla CSS que se puede aplicar a cualquier elemento dentro de una página. Los selectores de clase tienen unas opciones de nomenclatura flexibles, pero es muy conveniente utilizar nombres que describan adecuadamente lo que hacen. Por ejemplo, podemos crear selectores de clase como .caption, .imageborder, o .redtext. En este ejercicio vamos a crear un estilo de clase que aplica color rojo a las palabras Worldwide Apparel en un párrafo. 1 Sitúa el cursor en la línea justo debajo de la llave de cierre de la regla h1 y escribe esto: .red { color:red; } Fíjate en el punto al principio del selector de clase. El texto que sigue al punto es el nombre de la clase. Puedes utilizar cualquier nombre, pero el punto al principio del mismo es obligatorio, para poder identificarlo como una clase. La declaración color:red es la misma que en la práctica anterior, pero en este caso el selector no es el elemento h1. Ahora aplicaremos esta clase a las palabras Worldwide Apparel para que se vean en color rojo. Para ello tenemos que insertar una etiqueta .
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 39 de 156
2 En el primer párrafo dentro de la etiqueta , sitúa el cursor justo delante de las palabras Worldwide Apparel, pulsa y escribe: 3 A la derecha de Apparel añade la siguiente etiqueta de cierre . El código debe quedar así: ... employees of Worldwide Apparel Guarda el archivo. Si visualizas ahora la página en el navegador verás que no hay ningún cambio. La etiqueta en nuestro HTML está vacía, no hace nada y tenemos que asociarla a un estilo. En este caso, la etiqueta delimita el contenido dentro del párrafo al cual se aplicará un estilo, pero por sí misma no aplica ningún estilo ni tampoco lo define. 4 Ve a la etiqueta de apertura . Entre la letra "n" de "span" y símbolo ">", inserta un espacio en blanco y escribe esto: class="red" Ahora la línea queda así: ... employees of Worldwide Apparel 5 Busca el segundo párrafo donde aparece información de copyright y dentro de la etiqueta de apertura escribe esto que destaco en color rojo: All content on this site is the copyright of Worldwide Apparel. 6 Guarda la página y visualízala en el navegador. Todo el texto del párrafo (excepto el vínculo) aparece ahora en rojo. Aquí es donde vemos la flexibilidad de las clases CSS: se pueden utilizar y reutilizar para aplicar estilos a distintas partes de la página. El vínculo no cambia de color porque se le aplica un estilo predefinido específico (el de la etiqueta ). En un ejercicio más adelante veremos cómo se cambia el estilo de un vínculo.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 40 de 156
Los estilos de clase CSS se pueden aplicar a elementos de línea y de bloque, como ocurre en el último párrafo. 7 Cierra el navegador, pero mantén abierto el documento en el editor de texto porque seguiremos trabajando sobre él en el siguiente ejercicio.
Tres maneras de utilizar estilos En la práctica anterior los estilos estaban situados dentro de la sección de cabecera () de la página. Esta modalidad recibe el nombre de hoja de estilos interna. Además de hojas de estilo internas, también existen las hojas de estilos externas y los estilos aplicados directamente ("inline"). Una hoja de estilo externa es un documento independiente con la extensión .css. Cuando utilizamos un archivo externo, los estilos se definen en él y en las páginas HTML tenemos que insertar un enlace a dicho archivo. Mientras que las hojas de estilo internas solo se aplican a la página donde residen, las hojas externas se pueden aplicar a múltiples documentos HTML. Los estilos inline o directos son la tercera posibilidad pero se utilizan mucho menos que las otras dos. En este caso, las reglas se declaran dentro de las propias etiquetas HTML. Un ejemplo de estilo inline para escribir en rojo el texto del título puede ser: Worldwide Apparel 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 . Si tuviéramos 50 elementos en nuestro sitio web y utilizásemos estilos inline, necesitaríamos añadir este código de estilo 50 veces, pero lo peor es que
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 41 de 156
si quisiéramos cambiar el color a verde, tendríamos que buscar las 50 apariciones de este estilo y remplazar la palabra "red" por "green". Los estilos inline son útiles para aplicaciones puntuales o cuando no podemos utilizar una hoja de estilos interna o externa. Uno de estos casos puede ser un correo electrónico en formato HTML. En las siguientes lecciones no vamos a utilizar mucho los estilos directos, en línea con la forma en que se diseñan actualmente los sitios web. La práctica más habitual consiste en combinar estilos internos y externos.
Cuándo utilizar hojas de estilo internas y externas En las hojas de estilo internas, las reglas CSS quedan escritas directamente dentro del documento utilizando la etiqueta . La hoja de estilos queda ubicada dentro de la sección del documento. En el caso de las hojas internas, las reglas CSS solo se aplican al documento en donde residen. Por ejemplo, si tenemos un sitio web con 20 páginas y decidimos utilizar hojas de estilo internas, deberemos crear una hoja de estilos dentro de cada una de esas 20 páginas. Un cambio en cualquier regla exigiría modificar todas y cada una de las hojas de estilo internas en dichas páginas para mantener la consistencia. En las hojas externas las reglas CSS, como ya explicábamos anteriormente, se guardan en archivos independientes. Podemos asociar un mismo archivo .css a cualquier página HTML, y con ello nos ahorraremos mucho trabajo y ganamos en flexibilidad. Si definimos una regla para el elemento en una hoja de estilo externa, todos los párrafos del sitio web quedan modificados de inmediato. En la práctica siguiente vamos a crear una hoja de estilo externa la asociaremos a una página HTML nueva.
Creación de una hoja de estilos externa Una página HTML no tiene por qué limitarse a utilizar solamente una hoja de estilos externa, y en muchos sitios web de grandes dimensiones, las definiciones de estilos suelen repartirse entre varios archivos, para facilitar su organización y mantenimiento. Podemos incluso utilizar hojas de estilos para funciones concretas, como imprimir una página o visualizar el contenido en dispositivos móviles. Se pueden diseñar hojas de estilo también para que nuestros sitios web sean compatibles con navegadores antiguos. En este ejercicio vamos a crear una hoja de estilos externa, traspasaremos las reglas desde el documento HTML a la hoja externa y después asociaremos la hoja de estilos a una página HTML nueva
1 Desde el menú Archivo – Nuevo, selecciona la Plantilla de Estilos CSS y ábrela si tu editor web ofrece esta opción. Puede que tu editor de textos tenga un menú de opciones distinto, y debas seleccionar un comando equivalente. Por ejemplo, muchos editores tienen la opción Archivo – Nuevo documento CSS..
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 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 extensión .css, pero en realidad se trata de un archivo de texto plano. 3 Pasa ahora al documento HTML que hemos utilizado en el último ejercicio (02_index_work.html), pero mantén abierta también la hoja de estilos. 4 En el documento HTML busca las reglas que has escrito dentro de las etiquetas y selecciónalas con el ratón. No selecciones las etiquetas y , 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 . 5 En el menú Edición selecciona Cortar y pasa ahora al archivo styles.css. Si en este archivo aparece algún código, tendrás que sobrescribirlo seleccionándolo y después pegando (desde el menú Edición – Pegar) las reglas que acabas de seleccionar. Guarda el archivo en el disco. La hoja de estilos externa funciona como sustituta de las etiquetas del documento HTML. Ahora que hemos pasado las reglas a este nuevo documento, necesitamos insertar un vínculo a él en la página HTML para que el navegador sepa dónde están las reglas de estilo que debe aplicarle. 6 En el editor, vuelve al archivo 02_index_work.html y guárdalo en disco. Ahora vamos a añadir la etiqueta que apuntará a nuestro archivo styles.css. Este paso es fundamental porque si no vinculamos la hoja de estilos externa, la página HTML se mostrará sin aplicar esos estilos. 7 Pon el cursor detrás de la etiqueta de cierre y pulsa Intro para empezar a escribir en la línea siguiente. Escribe esto:
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 43 de 156
En esta línea estás añadiendo los atributos rel, type y href. Probablemente recordaras que el atributo href ya lo habíamos utilizado al insertar el vínculo en uno de los ejercicios anteriores. Para que funcione correctamente nuestra hoja de estilos externa, debemos escribir de forma precisa tanto el nombre como el path del archivo. 8 Selecciona Archivo – Guardar y visualiza la página HTML en el navegador. La página debe verse igual que antes, ya que estamos utilizando los mismos estilos. Simplemente ocurre que se aplican desde fuera del documento. 9 Cierra el navegador y vuelve al editor de texto. Vamos a crear un nuevo documento HTML y le añadiremos el mismo enlace al archive CSS externo, para ver cómo se aplican las reglas. 10 Desde el menú Archivo, abre el archive test.html que está en la carpeta HTML5_02lessons. Es un documento que no contiene nada. 11Sin salir del editor, vuelve al archivo 02_index_work.html y selecciona todo el elemento que has escrito en el paso 7: En el menú Edición, selecciona Copiar. 12Vuelve al documento test.html, pulsa debajo del elemento y pega (Edición- Pegar) para que añadir la línea anterior. Guarda el archivo. Ahora, la hoja de estilo externa también está asociada a este documento HTML. Las etiquetas HTML que añadamos a este nuevo documento quedarán modificadas si existe alguna regla para ellas en el archivo CSS. Por ejemplo, vamos a añadir ahora un elemento heading 1 y su texto cambiará de forma automática a color rojo. Pulsa dentro del elemento y escribe: Worldwide Apparel benefits page
Guarda el archivo y visualízalo en el navegador.
La etiqueta obtiene su estilo de una hoja de estilos CSS externa que hemos creado. El título se escribe en rojo porque la regla de estilo para el elemento es color:#FF0000 y dicha regla está dentro de una hoja externa asociada a dos páginas: 02_index_work.html y test.html. Esto nos permite controlar el estilo de ambos documentos HTML desde un único sitio.
En qué consisten los estilos en cascada Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 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 algún conflicto en la definición de estilos entre las declaraciones inline, interna y/o externa, el estilo directo (inline) será el que prevalezca porque es el que más cerca se sitúa del código HTML. La hoja de estilo interna tiene precedencia sobre cualquier otra externa, y las definiciones utilizadas en hojas de estilo externas se utilizan solo si no entran en conflicto con las declaraciones internas o directas.
Uso de textos y tipos de letra en la web A la hora de diseñar para la web, podemos formatear el texto de una forma parecida a como se hace en las aplicaciones de procesamiento de textos y diseño publicitario de los equipos de escritorio, pero debemos tener en cuenta algunas diferencias importantes. Cuando especificamos el uso de una fuente (tipo de letra) concreta, esta fuente ha de estar instalada en el ordenador o el dispositivo del usuario donde se va a restituir la página. Si el ordenador o dispositivo no dispone de esa fuente, el navegador la sustituye por otra. Puesto que es imposible saber qué fuentes están instaladas en los ordenadores de los usuarios, y debido a la capacidad que tienen los navegadores para sustituir unos tipos de letra por otros, es posible que los resultados obtenidos en ciertos equipos no se correspondan con el diseño que hemos previsto. Una opción puede ser utilizar fuentes que sabemos que podemos encontrar en la mayoría de los ordenadores. Lo malo es que son muy pocas estas fuentes de las cuales podemos tener la certeza de que se encuentran en prácticamente todos los ordenadores del mundo.
Tipos de letra de uso común en la web Estas son las Fuentes que podemos utilizar con más confianza en la Web: Arial Verdana Georgia Times New Roman Courier Trebuchet Lucida Tahoma Impact La lista es pequeña porque tiene en cuenta las plataformas Mac y Windows y suponemos además que aún acceden a la web muchos ordenadores antiguos. Estos equipos más antiguos tienen una lista de fuentes preinstaladas más reducida que los actuales, por lo que un diseñador tiene que tener esto en cuenta a la hora de seleccionar el tipo de letra que usará en sus páginas. Por otra parte, esta lista es pequeña también por razones de tipo estético. Por ejemplo, las fuentes Courier e Impact se usan poco porque, aunque estén disponibles de forma general, su apariencia es muy peculiar y limita mucho su uso de forma habitual.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 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 inglés). En CSS, la pila de fuentes es una lista de varios tipos de letra que puede utilizar el navegador para mostrar texto en pantalla. Aquí vemos un ejemplo de pila de fuentes CSS: font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; En este ejemplo, el navegador primero busca la fuente Helvetica Neue en el sistema del usuario. Fíjate en las comillas del ejemplo. En la mayoría de casos, cuando se indica una fuente, las comillas no hacen falta pero si el nombre de la fuente consta de más de una palabra, son necesarias. Si el usuario no dispone de la Helvetica Neue, el navegador buscará una versión más genérica de la Helvética (segunda opción de la lista). Si tampoco la encuentra, utilizará Arial, que es un tipo de letra muy similar a la Helvética. Si por algún motivo tampoco estuviera presente la fuente Arial en el sistema, elegiría sans-serif, lo que permite al navegador emplear cualquier fuente sans-serif que encuentre. "Sans-serif" es una definición genérica para todos los tipos de letra que no llevan unos pequeños trazos (o "serifs") al final de cada letra. Ejemplos de fuentes "serif" son la Times New Roman y la Georgia.
Elección de font-family En este ejercicio vamos a definir una lista de fuentes para toda la página y después declararemos una lista específica para los títulos.
1 En el editor de textos, vuelve al archivo 02_index_work.html si sigue abierto, o ábrelo si es preciso. Vamos a modificar el estilo del texto en esta página, pero dado que nuestros estilos están ahora declarados en una hoja de estilos externa, tendremos que realizar estas modificaciones en dicha hoja. 2 Volvamos a nuestro documento styles.css que hemos creado en el ejercicio anterior. Ahora mismo tenemos estilos para la etiqueta h1 y para una clase llamada ".red". Vamos a crear un estilo para el cuerpo de la página. 3 En la parte superior del documento, por encima de la regla del estilo h1, escribe:: body { font-family:"Trebuchet MS", Tahoma, Arial, sans-serif; } 4 Guarda el archivo (Menú Archivo – Guardar) y visualiza la página 02_index_work.html en el navegador. Como decíamos antes, el navegador muestra el tipo de letra Trebuchet si la tenemos instalada en el equipo; en caso contrario, lo intenta primero con Tahoma, luego con Arial y finalmente, con cualquier tipo de letra sansserif.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 46 de 156
Cuando se define la fuente Trebuchet en la declaración font-family para la regla de la etiqueta , todo el texto de la página se muestra en ese tipo de letra. Ahora, todo el texto de la página se escribe con letra Trebuchet porque es el estilo que hemos declarado para el cuerpo. Recordemos que la etiqueta "body" de HTML engloba a todos los elementos visuales de la página. Ahora vamos a declarar una familia de fuentes específica para el elemento de párrafo (""). 5 Vuelve a la hoja de estilos en el editor y debajo justo de la regla para el "body", añade una nueva regla de estilo para la etiqueta con este contenido: p{ font-family:Georgia, "Times New Roman", Times, serif; } 6 Guarda de nuevo el documento y visualiza el archivo 02_index_work.html en el navegador. Ahora tenemos una regla explícita para los párrafos, por la cual el tipo de letra aplicable es la Georgia. Los rótulos de título siguen saliendo con letra Trebuchet, que es la que hemos definido para todo el cuerpo. Ten en cuenta que aunque podríamos haber elegido cualquier tipo de letra presente en el ordenador, Trebuchet y Georgia son buenas opciones de partida porque se encuentran en la mayoría de los ordenadores del mundo.
El prometedor futuro de las fuentes La escasez de opciones a la hora de utilizar distintas fuentes en la web ha causado frustración entre los diseñadores Web durante muchos años. Este problema va aliviándose a medida que ciertas empresas han ido creando soluciones para que las páginas puedan verse en un navegador con los tipos de letra
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 47 de 156
El prometedor futuro de las fuentes especificados por los creadores. El panorama de las fuentes está cambiando, sin embargo, con la aparición de las llamadas "web fonts" y, en concreto, con la funcionalidad @font-face de CSS. Ahora es posible añadir una gran variedad de tipos de letra y tener la certeza de que nuestras páginas se podrán ver tal y como pretendemos. Si quieres leer un análisis más detallado sobre este asunto e instrucciones paso a paso para integrar web fonts en tus páginas, lee la sección Aplicar estilos con CSS3 en la Lección 11 del libro "HTML5 Digital Classroom".
Cambiar el tamaño del texto con CSS
• • • •
Cuando utilizamos CSS para formatear textos para la web, disponemos de algunas opciones para establecer su tamaño y su grosor. La propiedad CSS que controla el tamaño del texto se llama fontsize. Podemos modificar el valor de la propiedad font-size de varias formas: Tamaño absoluto: se trata de una serie de palabras clave que indican tamaños predefinidos de letra. Los tamaños nominados escalan de acuerdo con las preferencias del usuario con respecto a la letra. Los valores posibles xx-small, x-small, small, medium, large, x-large y xx-large. Longitud: Es un número seguido de un indicador del sistema de medida (cm, mm, in, pt, o pc) o bien un de unidades relativas (em, ex, o px). Porcentaje: Un entero seguido del signo de porcentaje (%). El valor es un tanto por ciento del tamaño de letra del objeto padre. Tamaño relativo: una serie de palabras clave que se interpretan como relativas al tamaño de letra del objeto padre. Los valores posibles son larger ysmaller. La elección de la unidad de medida para el tamaño de la letra en una página web es importante y no es tan fácil como parece. La principal dificultad en este sentido tiene que ver con la resolución de la pantalla y las distintas maneras en que, a lo largo del tiempo, los navegadores han resuelto la presentación de los textos. El texto en monitores pequeños a menudo tiene un aspecto distinto de como aparecen en monitores de gran formato; con un poco de previsión podemos resolver este problema, imaginando el efecto en cada caso. Además del problema de la resolución de pantalla, tenemos que considerar también la forma en que cada navegador resuelve la restitución de los textos. Por ejemplo, nos navegadores permiten al usuario cambiar a mano el tamaño de la letra. Más aún: cada vez hay más gente que navega por la Web desde teléfonos y dispositivos móviles, lo que hace que la elección del tamaño de letra sea un asunto aún más crítico.
Las medidas en pixels y puntos no son la mejor opción para el tamaño La declaración del tamaño de letra en puntos puede ser algo obvio si vienes del mundo de las artes gráficas, y si tienes experiencia con el diseño gráfico por ordenador, seguramente te manejarás muy bien usando los pixels como unidad de medida. La propiedad font-size en CSS nos permite utilizar ambas unidades. En el siguiente ejemplo, el selector CSS muestra una regla de párrafo con puntos y la segunda, una regla de párrafo basada en pixels:
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 48 de 156
p { font-size:12pt; } (regla CSS de tamaño de letra basada en puntos) p { font-size:12px; } (regla CSS de tamaño de letra basada en pixels) Aunque la unidad "points" está soportada, su uso es una mala práctica y no se recomienda en el diseño de páginas Web. Los puntos son un sistema de medida pensado para la imprenta de papel que indican una unidad absoluta de medida que no tiene una equivalencia exacta en pantalla. Los pixels, por su parte, son la unidad de medida que se suele emplear en los gráficos por ordenador. Los tamaños y resoluciones de pantalla se expresan en pixels. En un mundo ideal, los diseñadores deberían poder utilizar sin riesgo los tamaños de letra expresados en pixels porque son unidades relativas pensadas para escalar de forma nativa. A lo largo de los años, los navegadores han resuelto el proceso de cambio de tamaño de los textos de diversas maneras. Por ejemplo, Internet Explorer 6 y 7 nomodifican el tamaño del texto basado en pixels si el usuario opta por alterar la configuración por defecto. Prácticamente todos los navegadores web ofrecen la posibilidad de alterar el tamaño del texto. Esta opción suele aparecer en el menú de Opciones o de Configuración. En algunos navegadores modernos la opción de cambio de tamaño del texto aparece en un submenú llamado Zoom. Muchos navegadores además ofrecen la combinación de Ctrl + + (para ampliar) y Ctrl + – (para reducir) que aumentan o reducen respectivamente el tamaño del texto. En el Mac OS, estas combinaciones son Command + + [aumento] y Command + [reducción].
Uso de una combinación de porcentaje y medida "em" Una forma de resolver el problema del cambio de tamaño de los textos que causa el uso de pixels consiste en aplicar otras unidades de medida. Aquí vamos a establecer un cambio de tamaño fiable combinando el porcentaje y la unidad "em". Para tener una idea de cómo funciona, vamos a introducir unas reglas de estilo CSS directamente en un archivo HTML que hemos preparado previamente para ti.
1 En el menú Archivo del editor de texto, selecciona Abrir y ve a la carpeta HTML5_02lessons. Localiza el archivo 02_sizing.html y pulsa Aceptar. En el menú Archivo, selecciona "Guardar como" y guárdalo con el nombre 02_sizing_work.html. Este archivo tiene cuatro bloques de texto: un título de nivel 1 (heading 1, ), un heading 2 , y dos párrafos . Este archivo utiliza una hoja de estilos interna por comodidad, y hemos declarado el tipo de letra Trebuchet para todo el cuerpo. Vamos a empezar por modificar algunas propiedades en el propio cuerpo para ver qué ocurre. 2 Antes de cambiar nada, tenemos que comprobar cómo se ve la página en su estado inicial. Visualiza este archivo en el navegador. Todos los navegadores aplican un tamaño de letra por defecto si no hay estilos que aplicar. En la mayoría de casos, el valor utilizado para el cuerpo es Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 49 de 156
de 16 pixels (en este caso los párrafos heredan el valor de la etiqueta ). Cierra el navegador y regresa al editor de textos. 3 En la regla de estilos para el cuerpo, escribe esta línea: body { font-family:"Trebuchet MS", Tahoma, Arial, sans-serif; font-size:10px; }
4 Guarda el archivo en disco y abre la página en el navegador. Verás que todo el texto es ahora bastante más pequeño, y esto es debido a que el estilo del cuerpo define el tamaño general del texto para toda la página, y los demás elementos como párrafos y títulos, se restituyen en función de ese valor base.
Al establecer el tamaño de letra para el cuerpo, todo el texto de la página se representa más pequeño. 5 Vuelve al editor de textos y cambia el siguiente valor en la propiedad font-size: font-size:small;
6 De nuevo, guarda el archivo y abre la página en el navegador. Todo el texto es ahora algo más grande que el valor de 10 pixels que le indicamos en el paso 3. Como explicaba anteriormente, el valor "small" es una unidad de medida absoluta, llamada "palabra clave". Los navegadores web tienen tamaños predefinidos asignados a las palabras clave y, aunque algunos prefieren las palabras clave porque así se evitan tener que usar unidades (y los problemas que acarrean), en general no nos aportan el nivel de detalle que seguramente necesitaremos en muchas ocasiones. 7 Vuelve al editor y cambia el valor de la propiedad font-size poniendo esto: font-size:100%;
8 Guarda el archivo y visualiza la página en el navegador. Podrás ver que ahora el tamaño del texto es el mismo que teníamos al principio del ejercicio (cuando aún no habíamos definido ningún tamaño de letra). Este paso nos sirve para definir expresamente que el tamaño de letra para el cuerpo es el mismo que tiene predefinido el navegador. Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 50 de 156
Tendrás que hacer un pequeño acto de fe y creer que la técnica que estás aprendiendo resuelve ciertos problemas concretos de cambio de tamaño del texto en los navegadores antiguos. Si atendemos a este tipo de problemas ahora nos evitaremos muchos problemas en el futuro y nos aseguraremos una mejor compatibilidad para nuestras páginas web. 9 En la regla de estilo para el párrafo, escribe esto: p { font-size:1em; }
La unidad de medida llamada "em" es muy parecida a los pixels en el sentido de que está pensada para variar la escala. La diferencia principal es que los "ems" no dependen de la resolución del monitor, mientras que los pixels sí. Puede que al principio los ems no sean muy intuitivos, pero si aprendemos a utilizarlos, nos aportarán grandes ventajas en el futuro. 10 Guarda el archivo y vuelve a mostrarlo en el navegador. Dependiendo de qué navegador utilices, probablemente no vas a ver ningún cambio en la página y eso se debe a que el valor em de 1 se vincula con un tamaño de letra del 100%, que es lo que hemos definido para el cuerpo. Quizá nos ayude a entender esta relación si la expresamos en forma matemática: 1 em = 100% = 16 pixels.
Aquí tenemos que el tamaño de letra para el párrafo es de 1em, el tamaño de fuente para el cuerpo es 100% y el tamaño de fuente por defecto para el navegador es de 16 pixels. Una vez definida la relación, podemos empezar a variar el valor de "em" para agrandar o reducir el tamaño de la letra. 11 Cierra el navegador y vuelve al editor de texto. En la regla para el párrafo, cambia este valor: font-size:0.875em;
12 Guarda el archivo y ábrelo en el navegador. Ahora el texto del párrafo es más pequeño.
Hemos declarado el tamaño de fuente para el párrafo en unidades "em".
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 51 de 156
La razón por la que utilizamos un valor tan exacto como 0.875 es porque así el tamaño de la fuente equivale a 14 pixels. Si estás empezando a pensar que el diseño de páginas web es una ciencia matemática, no te preocupes demasiado. Todo será más fácil a partir de ahora. Si tienes curiosidad, verás que multiplicando el valor de 16 pixels que es el tamaño por defecto del navegador, por el valor em (0,875) el resultado es 14.. 13 Ahora vamos a modificar el tamaño de los títulos, pero utilizando unidades em. En la regla h1, vamos a añadir esta línea: h1 { font-size:1.5em; }
Esto hace que el tamaño de los títulos de nivel 1 sea vez y media el tamaño normal del texto del cuerpo. Es equivalente a 24 pixels. Guarda el archivo y muéstralo otra vez en el navegador para ver el efecto. En este momento, el texto h1 es de aproximadamente el mismo tamaño que h2, lo que no tiene mucha lógica, así que vamos a reducir también el tamaño de letra para la etiqueta h2. 14 En la regla h2 añade la siguiente línea: h2 { font-size:1.25em; }
Esto provoca un cambio de escala que hace que los textos de h2 sean 1,25 veces más grandes que el texto normal del cuerpo, lo que (siguiendo nuestra fórmula matemática) nos da un valor real de 20 pixels. 15 Guarda el archivo y muéstralo otra vez en el navegador. Ahora tendrás que ver el texto manteniendo las proporciones adecuadas.
Establecemos el tamaño de letra del elemento h2 (título de nivel 2) a 1.25 ems. Recuerda que una de las razones más importantes para utilizar em como unidad de medida es que se adapta en el caso de que un usuario altere el tamaño del texto de su navegador. Podemos simular este efecto si aumentamos el tamaño de la letra en el navegador. Por ejemplo, en Internet Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 52 de 156
Explorer 9 podemos ir a la opción View de la barra de menú, seleccionar "Text Size" y elegir entre unas cuantas opciones. Podrás ver que el texto reacciona bien a este cambio de escala. Cuando termines asegúrate de que vuelves a dejar el tamaño del texto en el valor por defecto. Muchos navegadores tienen un comando que permite hacer esto. El problema que nos plantea el cambio de tamaño del texto en los navegadores es algo más complicado, ya que algunos utilizan la función "zoom" que aumenta o reduce la escala de toda la página. Los navegadores que disponen de zoom pueden tener, además, una opción aparte para variar solo el tamaño de la letra. Otra de las ventajas de utilizar ems tiene que ver con la relación de escala entre todos los elementos que utilizan esta unidad de medida. 16 Vuelve al editor de texto y en la regla correspondiente al body, modifica el siguiente valor: font-size: 85%;
17 Guarda el archivo y vuelve a mostrarlo en el navegador. Ahora todo el texto es más pequeño, ¡y solo hemos cambiado un valor! Esto es por la relación que mantiene la unidad em con el elemento body. Algunos diseñadores asignan de esta forma un tamaño de base si, por ejemplo, el cliente quiere que el tamaño de letra sea más grande o más pequeño en todo el sitio web. En lugar de modificar las propiedades una a una, con una sola regla controlamos múltiples tamaños de letra de una manera más fácil. 18 Vuelve a dejar la propiedad font-size del cuerpo en su valor original de 100%: font-size: 100%;
19 Guarda el documento, con esto hemos concluido la lección. En este ejercicio has podido explorar distintas maneras de dar formato a los textos. Cuando quieras cambia el aspecto de los textos, casi siempre lo mejor será utilizar el texto real en vez de una imagen del texto (esto es, un archivo gráfico con los rótulos dentro). Si utilizamos textos en vez de imágenes con texto creadas con programas como Photoshop o Illustrator, nuestros sitios web serán accesibles para una audiencia más amplia de usuarios, dispositivos y (muy importante), buscadores.
Auto estudio 1 Añade otro título debajo del último párrafo en el archivo 02_index_work.html con esto: Worldwide Apparel volunteer opportunities 2 Crea un estilo para la etiqueta en tu hoja externa de estilos que defina este rótulo con letra de color naranja.
Repaso Preguntas 1 ¿Qué es un doctype y qué relación tiene con la validación de las páginas web?
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 53 de 156
2 En el siguiente código XHTML, ¿cuál es el atributo y qué valor tiene? ¿Qué otros atributos podríamos encontrar con frecuencia en un elemento imgcomo este? 3 Indica la finalidad de las hojas de estilo externas y alguna de las ventajas que ofrece su utilización.
Respuestas 1 Un doctype es una declaración que se hace al principio de los documentos HTML. Los navegadores web la utilizan para saber qué lenguaje de markup y qué versión se utilizan en la página. La validación de páginas comprueba la conformidad de la sintaxis del código respecto de las especificaciones deldoctype declarado. La validación de las páginas es una buena opción para detectar problemas como etiquetas que faltan o errores de tipografía en el código. 2 En esta línea de código, el atributo es src y su valor es "images/familysitting.jpg". El atributo src y su valor están anidados dentro de la etiqueta . Este atributo contiene un vínculo a un archivo de imagen que se mostrará en pantalla. Otros ejemplos de atributos para imágenes son alt, que aporta un texto alternativo a la imagen para uso en dispositivos como sintetizadores de voz o lectores de pantalla, y los atributos width y height, que indican el tamaño que debe tener la imagen dentro de la página. 3 Una hoja de estilos CSS externa es un documento de texto con extensión .css. Este documento contiene reglas CSS que definen el aspecto de los elementos HTML. Puesto que las hojas de estilos externas se pueden asociar a múltiples páginas web, nos permiten disponer de un lugar centralizado para la definición de estilos de todo un sitio web. Una de las ventajas es que podemos modificar el aspecto de todo el sitio web con un solo cambio en una regla CSS. Otras ventajas pueden ser la posibilidad de utilizar múltiples hojas de estilos para facilitar su mantenimiento posterior e indicar hojas de estilo específicas para imprimir el documento o para optimizar su presentación en dispositivos móviles.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 54 de 156
Lección 3: Introducción a la presentación en pantalla con CSS Objetivos: En esta lección aprenderemos los conceptos fundamentales de diseño Web basados en CSS y la preparación de una estructura visual de página web con dos columnas y anchura fija. Además veremos el empleo de un archivo de “reset” de CSS y cómo se añade a las páginas. Se aborda también el uso del elemento y las propiedades “float” y “clear” para crear columnas en la página.
Para empezar Vamos a trabajar con algunos archivos de la carpeta HTML5_03lessons. Comprueba que has descargado y que tienes en tu disco duro la carpetaHTML5lessons. Para las prácticas hemos utilizado como editor de textos Microsoft Visual Web Developer Express, pero existen numerosas alternativas para la creación y edición de páginas Web que puedes utilizar también.
El papel del archivo de reset CSS Antes de empezar a crear un diseño visual de página Web vamos a ver cómo se utiliza un archivo de reset de CSS. Todos los elementos HTML se muestran en pantalla utilizando los estilos por defecto que aplica cada navegador. Ya hemos visto en el capítulo precedente cómo CSS nos permite definir estilos para tipos de letra, modificando el tamaño y la fuente, pero hay otros estilos no tan obvios. Por ejemplo: el estilo por defecto para un elemento heading 1 () incluye unos márgenes de 10 pixels por encima y por debajo del texto. Si queremos modificar el estilo de h1 para que no lleve márgenes, tendremos que indicar de manera explícita unas reglas que conviertan dichos valores a cero. Una regla CSS para anular los márgenes superior e inferior de los elementos heading 1 es así: h1{ margin-top:0px; margin-bottom:0px; } Todos los elementos HTML incluyen márgenes por defecto. Aunque los navegadores web actuales tienen una calidad muy superior a los antiguos, conviene saber que cada motores de restitución empleado por los navegadores aplica sus propias reglas para mostrar los elementos en pantalla. En teoría esto quiere decir que el margen por defecto de 10 pixeles en un navegador X puede transformarse en 15 pixels en el navegador Y. Estas diferencias generan resultados no homogéneos a la hora de ver las páginas en distintos sistemas (no obstante, las diferencias tampoco son tan drásticas como hemos sugerido en este ejemplo, pero existen y hay que contar con ellas). Una técnica para homogeneizar las presentaciones en pantalla consiste en utilizar un archivo CSS de reset que elimine los estilos por defecto aplicados a los elementos HTML utilizados con más frecuencia. Con este reseteo de valores podemos conseguir una base fiable y coherente sobre la cual construir nuestros nuevos estilos. Para hacernos idea de cómo funcionan los estilos, vamos a abrir una página que ya tiene varios estilos y le asociaremos una hoja de estilos CSS de reset.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 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 genéricos, como títulos, párrafos, listas y formularios. No incluye estilos CSS. 2 Muestra en el navegador la página y mira el espacio de separación que hay entre los títulos, y fíjate también en el aspecto de las listas de datos y el formulario. Lo que haremos ahora es asociar una hoja de estilo CSS de reset para ver cómo afecta a la presentación en pantalla de estos elementos. Cierra el navegador y vuelve al editor. 3 Añade la siguiente línea de código (destacada en color rojo) debajo de la etiqueta de título para asociar la hoja de estilos reset.css que se encuentra también en la carpeta HTML5_03lessons: CSS Reset Guarda el archivo y visualízalo en el navegador
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 56 de 156
Una página con elementos HTML habituales con reset de estilos CSS. Muchos de los elementos en esta página tenían los márgenes y distancias al borde prefijadas a cero. En consecuencia, el espacio entre ellos se ha eliminado. Se han reseteado también otros muchos estilos, como por ejemplo las listas de datos, que se han dejado en valor “none”, lo que elimina los puntos (las “viñetas” o “bullets” como también se los denomina en los textos) de las líneas en las listas no ordenadas, así como los números de orden en las listas ordenadas. Cierra el navegador y vuelve al editor de textos. 4 Selecciona Archivo-Abrir. En la ventana, selecciona el archivo reset.css y pulsa Abrir. Revisa un momento el contenido. Esta serie de reglas elimina los valores por defecto de márgenes, márgenes interiores (“padding”), y los bordes de casi todos los elementos HTML. 5 Ahora vamos a modificar la hoja de estilos, pero tenemos que asociarla a las páginas web. Recuerda que las hojas de estilos de reset son opcionales. Nos ayudan a normalizar la presentación en los distintos navegadores, y algunos diseñadores también incluyen en ellas sus propios estilos de uso frecuente para resetear los valores iniciales de los elementos.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 57 de 156
de la hoja de estilos de reset
ue el primer desarrollador que preparó hojas de estilo de reset, que después distribuyó para uso público. Puedes utilizar sus reglas de estilo en e
quieres buscar más información sobre las técnicas de reset, visita la web http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/.
ñ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 añadir esta regla al estilo del elemento body. Si te gusta poner más espacio de separación entre párrafos, puedes fija
r de tamaño de línea que te parezca más adecuado. Lo que importa es disponer de una serie de reglas coherentes que se puedan utilizar para
quier proyecto de inmediato.
jas de reset CSS puede tener algunas desventajas, sobre todo para los neófitos: tendrán que recordar constantemente que están utilizando dicha
s y deben tener en cuenta cómo afectará a los distintos elementos del sitio web. Si estamos aplicando la hoja de reset a todo el sitio, algunos de
ueden resultar sorprendentes, sobre todo con elementos con los que no estamos especialmente familiarizados. Por ejemplo, un archivo CSS de
los márgenes externos e internos de la mayoría de los elementos de los formularios, y cuando utilizan por primera vez con campos de formula
eguntan por qué los botones, campos de texto y otros elementos aparecen de esa forma.
Breve historia de las técnicas de presentación en pantalla para la Web Aunque aquí vas a aprender a crear un diseño visual de página utilizando estilos CSS, debes saber que esto no ha sido siempre la técnica normal. Cuando se empezó con el diseño web a mediados de los 90, el único método que se podía emplear para crear estructuras visuales complejas, como por ejemplo la presentación en varias columnas, consistía en emplear el elemento tabla (). La tabla HTML estaba pensada inicialmente para mostrar datos de manera estructurada, en filas, columnas y celdas. Sin embargo los diseñadores empezaron a utilizar este elemento como base para las estructuras visuales de las páginas. En aquel momento esa técnica estaba plenamente justificada: las tablas era lo único que tenían para generar el tipo de diseños que se necesitaban y, además, eran un recurso extremadamente flexible. A partir de aquí, empezaron a utilizarse técnicas como el anidamiento de tablas, es decir, crear tablas dentro de celdas de otras tablas de mayor tamaño. Por ejemplo, el código para una página normal de dos columnas podía empezar creando una tabla de tres filas y dos columnas:
Una tabla web de tres filas y dos columnas. Puesto que la primera fila se iba a convertir en la sección de cabedera, no interesaría que quedase dividida en dos columnas. La etiqueta HTML permite fusionar las dos celdas:
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 58 de 156
Una tabla cuya primera fila consta de dos celdas fusionadas en una sola. En esta primera fila el diseñador, por ejemplo podía intentar insertar una sección independiente de tres columnas, para mostrar un logo y otros elementos, como una barra de navegación o un campo para pedir credenciales de usuario. Para añadir esta sección, el diseñador tenía que crear una nueva tabla (esta vez con una fila de tres columnas) dentro de la primera fila de la tabla inicial:
Una nueva tabla, con una fila y tres columnas, anidada dentro de la primera fila de la tabla original. Para generar esta estructura de tabla, el diseñador tenía que configurar la tabla inicial con una anchura y altura fijas. Supongamos que el diseñador también quisiera un borde negro fino para todos los elementos. La propiedad “border” de las tablas HTML es muy básica no nos permite añadir colores. Una solución frecuente consistía en insertar la tabla actual dentro de otra, que consistía simplemente en una única celda con el fondo en color negro. Al modificar el margen interior y el color de fondo, y fusionar otras celdas más, el diseñador podía así crear una estructura visual basada en tablas con un cierto estilo.
Típica “plantilla” para una estructura basada en tablas tal y como se muestra en un navegador. Si quieres practicar un poco con tablas en tu editor, puedes encontrar un ejemplo en la carpeta HTML5_03lessons el archivo 03_table.html. CSS ha sustituido ya el empleo de tablas para organizar las páginas, por lo que los elementos de tabla de HTML van regresando, poco a poco, a su función original, que es la de mostrar datos
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 59 de 156
estructurados, y abandonan su papel como armazón visual de las páginas. Seguramente podrás seguir encontrando numerosos ejemplos de este tipo de estructuras en la web, pero en este libro no vas a aprender a crearlas, sino que vas a aprender los conceptos básicos de CSS que nos permiten obtener los mismos resultados.
Introducción a las distintas opciones de presentación de páginas Antes de la estructura visual de nuestras páginas web tenemos que decidir unas cuantas cosas. Lo primero es qué anchura va a tener. Hay dos categorías principales de estructuras en base a su anchura: las de anchura fija y las de ancho variable. En las estructuras de ancho fijo todos los elementos de la página se anidan dentro de un contenedor que tiene un ancho explícito (en este ejemplo utilizamos el valor de 960 pixels, pero se suele utilizar también la unidad de medida em). La anchura fija es una solución muy cómoda para el diseñador ya que permite ubicar con precisión los distintos elementos (cabeceras, barras laterales y pies de página). Además aporta un esqueleto robusto para otros elementos, como la anchura de párrafo o el posicionamiento de imágenes cuando éstas aparecen en gran número (por ejemplo en sitios web de catálogos de producto).
Las estructuras de ancho fijo indican explícitamente la anchura y ocupan un espacio definido dentro de la página web. Las estructuras flexibles se llaman así porque están pensadas para adaptarse a la anchura de la ventana del navegador en cualquier momento. Este tipo de disposiciones es útil cuando los usuarios acceden desde pantallas con resoluciones muy variadas, lo que hace imposible elegir un ancho fijo que ofrezca el mismo aspecto en todas ellas. Una estructura flexible bien diseñada es capaz de ajustarse automáticamente al tamaño de ventana del navegador.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 60 de 156
Las estructuras visuales flexibles se reajustan al cambiar el tamaño de la ventana del navegador. Estas estructuras son adecuadas para la web porque permiten el reposicionamiento en pantalla de textos e imágenes. Puesto que los dispositivos móviles suponen actualmente una proporción importante de los navegadores en uso en el mercado, las estructuras flexibles por lo general se prefieren para ofrecer una mejor experiencia en este nuevo tipo de interfaces frente a las estructuras de ancho fijo, que habitualmente tienen problemas por falta de espacio (sobre todo en teléfonos móviles). Las estructuras de ancho variable son más difíciles de diseñar y obligan al creador a resolver una serie de asuntos adicionales. Por ello, en esta lección vamos a empezar por crear una estructura de anchura fija.
El elemento : creación de una estructura CSS de dos columnas con anchura fija En esta práctica vamos a crear una estructura visual de anchura fija con dos columnas. Para empezar vamos a trabajar con una página sencilla que ya hemos preparado para ti. Esta página emplea una serie de elementos para generar su estructura de base. Podemos considerar al elemento como un contenedor genérico en el que podemos poner elementos relacionados entre sí de forma lógica. La apertura y cierre de etiquetas suele hacerse rodeando a otros elementos de la página, de forma que dichos elementos quedan anidados dentro del contenedor. Puedes tener en la misma página todos los elementos que consideres necesarios y con frecuencia se utilizan para crear el armazón visual. Un elemento suele llevar un atributo ID (con lo que adquiere un “nombre” explícito dentro de la página) o bien pertenecer a una clase CSS, utilizándose ambos como medio para aplicar al contenedor uno o más estilos CSS. El empleo de elementos facilita a otras personas la identificación de las diversas secciones en que se subdivide la página y también nos ayuda a controlar y aplicar estilos en cada una de ellas. En esta práctica vamos a utilizar el elemento div con identificadores ID de CSS.
1 En el editor de textos, desde el menú Archivo- Abrir, ve a la carpeta HTML5_03lessons y selecciona el archivo 03_layoutstart.html y pulsa Abrir
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 61 de 156
2 Guarda el archivo en el disco con el nombre 03_layoutwork.html. Así conservarás el archivo original como copia de seguridad. Esta página contiene una serie de elementos HTML con algún contenido que queremos mostrar en pantalla en ciertas posiciones. Analiza el código de la página para tratar de entender cómo se ha creado. Hemos incorporado algunos comentarios que te orientarán. La estructura de la página te la entregamos prediseñada. A lo largo de esta práctica vamos a ver en detalle cómo funciona. El primer paso consiste en saber cuál es la función de la etiqueta y el papel tan importante que representa en la organización visual de las páginas con CSS. 3 En el editor, encuentra la línea . Es el comienzo de una sección de la página en donde se anidan el resto de elementos. Por sí sola, una etiqueta no hace nada, que es algo que diferencia a esta etiqueta de las otras, ya que los demás elementos HTML, como los párrafos () o las listas (, , ), ejercen diversos efectos sobre sus contenidos. La etiqueta así como los párrafos y listas, entre otros, son elementos de bloque. Los elementos de bloque generalmente se insertan en las páginas en la línea siguiente al elemento previo. La etiqueta div suele asociarse bien con una clase CSS o con un ID, y con ello ya podemos aplicarles reglas individualizadas para controlar su aspecto. Antes de hacer esto vamos a echar un vistazo a la página tal y como se ve en el original. 4 Abre la página en el navegador. El archivo reset.css con el que hemos estado trabajando antes es el que hace que todos los elementos de la página aparezcan pegados unos a otros.
Esta página incluye una serie de secciones div y los estilos aplicables a los elementos HTML se han reseteado. Para ver cómo responden las etiquetas div vamos a aplicar estilo al elemento con el ID “wrap” de forma que tenga ancho fijo. Cierra el navegador y vuelve al editor de texto. 5 Encuentra la etiqueta que hemos añadido al documento. Inserta una regla de estilo para el ID llamado “wrap”. El siguiente código (destacado en rojo) es lo que tienes que escribir: #wrap { background-color:#E0B3B9; } Guarda el archivo y vuelve a abrir la página en el navegador. El div wrap incluye dentro a todos los demás elementos de la página, como se puede ver ahora que le hemos puesto un fondo de color morado. En este momento el div se extiende para cubrir toda la anchura de la pantalla. Es una presentación muy básica, que
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 62 de 156
sigue el modelo de ancho variable. Si cambias el tamaño de la ventana, verás que el texto se reorganiza. Ahora vamos a declarar una anchura fija para el div wrap. 6 En el editor de texto añade estas dos líneas de código (destacadas en rojo) a tu estilo #wrap: #wrap { background-color:#E0B3B9; width:960px; border:thin solid black; } Guarda la página y vuelve a visualizarla en el navegador. Ahora el div wrap ocupa 960 pixels de la página.
El div wrap ahora tiene una anchura de 960 pixels y un borde fino de color negro alrededor. También hemos cambiado el borde, para mostrar mejor los límites del div wrap. Resize your browser window again. The text no longer reflows, and if your browser window is narrower than 960 pixels, your content is cropped. When the browser window is wider than 960 pixels, the box defined by the wrap div is aligned to the left. There is a simple way to position this div so it will always be centered in the browser window. 7 Vuelve al editor y añade esta línea de código marcada en rojo: #wrap { background-color:#E0B3B9; width:960px; border:thin solid black; margin:0 auto; } Es una regla abreviada para el margen. El valor ‘0’ define los márgenes superior e inferior del div wrap, y el valor auto indica los márgenes derecho e izquierdo. El valor “auto” calcula automáticamente un margen igual a ambos lados del div wrap y de esta manera el cuadro queda centrado en pantalla (y permanece centrado aunque cambiemos el tamaño de la ventana). Guarda el archivo y visualízalo de nuevo en el navegador, para ver cómo funciona la regla abreviada. Cierra el navegador y vuelve al editor. Ahora vamos a trabajar con otros elementos div pero antes tenemos que aplicar un estilo básico a la cabecera. 8 En el editor de textos, inserta una imagen dentro del div llamado masthead — en este caso es el sitio donde pondremos el logo. Para empezar vamos a hacer que sea la imagen quien defina la altura del header añadiendo este código para insertar el archivo de imagen del logo que tenemos en la carpeta HTML5_03lessons. 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 Informáticos Página 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, añade el siguiente código que se aplicará a masthead: #masthead { background-color:#FFF; } Guarda el archivo y muéstralo en el navegador. Ahora todo el div masthead aparece con el fondo de color blanco, ya que se superpone al color del div wrap.
La sección masthead ahora tiene un logo y un color de fondo. 10 La sección de navegación va a exigir un trabajo más avanzado, iremos con ello más adelante en esta misma sección. De momento vamos a declarar unas cuantas reglas de estilo básicas para definir esta sección en la página. Pon el siguiente selector y sus reglas debajo de la regla #masthead: #mainnav { background-color:#666; height:40px } 11 Guarda la página y visualízala en el navegador.
La sección mainnav tiene ahora color de fondo y una altura definida. Estamos aplicando estilos a la página empezando por arriba y bajando hacia el final, y ya hemos llegado a la sección interna que contiene la barra lateral y el contenido. Vamos a ver cómo se crean columnas para su colocación mediante divs. La actual especificación CSS no tiene un elemento “columna”. Las “columnas”
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 64 de 156
como tales son divs con estilo que normalmente son más altas que anchas. Para ver cómo se consiguen representar en pantalla, tenemos que entender antes el concepto de la propiedad float de CSS.
La propiedad float CSS La propiedad float en CSS hace posible que un texto pueda escribirse alrededor de una imagen. Este estilo ha sido tomado del diseño de imprenta, donde a este efecto se le llama “justificación” del texto. CSS consigue el mismo efecto haciendo que los elementos que siguen a un elemento “flotante” puedan rodearlo, cambiando su posición relativa con respecto a él. Este comportamiento también nos sirve para crear columnas en una página. En la imagen de la izquierda hay un gráfico anidado dentro de un párrafo. El gráfico ocupa un espacio vertical completo y el texto posterior se empieza a escribir a partir de su esquina inferior derecha, ya que no se ha aplicado aquí la propiedad float. En la imagen de la derecha, los elementos son los mismos, pero hemos aplicado la regla float: right al gráfico. El gráfico se desplaza a la derecha todo lo que puede y el texto se escribe a su izquierda a partir del primer punto disponible de su contenedor (en este caso, la esquina superior izquierda del div contenedor).
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 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 también declarar como “left”. En el ejemplo anterior, la imagen pasaría al lado izquierdo del div contenedor, y el texto se empezaría llenando el lado derecho restante. Los únicos valores posibles para float son “left”, “right” y “none”. No se puede centrar un objeto utilizando esta propiedad. Si queremos tener múltiples elementos flotantes dentro del mismo contenedor, el resultado es que se alinean entre sí. Este comportamiento se suele utilizar en ciertas funciones habituales de las páginas web, como por ejemplo los menús horizontales o las galerías de imágenes. Es fundamental conocer cómo interactúan múltiples elementos flotantes unos con otros a fin de utilizarlos correctamente. Veamos este ejemplo: son seis imágenes dentro de un div de 360 pixels de ancho. Cada imagen tiene una anchura de 50 pixels y hay 10 pixels de margen (5 a la derecha y otros 5 a la izquierda). Al sumar los valores podemos ver que 6 × 50 son 300 pixels par alas imágenes, y 6 × 10 suman 60 pixels de margen. Por tanto, las imágenes junto con sus márgenes nos caben dentro del div, que tiene una anchura total de 360 pixels.
Si hemos declarado una anchura explícita para el contenedor, al añadir una nueva imagen hacemos que se posicione en la fila siguiente:
Esto nos puede servir, por ejemplo, para crear una galería de imágenes en miniatura, ¡pero no nos vale para un menú! En la práctica siguiente vamos como usar la propiedad float para crear una estructura de dos columnas.
Creación de columnas con la propiedad float Vamos a aplicar la propiedad float a los divs de contenidos sidebar y main para ver cómo les afecta. 1 Añade el siguiente selector y las reglas de estilo debajo de la regla #mainnav: #sidebar { float:right; width:300px; background-color:#CCC; }
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 66 de 156
Guarda la página y muéstrala en el navegador. La página aparece “rota”. Ahora vas a ver qué es lo que causa que la página salga “rota” como en este caso, ya que este efecto enseña cómo funciona la propiedad float. Aunque la página parece rota, los divs están realmente funcionando tal y como debe ser: cuando convertimos en flotante un elemento (en este caso el div sidebar), queda eliminado del flujo normal del HTML. Es por eso que la barra lateral se extiende por todo el contenedor. La barra lateral queda flotando, pero se superpone sobre los límites de otros elementos de la página. Ahora vamos a declarar como flotante al otro div, hacia el lado izquierdo, y vamos a ver cómo afecta eso a nuestra página. Vuelve al editor. 2 Añade este selector y las reglas de estilo debajo de la regla #sidebar: #main { width:600px; float:left; background-color:#ADA446; } 3 Guarda el archivo y vuelve a mostrar la página en el navegador. El div “main” flota hacia la izquierda, pero el “footer” sube a la parte superior siguiendo el curso o “flujo” de restitución de la página. Al hacer flotar este div hacia la izquierda hemos resuelto el problema de que parte de su contenido apareciera debajo de sidebar; a pesar de que por la cantidad de contenido que tiene el div main parte de él se sale del propio contenedor. También vemos que tenemos otro problema con el elemento footer: debería aparecer en la parte inferior de la página pero no es así. Para obligar al div footer a ponerse en la parte inferior de la página le vamos a asignar una nueva propiedad llamada clear.
La propiedad clear Cuando añadimos la propiedad CSS clear a un objeto, le estamos indicando una regla que dice “no admito elementos flotantes a mi lado”. Podemos especificar si queremos que no haya elementos flotantes a la izquierda, a la derecha o en ambos lados. En el caso del pie de página, queremos eliminarlos de ambos lados. 1 Añade este nuevo selector y sus reglas debajo de las reglas de #main: #footer { clear:left; background-color:#BA2B22; } 2Guarda el archivo y visualízalo en el navegador. Ahora el pie de página queda en la parte inferior del div main. Lo que hace la regla clear:left es impedir la presencia de elementos flotantes a su izquierda. El div main es flotante, por lo que el pie se mueve a la siguiente posición disponible. Cierra el navegador y vuelve al editor.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 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 evitaríamos, una forma más segura de resolver esta situación es asegurarnos de que no se van a colocar objetos flotantes ni a su derecha ni a su izquierda. 3 Cambia el valor de la propiedad clear así: clear:both; De esta forma nos aseguramos de que no habrá elementos flotantes en ambos lados del pie de página. 4 Guarda el archivo y vuelve a mostrarlo en el navegador. Verás que no cambia con respecto al paso 3 pero el pie de página ahora está mejor preparado para cambios futuros en el contenido.
Creación de un menú de navegación basado en listas con “float” Ahora que has aprendido los conceptos básicos de “float” y “clear”, volvamos a la sección de la barra de navegación y vamos a añadir un menú sencillo basado en una lista no ordenada (es decir, que sus líneas no llevan numeración, sino viñetas o signos). Los elementos de la lista dentro de este menú tendrán que ser flotantes para modificar la presentación vertical por defecto de las listas. Los menús de navegación CSS se utilizan mucho en el diseño basado en estándares porque se pueden actualizar y modificar de manera mu sencilla, y porque se basan en textos ( y no en imágenes), lo que mejora la accesibilidad en dispositivos como los lectores de pantalla, e incluso ayudan a mejorar el posicionamiento de nuestras páginas en los buscadores.
1 Desde el editor de textos, busca el div mainnav y añádele la siguiente lista no ordenada y estas líneas: Home Our Company Policies and Procedures Document Repository News & Events Los elementos de la lista son enlaces a páginas que todavía no existen. Pero necesitamos crear estos enlaces para que se apliquen correctamente los estilos que vamos a declarar ahora. 2 Guarda el archivo y visualízalo en el navegador.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 68 de 156
La lista aparece en la posición vertical por defecto y se superpone a la barra lateral. Fíjate que la página aparece otra vez como “rota”. Esto se debe a que la lista se está superponiendo a la barra lateral flotante. Además la lista no tiene los puntos (viñetas) indicadores. Recuerda que nuestra página está asociada a una hoja de estilo CSS de reset y una de sus reglas declara la propiedad list-style:none, que elimina los puntos indicadores en las listas. En el caso de este ejemplo, la falta de puntos es deseable, ya que vamos a utilizar la lista como menú de navegación. 3 Vuelve al editor y localiza la regla #mainnav. Añade una nueva regla entre ésta y la regla de la barra lateral pulsando Intro unas cuantas veces e insertando el código siguiente: #mainnav li { float:left; } Fíjate que en este paso estamos creando una nueva regla justo después de #mainnav. Aunque podríamos haber insertado la regla al final de la hoja de estilos, las buenas prácticas recomiendan que se pongan juntas las reglas que tienen relación entre sí para que el código esté más organizado y sea más fácil de mantener. Es un nuevo tipo de regla CSS llamada selector de contexto; se aplica exclusivamente a los elementos de lista que hay dentro del div mainnav. Si definiésemos una nueva regla para aplicarla a los elementos de lista (en general), afectaría a todos los elementos de lista de nuestra página, lo que no nos valdría para nuestro ejemplo, ya que queremos organizar visualmente solo esta lista. 4 Guarda la página y visualízala en el navegador. Todos los elementos aparecen ahora colocados en horizontal. Los enlaces casi no se ven porque hay muy poco contraste entre el enlace que se escribe en color azul oscuro y el gris oscuro del fondo de la sección “mainnav”, pero lo vamos a resolver añadiendo unas cuantas reglas de estilo más.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 69 de 156
Al declarar los elementos de la lista como flotantes, se colocan en sentido horizontal. 5 Vuelve al editor y añade este código a la regla #mainnav li: #mainnav li { float:left; width:170px; height:40px; background-color:#CCC; text-align:center; border-left:1px black solid; border-right:1px black solid; } En este código hemos hecho estos cambios: hemos definido el recuadro alrededor de cada elemento de la lista con una anchura de 170 pixels y una altura de 40 pixels. Hemos añadido un color de fondo, hemos alineado cada elemento al centro del recuadro y además, se dibujarán en pantalla los bordes verticales de cada recuadro con un trazo negro de 1 pixel. Guarda el archivo y visualízalo en el navegador. Al declarar la altura y la anchura del recuadro, el texto se pone de forma natural en la parte superior. Lamentablemente, aunque existe la propiedad text-align:center que nos permite centrar el texto en la vertical, no tenemos una forma fácil de centrar los objetos en la vertical con CSS. En este caso vamos a utilizar la propiedad line-height para mover hacia abajo el texto del interior. 6 Debajo de la declaración de border-right, añade esta línea de código: line-height:40px; 7 Guarda el archivo y muéstralo en el navegador, El texto aparece ahora centrado dentro del recuadro. Conviene notar que podemos tener problemas si en un futuro cambiásemos el texto de los elementos de la navegación, ya que tanto el valor de “line-height” como el tamaño del propio contenedor se basan en el tamaño de la fuente. Si cambiásemos el tamaño de la fuente o la altura de la sección “nav”, habría que volver a ajustarlo todo para compensar los desplazamientos.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 70 de 156
Añadiendo el valor line-height a los elementos de la lista se posicionan verticalmente dentro de la barra de navegación.
Añadir estilos para el texto Antes de seguir con nuestra estructura visual vamos a importar algunos estilos de texto basados en los que hemos creado en la Lección 2. Hasta aquí hemos añadido los estilos dentro de una hoja de estilos interna en vez de hacerlo sobre una externa. Cuando estamos diseñando la estructura de las páginas, el empleo de hojas de estilo internas es una cuestión de comodidad: resulta más sencillo para crear y modificar reglas si las tenemos dentro de la página y podemos llegar a ellas desplazando la ventana que si las tenemos en un archivo externo. De momento vamos a asociar una hoja de estilos externa que añade reglas de base para elementos como títulos, listas y párrafos.
1 En la parte inicial del archivo HTML busca la etiqueta de la hoja de estilos reset.css. Para añadir otra hoja de estilos externa, selecciona esta línea y pulsa Ctrl + C para copiarla. En la línea siguiente pulsa Ctrl + V para pegarla. Ahora cambia el nombre de archivo “reset.css” por el siguiente “base.css”: 2 Guarda el archivo y visualízalo en el navegador para ver cómo afectan estos nuevos valores a nuestra página. Ahora los titulares y el texto del cuerpo se escriben utilizando el tipo de letra MS Trebuchet y también se han aplicado algunos otros estilos. La página utiliza ahora una hoja de estilos externa para los elementos de texto. 3 Regresa al editor y selecciona el menú Archivo – Abrir. En la ventana que aparece, ve a la carpeta HTML5_03lessons, selecciona el archivo base.css y pulsa Abrir. Revisa los estilos que
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 71 de 156
incluye este archivo CSS. Los conceptos básicos para los tipos de letra y tamaños ya los vimos en la Lección2. Mantén abierto el archivo, porque lo vamos a modificar dentro de un momento. Existen algunas propiedades CSS adicionales aplicables a las fuentes, como “font-weight”, “texttransform” o “letter-spacing”. Si quieres más información e instrucciones paso a paso para utilizar técnicas avanzadas de estilos para texto, puedes leer la Lección 3 “Formateo de Textos con CSS” en el libro “HTML5 Digital Classroom”.
Efecto de los márgenes internos y externos en una estructura de anchura fija En esta sección vamos a separar las secciones de texto de nuestra página (que en este momento tienen márgenes de cero pixels, por efecto de la hoja de estilos de reset). Vamos a ver ahora algunas estrategias para controlar la estructura visual de la página. El objetivo de esta práctica no consiste en mostrar un método único de organización con CSS, sino en conocer las diferentes opciones posibles, lo que te ayudará en futuros proyectos a la hora de decidir qué método es el más adecuado en cada caso. En este primer ejercicio vamos a añadir un margen interior (“padding”) al elemento sidebar.
1 En el editor de texto, abre el archivo 03_layoutwork.html y visualiza la pantalla en el navegador. Verás que el texto de la barra lateral está pegado al borde, quedaría mejor si estuviera un poco separado.
El texto aparece pegado al borde izquierdo de la barra lateral. El ancho de esta barra lateral está declarado como 300 pixels. Básicamente podemos separar el texto del borde izquierdo de dos manera: la primera consiste en utilizar el valor de margen interior o “padding” del contenedor y la segunda, utilizar el margen externo de los objetos contenidos. Vamos a ver ahora los pros y contras de ambas técnicas, empezando por el padding. 2 Vuelve al editor, localiza la regla para el “sidebar” en el código CSS y añade esta línea:
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 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 separación o margen interior con respecto al borde superior. El segundo valor (20px) corresponde a la separación con respecto al margen derecho. El tercero (0px) es la separación con respecto al borde inferior y el ultimo (20px) es el margen interior de separación aplicable al borde izquierdo. Guarda la página y visualízala en el navegador.
Añadiendo un margen interior (“padding”) de 20 pixels a la derecha e izquierda de la barra lateral el ancho total del contenedor aumenta en 40 pixels. Al añadir 20 pixels de espacio interior a la derecha e izquierda del div sidebar, aumentamos en 40 pixels la anchura de la columna. En efecto, vemos que la columna ahora es más ancha, justo esos 40 pixels, es decir, que ahora mide 340 pixels: 300 vienen de la propiedad “width” de la regla CSS correspondiente y otros 40 más del padding que acabamos de añadirle. Como veremos ahora, es sencillo de hacer pero nos genera otro tipo de problemas que podremos comprobar en seguida. 3 Vuelve al editor. Añade una cantidad de margen interno al div main porque también necesitamos separa el texto del borde en esa parte de la página. Encuentra la regla #main y añade el siguiente valor de padding: #main { width:600px; float:left; background-color:#ADA446;
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 73 de 156
padding:0px 20px 0px 20px; } Guarda el archivo y muéstralo en el navegador: aparece un problema nuevo. La anchura total de las dos columnas, ahora que hemos añadido el padding, es mayor que la del contenedor donde están anidadas. Podemos ver que el div main se ha desplazado hasta el único sitio donde puede desplegarse por completo, que es debajo de sidebar. Podemos resolver esto de varias formas: podemos aumentar la anchura total del div wrap, podemos reducir el ancho de sidebar o de main (o ambos), o también podemos reducir el valor del margen interno. Todos estos métodos se basan en el uso de “padding” y existe un método alternativo que nos permite separar el texto del borde de las columnas y que no utiliza el padding en absoluto. Ahora lo vemos. 4 Vuelve al editor y localiza las reglas de margen interno que has añadido en los pasos 2 y 3. Selecciónalas y elimínalas. Vamos a conseguir un efecto equivalente pero añadiendo reglas de margen a los elementos de texto dentro de las columnas en el paso siguiente. 5 Debajo de la regla #footer del código CSS, añade esta regla nueva: p, h1, h2, h3 { margin-left:20px; margin-right:20px; } Esta regla añade un margen de 20 pixels a la derecha y la izquierda de todos los párrafos y títulos de la página. Guarda el archivo y visualízalo en el navegador.
Si añadimos márgenes a los elementos dentro de la barra lateral, aumenta la separación con respecto al borde pero no se incrementa el tamaño del contenedor. Como veíamos en el ejemplo anterior con el margen interno, el resultado es un espacio adicional entre el texto y el borde de las columnas. La diferencia esencial es que cuando añadimos margen externo a los elementos de
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 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 distribución en pantalla con tanta facilidad como cuando utilizamos el valor de padding. Pero esta técnica también tiene sus desventajas, puesto que las reglas que acabamos de crear se van a aplicar a todos los párrafos y títulos de nivel 1, 2 y 3 de la página. Por ejemplo, verás que el texto del pie de página se ha desplazado también 20 pixels a la derecha porque su contenido es un párrafo. En el caso de que solo queramos aplicar el margen a los elementos dentro de los divs “sidebar” y “main”, nos vendrá muy bien el selector de contexto que ya hemos utilizado antes. 6 Vuelve al editor y borra las reglas para margin-left y margin-right que has añadido en el paso 5 (pero deja la regla tal cual). Añade ahora este grupo de reglas: p, h1, h2, h3 { } #sidebar p, #sidebar h2, #sidebar h3, #main p, #main h1, #main h2, #main h3 { margin-left:20px; margin-right:20px; } Se trata de una regla CSS abreviada que agrupa los estilos para los elementos de párrafo, heading 1, heading 2 y heading 3 que puedan existir en los elementos cuyo ID sea “sidebar” y “main”, que, como recordarás de la Lección 2, se indica precediendo el nombre de ID con el símbolo de la almohadilla (#). A todos estos elementos se les aplicarán márgenes de 20 pixels a la derecha y la izquierda, lo que equivale a restarles un total de 40 pixels de anchura para su despliegue en pantalla. 7 Guarda el archivo y ábrelo con el navegador. Prácticamente no veremos cambios excepto en el pie de página, que queda de nuevo totalmente pegado al lado izquierdo. Puedes pensar que el cambio es poca cosa, pero ahora nuestro archivo está preparado para cambios futuros. Cierra el navegador y vuelve al editor. Este método exige algo más de atención a los detalles que el método basado en el margen interno. Por ejemplo, si queremos insertar nuevos elementos dentro de un div, tendremos que crear reglas nuevas para ellos (por ejemplo una imagen o una tabla se verían pegados a la izquierda, otra vez). También puede que desees que alguno de los elementos tenga un margen distinto. Por ejemplo, que quieras indentar los párrafos dentro de la columna “main” hacia la derecha. En tal caso, habrá que añadir otra regla expresamente para los elementos p del div #main, como se indica en el paso siguiente. 8 Añade una nueva regla justo debajo de la regla anterior, donde aparecían todos los elementos: #sidebar p, #sidebar h2, #sidebar h3, #main p, #main h1, #main h2, #main h3{ margin-left:20px; margin-right:20px; } #main p { margin-left:30px; } 9 Esta regla sobrescribe parcialmente la que habías creado en el paso 6. Guarda el archivo y visualízalo en el navegador. Los párrafos dentro de la columna “main” ahora tienen un margen a la izquierda de 30 pixels, y en contraste con el resto de los elementos, aparecen indentados.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 75 de 156
Los párrafos del div “main” tienen reglas explícitas con un margen de 30 pixels. Excepto en el caso de los cambios que hemos hecho en esta práctica, todos los demás márgenes internos y externos de los elementos se han dejado en cero, en aplicación de la hoja de estilo de reset. Para aumentar la separación del resto de elementos podemos utilizar el grupo de reglas que hemos creado hace un momento. 10 Encuentra la regla vacía para los elementos p, h1, h2 y h3 en tu hoja de estilos. Modifica la regla así: p, h1, h2, h3 { margin-bottom:20px; } Guarda la página y ábrela con el navegador. Ahora, casi todos los elementos se separan un poco más unos de otros, al añadirse espacio a sus bordes inferiores. Podemos seguir afinando todos estos valores para mejorar el aspecto de la página, por ejemplo insertando un margen superior al título 2 de la barra lateral, lo que podemos hacer con el código del paso siguiente: 11 En el editor de texto, añade esta regla debajo del grupo de reglas para #main y #sidebar: #sidebar h2 { margin-top:15px; } Guarda de nuevo el archivo y muéstralo en el navegador. Ahora el título h2 de la barra lateral queda más separado del borde superior del contenedor.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 76 de 156
Después de aplicar un margen superior de 15 pixels al título h2 de la barra lateral.
Repaso al uso de márgenes internos y externos En esta lección hemos visto dos métodos para separar los elementos dentro de una página. El primero consiste en añadir margen interno (padding) al elemento div contenedor. En este caso la ventaja es que todos los elementos dentro de este div se ven afectados al mismo tiempo, es una solución rápida y eficiente. Su desventaja es que aumenta la anchura total del propio contenedor. Para compensar esta expansión, tenemos que dejar algo de espacio adicional a los lados. Este comportamiento puede generar cierta confusión y provocar que las páginas se restituyan incorrectamente si no tenemos cuidado. El segundo método consiste en añadir márgenes externos a los elementos que están dentro del propio div. Su desventaja es que necesitamos más código y hay que prestar atención a los detalles, tenemos que ir viendo cómo se posicionan los elementos individualmente. Su ventaja es que el posicionamiento de la columna es más predecible, puesto que solo tenemos que tener en cuenta una anchura total. Finalmente, conviene destacar que lo habitual es aplicar una combinación de ambos métodos en cualquier estructura de presentación. Por tanto, debes conocer bien el comportamiento y los efectos de cada uno de ellos.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 77 de 156
Aplicar una imagen de fondo al pie de página Hasta ahora nuestra estructura de página muestra los colores de fondo que hemos declarado a los elementos div. En esta práctica vas a aprender a insertar imágenes. Para ello empezaremos por añadir una imagen de fondo al pie de página mediante CSS.
1 Localiza el div #footer y sustituye todo el contenido de texto que hay dentro por este que aparece aquí : Copyright Worldwide Apparel 2011 All content on this site is confidential and should not be shared with anyone outside of Worldwide Apparel. 2 Guarda la página y ábrela en el navegador. A cada uno de los párrafos se le aplican las reglas de párrafo descritas en la hoja de estilos. Ahora vamos a añadirle una imagen de fondo a todo el contenedor div. Es una imagen de 960 pixels de ancho y 128 de alto. 3 En la hoja de estilos interna, encuentra la regla para el pie de página (“#footer”). Añade una nueva regla para aplicar una imagen de fondo indicando un archivo de la carpeta de imágenes de tu equipo: #footer { clear:both; background-color:#BA2B22; background-image:url(images/footer_background.jpg); background-repeat:no-repeat; }
Guarda la página y vuelve a mostrarla en el navegador. El pie de página tiene ahora una imagen de fondo por aplicación de una nueva regla CSS. La imagen de fondo ahora aparece detrás de los textos. Fíjate en la propiedad background-repeat del código anterior. CSS, por defecto, considera a las imágenes de fondo como “baldosas” que se van añadiendo sin límite hasta llenar todo el espacio del objeto al que pertenecen. Al indicar el valor no-repeat nos aseguramos que la imagen solo se muestra una vez. Las dimensiones del pie de página deben ser tales que nos permitan ver la imagen correctamente, tal y como veremos en el paso siguiente. 4 Modifica la regla para el pie de página añadiendo las líneas en rojo: #footer { clear:both; background-color:#BA2B22; background-image:url(images/footer_background.jpg); background-repeat:no-repeat; width:960px;
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 78 de 156
height:128px; } Guarda el archivo y vuelve a mostrar la página en el navegador. Ahora el tamaño de la zona de pie de página coincide con el tamaño de la foto. El paso siguiente consiste en ajustar los estilos del texto que va dentro, separándolos. 5 En el editor de texto, encuentra la regla #footer y justo debajo añade esta otra regla para párrafos, que se aplicará únicamente a los párrafos del footer: #footer p { margin:10px 0px 0px 20px; width:280px; font-family:Verdana, Geneva, sans-serif; font-size:0.689em; } Esta regla añade un margen superior de 10 pixels y margen izquierdo de 20 pixels a ambos párrafos del pie. Al definir la anchura de los párrafos podemos forzar un salto de línea en el punto aproximado que nos interesa: dentro del espacio en blanco que nos deja la foto. Las propiedades “font-family” y “font-size” nos ayudarán a conseguir un efecto más atractivo con un tipo de letra más pequeño. 6 Guarda la página y visualízala en el navegador.
Los párrafos de texto del pie de página con los nuevos estilos. En la sección anterior hemos visto cómo se utilizan los márgenes internos y externos, es una técnica muy habitual. Podríamos haber añadido algo más de espacio entre el primer párrafo y el borde superior del pie de página, pero al aumentar el margen superior en la regla #footer p estamos añadiendo espacio también al segundo párrafo. En este caso, lo conveniente es añadir margen interior al div “footer” tal y como se indica en el paso siguiente. 7 Añade la declaración que aparece en rojo a la regla #footer: #footer { clear:both; background-color:#BA2B22; background-image:url(images/footer_background.jpg); background-repeat:no-repeat; width:960px; height:128px; padding-top:10px; }
Ajuste fino de la estructura visual de la página Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 79 de 156
Podemos aplicar colores de fondo y/o bordes a los elementos principales de nuestra estructura en las primeras fases del diseño, lo que nos ayudará a ver mejor sus límites. Después, si no queremos conservarlos, podemos eliminarlos y la estructura seguirá funcionando sin problemas. Ahora vamos a eliminar los colores de fondo de los divs del centro de la página, añadiremos algunas imágenes de fondo y mejoraremos algo el estilo de nuestra barra de navegación. 1 Elimina toda la propiedad background-color en las siguientes 4 reglas de estilo: #wrap, #sidebar, #main y #footer. Guarda el archivo y visualízalo en el navegador.
Los mismos elementos estructurales una vez eliminados los colores de fondo. 2 Aunque nos vamos aproximando a un diseño de página unificado, aún tenemos que hacer unas cuantas cosas más. Vamos a empezar por poner un fondo de gradiente de color a la barra lateral. La mejor forma de hacerlo es mediante la inserción de una imagen de fondo. Vuelve al editor y añade estas declaraciones a la regla #sidebar: #sidebar { float:right; width:300px; background-image:url(images/sidebar_bg.png); background-repeat:repeat-x; } Como hicimos en la práctica anterior con el pie de página, ahora estamos añadiendo una imagen de fondo desde CSS a este elemento div. pero en este caso el valor de background-repeat ahora es “repeat-x”. Esto provoca que la imagen se repita en sentido horizontal (el eje X). 3 Añade también esta otra declaración para aplicarla al borde Izquierdo de la barra. Nos va a ayudar a delimitar mejor la separación con respecto al contenido del área principal (“main”).
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 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 muéstralo en el navegador.
La barra lateral tiene ahora un gradiente de color como imagen de fondo y un borde en el lado izquierdo. 4 Otro problema de nuestra estructura es el logo dentro de la cabecera. En este momento está anidado y se presenta en pantalla pegado al borde del contenedor. Podemos separarlo un poco creando una regla específica para imágenes dentro del div “masthead”. Encuentra la regla #masthead y añádele esta línea justo debajo. #masthead img { margin-left: 20px; } Se trata de un selector contextual igual que otros que hemos ido añadiendo a los títulos y párrafos dentro de las columnas “main” y “sidebar”. En este caso, se trata de una declaración para añadirle margen por la izquierda a todas las imágenes que puedan aparecer en el div “masthead”. Lo último que nos quedaría por hacer es mejorar la apariencia de la barra de navegación. En este momento estamos empleando unos estilos muy rudimentarios. Ahora los vamos a mejorar para ponerla a la altura del resto de nuestra página y además le vamos a añadir algo de interactividad.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 81 de 156
5 Para mejorar la presencia visual de los enlaces dentro de la sección “mainnav” vamos a añadir una regla explícita para los enlaces. Encuentra la regla #mainnav li y añade la siguiente regla justo debajo de ella: #mainnav ul li a { color:#ffffff; text-decoration: none; display:block; } La declaración text-decoration elimina el subrayado del vínculo y le cambia el color a blanco. La declaración display:block hace que estos elementos de navegación llenen por complete todo el espacio de la barra de navegación. Entenderás mejor qué significa esto cuando creemos un efecto dinámico que se activará al pasar el ratón por encima, en el paso siguiente. Guarda el archivo y visualízalo de nuevo en el navegador.
La barra de navegación con enlaces, después de eliminar el subrayado 6 Cuando el usuario pasa el cursor por encima de los enlaces, sería interesante que cambiasen su apariencia, así sabe que se trata de vínculos y no de texto normal. Para ello podemos aprovechar una particularidad de los estilos que solo tienen los vínculos. Justo debajo de la regla #mainnav ul li a , añade esta otra: #mainnav ul li a:hover { background-color:#666666; color:#D2CD2F; }
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 82 de 156
Los enlaces poseen una categoría exclusiva llamada pseudoclases. Hay cuatro estilos asociados a los vínculos, que son a:link, a:visited, a:hover y a:active. No es obligatorio aplicar estilos a los cuatro, por ejemplo aquí hemos creado estilos para a:hover que modifican el aspecto de todos los enlaces de la barra de navegación cuando tienen encima el cursor. La pseudoclase a:visited se aplica al vinculo después de que el usuario ha pulsado sobre él, y la pseudoclase a:active modifica su aspecto cuando le estamos pulsando con el botón. 7 Guarda el archivo y muéstralo en el navegador. Pasa el cursor por encima de los enlaces para ver los cambios. Es el resultado del estiloa:hover.
Al pasar el ratón sobre los enlaces de la barra de navegación se dispara el estilo a:hover. Ya has completado las prácticas de esta lección. Hemos visto la diferencia entre las estructuras basadas en tablas y en CSS. Además has aprendido el uso de las propiedades float y clear para crear columnas dentro de la página. También hemos visto las ventajas y desventajas del uso de márgenes externos (“margin”) e internos (“padding”) a la hora de definir el aspecto de los objetos dentro de los contenedores. EL diseño de estructuras visuales de las páginas web es un tema muchísimo más amplio, si tienes interés en conocer más a fondo las técnicas avanzadas para diseño de páginas Web, te recomiendo que leas el libro "HTML5 Digital Classroom" y más concretamente, el capítulo “Lección 5: Diseño avanzado con CSS”.
Autoestudio 1 Para seguir practicando con márgenes internos y externos, añade otros contenidos a la sección “main”. Por ejemplo, puedes añadir un título de nivel 3 y una lista no ordenada entre los dos párrafos: Quick Links New Employee Forms Flexible Spending Plans 401K paperwork Employee Discounts 2 Después de añadir este código, utiliza los conocimientos adquiridos en esta lección para experimentar con la colocación de estos elementos dentro de la página.
Repaso Preguntas Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 83 de 156
1 ¿En qué consiste un diseño de anchura fija y un diseño de ancho variable?. ¿Qué ventajas y desventajas presentan cada uno de ellos? 2 ¿Qué hace la propiedad float de CSS y cuándo conviene utilizarla? 3 Tu compañero ha añadido un párrafo al div sidebar que ha creado. El párrafo está pegado al borde mismo de la barra lateral. Indícale dos técnicas que puede emplear para separar un poco el párrafo con respecto a los bordes del contenedor
Respuestas 1 En un diseño de anchura fija, el contenedor primario tiene una anchura absoluta (declarada generalmente en pixels o ems) . Una de las ventajas principales de este tipo de diseños es que es más fiable a la hora de colocar los demás elementos. Su desventaja más importante es que no altera su tamaño al cambiar las dimensiones de la ventana del navegador, y algunas funciones como la reorganización de los textos, se pierden. Las estructuras de diseño de ancho variable modifican sus dimensiones dependiendo de la pantalla o dispositivo, pero suponen un trabajo más complicado para el diseñador. 2 La propiedad CSS float permite eliminar cualquier elemento dentro del flujo HTML por defecto y moverlo (o “hacerlo flotar”) pegándolo a la derecha o a la izquierda del contenedor donde está situado. Podemos utilizar la propiedad float cuando queremos que el texto se organice alrededor de imágenes, para crear menús de navegación horizontales o utilizar diseños de página en columnas. 3 Tu compañero puede añadir un valor de margen interno (“padding”) a la barra lateral, lo que hará que todos los contenidos se separen automáticamente del borde. También puede añadir una regla para los párrafos dentro del div y aplicar en ella unos valores de margen que separen los textos con respecto al borde. Y por supuesto, puede utilizar una combinación de márgenes internos y externos.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 84 de 156
Lección 4: Uso de las etiquetas HTML5 Objetivos: En esta lección aprenderás cómo se actualizan las páginas HTML ya existentes para utilizar los elementos de división en secciones y otros elementos nuevos de HTML5.
Para empezar Vas a trabajar con algunos archivos que se encuentran en la carpeta HTML5_04lessons a lo largo de esta lección. Comprueba que has descargado y copiado la carpeta de prácticas de HTML5 en tu ordenador. Para poder tener vistas previas precisas del contenido HTML5 que vamos a crear en esta lección, deberás utilizar un navegador web compatible con las etiquetas más importantes de HTML5, por ejemplo Internet Explorer 9. A lo largo de las siguientes secciones irás aprendiendo que muchos navegadores antiguos no soportan las etiquetas de HTML5. Uno de los objetivos de este capítulo es mostrarte estos problemas y enseñarte a resolverlos.
Una revisión de las etiquetas de semántica En esta sección vamos a ver algunos de los nuevos elementos que se han incorporado al lenguaje HTML5. Para poder completar esta lección correctamente tienes que conocer bien los fundamentos de HTML y CSS y tener experiencia previa en la creación de páginas web con estos lenguajes. La lección comienza con una breve introducción a las etiquetas de semántica (“semantic markup” en la literatura en inglés), que es una manera formal de decir “elige en todo momento la etiqueta más adecuada para el fin que pretendes”. Una explicación más técnica del concepto de etiquetado semántico es que se trata de una sintaxis que pueden entender tanto los seres humanos como los programas, por ejemplo un navegador o un buscador. Las etiquetas de semántica tratan de dar un sentido explícito a los contenidos, a menudo con el uso de etiquetas. A priori, la elección de las etiquetas correctas parece una idea muy buena. Por ejemplo, pensemos en los títulos de HTML, de los cuales tenemos 6 niveles: , , , , , y . Si los presentamos en un navegador, vemos que el elemento es el de mayor tamaño, y el más pequeño.
Los 6 elementos de título mostrados según los estilos por defecto, por orden de importancia. El contenido dentro de un elemento debería tener mayor importancia que otro dentro de un elemento . Por la misma razón, si se indica un estilo de letra para los títulos, el tamaño de letra Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 85 de 156
de un elemento debería ser mayor que el de un elemento . No hay ninguna razón de tipo técnico que impida la creación de un estilo para que le haga tener un tamaño más grande que . Desde el punto de vista del navegador web, no hay diferencia, pero cuando un ser humano examina el código por primera vez su semántica le puede causar confusión: un elemento “título de tercer nivel” supuestamente debería tener un tamaño más pequeño que otro de primer nivel. Uno de los objetivos del etiquetado semántico es conseguir que el código de las páginas sea lógico y coherente. Un código consistente y basado en conceptos lógicos es más sencillo de actualizar y modificar para un diseñador, y hace que la página sea más flexible y adaptable a otros usos, por ejemplo para acceder desde dispositivos móviles. El etiquetado semántico nos garantiza que incluso en las páginas sin estilos puedan verse todos los elementos de manera comprensible y utilizable.
Fundamentos de HTML5 Antes de crear una página HTML5 vamos a ver las distintas categorías de contenidos dentro de un documento HTML. Aunque los cambios que introduce HTML5 son numerosos, los conceptos esenciales de HTML y XHTML no han cambiado gran cosa. Un desarrollo interesante es que la sintaxis en HTML5 es menos estricta, sobre todo si se compara con la de XHTML 1.0. Por ejemplo, en HTML5 nos encontramos con estas situaciones: •
En HTML5 no se diferencia entre mayúsculas y minúsculas, es decir, podemos utilizar etiquetas en mayúsculas, en minúsculas e incluso mezclarlas ambas y la página sigue siendo válida. Así, el código siguiente es técnicamente válido: Ultimas noticias desde Madrid
•
No se exigen las etiquetas de cierre de los elementos. Por ejemplo, se admite la inserción de múltiples párrafos de esta forma: Ha habido un accidente en la autopista A2 entre Madrid y Alcala. Los conductores deberán utilizar rutas alternativas. La velocidad está limitada a 90 Kms/h.
•
Las comillas en los atributos son opcionales. Por ejemplo, se da por válido este código: A primera vista, estas reglas parece que favorecen ciertas prácticas de programación poco coherentes. Si es así ¿por qué HTML5 las permite? La respuesta la resumen muy bien los arquitectos de HTML5 como un intento de “pavimentar el sendero” a los desarrolladores. Es una metáfora traída del mundo agrario, donde un granjero podría esperar a ver por dónde pasean los animales y, una vez han definido el sendero preferente, entonces procederá a pavimentarlo, en lugar de empezar por poner los adoquines primero, con el riesgo de que las reses acaben eligiendo otro camino distinto. En el mundo del desarrollo web, esta metáfora se traduce en que cuando una práctica ha sido adoptada de forma general por parte de los desarrolladores y diseñadores es el momento de “aceptarla como buena en vez de prohibirla o inventar algo diferente”. En HTML5 se pone especial empeño en mantener la compatibilidad con versiones anteriores, y muchas de las prácticas mencionadas antes (como es el uso de etiquetas en mayúsculas o no cerrarlas adecuadamente) se utilizaban en la creación de documentos en los primeros tiempos de la Web. El W3C decidió integrar estas prácticas de codificación tan dispersas dentro de la
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 86 de 156
especificación para asegurarse de que los navegadores del futuro podrían seguir mostrando el mayor número posible de páginas publicadas a día de hoy. Si quieres conocer una explicación más detallada de la filosofía aplicada por el W3C a los Principios de Diseño de HTML, visita http://www.w3.org/TR/html-design-principles/. ¡Pero cuidado!: el que HTML5 permita este tipo de sintaxis relajada no significa que debamos adoptar semejantes malas prácticas. A lo largo de este libro te iremos orientando para que programes como si lo hicieras en XHTML 1.0, cerrando los elementos, empleando minúsculas y añadiendo comillas a los atributos, porque creemos que siguen siendo buenas prácticas a mantener. Si empleamos una forma coherente y estándar a la hora de programar, reduciremos la probabilidad de errores y podremos aislar la fuente de cualquier problema si aparece.
La declaración DOCTYPE de HTML5 Un cambio notable en la especificación de HTML5 ya se puede ver en la primera línea de cualquier documento HTML5. Un navegador web restituye las páginas desde el principio avanzando hacia el final del documento. La línea inicial de la mayoría de los archivos HTML es la que se llama DOCTYPE, que le indica al navegador el tipo de documento que tiene que traducir. Por ejemplo, cuando un diseñador utiliza la versión transicional de HTML (4.0.1), la declaración DOCTYPE es: Si utiliza la versión estricta de XHTML 1.0, la misma declaración se queda en: En HTML5 la declaración DOCTYPE es bastante más sencilla: DOCTYPE sirve para validar documentos. Los navegadores actuales y futuros pueden comprobar la sintaxis de documentos que se declaran a sí mismos como HTML. Cualquier incorrección sintáctica (por ejemplo una etiqueta mal escrita o un atributo que falta), devuelve un error. La validación es un proceso opcional, pero los diseñadores y los desarrolladores lo utilizan mucho para detectar posibles fallos en el código o elementos que puedan faltar. Si es preciso, puedes volver a consultar los detalles de la validación de páginas que vimos en la Lección 2 “Conceptos básicos de HTML, XHTML y CSS” En esta práctica vamos a convertir una página HTML antigua en HTML5. El documento está escrito en HTML 4.01, así que tenemos que modificar la declaración DOCTYPE y utilizar la de HTML5, más corta. En el editor de texto, abre el menú Archivo – Abrir y ve a la carpeta HTML5_04lessons. Selecciona el archive E04_index.html y pulsa Abrir. Guarda el documento con otro nombre para asegurarte de que conservas una copia de seguridad: en el menú Archivo, selecciona Guardar como y lo guardas en disco con el nombre 04_index_work.html, dentro de la misma carpeta HTML5_04lessons. 1 Visualiza la página en tu navegador para comprobar el aspecto que tiene en este momento. Es, básicamente, el diseño que hemos creado al final de la Lección 3 y se clasifica como una estructura de dos columnas de anchura fija. SI no has estado trabajando recientemente con el diseño de las páginas web, debes repasar un poco su estructura interna: tenemos un elemento DIV con el atributo ID #wrap que contiene a los demás
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 87 de 156
elementos div que componen la estructura de la página. El estilo CSS para este grupo de DIVs establece una anchura de 960 pixels y unos márgenes a derecha e izquierda, con el valor “auto” para que el contenedor quede centrado en la ventana del navegador.
El elemento DIV identificado con el ID “wrap” tiene una anchura de 960 pixels y contiene al resto de secciones. Un cambio que tendremos en esta lección con respecto al diseño creado en la Lección 3 es que hemos sacado todos los estilos internos del archivo 03_layout_work.html a una hoja de estilos CSS externa, llamada base.css. 2 Cierra el navegador y vuelve al editor. Selecciona toda la declaración en las dos primeras líneas y bórrala. Escribe en su lugar esto: 3 Guarda el archivo y ábrelo en el navegador. Verás que no hay cambios, pero el navegador reconoce este archive como HTML5, no como HTML 4.01. 4 Cierra el navegador. Vamos a sustituir algunos de los elementos DIV por elementos HTML5 nuevos, pero antes tenemos que ver cómo se clasifican en HTML5 los distintos tipos de contenidos.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 88 de 156
Las distintas categorías de contenido utilizadas en HTML5 Podemos dividir el contenido de una página web en varias categorías que, en su mayor parte, no son novedades de HTML5, pero que nos ayudan a entender cómo se organiza internamente la información. • • • • • • •
Metadatos Flujo Secciones Títulos Textos Contenidos embebidos Contenidos interactivos Estas categorías son útiles a la hora de agrupar elementos dentro de una página. Por ejemplo, la categoría de información de flujo describe todos los elementos que podemos utilizar en el cuerpo de una página, pero podemos subdividir el contenido de flujo en categorías más pequeñas, como titulares o textos.
Metadatos A la información que establece el modo de restitución o el comportamiento del resto del contenido de la página se le denomina Metadatos. Los metadatos se pueden utilizar también para establecer la relación entre este documento y otros documentos. Un ejemplo obvio de metadatos es lo que aparece dentro de los elementos , que suelen contener una descripción de la información contenida dentro de la página, o palabras clave y que los motores de búsqueda utilizan para clasificar las páginas. Otros elementos como y se consideran también metadatos puesto que intervienen en la presentación y actividad del contenido principal. Los metadatos se ubican en la sección del documento: Worldwide Apparel Intranet
Flujo Por “flujo” entendemos los elementos que se consideran propiamente el contenido de una página web, o dicho de otra forma, todas las etiquetas utilizadas para definir contenidos entran dentro de esta categoría, como por ejemplo, , , , , etc. El contenido de flujo normalmente es texto o un archivo insertado, como una imagen o un vídeo. En HTML5 aparecen algunos elementos nuevos dentro de esta categoría, como , , , , y algunos más. Esto es un contenido de flujo 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.
Secciones Es una nueva categoría de HTML5 y actualmente incluye cuatro elementos: , , y . El W3C define el contenido de Secciones como aquellos elementos que “definen
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 89 de 156
el alcance de cabeceras y pies de página”. El contenido de las secciones es un subconjunto del contenido de flujo. Veremos más adelante en esta misma sección cómo se distribuye una página en secciones. Las definiciones de las secciones y otras categorías se pueden consultar en la web: http://dev.w3.org/html5/spec/content-models.html Volunteer Opportunities Sort and inspect home goods and supplies for kids.
Títulos Los títulos contienen todos los elementos de encabezamiento que ya se vienen utilizando en HTML 4.0: , y sucesivos. HTML5 incorpora además el elemento , pensado para agrupar dos o más títulos. El contenido de titulares forma parte del contenido de flujo. Top Rated Smoothies The Funky Orange
Contenido de textos Engloba todo el texto del documento, incluyendo los elementos delimitadores de texto dentro de los párrafos. El contenido de texto es un subconjunto del contenido de flujo. La ventaja de tener unas buenas botas de montaña se pone de manifiesto especialmente a partir del tercer día de caminata.
Contenidos embebidos Los contenidos embebidos son aquellos que se importan de otros recursos dentro de la página, como son imágenes, vídeos o archivos para descargar.
Contenidos interactivos Uno de los elementos más básicos, como es la etiqueta (utilizada en los vínculos), se la considera un elemento interactivo. Otros elementos han sido creados específicamente para dar cabida a la interacción con el usuario, y también se incluyen en esta categoría. Por ejemplo, elementos o que se utilizan en los formularios. Botón con código Javascript asociado al acto de pulsar. En el ejercicio siguiente vas a aprender a utilizar algunos de los nuevos elementos de HTML5 convirtiendo una estructura basada en divs en otra que aplique los nuevos elementos de sección y algunas de las etiquetas propias de esta versión.
Uso del nuevo elemento header en HTML5 Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 90 de 156
La especificación HTML5 extiende el conjunto actual de elementos que se usan actualmente para que el desarrollador y el diseñador puedan disponer de unas opciones de etiquetado semántico más precisas. Un ejemplo es el elemento utilizado para dividir una página en secciones. La etiqueta de apertura 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 no dice nada. Los diseñadores y desarrolladores le otorgan un significado al añadirle un ID o nombres de clases, pero estos nombres son arbitrarios y no tienen significado alguno para el navegador. Uno de los objetivos de HTML5 es, precisamente, incorporar nuevos elementos que tengan un sentido concreto dentro de la estructura interna del documento. En esta práctica vamos a analizar la estructura abriendo un archivo que utiliza el marco HTML actual y lo vamos a convertir en una página HTML5. 1 En el editor de textos, abre el menú Archivo – Abrir y ve a la carpeta HTML5_04lessons, selecciona el archivo base.css y pulsa en Aceptar 2 Más o menos hacia el primer tercio de la hoja de estilos, aparece la regla de ID siguiente, para la cabecera original: #masthead{ background-color: #FFF; } Se trata de una regla sencilla que define el estilo aplicable a un objeto con ID “masthead”. Este estilo indica que se aplicará el color de fondo blanco (“#FFF”). Recuerda este mismo nombre de estilo para los pasos siguientes. 3 Encuentra la regla para #wrap y fíjate que indica como color de fondo el naranja. Sin embargo, cuando visualizaste la página en el ejercicio anterior no aparecía nada con fondo naranja. Esto se debe a que el color blanco de “masthead” está superpuesto al del contenedor “wrap”. 4 Sigue descendiendo por el código y verás que todas las reglas de estilo siguientes también indican un color de fondo blanco: #sidebar, #main, #innerwrap y #footer. El resultado final es que el color de fondo naranja del div “wrap” no se ve por ningún sitio. Lo hacemos con el fin de enseñarte y en los pasos siguientes verás por qué, cuando empecemos a insertar elementos HTML5. 5 Vuelve al archivo 04_index_work.html. 6 El primer paso consiste en sustituir la etiqueta actual de la cabecera por uno de los nuevos elementos de HTML5. Dentro del código HTML, busca esta sección: El único contenido dentro de este elemento div es la imagen del logo del sitio web. 7 Borra las etiquetas de apertura y cierre del div y sustitúyelas por esto: The web's #1 resource for smoothie recipes
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 91 de 156
Es un nuevo elemento de HTML5 llamado .La especificación del W3C explica que “el elemento header representa un grupo de textos de presentación o ayudas a la navegación”. La especificación indica también que “el elemento header por lo general debe contener la cabecera de sección (un elemento h1-h6 o un elemento hgroup), pero no es obligatorio. El elemento header puede utilizarse también como contenedor de una tabla de secciones a modo de índice de contenidos, un formulario de búsqueda o cualquier tipo de logos de interés” En HTML5 podemos utilizar el elemento dentro de una misma página varias veces. Más adelante, en esta misma sección vamos a ver cuándo y dónde tendría sentido añadir cabeceras adicionales. Puesto que este es el primer elemento HTML5 de tu página, tenemos que comprobar cómo funciona en navegadores web que no soportan las etiquetas HTML5. En los párrafos siguientes explicaré este problema y cómo podemos resolverlo. 8 Guarda el archivo en disco y visualiza la página en tu navegador. Si el navegador soporta el elemento de HTML5 no verás ninguna diferencia entre esta página y la página que habías abierto al principio de esta lección. Si el navegador NO soporta el elemento verás que el color de fondo de la cabecera se cambia a naranja.
La página visualizada en un navegador compatible con la etiqueta HTML5.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 92 de 156
Los navegadores que no soportan el elemento 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 correctamente; el color naranja que ves es en realidad el color de fondo del div subyacente. Fíjate que el logo del sitio web, aunque está dentro del elemento sigue siendo visible porque utiliza el elemento , que sí reconocen todos los navegadores. Este ejemplo sencillo ilustra de alguna forma el dilema a que nos conducen los nuevos elementos HTML5: ¿cómo podemos utilizar estas etiquetas si los navegadores antiguos no reconocen sus estilos? En la siguiente sección veremos dos soluciones para este problema.
Cómo incorporar soporte para los elementos HTML5 en navegadores antiguos Cuando un navegador se encuentra un elemento desconocido y este elemento tiene estilos CSS asociados, tenemos un problema. Para ser más concreto, muchos navegadores antiguos tratan al elemento desconocido como un elemento de línea (o de nivel de texto) y no como elemento de bloque o simplemente ignoran el elemento desconocido. Los elementos de línea generalmente nos los encontramos dentro de un bloque de texto, por ejemplo los elementos y son elementos de línea (también los verás citados como “inline” en los textos en inglés). Los elementos de bloque utilizan bloques de espacio en la página y añaden saltos de línea automáticamente cuando se insertan en el contenido. Por ejemplo, el elemento y todos los elementos de título (h1 y siguientes) son de nivel de bloque. Existen varias formas para conseguir que los navegadores más antiguos apliquen adecuadamente los estilos a las nuevas etiquetas de HTML5. Una manera de conseguirlo de forma elegante nos la ofrece la librería Javascript llamada Modernizr. Esta librería incorpora los nuevos elementos HTML5 a los Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 93 de 156
navegadores antiguos. El código Javascript de esta librería está pensado para detectar funcionalidades dentro de cualquier navegador y añadirles el soporte necesario para poder utilizar los nuevos objetos y estilos si no están soportados. Vamos ahora a añadir un enlace a la librería Modernizr . 1 Ves al archivo 04_index_work.html. En la sección del código HTML busca los enlaces a las dos hojas de estilo externas y después de ellas añade la siguiente línea: Este archivo se encuentra en la carpeta HTML5_04lessons. Puesto que Modernizr es una librería Javascript que está en proceso de mejora continua, puedes confirmar si existe alguna versión más reciente en su sitio web http://www.modernizr.com 2 Guarda el archivo y si estás haciendo tus pruebas con algún navegador sin soporte a HTML5 verás que la sección de cabecera ahora aparecerá con el color blanco, como queríamos.
Hemos incorporado la librería Javascript Modernizr para poder ver en un navegador antiguo como Firefox 3.6 o Internet Explorer 6 el elemento HTML5. Este añadido significa que podemos seguir utilizando los nuevos elementos HTML5 con confianza, ahora que sabemos que pueden soportarlos prácticamente todos los navegadores más conocidos. No obstante, tenemos que tener en cuenta algunas cuestiones. La librería Modernizr no es infalible ya que depende de que el usuario active el uso de Javascript, y puede darse la circunstancia (rara por otra parte) de que el navegador del usuario no soporte Javascript o que su uso esté desactivado por motivos de seguridad. En tal caso no nos vale ninguna de las alternativas y la página se mostrará mal. De todas formas, la inmensa mayoría de los navegadores Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 94 de 156
soportan Javascript, y en muy pocas ocasiones nos encontraremos con que Javascript esté desactivado por defecto.
Incorporar elementos HTML5 Ahora vamos a utilizar los nuevos elementos de sección de HTML5 para dividir la página en secciones lógicas. Los nuevos elementos de sección son , , y . Vamos a empezar por el elemento porque es el más fácil de entender. 1 Encuentra en el código HTML este bloque: Home Our Company Policies and Procedures Document Repository News & Events En este código se utiliza una técnica de navegación muy corriente, basada en listas no numeradas y CSS. Se trata aquí de una lista no ordenada anidada dentro de un div llamado “mainnav”. El nuevo elemento de HTML5 puede sustituir al div y su ID originales. 2 Sustituye las etiquetas por el código siguiente: Home Our Company Policies and Procedures Document Repository News & Events 3 Ahora tenemos que modificar el selector CSS que utilizamos en la hoja de estilo. En el editor de textos, abre la hoja de estilos base.css y posiciónate en el código siguiente: #mainnav { background-color:#666; height:40px; } Cambia el selector de ID #mainnav por el selector nav como se indica a continuación.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 95 de 156
4 Cambia el código para que quede así: nav { background-color:#666; height:40px; } Ahora estos estilos se asocian al elemento nav, no al ID #mainnav. Guarda la hoja de estilo a disco y vuelve a la página HTML, y guárdala también. Visualiza la página en el navegador. Podrás ver que todavía no se ve correctamente la barra de navegación.
La barra de navegación se ve mal porque necesitamos actualizar todos los estilos asociados con el ID #nav. La barra de navegación se ve mal porque hay más estilos que utilizan el ID #mainnav como selector. Tenemos que cambiarlos todos. Cierra el navegador y vuelve al editor. 5 En el archivo base.css, busca las reglas que hay debajo de la regla nav. Necesitaremos modificar tres selectores más: #mainnav li, #mainnav ul li a y #mainnav ul li a:hover. Estos son selectores de contexto en CSS y apuntan a etiquetas concretas dentro del contexto del estilo del objeto padre (en este caso, es el ID #mainnav, que ahora ha dejado de existir ya que lo hemos cambiado por el elemento nav). Por ejemplo,#mainnav li define un estilo para los elementos de lista (li) dentro del elemento div que lleva el identificador #mainnav. Haz los cambios que se indican en rojo: nav li { float:left; width:170px; height:40px; background-color:#CCC; text-align:center; border-left:1px black solid; border-right:1px black solid; line-height:40px; }
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 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 página en el navegador. Ahora la barra de navegación aparece como al principio. Si la barra de navegación sigue viéndose mal, prueba a actualizarla dentro del navegador pulsando F5 o mediante el comando de menú que corresponda. Algunos navegadores mantienen en su memoria cache la página anterior y necesitan recargarla para mostrar los cambios.
La barra de navegación utiliza ahora el elemento HTML5.
Incorporación de otros elementos de sección HTML5 Los otros elementos de la categoría de contenidos de sección son , y . El primero que vamos a añadir es . La definición oficial del elemento section es que “representa una sección genérica de un documento o aplicación. Una sección, en este caso, es un grupo de elementos relacionados con un mismo tema, a menudo con un titular o cabecera”. La definición también indica que “el elemento section no es un contenedor genérico. Si se necesita aplicar un estilo a un elemento o interesa independizarlo para su tratamiento posterior mediante scripting, los autores recomiendan el uso del elemento DIV en su lugar. Como regla general, el
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 97 de 156
elemento section es adecuado solo si su contenido puede enumerarse de forma explícita en el resumen o índice del documento.” Esta definición puede consultarse en http://developers.whatwg.org/sections.html#sections. Así pues, podemos utilizar cuando queramos delimitar de forma lógica un bloque de contenido concreto e importante que puede llevar, por ejemplo, texto e imágenes. En el caso de la página que hemos utilizado para la práctica, vemos que es una página de inicio con un contenido distribuido visualmente: la columna de la izquierda es más ancha y con un color diferente que la segunda columna, a la derecha. Esta segunda columna es la barra lateral y su contenido no tiene relación directa e inmediata con el contenido principal. Volveremos sobre esto más adelante. 1 En el archivo 04_index_work.html, busca la etiqueta de apertura de la sección principal (“main”): Busca la etiqueta de cierre más abajo. Vamos a cambiar esta etiqueta en seguida. El Código de comentario nos ayudará a identificarla. 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! 2 Sube otra vez a la etiqueta de apertura y cámbiala por la etiqueta así: 3 Ahora baja hasta la etiqueta de cierre que habías marcado en el paso 1 y sustitúyela con la etiqueta de cierre de sección: 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! : El elemento padre de esta nueva sección se llama y se utiliza para fines de presentación únicamente, no para guardar contenidos. El estilo asociado a este div incluye un color de fondo (blanco) y puesto que ese div solo se usa como elemento de la estructura visual, podemos dejarlo tal cual está. En HTML5 podemos seguir utilizando elementos DIV, pero las buenas prácticas recomiendan utilizarlos solo si no hay una opción mejor dentro del conjunto de elementos HTML5 disponibles. 4 Guarda el archivo y muestra la página en el navegador. Antes de seguir con la práctica, necesitamos conocer el modelo que utiliza HTML5 para gestionar los esquemas de contenido.
Esquemas de contenidos en HTML5 Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 98 de 156
Una de las carencias más notables en las especificaciones actuales de HTML y XHTML es la falta de un buen modelo de gestión de esquemas de los contenidos. Pensemos en los esquemas tradicionales que podemos crear antes de desarrollar un informe o un escrito cualquiera. Los esquemas representan el nivel de importancia de cada bloque de contenidos y las relaciones jerárquicas entre dichos bloques. Los elementos de sección de HTML5 están pensados para poder generar de manera natural un esquema o estructura de contenido a partir de la página web. Imagina que cada página web tuviera un “Índice de contenidos” generado automáticamente a partir de la estructura interna de etiquetas. Eso es precisamente lo que se pretende con el modelo de esquema de documento en HTML5. Las ventajas de los esquemas de documento no son evidentes de forma inmediata en los navegadores web actuales ni en los dispositivos móviles, pero serán sin duda muy útiles en los dispositivos de ayuda, como los lectores de pantalla. Por ejemplo, un lector de pantalla habilitado para HTML5 puede encontrar una página con el elemento y saltárselo directamente, o dar al usuario la opción de saltárselo o acceder a cada lugar a donde apuntan los enlaces del elemento . Actualmente las páginas HTML y XHTML solo disponen de esquemas basados en las etiquetas de título, por lo que su uso es muy limitado. El nuevo modelo de esquema de HTML5 permite generar esquemas más detallados y relevantes. Mira este ejemplo: Bienvenido a nuestro sitio Web ¡El mejor sitio web del mundo! Navegación Ultimas noticias Grandes atascos en la autovía Este código HTML tendría el siguiente esquema de documento: 1. Bienvenido a nuestro sitio Web 1. Navegación 2. Últimas noticias 1. Grandes atascos en la autovía En este ejemplo, los elementos y delimitan nuevas secciones dentro del esquema, pero sus nombres proceden del empleo de títulos y subtítulos siguiendo una jerarquía. De esta forma los títulos se convierten en un elemento mucho más significativo de cara a los esquemas de las páginas HTML5. El modelo de HTML5 nos permite añadir un nuevo elemento h1 por sección, de modo que cada sección de la página dispone de su propia jerarquía, tal y como se muestra el ejemplo anterior. Una posible complicación es que a día de hoy la especificación HTML5 dice que los elementos de sección tienen que contener títulos, o de lo contrario aparecerán como “sin título” en el esquema. Por ejemplo, en el caso anterior, si borramos el elemento h1 de la sección , el esquema aparecerá así: 1. Bienvenido a nuestro sitio Web 1. NAV sin título 2. Últimas noticias
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 99 de 156
1. Grandes atascos de tráfico en la autovía En el ejemplo de lector de pantalla que comentábamos antes, este esquema de documento no es precisamente útil puesto que la sección de navegación no lleva título. Sin embargo, documentar con títulos las secciones de navegación no es una práctica habitual para los diseñadores (incluso para muchos de ellos carecerá de sentido) y por ello conviene que sepas que esta es una de las partes de la especificación HTML5 que está, en estos momentos, en fase de revisión y depuración. Las reglas de generación de los esquemas HTML5 pueden cambiar, pero tenemos que tener en cuenta que los esquemas de documento nos permiten organizar el contenido y nos enseñan mucho acerca de la organización interna de la información y su distribución en secciones. Crear ahora un buen esquema de documento nos garantizar grandes beneficios en el futuro, cuando los navegadores empiecen a utilizarlos de forma generalizada. Los diseñadores y desarrolladores preocupados por los aspectos de accesibilidad de sus sitios web deben prestar especial atención al papel que juegan (y jugarán) los esquemas de documento. En estos momentos el poder ver un esquema de documento HTML5 no es algo fácil puesto que no disponemos de muchas herramientas para ello. Podemos ver un ejemplo interactivo de un esquema de documento en esta página: http://ie.microsoft.com/testdrive/HTML5/SemanticNotepad
ccesibilidad con los roles WAI-ARIA
on el avance de la especificación 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 capítulo de esta especificación,
landmark roles” (en español serían los “roles de señalización”) está pensada expresamente para utilizarse con elementos HTML y XHTML. U
ación es una forma de clasificar e identificar distintas partes de una página web. Por ejemplo, un rol llamado “banner” puede identificar una
ontenga la cabecera principal de la página. Podemos añadir este rol en forma de atributo al elemento de HTML5:
="banner">
os roles de señalización 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 de HTML5. Podemos utilizar los roles de señalización ya, pero deberás revisar tu código en
segurarse de que su uso sea conforme con la especificación cuando el grupo que la desarrolla concluya sus trabajos.
ás información sobre el WAI-ARIA y los roles de señalización, puedes consultar la webhttp://www.w3.org/WAI/PF/aria/usage#usage_intro
ción WAI-ARIA del W3C se puede consultar en http://www.w3.org/WAI/PF/aria-practices/
prácticas-aria que recomendamos incluye códigos de ejemplo y buenas prácticas para insertar roles de señalización en tus páginas web
Incorporación del elemento (pie de página) Recordemos que el elemento que hemos añadido antes no es un elemento de sección y no delimita una nueva sección en el esquema del documento. Por la misma razón, el elemento tampoco se considera un elemento de sección. Podemos incluir más de un elemento de pie de página en la misma página. Por ejemplo, podemos tener un pie de página para todo el sitio web y también un pie para una sección concreta. In este ejercicio simplemente vamos a sustituir el div llamado “footer” por el nuevo elemento de HTML5. 1 En tu página HTML, busca el elemento DIV que lleva el atributo ID “footer” y haz el cambio siguiente:
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 100 de 156
Copyright Worldwide Apparel 2011 All content on this site is confidential and should not be shared with anyone outside of Worldwide Apparel./a> 2 Abre la hoja de estilo externa base.css, busca el ID #footer y cambia su selector así: #siteinfo { clear:both; background-color:#FFF; background-image:url(images/footer_background.jpg); background-repeat:no-repeat; width:960px; height:128px; padding-top:10px; } 3 Por debajo de esta regla existe un selector contextual para los párrafos que aparecen dentro del pie de página que tenemos que modificar. Sustituye el selector #footer p por lo siguiente: #siteinfo p { margin:10px 0 0 20px; width:280px; font-family:Verdana, Geneva, sans-serif; font-size:0.689em; } 4 Guarda en disco los archivos HTML y CSS y muestra la página en el navegador. Desplázate hacia la parte inferior para ver si el pie de la página se ve como queremos. (Si la imagen no aparece, prueba a pulsar F5 para recargar el contenido y revisa si aparecen mensajes de error). En un navegador compatible con HTML5 la página debe aparecer igual que se veía antes de empezar esta práctica.
En la página utilizamos ahora el elemento HTML5. En los ejercicios siguientes vamos a agrupar contenidos utilizando una combinación de las etiquetas que hemos visto junto con otras nuevas.
Incorporación de los elementos y En esta sección vamos a ver en qué consisten los elementos y , empezando por el primero. La definición del W3C establece que el es “una composición autocontenida dentro de un documento, página, aplicación o sitio web y que, en principio, puede distribuirse o reutilizarse de manera independiente, p.ej. mediante sindicación. Puede tratarse de un post en un blog, un texto en una revista online o cualquier otra pieza de contenido independiente”. La clave para entender la definición anterior es el concepto “auto-contenido”. El elemento está pensado para contenidos que se pueden extraer de su página contenedora. Por ejemplo, en la práctica siguiente vamos a copiar el código HTML de una página distinta, y pegarlo dentro de nuestra página de inicio.
n el editor de textos, desde el menú Archivo, selecciona Abrir y busca en la carpeta de la Lección 4 un archivo llamado 04_article.html. Abre
l navegador. Verás que contiene información sobre lo que es un “periodo de espera” cuando una empresa sale a cotizar por primera vez en la b Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 101 de 156
o que leamos todo el texto con atención, si lo revisamos podemos ver que se trata de un artículo monográfico, autónomo y que no depende de
o externo para su comprensión.
Un artículo con contenido autónomo que vamos a pegar en nuestra página web.
itor de textos y selecciona todo el código HTML del artículo pulsando Ctrl+A. Después, 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 sección que hemos crea
anterior, así que tenemos que encontrar el siguiente párrafo y poner el cursor detrás de la etiqueta de cierre , pero antes de la etiqueta de
n>. Créate un elemento vacío, 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! > e> n>
que tienes el cursor entre las dos etiquetas de y pulsa Ctrl + V o la opción de menú Edición – Pegar, y pega ahí todo el código 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 Informáticos Página 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 electrónico, desde aplicaciones para móviles, 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 publicación de destino final. El elemento article además sirve para mejorar la accesibilidad, ya que ofrece otro nuev ructura lógica dentro de un documento.
omo ya comentamos anteriormente, en HTML5 podemos tener más de una cabecera, así que vamos ahora a añadir una nueva al contenido que
ar. Busca la etiqueta de apertura e inmediatamente después añade un nuevo elemento de cabecera al artículo:
header> h2>Understanding the Quiet Period p>By Cheri White, posted December 21, 2012 h3>What all employees need to know during an IPO /header>
más de poder poner múltiples cabeceras dentro de una página, podemos insertar también un elemento dentro del artículo para mejora
rna. Busca los datos del autor y la sección de copyright y añade lo siguiente:
footer>
The author is an expert on SEC accounting rules and can be contacted a href="mailto:
[email protected]">here.
© copyright 2012 Cheri White /footer> /article> /section>
rda el archivo y muéstralo en el navegador para comprobar los resultados.
esto de este ejercicio nos va a enseñar cómo se utiliza el elemento "aside". Podemos emplearlo de dos maneras, la primera basada en el uso hab
as laterales en un sitio web y la segunda, como un área de contenidos relacionados con un elemento . Vamos a empezar por la primer
ificando nuestra barra lateral.
n el archivo HTML, encuentra la etiqueta de apertura correspondiente a la barra lateral:
div id="sidebar"> h2>Volunteer Opportunities . . . .
mos a cambiar la etiqueta por una y también el nombre de ID para hacerlo más comprensible.
el fragmento de código anterior no hemos incluido todo el código de la barra lateral para ahorrar espacio.
ambia la etiqueta de apertura por lo siguiente:
aside id="secondary-content"> h2> Volunteer Opportunities . . . ID representa de manera más exacta la función de este contenido. Ahora, cambia también la etiqueta de cierre del div.
ncuentra la etiqueta de cierre original de la barra lateral y cámbiala por :
p> Prepare meals for senior citizens and individuals recovering from surgery. Learn More /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 Informáticos Página 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? Técnicamente no sería preciso, pero uno de los objetivos de un diseño web flexible es un correcto control de aquellos nombr
ner que ver con la estructura interna de la página. El ID "sidebar" suele interpretarse como una columna lateral en una página. Pero ¿qué pasa s
o queremos meter este contenido debajo de la sección principal?. El ID de la barra lateral ya no representaría bien la función de esta parte del
uede provocar cierta confusión, por lo que el empleo de un ID como "#secondary-content" resulta más 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 organización de secciones en nuestra página, y ahora vamos a ver el otro uso de este elemento.
vo 04_index_work.html busca el siguiente código, que está dentro del elemento : information on the Quiet Period more information on the quiet period here
a página apunta a información adicional para los lectores que pueden tener interés en conocer más en detalle los temas que se comentan en el
en realidad, en este ejemplo, apunta a la propia página (el valor href=”#” no hace nada realmente).
uy usada para romper el flujo natural de la lectura y conducir la atención del lector hacia otro contenido es añadir un pequeño recuadro dentro
algunas ocasiones, este contenido puede ser un comentario o una frase extraída del propio artículo, que en la jerga periodística de habla inglesa
“pull quote” o simplemente “aside” y de ahí el nombre del elemento.
etiqueta por el elemento aside tal para que quede así.
lass=”moreinfo”> information on the Quiet Period more information on the Quiet period here
lemento dentro de un elemento , como hemos hecho aquí, se interpreta que el contenido tiene alguna relación directa con la
. Cuando se utiliza como barra lateral como hicimos en la práctica anterior, el elemento se considera un contenido secundario sin rela
contenido principal de la página. El nombre de clase “moreinfo” lo añadimos aquí para poder modificar el estilo de este contenido. hoja de estilos base.css y añade este código al final del archivo:
o
ight; 00px; nd: #ddf; 10px; 6px;
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 104 de 156
código genera un recuadro de 200 pixels de ancho con un fondo gris. Además flota hacia la derecha, de forma que el resto del contenido apare
eándolo por los lados libres.
Guarda los archivos HTML y CSS abiertos y visualiza la página en el navegador.
lemento “aside” de HTML5 se puede utilizar dentro de una sección para indicar un contenido relacionado
Los elementos y de HTML5 En la especificación HTML5 puedes encontrar otros elementos nuevos que sirven para que la estructura interna de las páginas se entienda mejor. Por ejemplo, los elementos y nos permiten identificar imágenes y sus rótulos dentro del contenido.
1 Busca la etiqueta de cierre en el artículo y añade una imagen así: What all employees need to know during an IPO Simplemente incorporamos la imagen a la página, pero ahora vamos a meterla dentro de un elemento . 2 Añade el elemento “figure” de esta manera: Este elemento está pensado para identificar o destacar ciertas partes de la página, como imágenes, diagramas o gráficos. Podemos además emparejar la figura con rótulo añadiendo un elemento . 3 El rótulo se añade de esta manera: Quiet needed during an IPO. Podemos modificar el estilo de los nuevos elementos igual que hemos hecho con los otros. Ahora vamos a dar formato a la figura y al rótulo dentro del artículo. 4 Abre el archivo base.css y añade esta regla para la figura: figure { float:right; padding:4px; margin:6px; } Guarda los archivos HTML y CSS y visualiza la página en el navegador. La declaración de estilo hace flotar la imagen hacia la derecha y le aplica valores de margen interno y externo para separarla del resto del contenido.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 105 de 156
El elemento flota hacia la derecha del artículo. El tamaño del rótulo no se ve muy bien a este tamaño, así que le vamos a dar estilo también. Vuelve al editor. 5 Añade la siguiente regla de estilo debajo de la regla para figure: figcaption { text-align:center; font:italic 0.7em Georgia, "Times New Roman", Times, serif; } Guarda los archivos HTML y CSS y visualiza la página. Con esta regla el rótulo queda centrado y el texto se muestra en cursiva.
Otros elementos de HTML5 Aunque en esta lección hemos visto ya los elementos más importantes de HTML5, en la especificación hay unos cuantos más. En la tabla siguiente se resumen los elementos más novedosos y el uso al que están destinados. Además hemos destacado los elementos HTML que han sido objeto de revisión desde la versión HTML4 a HTML5.
Lista actualizada de elementos HTML5 Elemento
Descripción
Atributos
a
Vínculo web
globals; href; target; rel; media; hreflang; type
abbr
Abreviatura
globals
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 106 de 156
Lista actualizada de elementos HTML5 Elemento address area article aside
Descripción
Atributos
Información de contacto para una globals página o sección. Vínculo o área definible sobre un mapa globals; alt; coords; shape; href; target; rel; media; de imagen. hreflang; type Composición autocontenida, globals reutilizable o sindicable Barra lateral o espacio con contenidos globals relacionados
audio
Reproductor de audio
globals; src; preload; autoplay; mediagroup; loop; cotrols
b
Un segmento de texto destacado en el contexto de la frase sin que implique importancia adicional a nivel de código globals HTML ni cambios en tono o intensidad de la voz.
URL de base y contexto de navegación base de destino por defecto para los enlaces globals; href; target y formularios. Una sección 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 línea incondicional
globals
button
Control de botón de formulario
globals; autofocus; disabled; form; formaction; formenctype; formmethod; formnovalidate; formtarget; name; type; value
canvas
Espacio de bitmap manejable mediante globals; width; height scripting
caption
Rótulo de tabla
globals
cite
Título de un trabajo
globals
code
Código de ordenador
globals
col
Columna de tabla
globals; span
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 107 de 156
Lista actualizada de elementos HTML5 Elemento
Descripción
Atributos
colgroup
Grupo de columnas en una tabla
globals; span
command
Comando de menú
globals; type; label; icon; disabled; checked; radiogroup
datalist dd
Contenedor para opciones para el control de lista desplegable Contenido para los elementos dt correspondiente
globals globals
del
Contenido a eliminar del documento
globals; cite; datetime
div
Contenedor de flujo genérico.
globals
dl dt
Lista de asociación consistente en cero globals o más pares nombre-valor Leyenda para el correspondiente globals elemento dd
em
Destacar texto
embed
Complemento embebible en la página globals; src; type; width; height; any*
fieldset
Grupo de controles de formulario
globals; disabled; form; name
figcaption
Rótulo para una figura (opcional)
globals
figure
Figura con rótulo opcional
globals
footer
Pie de página o sección
globals
form
Formulario de datos que se pueden enviar
globals; accept-charset; action; autocomplete; enctype; method; name; novalidate; target
h1, h2, h3, Títulos de sección h4, h5, h6 head header
Contenedor para metadatos del documento Introducción o ayuda a la navegación para una página o sección
globals
globals
globals globals
hgroup
Grupo de encabezamiento
globals
hr
Línea de separación temática
globals
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 108 de 156
Lista actualizada de elementos HTML5 Elemento
Descripción
Atributos
html
Elemento raíz del documento
globals; manifest
i
Voz alternativa
globals
iframe
Contexto de navegación anidado
globals; src; srcdoc; name; sandbox; seamless; width; height
img
Imagen
globals; alt; src; usemap; ismap; width; height
input
Control de formulario
globals; accept; alt; autocomplete; autofocus; checked; dirname; disabled; form; formaction; formenctype; formmethod; formnovalidate; formtarget; height; list; max; maxlength; min; multiple; name; pattern; placeholder; readonly; required; size; src; step; type; value; width
ins
Añadido al document
globals; cite; datetime
label
Rótulo para un control de formulario
globals; form; for
legend
Rótulo para fieldset
globals
li
Elemento de lista
globals; value*
link
Enlace a metadatos externos
globals; href; rel; media; hreflang; type; sizes
map
Mapa de imagen
globals; name
mark
Destacado
globals
menu
Menú de comandos
globals; type; label
meta
Metadatos en formato de texto
globals; name; http-equiv; content; charset
meter
Medidor
globals; value; min; max; low; high; optimum; form
nav
Sección con enlaces de navegación
globals
noscript
Contenido de fallback para scripts
globals
object
Imagen, contenido de navegación anidado o complemento
globals; data; type; name; usemap; form; width; height
ol
Lista ordenada
globals; reversed; start
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 109 de 156
Lista actualizada de elementos HTML5 Elemento optgroup option
Descripción
Atributos
Grupo de opciones en un control de globals; disabled; label formulario de lista desplegable Opción en un control de lista o comboglobals; disabled; label; selected; value box
output
Valor calculado de salida
globals; for; form; name
p
Párrafo
globals
param
Parámetro de un objeto
globals; name; value
pre
Bloque de texto preformateado
globals
progress
Barra de progreso
globals; value; max; form
q
Texto entrecomillado
globals; cite
script
Código de script embebido en la página globals; src; async; defer; type; charset
section
Sección genérica de documento o aplicación
globals
select
Control de lista desplegable
globals; autofocus; disabled; form; multiple; name; required; size
small
Comentario en letra pequeña
globals
source
Origen de contenido para vídeo o audio globals; src; type; media
span
Contenedor genérico de texto
globals
strong
Importancia
globals
style
Información de estilo embebida en la página
globals; media; type; scoped
sub
Subíndice
globals
summary
Rótulo para detalles
globals
sup
Superíndice
globals
table
Tabla
globals; border
tbody
Grupo de filas en una tabla
globals
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 110 de 156
Lista actualizada de elementos HTML5 Elemento
Descripción
Atributos
td
Celda de tabla
globals; colspan; rowspan; headers
textarea
Campo de texto multilínea (formularios)
globals; autofocus; cols; disabled; form; maxlength; name; placeholder; readonly; required; rows; wrap
tfoot
Grupo de filas de pie de tabla
globals
th
Celda de cabecera de tabla
globals; colspan; rowspan; headers; scope
thead
Grupo de filas de cabecera de tabla
globals
time
Fecha y/u hora
globals; datetime; pubdate
title
Título del documento
globals
tr
Fila de tabla
globals
track
Subtítulos para contenidos de vídeo
globals; default; kind; label; src; srclang
u
Palabras clave
globals
ul
Lista
globals
var
Variable
globals
video
Reproductor de vídeo
globals; src; poster; preload; autoplay; mediagroup; loop; controls; width; height
wbr
Posibilidad de salto de línea
globals
Autoestudio 1 Hay algunos elementos más de HTML5 que no hemos visto en esta lección. Recuerda que la especificación HTML5 estará terminada hacia el año 2014. Si deseas consultar información más actualizada, visita los progresos en la especificación en el sitio web del W3Chttp://dev.w3.org/html5/spec/Overview.html
Repaso Preguntas Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 111 de 156
1 Indica si es verdadero o falso: “HTML5 solo permite utilizar un elemento y en la misma página”. 2 ¿Qué son los elementos de sección en HTML5? Nombra los cuatro elementos que se incluyen en la categoría de sección. 3 Define el elemento y pon algunos ejemplos de las dos formas en que se puede utilizar.
Respuestas 1 Falso. Los elementos y se pueden utilizar múltiples veces dentro de una página. Por ejemplo, podemos tener una cabecera o un pie común para todo el sitio web y también cabecera o pie para cada sección. 2 En HTML5 los elementos de sección en HTML5 definen el alcance de cabeceras y pies de página y se utilizan para distribuir de forma lógica las diferentes áreas dentro de un documento HTML. Los elementos de sección también sirven para generar nuevas secciones dentro de un esquema de documento HTML5. Los cuatro elementos de sección son , , y . 3 El elemento se utiliza para representar una porción del contenido que suele llamarse “barra lateral”, cuando dicho contenido es independiente del que forma la base temática de la página (el contexto). Cuando aparece dentro de un elemento ,el elemento debería 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 Informáticos Página 112 de 156
Lección 5: Trabajar con el Canvas Objetivos: El Canvas es una API de dibujo en dos dimensiones incluida en la especificación HTML5. La inclusión de una API de dibujo nativa permite a los desarrolladores generar imágenes dinámicamente dentro de una página web, por lo general a partir de datos obtenidos desde alguna fuente o a partir de la interacción con el usuario. A diferencia de los formatos conocidos de imágenes como JPG o PNG, los dibujos que se crean con Canvas se pueden modificar en tiempo real.
Para empezar Vas a trabajar con algunos archivos que se encuentran en la carpeta HTML5_05lessons a lo largo de esta lección. Comprueba que has descargado y copiado la carpeta de prácticas de HTML5 en tu ordenador. En esta lección vas a aprender los conceptos básicos de la API Canvas, que incluyen el dibujo de figuras, trazos, textos y el uso de colores y gradientes. Después vamos a continuar con conceptos más avanzados de dibujo de imágenes, sombras, el empleo de transformaciones y la creación de animaciones. Puedes utilizar el elemento Canvas de HTML5 para definir la superficie de dibujo, pero tendremos que programar en JavaScript las instrucciones de dibujo y las líneas, formas y colores resultantes. Aunque los conocimientos necesarios de JavaScript son mínimos, si nunca has programado en este lenguaje conviene que antes leas con atención esta introducción breve al lenguaje.
Conceptos básicos de JavaScript JavaScript es un lenguaje de scripting con su propia estructura y sintaxis. Queda fuera del alcance de esta lección explicar por completo JavaScript y cómo se utiliza, pero sí vamos a ver aquí algunos conceptos básicos, ya que si no has programado antes en este lenguaje, necesitarás tener unos conocimientos básicos sobre la forma en que JavaScript interactúa con el código HTML, y estos conocimientos te servirán como una base que podrás aplicar a lenguajes de scripting más avanzados, como C# o PHP. En los pasos siguientes vamos a trabajar con un formulario sencillo, para entender algunos de los conceptos fundamentales de JavaScript. 1 En el editor de textos, en el Menú Archivo selecciona Abrir y ve a la carpeta HTML5_05lessons. Selecciona el archivo 05_subscribe.html y pulsa Abrir. Para mantener una copia de seguridad de este archivo, guárdalo con otro nombre. 2 En el menú Archivo, selecciona "Guardar como" y guárdalo con el nombre 05_subscribe_work.html. Comprueba que lo has grabado en la carpeta HTML5_05lessons. Repasa durante un momento el código HTML. Verás que está creado totalmente en HTML y que, en consecuencia, carece de toda interactividad o dinamismo. Es una página totalmente estática.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 113 de 156
3 Visualiza la página en el navegador y pulsa después el botón Submit. No ocurre nada salvo el comportamiento por defecto del botón, que es un elemento que no tiene en esta página web ninguna función concreta.
HTML no puede comprobar si un campo de formulario tiene datos. Necesitas JavaScript para eso. Necesitamos utilizar JavaScript para que el botón sea interactivo, ya que HTML nos permite hacer ciertas cosas, como modificar el texto que aparece en el botón, pero no aporta métodos para controlar la interactividad. Vamos a añadir código JavaScript para que al pulsar el botón se abra una ventana en el navegador y nos pida el nombre. Una vez escrito el nombre, al pulsar OK, el código JavaScript mostrará este nombre en pantalla. 4 Debajo de la etiqueta en la página, escribe estas líneas de código: Tenemos que indicar a HTML que queremos utilizar JavaScript, igual que hemos hecho ya con CSS. Podemos insertar esas instrucciones en cualquier lugar del código HTML, pero las buenas prácticas recomendadas son añadir el código de programación en la sección de la cabecera () de la página. El atributo type es opcional en HTML5. 5 Añade entre las etiquetas de el siguiente código (en rojo): function show_prompt() Una función en JavaScript es un código que se ejecutará como resultado de algún evento en la página. En este caso, la función tiene un nombre, show_prompt(), y lo único que hará es indicarle al
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 114 de 156
navegador que abra una pequeña ventana en pantalla . El evento que dispara esta función es la acción del usuario de pulsar el botón Submit. La función show_prompt() necesita más cosas para conseguir lo que queremos. 6 Añade este código (marcado en rojo) debajo de la función: function show_prompt() { var name=prompt(); } En esta línea de código hemos declarado una variable y le hemos asignado un valor. Esta variable, llamada name, obtiene su valor de la función "prompt()". Una línea de código es la cantidad mínima de información que se necesita para hacer que ocurra algo en JavaScript. Para que se ejecute el código JavaScript necesitamos añadir una instrucción al botón HTML que le describirá cómo ha de ejecutar el código y qué función debe utilizar. 7 Añade este código (indicado en rojo), al HTML del botón: La instrucción onclick se conoce como evento JavaScript y el valor "show_prompt()" es la función JavaScript que hemos declarado en el paso 5 dentro de la etiqueta . Ahora hemos cerrado la cadena lógica que, en resumen, viene a decir "cuando el usuario pulse el botón Submit, llama a la función show_prompt. Cuando se ejecute la función show_prompt, ejecutará otra función llamada prompt". 8 Guarda el archivo y visualiza la página en el navegador. Si la configuración de seguridad del navegador está preparada para impedir la ejecución de scripts, deberás pulsar en el botón "Permitir el contenido bloqueado". Pulsa el botón Submit y verás aparecer una ventana pidiendo un dato en pantalla (un tipo de ventana específica, denominada "User Prompt"). Es una demostración realmente simple de JavaScript en acción. Ahora vamos a añadir algo más de código para insertar datos en esta ventana emergente, en los pasos siguientes. 9 Cierra el navegador y en el editor añade el código marcado en rojo a la declaración de la variable JavaScript (la que hemos insertado en el paso 6): var name=prompt("Please enter your name","Chris P. Bacon"); Guarda el archivo y muéstralo en el navegador. Prueba a ver qué sucede ahora al pulsar Submit. Los nuevos valores aparecen en la ventana:
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 115 de 156
La ventana de introducción de datos ("User Prompt") es una de las demostraciones más simples JavaScript en acción. Ahora hay que añadir código JavaScript para capturar el valor del texto introducido en esta ventana para poder mostrarlo después en una página HTML nueva. 10 Cierra el navegador y añade este código indicado en rojo al código JavaScript: 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?"); } } El nuevo código añadido se compone de dos partes: una sentencia IF y una sentencia THEN. La sentencia IF busca un valor en el campo de texto. Si hay algún valor, se ejecuta la instrucción document.write de la línea siguiente, y se ve en pantalla el nombre que hemos escrito en la ventana emergente. Los caracteres != y && que aparecen en la expresión (name!=null && name!="") se conocen como operadores en JavaScript y son piezas básicas en el diseño lógico de cualquier función. La expresión document.write es una sentencia que le dice al navegador web que escriba un dato en una página web. En este caso, se trata de escribir la frase "Hello" seguida de las palabras que hayamos escrito en el campo de texto de la ventana emergente anterior, y terminaría con las palabras "How are you today?". 11 Guarda la página y muéstrala otra vez en el navegador. Deja el valor por defecto de momento y pulsa OK. Aparece una página nueva, como resultado del código que hemos añadido en el paso anterior.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 116 de 156
El nombre escrito en el campo de texto se muestra en una página nueva. Pulsa el botón Atrás del navegador y pulsa el botón Submit de nuevo, pero esta vez escribe tu nombre en la línea de texto. Pulsa Aceptar y aparecerá este nuevo nombre en la página siguiente. Se trata de una función JavaScript relativamente sencilla, pero que nos permite saber a grandes rasgos cómo se comunica JavaScript con los elementos HTML de una página y ciertos conceptos básicos de la lógica con la que operan las funciones de JavaScript. En el siguiente ejercicio vamos a practicar con los eventos de JavaScript.
Eventos de JavaScript El evento JavaScript con el que hemos practicado en el ejercicio anterior era onclick , el cual forzaba la ejecución del código al pulsar el botón Submit. Hay muchos otros eventos que podemos utilizar también y para saber mejor cómo funcionan, vamos a modificar nuestro ejemplo. 1 En el código HTML cambia el evento onclick por el evento onmouseover (como se muestra en la parte destacada en rojo): 2 Guarda el archivo y ábrelo ahora en el navegador. Pasa el cursor sobre el botón, pero sin pulsar. La ventana emergente aparece. El eventoonmouseover lanza el código JavaScript asociado en cuanto el cursor pasa por encima del área del botón. En este momento el evento está asociado al botón, pero podemos mover el evento y en vez de reaccionar al botón, que lo haga asociado a toda la página. 3 Selecciona el evento onmouseover y su valor, y pulsa Ctrl + X para cortar el código. Busca la etiqueta de abertura de y pulsa Ctrl + V para pegar el código, como se muestra aquí: El evento onmouseover aplicado a la página entera va a funcionar, pero es las buenas prácticas recomiendan el uso del evento "onload", que lanza el código JavaScript en el momento en que se abre la página: 4 Una vez hemos cambiado el evento a onload, guarda la página y ábrela en el navegador. En cuanto la página se abre, se nos muestra la ventana emergente pidiendo el nombre. Podríamos
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 117 de 156
introducir el texto aquí, pero tal y como está estructurado el evento en este momento, el resultado sería que el texto escrito se mostraría en la misma página, así que pulsa Cancelar. Con este ejercicio has aprendido que JavaScript te deja elegir el momento y la forma de llamar al código. En ambos casos la interacción del usuario lanza la ejecución de ese código, pero el evento onload nos ofrece pocas opciones para elegir el momento, mientras que el eventoonclick (asociado al botón), nos da más control.
El Modelo de Objeto de Documento (DOM) JavaScript tiene acceso a los objetos dentro del navegador. Así es como aparece la ventana emergente en el ejercicio anterior. Para este acceso se utiliza el denominado DOM (Document Object Model) o Modelo de Objeto de Documento, que es una convención para acceder a los datos dentro de las páginas HTML. Este modelo describe cómo se relacionan todos los elementos de una página HTML –por ejemplo textos, formularios o imágenes- con la estructura de mayor nivel, que es la que se denomina "documento". JavaScript tiene acceso al documento y todos los elementos relacionados dentro de la página Web de un modo que no puede hacerse con HTML. Entre otras cosas, gracias a este acceso, con JavaScript se puede: • • • •
Validar campos de formulario Detectar qué navegador estamos utilizando Responder a los eventos de usuario (a su "actividad") Guardar y devolver información desde/hacia el ordenador del usuario Recuerda el primer ejercicio y la sección de código que añadiste, que tenía una etiqueta document.write (the seventh line from the top). 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?"); } } A esta sección del código en rojo se la denomina una función y el comportamiento que ha demostrado la página es uno de los ejemplos más simples que se pueden hacer en JavaScript, puesto que tenemos muy pocos objetos en el documento. La mayoría de documentos HTML tienen dentro múltiples objetos y podemos pasar un valor de texto a otra zona de la página, o enviar datos desde un formulario. Ahora que tienes una idea básica de JavaScript y su funcionamiento, el trabajo con el elemento Canvas será más sencillo.
El elemento Canvas El elemento canvas es algo distinto de los demás elementos de HTML5. Es más complejo en el sentido de que necesita de JavaScript para funcionar. El primer paso que daremos será añadir (o definir) un elemento canvas en nuestra página HTML. Después tenemos que guardar una referencia
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 118 de 156
al contexto de dibujo para ese elemento en forma de variable de JavaScript. Más tarde utilizaremos el propio contexto para escribir nuestras instrucciones de dibujo. 1 Abre el archivo 05_canvastemplate.html dentro de la carpeta HTML5_05lessons y busca la plantilla que vamos a utilizar en los siguientes ejercicios (y que podrás modificar en futuros proyectos). Esta plantilla define un elemento HTML , un cuadrado de 300 pixels de lado, que delimita la superficie de dibujo. Cuando se abre el cuerpo de la página, se llama a la función JavaScript setup(). Esta función encuentra el elemento canvas por su nombre y declara una variable con la referencia al contexto de dibujo del canvas. Una vez que tenemos disponible esa referencia, podemos dibujar libremente sobre esa superficie. El código HTML de la plantilla del canvas es así: El código JavaScript tiene este aspecto: function setup() { var canvas = document.getElementById('lessonCanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); } } No vas a modificar este archivo, sino que cuando estés preparado para operar sobre el canvas por ti mismo, podrás utilizarlo como punto de partida. 2 En el menú Archivo del editor, cierra el archivo sin hacer cambios.
Ventajas del elemento Canvas Según vayamos avanzando por los siguientes ejercicios seguramente pensarás que la cantidad de scripting que se necesita es mayor de la esperada. El elementocanvas nos permite crear gráficos que, de no disponer de él, tendríamos que generar con otros programas como Photoshop, Illustrator, o si se trata de animaciones, con Flash o Silverlight. La diferencia es que en vez de utilizar las herramientas de dibujo de estos programas, vamos a poder crear formas, gradientes, textos y otros elementos visuales con nuestro propio código. El objetivo de esta lección consiste en explicar los conceptos fundamentales del manejo del elemento canvas. Sin duda, en el futuro tendremos aplicaciones que nos permitirán crear objetos y animaciones para los canvas sin necesidad de programarlos a mano. De hecho veremos algunos de estos desarrollos al final de la lección. De momento vamos a crear estos objetos desde cero, que es la mejor forma de saber cómo se hacen las cosas con el canvas. El elemento canvas ha tenido un soporte razonablemente bueno entre los navegadores a lo largo del tiempo y podemos suponer que acabará sustituyendo a la amplia variedad de soluciones que conocemos con el nombre de "contenidos multimedia avanzados" y también se utilizará para juegos, animaciones, diagramas, gráficos, visualización de datos y para crear interfaces vectoriales de usuario, entre otros muchos usos posibles.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 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 más casos de uso del canvas: los iconos de la interfaz de usuario son un ejemplo del tipo de gráficos que, en teoría, podemos crear con elementos canvas. Las imágenes creadas con este elemento pueden guardarse en el disco en forma de archivos PNG, así que podemos imaginar una aplicación web que nos permitirá exportar imágenes. Además, utilizando una funcionalidad del Canvas llamada "data uri" podemos embeber imágenes creadas con el Canvas directamente dentro de CSS. Como sucede con la mayor parte de las funcionalidades de HTML5, queda a criterio de los diseñadores y desarrolladores el empezar ya a utilizar este elemento. En los ejercicios siguientes puedes empezar a hacerlo por ti mismo. Al finalizar la lección habrás creado un gráfico de barras empleando el canvas.
Trazos de dibujo ("paths") Los trazos y las formas básicas son los componentes básicos de la creación de dibujos en el elemento canvas. Una vez te familiarices con las funciones más importantes, podrás crear elementos gráficos más complicados, como diagramas basados en datos, figuras animadas para tus juegos y otros diseños de gran utilidad e interés. Las primeras funciones que veremos en este apartado también nos van a servir para tener un conocimiento general de cómo funciona el elemento canvas.
Dibujo de rectángulos El rectángulo es el trazo más sencillo que podemos dibujar. La función fillRect(x,y,width,height)que podemos utilizar dentro del objeto context , genera una figura rectangular en la posición y con el tamaño indicados por los parámetros, y con un relleno basado en el valor que tenga la variable fillStyle en ese momento. Una función estrechamente vinculada con ésta es strokeRect, que genera la misma figura pero en lugar de rellenarla, dibuja el contorno basándose en el estilo definido en ese momento para la variable strokeStyle. La función clearRect emplea los mismos parámetros pero elimina ("limpia") todos los pixels del canvas que quedan dentro del área de un rectángulo definido. 1 Abre el archivo 05_drawingrectangles.html y guarda en la misma carpeta una copia con el nombre 05_drawingrectangles_work.html. En el código verás un elemento Canvas ya definido y una función JavaScript llamada setup que se ejecuta al abrir la página. En la función setup se guarda una referencia al contexto 2D del Canvas en una variable que es la que vamos a utilizar para dibujar. 2 En la sentencia if, después de la declaración de la variable ctx, añade este código para dibujar un rectángulo que ocupe todo el canvas: function setup() { var canvas = document.getElementById('lessonCanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.strokeRect(0, 0, 300, 300); } }
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 120 de 156
Como puedes ver, las coordenadas X e Y tienen un valor cero, es decir, el rectángulo se empieza a dibujar a partir de la esquina superior izquierda del canvas. Puesto que su anchura y altura valen 300 pixels, esto quiere decir que el rectángulo ocupa todo el espacio del canvas. 3 Debajo de la línea que acabas de escribir, añade estas otras dos líneas de código que cambian el color del trazo, que ahora es negro, a rojo, y una segunda que dibuja un recuadro rojo más pequeño: ctx.strokeStyle = 'rgb(255, 0, 0)'; ctx.strokeRect(0.5, 0.5, 100, 100); 4 Guarda el archivo drawingrectangle_work.html y ábrelo en el navegador. Podrás ver algo similar a esta figura. Igual que con otras muchas funcionalidades de HTML5, si no vemos nada en pantalla lo que tenemos que hacer es confirmar que el navegador soporta el elemento HTML5 (el canvas en este caso).
Rectángulos con borde negro (el mayor, coincidiendo con la superficie del canvas) y rojo (interior). Como ves, el elemento Canvas tiene un margen definido en CSS que se añade solo a efectos de ayuda visual. Esto nos muestra que podemos utilizar CSS para modificar el estilo del elemento Canvas, igual que se hace con otros elementos HTML. 5 Vuelve al editor de textos y debajo de las líneas que acabas de escribir, añade la siguiente línea para dibujar un rectángulo con relleno: ctx.fillRect(20, 20, 100, 100); 6 Añade otras dos líneas de código para cambiar el color del relleno, que en este momento es negro, a verde, y dibuja otro segundo rectángulo con este nuevo color: ctx.fillStyle = 'rgb(0, 255, 0)'; ctx.fillRect(50, 50, 100, 100); 7 Guarda el archivo y vuelve a mostrarlo en el navegador. SI la página estaba ya abierta, simplemente actualiza el contenido (pulsando F5) o vuelve a cargar el archivo. Ahora lo que deberíamos ver es lo que aparece en esta figura:
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 121 de 156
Rectángulos con borde en rojo y negro, y otros rectángulos con relleno negro y verde creados con HTML5. La función fillRect sirve para crear un rectángulo sólido (relleno), en vez de un recuadro. 8 Mantén abierta la página en el navegador y vuelve al editor. Debajo de las líneas del paso seis, añade este código para borrar los pixels de una zona del canvas: ctx.clearRect(80, 80, 30, 30); 9 Guarda el documento, vuelve al navegador y actualiza la página. Ahora verás un dibujo parecido al de la figura siguiente. La función clearRect convierte en transparentes todos los pixels que quedan dentro del área delimitada por el rectángulo, eliminando en parte los cambios de color que hemos hecho antes con strokeRect y fillRect.
Recuadros negro y rojo con rectángulos en negro y verde, y dentro de éste, un agujero transparente.
Dibujo de líneas y círculos Las funciones de dibujo de rectángulos del apartado anterior son, en realidad, una de funciones aún más básicas combinadas de tal forma que su uso se hace más sencillo. Supongamos que nos interesa crear el mismo rectángulo utilizando funciones más básicas. Veamos otra vez el código de la función generadora: ctx.strokeRect(0, 0, 300, 300); El mismo rectángulo se puede generar siguiendo una secuencia de funciones más básicas: ctx.moveTo(0, 0); ctx.lineTo(300, 0); ctx.lineTo(300, 300); ctx.lineTo(0, 300); ctx.lineTo(0, 0); ctx.stroke();
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 122 de 156
Esta secuencia genera un trazo compuesto o línea poligonal, que comienza en el punto definido por las coordenadas de moveTo(x, y). Las sucesivas funciones lineTo(x, y)van añadiendo puntos de inflexión al trazo, que se unirán posteriormente con líneas rectas. Finalmente, la función stroke es la que dibuja en el canvas las rectas que unen los puntos por orden, pero sin rellenar el espacio interior. Parece más razonable emplear la función de rectángulo puesto que hace lo mismo con una sola línea de código, pero conviene conocer cómo se manejan las funciones más básicas porque las podemos utilizar para dibujar cualquier forma. 1 Abre el archivo 05_drawinglinesandcircles.html y guarda una copia en disco, con el nombre 05_drawinglinesandcircles_work.html. Este archivo ya tiene un contexto de dibujo declarado en la función setup. En esta práctica vamos a añadir un rectángulo y una serie de líneas en zig-zag. 2 Dentro de la función setup, detrás de la línea var ctx = canvas.getContext('2d');, añade este código: ctx.strokeRect(0, 0, 300, 300); ctx.moveTo(20, 20); ctx.lineTo(100, 100); ctx.lineTo(80, 200); ctx.lineTo(200, 80); ctx.lineTo(200, 200); ctx.lineTo(280, 280); ctx.stroke(); 3 Guarda los cambios y pasa al navegador. Abre la página para revisar el resultado, que debe ser parecido a esta figura
Un recuadro negro y una línea en zig.zag atravesando el canvas. Puedes ver que la función lineTo es bastante útil a la hora de dibujar líneas o rectángulos. Ahora vamos a cambiar el color de relleno de las líneas en zig-zag y añadiremos un círculo rojo encima del trazo. 4 Vuelve al editor y añade estas líneas de código debajo de las que has escrito en el paso 2: ctx.fillStyle = 'rgb(255,0,0)'; ctx.arc(100, 100, 16, 0, Math.PI * 2, false); ctx.fill(); La primera línea cambia el color de relleno active, que pasa de blanco a rojo. La segunda línea dibuja un círculo completo con su centro situado en las coordenadas (100, 100) y un radio de 16 pixels. Los últimos tres parámetros de la función arc definen la longitud del arco. Los valores startAngle y endAngle, medidos en radianes, definen los puntos de inicio y final, y el ultimo parámetro, llamado anticlockwise define la dirección en que se dibujará la línea entre estos el punto de inicio y el de término. Por tanto, en este código se define el dibujo de un arco que
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 123 de 156
empieza en la posición 0 (el punto más a la derecha del círculo teórico) y sigue, avanzando en sentido horario, hasta que alcanza el punto 2 π radianes, es decir, una rotación completa de 360 grados, con lo que cierra el círculo. Finalmente, la función fill se encarga de darle color al interior. 5 Selecciona en el menú Archivo – Guardar y pasa al navegador para ver el efecto de estos cambios en pantalla. Como ves, el círculo ha quedado añadido al conjunto de líneas del trazo. Puesto que las líneas y el círculo forman parte del mismo trazado, el relleno de color se aplica a toda el área, no solo al círculo.
Un contorno negro y una figura quebrada rellena en rojo. 6 Si queremos dibujar trazos independientes tenemos que utilizar la función beginPath, que da por concluido el trazo activo y comienza con otro nuevo. Vuelve al editor de textos y entre la función fillStyle y arc, inserta las líneas siguientes: ctx.fillStyle = 'rgb(255,0,0)'; ctx.beginPath(); ctx.arc(100, 100, 16, 0, Math.PI * 2, false); ctx.fill(); ctx.stroke(); Esta segunda línea, ctx.stroke();, sirve para añadirle un borde al círculo. 7 Guarda el archivo y pasa al navegador para visualizar la página. El dibujo debe aparecer ahora así:
Un recuadro negro, línea en zig-zag y un círculo rojo. 8 Una vez creado el círculo, ahora vamos a añadir otro objeto, en este caso un semicírculo. Escribe estas líneas debajo de las anteriores: ctx.beginPath(); ctx.arc(170, 170, 16, 0, Math.PI, true); ctx.fill(); Con este código iniciamos un nuevo trazo, para dibujar un arco independiente del círculo anterior. Los valores 170,170 son las coordenadas del centro. El valor 16 es el radio, el valor cero es el punto
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 124 de 156
de inicio (startAngle)y el valor de endAngle lo dejamos en π, con lo que solamente dibujará un semicírculo -180 grados- empezando desde el punto cero. El valor "true" para el parámetro anticlockwise hace que el semicírculo se desarrolle hacia arriba. 9 Guarda el archivo y visualiza la página en el navegador. Ahora debe verse esta imagen:
Un recuadro negro, línea en zigzag, círculo rojo y semicírculo rojo. Si dejamos el valor de anticlockwise como "false", el arco se trazaría en sentido horario, es decir un semicírculo curvado hacia abajo.
Dibujar figuras con curvas El elemento canvas nos proporciona dos funciones de dibujo con las que podemos trazar curvas: quadraticCurveTo(cpx, cpy, x, y) y bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y). Ambas funciones utilizan puntos de control para definir la curva del trazo cuando dibuja desde un punto al siguiente. 1 En la carpeta HTML5_05lessons, abre el archivo 05_drawingcurves.html y guarda una copia en la misma carpeta, con el nombre05_drawingcurves_work.html. El código es el mismo que el del ejercicio inicial donde se definía un elemento canvas y se guardaba una referencia al contexto 2D en una variable para su uso posterior. En este ejercicio vamos a dibujar algunas formas para crear una composición semejante a una flor. 2 En la sentencia if, después de la línea donde se declara la variable ctx, añade este código para dibujar un rectángulo que encuadra el canvas. ctx.strokeRect(0, 0, 300, 300); Es el mismo rectángulo de encuadre que vimos en la sección anterior, que nos sirve de marco de referencia visual para saber dónde está el canvas dentro de nuestra página. 3 Añade las líneas siguientes debajo de la línea del paso anterior, para dibujar el tallo de la flor: ctx.fillStyle = 'rgb(0,173,104)'; ctx.moveTo(145, 150); ctx.quadraticCurveTo(120, 200, 170, 280); ctx.lineTo(190, 280); ctx.quadraticCurveTo(125, 190, 155, 150); ctx.fill(); La primera línea de código cambia el relleno a color verde. Las siguientes líneas definen los puntos iniciales, curvas y líneas de la forma del tallo. 4 Guarda el archivo. Pasa al navegador y muestra la página HTML. Deberás ver esta figura:
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 125 de 156
La forma de un tallo de flor verde. Ahora vamos a crear un pétalo de la flor utilizando la función bezierCurveTo que utiliza dos puntos de control, a diferencia del único punto de control que necesita la función quadraticCurveTo del paso anterior. Además tenemos que dibujar una serie de guías utilizando los mismos puntos, para ver mejor cómo opera la función bezierCurveTo. Puesto que vamos a utilizar una serie de puntos varias veces, lo mejor será guardar los valores de las coordenadas en variables que podremos reutilizar. 5 Vuelve al editor y añade este código debajo de las líneas de paso 3. var pt1 = { x: 155, y: 145 }; var pt2 = { x: 93, y: 106 }; var cp1 = { x: 111, y: 154 }; var cp2 = { x: 66, y: 131 }; 6 Este código cambia los colores del trazo y el relleno, y nos dibuja el primer pétalo de la flor: ctx.fillStyle = 'rgb(115,206,226)'; ctx.strokeStyle = 'rgb(0,111,174)'; ctx.beginPath(); ctx.moveTo(pt1.x, pt1.y); ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, pt2.x, pt2.y); ctx.bezierCurveTo(89, 65, 159, 118, 155, 145); ctx.fill(); ctx.stroke(); Las dos primeras líneas del código cambian el trazo a azul oscuro y el relleno a azul claro. Las siguientes cuatro líneas generan un trazo nuevo mediante la función bezierCurveTo para conseguir curvas suaves. Finalmente, rellena el trazo y dibuja el borde. 7 Guarda el archivo HTML y muéstralo en el navegador para ver los cambios:
La forma de un tallo con un solo pétalo de la flor.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 126 de 156
8 Vuelve al editor de textos y añade las siguientes líneas de código debajo de las que has escrito en el paso anterior. Estas nuevas líneas cambian el color del borde y del relleno y dibujan el centro de la flor que sirve de centro para todo el conjunto: ctx.fillStyle = 'rgb(243,237,99)'; ctx.strokeStyle = 'rgb(253,183,58)'; ctx.beginPath(); ctx.arc(155, 145, 10, 0, Math.PI * 2, false); ctx.fill(); ctx.stroke(); 9 Para hacernos una idea de cómo trabaja la función bezierCurveTo con los puntos de control para definir una curva, vamos a añadir una guía utilizando los mismos puntos de la primera curva del pétalo de la flor. Creamos las guías añadiendo las siguientes líneas de código debajo de las del paso anterior: ctx.strokeStyle = 'rgb(255,0,0)'; ctx.beginPath(); ctx.arc(pt1.x, pt1.y, 2, 0, Math.PI * 2, false); ctx.arc(cp1.x, cp1.y, 2, 0, Math.PI * 2, false); ctx.arc(cp2.x, cp2.y, 2, 0, Math.PI * 2, false); ctx.arc(pt2.x, pt2.y, 2, 0, Math.PI * 2, false); ctx.stroke(); La primera línea cambia el trazo a rojo brillante, que veremos por fuera del dibujo del pétalo. Las seis líneas siguientes generan una línea poligonal con circulitos pequeños en cada punto utilizado por la primera curva de Bezier. 10 Guarda el archivo HTML y pasa al navegador para ver cómo queda el diseño tras estos cambios.
La flor con un solo pétalo y las líneas guía de desarrollo de la curva de Bezier.
ás sobre los puntos de control
a vez terminada la sección de Dibujo de Curvas, y para profundizar más en la forma en que la función bezierCurveTo utiliza los puntos de con
valores de punto guardados en el paso 5. Si cambias los valores, verás que las guías siguen representando en pantalla los puntos utilizados y la
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 pétalo se dibuja ahora hacia el lado más 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 Informáticos Página 127 de 156
Además de líneas y formas, en un canvas podemos dibujar textos. Los tipos de letra, tamaños y grosores se establecen de manera parecida a como se hace con CSS y siguen las mismas reglas con respecto a los tipos de letras, tamaños y grosores disponibles. A diferencia de CSS, no existe aquí el concepto de márgenes internos o externos. En este caso el texto se sitúa en la posición definida por las coordenadas X e Y, que expresan la distancia en píxels horizontal y vertical, con respecto al origen (la esquina superior izquierda del canvas). En esta sección vamos a crear una tarjeta de identificación con tu nombre para practicar con la escritura de textos en el canvas. 1 Abre el archivo 05_addingtext.html que está en la carpeta HTML5_05lessons y guarda una copia del mismo con el nombre 05_addingtext_work.html. Este archivo utiliza la misma plantilla que hemos estado usando hasta ahora, con la excepción de dos rectángulos que sirven como fondo de la tarjeta. 2 Busca la segunda función strokeRect y añade este código para dibujar el texto de cabecera: ctx.fillText('HELLO MY NAME IS', 12, 40); Esta línea de código dibuja un texto, que se indica en el primer parámetro, empezando en las coordenadas indicadas por los parámetros segundo (valor x) y tercero (valor y). Utiliza la fuente por defecto y el color del texto será blanco, heredado del valor de fillStyle que se ha declarado anteriormente en el código. 3 Guarda el archivo HTML y vamos al navegador a ver el resultado, que debería quedar así:
La tarjeta de identificación con un pequeño borde. 4 Para aumentar el tamaño y grosor de la letra, inserta esta línea de código antes de la línea del paso anterior: ctx.font = "bold 1.8em sans-serif"; ctx.fillText('HELLO MY NAME IS', 12, 40); Puedes ver que, igual que ocurre con CSS, puedes definir el tamaño de la fuente utilizando valores relativos. En este caso el texto de cabedera será 1,8 veces el tamaño de la fuente del elemento canvas, tamaño que viene heredado del objeto de la página HTML salvo que indiquemos expresamente otra cosa. 5 Guarda el archivo HTML y visualízalo en el navegador, para ver los cambios:
La tarjeta de identificación con una cabecera más grande.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 128 de 156
6 Para añadir tu nombre a la tarjeta, inserta otra llamada a fillText. Para conseguir que el texto destaque y parezca escrito a mano, vamos a utilizar una fuente distinta, con un tamaño mayor. Debajo del código del paso 2, añade lo siguiente: ctx.fillStyle = 'rgb(0, 0, 0)'; ctx.font = 'bold 84px Comic Sans MS'; ctx.textAlign = 'center'; ctx.fillText('Dianne', 150, 150); La primera línea cambia el color del texto a negro. La segunda, fija la fuente con un valor absoluto de 84 pixels de altura y el tipo de letra será Comic Sans MS, que es un tipo de letra que imita la escritura manual. La siguiente línea establece el alineamiento horizontal del texto con respecto a la coordenada de posición, y le aplica el valor center. Otras posibilidades de alineamiento horizontal son right y el valor por defecto (left). 7 Guarda el archivo HTML y visualízalo en el navegador:
La tarjeta de identificación con el nombre y una bonita cabecera.
Uso de colores, estilos y gradientes Hasta ahora hemos utilizado colores sólidos, pero la mayoría de objetos reales presentan transiciones suaves de un color a otro. Este tipo de transiciones se reproducen en el canvas utilizando gradientes, que pueden ser de tipo lineal o radial. Además, en esta sección vamos a ver distintas maneras de definir los colores, incluyendo valores de transparencia. 1 Abre el archivo 05_colorsstylesandgradients.html que se encuentra en la carpeta HTML5_05lessons y guarda una copia con el nombre05_colorsstylesandgradients_work.html. El archivo utiliza algunos trazos que sirven para dibujar la silueta de un vaso de Coca Cola. 2 Abre el navegador y visualiza la página HTML: el vaso aparece vacío:
Un vaso de Coca Cola vacío con una sombra negra. 3 Vuelve al editor y debajo de la función strokeRect Cambia el color de fillStyle desde el negro actual a gris, como se indica aquí:
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 129 de 156
ctx.fillStyle = 'gray'; En las secciones anteriores de esta lección hemos utilizado siempre la notación RGB para definir los colores, pero existen ciertas palabras reservadas que facilitan su uso. Otros términos para designar colores son "red", "blue", "orange", "purple", etc.. 4 Guarda el archivo HTML y pasa al navegador para comprobar cómo ha quedado con los cambios.
Un vaso de Coca Cola vacío con una sombra mas clara. 5 También se puede rellenar el vaso con algo que simula la Coca Cola utilizando un gradiente lineal. Después de la sección comentada con el texto "cup inline" y antes de la sección que viene encabezada por el comentario "cup outline", inserta estas líneas de código: var lineGrad = ctx.createLinearGradient(150, 81, 150, 268); lineGrad.addColorStop(0, '#fff'); lineGrad.addColorStop(0.05, '#450c0c'); lineGrad.addColorStop(0.6, '#874040'); lineGrad.addColorStop(1, 'rgba(202, 147, 147, 0.6)'); ctx.fillStyle = lineGrad; La primera línea define un nuevo pincel de gradiente lineal donde los dos primeros argumentos definen el punto inicial del gradiente y los dos siguientes, el punto final. Para fijar la posición se utilizan coordenadas X e Y, igual que cuando colocábamos rectángulos o círculos. Las siguientes cuatro líneas definen una serie de "puntos de parada" del gradiente. El primer parámetro define la posición del punto de parada de color relativo al punto de comienzo y finalización del gradiente (donde 0 representa el punto de inicio y 1, el punto final). El segundo parámetro define el color del punto de parada. El formato hexadecimal se utiliza para declarar los tres primeros colores. El último color queda definido utilizando la función rgba, que amplía la función rgb añadiendo un cuarto parámetro, llamado "alpha" o también "opacidad" del color. La opacidad varía en una escala de 0 a 1, siendo cero el valor de la transparencia completa y 1 la máxima opacidad. Si quieres conocer mejor los conceptos de la notación de color RGBA, puedes consultar el libro "HTML5 Digital Classroom" y en concreto, la Lección 11 "Aplicando estilos con CSS3". La última línea cambia el valor de fillStyle al nuevo pincel de gradiente lineal. 6 El último paso será rellenar el contorno del vaso. En la sección que sigue al comentario "cup outline", añade la siguiente línea después de la función stroke. ctx.fill(); 7 Guarda el archivo HTML y visualízalo en el navegador para ver el resultado:
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 130 de 156
Un vaso lleno de Coca Cola. 8 Vuelve al editor. Mediante el empleo de varios gradientes radiales vamos a añadir burbujas al vaso de Coca Cola. Después de la línea de código ctx.fill que has escrito en el paso 6, añade estas líneas: ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)'; ctx.lineWidth = 2; La primera cambia el trazo, que pasa del negro por defecto a un blanco semitransparente. La segunda línea cambia la anchura del trazo desde el valor por defecto (1 pixel) a 2 pixels.. 9 Debajo de las líneas escritas en los pasos anteriores, añade estas: >var radGrad = ctx.createRadialGradient(116, 107, 1, 120, 110, 10); radGrad.addColorStop(0, 'white'); radGrad.addColorStop(0.9, 'rgba(255, 255, 255, 0)'); La primera línea define un gradiente radial de manera similar a como se hace con el gradiente lineal. Se indican los puntos de inicio y final del gradiente (los parámetros primero y segundo para el punto de inicio, y el tercer y cuarto argumentos, para el punto de finalización). La diferencia principal son los argumentos tercero y sexto, que se utilizan para indicar los radios de los respectivos puntos. En este ejemplo, el punto de inicio se define en la posición x=116, y=107, con un radio de 1. El punto final queda definido por las coordenadas x=120, y=110, con un radio de 10. 10 Una vez definido el gradiente radial, podemos utilizarlo para rellenar un círculo que representa una burbuja. Después de las líneas de los pasos anteriores, añade estas otras. ctx.fillStyle = radGrad; ctx.beginPath(); ctx.arc(120, 110, 10, 0, Math.PI * 2, false); ctx.fill(); ctx.stroke(); 11 Guarda el archivo HTML y pasa al navegador para ver el resultado de estos cambios:
Un vaso lleno de Coca Cola con una burbuja.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 131 de 156
12 Para añadir otra burbuja tenemos que definir otro pincel de gradiente porque las coordenadas han quedado establecidas en una posición absoluta. Si movemos o cambiamos el tamaño de la burbuja, tenemos que mover el pincel también. Debajo del código del paso 10, añade estas líneas: radGrad = ctx.createRadialGradient(164, 140, 1, 168, 143, 8); radGrad.addColorStop(0, 'white'); radGrad.addColorStop(0.9, 'rgba(255, 255, 255, 0)'); ctx.fillStyle = radGrad; ctx.beginPath(); ctx.arc(168, 143, 8, 0, Math.PI * 2, false); ctx.fill(); ctx.stroke(); 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 Añadiremos una burbuja más para finalizar la composición: debajo del código del paso anterior, añade estas líneas: radGrad = ctx.createRadialGradient(127, 185, 1, 130, 188, 6); radGrad.addColorStop(0, 'white'); radGrad.addColorStop(0.9, 'rgba(255, 255, 255, 0)'); ctx.fillStyle = radGrad; ctx.beginPath(); ctx.arc(130, 188, 6, 0, Math.PI * 2, false); ctx.fill(); ctx.stroke(); 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.
Añadir imágenes Podemos utilizar una función muy sencilla, llamada drawImage para dibujar una imagen en el canvas. La parte más complicada es asegurarnos de que cuando llamemos a la función, le da tiempo suficiente al navegador para descargar la imagen externa. Una vez que la tiene disponible, la función Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 132 de 156
drawImage nos ofrece una gran flexibilidad a la hora de determinar el tamaño de la imagen y el sitio donde se mostrará. 1 En la carpeta HTML5_05lessons, abre el archivo 05_addingimages.html y guarda una copia en esa misma carpeta con el nombre 05_addingimages_work.html. El archivo está preparado como copia de la plantilla original del canvas que utilizábamos en la primera parte de esta lección. 2 Visualiza desde el sistema operativo el archivo fishlake.jpg que hay en la carpeta images para que veas la imagen que vamos a utilizar en este ejercicio. 3 En la sentencia if, detrás de la declaración de la variable ctx añade el código siguiente: var img = new Image(); img.onload = function(){ } img.src = 'images/fishlake.jpg'; La primera línea declara un nuevo objeto de tipo imagen y la segunda define una función para el evento onload de la propia imagen. En la última línea se indica el URL del archivo de imagen a utilizar. Una vez que el navegador ha descargado la imagen, hace una llamada a la función de la segunda línea. 4 Dentro de los símbolos de llaves ({, }) de la función onload, añade este código marcado en rojo: img.onload = function(){ ctx.drawImage(img, 0, 0); } Esta instrucción le indica al canvas que tiene que reproducir la imagen en las coordenadas 0,0. 5 Guarda el archivo HTML y ábrelo en el navegador para ver cómo queda después de estos cambios:
La imagen original aparece está recortada. La imagen aparece en pantalla, pero recortada porque el tamaño original del archivo es mayor que el tamaño del canvas. 6 Para cambiar el tamaño de la imagen y que quepa en el espacio disponible, vamos a añadir a la función drawImage una anchura de destino de 300 y una altura de 200 pixels. Modifica la línea que has escrito en el paso cuatro añadiendo estos dos nuevos argumentos a la función: ctx.drawImage(img, 0, 0, 300, 200); Con ello le indicamos al canvas que tiene que mostrar la imagen en la posición 0,0 y alterar su tamaño para conseguir una viñeta de 300x200 pixels. 7 Guarda el archivo HTML y visualízalo en el navegador para comprobar el efecto de este cambio:
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 133 de 156
La imagen del lago después de cambiar el tamaño para que quepa en el espacio disponible. 8 La última variación que haremos sobre la función drawImage es definir la posición de inicio, la anchura y la altura junto con la posición de destino, anchura y altura. Modifica la misma línea del paso cuatro de esta manera: ctx.drawImage(img, 287, 132, 100, 100, 0, 0, 300, 300); Con este cambio le estamos indicando al canvas que tiene que mostrar la imagen en la posición 0,0, con una anchura y altura de 300 pixels, utilizando una porción rectangular de la imagen original que empieza en la posición (287,132) y con una anchura y altura de 100 pixels. 9 Guarda el archivo HTML y vuelve al navegador para visualizar la página HTML y comprobar el efecto de este cambio. Esta técnica de ampliación de imágenes no es perfecta, ya que el resultado suele presentarse pixelado. En este caso lo vemos solo con fines de demostración.
La imagen del lago, después de ampliar una parte concreta .
Uso de las transformaciones Las transformaciones, combinadas con los estados de dibujo del Canvas nos permiten crear diseños complejos y dinámicos. Como hemos visto en apartados anteriores de esta lección, los cambios globales como los que provocan strokeStyle, fillStyle y lineWidth, se guardan en distintos niveles de cambio de estado que podemos guardar y recuperar más tarde. Los tres tipos de transformaciones (cambio de escala, rotaciones y traslaciones) también se guardan en niveles de cambios de estado globales y se pueden utilizar fácilmente si sabemos cómo hacerlo, empleando las funciones save y restore. 1 En la carpeta HTML5_05lessons, abre el archivo 05_usingtransforms.html y guarda una copia en la misma carpeta con el nombre 05_usingtransforms_work.html. El archivo muestra cinco cuadrados negros en fila, dentro del canvas. 2 Abre el navegador y muestra la página para ver los cuadrados. En realidad, aunque son figuras cuadradas, son "rectángulos" (de lados iguales). Aquí los consideraremos "rectángulos".
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 134 de 156
Cinco rectángulos. 3 Después del comentario relativo al rectángulo 1 y antes del comentario del rectángulo 2, añade esta línea de código indicada en rojo: //rectangle1 ctx.fillRect(30, 120, 40, 40); ctx.translate(0, 20); //rectangle2 ctx.fillRect(80, 120, 40, 40); La transformación de traslación provoca un desplazamiento para cualquier instrucción posterior, basada en el primer parámetro que corresponde con el valor de desplazamiento sobre el eje X, y el segundo parámetro que es el valor de desplazamiento sobre el eje Y. 4 Guarda el archivo HTML y pasa al navegador para ver el resultado de este cambio.
Los cuatro rectángulos siguientes se han desplazado hacia abajo, al aplicar el desplazamiento sobre el eje Y. 5 Como ves, la transformación de traslación se aplica a todas las instrucciones que aparecen a partir de ella. Del comentario del rectángulo 1 y antes del código que has escrito en el paso 3, añade la siguiente línea, para que el código quede así: //rectangle1 ctx.fillRect(30, 120, 40, 40); ctx.save(); ctx.translate(0, 20); 6 Después del comentario del rectángulo 4 y antes del rectángulo 5, añade la línea indicada aquí en rojo: //rectangle4 ctx.fillRect(180, 120, 40, 40); ctx.restore(); //rectangle5 ctx.fillRect(230, 120, 40, 40); Con estos cambios, lo que hacemos es que antes de añadir la transformación de traslación, guardamos una "instantánea" del estado global del canvas. Después de dibujar el cuarto rectángulo
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 135 de 156
recuperamos el estado global del canvas a la situación que teníamos antes de que se aplicase la transformación. 7 Guarda el archivo HTML y vuelve al navegador para visualizar la página y comprobar el efecto de estos cambios.
Ahora, solo los tres rectángulos centrales se desplazan hacia abajo sobre el eje vertical. 8 Vuelve al editor, y después del comentario del rectángulo 2 y antes del rectángulo 3, añade estas dos líneas: ctx.save(); ctx.rotate(0.19); La primera guarda otra vez una captura de los valores globales de estado del canvas. La segunda añade una transformación de rotación donde el parámetro corresponde al valor en radianes del giro que queremos aplicar a la figura. 9 Guarda al archivo HTML y visualízalo en el navegador para comprobar los cambios.
Los cuatro últimos rectángulos aparecen más abajo y en el centro, dos de ellos girados levemente. Al llamar a la función save dos veces y solo una a la función restore, el último rectángulo queda afectado por la transformación de traslación, pero no por la de rotación. 10 En el editor, detrás del comentario del rectángulo tres y antes del rectángulo 4, añade esta línea: ctx.restore(); 11 Guarda el archivo HTML y vuelve al navegador para ver los cambios en la página.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 136 de 156
Tres rectángulos desplazados hacia abajo y uno de ellos girado 12 Debajo de la función restore del paso 6 y antes del rectángulo 5, añade esta línea: ctx.scale(0.5, 0.7); 13 Guarda de nuevo el archivo y visualízalo en el navegador:
Tres rectángulos desplazados hacia abajo, uno rotado y otro con un cambio de escala.
Creación de un bucle de dibujo Ahora que tienes unas nociones básicas de dibujo con el canvas, vamos a ver la parte "dinámica" de este elemento. Ciertas funciones de JavaScript como setInterval, nos permiten llamar de manera reiterada a una función de dibujo. En cada llamada podemos modificar ligeramente algún parámetro de la figura y con ello se genera la ilusión de animación. 1 En la carpeta HTML5_05lessons, abre el archivo 05_drawingloop.html y guarda una copia del mismo con el nombre 05_drawingloop_work.html. Este archivo contiene un código que dibuja un bonito cielo nocturno con un platillo volante. 2 Abre el navegador para ver la composición inicial.
Un cielo nocturno y un platillo volante. 3 Revisa el código JavaScript que genera el bucle de dibujo.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 137 de 156
Como sucedía en los apartados anteriores, el evento onload del cuerpo de la página llama a la función setup que abre el objeto de imagen y descarga el archivo ufo.png. Fíjate bien en que las variables ctx e img inicialmente se declaran fuera de la función setup. Así conseguimos que estas variables puedan utilizarse desde otras funciones, en este caso las funciones draw y drawbackground. Después de que se abre la imagen podemos utilizar la función setInterval para llamar a la función draw cada 36 milisegundos. La función draw después llama a la función drawbackground que se encarga de dibujar el cielo y las estrellas. Acto seguido, llega al comentario de "ufo" y a partir de ahí empieza a dibujar el platillo volador. 4 Debajo de la línea donde se define la variable img y antes de la función setup, añade las líneas de código que se muestran en rojo aquí: var ctx; var img; var x = 0; var y = 40; Estas variables se utilizan para cambiar la posición del platillo volante, pero tendremos que modificar la función drawpara que utilice estas nuevas variables. 5 En la función draw cambia drawImage para que utilice estas nuevas variables y actualice el valor de x de la siguiente manera: function draw() { drawBackground(); ctx.drawImage(img, x, y); x += 1; } 6 Guarda el archivo HTML y vuelve al navegador para comprobar el resultado de estos cambios. El platillo volador se mueve ahora lentamente por el canvas.
El platillo volante moviéndose por el cielo nocturno. 7 Para repetir la acción y que el platillo volador vuelva a su sitio cuando se sale del área visible, tenemos que reiniciar la variable x en el momento en que su valor supere la anchura del canvas. Además, podemos variar la velocidad de desplazamiento si aumentamos el incremento de la variable x de esta forma:
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 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 tamaño de la propia imagen del platillo volante (50 pixels). 8 Guarda el archivo HTML y vuelve al navegador para comprobar el efecto de estos cambios. Cuando el platillo volante llega al borde derecho del canvas, desaparece y reaparece luego en el lado izquierdo.
El platillo volante se mueve por el cielo, sale por el lado derecho y regresa por el izquierdo 9 Para animar imágenes podemos utilizar también la función Math.random de JavaScript. Por ejemplo, podemos cambiar el valor de la variable y de forma aleatoria, y así nuestro platillo volador, al desaparecer por el lado derecho, volverá por el izquierdo en un lugar imprevisible. En la sentencia if que utilizamos para reiniciar la variable x, inserta la línea que aparece aquí en rojo: x += 3; if(x > 300){ x = -50; y = Math.random() * 300; } Math.random devuelve un número aleatorio entre 0 y 1 que debe multiplicarse por el número máximo que queremos que nos devuelva. En este caso es 300, que es la altura del canvas. 10 Guarda el archivo HTML y vuelve al navegador para ver el efecto de este cambio. El platillo va moviéndose por el cielo en distintas alturas de forma aleatoria.
El platillo se desplaza cambiando de altura a cada ciclo.
Dibujo de gráficas con Canvas Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 139 de 156
El canvas no solo nos permite diseños estáticos, sino también mostrar contenidos cuya forma puede venir derivada de datos externos. En la siguiente práctica vamos a crear un gráfico de barras tomando como fuentes de datos una matriz simple. 1 Abre el archivo 05_graphing.html en el editor. Guarda una copia en la misma carpeta con el nombre 05_graphing_work.html. Como ves, en el código de este archivo hay una matriz de datos que ya hemos definido con una serie de objetos que representan cada uno de los componentes que vamos a dibujar en el diagrama de barras. var sampleData = [ { label:"Profit", value: 1200 }, { label:"Expenses", value: 800 }, { label:"Budget", value: 1000 } ]; La matriz se compone de tres objetos, cada uno compuesto a su vez por una etiqueta y un valor. La propiedad "label" contiene el nombre de cada componente. La propiedad "value" define el valor de ese componente, y es el número que utilizaremos en esta práctica para calcular el tamaño relativo de cada barra dentro del diagrama. 2 Añade las siguientes variables para guardar información de color y formato necesaria para el gráfico, directamente debajo de la matriz de datos que hemos comentado en el paso anterior. var colors = ["rgb(255, 0, 0)", "rgb(0, 255, 0)", "rgb(0, 0, 255)"]; var margin = 30; var spacing = 5; var labelFont = "12px sans-serif"; 3 En la función window.onload que ya viene definida dentro del archivo HTML, añade este código para indicar el estilo de la fuente y su alineamiento dentro del canvas (las líneas en rojo): window.onload = function() { var canvas = document.getElementById('barGraph'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.font = labelFont; ctx.textAlign = "center"; } } 4 Justo debajo de ese mismo código, incluye tres nuevas variables que van a guardar valores temporales (las indicadas en rojo): ctx.textAlign = "center"; var value, label, highest = 0;
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 140 de 156
5 Después necesitaremos establecer el valor máximo dentro de nuestra matriz de datos para poder dibujar las barras correctamente. Añade este bucle justo debajo del código que acabas de escribir en el paso anterior, para calcular el valor más alto. for( var i = 0; i < sampleData.length; i++ ) { value = sampleData[i].value; if( value && value > highest ) highest = value; } La variable highest va a contener el valor más elevado de la serie de datos de nuestra matriz de ejemplo. 6 Para recordar los valores de medida y posición de cada una de las barras que deben dibujarse, añade un objeto "bar" que va guardar los valores de posición x e y, la anchura y la altura de cada barra. Este código debe añadirse justo debajo del bucle del paso anterior. var bar = { x: margin, y: canvas.offsetHeight - margin, width: (canvas.offsetWidth - margin * 2 - ( spacing * ( sampleData.length - 1 ) ) ) / sampleData.length, height: 0 }; En esta práctica, todas las barras del diagrama tienen la misma anchura. Esta anchura la calculamos dividiendo el ancho total del canvas por el número de elementos de nuestra matriz, añadiéndole todos los márgenes y espacios necesarios. El valor vertical (y) se especifica a partir del borde inferior del canvas, puesto que es donde se empiezan a dibujar las barras. 7 A continuación vamos a crear un bucle para dibujar cada una de las barras del gráfico. Guardamos la etiqueta y el valor del elemento en curso dentro de variables temporales y cambiamos el valor de fillColor activo del canvas a un color distinto, recorriendo la matriz de colores definida anteriormente. Este código deberás añadirlo directamente después del que has escrito en el paso anterior. for( i = 0; i < sampleData.length; i++ ) { value = parseInt(sampleData[i].value); label = sampleData[i].label; ctx.fillStyle = colors[ i % sampleData.length ]; } 8 La altura de cada barra se obtiene calculando la proporción entre la barra más grande y la altura del canvas. La altura debe ser un valor negativo ya que las barras se vana dibujar desde abajo hacia arriba partiendo de la base del canvas. Añade este código (la línea destacada en rojo) dentro del bucle del paso anterior: ctx.fillStyle = colors[ i % sampleData.length ]; bar.height = -(canvas.offsetHeight / highest * value - margin * 2); } 9 Lo siguiente que necesitamos es desplazar el puntero de dibujo un poco para separar cada barra con respecto a la anterior, y darles un pequeño espacio entre medias, a fin de que aparezcan como columnas verticales independientes. Aumenta el valor de la posición horizontal para cada barra Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 141 de 156
añadiendo a su valor de x la anchura de cada columna más el tamaño en pixels del espacio de separación. Esto lo hace la línea destacada en rojo: bar.height = -(canvas.offsetHeight / highest * value - margin * 2); bar.x += bar.width + spacing; } 10 Escribe la línea siguiente directamente encima de la que acabas de escribir en el paso anterior para dibujar las barras (la línea en rojo). ctx.fillRect( bar.x, bar.y, bar.width, bar.height ); bar.x += bar.width + spacing; 11 Guarda el archivo y ábrelo ahora en el navegador. Podrás ver tres barras con tres colores distintos.
El gráfico muestra los valores en forma de barras, pero no incluye etiquetas.
Creación de las etiquetas Para que el diagrama de barras sea realmente útil tendremos que añadir diversos indicadores visuales que añadan un contexto, tanto para conocer a qué dato refiere cada barra como para saber el valor a que corresponde. Estas etiquetas deben obtenerse a partir del origen de datos. 1 Tras la línea de código añadida en el paso anterior, escribe la siguiente línea de código que genera una etiqueta de texto debajo de cada barra, con el nombre de la columna. Es la línea indicada en rojo aquí: ctx.fillRect( bar.x, bar.y, bar.width, bar.height ); ctx.fillText( label, bar.x + bar.width/2, bar.y + spacing + parseInt(labelFont) ); bar.x += bar.width + spacing; La función fillText empezará a escribir en el centro de la columna. Se muestra correctamente en pantalla al aplicarse el alineamiento centrado del texto que hemos visto ya en prácticas anteriores. El espacio vertical se calcula a partir de la altura de la fuente. 2 Guarda el archivo y visualízalo en el navegador. Los colores de las etiquetas coinciden con los de las barras correspondientes.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 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 términos absolutos. Tendremos que añadir otra serie de etiquetas, en el lado izquierdo, para representar la escala de valores empleada. 3 Debajo de las llaves que delimitan el bucle, añade esta línea de código para reiniciar el color de la fuente del canvas a negro otra vez (la línea destacada en rojo aquí). for( i = 0; i < sampleData.length; i++ ) { ... } ctx.fillStyle = "rgb(0,0,0)"; Dibujar textos en vertical seguramente acabará siendo más fácil en el futuro, pero en el momento de redactar este manual, la forma más sencilla de rotar textos consiste en rotar el propio canvas. Por suerte, el canvas nos permite guardar su estado previo, así que solamente tenemos que rotarlo de forma temporal. 4 Creamos un bucle sencillo que se ejecutará tres veces, una por cada barra. Este bucle debe aparecer debajo del código que hemos añadido en el paso anterior. for( i = 0; i < 3; i++ ) { } 5 Dentro de este bucle vamos a guardar el estado del canvas antes de aplicar cualquier rotación, lo que hacemos con la siguiente línea (marcada en rojo). for( i = 0; i < 3; i++ ) { ctx.save(); } 6 Vamos a crear una sentencia switch debajo de esta línea. Esta sentencia switch ejecuta una acción distinta dependiendo de la etiqueta que vayamos a dibujar (es el código en rojo). for( i = 0; i < 3; i++ ) { ctx.save();
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 143 de 156
switch( i ) { } } 7 Dentro de la sentencia switch, añade una instrucción case para la primera etiqueta (que se escribirá en la parte inferior del gráfico), la cual va a mostrar el número cero. for( i = 0; i < 3; i++ ) { ctx.save(); switch( i ) { case 0: label = "0"; ctx.textAlign = "right"; ctx.translate( margin-spacing-parseInt(labelFont), canvas.offsetWidth - margin ); break; } } Te habrás dado cuenta de que el canvas se desplaza al ejecutar la sentencia case. Aunque no es absolutamente necesario, esto facilita mucho la tarea de dibujar textos en vertical. 8 Debajo de la llave de cierre de la sentencia switch vamos a añadir una instrucción para rotar el canvas 90 grados con la línea de código que se indica aquí en rojo: for( i = 0; i < 3; i++ ) { ctx.save(); switch( i ) { ... } ctx.rotate( Math.PI/2 ); 9 Ahora, con el canvas girado y colocado, solo tenemos que escribir el texto en él. Añade estas líneas de código que figuran aquí en rojo, justo a continuación de la línea que has escrito en el paso anterior para dibujar texto en el punto donde dejamos nuestro "puntero de dibujo" y después devolvemos al canvas a su estado anterior. for( i = 0; i < 3; i++ ) { ... ctx.rotate( Math.PI/2 ); ctx.fillText( label, 0, 0 ); ctx.restore(); } 10 Aunque se mostrará una de las etiquetas, las otras dos aún no están preparadas. Añade dos instrucciones "case" al selector "switch" que has modificado en el paso 7 para indicar las ubicaciones y los textos de las otras dos barras (escribe el código señalado en rojo): switch( i ) { case 0: label = "0"; ctx.textAlign = "right"; ctx.translate( margin-spacing-parseInt(labelFont), canvas.offsetWidth - margin ); break; case 1: label = (highest/2).toString(); ctx.textAlign = "center";
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 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 más sobre Canvas
Las capacidades del elemento canvas han generado una gran expectación entre la comunidad de desarrolladores y diseñadores web. Aq te indicamos algunos recursos que te ayudaran a investigar más a fondo las posibilidades de este elemento de HTML5. AI->Canvas
Es un complemento para Illustrator que nos permite exportar creatividades desde la aplicación y utilizar el código canvas resultante en nuestras páginas web. Incluso dispone de soporte integrado para animaciones. http://visitmix.com/work/ai2canvas/ Lucidchart
Esta aplicación web es muy parecida a las aplicaciones de diagramas como Visio, y está totalmente construida con el elemento canvas Como extra, podemos exportar los diseños que generemos con ella.. http://www.lucidchart.com/documents/demo
Autoestudio Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 145 de 156
Puedes seguir experimentando con el ejercicio de bucle de dibujo cambiando la imagen animada y la composición del fondo de la escena. Para añadirle más niveles de interacción, cambia la posición de la imagen en movimiento dependiendo de la posición del ratón. Puedes probar a aplicar transformaciones a la composición también, para ver cómo se aplican los efectos en transformaciones múltiples simultáneas.
Repaso Preguntas 1 ¿Cuáles son los requisitos básicos para dibujar con Canvas en HTML5? 2 ¿Cómo se dibuja un círculo en el Canvas? 3 ¿Cómo podemos definir un color semitransparente?
Respuestas 1 Debe definirse e incorporarse un elemento canvas al cuerpo de la página. Las instrucciones de dibujo se aplican después utilizando una referencia al Contexto 2D del elemento canvas. 2 Utilizando la función arc podemos dibujar un círculo completo si indicamos los valores startAngle a cero y endAngle como Math.PI*2. Los ángulos se miden en radianes y la función Math.PI equivale a 180 grados. 3 La función rgba tiene cuatro parámetros. Los tres primeros representan los valores de color rojo, verde y azul, y pueden tener un valor entre 0 y 255, que modifica la fuerza de cada componente de color. El último parámetro (alpha) admite valores entre cero y uno, y determina el grado de opacidad (cero es transparente y 1 totalmente opaco).
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 146 de 156
Lección 6: Contenidos multimedia y funciones Drag y Drop de HTML5 Objetivos: En esta lección aprenderás a incorporar contenidos multimedia a una página web con las etiquetas y de HTML5 y a utilizar las funciones “arrastrar” (“drag”) y “soltar” (“drop”) que permiten a los usuarios interactuar visualmente con los objetos de tu sitio web.
Para empezar En esta lección vamos a trabajar con algunos archivos de la carpeta HTML5_06lessons. Comprueba que has cargado la carpeta HTML5lessons en tu disco duro. Comprueba que has descargado y copiado la carpeta de prácticas de HTML5 en tu ordenador.
Multimedia e interactividad con HTML5 En esta lección aprenderás a integrar contenidos multimedia en tus páginas utilizando los nuevos elementos y de HTML5. Además podrás aprender los conceptos básicos de la funcionalidad “arrastrar y soltar” (“drag-and-drop”) y cómo se añade a una página web con el API Drag and Drop. Aunque a primera vista puede parecer que estos dos elementos no tienen mucho en común, en ambos se pone en evidencia un aspecto fundamental de HTML5 como es la compatibilidad con los distintos navegadores. En los ejercicios siguientes no solo aprenderás los conceptos básicos de uso de multimedia y de las operaciones “drag and drop”, sino las técnicas necesarias para asegurar la compatibilidad en el mayor número posible de navegadores.
Las operaciones Arrastrar y Pegar en la Web Las operaciones “arrastrar” (drag) y “soltar” (drop) permiten a los usuarios colocar visualmente ciertos elementos en pantalla en lugar de hacerlo pulsando un botón. En el entorno de las aplicaciones de software y sistemas operativos esta capacidad de arrastre y liberación de objetos está muy asentada y su uso es muy intuitivo. La funcionalidad de arrastrar y soltar objetos en pantalla ha tardado en trasladarse a la web, y las funcionalidades que podemos encontrar en algunos sitios web probablemente se han logrado programando con Javascript o mediante algún complemento para el navegador, por ejemplo hecho con Flash o Silverlight. El API “Drag and Drop” de HTML5 se basa en la implementación original de Internet Explorer. Han cambiado algunos detalles, y ciertos navegadores ofrecen una sintaxis alternativa, pero la API normalizada está a punto de cerrarse ya. En el momento de redactar este manual, no todos los navegadores soportan ciertas funciones de arrastre y pegado. Por ejemplo, algunos navegadores permiten que se puedan seleccionar objetos o archivos desde otras ventanas o aplicaciones y liberarlos en la página web, pero otros navegadores no admiten esto.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 147 de 156
Conviene saber que en la mayoría de los navegadores podemos arrastrar por defecto imágenes, enlaces y textos seleccionados. Podemos también, en algunos navegadores, arrastrar archivos y textos seleccionados desde el sistema operativo.
Operaciones Drag and Drop compatibles en distintos navegadores En esta lección nos centraremos en las funciones drag-and-drop soportadas en la mayoría de navegadores. Hay algunas diferencias entre los indicadores visuales de una operación drag-and-drop. La funcionalidad de la operación, en general se conserva, con un número reducido de fallbacks. 1 Desde el editor de texto, abre el archivo 06_shopping.html que aparece dentro de la carpeta HTML5_06lessons. Guarda una copia del archive con el nombre 06_shopping_work.html. Abre este archive en tu navegador. Podrás ver que en la página tenemos una lista de la compra. El objetivo de esta práctica consiste en crear una interfaz basada en las operaciones de arrastrar y soltar para comprar artículos. Hemos creado el código JavaScript inicial para evitarte este trabajo, pero tendrás que añadir el que falta para conseguir que la página funcione correctamente.
El aspecto inicial de la página. Mueve el cursor sobre los productos que aparecen en la página. El puntero cambia, y también cambian los bordes de las imágenes. Así los usuarios saben que pueden arrastrar estas imágenes. Estas reglas se han indicado en la hoja de estilos base.css utilizando la clase .tile_list que se ha aplicado a los elementos div que contienen las imágenes de las camisetas. A lo largo de esta lección veremos que se pueden utilizar también otros indicadores visuales. 2 Pasa al editor de textos y mira dentro de la segunda sección . (El primer elemento se utiliza para la librería Modernizr, que hace que los navegadores antiguos puedan reconocer los elementos nuevos de HTML5). Encuentra la variable shoppingcart dentro de la función setup. Esta variable contiene una referencia
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 148 de 156
al div de la lista de la compra., En tu código utilizarás esta referencia para registrar el div como zona para soltar los objetos arrastrados. Añade la siguiente línea de código para evitar el comportamiento por defecto del evento dragenter: function setup(){ shoppingcart = document.getElementById('shoppingcart'); shoppingcart.ondragenter = preventDefault; } Por defecto, en algunos navegadores el evento dragenter muestra un icono que indica que cierta área no es una zona donde se pueda liberar un objeto arrastrado. Necesitamos asignar a este evento la función preventDefault para mantener la consistencia entre los distintos navegadores. El código que se muestra a continuación ya está añadido a la sección de script y define la preventDefault, que necesita lanzar tres tareas concretas para evitar la acción por defecto en algunos navegadores: function preventDefault( event ){ event.stopPropagation(); event.preventDefault(); return false; } La función stopPropagation evita que otros contenedores respondan al mismo evento. La función preventDefault evita el comportamiento por defecto de este evento en ciertos navegadores. Dado que preventDefault es una función de callback de evento, al devolver el valor false evitamos el comportamiento por defecto en ciertos navegadores. 3 En algunos navegadores el evento dragover muestra un icono parecido al del evento dragenter, indicando que este contenedor no es una zona donde se puedan soltar objetos. Para evitar el comportamiento por defecto del evento dragover, añade el código marcado en rojo después de la línea de código del paso anterior. function setup(){ shoppingcart = document.getElementById('shoppingcart'); shoppingcart.ondragenter = preventDefault; shoppingcart.ondragover = preventDefault; } 4 Desplázate hacia la mitad inferior del código HTML de la página. Para permitir el arrastre desde la lista que contiene las imágenes de las camisetas, añade el atributo ondragstart al DIV que tiene asignada una clase CSS llamada tile_list, y asigna al atributo el valor que se indica aquí: En el momento de redactar este manual, el API Drag and Drop no está diseñada para realizar operaciones de arrastrar y soltar. El API Drag and Drop API permite a los desarrolladores responder a los eventos, pero no moverlos realmente. La siguiente implementación aporta las capacidades de arrastre y pegado necesarias para poder hacer una aplicación de carrito de la compra sencilla. 5 Dentro de la función dragStarted, ya definida para esta actividad, añade la siguiente línea de código para mantener una referencia al elemento arrastrado por el usuario dentro de la variable dragging predefinida: function dragStarted( event ){ dragging = event.target; } 6 Para implementar la actividad de soltar en nuestra lista de la compra, utiliza la función dragDrop de modo que responda al evento drop de la lista de artículos elegidos: function setup(){ shoppingcart = document.getElementById('shoppingcart'); shoppingcart.ondragenter = preventDefault;
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 149 de 156
shoppingcart.ondragover = preventDefault; shoppingcart.ondrop = dragDrop; } 7 Dentro de la función dragDrop predefinida, introduce la siguiente línea de código para añadir a la lista de la compra el objeto que se ha arrastrado hacia él function dragDrop(event){ addToCart( dragging, 1 ); }
Cómo hacer que un objeto sea arrastrable en HTML5 En algunos navegadores, como Internet Explorer 10, podemos por defecto, arrastrar imágenes, enlaces y textos seleccionados y mantener su incapacidad para soltarlos en otros lugares, y todo ello sin utilizar callbacks de Javascript. Para que el usuario pueda arrastrar objetos hacia otros elementos, hay que añadirles el atributodraggable con el valor true, como se hace en este ejemplo: Elemento 1 de la lista
8 En el menú Archivo, selecciona Guardar y visualiza la página en el navegador. Dependiendo del navegador que utilices, verás resultados muy distintos si arrastras una de las imágenes dentro de la lista de la compra. en los navegadores Webkit, como Safari 5 o Chrome 11, el efecto que obtenemos es el esperado y la imagen aparece en la lista de la compra. En otros navegadores como Firefox 4, el comportamiento por defecto de una imagen arrastrada a la zona de destino consiste en que esa imagen se abre en la misma ventana donde aparece la zona de destino. Para asegurarnos de que este comportamiento queda anulado, debemos volver al editor y añadir la siguiente línea de código: function dragDrop(event){ addToCart( dragging, 1 ); return preventDefault(event); } 9 Guarda el archive y vuelve a probarlo e el navegador. Si arrastras las camisetas hacia la zona de la lista, quedarán añadidas a la lista de artículos comprados.
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 150 de 156
La lista de la compra mantiene la relación de elementos arrastrados hacia él, los visualiza y muestra un enlace para proceder a la siguiente fase de la compra (“checkout”).
Incorporar elementos de audio y vídeo Añadir video y sonido a una página web es una manera de hacerla más atractiva. Los contenidos multimedia captan la atención del visitante y nos permiten llegar a audiencias que, muy a menudo, adoptan una actitud de rechazo hacia las páginas con texto abundante. En HTML5 se resuelve directamente la construcción de páginas con audio y vídeo. Antes de la llegada de HTML5 dependíamos del uso de complementos instalables, como Flash, QuickTime o Silverlight para poder mostrar contenidos de vídeo. Con HTML5 se resuelve esta necesidad ya que especifica un elemento HTML llamado que funciona de manera nativa en el navegador y se integra con Javascript. En esta sección aprenderás a incorporar vídeo a tu página web, con la posibilidad de que el vídeo empiece a reproducirse automáticamente al cargarse la página, y también aprenderás a utilizar los controles de reproducción que nos ofrecen los propios navegadores. 1 Desde la carpeta HTML5_06lessons, abre la página 06_video.html y guarda una copia de este archivo como 06_video_work.html. En la línea 8 dentro del elemento , añade esta línea de código: Como ya veíamos en el caso del elemento imagen, el elemento video tiene un atributo src cuyo valor apunta a la ubicación del archivo de vídeo que debe reproducir. El atributo autoplay le indica al navegador que debe empezar a reproducir el vídeo en cuanto haya cargado la página. Guarda el archivo y visualízalo en Internet Explorer 9. Podrás ver una página parecida a la que se muestra en la siguiente figura. El vídeo debe empezar a reproducirse automáticamente. En versiones antiguas de Internet Explorer, Firefox o Chrome, no vas a ver probablemente ningún vídeo, ¡pero este problema se resolverá en seguida!
Diego Daniel Abratte LOGOS – Desarrollo de sistemas Informáticos Página 151 de 156
El elemento video tal y como se muestra en Internet Explorer 9. Puesto que la forma de declarar el vídeo en HTML5 es estándar, los desarrolladores de navegadores son los responsables de que cada navegador siga las directrices del estándar y muestre el vídeo correctamente. Como desarrollador Web, tu trabajo consiste en centrarte en los contenidos y las personalizaciones, y ahora vamos a ver algunas maneras en que podemos hacer esto. 2 Cierra el navegador y vuelve al editor de texto. Para tener un mayor control sobre la reproducción del vídeo, elimina el atributo autoplay y añade el atributo controls, con lo que la línea de código quedaría así (destacando los cambios en rojo):
