Construcción de páginas web.pdf

CP

>> CERTIFICADO DE PROFESIONALIDAD

[ MF0950_2 ]

210 HORAS DE FORMACIÓN

CONSTRUCCIÓN DE PÁGINAS WEB

®

STARBOOK

JULIO GÓMEZ LÓPEZ ALFREDO ALCAYDE GARCÍA

www.starbook.es/cp

La ley prohíbe Copiar o Imprimir este libro

CONSTRUCCIÓN DE PÁGINAS WEB © Julio López Gómez y Alfredo Alcayde García © De la Edición Original en papel publicada por Editorial RA-MA ISBN de Edición en Papel: 978-84-9265-084-2 Todos los derechos reservados © RA-MA, S.A. Editorial y Publicaciones, Madrid, España. MARCAS COMERCIALES. Las designaciones utilizadas por las empresas para distinguir sus productos (hardware, software, sistemas operativos, etc.) suelen ser marcas registradas. RA-MA ha intentado a lo largo de este libro distinguir las marcas comerciales de los términos descriptivos, siguiendo el estilo que utiliza el fabricante, sin intención de infringir la marca y solo en beneficio del propietario de la misma. Los datos de los ejemplos y pantallas son ficticios a no ser que se especifique lo contrario. RA-MA es una marca comercial registrada. Se ha puesto el máximo empeño en ofrecer al lector una información completa y precisa. Sin embargo, RA-MA Editorial no asume ninguna responsabilidad derivada de su uso ni tampoco de cualquier violación de patentes ni otros derechos de terceras partes que pudieran ocurrir. Esta publicación tiene por objeto proporcionar unos conocimientos precisos y acreditados sobre el tema tratado. Su venta no supone para el editor ninguna forma de asistencia legal, administrativa o de ningún otro tipo. En caso de precisarse asesoría legal u otra forma de ayuda experta, deben buscarse los servicios de un profesional competente. Reservados todos los derechos de publicación en cualquier idioma. Según lo dispuesto en el Código Penal vigente ninguna parte de este libro puede ser reproducida, grabada en sistema de almacenamiento o transmitida en forma alguna ni por cualquier procedimiento, ya sea electrónico, mecánico, reprográfico, magnético o cualquier otro sin autorización previa y por escrito de RA-MA; su contenido está protegido por la Ley vigente que establece penas de prisión y/o multas a quienes, intencionadamente, reprodujeren o plagiaren, en todo o en parte, una obra literaria, artística o científica. Editado por: RA-MA, S.A. Editorial y Publicaciones Calle Jarama, 33, Polígono Industrial IGARSA 28860 PARACUELLOS DE JARAMA, Madrid Teléfono: 91 658 42 80 Fax: 91 662 81 39 Correo electrónico: [email protected] Internet: www.ra-ma.es y www.ra-ma.com Maquetación: Gustavo San Román Borrueco Diseño Portada: Antonio García Tomé ISBN: 978-84-9964-338-0 E-Book desarrollado en España en septiembre de 2014

Construcción de Páginas Web Julio Gómez López Alfredo Alcayde García

MATERIAL ADICIONAL Este libro dispone de su propia página web que complementa la obra, le permite ampliar sus conocimientos a través de software referenciado a lo largo del libro, presentaciones, herramientas de autoevaluación para evaluar sus conocimientos, etc.

http://www.adminso.es

A través de esta página web los usuarios que se registren, podrán acceder a un curso virtual realizado con . Para poder acceder al curso, el sistema le pedirá la contraseña: HTML

Para Encarni.

ÍNDICE INTRODUCCIÓN....... ................................................................... 13 CAPÍTULO 1. LOS LENGUAJES DE MARCAS .................................. 17 1.1 1.2

INTRODUCCIÓN ......................................................................................17 CARACTERÍSTICAS DE LOS LENGUAJES DE MARCAS ....................................18

1.3 1.4

CLASIFICACIÓN DE LOS LENGUAJES DE MARCAS ........................................19 EL LENGUAJE HTML..................................................................................19

1.4.1 Etiqueta..............................................................................................20 1.4.2 Documento HTML.................................................................................21 1.4.3 Definición del tipo de documento DTD.....................................................22 1.5 ETIQUETAS BÁSICAS ...............................................................................27 1.5.1 1.5.2 1.5.3 1.5.4 1.5.5 1.5.6 1.5.7

Etiquetas para el formato de texto .........................................................27 Comentarios........................................................................................28 Conjunto de caracteres y caracteres especiales ........................................29 Listas .................................................................................................29 Tablas ................................................................................................31 Colores...............................................................................................33 Enlaces...............................................................................................35

1.6 MARCOS.................................................................................................36 1.6.1 Frames ...............................................................................................36 1.6.2 Iframes ..............................................................................................38 1.7 CAPAS....................................................................................................40

8

CONSTRUCCIÓN DE PÁGINAS WEB

1.8

© STARBOOK

RESUMEN ...............................................................................................43

TEST DE CONOCIMIENTOS.................................................................................45 EJERCICIOS PROPUESTOS .................................................................................46

CAPÍTULO 2. IMÁGENES Y ELEMENTOS MULTIMEDIA.................. 47 2.1

ELEMENTOS MULTIMEDIA .........................................................................47

2.1.1 Imágenes ...........................................................................................47 2.1.2 Audio .................................................................................................48 2.1.3 Vídeos ................................................................................................49 2.1.4 Otros elementos ..................................................................................50 2.2 UTILIZACIÓN DE IMÁGENES .....................................................................51 2.2.1 Imágenes ...........................................................................................51 2.2.2 Mapa de imágenes ...............................................................................52 2.3 UTILIZACIÓN DE AUDIO ...........................................................................54 2.3.1 Bgsound .............................................................................................54 2.3.2 Embed................................................................................................55 2.3.3 Audio .................................................................................................56 2.4 UTILIZACIÓN DE VÍDEO ...........................................................................57 2.4.1 Embed................................................................................................57 2.4.2 Vídeo .................................................................................................58 2.4.3 Youtube..............................................................................................60 2.5 UTILIZACIÓN DE OTROS ELEMENTOS.........................................................62 2.5.1 Marquesinas........................................................................................62 2.5.2 Object ................................................................................................63 TEST DE CONOCIMIENTOS.................................................................................69 EJERCICIOS PROPUESTOS .................................................................................70

CAPÍTULO 3. TÉCNICAS DE ACCESIBILIDAD Y USABILIDAD ....... 71 3.1 CONCEPTOS BÁSICOS..............................................................................71 3.1.1 Accesibilidad .......................................................................................71 3.1.2 Usabilidad ...........................................................................................73 3.2

VERIFICANDO LA ACCESIBILIDAD .............................................................74

3.2.1 Niveles de accesibilidad ........................................................................74 3.2.2 Herramientas ......................................................................................79

© STARBOOK

3.3

ÍNDICE 9

DISEÑO DE SITIOS WEB USABLES.............................................................84

TEST DE CONOCIMIENTOS.................................................................................86 EJERCICIOS PROPUESTOS .................................................................................87

CAPÍTULO 4. HERRAM IENTAS DE EDICIÓ N WEB ......................... 89 4.1

INTRODUCCIÓN ......................................................................................89

4.2 HERRAMIENTAS DE EDICIÓN WEB .............................................................91 4.2.1 Dreamweaver......................................................................................91 4.2.2 NVU ...................................................................................................94 4.2.3 Bluefish ..............................................................................................96 4.3 OTRAS HERRAMIENTAS ............................................................................98 4.3.1 Gimp..................................................................................................98 4.3.2 Audacity ...........................................................................................102 4.3.3 Wink ................................................................................................103 TEST DE CONOCIMIENTOS...............................................................................106 EJERCICIOS PROPUESTOS ...............................................................................107

CAPÍTULO 5. FORMULARIOS EN LA CONSTRUCCIÓN DE PÁGINAS WEB .......................................................................... 109 5.1

INTRODUCCIÓN ....................................................................................109

5.2 ELEMENTOS Y ATRIBUTOS ......................................................................110 5.2.1 El formulario .....................................................................................110 5.2.2 Elementos de entrada.........................................................................111 5.2.3 Botones............................................................................................114 5.2.4 Listas desplegables ............................................................................115 5.2.5 Etiquetas ..........................................................................................117 5.2.6 Grupos de elementos..........................................................................117 5.3 5.4 5.5

EVENTOS..............................................................................................119 CREACIÓN DE FORMULARIOS..................................................................121 ACCESIBILIDAD Y USABILIDAD ...............................................................123

5.5.1 Criterios de accesibilidad.....................................................................124 5.5.2 Ejemplo............................................................................................124 5.6 RESUMEN .............................................................................................125 TEST DE CONOCIMIENTOS...............................................................................127

10

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

EJERCICIOS PROPUESTOS ...............................................................................128

CAPÍTULO 6. PLANTILLAS EN LA CONSTRUCCIÓN DE PÁGINAS WEB .......................................................................... 129 6.1 6.2

INTRODUCCIÓN ....................................................................................129 REPOSITORIOS LIBRES DE PLANTILLAS ...................................................130

6.3 EJEMPLO DE UTILIZACIÓN DE PLANTILLAS ...............................................131 TEST DE CONOCIMIENTOS...............................................................................140 EJERCICIOS PROPUESTOS ...............................................................................141

CAPÍTULO 7. HOJAS DE ESTILO EN LA CONSTRUCCIÓN DE PÁGINAS WEB .......................................................................... 143 7.1 INTRODUCCIÓN ....................................................................................143 7.1.1 Una breve historia de CSS...................................................................144 7.1.2 CSS, HTML, XHTML ............................................................................145 7.1.3 Funciones y características..................................................................146 7.1.4 El modelo de formato visual y el modelo de caja ....................................147 7.2 TIPOS DE ESTILOS ................................................................................148 7.3 SELECTORES Y REGLAS DE ESTILO..........................................................151 7.4 ATRIBUTOS DE ESTILO ..........................................................................154 7.4.1 Propiedades, valores, unidades y media-type.........................................154 7.4.2 Media-types ......................................................................................158 7.4.3 Propiedades de fondo y color ...............................................................159 7.4.4 Propiedades de textos ........................................................................162 7.4.5 Propiedades de las cajas .....................................................................164 7.4.6 Dimensiones en CSS ..........................................................................168 7.5 7.6

ESQUEMAS (LAYOUTS)...........................................................................169 HERRAMIENTAS PARA LA CREACIÓN DE HOJAS DE ESTILO .........................173

7.6.1 Eclipse..............................................................................................173 7.6.2 Eclipse Web Developer Tools ...............................................................175 7.7 7.8

ACCESIBILIDAD Y USABLIDAD ................................................................178 RESUMEN .............................................................................................180

TEST DE CONOCIMIENTOS...............................................................................181 EJERCICIOS PROPUESTOS ...............................................................................182

© STARBOOK

ÍNDICE 11

SOLUCIONARIO DE LOS TEST DE CONO CIMIENTOS .................. 185 ÍNDICE ALFABÉTICO.................................... ............................. 187

INTRODUCCIÓN Este libro surge con el propósito de acercar al lector los aspectos más importantes que encierra la Construcción de páginas web ante la creciente demanda de personal cualificado. Con tal propósito, puede servir de apoyo también para obtener la Cualificación Profesional Confección y publicación de páginas web .

Marco legal El módulo formativo Construcción de Páginas Web se encuadra dentro de la Confección y publicación La de Familia páginasProfesional web perteneciente Cualificación Profesional a la Familia Profesional Informática y Comunicaciones. Informática y Comunicaciones se regula según se establece en el Real Decreto 1201/2007, de 14 de septiembre (BOE de 27 de septiembre de 2007).

Las capacidades que se desarrollan en el módulo formativo son las siguientes: 

C1. Identificar los elementos proporcionados por los lenguajes de marcas y

confeccionar páginas web utilizando estos lenguajes teniendo en cuenta sus especificaciones técnicas. 

C2. Identificar las características y funcionalidades de las herramientas de edición

web, y utilizarlas en la creación de páginas web teniendo en cuenta sus entornos de desarrollo. 

C3. Confeccionar plantillas para las páginas web atendiendo a las especificaciones

de diseño recibidas. 

C4. Crear formularios e integrarlos en páginas web para incluir interactividad en las mismas, siguiendo unas especificaciones funcionales recibidas.

14

CONSTRUCCIÓN DE PÁGINAS WEB



© STARBOOK

C5. Describir las características de las hojas de estilo para dar formato a las

páginas web, y crear ficheros de estilo de acuerdo a un diseño especificado.

Contenidos A lo largo del libro se estudian los aspectos fundamentales relacionados con la Construcción de páginas web. El libro se divide en los siguientes capítulos: 

Capítulo 1. Los lenguajes de marcas . En este capítulo se ven las características

principales de los lenguajes de marcas y aprenderá el lenguaje HTML utilizado para la creación de páginas web. 

Capítulo 2. Imágenes y elementos multimedia . Aprenderá los aspectos más

importantes de las imágenes y elementos multimedia, y a cómo utilizarlas en su página web. 

Capítulo 3. Técnicas de accesibilidad y usabilidad. En este capítulo se verán

las técnicas de accesibilidad y usabilidad más utilizadas para permitir que su web sea navegable y accesible a todos los usuarios. 

Capítulo 4. Herramientas de edición web. En este capítulo aprenderá a utilizar

las herramientas más importantes para la creación de páginas web. Además, aprenderá a utilizar las herramientas más importantes para manejar los elementos más importantes de una web como son las imágenes, vídeos, sonidos, etc. 

Capítulo 5. Formularios en la construcción de páginas web . Aprenderá a

utilizar los formularios para permitir que los usuarios envíen información. 

Capítulo 6. Plantillas en la construcción de páginas web . En este capítulo

aprenderá a utilizar las plantillas para construir páginas web de una forma fácil y sencilla. 

Capítulo 7. Hojas de estilo en la construcción de páginas web. En el último

capítulo aprenderá a utilizar las hojas de estilo para mejorar la apariencia de su sitio web y permitir separar el contenido de la web con su apariencia.

A lo largo de libro se proponen una serie de actividades, ejercicios y cuestionarios de autoevaluación que le permitirán adquirir mejor los conocimientos desarrollados a lo largo de la obra. Además, como recurso complementario al libro, el lector podrá descargar a través del portal www.adminso.es software referenciado a lo largo de la obra, autoevaluación, actividades resueltas, etc.

© STARBOOK

INTRODUCCIÓN 15

Figura I.1. www.adminso.es

1 Capítulo

1 LOS LENGUAJES DE MARCAS OBJETIVOS: 

Conocer las características más importantes de los lenguajes de marcas.



Conocer el lenguaje HTML.



Utilizar las diferentes etiquetas HTML para la edición de páginas web.



Utilizar los marcos y capas para poder estructura la información de una página web.

1.1 INTRODUCCIÓN Un lenguaje de marcas se podría definir como un lenguaje que permite codificar un documento, incorporando etiquetas o marcas que contienen información adicional acerca de la estructura, formato y presentación del texto. Aparecieron por primera vez en los años 60, cuando IBM intentó resolver el problema del tratamiento de documentos procedentes de diferentes plataformas mediante el lenguaje GML (Generalized Markup Language). El lenguaje permitía ajustar el formato y presentación del documento automáticamente para varios dispositivos con solo indicar el perfil. El lenguaje tras un largo proceso fue estandarizado en 1986 por la ISO (Organización Internacional para la estandarización) pasándose a llamar SGML ( Standard Generalized MarkUp Language), convirtiéndose en el padre de todos los lenguajes de marcas. SGML se presenta como un lenguaje muy potente aunque a la vez complejo desde el cual han nacido multitud de lenguajes de marcas, donde HTML se presenta como el más popular de sus hijos, aunque existen otros muchos otros como XML, Latex, XHTML, Tex, SVG, MathML, RTF, RSS,…

18

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

A continuación se puede ver un ejemplo del lenguaje SGML:

Listado 1.1.html Javier López Segovia 123456789 Vacia 11 Almería

1.2 CARACTERÍSTICAS DE LOS LENGUAJES DE MARCAS Todo lenguaje de marcas debe cumplir las siguientes características:  Codificación en texto plano. Todo documento puede estar compuesto únicamente por texto sin formato, sólo caracteres. Pueden utilizarse distintas codificaciones como: ASCII, Unicode, etc. 

Fácil de interpretar. El archivo puede leerse o interpretarse directamente.

Además, se puede codiciar por cualquier editor de textos. 

Portabilidad. Al ser un documento de texto es independiente de la plataforma,

sistema operativo y/o editor con el que se ha creado. 

Compactibilidad. En el documento se entremezcla el texto con las marcas,

generando un único archivo. 

Flexibilidad. Se puede adaptar fácilmente a sus necesidades añadiendo nuevas

etiquetas, atributos, etc.

© STARBOOK

CAPÍTULO 1. LOS LENGUAJES DE MARCAS 19

1.3 CLASIFICACIÓN DE LOS LENGUAJES DE MARCAS Los lenguajes de marcas se pueden clasificar de diferentes formas, aunque la más extendida establece tres categorías principales: 





Lenguajes de presentación. Permiten indicar el formato del texto. Alguno de los

lenguajes más utilizados son: RTF, HTML, TeX, etc. Lenguajes procedimentales. Su uso se orienta a la presentación del texto, aunque a la vez es visible para el usuario que edita el texto. Sin embargo, el programa que genera la presentación del documento interpreta el código presentando el mismo al usuario final con el formato adecuado. Alguno de los lenguajes más utilizados son: HTML, TeX, etc. Lenguajes descriptivos o semánticos. Son lenguajes enfocados a definir el

contenido del texto y no su formato. En este caso el documento se presenta tal y como es y no como debe presentarse. Son lenguajes procedimentales SML, SGML, etc.

1.4 EL LENGUAJE HTML Internet se ha convertido en la entidad virtual más variada que ha desarrollado el hombre. El número de usuarios crece periódicamente en cientos de miles por todo el mundo, sin que parezca que vaya a dejar de aumentar. Internet es un lugar virtual donde todo el mundo es bienvenido para hacer negocios, comunicarse, buscar información o, simplemente, divertirse navegando por la red. A continuación, vamos a aprender a crear nuestra propia página web utilizando el lenguaje HTML. HTML (HyperText Markup Language) es un lenguaje de marcas de hipertexto que incorpora al texto etiquetas o marcas que contienen información adicional sobre su estructura o su presentación. HTML es un lenguaje que el navegador va interpretando para representar la página web. La historia del lenguaje HTML se remonta a 1991 cuando el padre del World Wide Web, Tim Berners-Lee, publicó el primer documento HTML. En su primera versión, el lenguaje poseía 22 etiquetas y era relativamente sencillo. Sin embargo, en la actualidad, la especificación HTML 4.1 está formada por más de 90. A partir de este momento, el lenguaje se ha estado desarrollando y no ha parado de evolucionar.

20

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

URL DE INTERÉS En el enlace http://es.wikipedia.org/wiki/Tim_Berners-Lee puedes ver la bibliografía de Tim Bernes-Lee, padre del lenguaje WWW.

En la figura 1.1 se muestra la evolución que ha ido sufriendo el lenguaje HTML desde sus inicios hasta la actualidad. 1989- 1991

HTML 1.0 HTML 2.0

Páginas relativamente sencillas.

1995

HTML 3.0

Guerra de los navegadores. Los fabricantes competían por tener un navegador con más funciones. El programador debía hacer una página para cada navegador.

1998

HTML 4.0

W3C tomó el mando y puso fin a la guerra de los navegadores creando una sola versión. Se separó estructura de presentación (CSS).

1999

HTML 4.1

Versión más usada, y extendida. Hoy en día se sigue usando y es la más usada.

2000

XHTML 1.0

Unión de XML y HTML. Concepto Web Semántica.

2009

XHTML 2.0

Casi ha sido desbancado por HTML 5.0.

2009- Futuro

HTML 5.0

Mejor estructura. API para vídeo y audio.

Figura 1.1. Evolución histórica del lenguaje HTML

En este capítulo vamos a ver la especificación HTML 4.1 por ser la más extendida en la actualidad.

1.4.1 Etiqueta El lenguaje HTML está compuesto por etiquetas que le indican al navegador información sobre los datos que recibe. La sintaxis de una etiqueta es: Texto

© STARBOOK

CAPÍTULO 1. LOS LENGUAJES DE MARCAS 21

Por ejemplo, como veremos más adelante la etiqueta < b> permite poner el texto en negrita. Texto que aparece en negrita

Las etiquetas tiene opciones o modificadores que permiten cambiar su comportamiento. Por ejemplo, el atributo size de la etiqueta permite indicar el tamaño del tipo de letra: Hola a todo el mundo

1.4.2 Documento HTML Básicamente, todo documento HTML tiene la siguiente estructura:

Listado 1.2.html

donde: 



La primera línea contiene información acerca de la versión de HTML con la que estamos trabajando, también conocida como la línea de definición del lenguaje (DTD). . Contiene información no visible sobre la página. Esta información puede

ser el autor, título, palabras clave para los buscadores, etc. 

. Es la parte más importante de la página web y en esta zona es donde se

guarda todo el contenido que va a mostrar el navegador. A continuación, vamos a ver de forma resumida los elementos más importantes de cada sección.

22

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

1.4.3 Definición del tipo de documento DTD Para que un documento HTML sea válido según el W3C, debe especificar qué versión de HTML utiliza. Es recomendable utilizar un DTD siempre que sea posible, ya que permite la separación de los datos de la presentación, y al mismo tiempo permite que nuestra página sea fácilmente adaptable a nuevas especificaciones del lenguaje. HTML, en su especificación 4.01, tiene tres tipos de DTD, de modo que puede seleccionar el que mejor se adapte a nuestras necesidades. A continuación vamos a presentar los tres tipos de DTD desde la versión más restrictiva hacia la más permisiva: 

DTD Estricto (Strict DTD). Es la versión más estricta e incluye todos los

elementos y atributos de la especificación excepto los elementos y atributos de presentación. W3C no recomienda utilizar los atributos de presentación ya que como veremos más adelante se sustituyen por las hojas de estilo que veremos en el siguiente capítulo. La declaración de este tipo de documento se realiza: 

DTD Transicional (Transitional DTD). Incluye todos los elementos del DTD

estricto más los elementos de presentación (que W3C no recomienda utilizar). La declaración de este tipo de documento se realiza: 

DTD para marcos (Frameset DTD). Es idéntico al DTD transicional con la única diferencia que incluye soporte para frames. Cambiando en el modelo de contenidos del elemento por el .

La declaración de este tipo de documento se realiza:

1.4.3.1 CABECERA La cabecera de un documento HTML se encuentra delimitada por las etiquetas y . En la cabecera se encuentra la información que aunque no se presenta directamente al usuario, es (que importante. Por los ejemplo, se incluye información el título de la página, palabras clave utilizarán motores de búsqueda paracomo: indexar nuestro documento), información sobre el autor, etc.

© STARBOOK

CAPÍTULO 1. LOS LENGUAJES DE MARCAS 23

Dentro de la cabecera nos podemos encontrar con las siguientes etiquetas: 

. Permite indicar el título de la página web que aparecerá en

la barra del navegador. Es muy importante asignarle a nuestra web un título, lo más representativo posible. Debido a que esta información será propuesta al usuario, por ejemplo cuando desea archivar la página en favoritos, entonces el título es el nombre que se le presenta para almacenar el enlace a la web. Título de la página web …

Figura 1.5. Mi primera tabla en HTML

© STARBOOK

CAPÍTULO 1. LOS LENGUAJES DE MARCAS 33

En la tabla 1.3 puede ver los modificadores para las etiquetas de las tablas que nos permiten hacer que una celda ocupe varias columnas (colspan) o varias filas ( rowspan), establecer el tamaño de ancho (width) o alto (height) de una tabla, o permiten establecer el borde y el color de la tabla.

ACTIVIDAD 1.4 

Crea una tabla que muestre un horario de trabajo semanal.



Crea una página web que muestre la siguiente tabla: DATOS FINANCIEROS INGRESOS I NGRESOS

ENERO

G GASTOS ASTOS

700 € 7

1 .1.100 1 €

2.000 . €

- 1 .-1.500 5 €

D DIFERENCIA IFERENCIA - 4 -400 €

… DICIEMBRE 

5

500 €

Utiliza el atributo atributo bcolor bcolorpara paradarle darlecolor coloraalas lasanterioes anterioestablas. tablas.

Tabla 1.3. Otras etiquetas de interés para tablas Etiqueta

Descripción



Una celda ocupa dos celdas de forma horizontal.



Una celda ocupa dos celdas de forma vertical.



Indica el ancho de una celda, fila o tabla.



Indica el alto de una celda, fila o tabla.



Indica que el borde de la tabla vale 1.



Indica el color de una celda, fila o tabla.

1.5.6 Colores las etiquetas delfondo lenguaje admiten laPara propiedad bien para dar color al texto,Algunas o para de establecerlo como del elemento. indicarcolor, un determinado color se utiliza la combinación de los tres colores básicos (rojo, verde y azul). Para indicar el color

34

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

puede utilizar la codificación de 8 bits (valores entre 0 y 255) o la codificación hexadecimal (valores entre 00 y FF). Por ejemplo, el color negro en HTML es #000000. Adicionalmente HTML define una paleta de 17 colores heredados de la paleta VGA de Windows (véase la tabla 1.4). Para utilizarlos, es posible utilizar el código del color o su correspondiente nombre. Tabla 1.4. Paleta de colores HTML Etiqueta

C. Hexadecimal

Color

Descripción

BLACK

#000000

NEGRO

TEAL BLUE

#008080 #0000FF

TEAL AZUL

NAVY LIME

#000080 #00FF00

AZUL MARINO LIMA

WHITE

#FFFFFF

BLANCO

PURPLE YELLOW OLIVE

#800080 #FFFF00 #808000

PÚRPURA AMARILLO OLIVA

RED MAROON

#FF0000 #800000

ROJO MARRÓN

GRAY

#808080

GRIS

FUCHSIA GREEN SILVER

#FF00FF #008000 #C0C0C0

FUCSIA VERDE PLATA

AQUA

#00FFFF

AGUA

ACTIVIDAD 1.5 



Crea una página página web web en en la la que que utilices utilices lalaetiqueta etiqueta texto para que que la la página página tenga tenga 55 párrafos párrafos yy cada cadauno unodedeununcolor color diferente. Crea una página web que muestre la palabra “murcielago” con cada letra en un color color diferente. diferente.

© STARBOOK

CAPÍTULO 1. LOS LENGUAJES DE MARCAS 35

1.5.7 Enlaces Probablemente el enlace sea el elemento más importante dentro del lenguaje HTML, ya que sin él no tiene sentido hablar de navegación. Para definir un enlace se utiliza la etiqueta de lenguaje , cuya sintaxis es la siguiente: Texto del enlace o imagen

donde URL es el destino del enlace que puede ser: 

Enlaces a sitios externos. Para ello, debe indicar la dirección completa.

Enlace a un sitio web 

Enlace a páginas internas. En este caso puede utilizar direccionamiento

relativo. Enlace a nuestro sitio web 

Enlaces dentro del documento. Para este tipo de enlaces se crean y utilizan las

marcas del propio documento. Enlace a nuestro documento 

Enlace a archivos. Descargar fichero



Enlace a direcciones de correo electrónico. Este tipo de enlaces permite abrir un gestor de correo y enviar un email a la dirección enlazada. Estos enlaces se

utilizan cada vez menos debido a que son una fuente para rastrear direcciones para utilizarlas como correo spam. Enviar um email

La etiqueta target permite indicar el destino donde se abre el enlace, es decir, si se muestra en el mismo navegador, en una nueva página del navegador, dentro de un frame, etc. Las opciones más utilizadas son: target=_blank abre una nueva página; target=_top carga la página en la ventana principal; target=nombre carga la página en el frame indicado por su nombre.

36

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

Así por ejemplo, si desea crear un enlace que cargue en una nueva página Google tendremos: Listado 1.7.html Ir a google

ACTIVIDAD 1.6 



Crea una página web que contenga los enlaces a 5 buscadores. Crea una página web que contenga un listado de enlace con las páginas que más utilizas.

1.6 MARCOS A continuación se van a ver los diferentes modos de estructura el contenido de una página web.

1.6.1 Frames Los frames permiten crear páginas a partir de la composición de otras páginas. Es decir, permite crear una página divida en zonas y en cada una de las zonas se muestra otra página web. En la actualidad, los frames se están dejando de utilizar estas etiquetas, debido a la usabilidad y accesibilidad, y en la especificación HTML 5.0 desaparecen. Las etiquetas que permiten utilizar frames son: 

. Indica al navegador que se va a declarar un conjunto de frames y rows y cols, indicando define sus proporciones en de pantalla atributos las valores en %, o el resto lo quemediante quede sinlos utilizar (*).

© STARBOOK



CAPÍTULO 1. LOS LENGUAJES DE MARCAS 37

. Define el contenido de la ventana, para ello sólo hay que indicarle en

su atributo SRC la página web a visualizar. A continuación se muestra un ejemplo que utiliza 3 frames. Es importante destacar que cuando trabaja con frames, el cuerpo de la página no está formado por la etiqueta , ésta deja lugar a la etiqueta , etiqueta con la cual se define la forma en la que esta dividida la página. En este ejemplo se ha optado por realizar una división en 3 columnas, la primera de ellas de un tamaño del 25%, al igual que la última, dejando el resto para la central. Seguidamente se define el enlace con las distintas páginas que desea vincular a cada frame. Este proceso se realiza mediante el uso de la etiqueta , a través del atributo src se le proporciona la URL de la página. Para finalizar, cierre el frame con la etiqueta .

Listado 1.8.html Mi primera página con frames

En la figura 1.6 puede ver el resultado del ejemplo.

Figura 1.6. Ejemplo de uso de los frames

38

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

ACTIVIDAD 1.7 



Crea las páginas cabecera.html, menu.html, contenido. contenido.html tml y pie.ht pie.htmll. Cada página debe tener un color de fondo diferente. Crea una página página de deframes frames para cada una de las siguientes estructuras:

MENU

CONTENIDO

CABECERA

CABECERA

MENU

MENU

CONTENIDO

CONTENIDO CONTENIDO

PIE

1.6.2 Iframes El iframe es un elemento HTML, que permite insertar o incrustar un documento HTML dentro de un documento HTML principal, permitiendo insertar páginas con mayor control y con estructuras mucho más flexibles que los frames. Aunque inicialmente fue introducido por Internet Explorer, hoy día es aceptado como estándar por la W3C. Los atributos que se pueden utilizar en los iframes son los siguientes: 

frameborder. Indica si el documento HTML incrustado se mostrará con o sin

borde. 1 indica borde, 0 ausencia de borde. 

height. Especifica la altura del elemento, puede ser expresada en píxeles o en

porcentaje (%). 

width. Especifica la anchura del elemento, puede ser expresada en píxeles o en

porcentaje (%). 

src. Establece la URL del documento incrustado en el iframe.



longdesc. Permite indicar una descripción larga para el contenido del iframe.



scrolling. Establece si en el iframe se permite el uso de barras de scrolls y como

se usan.

© STARBOOK

CAPÍTULO 1. LOS LENGUAJES DE MARCAS 39

A continuación, se muestra un ejemplo de uso de la etiqueta iframe, donde se muestra la página de Google Maps.

Listado 1.9.html Mi primera página con iframes Mi página Web Localízame

Figura 1.7. Ejemplo de uso de iframe

40

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

ACTIVIDAD 1.8 



Crea una página web que muestre coniframes los dos buscadores que más utilizas. Crea una página web que muestre coniframes las cuatro páginas que más utilizas.

1.7 CAPAS Una capa es una división o porción de una parte de una página web, que se puede colocar en cualquier lugar. Adicionalmente, pueden ocultarse, solaparse o sobreponerse capas, por lo que resulta un elemento muy atractivo para dotar a la web de dinamismo. Las capas se pueden insertar a través de las etiquetas y . La principal diferencia es que permite aplicar estilo a una parte más amplia de la página, además tiene un uso adicional que permite crear divisiones de la página, a la que posteriormente se le pueden aplicar unos atributos adicionales que modifican su comportamiento. Los principales atributos son: 



id. Establece el nombre de la capa. style. Establece las propiedades de estilo de la capa. Los principales propiedades

son: -

left y top. Establecen la posición de la capa con respecto a los márgenes

-

position. Permite referenciar de manera absoluta la posición de la capa.

-

z-index. Número de indexado de la capa. A mayor índice una capa se solapará

-

visibility. Establece los valores de visibilidad de la capa, puede tomar los valores: inherit (hereda el valor del padre), visible (muestra la capa) y hidden

izquierdo y superior. Como siempre se pueden aplicar en píxeles y porcentaje, asignándole el valor position.

sobre las demás.

(oculta la capa).

En la figura 1.8, puede ver un ejemplo de uso, donde se van a crear tres capas de igual formato, superpuestas y escaladas. Para ello se crean tres capas, en este caso a través

© STARBOOK

CAPÍTULO 1. LOS LENGUAJES DE MARCAS 41

de la etiqueta < div>, incluyendo en cada una de ellas una imagen. A continuación podemos ver el código del ejemplo.

Listado 1.10.html Mi primera página con capas

Figura 1.8. Ejemplo de uso de capas

42

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

En la figura 1.9, partiendo del ejemplo anterior se va a realizar una modificación para ocultar la capa2. A continuación se puede ver el código.

Listado 1.11.html Mi primera página con capas

Figura 1.9. Ejemplo de uso de capas ocultas

© STARBOOK

CAPÍTULO 1. LOS LENGUAJES DE MARCAS 43

ACTIVIDAD 1.9 



Crea una página web que utilice capas en la que muestre cinco fotografías diferentes. Crea una página web que, utilizando capas, muestre un paisaje de fondo y muestre dos fotos fotos de de animales animalesen enprimer primerplano. plano.

1.8 RESUMEN Para finalizar, en la tabla 1.5 puede ver un resumen con las etiquetas HTML más utilizadas. Tabla 1.5. Etiquetas HTML más utilizadas Etiqueta

Descripción



Definición cabecera.



Definición del cuerpo.



Título de la página.



Comentarios.

…..

Creación de enlaces.



Inserción de imágenes.

 

Espacio.



Salto de línea.



Párrafo.



Línea horizontal.



Negrita.

44

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

..

Cursiva.

..

Teletype.

..

Subrayado.

..

Tachado.

..

Superíndice.

..

Subíndice.

..

Capas.

..

Capas.

Título de la lista Elemento 1

Lista sin numerar.

Elemento 2 Título de la lista Elemento 1

Listas numeradas.

Elemento 2 TABLE> contenido de la celda

Tablas.

contenido de la celda

Frames incustrados.



Gestión de frames.

© STARBOOK



CAPÍTULO 1. LOS LENGUAJES DE MARCAS 45

T TE ES ST TD DE EC CO ON NO OC CI IM MI IE EN NT TO OS S



1. ¿Qué etiqueta indica un salto de línea? a) b) c) d) 2. ¿Cuál es la forma correcta de introducir un comentario? a) b) c) < --> d))

3. ¿Cuál de las siguientes respuestas describe la forma correcta de insertar un enlace? a) enlace< /href> b)) < ="enlace.html">< /a> a> c) d) enlace< /a> 4. ¿Qué etiqueta se utiliza para definir un título de primer nivel? a) b)) c) d)

46

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

5. Para abrir un enlace en una ventana nueva se debe utilizar la propiedad: a) target="_blank" b) new c) blank d) target="_new" arget="_new



E EJ JE ER RC CI IC CI IO OS SP PR RO OP PU UE ES ST TO OS S



1. Diseña una página web que contenga los siguientes elementos: dos párrafos, una tabla y una lista no numerada.

2. Diseña una una ppágina gina web web que que contenga contenga cuatro cuatro frames rames, creando una ppágina gina web web para para cada cada uno de ellos que responda a su cometido:

a) Un frame superior a modo de banner, de anchura m máxima xima yy altura altura 150 150 ppíxeles. xeles. b) Uno inferior que se usará de pie de página con la mismas dimensiones del frame anterior.

c) Un frame para menú c men con una anchura del de 250 250 p píxeles. xeles. d) Un frame para contenidos que ocupe el resto de la página. e) Crea una página web que contenga una tabla con tu horario de clase. f) Crea una p página gina web con dos iframes.

2 Capítulo

2 IMÁGENES Y ELEMENTOS MULTIMEDIA OBJETIVOS: 

Conocer los diferentes elementos multimedia, sus características principales y extensiones.



Utilizar en las páginas web imágenes.



Utilizar imágenes para crear mapas.



Utilizar vídeos y otros elementos como applet, flash, etc.

Sin duda alguna, los elementos multimedia han contribuido enormemente en hacer una web más amigable, atractiva y funcional. Existen un gran número de elementos multimedia que se pueden utilizar en las páginas web. Algunos de los elementos multimedia más importantes son: imágenes, sonido, vídeos, animaciones flash, applets, etc. En este capítulo, primero se estudian las características más importantes de los diferentes elementos multimedia, y cómo utilizar dichos elementos en las páginas web.

2.1 ELEMENTOS MULTIMEDIA 2.1.1 Imágenes A la hora de utilizar imágenes en una página web hay que tener en cuenta que no es posible utilizar cualquier formato de imagen. Por ejemplo, no es recomendable utilizar imágenes BMP porque no están comprimidas y por lo tanto hacen que la web sea más “pesada” para poderla visualizarla. Los formatos de imágenes que se aconsejan utilizar son: JPEG, GIF y PNG. Por otro lado, es recomendable adaptar el tamaño y la resolución de las imágenes que se van a utilizar en una página web. Bajo la premisa de que sólo va a ser vista en pantalla, por tanto hay que

48

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

adaptarlas a una resolución estándar (normalmente 800 x 600 píxeles). En caso de estar mal adaptadas provocaremos una página de mayor peso que tarda más tiempo en cargarse y resulta menos atractiva para el usuario. A continuación se describen los distintos formatos, así como sus ventajas e inconvenientes: 

BMP (Windows bitmap). Es el formato más usado por las aplicaciones Windows, concretamente es el usado por Microsoft Paint. Se caracteriza por representar la

imagen por una matriz de píxeles donde cada píxel se codifica en función del color que representa. Por ejemplo, en una imagen en blanco y negro cada píxel esta codificado por 0 ó 1. El formato BMP es poco eficiente para utilizarse en páginas web ya que genera imágenes bastante pesadas. 

GIF (Compuserve GIF). Es probablemente unos de los formatos gráficos más

utilizados en Internet, tanto para imágenes como para animaciones. Es muy utilizado porque permite preservar la transparencia en imágenes. Es un formato sin pérdida de calidad para imágenes con una paleta de hasta 256 colores. Es decir, aunque permite elegir cualquier color para la imagen esta sólo puede contener 256 colores distintos. 

JPEG (Joint Phorographic Experts Group). Es el estándar de compresión y

codificación de archivos de imágenes fijas aunque ha sido adoptado como formato de archivo se utiliza normalmente para fotografías y gráficos. Como desventaja hay que destacar que no permite el fondo transparente. 

PNG (Portable Network Graphics). Es un formato gráfico basado en un

algoritmo libre de compresión sin pérdida, que fue desarrollado para suplir las deficiencias del formato GIF. Es un formato bastante interesante por la calidad de las imágenes, tamaño y por la capacidad de permitir el fondo transparente. Aunque su uso no está tan extendido como los otros formatos cada día se utiliza más, ya que ha sido recibido con una gran acogida.

2.1.2 Audio Con la evolución de web, y la tendencia hacia una web interactiva cada día se necesitan de más contenidos multimedia entre ellos el audio, que se utiliza por ejemplo para reproducir una melodía de fondo, mientras el usuario navega por la web. Existen distintos formatos de audio que se pueden clasificar en función de la compresión a la que ha sido sometida la grabación. Básicamente se pueden clasificar en tres grupos:

© STARBOOK



CAPÍTULO 2. IMÁGENES Y ELEMENTOS MULTIMEDIA 49

Audio sin comprimir. El audio se guarda directamente en el fichero por lo que

suelen tener muy buena calidad pero ocupan bastante espacio. Entre los formatos más utilizados destacan: WAV, AIFF, AU, MIDI. 

Audio comprimido. Requiere un mayor tiempo de procesamiento para realizar el

procesamiento de la codificación decodificación, pero a cambio es mucho más eficiente en cuanto al almacenamiento. El tipo de fichero más utilizado en este caso es el formato MP3. Ahora se describen los distintos formatos, así como sus ventajas e inconvenientes: 

WAV (WAVEform audio file format). Es un formato de audio desarrollado por

Microsoft e IBM, que normalmente no utiliza compresión y es soportado por casi todos los navegadores. Al no tener pérdida de calidad se utiliza en entornos profesionales, aunque como contraposición necesita de requerimientos elevados de almacenamiento. Fue desarrollado por Microsoft e IBM. 

AIFF (Audio Interchange File Format). Formato de estándar de almacenamiento

de audio sin comprimir, muy utilizado por Apple debido a su participación en el desarrollo. 

AU. Formato de archivo de audio sin comprimir desarrollado por Sun, y muy

utilizado en los sistemas GNU/Linux. 

MIDI (Musical Instrument Digital Interface). Un archivo MIDI no contiene datos de

audio muestreado, sino más bien una serie de instrucciones que el ordenador

utiliza paraindican reproducir el sonido en real. son mensajes MIDI que al instrumento quétiempo sonidos hayEstas que instrucciones utilizar, qué notas hay que tocar, el volumen de cada una de ellas, etc. Este tipo de ficheros ocupan muy poco espacio y como desventaja tenemos que si el ordenador no tiene una buena tarjeta de sonido se puede escuchar como poca calidad. 

MP3 (MPEG-1 ó 2 Audio Layer III). Formato de compresión con pérdidas muy

popular debido a la capacidad de almacenar audio con calidad en muy poco tamaño. Para hacerse una idea, el formato MP3 permite almacenar un CD de audio en unos 50 MB.

2.1.3 Vídeos Al igual que ocurre con el audio, los vídeos también se almacenan en distintos formatos, y con distintas codificaciones, donde cabe destacar los formatos MPEG, MOV, OGG, FLV, WMV y AVI.

50

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

Con el desarrollo de Internet el vídeo también ha sufrido un gran desarrollo, ya que la tendencia lleva a la visualización de vídeo sin descargar el archivo completo, conocido como vídeo en streaming. A continuación se describen los distintos formatos: 

MPEG: (Movie Picture Experts Group). Es un códec de compresión de vídeo con

bajas pérdidas que engloba distintos algoritmos y formatos de compresión entro los que destacan: MPEG-1, MPEG-2, MPEG-3, etc.





OGG. Es un formato de vídeo libre y abierto con una alta eficiencia para el streaming y la compresión de archivos, cada día más utilizado en Internet. FLV: (Flash Video). Es un formato propietario de Adobe, usado para transmitir

vídeo por Internet, usando el reproductor de Adobe, que previamente se debe tener instalado. Es un formato bastante popular y usado debido al uso que se le ha dado en sitios como Youtube. 

AVI: ( Audio Video Interleave). Es un formato de vídeo que permite almacenar un

flujo para el vídeo y varios flujos de audio usando para cada uno de ellos un códec distinto, por lo que es conocido como un formato contenedor.

2.1.4 Otros elementos En determinadas ocasiones cuando se diseñan páginas web, el diseñador se encuentra con la necesidad de incluir objetos de terceros, que ofrezcan funcionalidad extra ( scripts), animaciones (flash), … Los elementos flash, permiten crear aplicaciones multimedia que pueden utilizar vídeo, audio, animaciones, etc. Para poder ver una aplicación flash es necesario utilizar el reproductor Adobe Flash Player. Este tipo de aplicaciones permiten crear contenido audiovisualmente interesante y rico, así como aplicaciones atractivas para la web. Javascripts es un lenguaje interpretado basado en objetos, que no requiere compilación y es interpretado en el cliente en el momento de ejecución. Como su nombre indica es un lenguaje basado en Java, con una sintaxis muy parecida. En su uso habitual se encuentra integrado en el navegador web, permitiendo páginas web dinámicas e interfaces de usuarios mejoradas.

Un applet es una aplicación realizada en java que se ejecuta en el contexto de otro programa, por ejemplo un navegador web. Los applets permiten la creación de aplicaciones avanzadas para la web. Aunque en la actualidad este tipo de programas están dejando de utilizarse debido a la mayor funcionalidad de otros lenguajes, como HTML 5 y javascritps.

© STARBOOK

CAPÍTULO 2. IMÁGENES Y ELEMENTOS MULTIMEDIA 51

ACTIVIDAD 2.1 



Busque información sobre los diferentes ficheros de imágenes, sonido y vídeo. Sobre los ficheros anteriores, indique los formatos utilizan compresión.

2.2 UTILIZACIÓN DE IMÁGENES 2.2.1 Imágenes Para insertar una imagen en una página web se utiliza la etiqueta de la siguiente forma:

donde src indica la ruta donde se encuentra la imagen y alt indica un texto alternativo que se muestra al posicionar el cursor del ratón sobre la imagen. Es importante incluir siempre ésta información, ya que permite que la página web sea más accesible. Para indicar la ruta de una imagen, es posible hacerlo de forma relativa a un fichero del servidor o referenciando a un elemento de otro servidor. A continuación, puede ver que primero se muestra la imagen casa.jpg que se encuentra en la carpeta imágenes, y en el segundo ejemplo se muestra la imagen que se encuentra en un servidor externo. para poder reproducir cinco canciones canciones diferentes. diferentes. Crea una página web que utilice la etiqueta audio para poder reproducir cinco canciones canciones diferentes. diferentes.

2.4 UTILIZACIÓN DE VÍDEO Al igual que ocurre con el sonido, el vídeo se puede insertar de diferentes formas. En las versiones anteriores a HTML 5 se utiliza la etiqueta , y en las versiones posteriores la etiqueta .

2.4.1

Embed

Para insertar un vídeo se utiliza la etiqueta de la misma forma que lo hemos hecho con el sonido, pero con la diferencia que el fichero que se referencia con la opción src

58

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

es un vídeo. Los formatos de vídeo que se recomienda utilizar son: wmv, mov y mpeg. A continuación, puede ver el código para la inserción de un vídeo.

Listado 2.6.html

2.4.2 Vídeo Al igual que ocurre para el audio, HTML 5 dispone de una etiqueta nativa para la inclusión de vídeo en las páginas web, simplificando el código y proporcionando una mayor funcionalidad. Aunque sólo ofrece soporte para los formatos ogg, mpeg4 y webM. Los atributos de la etiqueta son los siguientes atributos: 





autoplay. Indica que se inicia la reproducción al cargar la página. audio. Indica el estado del audio de la reproducción, es decir indica si se inicia o no con el audio silenciado. Solo admite el valor muted. loop. Especifica el número de veces que se debe reproducir el audio antes de

finalizar. 

controls. Indica si se muestran los controles de reproducción.



height. Establece la altura del reproductor.



width. Establece la anchura del reproductor.



src. URL del archivo a reproducir.

A continuación, se muestra un ejemplo de uso de vídeo y cuyo resultado se muestra en la figura 2.3. Junto al vídeo se inserta una descripción que le indica al usuario si el vídeo en HTML5 es o no soportado por su navegador.

© STARBOOK

CAPÍTULO 2. IMÁGENES Y ELEMENTOS MULTIMEDIA 59

Listado 2.7.html Tu navegador no soporta video en HTML5

Figura 2.3. Ejemplo de uso de vídeo incrustado en HTML

Adicionalmente la etiqueta permite establecer distintas URL para el archivo, a través de la etiqueta con el fin de poder subir en vídeos en diferentes formatos para que el usuario pueda ver el vídeo sin la necesidad de tener que actualizar los códecs. A continuación se muestra un ejemplo donde se le india al navegador la posibilidad de utilizar tres ficheros diferentes:

Listado 2.8.html Tu navegador no soporta video en HTML5

60

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

2.4.3 Youtube Otra forma de utilizar vídeos en una página web es utilizarlos directamente desde Youtube (www.youtube.es). Para utilizar un vídeo hay que realizar los siguientes pasos: 

Acceda a www.youtube.es y busque el fichero que desea utilizar.



Pulse en el botón Compartir y luego, en el botón Insertar.





Al pulsar en Insertar aparecen las opciones de importación y como resultado de utilizar las opciones de importación se muestra su correspondiente código HTML (véase la figura 2.4). Para finalizar, inserte el código HTML generado en su página web.

Figura 2.4. Compartiendo un vídeo de Youtube 

A continuación, puede ver un ejemplo de código generado por Youtube cuyo resultado se muestra en la figura 2.5.

© STARBOOK

CAPÍTULO 2. IMÁGENES Y ELEMENTOS MULTIMEDIA 61

Listado 2.9.html

Figura 2.5.Vídeo de Youtube

ACTIVIDAD 2.6 

Crea una página web que utilice la etiqueta embed para mostrar un vídeo.



Crea una página web que utilice la etiqueta vídeo para mostrar un vídeo.



Crea una página página web web que que muestre muestrecinco cincovídeos vídeosde deYoutube. Youtube.

62

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

2.5 UTILIZACIÓN DE OTROS ELEMENTOS 2.5.1 Marquesinas Las marquesinas permiten animar texto en una página web, se debe prestar especial atención ya que no esque soportado por todos navegadores. Para ello se crea un área donde se introduce un texto se desplaza por la los ventana. Para crear una marquesina se utiliza la etiqueta cuyos principales atributos son los siguientes: 

align. Indica la alineación de la marquesina.



bgcolor. Establece el color de fondo de la marquesina.



direction. Indica la dirección de desplazamiento de la marquesina.



height. Establece la altura de la marquesina.



width. Establece la anchura de la marquesina.



scrolldelay. Indica la velocidad de desplazamiento de la marquesina.



loop. Permite establecer el número de repeticiones de la marquesina. Si establece infinite se desplaza indefinidamente.

A continuación, puede ver un ejemplo de uso. Listado 2.10.html Mi primera marquesina Mi primera marquesina

© STARBOOK

2.5.2

CAPÍTULO 2. IMÁGENES Y ELEMENTOS MULTIMEDIA 63

Object

La etiqueta ofrece soporte para ejecutar aplicaciones externas dentro de una página web, por ejemplo, es la etiqueta usada para insertar contenido flash, applets, documentos de office, etc. Los atributos más importantes de la etiqueta son los siguientes: 

align. Indica la alineación del objeto.



data. Indica la URL del archivo a ejecutar.



type. Indica el tipo o el formato de archivo que se utiliza. Se utiliza para indicar al navegador el tipo de archivo y si es necesario cargar algún plugin antes de

visualizarlo. 

standby. Permite mostrar un texto mientras el objeto se está cargando.



height. Indica la altura del contenedor del objeto.



weight. Indica la anchura del contenedor del objeto.



codebase. Establece la URL para la descarga de los plugin necesarios para la

ejecución del objeto. 

name. Establece el nombre a través del cual puede acceder al objeto.

Dentro de la etiqueta object se pueden insertar las etiquetas param y embed. La primera de ellas se utiliza para el paso de parámetros específicos para la ejecución de la aplicación, y la segunda incrusta el objeto dentro de la página web. Por ejemplo, para insertar un objeto flash dentro de una página web se utiliza la etiqueta . En un primer lugar se indica, dentro de la etiqueta , el valor para el atributo classid que identifica que es un contenido flash. Seguidamente se introduce el atributo codebase, donde se indica la URL para la descarga del plugin, en el caso de que el usuario no lo tenga instalado. Para finalizar se le asigna las dimensiones del contenedor. En el siguiente paso se establecen los parámetros necesarios y/o opciones para la reproducción del contenido. En este caso, como primer parámetro se le indica la URL del fichero a reproducir, en segundo lugar, la calidad de reproducción; en tercero, se oculta el menú; y para finalizar, se indica que sólo se reproduce una vez. Para finalizar se utiliza la etiqueta que, aunque parece redundante es necesario introducir los anteriores valores.

64

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

Listado 2.11.html

En la figura 2.6 puede ver el resultado de incrustar una animación flash dentro de una página web.

Figura 2.6. Incrustando contenido flash

© STARBOOK

CAPÍTULO 2. IMÁGENES Y ELEMENTOS MULTIMEDIA 65

2.5.2.1 APPLET DE JAVA

Para la inserción de un applet de java, se utiliza la etiqueta que utiliza los siguientes atributos: 

code. Indica la URL de la clase de ejecución del applet.



codebase. Indica el path de la clase del applet.



width. Especifica la anchura del contenedor.



height. Especifica la altura del contenedor.



name. Indica el nombre del applet para futuras referencias.

Opcionalmente se pueden utilizar otros parámetros (p.ej. de tiempo) a través de la etiqueta tal y como se verá en el siguiente ejemplo. A modo de ejemplo, se va insertar un applet que muestra un reloj en 3D que se desplaza por nuestra página web. Para insertar el reloj hay que realizar los siguientes pasos: 



Descargue el applet de la siguiente página http://www.htmlpoint.com/java/ a129/applet.htm. Personalice las opciones del applet a su gusto. Por ejemplo, puede cambiar el color del reloj, el color de fondo, la tasa de refresco, el formato de la hora,…

Listado 2.12.html

66

CONSTRUCCIÓN DE PÁGINAS WEB



© STARBOOK

Inserte en la página web, el código del applet en la posición deseada.

En la figura 2.7, se puede observar el aspecto srcinal del applet y en la figura 2.8 se muestra el applet personalizado.

Figura 2.7. Incrustando un applet

URL DE INTERÉS En http://www.htmlpoint.com/java/ puede encontrar muchos applets de java.

Figura 2.8. Applet modificado

© STARBOOK

CAPÍTULO 2. IMÁGENES Y ELEMENTOS MULTIMEDIA 67

ACTIVIDAD 2.7 

Crea una página página web web con con una unamarquesina marquesinaque quemuestre muestretutunombre. nombre.



Crea una página web que utilice unapplet de java.

2.5.2.2 JAVASCRIPT

JavaScript permite añadir interactividad a su sitio web. Un programa JavaScript se puede insertar entre las etiquetas y. si el script se utiliza para dar respuesta a un evento del usuario, o dentro de las etiquetas y si el script se ejecuta al cargar la página. Adicionalmente, también puede utilizar librerías o varios scripts en archivos separados a lo de la página web e ir llamándolos en el punto adecuado.

Para insertar un programa javascripts dentro de una página web se debe realizar entre las etiquetas: … … código del scripts …

A continuación, se muestra un script que genera una tabla indicando el número de fila y columna como texto dentro de cada celda. En la figura 2.9 puede ver el resultado gráfico de la ejecución del script.

Listado 2.13.html Bucles anidados

Figura 2.9. Trabajando con javascripts

ACTIVIDAD 2.8 



Crea una página web que utilizandojavascript avascript muestre los los números números del del 11 al al 900. Crea una página web que muestre una tabla tabla de de 55 filas filas yy 10 10 columnas. columnas.

© STARBOOK



CAPÍTULO 2. IMÁGENES Y ELEMENTOS MULTIMEDIA 69

T TE ES ST TD DE EC CO ON NO OC CI IM MI IE EN NT TO OS S

1. ¿Para qué se utiliza la propiedad alt dentro de la etiqueta ? a) Para ofrecer una URL alternativa. b) Para definir una descripci descripción. n. c) Para definir un texto alternativo. d) Para alinearla detr detrás s del texto. texto. 2. La etiqueta se utiliza para: a) Definir las áreas activas de una imagen. b) Definir el tamaño m máximo ximo que puede tener una imagen. c) Especificar la zona de la imagen que recibe la atención del usuario. d)) De Definir inir las coorden coordenadas adas activas de de una una zona zonarecta rectangular. ngular.

3. ¿Cuál es la forma correcta de usar la etiqueta ? a) b)) autostart= alse> ambient_city.mp3 c) ambient_city.mp3 d) 4. ¿Qué version versiones es de HTML soportan el uso de de la la etiqueta etiqueta < audio>? a) Desde HTML 1.0 en adelante. b) Exclusivamente HTML 4.01. c) HTML 5.0. d) Todas las versiones.



70

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

5. ¿Entre qué etiquetas se puede definir un script, que se lanzará para dar respuesta a una petición del usuario?

a) iv> b) < b

c) d)



E EJ JE ER RC CI IC CI IO OS SP PR RO OP PU UE ES ST TO OS S



1. Diseña Diseña una una ppágina gina web web que que contenga contenga 44 im imágenes genes de de las las mismas mismas dimensiones, dimensiones, colocadas colocadas dentro de una tabla de 2 x 2.

2. Diseña una web con una imagen y melodía de fondo. que contenga 3 vídeos v deos enlazados de Youtube. Youtube. 3. Crea una web que

4. Diseña una página web que contenga una animación animación realizada realizada en en javascripts.

3 Capítulo

3 TÉCNICAS DE ACCESIBILIDAD USABILIDAD Y OBJETIVOS: 

Conocer los conceptos de accesibilidad y usabilidad.



Conocer los diferentes niveles de accesibilidad y verificar la accesibilidad de un sitio web.



Crear sitios web siguiendo los criterios de accesibilidad y usabilidad.

3.1 CONCEPTOS BÁSICOS A la hora de crear una página web es muy importante crear páginas que sean accesibles y usables. Una página permite la accesibilidad cuando es capaz de adaptarse al usuario y a las características del dispositivo que utiliza. Y una página es usable cuando un usuario puede utilizar la página sin la necesidad de tener muchos conocimientos. Es decir, la accesibilidad se refiere a que la página se adapta al usuario para que pueda acceder a ella cómodamente, mientras que el objetivo de la usabilidad es que la página sea fácil de utilizar por el usuario.

3.1.1 Accesibilidad La accesibilidad es la capacidad que tiene una web para el acceso a sus contenidos por todas las personas independientemente del hardware, software, idioma, localización que usen y/o de las capacidades de los distintos usuarios. El principal objetivo de la accesibilidad es que todas las personas puedan acceder en países están igualdad de condiciones creando leyes a losy contenidos. normativas De quehecho, regulan los esta gobiernos capacidad. e instituciones A nivel mundial de varios el máximo organismo encargado de regularla es W3C ( World Wide Web Consortium) desde su grupo de trabajo denominado WAI (Web Accessibility Initiative).

72

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

Para conseguir que una web sea accesible la WAI establece “ Las pautas de accesibilidad al contenido en la web (WCAG)” con el objetivo principal de guiar a los diseñadores hacia la meta de una web accesible, rompiendo las barreras y allanando el camino hacia la información. La guía WCAG consiste en el cumplimiento de las siguientes pautas: 

Pauta 1. Proporcionar alternativas equivalentes para los contenidos audiovisuales.



Pauta 2. No basarse exclusivamente en el color, los textos y gráficos deben

entenderse sin la necesidad de color. 

Pauta 3. Hacer uso las hojas de estilo para la presentación.



Pauta 4. Identificar el idioma utilizado.



Pauta 5. Uso exclusivo de las tablas para mostrar datos, no usar para

maquetación. 6. Permitir que el contenido de la página quede accesible independientemente de la tecnología que se use. Por ejemplo, si utiliza scripts para formatear el contenido si éstos se deshabilitan el contenido debe seguir siendo accesible.



Pauta



Pauta 7. Evitar el movimiento y refresco automático de la página.



Pauta 8. Asegurar la accesibilidad directa para las interfaces de usuario de

objetos embebidos. 

Pauta 9. Diseñar con independencia del hardware.



Pauta 10. Suministrar siempre alternativas, en caso de fallo. Por ejemplo para

navegadores antiguos. 

Pauta 11. Usar las tecnologías y pautas del W3C.



Pauta 12. Proporcionar información de contexto y orientación.



Pauta 13. Proporcionar los mecanismos de navegación adecuados. mapas web,

barras de navegación, etc. 

Pauta 14. Utilizar un lenguaje claro y sencillo en la redacción de los documentos.

En principio, parece que cumplir la accesibilidad implica una serie de reglas que lleva tiempo cumplir y desarrollar sin aportar nada o casi nada a cambio. Aunque si desde el diseño se piensa en la accesibilidad y se tienen claras las pautas a seguir estas reglas, con muy poco

© STARBOOK

CAPÍTULO 3. TÉCNICAS DE ACCESIBILIDAD Y USABILIDAD 73

esfuerzo se obtiene una web accesible, que aportará una serie de ventajas competitivas frente a otros sitios. A continuación se enumeran las principales ventajas de la accesibilidad: 







Aumento de la satisfacción y comodidad del usuario. Una web accesible, por lo general es una web usable con el contenido bien estructurado y fácilmente adaptable a cualquier dispositivo. Ganando así la confianza del usuario. Incremento del número de visitantes, ya que entorno un 10% de la población mundial presenta algún tipo de discapacidad y si gran parte de los sitios no son accesibles, se obtiene una ventaja competitiva. Disminución en la tasa de errores cometidos por el usuario. Si todo está claramente definido, el usuario cometerá menos errores y reducirá su estrés, obteniendo así su fidelidad. Una página accesible normalmente obtiene un mejor posicionamiento, porque tiene más texto que imágenes, está semánticamente bien construida y esto son puntos muy importantes para los robots.

3.1.2 Usabilidad La usabilidad es la facilidad con las que las personas aprenden y utilizan una herramienta o cualquier otro objeto fabricado. Si el término se refiere a la usabilidad web indica la claridad y sencillez del sitio para para podertodos verlolos y utilizarlo usuario. Aunque difícil diseñar un sitio web claro y sencillo usuarios,cualquier ya que cada usuario lo vaesa ver desde una perspectiva distinta, el diseñador debe realizar estos esfuerzos para realizar el diseño lo más sencillo posible. Los principales factores que condiciona la usabilidad de un sitio son: 

Facilidad de aprendizaje. Una página ha de ofrecer a un usuario que no la ha

visitado antes, la manera más rápida y sencilla de navegar por la web y mostrarle su información. 

Eficiencia de uso. Una vez realizado el aprendizaje, la página debe ofrecer al

usuario la forma más rápida de trabajar o llegar a los contenidos. 

Robustez. Se debe intentar minimizar los errores que puedan producirse,

ganando así la fidelidad del usuario. 

Flexibilidad. Debe ofrecer la posibilidad al usuario de la multiplicidad de vías para

realizar el mismo cometido.

74

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

De la misma forma que ha ido creciendo el uso de la web la usabilidad ha ido aumentando su importancia. Ya que cada vez es más el número de usuarios que usan la web y la exigencias de los mismos, deseando que las aplicaciones que tienen que utilizar sean fáciles de usar y fáciles de aprender, huyendo de aplicaciones pesadas, con grandes tiempos de aprendizaje,… Por estos motivos es muy importante la usabilidad en la web, ya que aportará una serie de beneficios que se muestran a continuación: 

Mejora la imagen corporativa de la web. Ya que el cliente está más satisfecho.



Optimización de los costes de diseño, rediseño y mantenimiento.



Disminución del aprendizaje del usuario.



Aumento de la satisfacción del cliente.



Fidelidad del usuario.

En resumen, una página más usable es una página más visitada, ya que va a llegar a más público, captando a nuevos usuarios por la facilidad de uso y reteniendo a los antiguos, ya que cambiar de página les implicaría de nuevo un aprendizaje.

3.2 VERIFICANDO LA ACCESIBILIDAD A continuación, se van a ver los diferentes niveles de accesibilidad que puede tener un sitio web así como las herramientas más importantes que se utilizan para verificar la accesibilidad de un sitio web.

3.2.1 Niveles de accesibilidad Para establecer la accesibilidad de una página web, W3C establece tres niveles de prioridades: 

Prioridad 1. Puntos de obligado cumplimiento, que todo desarrollador debe

cumplir, ya que si no se cumplen, cierto grupo de usuarios no pueden acceder a la web. 

Prioridad 2. Son aquellos puntos que un desarrollador debe cumplir, ya que en

caso contrario ciertos usuarios tienen dificultades de acceso

© STARBOOK



CAPÍTULO 3. TÉCNICAS DE ACCESIBILIDAD Y USABILIDAD 75

Prioridad 3. Punto que de no cumplir provocarán ciertas dificultades de acceso a

la información. Para en función de la compatibilidad de estos puntos cumplir una serie de niveles de conformidad que van desde el nivel de Conformidad A, hasta el nivel AAA, y se consiguen de la siguiente forma: 

Nivel A. Se satisfacen todos los puntos de prioridad 1.



Nivel AA. Se satisfacen todos los puntos de prioridad 1 y 2.



Nivel AAA. Se satisfacen todos los puntos de prioridad.

En la figura 3.1, se pueden observar los logos que se pueden colocar en la web diseñada, siempre y cuando se cumplan los distintos niveles de conformidad, reivindicando así la conformidad.

Figura 3.1. Logos de la W3C para el cumplimiento de la accesibilidad

Para verificar la accesibilidad la W3C, ha creado una serie de puntos de verificación para cada uno de los puntos de prioridad, a continuación se indican los puntos más importantes de verificación para cada uno de los niveles de conformidad.

Nivel de conformidad A Para cumplir este nivel de conformidad se deben comprobar los siguientes aspectos: 

Por lo general se deben verificar los siguientes puntos para los distintos elementos de la página: -

Verifique si todo elemento no textual tiene un texto equivalente, a través de su atributo alt, londesc o en el propio contenido.

-

Compruebe que toda la información transmitida a través de los colores también esté disponible sin color, por ejemplo mediante el contexto o por marcadores.

-

Identifique claramente los cambios en el idioma del texto del documento.

-

Verifique que el documento puede ser completamente leído sin hojas de estilo.

76

CONSTRUCCIÓN DE PÁGINAS WEB



-

Compruebe que ha utilizado un lenguaje simple y claro.

-

Evite que se produzcan destellos en la pantalla.

-

Compruebe que los textos equivalentes del contenido dinámico es actualizado con el contenido dinámico.

Si utiliza imágenes o mapas de imagen, además verifique: -









Compruebe que se proporciona enlaces equivalentes en formato texto en la web, para cada una de las zonas del mapa de imagen.

Si utiliza tablas, compruebe: -

Verifique que se identifican los encabezamientos de filas y columnas en las tablas de datos.

-

En las tablas de datos si se tiene más de dos niveles de encabezamientos, compruebe que se utilizan marcadores para asociar las celdas de encabezamiento y las de datos.

Si utiliza marcos, verifique que cada marco tiene su título. Si utiliza scripts, compruebe que la página sigue siendo utilizable si no se ejecuta el scripts, para ello ofrecer siempre un contenido cuando no existe el scripts. Si utiliza elementos multimedia, verifique: -



© STARBOOK

Si existe vídeo o audio, compruebe que se suministra una descripción alternativa, por ejemplo subtítulos, con la presentación.

Si no tiene un sitio accesible, compruebe que se suministra un enlace a un sitio accesible de funcionalidad equivalente o similar.

Nivel de conformidad AA Para cumplir este nivel de conformidad además de los requisitos anteriores debe comprobar los siguientes aspectos: 

Por norma general compruebe: -

Las combinaciones de color de fondo y primer plano tienen suficiente contraste.

© STARBOOK









CAPÍTULO 3. TÉCNICAS DE ACCESIBILIDAD Y USABILIDAD 77

-

Existan marcadores apropiados, compruebe que se usan estos en lugar de imágenes.

-

Utilice las hojas de estilos para la presentación y maquetación.

-

Utilice las unidades relativas en lugar de las absolutas, tanto en el texto, como en cualquier propiedad dimensional.

-

Utilice encabezados … para realizar la estructura lógica.

-

Se marcan correctamente las listas e ítems.

-

Si existen citas, compruebe que estén marcadas correctamente.

-

Si existen contenidos dinámicos compruebe que sean accesibles. Se no estar un contenido accesible es necesario facilitar una página alternativa.

-

La página no se refresca automáticamente.

-

No se producen redirecciones automáticas hacia otros sitios web.

-

No se cambia de ventana sin informar previamente al usuario.

-

Se suministra el mapa del sitio o la tabla de contenido.

-

Se realiza una navegación coherente.

-

Se proporcionan los metadatos para añadir información semántica a las páginas y sitios.

Si utiliza tablas compruebe que las tablas no se utilizan la maquetación del sito. Si utiliza marcos, verifique que se describe el fin de los marcos y como se relacionan entre si. Si utiliza formularios, compruebe: -

Todo elemento del formulario establezca la asociación entre la etiqueta y el elemento.

-

Todo elemento este asociado explícitamente con su etiqueta.

Si utiliza scripts, verifique: -

Los manejadores de eventos son independientes del dispositivo de entrada.

78

CONSTRUCCIÓN DE PÁGINAS WEB

-

© STARBOOK

Se utilizan manejadores de eventos lógicos mejor que manejadores de dispositivo.

Nivel de conformidad AAA Para cumplir este nivel de conformidad además de los requisitos anteriores debe comprobar los siguientes aspectos: 







Por norma general compruebe: -

Se indica, la primera vez que aparece en el texto, la explicación de cada abreviatura.

-

Se indica el idioma del documento.

-

Se establece un orden lógico de navegación.

-

Se proporcionan atajos de teclado, en los vínculos más importantes, haciendo uso del atributo accesskey.

-

Se proporcionan barras de navegación.

-

Se utilizan mecanismos de búsqueda que permiten realizar distintos tipos de búsqueda.

-

La información destacada se localiza al principio de los encabezamientos, párrafos, listas, etc.

Si utiliza imágenes, compruebe que existe un vínculo para cauda uno de las imágenes con la explicación textual de la misma. Si utilizan tablas, debe: -

Proporcionar resúmenes de las listas.

-

Suministrar abreviaturas para las etiquetas de encabezado.

Si utiliza formularios, debe comprobar que se incluyen texto por defecto para cada uno de los elementos.

© STARBOOK

CAPÍTULO 3. TÉCNICAS DE ACCESIBILIDAD Y USABILIDAD 79

ACTIVIDAD 3.1 



Busca en Internet varios sitios web que permitan accesibilidad AAA. Accede a la web de un periódico online y compruebe si cumple las normas de accesibilidad.

3.2.2 Herramientas A parte de comprobar manualmente el nivel de conformidad web, es posible utilizar herramientas que validan el nivel de conformidad del sitio web. En la tabla 3.1 se muestran las páginas más utilizadas para validar la accesibilidad de sitios web. Tabla 3.1. URL para la validación de accesibilidad web http://www.tawdis.net/ http://www.cynthiasays.com/ http://www.sidar.org/hera/ http://wave.webaim.org http://www.ocawa.com/en/Test-your-Web-Site.htm http://www.cogentis.com.au/online-free-accessibility-test.html

A continuación, se va a utilizar la herramienta TAW en sus dos versiones: online y aplicación. La versión online permite realizar de forma cómoda un análisis básico de la web. Si desea realizar el análisis de una forma más exhaustiva, entonces se recomienda utilizar la aplicación TAW.

3.2.2.1 TAW ONLINE TAW es un conjunto de herramienta cuyo objetivo es comprobar el nivel de accesibilidad alcanzado en el diseño y desarrollo de páginas web con el fin de permitir el acceso a todas las personas independientemente de sus características diferenciadoras. Para

realizar

la

validación

de

una

página

web,

acceda

a

la

dirección

http://www.tawdis.net/tools/accesibilidad/?lang=es. En el formulario que se muestra en la

figura 3.2, seleccione la especificación que desea utilizar, indique la URL a analizar y pulse el botón Analizar.

80

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

Figura 3.2. TAW. Página principal de validación

El siguiente paso se introduce la URL de la página a analizar, y seguidamente se seleccione el nivel de análisis a realizar. Se puede elegir entre los 3 niveles de conformidad (Nivel A, AA y AAA). En este caso se opta por analizar la página de un periódico digital como “Marca” para un nivel de conformidad AA.

Figura 3.3. TAW. Analizando el nivel de conformidad AA

Tras el análisis TAW muestra un resumen del análisis en la parte superior de la página, así como la localización de los elementos afectados por el análisis, en este caso con color rojo marca las disconformidades de nivel A y de amarillos las de nivel AA de los resultados del análisis en cada una de las distintas partes de la página. En la figura 3.3, también se pueden ver dos tipos de errores, los automáticos y los manuales. Para cumplir con las pautas de accesibilidad se han de reducir los niveles automáticos a cero según la prioridad que se quiera obtener. Intentando minimizar los errores manuales, en muchas ocasiones no será posible ya que muchos de estos errores son avisos oaunque comprobaciones a tener en cuenta.

© STARBOOK

CAPÍTULO 3. TÉCNICAS DE ACCESIBILIDAD Y USABILIDAD 81

3.2.2.2 TAW VERSIÓN DE ESCRITORIO Si se usa mucho TAW, entonces es recomendable que descargue y utilice la versión de escritorio ya que permite un proceso de validación más detallado. Como ventaja permite escanear todas las páginas que componen un sitio web de una vez, mientras que con la aplicación web hay que introducir las páginas de una en una. Tal y como puede ver en la figura 3.4 la interfaz de la aplicación es muy sencilla. Para analizar una web debe indicar la dirección de la página e indicar el tipo de resultado que quiere visualizar. Existen cuatro informes diferentes: 

Resumen. Se muestra el resumen del análisis para cada uno de los niveles de

conformidad. 

Prioridad 1. Muestra todo lo errores detectados para cumplir el nivel de

conformidad A. 

Prioridad 2. Muestra todo lo errores detectados para cumplir el nivel de

conformidad AA. 

Prioridad 3. Muestra todo lo errores detectados para cumplir el nivel de

conformidad AAA.

En la figura 3.6, puede observar cómo se presentan los errores encontrados por la herramienta en la página, indicando en primer lugar el nivel de prioridad, y el índice y descripción de la pauta analizada. Para finalizar se muestran los fallos encontrados y la línea del documento donde se encuentra cada fallo.

Figura 3.4. TAW. Versión de escritorio

82

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

Figura 3.5. TAW. Versión de escritorio. Analizando la accesibilidad

Figura 3.6. TAW. Versión de escritorio. Informe de errores

Tras finalizar el análisis, la herramienta presenta tres tipos de informes: 

Informe TAW. Es el informe más básico y es el que facilita la herramienta online

(véase la figura 3.7). 

Informe EARL. En este caso el informe contiene el resultado de la evaluación de

accesibilidad según las pautas definidas por WCAG 1.0. El informe EARL, a diferencia del resto de informes que son formato HTML, utiliza el formato XML. 

Informe Resumen. El informe resumen es un informe en formato HTML que se

divide en dos partes La primera parte consiste en una tabla con los parámetros del ámbito del análisis y otra tabla resumen de resultados del analizador. La segunda parte es un listado para cada punto de verificación, incluido en el análisis, en el quelas de sepáginas. contabiliza En la el figura número 3.8deseproblemas puede ver automáticos el resultado del y manuales resumen.de cada una

© STARBOOK

CAPÍTULO 3. TÉCNICAS DE ACCESIBILIDAD Y USABILIDAD 83

Figura 3.7. TAW. Informe tipo TAW

Figura 3.8. TAW. Informe tipo resumen

Opcionalmente el programa permite, a través del menú configuración seleccionar las pautas a analizar, así como la posibilidad de realizar comprobaciones de usuario definidas a través de expresiones regulares.

84

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

ACTIVIDAD 3.2 



Verifique la accesibilidad de varios sitios web. Compruebe la accesibilidad de un periódico online utilizando varias herramientas.

3.3 DISEÑO DE SITIOS WEB USABLES A continuación, se muestran los aspectos más importantes que hay que tener en cuenta para crear un sitio web usable: 



Secciones del sitio web:

-

Tiene una página principal.

-

Existe un buscador de los contenidos del sitio.

-

Tiene un mapa de la página e índice de contenidos que están siempre

-

accesibles. Se ofrece ayuda a la navegación.

-

El sitio cuenta con una zona de novedades.

-

Tiene un menú accesible.

-

Tiene páginas de ayuda.

Para cada página:

-

Tiene un título que describe el contenido de la página.

-

Incluye el copyright y el logotipo del sitio.

-

Una página no tiene nunca más de 4 ó 5 pantallas de contenido.

© STARBOOK







CAPÍTULO 3. TÉCNICAS DE ACCESIBILIDAD Y USABILIDAD 85

-

Se mantiene la coherencia y consistencia en todas las páginas del sitio.

-

Elegir una selección de colores lo más apropiado posible, con el mayor contraste para los contenidos y respetando los colores corporativos.

Accesibilidad:

-

Todas las páginas del sitio web son accesibles desde la página principal.

-

Cualquier contenido debe ser accesible con tres clics desde la página principal.

-

El sitio está diseñado de forma eficiente y sencilla.

-

Se ha validado el sitio según la W3C.

Formularios:

-

Se validan los datos de los formularios antes de enviar.

-

Si se disponen de formularios largos se indica en qué estado del proceso se encuentra (paso 1 de 3).

Texto:

-

Utilizar fuentes redondeadas, ya que son más legibles en pantalla, tipo: arial, verdana, etc.

-

No utilizar más de 3 tipos de fuente distintos en el sitio.

-

Utilizar sólo la negrita para los textos importantes.



Enlaces: Se diferencian entre los enlaces visitados y los no visitados.



Imágenes: Las imágenes tienen los tamaños adecuados y poseen información

alternativa. 

Hojas de estilo: Las hojas de estilo ha sido validadas (ver Apartado 7.7 Accesibilidad y usabilidad).

Aunque el principio fundamental es que el usuario debe alcanzar sus objetivos con el mínimo esfuerzo y máximos resultados, siempre adaptándose al usuario y no al contrario, siendo los más consistente posible.

86

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

ACTIVIDAD 3.3 





Realiza un resumen de los criterios más importantes que debe cumplir un sitio web accesible. Realiza un resumen de los criterios más importantes que debe cumplir un sitio web usable.

T TE ES ST TD DE EC CO ON NO OC CI IM MI IE EN NT TO OS S



1. Indica cuál de las siguientes acciones pone en peligro la accesibilidad de una web. a) Proporcionar a roporcionar alternativas equivalentes para los contenidos audiovisuales. b) Evitar vitar el movimiento y refresco automático de la página. ealizar un diseño basado en imágenes. c) Realizar d) Proporcionar roporcionar informaci información n de contexto y orientaci orientación. n.

2. ¿Qué criterio cumple una página de nivel AA? a) Atajos de teclado para los vínculos. b) Identificaci Identificación n del idioma. c) Página ágina web vinculada a cada imagen con una descripción de la misma. d) Ell mapa del sitio web o la tabla de contenido. 3. ¿Qué nivel de conformidad es el más alto? a) Ell nivel W3C. b) Ell nivel A. b c) Ell nivel AA. d) Ell nivel AAA.

© STARBOOK

CAPÍTULO 3. TÉCNICAS DE ACCESIBILIDAD Y USABILIDAD 87

4. Indique cuál de las siguientes afirmaciones es falsa. a) Laa usabilidad implica facilidad de aprendizaje. a b) Laa usabilidad empeora la imagen corporativa al hacer páginas más simples. c) Laa usabilidad conlleva la reducción del número de errores del usuario. d) Laa usabilidad aumenta la satisfacci satisfacción n del cliente. 5. Si se cumplen las pautas de accesibilidad se asegura. Indique cuál de las siguientes afirmaciones es falsa:

a) Que cualquier usuario pueda acceder acceder aa la la página. b) Que es accesible independientemente del hardware utilizado. c) Se obtiene peor posicionamiento porque la página se hace más ilegible y pesada, al tener ener mucho más código.

d) Normalmente ormalmente se llega a más público aumentando el número de visitantes.



E EJ JE ER RC CI IC CI IO OS SP PR RO OP PU UE ES ST TO OS S



1. Realice el test de accesibilidad a tres páginas de portales web famosos e indique el número de fallos generados para cada nivel de prioridad.

2. Realice un test a una de las las ppáginas web desarrollada desarrollada en en el el ejercicio ejercicio 11 del del tema tema 2, 2, yy corrija corrija ginas web los errores hasta adaptarla a un nivel de accesibilidad 3.

3. Escoja tres herramientas para validar la accesibilidad y compárelas realizando un análisis para un mismo sitio. Indique cuál ha sido la mejor herramienta.

4. Instala la versi versión n de escritorio de TAW yy genera genera los los in informes formes de de resumen resumen yy TAW TAW para para una una página de su su elecci elección. p gina web de n.

4 Capítulo

4

HERRAMIENTAS DE EDICIÓN WEB OBJETIVOS: 

Conocer los diferentes tipos de herramientas web.



Utilizar herramientas para crear páginas web.



Utilizar herramientas para editar los diferentes elementos multimedia.

4.1 INTRODUCCIÓN Para crear páginas web, es necesario utilizar diferentes tipos de herramientas que facilitan el trabajo. Para crear páginas no es necesario utilizar únicamente herramientas de edición HTML ya que además, la página web incorpora imágenes, sonido, etc. En la tabla 4.1 se muestran las herramientas más utilizadas para la creación de páginas web y que se clasifican en las siguientes categorías: edición HTML, edición de imágenes, edición de sonido, edición de vídeo y animaciones. Otra forma de clasificar las herramientas es a través de su licencia. Básicamente se pueden clasificar en herramientas comerciales o basadas en software libre. Aunque las herramientas comerciales suelen tener una mayor funcionalidad, hoy en día las herramientas basadas en software libre proporcionan unas grandes funcionales que permiten crear sin problemas cualquier sitio web. A lo largo del libro va a aprender a utilizar las herramientas más importantes de edición de páginas web, de imágenes y de sonido, aunque nos centraremos en el uso de herramientas basadas en software libre.

90

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

Tabla 4.1. Herramientas más utilizadas Nombre

Licencia

URL

Edición web

FrontPage

Comercial

http://www.microsoft.com/latam/office/frontpage/prodinfo/default.mspx

Dreamweaver

Comercial

http://www.adobe.com/es/products/dreamweaver.html?promoid=BPBIM

Netbeans

Libre

http://netbeans.org/

Eclipse

Libre

http://www.eclipse.org/

NVU

Libre

http://net2.com/nvu/

Bluefish

Libre

http://bluefish.openoffice.nl/index.html

Edición de imágenes

Gimp

Libre

http://www.gimp.org.es/

Photoshop

Comercial

http://www.adobe.com/es/products/photoshop.html

CorelDraw

Comercial

http://www.corel.com/es

Inkscape

Libre

http://inkscape.org/?lang=es

Audacity

Libre

http://audacity.sourceforge.net/?lang=es

GoldWave

Comercial

http://www.blender.org/

Adobe Premiere

Comercial

http://www.adobe.com/es/products/premiere.html?promoid=BPBJH

Avidemux

Libre

http://avidemux.sourceforge.net/

Adobe Flash

Comercial

http://www.adobe.com/es/products/flash.html

Openlaszlo

Libre

http://www.openlaszlo.org/

Blender

Libre

http://www.blender.org/

Edición de sonido

Edición de vídeo

Animaciones

© STARBOOK

CAPÍTULO 4. HERRAMIENTAS DE EDICIÓN WEB 91

4.2 HERRAMIENTAS DE EDICIÓN WEB

4.2.1 Dreamweaver Dreamweaver es una aplicación propietaria, desarrollada por Adobe, destinada a la creación,que edición y mantenimiento de sitios web. Dreamweaver un entornocon fácillay sencillo permite utilizar multitud de elementos y generarproporciona páginas compatibles mayoría de los estándares. Su última versión soporta HTML5, CSS y lenguajes scripts como Javascripts, soporta librerías como jquery, etc. Además, como novedad ofrece soporte para aplicaciones para dispositivos móviles. El proceso de instalación de Dreamweaver es muy sencillo y basta con seguir los pasos del asistente que le solicita, aceptar los términos de la licencia, indicar el número de serie del producto y seleccionar los elementos a instalar (véase la figura 4.1).

Figura 4.1. Opciones de instalación de Dreamweaver

La principal funcionalidad que presenta Dreamweaver al diseñador es que le permite generar automáticamente el código HTML de una página web. Si observa la figura 4.2, puede ver que en la parte izquierda se puede ir viendo el código HTML generado mientras en la parte de la derecha se muestra el resultado de la interpretación del código.

92

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

Figura 4.2. El panel de diseño de Dreamweaver

Dreamweaver permite cuatro tipos de vistas: 

Vista código. Se permite la introducción de código directamente.



Vista de código dividida . Versión dividida de la vista de código que permite

moverse por diferentes zonas de la página a la vez. 

Vista diseño. Permite el diseño visual de la página, reduciendo el tiempo de

desarrollo. 

Vista código y diseño . Es la vista comentada anteriormente y una de las más

usadas, ya que permite a la vez mostrar el código y una representación realista del diseño final de la página. 

Vista en vivo. Es una vista similar a la vista diseño que muestra una versión

realista de la página e incluso permite interactuar con ella como lo haría un navegador. En la figura 4.3 puede ver la barra de herramientas que permite cambiar de vista.

Figura 4.3. Dreamweaver. Cambiando de vista

Uno de los menús importantes delpágina programa puede insertar distintosmás elementos de una web.es el menú de insertar, desde el cual

© STARBOOK

CAPÍTULO 4. HERRAMIENTAS DE EDICIÓN WEB 93

Figura 4.4. Menú Insertar de Dreamweaver

Dreamweaver es una aplicación muy intuitiva que le guía a través de asistentes, durante todo el proceso de diseño. A modo de ejemplo, en la figura 4.5 puede ver el asistente que le ayuda a insertar una etiqueta HTML. Al pulsar sobre una etiqueta el asistente le muestra una pequeña descripción así como sus opciones más importantes.

Figura 4.5. Dreamweaver. Inserción de una etiqueta

94

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

ACTIVIDAD 4.1 

Instale Dreamweaver.



Crea una página web en la que utilices varios tipos de formato de texto.



Crea una página web en la que utilices diferentes elementos (p.ej. tablas, listas).

4.2.2 NVU NVU es una herramienta libre con una funcionalidad muy parecidas a Dreamweaver. NVU es un editor de páginas web que facilita el desarrollo de páginas web gracias a las diferentes visualizaciones disponibles en su interfaz (código fuente, ventana, visión con tags de HTML realzados). NVU es una versión multiplataforma y se encuentra disponible para los sistemas Windows, GNU/Linux y Mac.

URL DE INTERÉS Página oficial de NVU http://net2.com/nvu/.

El proceso de instalación de NVU es muy sencillo, ya que tan sólo debe seguir los pasos del asistente de instalación. Una vez instalada la herramienta, ejecute la herramienta y acceda al entorno de trabajo (véase la figura 4.6).

Figura 4.6. NVU. Ventana principal

© STARBOOK

CAPÍTULO 4. HERRAMIENTAS DE EDICIÓN WEB 95

El área de trabajo es muy similar al área de Dreamweaver, ya que permite desplazarse entre las diferentes formas de diseño fácilmente, aunque NVU no soporta la posibilidad de ver al mismo tiempo el código y la vista de diseño. El menú de acceso a los distintos modos se encuentra en la parte inferior del área de edición. Tal y como se puede ver en la figura 4.7.

Figura 4.7. NVU. Área de trabajo

Los modos de trabajo que permite la herramienta son: 



El modo normal permite crear páginas html, en modo diseño de alto nivel, sin introducir código, introduciendo elementos como tablas o formularios a través del menú. HTML tags. Permite la edición de componentes al igual que la vista normal, sólo

que se especifica sobre la etiqueta sobre la que se trabaja. 

Source. Permite visualizar y editar el código fuente generado.



Vista preliminar. Previsualizar el documento como si de un navegador se tratara.

La aplicación dispone de una barra de herramientas de acceso a las utilidades de uso más frecuente que se puede encontrar en la parte superior, del área de edición (véase la figura 4.8). Desde la que se pueden insertar, imágenes, tablas, formularios, enlaces, y hasta incluso publicar la página web subiéndola por medio de FTP a un servidor.

Figura 4.8. NVU. La barra de herramientas frecuentes

El resto de elementos está accesible desde el menú principal del programa, dentro del menú los subelementos más importantes son el menú insertar y formato. Desde el menú insertar se pueden incorporar los distintos elementos HTML al diseño, como tablas, imágenes, formularios, enlaces, etc. (véase la figura 4.9). Desde el menú formato se puede cambiar la apariencia de los elementos del documento como: tipografía, tamaño, color, estilo formato, sangrías, color de fondo.

96

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

Figura 4.9. NVU. El menú insertar

ACTIVIDAD 4.2 

Instale NVU.



Crea una página página web web en en la laque queutilices utilicesvarios variostipos tiposde deformato formato dede texto. texto.



Crea una página página web web en en la la que que utilices utilicesdiferentes diferenteselementos elementos(p.ej. (p.ej.tablas, tablas, listas).

4.2.3 Bluefish Bluefish es un editor libre multiplataforma, dirigido a diseñadores web, con conocimientos del lenguaje, capaz de reconocer diferentes lenguajes de programación como HTML, CSS, JavaScripts, PHP, etc.

URL DE INTERÉS Página oficial de Bluefish http://bluefish.openoffice.nl/index.html.

Bluefish se presenta al diseñador como un editor de textos con funciones avanzadas que permiten al diseñador incluir mediante botones y asistentes los distintos elementos del lenguaje. Como inconveniente presenta que no muestra el tiempo de diseño como va quedando la página.

© STARBOOK

CAPÍTULO 4. HERRAMIENTAS DE EDICIÓN WEB 97

En la figura 4.10, se puede ver la ventana principal de la aplicación. Como puede observar, la aplicación está divida en un menú superior y una menú lateral de acceso a las distintas funciones del software y un panel central donde escribe el código html.

Figura 4.10. Bluefish. Ventana principal

En la figura 4.11 se muestra la barra de menú rápida, donde se muestra las funciones más destacadas. La barra se divide en: 

Barra estándar. Permite acceder a las opciones más comunes del programa,

como insertar imágenes, enlaces, encabezados. 

Barra tipográfica. Permite realizar cambios sobre el formato de texto del

documento, también permite incluir los distintos tipos de encabezados. 

Barra para tablas. Permite insertar cualquier elemento perteneciente a las

tablas, incluso se puede lanzar un asistente para la construcción de tablas. 

Barra para Marcos. Permite insertar cualquier elemento para la construcción de

marcos, incluso se puede lanzar un asistente de ayuda a la construcción de marcos.



Barra para formularios. Da acceso a los distintos elementos para la construcción

de un formulario. 

Barra para listas. Inserta los distintos elementos para la construcción de listas.

98

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

Figura 4.11. Bluefish. Menú de herramientas de acceso rápidas

Otra forma de insertar los distintos elementos del lenguaje se puede realizar a través del menú Etiquetas de la barra de herramientas estándar (véase la figura 4.12).

Figura 4.12. Bluefish. Menú-Etiquetas

ACTIVIDAD 4.3 

Instale Bluefish.



Crea una página web en la que utilices varios tipos de formato de texto.



Crea una página página web web en en la la que que utilices utilicesdiferentes diferenteselementos elementos(p.ej. (p.ej.tablas, tablas, listas).

4.3 OTRAS HERRAMIENTAS

4.3.1 Gimp GIMP (GNU Image Manipulation Program ) es un programa de edición de imágenes libre disponible para los sistemas Windows, GNU/Linux y Mac.

© STARBOOK

CAPÍTULO 4. HERRAMIENTAS DE EDICIÓN WEB 99

Es un programa con gran capacidad y funcionalidad que puede utilizarse la edición básica (como Microsoft Paint) e incorpora funciones de retoque fotográfico profesional del estilo de Adobe Photoshop.

URL DE INTERÉS Página oficial de GIMP http://www.gimp.org.es.

El proceso de instalación de GIMP es muy sencillo, ya que tan sólo debe seguir los pasos del asistente (véase la figura 4.13).

Figura 4.13. Instalando GIMP

Entre las principales funcionalidades que presenta GIMP destacan: 





Presenta un completo conjunto de herramientas de pintura incluyendo pincel, lápiz, aerógrafo, clonado, etc. Soporte imágenes de grandes dimensiones siendo el único límite el espacio disponible en el disco. Anti-dentado de alta calidad.

100

CONSTRUCCIÓN DE PÁGINAS WEB



Asistencia completa del canal alfa para trabajar con transparencia.



Capas y canales.





© STARBOOK

Gran variedad de herramientas de transformación incluyendo rotar, escalar, inclinar y voltear. Soporta una gran variedad de formatos GIF, JPEG, PNG, XPM, TIFF, TGA, MPEG,

PS, PDF, PCX, BMP, etc. 

Gran variedad de herramientas de selección (selección elíptica, libre, difusa, bézier y tijeras inteligentes).

El espacio de trabajo de Gimp, está estructurado en un entorno multiventana, en su disposición más básica, ver figura 4.14, Gimp se divide en tres ventanas, aunque un usuario avanzado puede utilizar muchas más ventanas: 

Ventana principal o ventana de imagen . Normalmente una, si se trabaja con

una imagen, aunque existirán tantas ventanas como imágenes se tengan abiertas. Desde esta venta contiene el menú de los comandos principales de Gimp (Archivo, editar, seleccionar, imagen, capas,…). 

Ventana de herramientas. Esta ventana contiene un conjunto de botones que

permiten seleccionar distintas herramientas. En la parte superior de la venta se muestran los botones de selección y en la parte inferior se muestra las opciones de las herramientas. 

Ventana de empotrables. Esta venta es una ventana contenedora que puede

contener una serie de herramientas o diálogos configurables. Por ejemplo, puede contener la barra de pinceles, la paleta de colores, las opciones de la herramienta. Dentro de la barra de herramientas de gimp, se pueden encontrar una gran variedad de herramientas, incluso se puede personalizar para añadir más, las más destacadas son: 

Herramientas de selección. Rectangular, elíptica, libre o selección difusa, esta

última que permite la selección basada en color. 

Herramientas de edición. Tijeras, selección de color, recorte, pincel, lápiz,

goma, pluma, aerógrafo, relleno,… 

Otras herramientas. Clonado, saneado, enfoque, emborronado, marcado, lupa,

metro,…

© STARBOOK

CAPÍTULO 4. HERRAMIENTAS DE EDICIÓN WEB 101

Figura 4.14. Área de trabajo de Gimp

Figura 4.15. Barra de herramientas Gimp

ACTIVIDAD 4.4 

Instale GIMP.



Descarga una imagen y recorta la imagen.



Descarga una imagen y dibuja en ella utilizando las diferentes herramientas que proporciona GIMP.

102

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

4.3.2 Audacity Audacity es un software libre y abierto para la edición y grabación de audio, muy fácil de usar que se encuentra disponible para los sistemas Windows, GNU/Linux y Mac.

URL DE INTERÉS Página oficial de Audacity http://audacity.sourceforge.net/.

Entre las principales funcionalidades que presenta Audacity destacan: 









Grabación de audio, bien usando directamente un micrófono o con un mezclador. Como dato adicional es capaz de grabar 16 canales simultáneamente. Importación y exportación de archivos de audio a distintos formatos, permitiendo editarlos, combinarlos, generando nuevos archivos. Edición sencilla de audio. Numerosa variedad de efectos: eliminación de ruidos estáticos, silbidos, filtros de ecualización FFT, ajuste de volúmenes, efectos de eco, fase, etc. Gran variedad de plugins para añadir nuevos efectos y soportar nuevos formatos.

Figura 4.16. Audacity

© STARBOOK

CAPÍTULO 4. HERRAMIENTAS DE EDICIÓN WEB 103

ACTIVIDAD 4.5 





Instale Audacity. Descarga un fichero de audio y recórtalo para que tenga una duración de 10 segundos. Descarga un fichero de audio y añádele eco.

4.3.3 Wink Wink es una herramienta diseñada para la creación de animaciones en flash permitiendo capturar los movimientos por la pantalla, para su posterior edición, diseño y modificación de la presentación. Permite al diseñador incluir comentarios, anotaciones y hasta incluso guiar al usuario por la presentación. Wink permite guardar la presentación en formato flash, por tanto el resultado puede ser añadido fácilmente a una web.

URL DE INTERÉS Página oficial de Wink http://www.debugmode.com/wink.

El proceso de instalación de Wink es muy sencillo, ya que tan sólo debe seguir los pasos del asistente de instalación (véase la figura 4.17).

Figura 4.17. Proceso instalación Wink

104

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

El entorno de trabajo de Wink es bastante sencillo (véase figura 4.18) y se divide en tres zonas: 





El área de trabajo, donde se encuentra el frame activo. La lista en miniatura de frames del proyecto, donde se puede ir seleccionando el frame a visualizar, así como alterar la posición de un determinado frame. Las barras de herramientas que se sitúan a la derecha de la pantalla permiten insertar elementos, como botones, bocadillos de texto, títulos, audio de fondo, hasta incluso hipervínculos, etc. (véase la figura 4.19).

Figura 4.18. Entorno de trabajo de Wink

Figura 4.19. Barra de herramientas de Wink

© STARBOOK

CAPÍTULO 4. HERRAMIENTAS DE EDICIÓN WEB 105

Otra de las herramientas más importantes de Wink es la herramienta de captura de pantalla (véase la figura 4.20) que permite realizar diferentes tipos de capturas: 



Captura basada en tiempos. Se establece el número de fotogramas por segundos que se desea capturar. Captura dirigida por eventos. Este tipo de captura permite seleccionar el tipo de evento a través del cual captura el fotograma. Wink permite capturar por ratón, por teclado o por ambos.

Ambos tipos de captura tienen la posibilidad de grabar audio mientras se realiza.

Figura 4.20. Asistente de grabación

ACTIVIDAD 4.6 

Instale Wink.



Realiza una animación que mueva una imagen por la pantalla.



Añade a la animación animación anterior anterior una una capa capapara paraque quelalaanimación animacióntenga tengauna una imagen de fondo.

106

CONSTRUCCIÓN DE PÁGINAS WEB



T TE ES ST TD DE EC CO ON NO OC CI IM MI IE EN NT TO OS S

una herr herramienta amienta que se utiliza para: 1. Bluefish es una a) Retocar imágenes.

b) Crear formularios online. c) Diseñar páginas web. d) Crear animaciones flash lash. 2. ¿Cuál de las siguientes herramientas no se basa en software libre? a) Avidemux. b)) Audacity. c) Adobe Flash. d) Blen Blender. er.

3. ¿Cuál de las siguientes herramientas no permite editar páginas web? a) Gimp. b) NVU. c) FrontPage. d) Neatbeans. 4. ¿Cuáles de las siguientes herramientas no permite editar editar gráficos? gráficos? a) Gimp. b) Photoshop. c) CorelDraw. d) Audacity.

© STARBOOK



© STARBOOK

CAPÍTULO 4. HERRAMIENTAS DE EDICIÓN WEB 107

5. ¿Cuál de las siguientes herramientas no permite visualizar la página HTML mientras se está diseñando?

a) NVU. b)) Dreamweaver. c) FrontPage. d) Bluefish.



E EJ JE ER RC CI IC CI IO OS SP PR RO OP PU UE ES ST TO OS S



1. Instale Instale una una de de las las herramientas herramientas para para lala edici edición n de de ppáginas ginas web web yy realice realice con con lala herramienta una de las páginas propuestas en el Capítulo 1.

2. Instale la herramienta Audacity, grabe un sonido y edítelo y guárdelo en el formato adecuado para incluir en una p página gina web.

3. Instale la la herramienta herramienta Gimp, Gimp, yy genere genere una una image imagen n transparente transparente indicando indicando el el proceso proceso seguido para realizarla.

4. Genere una animaci animación n con con la la herramienta herramienta Wink Wink sobre sobre el el uso uso de de las las her herramientas ramientas Gimp Gimp yy Audacity.

5. Diseñe una página web donde incluya, el audio, imagen y animaciones creadas en los ejercicios anteriores.

5 Capítulo

5 FORMULARIOS EN LA CONSTRUCCIÓN DE PÁGINAS WEB OBJETIVOS: 

Construir formularios web para recibir información de los usuarios.



Utilizar los diferentes elementos de los formularios.



Personalizar los eventos de un formulario.



Crear y diseñar formulario siguiendo los criterios de accesibilidad y usabilidad.

5.1 INTRODUCCIÓN Los formularios son elementos de entrada de información que permiten al usuario interactuar con el servidor web. Por ejemplo, puede introducir su nombre de usuario y contraseña a través de un formulario y el sistema le muestra sus datos personales, correos electrónicos, etc. Aunque los formularios se utilizan para interactuar con el servidor, sin duda alguna, su uso más extendido es el de recopilar información de los usuarios (p.ej., datos personales, aficiones). Normalmente, los formularios envían los datos a una página dinámica (p.ej., en PHP) que recibe los datos, los almacena en una base de datos y/o los procesa. Además, si lo desea, también es posible utilizar un formulario de una forma más sencilla enviando simplemente la información a una dirección de correo electrónico.

110

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

5.2 ELEMENTOS Y ATRIBUTOS Un formulario se estructura en cuatro secciones: 

Inicio del formulario. Se define mediante la etiqueta y es donde se

indica cómo se envía la información y su destino. 

Elementos del formulario. Es la parte más importante del formulario y es dónde

se indican los datos que se quieren registrar. Los elementos de un formulario se indican con las etiquetas , o . 



Botones de acción. Permiten enviar o resetear el formulario. Los botones se pueden definir con las etiquetas o . Fin del formulario. El fin del formulario se establece con la etiqueta .

5.2.1 El formulario La etiqueta permite indicar el inicio del formulario. Los atributos que permite la etiqueta son: 

Name. Es el nombre del formulario y es muy importante indicarlo en el caso de

utilizar más delosundatos. formulario en la misma página o si se utilizan lenguajes scripts para verificar 

Method. Se utiliza para indicar de qué forma se van a enviar la información al

servidor. Existen dos formas de enviar la información:



-

GET. Envía los datos directamente agregándolos a la dirección URL y separándolos de la dirección por un símbolo de interrogación. Por ejemplo, en la URL http://miweb.es/formulario.html?nombre=Javier se envía la variable nombre con el valor “Javier”.

-

POST. Esta opción es más segura que la anterior, ya que los datos se envían directamente al servidor y no por la URL.

Action. Establece la dirección a la que se envía la información del formulario. La

forma

más

normal

es

enviar

los

datos

a

otra

página

web

(p.ej.,

action=”http://miweb.es/destino.php” ) aunque también se pueden enviar los datos a una dirección de correo (p.e. action=” mailto:[email protected] ”).

© STARBOOK



CAPÍTULO 5. FORMULARIOS EN LA CONSTRUCCIÓN DE PÁGINAS WEB 111

Enctype. Es un parámetro opcional aunque recomendable que especifica cómo se codifican los datos del formulario. Puede tomar los valores: text/plain, envía la información en texto plano; application/x-www-form-urlencoded, valor por defecto, codifica los caracteres antes de enviar el formulario; multipart/form-data,

se utiliza para enviar fichero y no realiza ningún tipo de codificación.

A continuación, a modo de ejemplo se muestra el elemento de un formulario que envía los datos a una dirección de correo electrónico.

5.2.2 Elementos de entrada El elemento es muy versátil ya que con él es posible definir prácticamente todos los elementos de un formulario. Por ejemplo, permite definir elementos de texto, contraseñas, botones, etc. El atributo que se utiliza para indicar el tipo de elemento es type y su sintaxis es:

En la tabla 5.1 se muestran los diferentes elementos que permite la etiqueta . Además de la opción type, el elemento permite los siguientes atributos: 

Name. Nombre del elemento que se asocia al dato que va a almacenar.



Value. Valor por defecto que tiene el componente cuando se inicializa.







Size. Especifica el ancho del componente en píxeles, excepto cuando se trata de un componente de tipo password o text, que indica la longitud del texto. Maxlength. Cuando se trata de un elemento de tipo password o text, especifica el número máximo de caracteres que puede introducir el usuario. Checked. Se utiliza en los tipos radio y checkbox y permite indicar si elemento

está o no está seleccionado. 

Src. Indica la URL de la imagen que se utiliza para decorar el elemento.

112

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

Tabla 5.1. Variantes del elemento Nombre

Descripción

Ejemplo

Resultado

Elementos de entrada Text

Texto de entrada.



Password

Texto de entrada que texto con asteriscos.

Checkbox

Casilla de verificación.

opcion 1

Radio

Crea un radio-botón.

opcion 1 opcion 2

Hidden

Elemento oculto.



Submit

Botón de envío del formulario.



Reset

Botón para reiniciar los datos de un formulario.



Image

Permite crear un botón tipo submit utilizando una imagen.



Control de selección de ficheros.



Botones

Ficheros file

A continuación, a modo de ejemplo se muestra el código correspondiente al formulario que se muestra en la figura 5.1.

© STARBOOK

CAPÍTULO 5. FORMULARIOS EN LA CONSTRUCCIÓN DE PÁGINAS WEB 113

Listado 5.1.html Nombre: Apellido: email Varón Mujer

Figura 5.1. Ejemplo de formulario de entrada de datos

ACTIVIDAD 5.1 



Crea un formulario con los campos: nombre, apellidos, apellidos,login y contraseña. Crea un formulario formulario que que te te permita permita realizar realizar un un pedido. pedido.Por Porejemplo, ejemplo,elel formulario ormulario puede tener los siguientes campos: nombre, dirección completa, información de de pedido pedido yy dirección direcciónde deenvío. envío.

114

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

5.2.3 Botones El elemento permite crear botones, al igual que el elemento , que ofrecen posibilidades más ricas de representación. Por ejemplo, puede asociar una imagen y un texto al mismo botón, puede colocar dentro del botón cualquier contenido que se desee, etc. Las opciones que permite el elemento son las siguientes: 

Name. Nombre del botón.



Value. Valor inicial del botón.



Disabled. El valor es opcional, y si establece disabled=false entonces el botón

está deshabilitado. 

Type. Indica el tipo de botón que se va a crear. Los posibles valores son:

-

buttom. Crea un botón pulsador. En principio no realiza ninguna acción y se

-

submit. Crea un botón de envío del formulario.

-

reset. Crea un botón de restablecimiento del formulario.

utiliza para asociarle acciones mediante lenguajes scripts.

continuación, a modo de el código para el Aenvío de datos utilizando unaejemplo imagenpuede (véasever la figura 5.2).que permite crear un botón

Listado 5.2.html ENVIAR

Figura 5.2. Botón de enviar utilizando una imagen

© STARBOOK

CAPÍTULO 5. FORMULARIOS EN LA CONSTRUCCIÓN DE PÁGINAS WEB 115

ACTIVIDAD 5.2 



Crea un botón para enviar y otro para reiniciar el formulario utilizando imágenes. Modifique los formularios de los ejercicios anteriores para que utilicen los nuevos botones.

5.2.4 Listas desplegables El elemento se utiliza para crear los elementos comobox o listas desplegables. Para realizar una lista desplegable se debe utilizar la siguiente sintaxis: Almería ... Zaragoza

Como puede ver en código anterior, la etiqueta permite indicar que se va a crear una lista desplegable y la etiqueta se utiliza para indicar sus posibles valores. Los principales atributos del atributo select son: 

Name. Nombre del elemento.



Size. Indica el número de filas de la lista que se muestran al mismo tiempo. La

utilización de esta etiqueta permite que el elemento sea un desplegable o una lista de opciones. 

Mulitple. Indica si se permite seleccionar múltiples opciones. Por defecto, el

formulario sólo permite seleccionar una opción. Los principales atributos de

option

son:



Disabled. Muestra la opción desactivada.



Label. Especifica una etiqueta corta para la opción.



Selected. Indica que es el valor por defecto del desplegable.

116

CONSTRUCCIÓN DE PÁGINAS WEB



© STARBOOK

Value. Establece el valor que envía el formulario.

Además, la etiqueta permite especificar grupos de opciones dentro del seleccionable. Su principal atributo es: 

Label. Descripción para el grupo de opciones.

En la tabla 5.2, pude ver los diferentes elementos seleccionables, así como un ejemplo y el resultado que muestra el navegador. Tabla 5.2. Ejemplos de seleccionables Elemento Combobox

Código de ejemplo Listado 5.3a.html

Mercedes BMW Audi Lista de opciones

Listado 5.3b.html

Mercedes BMW Audi Lista de opciones

Listado 5.3c.html

Mercedes BMW Audi Renault

Resultado

© STARBOOK

CAPÍTULO 5. FORMULARIOS EN LA CONSTRUCCIÓN DE PÁGINAS WEB 117

ACTIVIDAD 5.3 



Crea un formulario que tenga el campo Provincia que muestre un listado con varias provincias españolas. Añade al formulario anterior el campo Sexo que muestre las opciones Hombre yy Mujer. Mujer.

5.2.5 Etiquetas Las etiquetas proporcionan información al usuario sobre el tipo de información que guarda el elemento de entrada. Por lo tanto, las etiquetas son elementos muy importantes que permite crear formularios accesibles. Las etiquetas se establecen con y su principal atributo, aunque de carácter opcional, es el atributo for, que se utiliza para enlazar el label con el elemento al que acompaña. En el siguiente ejemplo puede ver cómo enlaza una etiqueta con un elemento de texto.

Listado 5.3.html Matricula

5.2.6 Grupos de elementos Las etiquetas y permiten la creación de un grupo de elementos agrupados por un área visible dentro del formulario, facilitando al usuario su comprensión y usabilidad, ya que permite desplazarse de un control a otro a través de la tecla TAB y le proporciona una etiqueta a modo de leyenda con una descripción global de conjunto de elementos.

118

CONSTRUCCIÓN DE PÁGINAS WEB



La etiqueta crea el recuadro que agrupa a los controles.



La etiqueta indica el título del área de agrupación.

© STARBOOK

En la figura 5.3 puede ver el resultado de utilizar ambas etiquetas para el ejemplo que se muestra a continuación.

Listado 5.4.html

Cliente: Nombre: Apellidos: Fecha Nacimiento: Domicilio: Calle: Número: C.P:

Figura 5.3. Uso de las etiquetas Legend y Fieldset

© STARBOOK

CAPÍTULO 5. FORMULARIOS EN LA CONSTRUCCIÓN DE PÁGINAS WEB 119

ACTIVIDAD 5.4 

Crea un formulario que tenga tres grupos de elementos: datos personales, datos académicos y datos laborales.

5.3 EVENTOS Un evento es una acción que ejecuta el usuario sobre una aplicación (por ejemplo, un evento se produce cuando un usuario hace un clic sobre un elemento, se mueve por una determinada zona de la web), entonces el evento genera un aviso a la aplicación para que se pueda generar a una repuesta si el evento ha sido tratado por la aplicación. Los eventos que aparecieron por primera vez en HTML 4, añaden a HTML la funcionalidad de interaccionar con el usuario, permitiéndonos por ejemplo: lanzar una llamada a JavaScript para lanzar una rutina. En la tabla 5.3 se muestran los elementos que se insertan dentro de las etiquetas HTML para generar eventos de ventana, para formularios, de teclado y de ratón. Tabla 5.3. Eventos Evento

Descripción

Eventos de ventana onLoad

Permiten lanzar un

onUnload

script

a la carga del documento.

Todo lo contrario, permitirán lanzar el

script

al cierre del documento.

Eventos de formulario onChange

Detecta cuándo un elemento cambia, por ejemplo cuando se inserta un carácter, o se pulsa sobre un botón.

onSubmit

Lanza un script cuando el formulario haya sido enviado.

onReset

Revela cuándo un formulario ha sido reseteado.

onSelect

Ejecuta un script cuando un elemento es seleccionado.

onBlur

Se puede ver cuándo el elemento pierde el foco.

onFocus

Detecta cuándo el elemento obtiene el foco.

120

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

Eventos de teclado onKeyDown

Lanza un script cuando una tecla es pulsada.

onKeyPress

En este caso cuando la tecla es pulsada y devuelta a su posición.

onKeyUp

Lanza el evento al soltar una tecla.

Eventos de ratón onClick

Lanza el script cuando se hace un clic de ratón.

onDblClick onMouseDown

Lanza el script cuando se hace doble clic de ratón. Detecta cuándo el botón del ratón es presionado.

onMouseMove

Ejecuta el script cuando movemos el puntero del ratón.

onMouseOut

Obtiene cuándo el puntero del ratón semueve fuera de la zona deun elemento.

onMouseOver

Revela que el puntero del ratón se está desplazando sobre el área de un elemento.

onMouseUp

Lanza el script cuando el botón del ratón es liberado.

A continuación, a modo de ejemplo se muestra el código correspondiente donde se valida que la edad del usuario sea un valor entre 1 y 100.

Listado 5.5.html function validar(form) { //convierte en valores enteros los datos del formulario (base 10) var1 = parseInt(form.edad.value, 10); //valida que sean numeros if ( isNaN(var1) ) { alert("La edad introducida es incorrecta.\n No es un valor numérico."); return false; } else if( var1 100 ) { alert("El rango de edad es incorrecta."); return false; } else {

© STARBOOK

}

CAPÍTULO 5. FORMULARIOS EN LA CONSTRUCCIÓN DE PÁGINAS WEB 121

}

alert("Los valores introducidos son correctos.\n "); return true;

Datos personales: Nombre: Apellidos: Edad: Enviar

5.4 CREACIÓN DE FORMULARIOS Hoy en día, la creación de formularios es una tarea bastante sencilla, debido a la existencia de herramientas que permiten generan formularios en cuestión de minutos. Aunque normalmente para usuarios avanzados la mejor forma de crear un formulario y más eficiente es la de utilizar el lenguaje HTML para definirlo. Tabla 5.4. Herramientas para la creación de formularios Nombre

URL

JotForm

http://www.jotform.com/

HtmlForm

http://htmlform.com/

Fromlogix

http://www.formlogix.com/

Faary

http://faary.com/

Phpform

http://www.phpform.org

Formsite

http://www.formsite.com/

A continuación, se va crear un para gestionar unaapellidos agenda ytelefónica. formulario le va a solicitar al ausuario susformulario datos personales (nombre, dirección)Ely sus datos de contacto (teléfono y email).

122

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

En primer lugar se inicia la creación del formulario mediante la etiqueta , en la que se deben especificar los atributos: action: donde se define la acción a llevar a cabo por el formulario, se coloca la dirección de envió del formulario; method: se selecciona el método de envió y para finalizar se escoge la codificación mediante el atributo enctype.

Listado 5.6.html

Una vez realizada la definición del formulario ya se puede empezar a incluir los distintos elementos del formulario. En este caso se van a incluir dos campos de entrada de texto, uno para el nombre y otro para los apellidos. Donde se debe indicar el tipo de control en este caso será de tipo text, así como el tamaño y nombre para el campo de entrada. Nombre:



Dirección: Teléfono:



email:



Para finalizar, se cierra el formulario.

Con estos sencillos pasos se ha creado un sencillo formulario web. Aunque este formulario no cumple ninguna de las pautas de accesibilidad y usabilidad, que se verán en el siguiente apartado.

ACTIVIDAD 5.5 



Instale una herramienta que permita generar formularios. Utilice la herramienta para generar un formulario para recoger datos personales de los usuarios.

© STARBOOK

CAPÍTULO 5. FORMULARIOS EN LA CONSTRUCCIÓN DE PÁGINAS WEB 123

5.5 ACCESIBILIDAD Y USABILIDAD A la hora de diseñar un formulario es imprescindible seguir un conjunto de pasos para construir un formulario usable y accesible. En primer lugar se debe analizar la información que desea obtener del usuario y establecer la forma óptima la información. Para ello se debe las funciones así como cumplir una serieanalizar de requisitos básicos.y características que debe tener el formulario, 



Pedir exclusivamente la información necesaria, pedir información innecesaria hará dudar al usuario, así como incrementará el tiempo de dedicación del usuario a rellenarlo, minimizando el éxito de recolección de datos. Reutilizar los campos siempre que sea posible. Por ejemplo se podría utilizar el

email, como nombre de usuario. De esta forma ya se elimina un dato. 









Si se necesitan formularios muy extensos, dividir estos en distintas páginas. Indicando siempre el estado de proceso del formulario. Por ejemplo, paso 2 de 5. Si se divide el formulario por páginas la información por página debe ser agrupada coherentemente por funcionalidad. Si el formulario tiene más de una página, siempre se debe permitir al usuario volver atrás. Evitar el uso de pestañas para el diseño de formularios extensos. Establecer un título para el formulario, que describa de forma breve y precisa la función del mismo.



Organizar los campos en una sola columna.



Organizar los campos por grupos lógicos.



Agrupar si es posible los campos obligatorios al principio del formulario.





Identificar claramente los campos obligatorios y opcionales, mediante etiquetas. Identificando los obligatorios siempre y cuando sean menos que los opcionales o viceversa. Establecer un formulario, limpio, alineando verticalmente todas las etiquetas y campos.

124

CONSTRUCCIÓN DE PÁGINAS WEB





© STARBOOK

Evitar la posibilidad de que en determinados campos se introduzca información incorrecta, mediante el uso de lenguajes scripts. Por ejemplo, evitar que en un campo numérico se pueda introducir texto. Cuando se produzca un error al rellenar el formulario, identificar el error indicando el campo que lo ha provocado y por qué motivo.

5.5.1 Criterios de accesibilidad Para cumplir con los criterios de accesibilidad en formularios basta con cumplir tan solo cuatro de las pautas establecidas por WCAG que son: 

Asociar explícitamente las etiquetas con sus controles mediante la etiqueta

. 







Asociar implícitamente los controles y etiquetas, es decir, todo control debe tener una etiqueta significativa. Comprobar que todos los campos del usuario están accesibles por el tabulador, en el mismo orden que el establecido visualmente. No establecer tiempos límites para completar el formulario. Utilizar la opción tabindex para indicar el orden de los elementos para que el usuario pueda utilizar la tecla de tabulación para moverse entre los diferentes elementos de entrada.

5.5.2 Ejemplo En el siguiente código se muestra el formulario anterior siguiendo las pautas de accesibilidad y usabilidad. Donde se puede comprobar que por sólo un poco más de esfuerzo se puede conseguir formularios accesibles y más usables. Básicamente con agrupar correctamente los campos y con incluir las etiquetas de los elementos de forma correcta a través de la etiqueta .

Listado 5.7.html Datos personales: Nombre:

© STARBOOK

CAPÍTULO 5. FORMULARIOS EN LA CONSTRUCCIÓN DE PÁGINAS WEB 125

Apellidos: Apellidos: Datos de contacto: Teléfono: email:

Figura 5.4. Resultado del formulario

5.6 RESUMEN A modo de resumen, en la tabla 5.5 se encuentran los diferentes elementos que se pueden encontrar en un formulario.

126

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

Tabla 5.5. Elementos de un formulario Nombre

Descripción

Ejemplo

Elementos de entrada Text

Texto de entrada.



Password

Texto de entrada que mantiene oculto el texto con asteriscos. Casilla de verificación.



Radio

Crea un radio-botón. La opción checked se utiliza para indicar la opción por defecto.

opcion 1 opcion 2 c)

La siguiente parte de la página que se debe adaptar es la cabecera de la página, cuyo código se muestra a continuación. Como se puede observar, la cabecera está dividida en dos capas en la primera de ellas, llamada site_title se encuentra un enlace, que se debe cambiar por la dirección principal del sitio que se está diseñando. En la segunda parte, header_right, se encuentra el contenido de cabecera de la página, por tanto esta sección se debe adaptar al nuevo sitio.

Listado 6.5.html Lorem ipsum dolor sit amet Etiam sit amet turpis. Duis nulla diam, posuere ac, varius id, ullamcorper sit amet, libero. Nam sodales, pede vel dapibus lobortis, ipsum diam molestie risus, a vulputate risus nisl pulvinar lacus. Read more

136

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

Tras aplicar las modificaciones comentadas el código queda de la siguiente forma:

Listado 6.6.html Mi primera web desde una plantilla En esta página web se está aprendiendo a utilizar las plantillas para crear nuevos sitios web, reutilizando los contenidos. Leer más

El siguiente paso es modificar el menú de la izquierda de la página que se realiza de la misma forma que el anterior. Seguidamente, se modifica el contenido de la página que se encuentra en la capa . Si observa el siguiente código, la capa de contenido se divide en tres capas de tipos post_box, elemento repetitivo que se debe llamar si se desea tener másse dedebe 3 tipos o eliminar va a ser este dejando sólo unresumen, elemento.etc. Dentro de esta capa modificar todocómo el contenido: título,caso fecha de creación,

Listado 6.7.html Aliquam lorem ante dapibus in viverra Date: May 25, 2048 | Author: Mike | Category: Truck, Games Sed tempus egestas diam quis dapibus. Quisque sed mauris velit, a congue lorem. Aliquam quis mi sed libero dapibus iaculis a et mi. templatemo.com provides Power Design as a free css template that can be used for your personal or commercial websites. Credit goes to PhotoVaco for all photos used in this template. Donec imperdiet posuere rhoncus. Etiam pellentesque velit vitae metus scelerisque eu placerat tellus pulvinar. 512 comments Read more Mauris euismod urna id urna faucibus Date: May 22, 2048 | Author: Steven | Category: Racing, Sports Etiam pellentesque velit vitae metus scelerisque eu placerat tellus pulvinar. Sed feugiat libero ac purus posuere vel luctus. Maecenas quis metus urna, nec rhoncus tortor. Morbi ultricies, ante et ullamcorper facilisis, lorem libero auctor risus, in eleifend ante mi ut ante. Proin nec mi nec nunc convallis iaculis. Suspendisse sed, ut ligula Maecenas velit justo, eros mattis necnibh adipiscing congueante. at risus. Mauris tristique vel malesuada cursus. 768 comments Read more Etiam feugiat laoreet sollicitudin Date: May 18, 2048 | Author: John | Category: Games, Shooting et pretium Pellentesque velit. Cras at condimentum nibh eu justo bibendum rutrum justo cursus. et porta. Sed Lorem ipsum dolor sit amet, consectetur adipiscing elit.

138

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

Nam eu felis felis. Praesent tempor, sem in bibendum faucibus, ligula dolor pulvinar est, ut consectetur lacus erat sagittis turpis. Quisque aliquet, urna vitae dignissim dignissim, ipsum lectus venenatis est, eget bibendum nibh tellus vel felis. Aenean scelerisque congue leo a sodales. 256 comments Read more

A continuación se muestra el resultado de modificar el contenido de la web. Listado 6.8.html Mi primera a portación Fecha: Mayo 18, 2048 | Autor: Alfredo | Categoría: HTML, Aprendiendo Estamos aprendiendo a utilizar las plantillas de templatemo En esta sección se describe como se utilizan las plantillas predefinidas para crear nuevos sitios web. 256 comentarios Leer má

© STARBOOK

CAPÍTULO 6. PLANTILLAS EN LA CONSTRUCCIÓN DE PÁGINAS WEB 139

Para finalizar con la adaptación queda tan solo modificar el pie de página. En esta ocasión, se elimina la sección de partners y se traducen el resto de elementos quedando el código de la siguiente forma:

Listado 6.9.html

Mapa Inicio Conó Galería Contacto Cualquier texto Cualquier texto. Cualquier texto. Leer más »

Como se puede comprobar resulta muy útil el uso de plantillas para la creación de un sitio web ya que en tan solo 10 minutos puede obtener un sitio web atractivo y bien estructurado. El resultado final de la adaptación de la plantilla puede verse en la figura 6.4.

ACTIVIDAD 6.2 

Modifique el menú de la izquierda de la plantilla anterior.



Cambie la imagen de “Power” por alguna que se ajuste más a sus intereses.

140

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

Figura 6.4. Plantilla adaptada



T TE ES ST TD DE EC CO ON NO OC CI IM MI IE EN NT TO OS S

1. Indique cual de las siguientes afirmaciones es falsa: a) Las plantillas facilitan el mantenimiento de un sitio web. b) Las plantillas ayudan a mantener la coherencia. c) Las plantillas aumenta el tiempo de desarrollo. d) Las plantillas facilitan el indexado por parte de los buscadores. 2. Indique cuales de las siguientes zonas no pertenece a una plantilla: a) Zona repetida. b) Área no editable. c) Área rea editable. d) Área rea reservada.



© STARBOOK

CAPÍTULO 6. PLANTILLAS EN LA CONSTRUCCIÓN DE PÁGINAS WEB 141

3. Una plantilla web no podrá contener fichero de tipo: a) CSS. a b) HTML. c) JavaScript. d) PDF. 4. En la zona editable de una plantilla el usuario no puede: a) Cambiar el contenido textual del documento. b) Modificar la estructura de diseño. c) Cambiar los atributos marcados como editables. d) Cambiar las im d imágenes genes del documento. 5. Indique cuál de las siguientes afirmaciones es falsa. a) El abuso del uso de plantilla provoca una web homogénea. b) Las plantillas reducen el tiempo de desarrollo porque el diseñador se olvida del diseño y se dedica al contenido. c) La plantilla ayudan a mantener una imagen corporativa. d) El uso de las plantillas requiere de diseñadores con mucho más conocimiento de HTML.



E EJ JE ER RC CI IC CI IO OS SP PR RO OP PU UE ES ST TO OS S



1. Descargue tres plantillas de una librer libreríaa y analiza la disposici disposiciónn de las distintas partes de la plantilla. 2. Utilice una de las plantilla para crear un sitio web completo sobre una temática de su gusto. gus o.

7 Capítulo

7 HOJAS DE ESTILO EN LAWEB CONSTRUCCIÓN DE PÁGINAS

OBJETIVOS: 

Conocer las funciones y características más importantes de las hojas de estilo.



Utilizar adecuadamente los diferentes atributos de las hojas de estilo.



Utilizar los esquemas (layouts) para estructura el contenido de una página web.



Crear páginas web usables y accesibles mediante hojas de estilo.

7.1 INTRODUCCIÓN El estándar HTML se encuentra en continua evolución. El hecho de que Internet se esté abriendo a más público, la competencia entre empresas, y el gran escaparate que supone, provoca en las organizaciones de desarrollo que los navegadores sean cada vez más capaces de plasmar la información de forma atractiva. Es por ello que aparecen las hojas de estilo. Son una respuesta a la necesidad de organizar la presentación de los elementos de una página web guardando una armonía, y facilitando el desarrollo de la web. Las hojas de estilo permiten separar las definiciones de la presentación del contenido de un documento HTML. La especificación HTML fue concebida inicialmente como un lenguaje de marcas, y la introducción de varios niveles de formateo de elementos y atributos de texto sólo sirvió para crear más confusión. Microsoft decidió entonces implementar un nuevo concepto, hojas de estilo, las cuales soportaba en el Internet Explorer 3.0, posteriormente mejoró la especificación en el Internet Explorer 4.0. Netscape también implementó hojas de estilo para sus Communicator y Navigator a partir de la versión 4.0.

144

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

Los documentos HTML son fundamentalmente visualizadores de información. Para hacer más atractivo el aspecto de un documento HTML, tenemos a nuestro alcance diversas posibilidades, tales como combinación de colores, distintos tipos de letras, fondo del documento de un determinado color, ubicación en la pantalla de un determinado texto, etc. En concreto, las hojas de estilo o Style Sheets como se conocen en el mundo Internet, son una extensión del documento en las que se diseña la apariencia general del mismo. La posibilidad de añadir en una hoja de estilo la futura apariencia del documento es un avance para quienes deben programar extensos documentos. Las hojas de estilo permiten indicar el tipo de letra, color, espaciado, fondo, etc. Las principales ventajas de separar el contenido de la presentación utilizando las hojas de estilos son las siguientes: 

Accesibilidad. Los datos se pueden presentar en función del usuario y adaptarlos

a sus necesidades. No es lo mismo presentar una web en un PC, que presentarla en un teléfono móvil, o presentarla a personas con deficiencias. 

Mantenimiento. Separa y centraliza la presentación, bien en diferentes archivos

o en partes bien conocidas del archivo, con lo cual tenemos localizado el código que queremos mantener y/o actualizar. 

Simplicidad. Se obtienen documentos más fáciles de entender y se reduce el

tamaño de los mismos.

7.1.1 Una breve historia de CSS Tras la aparición del lenguaje HTML surgieron las hojas de estilo para suplir la necesidad de tener un lenguaje que permita definir de forma estable un formato de presentación o estilo a un conjunto de documentos. Aunque su verdadero desarrollo se produjo con el boom de Internet y el crecimiento del lenguaje HTML, especialmente en los años de la guerra de los navegadores, ya que la falta de una especificación permitía que una página escrita para un navegador fuera completamente distinta para otro. En la figura 7.1 puede ver, por orden cronológico, la evolución que han sufrido las hojas de estilo a lo largo de los años.

© STARBOOK

CAPÍTULO 7. HOJAS DE ESTILO EN LA CONSTRUCCIÓN DE PÁGINAS WEB 145

1970

CHSS

Se comienza a hablar de las hojas de estilo. Comienzan a surgir lenguajes de especificación. CHSS (Cascading HTML Style Sheets).

1990

SSP

SSP (Stream-based Style Sheet Proposal).

1994

CSS

Guerra de los navegadores. Se unen los creadores de los lenguajes CHSS y SPP para definir una nueva especificación CSS.

1996

CSS nivel 1

Primera especificación oficial del lenguaje CSS.

1998

CSS nivel 2

Aparece la segunda versión del lenguaje. Sigue siendo utilizada en la actualidad con alguna modificación, CSS 2.1.

2007

CSS nivel 3

Última especificación del lenguaje aunque hoy en día no se ha terminado de implementar en la mayoría de los navegadores.

Figura 7.1. Evolución histórica del lenguaje CSS

URL DE INTERÉS

Página oficial de CSS http://www.w3.org/Style/CSS/.

7.1.2 CSS, HTML, XHTML Con la aparición de las hojas de estilo y su creciente popularidad, los diseñadores están cambiando la forma de crear las páginas web, para adaptarse a los nuevos modelos de diseño. En una primera etapa, el lenguaje HTML proporciona al diseñador del soporte suficiente para realizar diseños completos, ya que provee de una serie de etiquetas que permiten aplicar estilo al contenido. Por ejemplo, la etiqueta permite aplicar el tipo de letra, color, tamaño, etc. Aunque poco a poco las etiquetas que afectan al estilo del documento se están dejando de utilizar y se consideran obsoletas o no recomendadas. Tal y como vimos en el Capítulo 1, en la definición 4.1 de HTML, en la versión del tipo de documento más estricto, ya no están permitidos muchos de los elementos que afectan a la presentación. XHTML lleva al extremo la separación entre la capa de datos y la capa de presentación, eliminando de la especificación aquellos elementos y atributos relacionados con el estilo. XHTML no es nada más que una redefinición del HTML 4 con una sintaxis XML, la

146

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

cual conserva la mayoría de los elementos y atributos, exceptuando los elementos y atributos relacionados con el estilo, siendo XHTML mucho más estricto en formato del documento. Por ejemplo, obliga a que todos los elementos y atributos estén escritos en minúscula, también que todos los elementos tengan marcas de inicio y fin, etc. En la actualidad, se tiende a separar los datos de su presentación para poder adaptar mejor el diseño a diferentes dispositivos o usuarios. Por lo tanto en una primera fase del diseño, se utiliza un lenguaje como HTML o XHTML, para formatear los contenidos. Es decir, se designa la función de cada elemento dentro de la página: titulares, párrafo, imágenes, tablas, etc. Una vez se hayan generado los contenidos, se procede a definir, mediante las hojas de estilo, el aspecto visual de cada elemento: color, tamaño, tipografía, posición dentro de la página, etc.

7.1.3 Funciones y características CSS es el lenguaje utilizado para definir el estilo, formato o presentación de documentos separando así los datos o contenido de la presentación. El modo más simple de utilizar las hojas de estilo es utilizar un archivo HTML con el contenido del documento y otro archivo CSS con la presentación del mismo. En la figura 7.2, puede ver dos formas distintas de separar los datos de la presentación. En la primera de ellas, ambas capas se fusionan en el mismo archivo, aunque en partes bien diferenciadas. Mientras que en la segunda, tenemos un archivo, con extensión CSS, se define capa presentación y un archivo donde sepor especifican datos,donde permitiendo así laque el de archivo de presentación puedaHTML ser utilizado más de los un archivo de datos.

Figura 7.2. Funcionamiento de las hojas de estilo

© STARBOOK

CAPÍTULO 7. HOJAS DE ESTILO EN LA CONSTRUCCIÓN DE PÁGINAS WEB 147

Un documento CSS se compone de un conjunto de reglas y cada regla consta de las siguientes partes: 

Selector. Indica a qué elemento o parte de la página se aplica la regla.

Normalmente los selectores se corresponden con las etiquetas del lenguaje HTML. Por ejemplo, table es un selector. 

Declaración. Indica la definición del estilo a aplicar al selector indicado. La

declaración a su vez puede dividirse en dos partes: -

Propiedad. Indica el nombre del atributo al que va a ser aplicado.

-

Valor. Define el nuevo valor de la propiedad.

Figura 7.3. Definición de una regla en CSS

Dentro de una regla se puede realizar más de una declaración, para ello las definiciones se separan por punto y coma, no siendo necesario introducirla en la última definición, como podemos ver en el siguiente ejemplo: h1{ color:blue; background-color: red; font-size: large; font-family:garamond }

7.1.4 El modelo de formato visual y el modelo de caja El modelo de caja es la base de cualquier diseño CSS, ya que todo elemento en CSS se basa en una caja rectangular. Tal y como puede ver en la figura 7.4, todo elemento está contenido en una caja que contiene diferentes elementos (áreas o subcajas) que aportan diferentes opciones al elemento, en lo referente a márgenes, bordes, relleno y contenido del propio elemento.

148

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

Figura 7.4. Representación gráfica del modelo de caja

A su vez cada caja (margin, border y padding) puede dividirse en los segmentos left, right, top y bottom, de forma que se les pueden asignar propiedades diferentes. Por otro lado, cada caja define su límite, que es el perímetro de cada una de las cuatro áreas. Y cada límite puede dividirse en cuatro segmentos: right, left, top y bottom. Si el límite del padding tiene un ancho de 0, el límite del relleno sería el mismo que el límite del contenido. Igual ocurrirá para los límites superiores, por ejemplo si el límite de margin tiene un ancho de 0, éste sería igual al límite del borde. ancho deyladerechos, caja estáy formado la suma delMientras ancho de los márgenes, rellenosElizquierdos el ancho por del contenido. la altura está dadabordes, por la suma de los márgenes, bordes y rellenos superiores e inferiores, y la altura del contenido. El modelo de formato visual permite organizar la distribución de las cajas en pantalla (u otros medios de comunicación visual) y proporciona las herramientas para realizar la distribución de los distintos elementos.

7.2 TIPOS DE ESTILOS Las reglas de estilo pueden ser declaradas: en línea con el elemento, en la cabecera de un documento, o en un documento externo con extensión CSS. La sintaxis puede verse alterada en función del lugar donde se defina el estilo. En particular difiere si se declara en línea con el elemento HTML, donde se utiliza el atributo style.

© STARBOOK



CAPÍTULO 7. HOJAS DE ESTILO EN LA CONSTRUCCIÓN DE PÁGINAS WEB 149

Declaración en línea (CSS incrustados). La declaración de estilos en línea se utiliza para aplicar el estilo a un elemento utilizando el atributo style. No se

recomienda utilizar este tipo de declaraciones ya que no separa totalmente la capa de presentación del contenido. A continuación se muestra un ejemplo: Título de la cabecera 

Declaración en la cabecera (CSS enlazados). La declaración de estilos en

cabecera permite la primera separación de datos y presentación de los elementos, ya que, por un lado se declaran los datos, en la cabecera de una página HTML o XHTML, bajo las etiquetas y , tal y como puede ver en el siguiente ejemplo. Y por otro, los datos en el cuerpo de la página.

Listado 7.1.html Encabezado



Declaración en un documento CSS (CSS importados). Permite separar

físicamente los datos de la presentación, en archivos diferentes. Para definir una regla en otro documento ajeno a la página HTML, por un lado hay que crear un documento con extensión .css y enlazarlo con la página HTML, tal y como puede ver en los siguientes códigos.

150

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

Listado 7.2a.estilo.css /*Hoja de estilos*/ h1{ color:blue; background-color: red; font-size: large; font-family:garamond }

Listado 7.2b.pagina.html

Encabezado

En CSS, como en cualquier otro lenguaje se dispone de la herramienta para introducir comentarios en nuestro código. En CSS los comentarios tienen la misma sintaxis que los del lenguaje C. /* Comentario*/

ACTIVIDAD 7.1 

Genere una una página página web web que que defina defina lalahoja hojadedeestilos estilosdentro dentrodeldelpropio propio fichero ichero html tml.



Genere una página web que utilice una hoja de estilos externa.



Genere otra página página web web que queutilice utilicelalahoja hojade deestilos estilosanterior. anterior.



Modique la hoja de estilos y compruebe que ambas páginas cambian automáticamente.

© STARBOOK

CAPÍTULO 7. HOJAS DE ESTILO EN LA CONSTRUCCIÓN DE PÁGINAS WEB 151

7.3 SELECTORES Y REGLAS DE ESTILO Los selectores en CSS permiten definir el elemento o los elementos a los que se aplica un determinado estilo. Dichos selectores pueden ir desde simples elementos del lenguaje HTML hasta complejos patrones que permiten aplicar el estilo a un elemento o conjunto de elementos. 

Selectores de tipo o etiqueta . Estos selectores son los más sencillos, porque

coinciden con las etiquetas de los elementos del lenguaje HTML. Un selector de tipo aplica el estilo a todos los elementos que coincidan con el mismo tipo. Los diseñadores con frecuencia hacen uso del agrupamiento para definir todas las propiedades comunes de los elementos. 

Selector universal. El selector universal * es muy fácil de utilizar. Su función es

la de aplicar una propiedad o conjunto de propiedades a todos los elementos de la página.

No es muy comúnmente utilizado debido que no es implementado por la mayoría de los navegadores. Y por otro lado, resulta muy difícil aplicar una misma propiedad a todos los elementos de la página. 

Selectores de descendientes. El selector de descendientes se utiliza cuando se

desea aplicar una propiedad solamente a un elemento que está contenido dentro

de otro elemento. Estos selectores son mucho más específicos que los selectores de tipo. Para definir un selector de descendientes se escriben los selectores separados por espacios en blanco seguidos de la definición: Sintaxis:

sel1 sel2 sel3 … selN {Definción}

En el siguiente ejemplo, sólo se aplica al elemento strong el color blue, cuando se encuentre contenido dentro de un elemento span, que a su vez se encuentre dentro de un enlace a, y el enlace esté contenido dentro de un elemento p. p a span strong { color: blue } 

Selectores de hijos. El selector de hijo, aunque muy parecido al selector de

descendiente, en el fondo es distinto, ya que sólo se aplica si el descendiente es un hijo directo, en caso contrario, no se aplica. Sintaxis: 

sel1>sel2>sel3 >… >selN {Definción}

Selector de hermano adyacente. La funcionalidad del selector adyacente es la

de dar formato al elemento hermano inmediatamente siguiente.

152

CONSTRUCCIÓN DE PÁGINAS WEB

Sintaxis:

© STARBOOK

sel1+sel2 {Definción}

Resulta más fácil entenderlo viendo el resultado gráfico del ejemplo siguiente, cuyo resultado se muestra en la figura 7.5. h1+h2 { color:blue; }

Tal y como puede observar, se aplica el color azul al primer elemento h2, ya que tiene el mismo padre body, y por tanto es hermano del elemento h1 y además es el siguiente elemento que le precede dentro de la estructura del documento. Sin embargo, no se ha aplicado al h2 siguiente, porque a pesar de ser hermano, ya no le precede en la estructura del documento.

Figura 7.5. Ejemplo del selector de hermanos adyacentes 

Selector de atributos. El selector de atributos permite aplicar el formato a un

elemento o etiqueta HTML en función de sus atributos y/o valores de los mismos. Existen cuatro formas de definir un selector de atributos: -

Elemento [atri]. Aplica el formato a toda etiqueta de tipo elemento, que tenga un atributo igual a atrib.

-

Elemento [atrib = val]. En este caso aplica el formato a todo elemento que tenga al menos un atributo atrib y su valor sea val.

-

Elemento [atrib ~= val]. Selecciona todo elemento, para aplicarle el formato especificado, siempre que posea un atributo atrib y al menos uno de sus valores sea val.

© STARBOOK

-

CAPÍTULO 7. HOJAS DE ESTILO EN LA CONSTRUCCIÓN DE PÁGINAS WEB 153

Elemento [atrib |= val]. Aplica el formato a toda etiqueta de tipo elemento, que tenga un atributo atrib y su valor empiece por val seguido de un guión y

cualquier serie de caracteres.

En el siguiente ejemplo se aplica el color verde a todo enlace que apunte a la página principal de Google. a[href=’http://www.google.es’] {color:green} 

Selector clases . El selector clase un elemento de tipo sel a cuyode atributo class sea igualde clase . Supermite sintaxisseleccionar es:

Sintaxis:

sel.clase{Definción}

Este método, es el más utilizado ya que permite definir subcategorías de elementos. Por ejemplo, a continuación se establece la clase titulo dentro de la etiqueta que muestra el texto de color rojo. P.titulo { color: red

Y en la página web se utiliza de la siguiente forma: Hola a todo el mundo

El selector de clases, aunque se trata como un selector más, es equivalente a utilizar un selector de atributos de tipo elemento[class ~= clase]. 

Selector de id. El selector permite seleccionar un elemento por su atributo id. Recuerde que el atributo id permite asignar un identificador a una instancia dentro

de la estructura documento. Por específicamente tanto, el selector clases se utiliza normalmente para del asignar propiedades a undesolo elemento de la página, ya que el valor de un atributo id dentro de una página es único. Sintaxis:

sel#identi{Definción}

A parte del uso de los selectores, CSS permite la combinación de selectores para crear reglas de selección más avanzadas. A continuación se muestran algunos ejemplos de posibles agrupamientos de selectores. p.titular a.link_titular{color:red}

En este primer ejemplo, se selecciona todo elemento de tipo a y class = link_titular, que esté contenido dentro de un párrafo p de class = titular. p.titular

> h2#123

a.link_titular{color:red}

En este otro ejemplo, se selecciona todo elemento de tipo a y class = link_titular, que esté contenido class = titular. en un elemento h2 con id=’123’, y además que éste sea hijo de un párrafo de

154

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

7.4 ATRIBUTOS DE ESTILO 7.4.1 Propiedades, valores, unidades y media-type Las propiedades en CSS permiten especificar valores de medida y color a todos los elementos, de muchas formas distintas. En este apartado se estudian las distintas formas de aplicar un valor a una propiedad. 7.4.1.1 VALORES

Los valores que puede admitir una propiedad CSS en una hoja de estilo dependen del tipo de propiedad. A continuación se presentan algunos de los valores típicos. 

Tipos de letra. El tipo de letra es normalmente el elemento que más quebraderos

de cabeza srcina a los diseñadores, debido a que los nombres varían en función de las plataformas y puede que existan en unas y en otras no, tomándose por defecto un tipo de letra que no se había previsto y cambiando por completo el diseño del documento.

En el ejemplo, se especifica por defecto el tipo de letra Arial, en caso de no estar disponible, se utilizará la familia Helvética y en último lugar si no estuviera disponible ninguna de las dos, se utiliza la familia Sans-serif como fuente base, evitándose así que el navegador seleccione la suya por defecto. P {font-family:’’Arial’’, ‘’Helvetica’’, sans-serif} 

Medidas y/o longitudes. Las medidas en CSS se utilizan, entre otras cosas, para

especificar la altura, anchura y márgenes de los elementos, y establecer el tamaño de letra del texto. En el siguiente apartado veremos las distintas formas de especificar las medidas. 

Colores. Permite indicar los colores de los distintos elementos de la página web.

En el siguiente apartado puede ver las diferentes maneras de asignar las unidades de color. 7.4.1.2 UNIDADES

Las unidades de medida se utilizan en varios elementos en las hojas de estilo como es el caso del tamaño de la letra, borde, etc. Las unidades de medida se pueden definir de tres formas posibles:

© STARBOOK



CAPÍTULO 7. HOJAS DE ESTILO EN LA CONSTRUCCIÓN DE PÁGINAS WEB 155

Absoluta. Las unidades de longitud absolutas tienen el problema de que están

muy ligadas con el medio de salida y pueden producir problemas de accesibilidad. En la tabla 7.1 se muestran las diferentes unidades de medida absolutas. 

Relativas. Las unidades relativas son más flexibles que las unidades absolutas

porque se adaptan más fácilmente a los diferentes medios, ya que permiten definir la medida en función del dispositivo donde se muestra. Por ejemplo, en el siguiente ejemplo definimos el tamaño de letra con un valor de medida de + 3 píxeles. P {font-size: +3px}

En la tabla 7.2 se muestran las diferentes unidades de medida relativas 

Porcentajes. Aparte de las unidades relativas, CSS incluye otra forma de medida

relativa basada en porcentajes. En este caso se forma añadiendo un número seguido del símbolo % sin espacios entre ellos. En el siguiente ejemplo, se define el tipo de letra a un 200% del tipo de letra estándar. p{font-size:200%}

Por lo general, se recomienda el uso de unidades relativas siempre que sea posible, ya que mejora la accesibilidad de la página y permite que los documentos se adapten fácilmente a cualquier medio y dispositivo. 

Unidades de color. Permiten indicar los colores de los distintos elementos de la

página web. Tabla 7.1. Unidades de medida absolutas Abreviatura

Unidad

Equivalencia

Pm

Pulgadas

2,54 cm

Cm

Centímetros

Mm

Milímetros

Pt

Puntos

Pc

Picas

1 72

pulgadas

12 puntos

156

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

Tabla 7.2. Unidades de medida relativas Abreviatura

Unidad

Em

Da el valor en función de la anchura de la letra M mayúscula.

Ex

En el caso de la Ex ésta asigna el valor en función de la altura de una x minúscula.

Px

Píxel asigna el tamaño en función de la resolución del dispositivo donde se presenta.

7.4.1.3 COLORES

En CSS se definen unos 17 colores que son heredados de la paleta VGA de Windows, y aún se sigue manteniendo en la actualidad, por mantener compatibilidades. En la tabla 7.3 se muestran los colores predefinidos. Tabla 7.3. Paleta de colores CSS Etiqueta

C. Hexadecimal

BLACK

#000000

Color

NEGRO

Descripción

TEAL

#008080

TEAL

BLUE

#0000FF

AZUL

NAVY

#000080

AZUL MARINO

LIME

#00FF00

LIMA

WHITE

#FFFFFF

BLANCO

PURPLE

#800080

PÚRPURA

YELLOW

#FFFF00

AMARILLO

OLIVE

#808000

OLIVA

RED

#FF0000

ROJO

MAROON

#800000

MARRON

GRAY

#808080

GRIS

FUCHSIA

#FF00FF

FÚCSIA

GREEN

#008000

VERDE

SILVER

#C0C0C0

PLATA

AQUA

#00FFFF

AGUA

© STARBOOK

CAPÍTULO 7. HOJAS DE ESTILO EN LA CONSTRUCCIÓN DE PÁGINAS WEB 157

Aunque es muy fácil de utilizar los colores a partir del nombre de los colores predefinidos, éste método no es muy utilizado dado su reducida gama de colores. La mejor forma de utilizar los colores es indicando su composición de colores básicos (rojo, verde y azul) utilizando una de las siguientes notaciones: RGB decimal. Utiliza el modelo RGB para especificar un color. Se crea



especificando la cantidad de rojo, verde y azul que contiene el color, en el caso de decimal debe indicar la proporción de los tres colores entre 0 y 255.

RGB hexadecimal. En este caso se utiliza la notación hexadecimal, con lo cual se



indica la proporción del color con un valor entre 00 y FF. Esta notación es más fácil de recordar. Por ejemplo el color negro en hexadecimal se definiría así:

RGB porcentual. En este caso, la proporción de colores básicos del modelo RGB



se especifica mediante porcentajes de rojo, verde y azul.

A modo de ejemplo, a continuación se define el color negro utilizando las diferentes notaciones:

Listado 7.3.css

P P P P

{color:black)) {color:rgb(0,0,0)) {color:#000000) {color:rgb(0%,0%,0%))

// // // //

Color básico RGB Hexadecimal RGB porcentual

URL DE INTERÉS

En los siguientes enlaces puede ver los colores que se recomiendan utilizar en el diseño de páginas web: http://en.wikipedia.org/wiki/Web_colors#Web-safe_colors y http://www.colourlovers.com/.

158

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

ACTIVIDAD 7.2 



Genere una hoja de estilos que tenga sobre la etiqueta < P> las clases “negro”, “verde” y “rojo”. Cada clase tiene que tener el tipo de color que corresponde a su nombre. Genere una una hoja hoja de de estilos estilos que que modifique modifique elel comportamiento comportamiento dede las las etiquetas y . Por ejemplo, puede cambiar el tamaño o el color de la letra.

7.4.2 Media-types Los media-types permiten especificar cómo se muestran las paginas web en los diferentes dispositivos. Lógicamente, no es lo mismo mostrar una página web en la pantalla de un ordenador, que en un dispositivo móvil o en una impresora. Para definir las diferentes vistas se hace uso de la palabra clave @media y su sintaxis

es:

@media

dispositivo

{ Definición de estilos para el dispositivo. }

En la tabla 7.4 puede ver los diferentes media-types que define el estándar CSS2.1. Tabla 7.4. Media-Types Media-Type

Descripción

all

Todos los medios.

aural

Sintetizadores de voz.

braille

Dispositivos braille.

embossed

Impresoras braille.

handheld

Dispositivos con pequeñas pantallas: PDA, móviles…

print projection

Impresoras. Para presentaciones.

© STARBOOK

CAPÍTULO 7. HOJAS DE ESTILO EN LA CONSTRUCCIÓN DE PÁGINAS WEB 159

screen

Pantallas de ordenadores.

tty

Impresoras con puntos.

tv

Para televisores.

7.4.3 Propiedades de fondo y color Estas propiedades permiten establecer el color (a menudo llamado en inglés

foreground color) y el fondo ( background) de un elemento. Se puede establecer un color de

fondo y/o una imagen de fondo.

También se puede establecer la posición de la imagen, si la imagen se repite y cómo se repite, y si está fija o si se mueve con respecto al lienzo (es decir, si hace scroll). La propiedad color se hereda normalmente y las propiedades de fondo no se heredan, pero el fondo del elemento padre se muestra por defecto a través de los hijos, ya que el valor inicial de background-color es transparente. A continuación se indican las propiedades más importantes: 

color. Permite especificar el color del texto de un elemento. Tal y como se ha

visto anteriormente, hay distintas maneras de especificar el color. Por ejemplo: EM { color: red }



/* lenguaje natural */

EM { color: rgb(255,0,0) } /* RGB con rango 0-255 */ background-color. Permite indicar el color del fondo de un elemento. H1 { background-color: #FF0000 }



background-image. Permite indicar la imagen que quiere utilizar como fondo de

un elemento. Cuando se establece una imagen de fondo, es recomendable establecer también un color de fondo que se utiliza en el caso de que la imagen no esté disponible. Si la imagen está disponible, se superpone al color de fondo. BODY { background-image: url(marmol.gif) } P { background-image: none } 

background-repeat. Se utiliza cuando se establece una imagen como fondo y permite indicar el modo en que se repite la imagen. Un valor de repeat significa que la imagen se repite tanto horizontal como verticalmente. Los valores repeat-x y repeat-y hacen que la imagen se repita horizontalmente o verticalmente creando

una sola banda de imágenes de un lado a otro (de arriba a abajo). Con un valor "no-repeat" la imagen no se repite.

160

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

BODY { background: red url(pendiente.gif); background-repeat: repeat-y; } 

background-attachment. Si se especifica una imagen de fondo, el valor de

background-attachment si En estáelfija con relación al lienzo, o si se mueve (hace scroll) junto con eldetermina contenido. siguiente ejemplo la imagen queda

fija.

BODY { background: red url(pendiente.gif); background-repeat: repeat-y; background-attachment: fixed; } 

background-position. Si se ha especificado una imagen de fondo, el valor de background-position permite indicar la posición de la imagen. Por ejemplo, los

valores "0% 0%" sitúan la imagen en la esquina superior izquierda; los valores "100% 100%" sitúan la imagen en la esquina inferior derecha; los valores "14% 84%" sitúan la imagen al 14% de la izquierda y al 84% de su parte superior; los valores "2cm 2cm" sitúan la a 2 cm a la derecha y 2 cm por debajo de la esquina superior izquierda delimagen elemento. Si sólo indica valor o una longitud, este valor sólo establece la posición horizontal, y la posición vertical es del 50%. También se pueden usar como valores palabras clave que indican la posición de la imagen de fondo. Las palabras clave no pueden combinarse con valores porcentuales ni con longitudes. A continuación se muestran varios ejemplos de uso: BODY { background: url(banner.jpeg) right top }

/* 100%

0% */

BODY { background: url(banner.jpeg) top center }

/*

50%

0% */

BODY { background: url(banner.jpeg) center }

/*

50%

50% */

BODY { background: url(banner.jpeg) bottom }

/*

50% 100% */

Si la imagen de fondo), está fija con al lienzo la propiedad background-attachment la imagen se relación coloca con relación(véase al lienzo y no con

© STARBOOK

CAPÍTULO 7. HOJAS DE ESTILO EN LA CONSTRUCCIÓN DE PÁGINAS WEB 161

relación al elemento. En el siguiente ejemplo, la imagen se coloca en la esquina inferior derecha del lienzo. BODY { background-image: url(logo.png); background-attachment: fixed; background-position: 100% 100%; } 

background. La propiedad background es una propiedad abreviada para establecer las propiedades de fondo individuales (es decir, background-color, background-image, background-repeat, background-attachment y backgroundposition) en un mismo lugar de una hoja de estilo.

Los posibles valores de las propiedades background son el conjunto de todos los posibles para cada una de las propiedades individuales. En el ejemplo de la figura 7.6, puede ver el resultado gráfico de la aplicación de las reglas CSS para los elementos BODY y P con sus imágenes de fondo.

Listado 7.4.html fixed;}

body{background:url(logo.jpg) gray 0% 0% no-repeat

P{background:url(logoMirada.jpg) no-repeat;} Parrafo

162

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

Figura 7.6. Ejemplo de uso del atributo background

ACTIVIDAD 7.3 



Genera una plantilla que modique la etiquetabody para establecer una imagen y color de fondo. Modifique la plantilla anterior para que la imagen de fondo no se repita y se muestre siempre en el centro de la página web.

7.4.4 Propiedades de textos Estas propiedades permiten dar formato al texto de un elemento. Se puede establecer por ejemplo atributos como la alineación, decoración, tamaño, etc. A continuación se estudian las propiedades más importantes: 

text-decoration. Describe las decoraciones que se añaden al texto de un elemento. Si el elemento no tiene texto (por ejemplo, el elemento en HTML) o es un elemento vacío (p.ej. ) esta propiedad no tiene

efecto.

Esta propiedad puede utilizar como atributos los valores: none, underline, overline, line-through y blink, debe ser reconocida por los navegadores, pero puede efecto. que no sea implementada. Por ejemplo, Internet Explorer no soporta el

© STARBOOK

CAPÍTULO 7. HOJAS DE ESTILO EN LA CONSTRUCCIÓN DE PÁGINAS WEB 163

A:link, A:visited, A:active { text-decoration: underline }

En el ejemplo, los textos de todos los vínculos aparecerán subrayados. 

text-transform. Permite aplicar transformaciones al texto de un elemento. Por

ejemplo permite transformar el texto a mayúsculas o minúsculas.

Esta propiedad puede tomar como atributos los valores: none, capitaliza, uppercase, lowercase. H1 { text-transform: uppercase }

El ejemplo convierte el texto de todos los elementos "H1" en mayúsculas, independientemente de cómo se hayan escrito los datos. 

text-align. Esta propiedad indica cómo se alinea el texto dentro del elemento. Esta propiedad puede utilizar como atributos los valores: left, right, center y justify.

DIV.center { text-align: center }

Como text-align se hereda, todos los elementos en bloque dentro del elemento DIV con CLASS=center están centrados. Obsérvese que las alineaciones son relativas a la anchura del elemento, no del lienzo. Si el navegador no soporta el estilo justify, entonces utiliza left. 

text-indent. Esta propiedad especifica la sangría de la primera línea formateada. El valor de text-indent puede ser negativo, pero puede haber limitaciones

específicas de cada implementación. No se inserta sangría en medio de un elemento que haya sido roto por otro (por ejemplo, con la etiqueta en HTML). A continuación, puede ver algunos ejemplos de uso de la propiedad. P { text-indent: 3em } P.pixel { text-indent: 12px } P.porce { text-ident: 5% } 

word-spacing. Permite especificar el espacio por defecto entre palabras. Los

valores pueden ser negativos.

H1 { word-spacing: 1em }

En el ejemplo, el espaciado de palabras entre cada palabra contenida en elementos se incrementa en 1em.

164

CONSTRUCCIÓN DE PÁGINAS WEB



© STARBOOK

letter-spacing. Permite modificar el espacio por defecto entre caracteres. Con un valor normal, el navegador puede modificar el espacio entre letras para justificar el texto. Esto no sucede si letter-spacing está establecido explícitamente a un valor de tipo .

BLOCKQUOTE { letter-spacing: 0.1em }

En el ejemplo anterior, el espaciado de letras entre cada carácter de los elementos BLOCKQUOTE se incrementa en 0.1em. 

line-height. Esta propiedad permite establecer la distancia entre las líneas de

base de dos líneas adyacentes.

En el siguiente ejemplo, las tres reglas dan el mismo resultado de altura de línea.



DIV { line-height: 1.2; font-size: 10pt }

/* número */

DIV { line-height: 1.2em; font-size: 10pt }

/* longitud */

DIV { line-height: 120%; font-size: 10pt }

/* porcentaje */

vertical-align. Permite modificar la alineación vertical del elemento. Esta propiedad puede utilizar como atributos los valores: baseline, sub, super, top, text-top middle, bottom text-bottom.

ACTIVIDAD 7.4 



Genere una hoja de estilos que incluya el estilo P.mayúscula. El estilo estilo automáticamente debe poner la letra en mayúscula y negrita. Añade a la plantilla anterior el estiloP.dialago que ponga la letra en cursiva y que tenga tenga bastante bastante espaciado espaciadoentre entresus suspalabras. palabras.

7.4.5 Propiedades de las cajas En este apartado se describen los atributos más importantes que permiten manipular y dar formato a las cajas: 

margin. Establece el margen de un elemento. Se puede utilizar de forma

abreviada especificando el margen para cada uno de los lados de la caja.

© STARBOOK

CAPÍTULO 7. HOJAS DE ESTILO EN LA CONSTRUCCIÓN DE PÁGINAS WEB 165

Si se especifican cuatro valores de longitud, se aplican a los márgenes superior, derecho, inferior e izquierdo respectivamente. Si sólo hay un valor, se aplica a todos los lados; si hay dos o tres valores, se toma para los valores que faltan los del lado opuesto. A continuación puede ver un ejemplo de utilización: BODY {margin: 2em }

/* todos los márgenes puestos a 2em */

BODY {margin: 1em 2em }

/* top y bottom=1em, right y left=2em */

BODY {margin: 1em 2em 3em } left=2em */

/* top=1em, right=2em, bottom=3em,

La última regla del ejemplo equivale al conjunto de reglas del siguiente ejemplo, donde se especifican uno a uno los márgenes de cada uno de los lados de la caja. BODY { margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 2em; } 

padding. Permite establecer el espacio entre el borde y el contenido. Se comporta de la misma forma que la propiedad margin.

H1 { background: white; padding: 1em 2em; }

En el ejemplo anterior, se establece en 1em el relleno vertical ( padding-top y padding-bottom), y en 2em el horizontal (padding-right y padding-left). La unidad em es relativa al tamaño de fuente del elemento: 1em es igual al tamaño de la fuente en uso. La superficie del área de relleno la establecemos con la propiedad background.



border. Permite establecer el borde de un elemento, definiendo, anchura, color y estilo. La propiedad border es una propiedad abreviada para establecer la misma

anchura, color y estilo en los cuatro bordes de un elemento.

166

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

Para establecer estas propiedades por separado se utilizan las propiedades border-style, border-color y borde-width, que se comportan de forma análoga a las propiedades padding y margin. Las reglas de los siguientes ejemplos son

equivalentes.

P { border-top: solid red; border-right: solid red; border-bottom: solid red; border-left: solid red } P { border: solid red }

A diferencia de las propiedades abreviadas margin y padding, la propiedad border no puede establecer valores distintos para cada borde. Para ello debe utilizarse una o más de las otras propiedades de borde. En el siguiente ejemplo, el borde es una línea continua negra (solid). P { color: black; background: white; border: solid; }

En el siguiente ejemplo, los bordes horizontales son continuos ( solid) y los bordes verticales punteados (dotted). P { border-style: solid dotted } 

outline. Las propiedades de outline establecen un perfil sobre los elementos.

Aunque ésta es muy parecida a la propiedad borde difiere en diferentes aspectos: los perfiles (outline) no ocupan espacio, ya que se dibujan sobre los elementos, a diferencia de los bordes; y los outline permiten formas no rectangulares. El propósito de diseño de los outline es indicar de forma clara el elemento que está seleccionado en cada momento (p.ej., botón, enlace). Permite establecer el borde de un elemento, definiendo, anchura, color y estilo.

© STARBOOK

CAPÍTULO 7. HOJAS DE ESTILO EN LA CONSTRUCCIÓN DE PÁGINAS WEB 167

Los outline se definen de forma análoga al borde, definiendo anchura, color y estilo. En la figura 7.7, puede ver el resultado de aplicar distintos estilos de borde a un outline del siguiente ejemplo:

Listado 7.5a.css p.a{ color: olive; outline-color:#00ff00; outline-style:dotted; } p.b{ color: olive; outline-color:#00ff00; outline-style:ridge; } p.c{ color: olive; outline-color:#00ff00; outline-style:dashed; }

Y el código de la página web que utiliza la hoja de estilos es el siguiente:

Listado 7.5b.css outline-style:dotted outline-style:ridge outline-style:dashed

168

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

Figura 7.7. Ejemplo de uso del atributo outline-style

7.4.6 Dimensiones en CSS Las propiedades para establecer dimensiones en CSS permiten controlar el tamaño de un elemento en pantalla, por ejemplo: anchura, altura, valor máximo y mínimo de anchura, etc. Para ello CSS implementa los siguientes atributos: 

width. Permite establecer la anchura de un elemento. Puede aplicarse a

elementos que contienen texto, pero es más útil para elementos reemplazados tales como imágenes. La anchura especificada debe ser respetada, escalando la imagen si es necesario. Cuando se escale, si la propiedad height es auto, se conservan las proporciones de la imagen. 

max-width. Permite definir la anchura máxima a la que escalar el elemento en

pantalla evitando que el elemento tome dimensiones no deseadas al maximizar la pantalla. 

min-width. La propiedad min-width tiene un funcionamiento análogo a la

propiedad anterior, sólo que en este caso, la propiedad limita la anchura mínima que debe tener un elemento.



height. Establece la anchura de un elemento. La altura debe ser respetada,

debiéndose escalar la imagen si es necesario. Al escalar, si el valor de la propiedad width es auto se mantienen las proporciones de la imagen.

Cuando se aplica a un elemento de texto se respeta la altura utilizando una barra de scroll. Por éste motivo debe prestar bastante atención para evitar efectos no deseados.

© STARBOOK



CAPÍTULO 7. HOJAS DE ESTILO EN LA CONSTRUCCIÓN DE PÁGINAS WEB 169

max-height. Permite definir una altura máxima a la que escalar el elemento en

pantalla. Así evita que el elemento tome dimensiones no deseadas al maximizar la pantalla. 

min-width. Limita la anchura mínima que debe tener un elemento.

7.5 ESQUEMAS (LAYOUTS) Con todo el conocimiento adquirido a lo largo del capítulo, ya puede utilizar las hojas de estilo para crear esquemas de distribución de un portal sin la necesidad de utilizar las tablas como base de la maquetación, introduciendo elementos innecesarios y complicando el diseño y el mantenimiento.

URL DE INTERÉS

En la página http://layouts.ironmyers.com/ puedes ver ejemplos de layout para diseñar páginas web.

A continuación, a modo de ejemplo se va a crear un layout sencillo. El primer paso que hay que realizar es tener claro el diseño que se va a utilizar. En este ejemplo, se va a seguir la distribución de la figura 7.8.

Figura 7.8. Ejemplo del esquema de diseño de un portal web

Unapara vezdefinir definido el resultado final del cabecera portal, procederemos a creary pie el .código CSS necesario los siguientes elementos: , menú, contenedor

170

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

Para definir la cabecera se establece las siguientes propiedades: La cabecera, al no tener tiene ningún elemento a su izquierda ni a la derecha se utiliza el atributo clear, para evitar que se pueda colocar algún elemento flotante.





Se establece la altura en píxeles de la cabecera.



Se define el color del fondo y del texto.

Listado 7.6.estilo.css #cabecera{ clear: both; height:80px; background:#000000; color:#FFFFFF; }

En el menú se definen las siguientes propiedades: Se define su anchura para que ésta siempre quede fija. Sin embargo no se hace lo mismo con la altura, por no impedir que el menú pueda crecer.



Se define el relleno. Se establece el color del borde y su anchura.



Se declaramos el elemento como flotante a la izquierda del lienzo.



Se establece el color de texto y del fondo.



#menu{ width: 200px; padding: 5px; border-color: #999999; border-width: 8px; float: left; background: #333333; color: #FFFFFF; }

© STARBOOK

CAPÍTULO 7. HOJAS DE ESTILO EN LA CONSTRUCCIÓN DE PÁGINAS WEB 171

De la misma forma, el siguiente paso es definir el cuadro de contenido que como mínimo, hay que definir la posición del margen izquierdo. Finalmente, se define el pie del portal de forma análoga a la definición de la cabecera, cambiando únicamente los colores. Una vez definidos los distintos elementos del portal, se crea un nuevo elemento (contenedor) o cuadro que los contenga a todos y sobre el que asignar los atributos comunes. Para el contenedor se definen los siguientes atributos: 

Anchura del contenedor.



Márgenes.



Alineación del texto.



Color de fondo.

#contenedor { width: 700px; margin: 10px 10px; text-align: left; background: #CCCCCC; }

Una vez definidos todos los elementos se generar la página del portal tal y como puede ver en la figura 7.9 y cuyo código se muestra tras la figura.

Figura 7.9. Primera web del portal

172

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

Listado 7.6.pagina.html Cabecera Menú Enlace 1 Enlace 2 Enlace 3 Enlace 4 ...   Contenido Contenido principal Pie de página

Como puede comprobar, se ha diseñado el portal haciendo la distribución del mismo exclusivamente con las hojas de estilo, y por tanto cumpliendo el estándar del W3C. Cuando quiera conocer si el diseño de las hojas de estilo cumple con el estándar de la W3C se recomienda utilizar los validadores de hojas de estilo.

URL DE INTERÉS

En http://jigsaw.w3.org/css-validator/ puedes acceder a un validador CSS de W3c.

© STARBOOK

CAPÍTULO 7. HOJAS DE ESTILO EN LA CONSTRUCCIÓN DE PÁGINAS WEB 173

ACTIVIDAD 7.5 

Utilizando estilos genere las siguientes páginas:

MENU

CONTENIDO

CABECERA

CABECERA

MENU MEN

MENU MEN

CONTENIDO

CONTENIDO NTENID

PIE

7.6 HERRAMIENTAS PARA LA CREACIÓN DE HOJAS DE ESTILO Como ha visto en el Capítulo 4. Herramientas de edición web, siempre es recomendable utilizar las herramientas que facilitan el diseño y creación de páginas web. Las ventajas de este tipo de herramientas frente al uso de un editor de textos normal son bastante notables, ya que ayudan y facilitan el desarrollo de los proyectos, gracias a las distintas funcionalidades que ofrecen como generación de código, formateado de texto, comprobación de errores, etc. Para administrar las hojas de estilo puede utilizar herramientas como: Dreamweaver, Eclipse, NVU, Bluefish, etc. Para completar el conjunto de herramientas visto anteriormente, a continuación va a ver cómo utilizar Eclipse para mantener, organizar y crear un proyecto web utilizando hojas de estilo.

7.6.1 Eclipse Eclipse es principalmente una plataforma de programación que permite crear entornos integrados de desarrollo. Eclipse es una herramienta multiplataforma y a través de plugins soporta una gran variedad de lenguajes; como es el caso de html o css. En primer lugar hay que instalar el entorno de programación Eclipse. Una vez instalado el entorno de programación, hay que instalar el plugin para poder trabajar con páginas Web. Para ello debe ir al menú de Ayuda y pulsar sobre Install New Software.

174

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

Figura 7.10. Instalando plugins en Eclipse

En el campo work-with introduzca la URL oficial del plugin de Eclipse (http://download.eclipse.org/releases/galileo ) para poder acceder al repositorio y buscar el plugin adecuado. En este caso seleccione el plugin Eclipse Web Developer Tools que permite generar documentos HTML, XML, CSS, JavaScripts, etc.

Figura 7.11. Selección del plugin

Para proceder con la instalación pulse el botón Next, acepte las condiciones de la licencia y se finaliza el proceso de instalación (véase la figura 7.12).

© STARBOOK

CAPÍTULO 7. HOJAS DE ESTILO EN LA CONSTRUCCIÓN DE PÁGINAS WEB 175

Figura 7.12. Terminando con la instalación del plugin

7.6.2 Eclipse Web Developer Tools Para empezar a trabajar con Eclipse, el primer paso es crear el proyecto de trabajo. Para ello, pulse sobre el menú File>New>Project, para abrir el asistente de selección de proyectos y seleccione Static Web Proyect y se muestra el asistente de configuración del proyecto (véase la figura 7.13).

Figura 7.13. Creación de un nuevo proyecto de páginas web estáticas

176

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

Asigne un nombre al proyecto y opcionalmente un directorio de trabajo, en caso de no asignarlo, se crea un directorio con el nombre del proyecto en el directorio de trabajo de Eclipse. En este momento se ha creado el proyecto, el cual se puede ver en la pestaña Proyect explorer de Eclipse, si pulsa sobre el nombre del proyecto, éste se despliega y se pueden ver en forma de árbol los distintos elementos que lo componen: contenidos, librerías, etc.

Para trabajar con CSS, basta con añadir un nuevo archivo al proyecto de tipo CSS. Para ello pulse el botón derecho sobre la carpeta WebContent, New y Other y se muestra la ventana de selección que se muestra en la figura 7.14 y seleccione el tipo CSS. Una vez seleccionado el tipo de archivo se inicia un asistente, en este caso para CSS, donde debemos configurar los parámetros como: ruta de almacenamiento, nombre del fichero, codificación, plantilla por defecto, etc. En la figura 7.15, puede ver el último paso del asistente donde se seleccionan las plantillas a seguir para la creación del fichero. En nuestro caso utilice la plantilla del nuevo archivo CSS.

Figura 7.14. Nuevo archivo CSS

© STARBOOK

CAPÍTULO 7. HOJAS DE ESTILO EN LA CONSTRUCCIÓN DE PÁGINAS WEB 177

Figura 7.15. Configurador CSS

Tras crear el archivo, éste aparece en la estructura de árbol del proyecto en la carpeta

WebContent, o en cualquier otra si cambió la ruta por defecto. Haciendo doble clic, se abre el

fichero se puede comenzar a editarlo, en la figura 7.16 puede ver un ejemplo de cómo el

plugin formatea el código para hacerlo más legible.

Figura 7.16. Archivo CSS en Eclipse

El pluginelaporta autocompletar código.muchas funcionales. Por ejemplo, en la figura 7.17 pues como permite

178

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

Figura 7.17. Autocompletar código con Eclipse Web Developer Tools

ACTIVIDAD 7.6 

Instale Eclipse.



Utilice Eclipse para editar las hojas de estilo creadas a lo largo del capítulo.

7.7 ACCESIBILIDAD Y USABILIDAD Con la utilización de hojas de estilo se produce una mejora sustancial en la accesibilidad y la usabilidad de la web al separar los datos de la presentación del documento. Las hojas de estilo se utiliza con el objetivo de permitir un control preciso de la presentación del documento, controlando por en ejemplo: el espaciado de los caracteres, alineación de texto, posicionamiento de los objetos la página, etc. Gracias a esta separación los diseñadores

© STARBOOK

CAPÍTULO 7. HOJAS DE ESTILO EN LA CONSTRUCCIÓN DE PÁGINAS WEB 179

pueden simplificar y limpiar los documentos HTML, incluyendo exclusivamente el contenido y obteniendo una estructura muchos más uniforme y estable dentro del sitio web. A la hora de realizar la capa de presentación de la web se deben tener en cuanta una serie de recomendaciones o consejos para mejorar la usabilidad y accesibilidad de la misma. A continuación se presentan una serie de recomendaciones. 

Utilizar siempre hojas de estilo vinculadas a un fichero y nunca aplicar el estilo directamente en el atributo style de la etiqueta o dentro de la propia página.



Minimizar el número de ficheros de hojas de estilo que utiliza la página.



Utilizar la unidad em para establecer el tamaño de la letra.



















Utilizar exclusivamente las unidades de medida relativas y porcentuales. El uso de las absolutas sólo es recomendable para fijar el tamaño de las imágenes. A la hora de definir un tipo de letra, es recomendable definir tipos de letra alternativos por si un determinado tipo de letra no esta disponible en el equipo cliente. No utilizar nunca elementos que permitan introducir contenido en el documento, ya que de esta forma no quedan incluidos en el modelo DOM del documento. Como por ejemplo los elementos :before y :after. Al indicar los colores no utilizar nunca el nombre del color y establecerlos siempre utilizando su valor numérico o hexadecimal. En los elementos gráficos (p.ej., imágenes, vídeos) establecer textos alternativos que aporten una pequeña descripción. Asegurar un buen contraste de los colores de fondo y primer plano. Para ello, cada vez que se especifica el color de primer plano de un elemento, siempre debe indicar el de fondo y viceversa. De esta forma se asegura el perfecto contraste ya que no queda nada ninguna elección establecida a los valores por defecto o heredada. Utilizar el modelo de la caja para la maquetación del contenido. Crear hojas de estilo para adaptar el contenido a los distintos dispositivos de salida (p.e.j, teléfono móvil, pantalla, sintetizador de voz). Utilizar siempre las hojas de estilo.

180

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

7.8 RESUMEN A modo de resumen, en la tabla 7.5 se pueden ver las propiedades más importantes de las hojas de estilo. Tabla 7.5. Resumen CSS Propiedad Propiedades de fuente

Font-family

Font-weight

Font-style

Font-size

Font-variant

Font

Propiedades de color y fondo

Color

Background-attachment

Background-color

Background-position

Background-image

Background

Background-repeat Propiedades de texto

Word-spacing

Text-transform

Letter-spacing

Text-align

Text-decoration

Text-indent

Vertical-align

Line-height

Propiedades de cuadro

Margin-top

Border-left-width

Margin-right

Border-width

Margin-bottom

Border-color

Margin-left

Border-style

Margin

Border-top

Padding-top

Border-right

Padding-right

Border-bottom

Padding-bottom

Border-left

Padding-left Padding

Border Width

© STARBOOK

CAPÍTULO 7. HOJAS DE ESTILO EN LA CONSTRUCCIÓN DE PÁGINAS WEB 181

Border-top-width

Height

Border-right-width

Float

Border-bottom-width

Clear

Propiedades de clasificación

Display

List-style-position

White-space

List-style

List-style-type



T TE ES ST TD DE EC CO ON NO OC CI IM MI IE EN NT TO OS S



1. ¿Cuál es la sintaxis correcta en CSS, para definir el tipo de letra de un párrafo? a) p{font-family:Times-New-Roman} b) p{font-family:"Times New Roman"} c) p{font-family:TimesNewRoman} p{font-family:(Times New New Roman)} Roman)} d) p{font-family:(Times d

2. ¿Cuál es la forma correcta de definir un espaciado espaciado de de 10 10 píxeles píxeles entre entre palabras? palabras? a) p{word-spacing:10px} b) Ninguna de las anteriores. c) p{white-space:10px} d) p{letter-spacing:10px} d 3. ¿Cómo propiedad se utiliza para poner la primera letra de una palabra en mayúscula? a) text-decoration:uppercase b) text-decoration:capitalize b ext-decoration:capitalize c) text-transform:uppercase ext-transform:capitalize d) text-transform:capitalize d

182

CONSTRUCCIÓN DE PÁGINAS WEB

© STARBOOK

4. ¿Cuál es la forma correcta de realizar un comentario en CSS? a) /-Comentario-/ a -Comentariob) /*Comentario*/ c) //Comentario// d) 5. ¿Cuál es la sintaxis correcta correcta en HTML para referirse a una una hoja hoja de de estilo estilo externa? externa? a)