1.

-PLANIFICACIÓN DE INTERFACES GRÁFICAS

1.1. ELEMENTOS DE DISEÑO: PERCEPCIÓN VISUAL
Cuando nos disponemos a desarrollar un sitio web, es fundamental tener en cuenta qué ofreceremos en
esta interfaz y qué elementos se incluirán en ella.

La primera impresión que causa una interfaz de usuario es la parte visual. El tamaño, ubicación,
tipografía, colores, etcétera, de los elementos en la interfaz influirán directamente en el usuario o
visitante de un sitio web, que la podrá interpretar de una manera u otra.

El diseñador de una interfaz debe pensar en los valores que va a asignar a cada elemento y, además,
debe valorar la relación que va a existir entre sus diseños y cómo se pueden percibir.

Un diseñador debe buscar siempre un equilibrio entre los elementos que forman la interfaz para
conseguir un sentido gráfico de su diseño que facilite la comunicación eficaz. Debemos tener en
cuenta que no es conveniente utilizar demasiados elementos innecesarios, ya que pueden provocar una
distracción o un exceso de ruido y dificultar la comprensión del mensaje. Por ejemplo, si se utilizan
demasiadas animaciones en un sitio web, el usuario acabará distrayéndose y se olvidará de leer el texto.

Una vez que se ha asimilado la información que se pretende comunicar, es el momento de buscar
soluciones que se adapten a este propósito. En primer lugar, se determinará el área de diseño, al que se
asignará un tamaño para determinar el espacio del que se dispone para la composición gráfica. Dicha
composición gráfica:

• Puede estar formada por uno o varios elementos.

• Puede estar compuesta por texto o solamente de imágenes.
• Puede poseer espacios en blanco o combinar diferentes elementos gráficos.
• Debe lo más adecuada posible a lo que se quiere comunicar.

1.2. COLOR, Tipografía, ICONOS

El color, la tipografía y los iconos son algunos de los elementos más destacados en las composiciones
que se pueden realizar en los diseños web.

Los tipos y la cantidad de estos elementos, así como su variación, van a depender de cuál sea la
información que pretendemos transmitir con un determinado sitio web. A continuación, vamos a estudiar
más detenidamente estos conceptos.

Color
En HTML los colores se basan en el estándar RGB (red, green y blue o rojo, verde y azul). Se puede
conseguir cualquier otro color mediante la combinación de estos tres colores. La intensidad de los
colores se representa en números hexadecimales que van desde el 00 hasta el FF. Para indicar que se
trata de un valor del color, se pondrá una almohadilla delante (#).

Color HEX RGB Nombre

#FF0000 255,0,0 Rojo

#00FF00 0,255,0 Verde

#0000FF 0,0,255 Azul

Es posible realizar combinaciones sobre estos colores variando los diferentes valores de RGB. Para
conseguir el negro activaríamos todos los colores, el blanco no necesita tener ningún color activado, el
amarillo se obtiene combinando el color rojo y azul, para el color fucsia combinaríamos el color rojo y
azul, etcétera.

Color HEX RGB Nombre

#FFFFFF 255,255,255 Negro

#000000 0,0,0 Blanco
#FFFF00 255,255,0 Amarillo
#FF00FF 255,0,255 Fucsia

Es posible jugar con la luminosidad y obtener diferentes colores, se puede conseguir con la combinación
de múltiples valores hexadecimales.

Color HEX RGB Nombre

#C0C0C0 192,192,192 Gris plata
#000080 0,0,128 Azul marino
#808000 128,128,0 Verde oliva

Es recomendable utilizar los colores hexadecimales para representar un valor, aunque es posible obtener
los colores haciendo referencia a su nombre en inglés.

Black Negro

White Blanco

Yellow Amarillo

Fuchsia Fucsia
Con esta tabla como modelo, resulta más fácil seleccionar el color adecuado para cada diseño, aunque
la combinación de colores re- quiere de un carácter artístico del desarrollador que no siempre va a
tener. Por esta razón, todo proyecto informático puede estar compuesto por uno o varios
desarrolladores que tengan asignado, entre sus funciones, el aspecto físico de la interfaz.

Por otra parte, existen programas informáticos que realizan la acción de combinar los colores de forma
automática y armónica.

Una de las ventajas que tiene la utilización de estas herramientas es que están orientadas a facilitar el
desarrollo de un determinado proyecto, sin necesidad de contar con una persona diseñadora.

Estas herramientas tienen incorporadas las siguientes opciones:

• Buscar imágenes que satisfagan un patrón concreto de colores.

• Obtener un código a partir de un color seleccionado.
• Crear combinaciones a partir de un color determinado.
Algunos ejemplos de estos softwares son Colorpix, Color Schemer Online o What Is Color, entre otros.

Tipografía
Las tipografías (fuentes) son uno de los aspectos más importantes en un diseño web; sin duda, la base
de la gran mayoría de sitios web es el texto. Para elegir una buena tipografía, es necesario tener en
cuenta una serie de aspectos, como son su tamaño, el color, el espacio entre letras, el interlineado y
otras características, ya que estas pueden interferir en un usuario a la hora de interpretar nuestro
contenido web. No es aconsejable usar más de tres fuentes en un mismo sitio web.

Existe una multitud de propiedades en CSS para poder modificar la tipografía. A continuación, se van a
mostrar las más básicas que utilizaremos en cualquier tipografía.

Propiedad Valor Significado

font-family Fuente Nombre de la fuente

font-size Tamaño Tamaño de la fuente

Normal | italic | negrita
font-style Estilo de la fuente

font-weight Grosor Grosor de la fuente

Es posible que estemos limitados por los distintos navegadores o sistemas operativos a la hora de
seleccionar un tipo de letra concreto. Para evitar problemas, es conveniente la elección de un tipo de
letra generalizado para obtener el mismo aspecto con independencia del navegador o sistema operativo
que interprete el sitio web.

Iconos
Se entiende por icono la técnica mediante la cual se designan imágenes gráficas (generalmente
pequeñas) con el objetivo de relacionar acciones en concreto con ellas, convirtiéndose en uno de los
elementos gráficos más utilizados.

De esta forma, y siguiendo el refrán que dice que “una imagen vale más que mil palabras”, evitaremos
escribir gran cantidad de texto para explicar una determinada acción, ya que en algunas ocasiones la
podemos representar con un pictograma que determine su significado. Con el uso de iconos y
pictogramas ahorramos información textual y el diseño gráfico del portal web presenta una mejor
visualización. De la misma forma que ocurre con la tipografía, la estandarización de los iconos
conseguirá impactar mejor al usuario.
 La mala interpretación de estos iconos es uno de los inconvenientes que pueden surgir de cara a su
utilización. De esta manera, la elección de las imágenes es uno de los pasos más importantes dentro
del diseño gráfico de nuestro portal web.

1.3. INTERACCIÓN PERSONA-ORDENADOR

Mediante la interacción persona-ordenador (IPO) estudiaremos, de forma ordenada, el intercambio de
información existente entre usuario y ordenador. Cuando existe una buena comunicación entre ambos,
el intercambio de la información es más eficiente, por lo que se reducen los errores y conseguimos
una mayor satisfacción por parte del usuario.

Hoy en día, la mayoría de los sistemas informáticos son sistemas interactivos, y su éxito o fracaso
depende principalmente de la interfaz que exista entre el usuario y el ordenador. Por tanto, es
fundamental que la interfaz gráfica esté diseñada pensando siempre en las necesidades que requiera el
usuario.

También es importante que tengamos en cuenta que el número de personas que van a utilizar el
ordenador puede ir aumentan- do y que cada una de ellas va a tener un grado de preparación diferente,
por lo que sus expectativas también van a ser distintas. Por ello, es conveniente que la interfaz se
adapte al mayor número de personas posibles.

1.4. INTERPRETACIÓN DE GUíAS DE ESTILO. ELEMENTOS

Los manuales de estilo son un grupo de normas que pueden ser utilizadas tanto para el diseño de
documentos como para la redacción de estos. Es bastante frecuente utilizar manuales de estilo en
medios escritos, orales y gráficos. Además, el manual de estilo cuenta con un conjunto de normas
lingüísticas, como de estilo, que propician que el lenguaje sea más eficaz, coherente y, por tanto, más
correcto.

El diseño de las diferentes interfaces web está centrado en dos actividades principales:

• Planificación: qué es lo que se quiere hacer.

• Coordinación del equipo de desarrollo encargado del diseño.
En este apartado, nos centraremos en la creación de una guía de estilo, consistente en un documento
en el que se definen las pautas junto con las normas de calidad que debe tener en cuenta una interfaz
web para un determinado sitio web. Por tanto, la guía de estilo nos garantizará la coherencia del sitio,
aportando diferentes aspectos sobre la calidad de su uso, accesibilidad, di- seño gráfico, etcétera,
considerando diferentes aspectos sobre los colores y otros elementos de diseño. Específicamente, una
guía de estilo sirve para:

• Garantizar la coherencia de un sitio web.

• Aglutinar en torno a un mismo objetivo a todo el conjunto del equipo de trabajo.
Como ya hemos indicado anteriormente, las guías de estilo están dirigidas a aquellas personas que se
van a encargar de diseñar y programar la interfaz web, por lo que debe contar con los aspectos
relacionados con dicha interfaz.

1.5. GENERACIÓN DE DOCUMENTOS Y SITIOS WEB

Desde la aparición de los gestores de contenidos (CMS, del inglés content management systems), es
bastante frecuente que optemos por crear diferentes sitios web sin partir de cero. Algunos de los gestores
más conocidos son, entre otros, Joomla, Drupal u OpenCMS.

Un gestor de contenidos se puede definir como la interfaz que permite controlar una o varias bases de
datos donde se encuentra alojado el contenido web. Este sistema permite controlar el contenido y el
diseño de forma independiente.

Así, podemos afirmar que la utilidad de los sistemas de contenidos se basa en que un administrador
determinado puede originar distintos contenidos sin necesidad de conocer el tema a fondo.
Algunos de los gestores más importantes están basados en tecnología web mediante lenguaje
PHP/HTML y sistemas de bases de datos MySQL. De esta forma, se consigue que los CMS sean de
código y licencia libres.

Los gestores de contenidos serán los encargados de almacenar la información de la página web en la
correspondiente base de datos. Para la construcción de un sitio web, podemos utilizar una serie de
plantillas prediseñadas que nos van a facilitar bastante esta tarea.

1.6. APLICACIONES PARA EL DESARROLLO WEB

Actualmente, disponemos de un gran número de herramientas que nos facilitan las tareas de planificar,
diseñar, desarrollar y mantener un sitio web.

Gracias a estas herramientas, el diseñador nunca va a partir desde cero, sino que, utilizando esas
aplicaciones, necesitará menos es- fuerzo y podrá dedicar sus conocimientos y tiempo a otros aspectos
más importantes.

Las aplicaciones que facilitan la tarea de un diseñador son de dife- rentes tipos:

• General: herramienta que se utiliza para aquellos programas que tienen un interés general, es
decir, para cualquier tipo de usuario.

• Diseño: herramienta utilizada para programas más específicos referentes al desarrollo de las
distintas páginas web.

• Multimedia: herramienta que se utilizará cuando sea necesario crear una serie de animaciones
para un determinado sitio web.

• Programación: al ser más específicas, estas herramientas van a ir estar dirigidas a los
desarrolladores que van a crear páginas web.
• Editores y validadores HTML: estos programas permiten la edición de código HTML.
• Editores y validadores CSS: herramientas que simplifican la creación, edición y comprobación de
un determinado código CSS.

1.7. LENGUAJES DE MARCAS

Una vez conocidos los elementos principales que forman un sitio web, se procede a introducir los
lenguajes de creación para estos. Estos lenguajes son de un tipo especial y reciben el nombre de
lenguaje de marcas. Alguno de ellos son HTML, XML o RDF.

Un lenguaje de marcas o lenguaje de marcado es un tipo de lenguaje que no tiene variables ni

funciones aritméticas. Se combina el texto con etiquetas.

HTML (Hypertext Markup Language) es el lenguaje más conocido para el desarrollo de las páginas
web, lo podemos utilizar para definir la estructura y determinar el contenido de una página web.

Este lenguaje dispone de unas etiquetas o marcas dentro del propio documento que informarán al
navegador sobre la presentación dentro de un documento, es decir, podremos indicar si se trata de un
título, un tamaño de letra, posición determinada, vínculos, etcétera.

El texto debe ir limitado entre dos etiquetas, una de apertura y otra de cierre, que deben ir entre
corchetes angulares y deben cumplir una serie de normas sintácticas.

<nombre_etiqueta> … </nombre_etiqueta>

En su primera versión, HTML solamente mostraba textos con estilo, es decir, las etiquetas que se
utilizaban eran para títulos, párrafos, viñetas y listas, entre otros elementos. W3C (World Wide Web
Consortium) fue creado para organizar el crecimiento de HTML, el cual se encargó de crear estándares
 para todos los temas relacionados con la web. En 1995, publicó la versión 2.0 de HTML.

Esta nueva versión 2.0 aportó compatibilidades con los navegado- res y nuevas etiquetas adicionales
con las que se podían incorporar imágenes, tablas, vínculos y formularios, permitiendo incorporar
intercambios de información con el navegador.

Para dar respuesta a nuevas incorporaciones, apareció una nueva versión adicional del estándar HTML,
la versión 3.0, en la cual empresas como Nestcape y Microsoft aportaron nuevas etiquetas. Junto con
esta versión, otros lenguajes fueron apareciendo, como es el caso de PHP (Hypertext Preprocessor) y
ASP (Active Server Pages), los cuales se propusieron para funcionar con bases de datos y aprovechar
esta interactividad con la web.
En 24 de abril de 1998 se publicó la versión 4.0, en la que se in- corporaron las hojas de estilo CSS, se
permitió el uso de pequeños programas conocidos como scripts, se mejoró la accesibilidad web, se
mejoró la agilidad en los formularios y se permitió realizar tablas complejas. Junto con este nuevo
estándar, apareció Java, una plataforma que entretenía a los navegantes con juegos y aplicaciones.

En el año 2004, las empresas Mozilla, Opera y Apple formaron la asociación Web Hypertext Application
Technology Working Group (WHATWG), su actividad se centró en el actual estándar HTML5,
consiguiendo una revolución en el desarrollo web, ya que permitía incluir en el propio lenguaje de
marcas funcionalidades como utilizar elementos multimedia, entre otras.

1.8. COMPONENTES DE UNA INTERFAZ WEB

Los componentes de una interfaz web son todas las partes que forman parte de un sitio web.

A lo largo de los años, los diferentes diseños de las páginas web han ido evolucionando hacia la
unificación, mostrando unas interfaces bastante bien definidas mediante una serie de componentes
gráficos que permiten que, independientemente del tipo de usuario que pretenda acceder a un sitio
web, este lo pueda hacer. En este transcurso de tiempo, se han asentado una serie de elementos que se
utilizan en la mayoría de las interfaces, como pueden ser los pies de página, los formularios de datos, la
cabecera, etcétera.

Cabecera
La cabecera o header es la zona situada en la parte superior de la interfaz web, Se utiliza normalmente
para situar el logotipo de la empresa o su nombre. Puede ir acompañado de otros elementos de diseño,
como imágenes, textos descriptivos o formularios de acceso, entre otras cosas.
Los principales objetivos de la cabecera son:

• Identificar el sitio web con la empresa que representa a través del logotipo y el nombre de esta.
• Identificar y unificar todas las páginas que pertenezcan al mismo sitio web.
• Separar el borde superior de la interfaz de la parte central para facilitar la visualización.
Por consideraciones de jerarquía visual, la cabecera se encuentra situada en la parte superior de la
interfaz y el logotipo en la parte izquierda.

Aunque no es obligatorio utilizar cabeceras en las interfaces, en caso de usarlas la forma que más se
utiliza es rectangular, a pesar de que existen otras formas. Se recomienda seleccionar en cada caso la
que presente un mayor impacto visual de acuerdo con el tema que se esté tratando.

Sistemas de navegación
Los sistemas de navegación permiten navegar por las distintas páginas que componen una página web.

Es bastante frecuente que estos sistemas se presenten en forma de menús con una serie de opciones
mediante las cuales el usuario puede interaccionar al seleccionarlas.
Estos menús pueden estar formados por iconos, textos o ambos. Además, es posible incorporar efectos
dinámicos que permitan ofrecer interacción con las diferentes opciones.

Otra posibilidad de crear menús dinámicos es mediante la utilización de capas, utilizando CSS y
Javascript. Las opciones existentes en estos menús pueden aparecer y desaparecer dependiendo de las
acciones que el usuario ejecute sobre las principales funciones. Este tipo de menú se denomina menú
de árbol.

Otro tipo de menú es el de pestañas, también está muy extendido y se basa en simular el clásico
aspecto de un archivador. En este caso, aparece la pestaña que esté activa en primer plano, con un
color distinto que la destaca del resto de pestañas.

Como estamos comprobando, los menús son una parte muy importante de los sitios web, ya que
permiten que el usuario se mueva por las diferentes partes sin que se estorben los elementos entre
ellos.

En la mayoría de los casos, los menús lista y árbol suelen situarse en la parte lateral izquierda de la
página por motivos técnicos de funcionalidad y uso. De hecho, su ubicación se ha convertido en un
estándar entre los desarrolladores.

En el caso de tener un menú con demasiadas opciones, es más recomendable utilizar varios menús
dobles jerarquizando las diferentes opciones, así el usuario podrá acceder a las diferentes pestañas de
forma más sencilla

Cuerpo de página
El cuerpo de la página web es donde se mostrarán los contenidos, por lo que debe estar situado en la
zona más importante, que suele ser en la parte central (si la hay), bajo la cabecera y al lado de un menú
lateral (si lo hay) para la navegación.

Los contenidos de una página web pueden variar dependiendo de si se trata de una página de texto o
con formularios, tablas o fichas, etcétera. Además, existen varios elementos que sí será conveniente que
estén presentes en todas las páginas.
En la mayoría de los casos, el cuerpo de página suele estar formado por un título que identifique la
página. Suele situarse en la parte superior de esta y, a veces, dispone de un menú de navegación. Es
conveniente que las letras/palabras del menú tengan un tamaño mayor o un color distinto para que
destaque del resto de texto de la página, pues el menú un elemento clave para la navegabilidad del sitio
web.

Pie de página
El pie de página o footer está situado en la parte inferior de la web, bajo el cuerpo de página. Es una
parte muy importante de la interfaz web, sobre todo para visualizar los distintos enlaces a servicios
concretos.

En muchos casos, suele utilizarse para mostrar los enlaces a servicios, formularios de contacto, ofertas
de empleo, etcétera. También es posible utilizarlo para hacer referencia a la empresa propietaria del sitio
web o a la persona que ha desarrollado la página web.

En el caso de que el pie de página disponga de menú, suele utilizarse como menú auxiliar que permite a
los usuarios navegar por la interfaz web sin necesidad de volver al menú principal.
Espacios en blanco
Los espacios en blanco también son un elemento esencial en las interfaces web, ya que son los
encargados de definir las zonas que no van a tener elementos gráficos.

Algunos diseñadores hacen uso de los espacios en blanco de la misma forma que si fuera cualquier otro
elemento, es decir, los define desde el principio, considerando su presencia desde el momento inicial.

Los espacios en blanco son fundamentales para lograr un diseño que no sea sobrecargado, sino bien
delimitado.

1.9. MAPA DE NAVEGACIÓN. PROTOTIPOS

En ocasiones nos encontramos que los sitios web
están compuestos por un número elevado de
páginas a las que es posible acceder desde algún
punto en concreto. Los mapas de navegación se
utilizan para representar la estructura de las
páginas de un sitio web, para facilitar tanto al
desarrollador como al usuario conocer qué
páginas llevan a otras. Por este motivo, se debe
realizar un esquema que permita visualizar las
secciones en las que se ha dividido el sitio web y
la relación entre los bloques antes de diseñar el
sitio web. Podríamos compararlo con el índice de contenidos de un libro. Es posible representar esos
mapas de forma gráfica, donde la página principal actúa como elemento raíz a partir del cual salen las
distintas ramificaciones hacia el resto de los elementos del mapa.

El principal objetivo de los mapas de navegación a la hora de diseñarlo es definir de una forma clara la
estructura de los contenidos antes de crear el diseño del sitio web, esto hace que los usuarios
encuentren de forma sencilla la información que están buscando.

En ocasiones, la complejidad del diseño hace que sea difícil comprender lo que el cliente quiere
transmitir al equipo de desarrollo y los objetivos que se tienen que conseguir. Es por ello que surgen los
prototipos, que son herramientas que permiten optimizar tiempo, ya que muestran un esquema del sitio
web una vez que se finalice, pero empleando mucho menos tiempo que si se hubiera realizado
realmente.

Podríamos decir que un prototipado web consiste en la creación de un borrador a partir del cual se
empezará a desarrollar la idea original del diseño del sitio web. Realizar modificaciones en un prototipo
es mucho más sencillo que hacerlo en la web real. Con el prototipo se resuelven los siguientes
aspectos:

• Qué elementos formarán la interfaz de cada página.

• Qué elementos tendrán en común las distintas páginas del sitio web.
• En qué orden se verán las páginas, es decir, ordenar el mapa de navegación.
• Qué aspectos se deben tener en cuenta para desarrollar el sitio web, como son los aspectos técnicos
de accesibilidad y usabilidad.
Una vez que se han diseñado los prototipos y los mapas de navegación, lo siguiente que se debe realizar
es el desarrollo del sitio web. Para llevar a cabo el diseño, es posible utilizar plantillas ya elaboradas o
trabajar con alguna propia.

1.10. MAQUETACIÓN WEB. ELEMENTOS DE ORDENACIÓN

La maquetación toma como referencia el espacio que tenemos disponible para situar en él los diferentes
elementos que forman una página web.

Una de las principales ventajas que ofrece la maquetación web es que se encarga de separar el con-
tenido correspondiente de la página de presentación. De esta forma, se consigue el mantenimiento y
cambio en los contenidos de una manera más sencilla.

Anteriormente, la maquetación se realizaba mediante el uso de tablas (<table><tr><td>). El problema

de utilizar tablas era que el código era complejo de entender, incluso había problemas con algún
navegador a la hora de analizar la página. Actualmente, la maquetación se realiza utilizando capas
(<div>), también conocidas como divisiones o contenedores. Estos contenedores se colocan en la página
web utilizando hojas de estilo o CSS. Esto permite posicionar un elemento en una posición distinta con
tan solo cambiar la hoja de estilos.

Distribución de elementos en la interfaz: capas

Los principales elementos de la maquetación web son las capas y los marcos.

Las capas (div o layout) se pueden definir como contenedores en los que podemos colocar las
diferentes imágenes, textos, etcétera. Sus principales características son:

• Capas anidadas: pueden estar ubicadas una dentro de otra. Se define cómo se posicionan, el
tamaño que van a tener y dónde van a estar ubicadas.
• Las capas son diferentes bloques con contenido HTML que se posicionan de forma dinámica.
Permiten la utilización de CSS para los estilos.
Las capas no se definen completamente con HTML, sino que es necesario aplicar un lenguaje de estilos
conocido como CSS.
<!DOCTYPE html>
<html>
<html>
<p>Aqui hay un texto</p>
<div style="background-color:lightblue">
<h3>El título de mi elemento div</h3>
<p>Aqui va un texto dentro de mi div</p>
</div>
<p>El resto de mi web</p>
</body>
</html>

Aquí hay un texto

El título de mi elemento div

Aqui va un texto dentro de mi div

El resto de mi web

1.11. PLANTILLA DE DISEÑO

Las plantillas de diseño hacen referencia a los diferentes sitios web (ya prediseñados) que podemos
utilizar como base a la hora de diseñar una web. Deberemos adaptar la plantilla a las necesidades
planteadas en el inicio de nuestro proceso.

Como es lógico, al utilizar una plantilla de diseño, la tarea del diseñador será más rápida y sencilla, lo
que permitirá ahorrar tiempo en este proceso.

Existen una gran cantidad de sitios web disponibles que su- ministran plantillas de diseño web de forma
económica. La mayoría de ellos ofrecen alojamiento gratuito de los sites durante un tiempo
determinado.
2.-USO DE ESTILOS
Las hojas de estilo en cascada o CSS (Cascading Style Sheets) son la parte del diseño de aplicaciones web.

Permiten ahorrar tiempo a la hora de diseñar sitios web y es posible conseguir unos efectos potentes
soportados por la gran mayoría de navegadores.

Una ventaja es que permiten separar el contenido (la información) del diseño (apariencia), lo que
posibilita un mantenimiento más eficiente del sitio web.

Se podría resumir de la siguiente forma: por un lado, se utiliza la etiqueta <body> para definir la
estructura HTML, y, por otro lado, en un archivo externo o en el <head> del propio HTML se define la
apariencia de cada página. De esta forma, es posible modificar el contenido sin que se vea afectado el
aspecto del sitio web, o modificar el aspecto sin afectar al contenido.

Otra de las ventajas que aporta CSS es la adaptación de los sitios web en los diferentes dispositivos, ya
sea un iPad, un móvil Android, un ordenador personal o cualquier otro dispositivo. Esto es posible
gracias a la combinación de CSS y HTML, ya que permiten crear sitios web personalizados para cada
dispositivo.

2.1. ESTILOS EN LíNEA BASADOS EN ETIQUETAS, EN CLASES Y EN

IDENTIFICADORES
Las hojas de estilo CSS están formadas por reglas que indican cómo se visualizará la página.
2.1.1. SELECTORES BASADOS EN ETIQUETAS
Lo primero que debemos hacer para definir una regla de estilo es usar las propias etiquetas del
documento HTML como selectores.

selector { atributo:valor }

El atributo son las características que se pretenden modificar del selector, como, por ejemplo, el color.
El valor hace referencia a la instancia del atributo, por ejemplo, “blue”.

Si queremos aplicar un estilo a la etiqueta <h1>, lo realizaremos de la siguiente forma:

h1 { color:blue }

A la hora de hacer referencia a un selector, lo definiremos sin las llaves < >, es decir, simplemente p, h1,
h2, etcétera. Para declarar
{atributo:valor} debe ir entre llaves { }.
Es posible aplicar un estilo a cualquier etiqueta que se encuentre dentro del contenido HTML,
únicamente tendremos que ajustarnos a la sintaxis definida anteriormente. En caso de que definamos
mal una sintaxis, el navegador omitirá la declaración y continuará con la siguiente, independientemente
de si el error afecta a toda la pro- piedad, a un valor en concreto o a toda la descripción.

Es posible definir atributos para varios selectores y selectores con varios atributos.

selector 1, selector2 {atributo1:valor1; atribu to2:valor2}

Por ejemplo, para aplicar el mismo estilo a dos selectores diferentes, la sintaxis es la siguiente:

h1, h2 { color:blue }

Por otro lado, si al mismo selector se le quieren aplicar diferentes atributos:

h1 { color:blue; background-color:red }
Una vez conocida la sintaxis, se procede a aplicarlas para que el navegador las pueda leer e interpretar.
Dentro del fichero HTML, las declaraciones las insertaremos entre las etiquetas <style></style> que se
incluirán en el <head> del fichero.

<head>
<style>
h1 { color:blue; background-color:red }
</style>
</head>

2.1.2. SELECTORES BASADOS EN CLASES

Los selectores basados en etiquetas son muy fáciles de comprender. Sin embargo, si lo que
pretendemos es establecer diferentes estilos dependiendo del párrafo que se ponga, de tal forma que se
distinga el encabezado de página del resto de contenido, el código se complica. Con la sección anterior,
si declaramos un estilo p {color:blue}, siempre que en el documento HTML aparezcan las etiquetas
<p></p> el interior se mostrará en color azul. En ocasiones, se desea que en los párrafos se aplique una
regla de estilo diferente a otra. En este caso, haremos uso de los selectores basados en clases.
Mediante las clases es posible definir un estilo directamente a una etiqueta HTML. Hay diferentes tipos
de clases:

• Las clases asociadas directamente a una etiqueta HTML: h1.co- lor1 {color:green}.
• Las clases genéricas aplicadas a cualquier etiqueta: .color2 {co- lor:blue}.
Las clases asociadas a las etiquetas HTML se definen de la siguiente manera:

Etiqueta.clase { atributo:valor; atributo:valor;… }

Esta alternativa permite aplicar a una misma etiqueta diferentes estilos.

Para indicar una etiqueta <h1> que estilo se pretende aplicar:

Como resultado, queda de la siguiente forma:

Texto color verde

Texto color azul
Texto color rojo
Las clases genéricas no se aplican directamente a una etiqueta HTML:

nombreclase {atributo:valor; atributo:valor; …}

Por ejemplo:

.color1 {color:green}

De esta forma, una clase definida es posible aplicarla a cualquier elemento de la página:

<p class=”color1”> … </p>

<h1 class=”color1”> … </h1>

<div class=”color1”> … </div>

Se realiza mediante la siguiente declaración:

<head>

<style>

.color1 { color:green }

.color2 {color:blue}

.color3 {color:red}

</style>

Es posible aplicarla de la siguiente forma:

<body>
<h1 class=”color1”> Texto color verde </h1>

<p class=”color2”> Texto color azul </p>

<h2 class=”color3”> Texto color rojo </h2>

</body>

Quedando como resultado:

Texto color verde

Texto color azul

Texto color rojo

Otra de las ventajas de utilizar las clases genéricas es que permiten asignar más de una clase a la
misma etiqueta, siempre y cuando no haya conflicto entre ellas:
 <head>

<style>

.color2 { color:blue }

.fondo1 {background-color:red}

</style>

</head>

Se aplica de la siguiente forma:

<h1 class=”color2 fondo1”> Título en color azul y

fondo rojo </h1>

<p class=”color2”> Párrafo en color rojo y fondo

predefinido por la página </p>

Mostrando el siguiente resultado:

Título en color azul y fondo rojo

Párrafo en color azul y fondo predefinido por la página

2.1.3. SELECTORES BASADOS EN IDENTIFICADORES

Este tipo de selectores tienen una sintaxis muy parecida a los se- lectores basados en clases, pero con la
diferencia de que estos solo pueden utilizarse por un único elemento.

Un selector basado en identificador se define entre las etiquetas

<style></style> de la siguiente forma.

Etiqueta#nombre {atributo:valor; atributo:valor; …}

#nombre {atributo:valor; atributo:valor; …}

Como se puede apreciar, la sintaxis es muy parecía a la anterior, con la diferencia de que, en lugar de
utilizar un punto, se utiliza una almohadilla (#).
Para indicar a una etiqueta qué estilo se pretende aplicar se utiliza el atributo id en la etiqueta (de la
misma forma que se utiliza class para las clases), quedando de la siguiente forma:
 <head>
<style>
#color1 { color:green }
</style>
</head>
<body>
<p id=”color1”> El párrafo se muestra en color
verde </p>
</body>

Las clases se utilizarán cuando se pretenda aplicar un estilo a uno o más elementos, mientras que los
identificadores se definirán para aplicar una exclusividad, ya que solamente se utilizará para un único
elemento. Habitualmente, los identificadores se utilizan para los bloques o secciones principales de una
página, como son la cabecera, el contenido y el pie de página.

Otro uso que permiten los identificadores es definir un enlace hacia un elemento de la página.
Se aplicaría de la siguiente forma:

2.1.4. AGRUPACIÓN DE SELECTORES

Es posible agrupar los selectores o anidarlos para conseguir un fi- chero CSS más optimizado, concreto y
definido y que resulte más sencillo detectar posibles errores y solucionarlos.

El uso de agrupamientos responde a buenas prácticas específicas de CSS, anteriormente se han

comentado algunas de ellas, como agrupar los selectores siguiendo la siguiente sintaxis:

Selector1, selector2 {atributo1:valor1;

atributo2:valor2; …}
De esta manera, es posible aplicar el mismo estilo a un conjunto de selectores. Por ejemplo, para aplicar
un tipo de fuente a distintas etiquetas <h1>, <p> y <h2>, la regla es la siguiente:

h1, p, h2 {font-family:Verdana}

De la misma forma, es posible agrupar los selectores de clase y los selectores de identificador aplicando
las siguientes reglas.

Para los selectores de clase:

.color1, .color2, .color3 {font-family:Verdana}

Para los selectores de identificador:

#cabecera, #contenido, #piepagina {font-family:Verdana}

Por último, es posible realizar una agrupación con los diferentes grupos de selectores. Por ejemplo,
agrupar un selector de clase, de identificador y de etiqueta:

#cabecera, h1, .color1 {font-family:Verdana}

2.1.5. ANIDAMIENTO DE SELECTORES

Para conseguir un estilo más definido y concreto, es posible anidar los selectores permitiendo aplicar un
estilo a un elemento de- pendiendo de los elementos de su alrededor. Disponemos de los siguientes
tipos de selectores anidados:

2.1.5.1. Selector anidado común

Este tipo de selector se aplica sobre los elementos que se encuentran en el interior de otros elementos
siguiendo la siguiente sintaxis:

Selector1 selector2 {atributo1:valor1; atributo2:valor2; …}

Se puede observar que entre los selectores hay un espacio en blanco.

Este anidamiento permite, por ejemplo, visualizar en color azul un texto en negrita <b> y un título <h1>
cuando este se encuentre en negrita. La sintaxis es la siguiente:

b {color:blue}
Código HTML:

<body>

<h1><b> Texto h1 en negrita y de color azul </b></h1>

<h1><i><b> Texto h1 en cursiva, negrita y colorazul </b></i></h1>

<b> Texto en negrita y de color azul </b>

</body>

Resultado:

Texto h1 en negrita y de color azul

Texto h1 en cursiva, negrita y color azul
Texto en negrita y de color azul

2.1.5.2. Selector hijo anidado

En el anterior anidamiento, se puede observar que se comporta de la misma manera
independientemente de si tiene una etiqueta anterior: se muestran <h1> y <b> en color azul.

Si lo que se pretende es restringir las etiquetas:

<head>

<style>

b {color:blue}

</style>

<body>

<h1><b> Texto h1 en negrita y de color azul </b></h1>

<h1><i><b> Texto h1 en cursiva, negrita y colorazul </b></i></h1>

<b> Texto en negrita y de color azul </b>

</body>

Si queremos restringir las etiquetas y que solamente se muestre en color azul la etiqueta <b> situada
dentro de <h1> sin ningún elemento entre medias, se utilizará la siguiente sintaxis:

Selector1 > selector2 {atributo1:valor1; atribu- to2:valor2; …}

En el siguiente ejemplo se puede observar que solamente aparecerá en color azul el texto entre las
etiquetas <h1><b>.
 <head>

<style>

h1 > b {color:blue}

</style>

<body>

<h1><b> Texto h1 en negrita y de color azul </b></h1>

<h1><i><b> Texto h1 en cursiva, negrita y colorpredeterminado </b></i></h1>

<b> Texto en negrita y de color predeterminado </b>

</body>

Resultado:
Texto h1 en negrita y de color azul
Texto h1 en cursiva, negrita y color
predeterminado
Texto en negrita y de color predeterminado

2.1.6. ATRIBUTOS
Tenemos cuatro formas diferentes de seleccionar:
1. [atributo]: selecciona los elementos que tienen ese mismo atributo, sin importar su valor.
2. [atributo = valor]: selecciona los elementos que tienen ese mismo atributo con el valor que se
pasa.
3. [atributo ~= valor]: selecciona los elementos que tienen ese mismo atributo con al menos un
valor igual al especificado.
4. [atributo |= valor]: selecciona los elementos que tienen ese mismo atributo y la palabra debe
comenzar por el valor que se pasa.
2.1.7. PSEUDOCLASES
Permite seleccionar elementos según las indicaciones del usua- rio. Algunas de las pseudoclases más
frecuentes son las que se aplican a:

• :link. Los enlaces que nunca se visitan.

• :visited. Los enlaces que se han visitado una vez como mínimo.
• :hover. Los elementos indicados por el usuario, pero sin necesi- dad de ser activados.
• :active. Los elementos que se activan.
• :focus. Los elementos que tiene el foco.

Algunos ejemplos, pueden ser:

a:visited {color:black;}

a: active {color:red;}
2.1.8. PSEUDOELEMENTOS
Algunos de los pseudoelementos principales son:

• :first-line. Para referirnos a la primera línea de un texto.

• :first-letter. Para referirnos a la letra de un texto.
• :before. Genera texto antes del contenido de un elemento.
• :after. Genera texto después del contenido de un elemento.

Para poder utilizar estos pseudoelementos se utilizará “::” en lugar de “:”.

p::first-letter { color:red; }

p::first-line { color: blue; }

h1::after { content:”.”; }

h1::before { content:=”Ejemplo de ”; }

<div id=”ejemplo”>

<h1>Pseudo-elementos</h1>

<p> Ejemplo de código </p>

</div>

Ejemplo de Pseudoelementos.
Ejemplo de código

Es posible modificar el texto del título cuando el usuario seleccione una parte, para ello se añadirá un
nuevo pseudoelemento ::selection.
 2.2. CREAR Y VINCULAR HOJAS DE ESTILO
Es posible insertar las propiedades de estilo de tres formas diferentes:

• CSS en línea: el atributo style se encuentra en la misma línea de código que un elemento,
afectando únicamente a este elemento.

<p> Esto es un párrafo normal </p>

<p style=”background-color:red;”> Esto es un pá-

rrafo con estilo </p>

• CSS interno: la etiqueta <style> está situada al principio del documento, concretamente entre las
etiquetas <head>, afectando de forma global a los elementos de esa misma página.

<head>

<title> Ilerna Online </title>

<style>

p { background-color:red; }

<style>

</head>

• CSS externo: los estilos están situados en un archivo externo al documento, recibe el nombre de
hoja de estilos. Para poder hacer referencia a este archivo, se tiene que incluir un enlace <link> hacia la
hoja de estilo. Las propiedades que se definan en esta hoja se aplican en todos los documentos que
hagan referencia a la misma hora de estilos.

p { background-color:red; }

<head>

<title> Ilerna Online </title>

<link rel=”stylesheet” type=”text/css”

href=”…/ruta/hoja/estilo.css”>

</head>

En muchas ocasiones, es posible que una misma propiedad esté situada en diferentes sitios: si no
entran en conflicto, el navegador aplicará todos los estilos. Por ejemplo, si en un archivo externo
hemos definido un color de fondo y de forma interna un tamaño de letra, el navegador aplicará ambas
propiedades al elemento.

Pero existe la posibilidad de que entren en conflicto (que tanto en el archivo externo como en el
interno se haya definido un estilo diferente para el color de fondo, por ejemplo), en este caso, se
aplicarán según su orden de preferencia:

1. Primero se aplicarán los estilos en línea.

2. En segundo lugar, se aplicarán los estilos internos.
3. Por último, se aplicarán los estilos situados en una hora externa.

Por lo tanto, un estilo en línea tiene la máxima prioridad, y al aplicarlo sobre un elemento anulará los
estilos internos y externos.

Otra forma que tenemos de unir archivos es mediante la regla @import.

<head>
<title> Ilerna Online </title>
<style>
@import “…/css/estilo.css”;
<style>

PARA + INFO

En las tres formas definidas para insertar una propiedad de estilo, en caso de que se
intente aplicarun estilo diferente al mismo elemento, se aplicará laúltima regla indicada.

En ocasiones, queremos que una instrucción tenga la mayor priori- dad y que las siguientes
instrucciones no puedan modificarla. Para ello se utilizará la palabra reservada !important.

<head>
<title> Ilerna Online </title>
<style>
p { background-color:red !important; }
<style>
</head>

2.3. HERRAMiENTAS Y TEST DE VERIFICACIÓN

Para que los desarrolladores puedan comprobar que los estilos que definen cumplen ese estándar, el
consorcio de estándares web 3WC proporciona herramientas para validar tanto el código HTML como las
hojas de estilo CSS, comprobando si son correctas.

A este validador es posible acceder a través del siguiente enlace web: https://jigsaw.w3.org/css-
validator/, introduciendo la dirección de enlace (URL) del sitio web que se pretenda evaluar y
seleccionando las distintas opciones.

Si en el proceso de validación no se ha encontrado ningún error, es posible incluir el siguiente icono en

la página web. De esta forma, los visitantes podrán observar que los desarrolladores se han pre-
ocupado a la hora de desarrollar un sitio web interoperable y acorde con los estándares.

2.4. GUíA DE ESTILO

En apartados anteriores, hemos definido la guía de estilos como el documento de ayuda para
diseñadores y desarrollado- res del sitio web que ayuda a tomar decisiones en los aspectos relacionados
con el diseño web. Recoge tanto los aspectos de combinación de color, texto o tipo de letra utilizados
como las características de cada página.

La guía también detalla la implementación de las clases de CSS y la forma en la que se ha desarrollado.
3.-PREPARACIÓN E IMPLANTACIÓN DE CONTENIDO
MULTIMEDIA
En internet podemos encontrar multitud de archivos multimedia que se pueden conseguir con gran
facilidad, pero eso no significa que todo el material disponible pueda usarse de forma gratuita y como si
fuera nuestro. En esta unidad se estudiará cómo podemos manejar herramientas para manipular y
convertir este material e incluirlo en páginas web.

3.1. TIPO DE IMÁGENES EN LA WEB

Una decisión importante a la hora de crear una página web es elegir el formato de imagen que
utilizaremos para que haya una buena relación entre la calidad de imagen y el peso en bytes. Existen
tres tipos de imágenes: el mapa de bits, las imágenes vectoriales y las imágenes animadas.

Nos centraremos en estudiar los dos primeros tipos, los mapas de bits y las imágenes vectoriales.

Los mapas de bits se pueden llamar también imágenes rasterizadas (consistente en procesar imágenes
en formato vectorial para convertirlas en mapas de bits), imágenes matriciales (se disponen en líneas
horizontales y verticales formando un rectángulo) o bitmap (representación binaria). Están constituidas
por píxeles y, si ampliamos la imagen, comprobaremos que pierden calidad porque los píxeles siguen
siendo los mismos. El tamaño va a depender del tamaño de la imagen y servirán para representar
fotografías e ilustraciones. Se pueden identificar por sus extensiones: .gif, .jpg y .png.

Por su parte, las imágenes vectoriales se construyen a través de funciones matemáticas que
representan objetos geométricos, segmentos, arcos, etcétera. En este caso, si ampliamos la imagen no
pierde calidad. No habrá relación entre el tamaño de la imagen y el del archivo, y por lo general
ocuparán menos que los mapas de bits. Su uso será principalmente para dibujos, esquemas y planos.

3.2. DERECHOS DE LA PROPIEDAD INTELECTUAL. LICENCIAS.

DERECHOS DE AUTOR
Con el fin de proteger la creatividad humana, se ofrecen a los auto- res recompensas económicas
equitativas e incentivos en forma de reconocimientos, estos son conocidos como derechos de propie-
dad intelectual y de autor. Este sistema de derechos evita que se realicen copias no autorizadas de las
creaciones de un autor.

El alcance de ambos derechos, de propiedad intelectual y de autor, es ligeramente diferente. La

propiedad intelectual abarca tanto los derechos de autor como los conexos a los derechos de autor, es
decir, son facultades de otros agentes que han intervenido en la creación de una obra, por ejemplo, los
artistas o intérpretes, pro- ductores de fonogramas y grabación de audiovisuales, etcétera. En la
siguiente sección se detalla estos conceptos y cómo es posible identificarlos en la web.
3.2.1. DERECHOS DE LA PROPIEDAD INTELECTUAL
Los derechos que conforman esta propiedad se dividen en dos grupos: los derechos morales y los
económicos.

• Los derechos morales: son los reconocidos para un/a autor/a y los/as artistas-intérpretes. Estos
derechos son irrenunciables y acompañan al/la autor/a o artista durante toda su vida, incluso a sus
herederos por causa de fallecimiento. Entre ellos, destaca el reconocimiento del/la autor/a de la obra y
del/la artista sobre sus interpretaciones o ejecuciones, incluyendo el respeto a la integridad de la obra o
actuación y a la no alteración de estas.
• Derechos de carácter económico: es posible distinguir entre:

– Derechos exclusivos: son aquellos que permiten al autor prohibir los actos de explotación
de su propia obra o prestación protegida por el usuario, y poder exigir una retribución a cam-
bio de la autorización de la obra.
 – Derechos de remuneración: a diferencia de los derechos exclusivos, estos no autorizan a su
autor a prohibir los actos de explotación o prestación de su obra, aunque sí obligan al pago de una
cantidad dineraria por los actos de explotación que se realicen, cuya cantidad está determinada por la
ley o por las tarifas generales de las entidades de gestión.

• Derechos compensatorios: como es el derecho por copia privada que es compensada con los
derechos de propiedad intelectual dejados de percibir por una razón de reproducción de obras o
prestaciones protegidas para el uso exclusivamente privado del copista.
3.2.2. LICENCIAS
Una licencia de software es un contrato entre el autor de los derechos de explotación y distribución y el
usuario o consumidor para permitir utilizar el software cumpliendo una serie de términos y condiciones
que se han establecido dentro de sus cláusulas.

Estas licencias permiten establecer la cesión de determinados derechos al usuario final sobre una o
varias copias del programa o límites en la responsabilidad por fallos, entre otros, incluso pueden
establecer determinados compromisos con el usuario final, como, por ejemplo, la cesión del programa a
terceros o la no reinstalación del mismo programa en diferentes dispositivos.

Para poder designar únicamente los derechos de explotación de una obra sin hacer relación a los
derechos morales se utiliza el copyright. Se utiliza el símbolo © seguido de un nombre para indicar la
titularidad de derechos de explotación. Normalmente, aunque no sea necesario, va acompañado de la
expresión “todos los derechos reservados”.

Por otro lado, el copyleft es una alternativa al copyright que aboga por el uso de licencias libres que
permiten compartir y reutilizar obras de creación. Hay varios tipos de licencia libre, las más utilizadas
son las Creative Commons, pero también existen otros modelos, como las licencias Coloriuris.

No hay que confundir Creative Commons con copyleft o “todo libre”, ya que la finalidad de este es
plantear un paso intermedio entre copyright y “libre total”. Creative Commons pone a disposición de los
autores las licencias (a la carta), las cuales se incorporan en los lugares donde esté dicha obra. Esto
permite a los autores que su obra pase a dominio público. Es decir, en Creative Commons el autor
otorga una mayor libertad de uso sobre su obra, aunque siempre bajo determinadas condiciones.
Estas condiciones son:

• Reconocimiento: el creador permite copiar, distribuir y comunicar públicamente su obra siempre y

cuando se reconozca y cite al autor original.
• No comercial: permite copiar, distribuir y comunicar públicamente la obra siempre y cuando no se
utilice para fines comerciales.
• Prohibición de obras derivadas: el creador permite copiar, distribuir y comunicar públicamente copias
inalteradas de la obra, pero no permite realizar trabajos sobre ellas.
• Redistribución bajo la misma licencia: permite la distribución de otras obras derivadas bajo una
licencia idéntica a la que rige en la obra original.
 Reconocimiento (by): se permite cualquier explotación de la obra, incluyendo una fi- nalidad
comercial, así como la creación de obras derivadas, la distribución de las cuales también está
permitida sin ninguna restricción.

Reconocimiento - NoComercial (by-nc): se permite la generación de obras derivadas

siempre que no se haga un uso comercial. Tampoco se puede utilizar la obra original con
finalidades comerciales.

Reconocimiento - NoComercial - CompartirIgual (by-nc-sa): no se permite un uso co-

mercial de la obra original ni de las posibles obras derivadas, la distribución de las cuales se
debe hacer con una licencia igual a la que regula la obra original.

Reconocimiento - NoComercial - SinObraDerivada (by-nc-nd): no se permite un uso

comercial de la obra original ni la generación de obras derivadas.

Reconocimiento - CompartirIgual (by-sa): se permite el uso comercial de la obra y de las

posibles obras derivadas, la distribución de las cuales se debe hacer con una licencia igual a
la que regula la obra original.

Reconocimiento - SinObraDerivada (by-nd): se permite el uso comercial de la obra pero no

de la generación de obras derivadas.

3.2.3. DERECHOS DE AUTOR

Los derechos de autor pueden ser de dos tipos:

• Derechos morales, irrenunciables, como es el derecho de reconocimiento y el derecho de integridad

de la obra.
• Derechos económicos, transferibles y de una duración limitada en el tiempo, básicamente los
derechos de explotación.

Autor se considera a la persona que aparece como tal en la obra. En las obras de colaboración, en las
que han colaborado varios autores, los derechos pertenecen a todos los autores, sin embargo, en obras
colectivas corresponde a la persona bajo cuya iniciativa y coordinación se edita y divulga la obra.

3.3. IMÁGENES: MAPA DE BITS, IMAGEN VECTORIAL. FORMATOS DE

IMÁGENES
A la hora de tomar las decisiones para incluir imágenes en nuestro sitio web, es necesario elegir
correctamente el formato para cada tipo de imagen, de tal manera que se consiga una correcta relación
entre su peso en bytes y la calidad visual.

Existen distintos tipos de imágenes: mapas de bits, vectoriales y animadas. En una página web, cuando
hablamos de formatos de imagen, normalmente nos referimos a los mapas de bits. Algunos de los
formatos en mapas de bits más importantes son: .gif, .jpg y .png. A continuación, repasamos las
características más destacables de estos formatos:

• GIF: formato usado para imágenes sencillas, con forma simple y con pocos colores. Se caracteriza
por:
– Número de colores: 2 a 256 de una paleta de 24 bits.
 – Formato de compresión sin pérdida basado en LZW.
– Carga progresiva en navegador.
– Máscara de transparencia de 1 bit.
– Permite animación simple.
• JPEG: formato usado para comprimir imágenes fotográficas, ya que el ser humano no es capaz de
percibir toda la información almacenada en una imagen de 24 bits. Por eso decimos que es un
formato con pérdida. Las características son:
– Número de colores: 24 bits color o 8 bits B/N.
– Gran posibilidad de compresión.
– Formato de compresión con pérdida.
– No permite transparencias ni animaciones.
• PNG: formato adecuado para imágenes renderizadas. Ofrece unos degradados suaves y una
buena definición de líneas. Es un formato de compresión sin pérdida. Las principales características
son:
– Color indexado hasta 256 colores y TrueColor hasta 48 bits
por píxel.
– 10% más de compresión que GIF.
– Compresión sin pérdida.
– Canal alfa (transparencias variables).
– No permite animaciones.

Este tipo de imágenes ofrecen dificultades al intentar realizar modificaciones sobre la imagen original
(como sería cambiar el color, un texto, etcétera) o si pretendemos redimensionarla, ya que se
redimensionarán los píxeles, haciendo que pierdan calidad y definición.

Estas limitaciones desaparecen con el formato vectorial. La información de tipo vectorial se representa
por medio de fórmulas matemáticas (rectángulos, círculos o segmentos). Estas fór- mulas se traducen
en el ordenador en la tarjeta gráfica para que las pueda interpretar. Posee dos grandes ventajas: una es
la posibilidad de diseño posterior y otra que el tamaño de los archivos será mucho menor.

Existen dos tipos de imágenes vectoriales:

• Las que necesitan de un plugin para poder verse en un navegador web.

• Las que se basan en lenguaje de marcado, cuyos elementos serán definidos mediante texto para que
luego sea interpretado por el navegador.

Los formatos más populares en este tipo de imagen son: .eps, .ps, .pdf, .fla, .swf, .wmf y .svg.

Para incluir una imagen en una página web deberemos hacerlo utilizando la etiqueta <img>, y sus
principales atributos son:

• src: es obligatorio. Indica la dirección URL de la imagen que queremos mostrar.

• alt: texto alternativo en una imagen.
• width/height: tamaño de la imagen. Es recomendable ponerlo para aligerar la carga.
• usemap: si existe, indicará la información del mapa asociado y se convertirá en el nombre del mapa.
• ismap: si la imagen se encuentra dentro de un enlace y es un mapa se indicará con este parámetro
booleano.

Ejemplo de los atributos:

 <img src=”/imágenes/img1.jpg” width=”125” height=”139” alt=”Texto alternativo”>

3.4. SOFTWARE PARA CREAR Y PROCESAR IMÁGENES

Para el tratamiento de imágenes, tenemos multitud de herramientas que nos van a posibilitar tanto su
creación como su modificación. Estas herramientas pueden ser gratuitas o de pago.

Así, existen herramientas para ejecutar de forma online o aplicaciones ejecutables desde nuestro
equipo. Algunas de estas últimas son:

• La herramienta para tratamiento de imágenes más conocida es Adobe Photoshop. Las funciones de este
producto son la creación, edición y retoque de imágenes cuyos formatos propios son PSD y PDD, los
cuales guardan capas, canales, guías y modos de color. Además de usar estos formatos, es capaz de
utilizar los distintos formatos más comunes de los tipos de imágenes.
• Otra herramienta conocida similar a Adobe Photoshop, pero de software libre y gratuita, es GIMP.

Entre las herramientas online que podemos encontrar, destacamos:

• Pixlr: aplicación de uso sencillo y que presenta las herramientas básicas para el tratamiento de
imágenes. Tiene menor potencia que los anteriores, pero su uso es más fácil.
• Cellsea Free Web Photo Editor: software completo. Tiene casi las mismas funciones que Photoshop.
• Fauxto: aplicación cuya interfaz de usuario se asemeja a Photoshop y también posee las
herramientas de capas y filtros. Su usabilidad es más compleja que la herramienta anterior, Cellsea
Free Web Photo Editor.
• ImageTool: herramienta básica para la creación de logos. Solo es necesario elegir el color de fondo y
el texto para la creación del logo.

3.5. OPTIMIZACIÓN DE IMÁGENES PARA LA WEB

Para crear un sitio web, debemos tener en cuenta los distintos usuarios que lo usan y, por tanto, las
distintas conexiones y dispositivos que utilizan. Por ello, debemos crear y añadir imágenes a nuestro
sitio que ocupen el menor tamaño posible para que así su descarga y visualización se realice de forma
ágil.

Para determinar el tamaño de un archivo gráfico, deberemos considerar los siguientes factores:

• Dimensiones de la imagen.
• Profundidad o paleta de colores.
• Resolución.
• Formato de archivo.

3.5.1. RECOMENDACIONES PARA REALIZAR LA OPTIMIZACIÓN

La resolución que generalmente utilizamos en un ordenador suele ser de 96 ppp (resolución 1.600 x
1.200), por lo que no sería recomendable usar mayores resoluciones, ya que aumentaría mucho el
tamaño del archivo.

Si reducimos el número de colores de la paleta, reduciremos también el tamaño del archivo.

Antes de insertar una imagen a nuestro sitio web, conviene redimensionarla con algún programa de
tratamiento de imágenes.

Conviene guardar las imágenes originales en formato BMP, TIFF o JPEG sin realizar compresión y
realizar copias en otros formatos con los que podamos tratarlas para publicarlas en la web.

Si queremos usar un dibujo, logotipo o gráfico, podemos usar una imagen GIF, ya que predominan los
colores más sólidos y presenta una paleta de colores más reducida.
El principio fundamental de una imagen en la web es que pese poco y se vea bien.
 3.5.2. HERRAMIENTAS PARA LA OPTIMIZACIÓN
Algunas herramientas exclusivas que podemos utilizar para la optimización pueden ser:

• Image Optimization: es una herramienta online en la que podremos cargar un mapa de bits y
optimizarla para usarla en la web sin perder calidad.
• DoSize: posibilidad de cambiar el tamaño de una imagen y adecuarlo a las necesidades del diseñador.

3.6. SOFTWARE PARA MANIPULAR AUDIO Y VíDEO

3.6.1. AUDIO. INSERTAR AUDIO EN UNA WEB
Formatos
El formato de audio más popular es el MP3. Es un formato que usa un algoritmo con pérdida para
conseguir un menor tamaño del archivo en cuestión. Se usa en multitud de dispositivos y puede
comprimirse usando una mayor o menor tasa de bits, teniendo así mayor o menor calidad de audio.

En el desarrollo web, el formato MP3 no es el único que existe. Hay otros formatos, algunos con mejores
prestaciones que el MP3, pero no todos los navegadores los soportan. Cabe destacar que lo que se
intenta buscar al crear un sitio web es llegar al mayor número de dispositivos posible.

En el ámbito de los archivos comprimidos, debemos diferenciar entre formato y códec. El formato es
la estructura de ese archivo de audio, mientras que el códec es el tipo de compresión que se ha utilizado
en el archivo. Si lo extrapolamos a las imágenes, el formato es el tipo de extensión que tendría (.jpg,
.bmp, etcétera) y el códec sería una compresión .rar o .zip. Para este tipo de archivos será necesario el
códec correspondiente si queremos reproducirlo para que pueda ser descodificado.

Los formatos de audio más conocidos son:

• OGG: sirve para audio y vídeo. Tiene como ventaja que es libre de patentes y está abierto, por lo que
tiene un alto grado de eficiencia en streaming y en comprensión de archivos. Los navegadores Firefox y
Chrome soportan .ogg.
• Real Audio: es el formato por excelencia del streaming. La gran mayoría de páginas usan este formato
para el streaming. La em- presa creadora es RealNetworks y el reproductor que han creado para
reproducir este formato es RealPlayer.
• Windows Media Audio (WMA): está desarrollado por Microsoft, y posee una alta calidad de sonido y un
tamaño reducido. Ade- más, se pueden incluir derechos de autor. También puede ser un formato
adecuado para la reproducción en streaming. Microsoft ha desarrollado un reproductor, Windows Media
Player, capaz de reproducir este formato y el navegador IExplorer también es ca- paz de reproducirlo,
pero no se puede asegurar en el resto.
• WAV o WAVE: se usa sin compresión de datos. Los propietarios son Microsoft e IBM. Es conocido, pero
se usa poco debido al gran espacio que ocupa.
• VQF: este formato ha sido desarrollado por Yamaha y es mejor que el MP3, pues tiene mejor calidad de
sonido y menor tamaño. El reproductor que podemos asignar a este formato es el Yamaha SoundVQ.
Tiene el inconveniente de que no es un formato demasiado extendido entre los usuarios y, además, re-
quiere muchos recursos.

Conversión de formatos
A la hora de utilizar un formato de audio en nuestra web, debemos tener en cuenta el tipo de formato
que tendrá para comprobar qué navegadores van a ser capaces de soportarlo. En la siguiente tabla se
muestra una relación de los navegadores y los tipos de forma- tos que soportan:
 Formato IE 9 Firefox 7 Opera 11.5 Chrome 14.0 Safari 5.0

OGG No Sí Sí Sí No

MP3 Sí No No Sí Sí

WAV No Sí Sí Sí Sí

En HTML5 podremos añadir formatos de audio según el formato que soporte cada navegador. Así,
referenciamos a todos ellos y cada navegador usará el que pueda reproducir.

Para poder tener audios en distintos formatos, tendremos que usar conversores. Algunas herramientas
gratuitas para convertir- los son:

• Free Studio: esta herramienta es capaz de convertir vídeo, audio e imagen. Tiene un fácil manejo y es
adecuada para los diseñadores que trabajan con audio en la web. Tiene solo versión para Windows.
• Audacity: esta es una herramienta más avanzada para grabar y editar. Tiene como ventaja que es libre
y de código abierto. Presenta muchas funcionalidades, además de poder convertir los archivos.
Podremos crear nuestros propios sonidos. Posee una versión para Linux y Windows.

Existen también muchas páginas web que son capaces de convertir archivos de audio en distintos
formatos. Un ejemplo puede ser Switchr, pero existen muchas más.

Cómo insertar un audio en una web

Ya hemos visto cuáles son los distintos formatos disponibles, los navegadores que son capaces de
usarlos y la forma de convertir un formato a otro. Ahora veremos cómo puede insertarse un audio en
nuestra web.

1. Audio de fondo (HTML4): no es muy recomendable usar un sonido de fondo usando etiquetas
HTML, pero existen dos formas para hacerlo:
– <bgsound>: esta etiqueta solo funciona con IExplorer. Un ejemplo de ella sería:
<bgsound src=”audio/Musica.wma” loop=”5”volumen=”10” />

Los distintos atributos son: src, indica la ruta del audio; loop, inicia el audio el número de veces
que indiquemos una vez que se termina; delay, retrasa el inicio del audio en segundos;
volumen, intensidad del sonido, valores entre -10.000 (más débil) y 0 (más alto).
– <embed>: con esta etiqueta podremos insertar plugins de audio y vídeo, aunque no está
estandarizada, por lo que los navega- dores reaccionarán de forma distinta ante ella. Un ejemplo
sería:

<embed src=”audio/Musica.mp3” height=”0” type=”au-

dio/mpeg” loop=”false” controller=”false” >

Los atributos serán: src, indica la ruta del archivo; con los atri- butos autostart o loop indicamos si
el archivo se reproduce automáticamente o en bucle, respectivamente, ambos con valores true o
false; los atributos width o height indican el ta- maño de la controladora de sonido, si no se
especifica un valor, se abrirá con un tamaño adecuado; controller, indica si aparece la consola de
controlador del reproductor; type, indica el tipo de fichero que usamos para poder ejecutar el plugin
adecuado.
2. Descargar audio por el usuario (HTML4): es recomendable dar al usuario la opción de poder
descargar el audio para que lo pueda escuchar de forma local. Para ello, usaremos una etiqueta <a> con
el atributo href de la siguiente forma:

<a href=”audio/Musica.wma”>Descargar Música<a>

Según el navegador que usemos, se descargará el archivo o se ejecutará el plugin para reproducirlo.
3. Insertar sonido (HTML5): antes de HTML5, la inclusión de so- nido en las páginas web tenía
muchos inconvenientes. Con este nuevo lenguaje, se ofrece una alternativa más sencilla y eficaz. Aun
así, cada navegador implementará lo que quiera, por lo que resulta difícil conseguir una solución total.
Para poder insertar audio con HTML5, lo haremos con la etiqueta <audio> y deberemos comprobar
que los navegadores también tengan implementado HTML5, ya que la nueva etiqueta no existe para
lenguajes anteriores.
Los atributos de esta etiqueta serán casi idénticos a los de la etiqueta <embed>:
– Autoplay: se inicia automáticamente.
– Controls: controles de reproducción visibles.
– Loop: el audio se repetirá automáticamente cuando termine.
– Preload: indica si se cargará el archivo con la página (auto, se carga al cargar la página;
meta, solo carga metadatos; y none no hay precarga).
– Src: URL del archivo.

Hay que destacar que el uso de HTML5 nos permitirá usar navega- dores en dispositivos móviles como
iPhone o basados en Android.

Podemos usar una mejora para la etiqueta <audio> a través de la etiqueta <source>. Esta etiqueta la
incluiremos dentro de <audio> y crearemos una por cada tipo de archivo que queramos incluir.

Así, por ejemplo, los formatos MP3 se leerán bien en IExplorer, Google Chrome y Safari, mientras que
para Firefox usaremos tipos OGG. El navegador irá leyendo el archivo y, cuando encuentre una
etiqueta source que contenga un tipo de archivo que pueda leer, se quedará con ese archivo; si no
consigue leer la primera línea, pasará a la siguiente, y así hasta que consiga un archivo leíble.

Un ejemplo podría ser el siguiente:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<audio controls=”controls” preload=”auto”>
<source src=”Prueba.mp3” type=”audio/mpeg” />
<source src=”Prueba.ogg” type=”audio/ogg” /> Elnavegador no soporta
el audio
</audio>
</body>
</html>

El resultado sería este:

La interoperabilidad es una de las ventajas de la etiqueta <audio>, aunque también deberemos buscar
soluciones para los casos en los que no sea capaz de leer el contenido.
 Una solución posible es el uso de la etiqueta <object> dentro de <embed>, en la cual podremos insertar
un reproductor Flash para aquellos navegadores que no sean capaces de soportar el código anterior.

También podremos aplicar un estilo CSS a las etiquetas <audio>.

Como conclusión, cabe destacar que el uso de HTML5 facilita la inserción de audio en la web, ya que
no va a requerir el uso de plugins en los navegadores para la reproducción de archivos de audio,
facilitando así las funciones del desarrollador.

El uso de HTML5 en los nuevos dispositivos móviles propiciará que en poco tiempo todos los usuarios
tengan navegadores con HTML5 y que no sea necesario buscar otras alternativas de inserción y
reproducción.

Para personalizar el reproductor, podemos usar Javascript y HTML5.

Consideraciones para el uso de audio en un sitio web

Ya hemos visto cómo insertar audio en la web de diferentes formas para que nuestra web sea más
funcional. Para hacerlo, conviene tener en cuenta algunas consideraciones sobre su uso:

• El audio se usa como contenido de dicha web.

• Se usará como elemento decorativo (música de fondo).
En el primer caso, el uso del audio se hace imprescindible para dicha página. Respecto al uso de música
de fondo, cabe destacar que es una técnica en desuso. Sin embargo, en el caso de que decidamos
incluir música de fondo, deberemos mostrar también botones de reproducción para poder iniciar y parar
la música cuando el usuario así lo desee.

Los archivos de audio solo deben utilizarse cuando sea imprescindible, ya que ocupan mucho tamaño, y
optimizando su reproducción.

3.6.2. VíDEO. INSERTAR VíDEO EN UNA WEB

Formatos
Todo lo que hemos visto en el apartado anterior referente a los for- matos de audio podemos
extrapolarlo a los formatos de vídeo. El vídeo tiene, por un lado, el formato de los archivos y los códec
con los que se comprimen y descomprimen, y, además, puede haber varios para un mismo formato. El
uso de la compresión en los ví- deos tiene más sentido que en los audios debido al gran tamaño que
tendrían de no estar comprimidos.

A continuación, se enumera la relación de los tipos de formatos de vídeo que se pueden usar y sus
respectivos códecs:

• .mp4: contiene vídeo en formato MPEG-4, con los códec DivX, Xvid, QuickTime y H.264.
• .swf, .flv y .f4v: versiones de Adobe para Flash vídeo desde 2002 hasta ahora. Códecs: Sorenson
Spark, VP6 y H.264. El formato .f4v solo es capaz de soportar H.264.
• .ogg y .ogv: contenedor open source.
• .mkv: formato de vídeo en open source que puede contener casi cualquier formato de vídeo.
• .webm: tipo de vídeo desarrollado por Google, en código abierto y con códec de audio Vorbis.
• .avi: tipo de vídeo más extendido, es soportado por varios dispositivos, como smartphones,
tablets e incluso televisión.
• .mov: contenedor de QuickTime, propiedad de Apple. Casi idéntico a .mp4. Al ser
propiedad de Apple, tendrá menos soporte en otras plataformas.
Conversión de formatos

Al igual que sucede con el audio, podemos convertir los distintos formatos de vídeo mediante
 aplicaciones sencillas que ofrecen multitud de opciones. También tenemos el mismo problema con los
navegadores: no existe un formato estándar.

En la siguiente tabla se referencian los códecs de los principales navegadores:

Chrome 14.0
Códec Tipo IE 9 Firefox 7 Safari 5 Opera 11.5

Ogg Theora Libre No Sí Sí No Sí

H. 264 Propietario Sí No No Sí No
VP8 Libre No Sí Sí No Sí

En HTML5, los formatos que más se usan tendrán los siguientes códecs de audio y vídeo:

• MP4 = H.264 (vídeo) y ACC (audio).

• OGG y OGV = Theora (vídeo) y Vorbis (audio).
• WEBM = VP8 (vídeo) y Vorbis (audio).
Algunas herramientas gratuitas para la conversión pueden ser:

• Miro Video Converter: utilidad sencilla para convertir cualquier formato de vídeo, incluso OGV y WEBM.
• FreeStudio: es una potente herramienta que no solo trabaja en formatos de vídeo, sino que también
con audio e imagen. Solo tiene versión para Windows.
• AtubeCatcher: además de poder convertir archivos en muchos formatos, nos da la posibilidad de
descargar vídeos desde distin- tos sitios web, como YouTube, Google Videos o Vimeo.

Insertar vídeos en una web

Para insertar vídeos en nuestra web tenemos las mismas opciones que con el audio. En este caso, en
HTML5 disponemos de la etique- ta <video>, que tendrá los mismos atributos que tenía la etiqueta
<audio>, y podemos también ofrecer controles con Javascript.

La diferencia entre las dos etiquetas es que para el vídeo necesitaremos asignarle un tamaño, por lo
que tendrá los atributos height (alto) y width (ancho).

Un ejemplo sería:

<video poster= “imagen/fondo.png” src=”misvideos/re-

ceta.mp4” controls width=”460” height=”230”></video>

Como se ha estudiado, el vídeo también podrá tener un atributo llamado poster, gracias al cual un
vídeo usará una imagen como portada antes de comenzar la reproducción.
En este ejemplo hemos usado un archivo .mp4 y, por ello, algunos navegadores no serían capaces de
reproducirlo. Para solucionarlo, podemos usar, como hicimos anteriormente, la etiqueta <source>. Y
como pasaba con el audio, esta opción solo será posible para webs en HTML5 y, para ello, utilizaremos
la etiqueta <object>.

No será necesario que tengamos almacenado siempre el archivo de vídeo para insertarlo en la web, ya
que también podemos enlazar vídeos de distintas webs, como de YouTube. En estos casos, los ví- deos
disponen de un enlace para insertarlos en páginas web usando la mayoría de las veces la etiqueta
<iframe>. También se podrán usar estilos CSS en las etiquetas de vídeo.
 3.7. ANIMACIÓN DE IMÁGENES Y TEXTO
Según la definición de Wikipedia, una animación es “un proceso utilizado para dar la sensación de
movimiento a imágenes o dibujos. Los cuadros se pueden generar dibujando, pintando o fotografiando
los minúsculos cambios hechos repetidamente a un modelo de la realidad o a un modelo tridimensional
virtual”.

El uso principal de las animaciones es mostrar imágenes animadas en la web, como puede ser en la
creación de iconos y logotipos. Podemos utilizar varios formatos de archivo para el uso de animaciones,
por ejemplo, GIF o SVG como hemos visto anteriormente, pero también hay otros:

• SWF: formato de archivo de gráficos vectoriales. Fue creado por la empresa Macromedia (ahora
Adobe Systems). Suele emplearse mucho debido a su pequeño tamaño y la gran interactividad de los
usuarios. Contiene texto, audio, vídeo e imagen y, además, es capaz de reconocer gestos del ratón.

• MNG: es un formato que está libre de derechos y es una extensión del formato de imagen PNG.

Elementos de una animación

Toda animación tiene dos tipos de elementos que se complementan entre sí: los objetos gráficos y los
elementos propios de la animación.

• Objetos gráficos: representan cada uno de los fotogramas. Permanecerán inmóviles en cada uno
de ellos. Se encargan de las características.
• Elementos propios de la animación: representan cambios en los objetos a lo largo de los
fotogramas. Se encargan del diseño.

Herramientas de programación
Existen muchas herramientas para crear animaciones, pero en esta unidad nos centraremos en las dos que
más se utilizan actualmente:

1. HTML y Javascript
El HTML dinámico permite crear animaciones que interactúen con los usuarios al combinar HTML con
Javascript.

Un ejemplo es usar HTML con jQuery. JQuery es una biblioteca de Javascript de software libre y código
abierto que permite ahorrar tiempo y espacio al desarrollar nuestras animaciones, ya que podemos
simplificar la manera de interactuar con documentos HTML.
2. HTML5, CSS3 y Javascript
Como hemos visto anteriormente, las animaciones con Flash han perdido popularidad debido al
problema de implementación en varias plataformas, lo que ha originado la aparición e implementación
del lenguaje HTML5, el cual, unido a CSS3 y Javascript, es capaz de realizar animaciones tan potentes
como Flash. Además, permite emplearlas en multitud de plataformas, tanto en ordenadores como en
dispositivos móviles.
Lo que se pretende actualmente es que los desarrolladores no tengan que escribir todo el código,
pudiéndose ayudar de otras fuentes y, por eso, se proponen estas alternativas:
◦ Entornos gráficos: crean animaciones visualmente. Además de poder guardar las animaciones que se
han creado con HTML5, CSS3 y Javascript en formato SWF, podemos generar el código HTML5 de dicha
animación.

También Google y Adobe nos ofrecen herramientas gráficas para este fin:
◦ Adobe Edge: nos permite crear animaciones web y contenido interactivo con HTML5, CSS3 y Javascript.
Posee una interfaz con la que poder trabajar de forma intuitiva y con claridad. Nos permitirá importar
documentos HTML y CSS, y también soporta los formatos de imagen más conocidos. Otra venta- ja es
que posee gran cantidad de efectos. Está disponible en Windows y Mac y no es gratuita.
◦ Hype: es una herramienta casi idéntica para ordenadores con Mac OSX. No es gratuita.
◦ Sencha: crea animaciones en CSS3. Está disponible en varios sistemas operativos, pero no es gratuita.

Aplicaciones de conversión de archivos Flash

Debido a que muchas aplicaciones Flash no pueden verse representa- das en los navegadores actuales,
debemos hacer uso de aplicaciones que conviertan esos ficheros Flash en formato .fla o .swf a HTML5.
Algunas herramientas que podemos utilizar para ello son:

• Wallaby: programa de Adobe para convertir archivos .fla a HTML5.

• Swiffy: aplicación de Google completamente gratuita que nos permite convertir archivos .swf a HTML5.

Animación de imágenes
En la creación de animaciones con imágenes debemos saber cuán- do utilizar un tipo de animación u
otro y después saber cómo se realiza cada animación.

Flash permite realizar dos tipos de animaciones: fotograma a fotograma y por interpolación de
fotogramas.
En el caso de animaciones realizadas fotograma a fotograma, cada fotograma sufre un pequeño
cambio o variación con respecto al anterior. Para realizarlo, debemos crear un fotograma clave e ir
copiando el fotograma y aplicar los cambios que deseemos en el nuevo fotograma copiado. Este proceso
lo repetiremos hasta que tengamos la animación terminada.

En cambio, la interpolación de fotogramas está pensada para realizar animaciones sencillas. Solo
vamos a necesitar dos fotogramas clave distintos, uno que marque el inicio y otro el final, y estarán
separados por fotogramas intermedios. La interpolación se encarga de realizar todos los fotogramas
entre el inicio y el final. Existen dos tipos de interpolaciones:

• De forma: transforma un objeto en otro. Estas interpolaciones no pueden formar parte de un grupo.
• De movimiento: cambia un objeto de posición, tamaño o rotación. Se puede realizar tanto con objetos
agrupados como con símbolos.

Animación de texto
En la publicidad suelen usarse tipos de animaciones en las que el texto cambia de forma o de color, o va
sufriendo transformaciones. A la hora de crear una animación, un texto es otro objeto más.

En Flash tendremos dos motores de texto:

• Texto clásico: única versión de texto hasta la llegada de la nueva versión CS5 de Flash.
• Texto TLF: se incorpora en la nueva versión CS5, incluyendo me- joras respecto de la versión anterior.
Ambos motores tienen las siguientes características:

• Posición: valores X e Y que van a corresponder con el espacio desde la esquina superior izquierda del
objeto de texto hasta la esquina superior izquierda del escenario.
• Tamaño: valores de alto y ancho que tendrá la caja de texto me- dida en píxeles.
• Carácter: son valores como la fuente, estilo, tamaño, color, espaciado o interlineado.
• Párrafo: son valores como la alineación del párrafo, sangría de primera línea o márgenes.

Como hemos dicho, Flash tratará el texto creado como un objeto, por lo tanto, podremos realizar todo
tipo de animaciones con él. En cambio, si queremos animar cada letra por separado, deberemos crear
una capa para cada una de ellas.
 3.8. INTEGRACIÓN DE AUDIO Y VíDEO EN UNA ANIMACIÓN
3.8.1. INTEGRACIÓN DE AUDIO
Los formatos de audio más utilizados a la hora de crear animaciones en Flash son WAV y MP3.

Para integrar el sonido en cualquier escena, seguiremos estos pasos:

1. Si queremos añadir un archivo a la biblioteca del programa, podemos hacerlo de dos formas:
arrastrando el archivo a la biblioteca o seleccionándolo en el menú Archivo > Importar > Importar a la
biblioteca.
2. Después debemos crear una capa para ese archivo. Si tene- mos varios archivos, para cada archivo de
audio debemos crear una capa.
3. Tendremos que crear un fotograma clave en blanco para arras- trar el archivo de sonido a la escena en
ese fotograma.

Cabe recordar que los archivos de sonido se reproducen com- pletamente y la animación no terminará
hasta que no acabe de reproducirse. Si tenemos varios archivos, deberemos crear el si- guiente
fotograma clave cuando termine el sonido anterior para que no se superpongan.

En Flash tenemos varias opciones de sincronización de audio:

• Sincronismo de tipo Evento: el sonido se reproducirá de forma automática y hasta el final. Se pueden
producir solapa- mientos de sonidos.
• Sincronismo de tipo Inicio: es casi idéntico al anterior, solo que evita la duplicidad del sonido.
• Sincronismo de tipo Detener: impide que el sonido se reproduz- ca más allá del fotograma que
indiquemos.
• Sincronismo de tipo Flujo: el archivo de sonido se irá descargan- do de internet conforme se va
reproduciendo la animación.

3.8.2. INTEGRACIÓN DE VíDEO

Los formatos que Flash podrá integrar son FLV y F4V.

Como ocurre con los archivos de audio, para poder usar un archivo de vídeo tendremos que importarlo a
la biblioteca, ya sea arrastrándolo di- rectamente al panel o desde el menú Archivo > Importar > Importar
vídeo.

Si el vídeo está en una dirección remota, habrá que indicar la ruta correspondiente. Si se encuentra de
forma local, podremos hacerlo de dos formas: como un componente de reproducción o directa- mente
en la línea de tiempo.

El primero nos pedirá que elijamos entre una lista de formatos de reproductores. Después se creará un
componente Flash Vídeo en el escenario, que deberemos configurar para reproducirlo localmente. Una
vez terminado, nos aparecerá el nombre en la Biblioteca.

Si escogemos la segunda opción, nos dará tres alternativas para su inserción: vídeo incorporado, clip de
película y gráfico. En cualquier caso, una vez escogida, el nombre de esta opción aparecerá en nuestra
Biblioteca.

3.9. GUíA DE ESTILOS

El diseño gráfico de los portales abarca la tipografía, colores y espacios en blanco del sitio web. Los
manuales de estilo de sitios web se centran en los aspectos técnicos y visuales de la publicación, el texto
y el uso correcto de la lengua, gramática y ortografía, pero, sobre todo, en la estética. La aplicación de
las reglas de este manual proporciona uniformidad al aspecto visual de un documento.

La guía de estilo está dirigida al departamento de diseño y desarrollo de la programación de la interfaz

web. Recoge los aspectos relacionados con el diseño de la interfaz propia del sitio y sirve de guía a los
futuros empleados. También ayuda a tomar decisiones en cualquier fase de la creación y mantenimiento
del portal web.

En una guía de estilo podemos encontrar características relacionadas con las fotografías, logos,
imágenes, colores, combinaciones de colores, iconos, tipos de letra y aspectos relacionados con la
maquetación web.
4.-INTEGRACIÓN DE CONTENIDO INTERACTIVO
4.1. HERRAMIENTAS PARA LA INCLUSIÓN DE CONTENIDO
MULTIMEDIA INTERACTIVO
Uno de los aspectos por los que el lenguaje de marcas es el más utilizado para la creación de páginas
web es la facilidad de poder escribir el código en cualquier herramienta de procesador de texto.

En este apartado detallaremos los distintos editores de los que disponemos, desde los más básicos hasta
los más sofisticados, para implementar dicho código.
4.1.1. EDITORES SIMPLES
Cualquier sistema operativo instalado en un equipo informático dispone de unas herramientas básicas
para escribir un texto determinado. En el caso del sistema operativo Windows, suministra la herramienta
Bloc de Notas, así como la de NotePad para la creación de un fichero de texto con extensión .txt. Este
tipo de fichero es uno de los más básicos que podemos encontrar en un equipo informático, ya que no
necesita ninguna herramienta sofisticada para su manipulación y visualización.

Utilizaremos esta herramienta básica para escribir un código en HTML con la salvedad de guardarlo
con la extensión que lo identifica: .html.

De esta forma, podemos tener nuestras páginas web ya codificadas de forma sencilla, intuitiva y fácil.
4.1.2. EDITORES AVANZADOS
Debido al auge y la complejidad que ha experimentado el desarrollo de páginas web desde su
existencia, cada vez es más complicada la implementación del código en este lenguaje de marcas,
ya que en nuevas versiones aparecen nuevos comandos con sus atributos y valores para tratar nuevos
conceptos que el mercado obliga a insertar.

El código de una página web incorpora numerosas líneas de código, interacción con otros lenguajes,
incrustaciones de códigos, enlaces externos, etcétera. Por todas estas características, cada vez resulta
más complicada la identificación de las distintas marcas, y para el desarrollador es una tarea compleja.

Para solucionar estos inconvenientes o dificultades, surgen los editores de texto avanzados, que
presentan una interfaz amigable y sencilla de utilizar. Mediante distintos colores, podemos diferenciar
cada elemento de una parte del código en lenguaje HTML. De esta forma, se facilita la tarea al
desarrollador y a cualquier técnico que necesite visualizarlo.

Otra de las ventajas que ofrecen los editores avanzados es que, ante cualquier incidencia o error,
proporcionan una serie de opciones para su fácil identificación.

Entre los ejemplos más conocidos de editores avanzados destacamos NotePad++ y Sublime Text,
editores muy utilizados por la comunidad desarrolladora de código. Ambos son herramientas de código
libre.
4.1.3. GESTORES DE LENGUAJES HTML
Una vez que tenemos diseñado todo el código de HTML con cualquier editor de los mencionados, el
último paso es visualizar dicho código en cualquier navegador de internet.

¡RECUERDA!
Para crear cualquier página web, solo necesitamos un editor y un navegador web.

4.2. CONFIGURACIÓN DE NAVEGADORES

Los navegadores son herramientas destinadas a la visualización de las páginas web. A medida que los
portales web necesitan más lenguajes para su tratamiento, los navegadores deben estar configurados
para su visualización. Herramientas como Flash, la aplicación Java y otras deben estar instaladas para
mostrar las páginas webs.
 Cada navegador tiene una ruta y distintas opciones para su configuración.

4.3. ELEMENTOS INTERACTIVOS BÁSICOS Y AVANZADOS

El desarrollo web se caracteriza por los elementos multimedia que puede poseer para multitud de
funciones y, además, por la interacción de dichos elementos. La interacción se define como “el proceso
que establece un usuario con un dispositivo, sistema u objeto determinado. Es una acción recíproca
entre el elemento con el que se interacciona y el usuario”, según Wikipedia.

Al igual que ocurre en anteriores casos, el uso de Flash para crear interacciones está en desuso.
Actualmente, el desarrollo de estas interacciones suele hacerse con HTML5, CSS3 y Javascript.
En este apartado vamos a centrarnos en el uso de jQuery, con el cual deberemos usar HTML5 y CSS3.
Como hemos definido anteriormente, jQuery es una biblioteca de Javascript que permite realizar
multitud de acciones, además es libre y de código abierto.

Aunque en esta unidad nos centraremos en la interacción con el usuario, veremos algunos conceptos
básicos de este lenguaje para familiarizarnos con él.
4.3.1. INTRODUCCIÓN A JQUERY
Lo primero que deberemos hacer para usar jQuery es descargar la librería. Después lo podemos enlazar
en la página HTML de la siguiente manera:

<script type=”text/javascript” src=”jquery.js”></script>

Podremos descargar la librería de dos formas distintas: de forma comprimida, que será más cómoda
para el usuario, ya que ocupa menos espacio; y de forma descomprimida, que nos vendrá bien cuando
estemos trabajando en el desarrollo.

<head>

<script src=”jquery-3.4.1.min.js”></script>

</head>

Siempre que usemos jQuery, deberemos usar la siguiente instrucción:

$(document).ready(function() (…) );

Al estar trabajando mediante un lenguaje de marcas, debemos tener en cuenta el árbol DOM que se ha
generado. Esta instrucción indica que el código jQuery se ejecute cuando el código HTML se ha cargado
completamente. Debemos poner atención a las características de la conexión, ya que esta cláusula no
espera a que se cargue la imagen en el código HTML. El código jQuery trabaja con los elementos que
hay en la página referenciados a través del DOM. Si los objetos no se han cargado, no se debe poder
ejecutar ningún código jQuery, ya que daría un error.

En jQuery, la función que más utilizaremos será $(), que vendría a ser similar a
getElementsByTagName(), getElementsByName() y getElementById() usadas en Javascript.

Se usará para las siguientes funciones:

1. Seleccionar ID: $(“#miID”);

2. Seleccionar todos los elementos <a> de un HTML: $(“a”);
3. Podemos seleccionar varios elementos, separándolos por una coma: $(“#miLinea, a”);
4. Selección mediante el nombre de la clase CSS: $(“.miCSS”)
5. Seleccionar elementos con ciertos atributos: $(“a[type]”);
6. Usar la misma selección anterior, pero definiendo algún valor al atributo: $(“input[@type-radio]”);
7. También podemos seleccionar elementos con el lenguaje XPath. Por ejemplo, seleccionamos todos
los párrafos de un camino: $(“/html/body//p”);
4.3.2. MANEJO DE EVENTOS
En jQuery tendremos multitud de eventos con los que poder interactuar. Ya hemos visto el uso del
evento ready(). Estos eventos facilitan la programación.

Podemos usar un evento de dos formas:

• Pasándole una función que nos especifique como se comporta- rá. Ejemplo: $(“p”).click(function()
{ alert($(this).text() );});
• Sin pasarle una función, por lo que generará un evento están- dar de Javascript. No tendremos
que usar el prefijo on. Ejemplo: $(“p”).click();
Algunos eventos importantes en jQuery pueden ser:

• On() y Off()
On() y Off() aparecen en la versión 1.7 de jQuery sustituyendo a los métodos bind() y unbind().

Con On() los eventos buscan asociarse al conjunto de elementos seleccionados. La novedad respecto de
bind() es que puede asociarse más de un evento separándolos con espacios.

La sintaxis de On() sería:

$(elements).on(events [, selector] [, data], manejador);

También tenemos el evento Off(). La sintaxis es:

$(elements).off( [ events ] [, selector] [, manejador] );

Si lo utilizamos sin ningún parámetro, eliminará todos los eventos asociados a dicho elemento. De lo
contrario, eliminará uno o varios eventos asociados a un elemento:

$(“p”).off();

Al usar Off() también podemos indicarle que solo elimine ciertas funciones. Para realizar esto deberemos
crear una variable con dicha función y pasarla como parámetro a Off().

• Toggle()
Este método se usa bastante en jQuery. Su funcionamiento con- siste en realizar dos acciones: la
primera se ejecuta cada vez que hacemos un clic sobre el elemento o todas las veces impares, y la
segunda función se realiza al pulsar por segunda vez o todas las veces pares. Cuando lo usemos,
deberemos pasar ambas funciones a través de variables.

Un ejemplo quedaría así:

$(“p”).toggle(variable1, variable2);

4.4. EJECUCIÓN DE SECUENCIAS

Las sentencias Javascript se ejecutan línea por línea. Sin embargo, cuando trabajamos con efectos, la
siguiente línea de código se puede ejecutar aunque el efecto no haya finalizado. Esto puede crear
errores.

Para evitar esto, puede crear la función callback.

Una función callback se ejecuta después de que el efecto haya ter- minado de ejecutarse. Sintaxis:
$(selector). hide(speed, callback);
Un ejemplo utilizando callback:

$(“button”).click(function(){

$(“p”).hide(“slow”, function(){ alert(“The para-graph is now hidden”);

});

});

Y sin utilizar callback:

$(“button”).click(function(){

$(“p”).hide(1000);

alert(“The paragraph is now hidden”);

});

4.5. COMPORTAMIENTOS INTERACTIVOS. COMPORTAMIENTOS DE LOS

ELEMENTOS
4.5.1. COMPORTAMIENTOS DE LOS ELEMENTOS
Ya que hemos visto algunos de los eventos más básicos para trabajar con jQuery, nos centraremos
ahora en algunos eventos que serán capaces de transformar los elementos para realizar efectos visuales
y conseguir así animaciones.

A los eventos que vamos a ver a continuación podremos añadirles el evento toggle() que hemos visto
anteriormente para así realizar distintas acciones según el número de clic que hagamos.

Efectos básicos
En este apartado vamos a ver distintos métodos que podemos usar para realizar efectos visuales de
forma básica. Los más ex- tendidos son:

• .show ([duración] [,easing] [,callback])

Este método nos mostrará el elemento que estaba oculto. Los pa- rámetros que podrá tener son:
– Duración: podrá ser slow o fast, o un número en milisegundos para indicar el tiempo que se
ejecutará.
– Easing: función que usaremos para el tipo de transición. Nece- sitaremos un plugin para realizar
más funciones de transición.
– Callback: función que se inicia una vez finalizada la animación.
Todos estos parámetros son opcionales. Este sería un ejemplo para mostrar párrafo de forma rápida:
$(“p”).show(“fast”);

• .hide ([duración] [,easing] [callback])

Este método es similar al anterior, solo que realiza la acción opues- ta. En vez de mostrar los elementos,
los ocultará. Tendrá los mismos parámetros que .show().
 Efectos fading (opacidad-transparencia de los elementos)
Llamaremos fading al efecto de desvanecimiento de los elemen- tos. Para conseguirlo, se juega con la
opacidad y la transparencia. Dispondrá de las siguientes sintaxis:

• .fadeIn ([duración] [,easing] [,callback])

• .fadeOut ([duración] [,easing] [,callback])
• .fadeToggle ([duración] [,easing] [,callback])
Los parámetros de estos métodos son los mismos que los vistos en el apartado anterior:

• fadeIn(): mostrará el elemento con una opacidad gradual (hasta llegar a 1).
• fadeOut(): ocultará un elemento con opacidad gradual (hasta llegar a 0).
• fadeToggle(): al igual que el evento toggle(), este evento alternará entre aparecer y
desvanecer el elemento según hagamos clic sobre él.

Por último, hay otro método llamado fadeTo(), que tendrá la si- guiente sintaxis: fadeTo (duración,
opacidad, [,easing] [,callback]).

La función de este evento es determinar la opacidad del elemen- to según el valor que le pasemos, que
tendrá que ser entre 0 y 1. Además, lo hará durante el tiempo que le indiquemos, ya sea en
milisegundos, slow o fast.

Efectos sliding (desplazamiento)

Otro de los efectos que tendrán los elementos será el llamado sliding, que tendrá como función
desplazar los elementos, permi- tiéndonos así realizar efectos de plegado o despliegue. Tendrá la
siguiente sintaxis:

• .slideUp ([duración] [,easing] [,callback])

• .slideDown ([duración] [,easing] [,callback])
• .slideToggle ([duración] [,easing] [,callback])

Todos estos parámetros serán opcionales e iguales a los vistos en apartados anteriores. El significado de
cada método es:

• slideUp(): recogerá los elementos en altura de forma gradual.

• slideDown(): desplegará los elementos en altura de forma gradual.
• slideToggle(): al igual que el evento toggle(), este evento alternará el proceso de plegar y desple- gar
el elemento según los clics realizados sobre él.

Otros efectos
Además de los efectos vistos anteriormente, tendremos algunos que nos harán aumentar las
prestaciones de nuestras animaciones, como pueden ser:

.animate (propiedades, [duración], [,easing], [,callback])

La función de este método será animar el elemento según lo que pongamos en Propiedades. El resto de
los parámetros son los mismos que los vistos anteriormente.

Hay que resaltar que este método será más simple que el método .css(), pues en animate() tendre- mos
que pasar valores numéricos en el parámetro Propiedades, ya que no podremos animar con propiedades
que no sean valores numéricos, siendo el caso, por ejemplo, de background.

.delay(duración [,NombreCola])
Este método retrasará la animación de los elementos en una estructura cola según la duración que le
indiquemos. La descripción de sus parámetros será:

• Duración: será medida en milisegundos y le indicaremos el tiempo que se retrasará la animación antes
de comenzar la siguiente.
• NombreCola: se referirá a una cadena que contendrá los elementos que se retrasarán. Otro elemento

interesante será stop(), que parará la animación si está en proceso.

4.5.2. COMPORTAMIENTOS INTERACTIVOS

Ya hemos vistos los distintos efectos que podemos hacer con jQuery. Ahora veremos los eventos que
tendremos disponibles para realizar con el ratón y con el teclado y los que están asociados a las
ventanas.

Eventos de ratón
Estos eventos se realizarán cuando se utilice el puntero del ratón sobre un elemento. Tendrán siempre
una estructura básica, que será:

Elemento.Evento (función (handler));

Esta estructura significa que, sobre ese elemento, se realizará el evento seleccionado y ejecutará la
función que le pasemos a dicho evento.
A continuación, vamos a describir distintos eventos que esta- rán disponibles:

• .click(). Se realizará este evento cuando el usuario se coloque so- bre un elemento y presione
clic izquierdo con el ratón y lo levante, todo ello en el mismo objeto. Todos los elementos HTML pueden
recibir este evento.
• .dblclick(). Se lanzará después de realizar doble clic.
• .focusin(). Cuando un objeto recibe el foco. Por ejemplo, cuando seleccionamos una caja de
texto para escribir sobre ella.
• .focusout(). Es contrario al anterior, se lanzará cuando pierde el foco.
• .mousedown(). Será similar a click(), solo que se lanzará cuando hagamos clic sobre el objeto, no
hará falta que lo levantemos para que se ejecute.
• .mouseup(). Se lanzará después de levantar el botón del ratón.
• .mouseenter(). Se lanzará cuando el puntero entra en el objeto, no hace falta que hagamos
clic sobre él.
• .mouseleave(). Es el opuesto al anterior, se lanzará cuando sale el puntero del objeto.
• .mousemove(). Se ejecutará siempre que se mueva el puntero dentro del objeto.
• .mouseover(). Será parecido a mouseenter(), pero se diferencia en que se ejecutará cuando
hay elementos anidados.
• .mouseout(). Opuesto a mouseover(). Parecido a mouseleave()
pero con diferencia de objetos anidados de mouseover().

Eventos de teclado
El usuario usará las teclas del teclado para hacer que se ejecuten estos eventos. Tendrán como estructura
básica:

Elemento.Evento (función (handler));

Al igual que la anterior estructura de ratón, esta significa que, sobre ese elemento, se realizará el evento
seleccionado y ejecutará la función que le pasemos a dicho evento.
Los elementos disponibles serán:

• .focusin(). Cuando un objeto recibe el foco. Por ejemplo, cuando seleccionamos una caja de texto
para escribir sobre ella.

• .focusout(). Es contrario al anterior, se lanzará cuando pierde el foco.

• .keydown(). Se lanzará cuando se presiona una tecla y el elemento posee el foco. Si queremos
saber qué tecla se ha presionado, se examina el objeto event que le pasamos a la función. Con la
propiedad .which de event recuperaremos el código de la tecla que se presiona. Si lo que queremos es
recuperar el texto que se introduce, usaremos .keypress().

• .keyup(). Se ejecutará cuando se deja de presionar una tecla y el elemento posee el foco.

• .keypress(). Se ejecutará cuando presionemos una tecla, pero a diferencia de .keydown(), este
evento registrará cada carácter que introduzcamos, mientras que el anterior solo lo hará una sola vez
aunque lo dejemos presionado.

Eventos de ventana
En los eventos de ventana tendremos dos principales, que serán
.scroll() y .resize(). La estructura de cada uno de ellos será similar a las anteriores.

Vamos a ver una pequeña descripción de cada uno de ellos:

• .scroll(): propiedad para que se pueda visualizar la barra de desplazamiento en la aplicación.

• .resize(): se ejecutará cuando a una ventana le cambiamos el tamaño.

 5.-DESARROLLO DE WEBS ACCESIBLES
Cuando hablamos de accesibilidad web nos referimos a un acceso universal a la web, es decir, que todo el
mundo pueda tener acceso a la web independientemente del contexto que utilice, el idioma, la cultura, el
lugar geográfico, etcétera.

Este concepto de accesibilidad dio lugar a la Iniciativa de Acce- sibilidad Web (WAI, Web Accesibility
Iniciative), cuyo objetivo principal era poder facilitar el acceso a aquellos usuarios que presentaran
algún tipo de discapacidad. De esta forma, se abre un nuevo campo en el que se apuesta por desarrollar
una labor educativa y concienciar sobre el diseño de sitios web accesibles.

De esta forma, una página web podrá ser utilizada para cualquier tipo de persona que la solicite, tenga
algún tipo de discapacidad o no.

Mediante la utilización de la web se puede ofrecer a aquellas personas que presenten alguna discapacidad
una nueva oportunidad de tener acceso a la información. Las webs accesibles representan uno de los
recursos más importantes para determinados aspectos de la vida, como el empleo, la educación, la
sanidad o el comercio.

También ayudan a que todos los usuarios que deseen interactuar con ellas participen más en la sociedad.

5.1. CONSORCIO WORLD WIDE WEB (W3C)

El Consorcio World Wide Web (W3C) es una asociación internacional compuesta por un conjunto de
organizaciones que apuestan por trabajar de forma conjunta para conseguir desarrollar una serie de
estándares y normas que debe tener una web.

La función principal del W3C es “guiar a la web hacia su máximo potencial a través del desarrollo de
protocolos y pautas que aseguren el crecimiento futuro de la web”.

W3C puede actuar de diferentes formas:

• Mediante el trabajo, potencia la web para todos los usuarios. Su objetivo principal es conseguir que
todos los usuarios puedan ac- ceder a todas las posibilidades planteadas.
• Facilita el acceso a la web desde cualquier tipo de dispositivo, independientemente de la forma de
interactuar usada (formularios, gestos, voz, etcétera).
• Ayuda y apuesta por una buena calidad en los contenidos que presente la web.
• Colabora con la evolución que vaya adquiriendo la web, aumentando sus posibilidades en tres
dimensiones diferentes: la de colaboración (web 2.0), la semántica (web 3.0) y la universal (web 4.0).
• Añade nuevos mecanismos que garanticen seguridad, privacidad, protección y cifrado de la información
disponible en la web.

5.2. PRINCIPIOS GENERALES DE DISEÑO ACCESIBLE

Para conseguir que los sitios web puedan llegar al mayor nú- mero de usuarios, debemos conseguir que
sean accesibles para todos, independientemente de cuál sea el tipo de usuario que acceda a ellos.

El consorcio W3C ha estado trabajando durante mucho tiempo para identificar y fijar una serie de
principios de diseño que debemos tener en cuenta.

En 1999, las guías de accesibilidad del contenido web WCAG 1.0 (Web Content Accessibility Guidelines)
indicaron catorce principios para el diseño accesible:

1. Suministra una serie de alternativas para los contenidos, tanto visuales como auditivos.
2. No es conveniente centrarse tanto en el color, ya que existen dispositivos que no los pueden visualizar,
bien sea por las características o por las condiciones que presente la máquina del usuario.
3. Es conveniente hacer uso de marcadores y hojas de estilo de forma adecuada.
4. Reconocer el lenguaje natural que se utilice. Si no lo reconocemos, es posible que se produzcan
diferentes errores en las abreviaciones que no se podrán traducir por los dispositivos Braille o lectores
de pantalla.
5. A la hora de crear tablas, nos debemos asegurar de que son fáciles de trasformar a través de las
diferentes aplicaciones y de los navegadores accesibles.
6. Comprobar que las páginas que hagan uso de las nuevas tecnologías se puedan transformar
correctamente.
7. Comprobar que todos los objetos que se encuentran en movimiento están controlados.
8. Garantizar la accesibilidad directa de las diferentes interfaces que se utilicen.
9. A la hora de realizar el diseño, debemos tener en cuenta todos los dispositivos (ratón, teclado, voz,
etcétera).
10. Tener disponibilidad de las soluciones provisionales.
11. Hacer uso de tecnologías y pautas W3C.
12. Ayudar a los diferentes usuarios a entender las páginas mediante orientación e información de
contexto.
13. Ayudar a los diferentes usuarios a encontrar la información que buscan a través de la utilización de
mecanismos claros y consistentes.
14. Mediante el uso de documentos claros y sencillos, garantizar la comprensión de los usuarios.
En 2009, WCAG 2.0, la versión 2.0 de las guías de accesibilidad del contenido web, reduce los catorce

principios anteriores en cuatro, que los podemos resumir en:

1. Sitios web sencillos de concebir para que los usuarios puedan navegar sin problema.
2. Sitios web sencillos para operar de forma sencilla.
3. Es fundamental que los sitios web sean sencillos de comprender para todos los usuarios.
4. Sitios web fuertes para poder trabajar con diferentes agentes de usuarios y tecnologías necesarias para
aquellas personas que presenten alguna discapacidad.

5.3. PAUTAS DE ACCESIBILIDAD AL CONTENIDO EN LA WEB

(WCAG)
Las pautas de accesibilidad al contenido en la web 2.0 siguen los cuatro principios comentados
anteriormente, pues engloban todas las propiedades que garantizan un contenido web accesible.

Al seguir estas pautas, conseguiremos que el contenido sea accesible para más usuarios con
discapacidad, tales como ceguera o visión insuficiente, pérdida de audición y sordera, deficiencias del
lenguaje, etcétera.

Por todas estas razones, siempre es conveniente que el diseñador conozca los principios y los ponga en
práctica con el fin de que los sitios web lleguen a muchos más usuarios.
Principios de diseño
Pautas de accesibilidad 2.0
accesible

• Presenta diferentes opciones para contenido no textual para adaptarse a las

diferentes necesidades de las personas.
• Dispone de diferentes alternativas para los contenidos multimedia que dependen
del tiempo.
Perceptibilidad
• Permite la creación de contenido para presentarlo de diferentes formas sin que
pierda la estructura y la información.
• Facilita a los usuarios que interactúen en el sitio web ver y oír el contenido que
contiene.

• Mediante el teclado, puede acceder a las funcionalidades.

• Ofrece a los usuarios que presentan alguna discapacidad el tiempo suficiente de
poder leer el contenido y utilizarlo.
Operatividad • No es conveniente realizar un diseño que pueda provocar algún ataque.
• Ofrece una serie de medios que van a servir de ayuda a los usuarios que tengan
alguna discapacidad a la hora de navegar, buscar contenido y visualizar dónde
está ubicado.

• Es necesario un contenido textual legible y comprensible.

Comprensibilidad • Páginas web intuitivas según su apariencia.
• Ofrece ayuda a los usuarios para evitar y corregir errores.

• Aumenta la compatibilidad con los agentes de usuarios actuales con los que se
Robustez
incorporen después.

5.4. TÉCNICAS PARA SATISFACER LOS REQUISITOS DEFINIDOS EN LAS

WCAG
Para establecer las diferentes pautas de accesibilidad al contenido web 2.0, se ha diseñado un
documento que cubra las necesidades de todos aquellos que necesiten un estándar técnico estable que
garantice la accesibilidad a un sitio web.

De todas formas, existen otros documentos basados en las pautas 2.0 que, además, cumplen una serie
de requisitos adicionales que asisten a:

• El cumplimiento de las pautas 2.0: listado de todas las pautas, criterios de éxito y diferentes técnicas
que se pueden utilizar en el desarrollo del contenido web.
• La puesta en práctica de las pautas 2.0: documento que contiene la comprensión de las diferentes
pautas junto con sus correspondientes criterios de éxito.
• Las técnicas para satisfacer las pautas 2.0: conjunto de las diferentes técnicas conocidas y de los
errores junto con una descripción de estos.
• La comprensión de las propias pautas 2.0: diagrama en el que identificamos la relación existente
entre los diferentes documentos técnicos.
Es importante destacar que los documentos definidos van a ofrecer una serie de criterios de éxito que
podremos utilizar en algunas ocasiones, como, por ejemplo, para especificar un diseño, una compra, el
cumplimiento de una regulación, etcétera. Para poder cumplir con estos requisitos, contamos con tres
tipos de niveles, desde el A, el más bajo, hasta el AA y el AAA, el más alto.
En la siguiente tabla podemos observar las diferentes pautas que existen asociadas a cada criterio y al
nivel de adecuación.

Pauta Criterios para tener en cuenta (nivel de

adecuación)
En un sitio web podemos encontrar diferentes formas de presentar la
in- formación y ofrecer mecanismos para interactuar. Sin embargo,
se debe tener en cuenta que, si queremos lograr que el sitio web sea
Alternativas textuales
accesible, todo contenido no textual que se presente debe contar
con una alterna- tiva textual que logre un propósito equivalente,
excepto determinados supuestos (consultar el documento WCAG 2.0
(A)).
En un sitio web puedes incluir audio y vídeo, pero ese tipo de
contenido puede dar lugar a problemas de accesibilidad para
determinados colectivos, y esos problemas podrán responder a
distintos tipos de niveles de adecuación:

• Solo audio o solo vídeo (pregrabado) (A).

• Subtítulos (pregrabados) (A).
Contenido multimedia • Audiodescripción o alternativa multimedia (pregrabada) (A).
dependiente del tiempo • Subtítulos (directo) (AA).
• Audiodescripción (pregrabada) (AA).
• Lengua de signos (pregrabada) (AA).
• Audiodescripción extendida (pregrabada) (AAA).
• Alternativa multimedia (pregrabada) (AAA).
• Solo audio (directo) (AAA).

• Información y relaciones (A).

• Secuencia significativa (A).
Adaptabilidad
• Características sensoriales (A).

• Empleo del color (A).

• Empleo del audio (A).
• Contraste (mínimo) (AA).
• Variar el tamaño del texto (AA).
Distinguible • Imágenes de texto (AA).
• Contraste (mejorado) (AAA).
• Fondo de audio bajo o inexistente (AAA).
• Presentación visual (AAA).
• Imágenes de texto (sin excepción) (AAA).

5.5. MÉTODOS PARA REALIZAR REVISIONES PRELIMINARES Y

EVALUACIONES DE ADECUACIÓN O CONFORMIDAD DE DOCUMENTOS WEB
El diseñador, siguiendo las diferentes pautas recomendadas, va a poder diferenciar entre dos tipos de
actividades diferentes:

• Dirigir el proceso de desarrollo de los diferentes sitios web, es decir, asegurarse de que un
determinado sitio web cumple los criterios de accesibilidad recomendados.
• Comprobar los diseños web en función de los criterios de accesibilidad utilizados.

A continuación, se detallarán una serie de herramientas que permiten evaluar de forma sencilla un sitio
web y comprobar que cumple los requisitos para que sea un sitio web accesible.

1. Seleccionamos una pequeña muestra de diferentes páginas.

2. Mediante navegadores gráficos, evaluamos las páginas con sus correspondientes configuraciones.
3. Utilizamos navegador de voz o de texto para que todas las personas puedan tenar acceso al sitio
web.
4. Utilizamos herramientas de evaluación de accesibilidad.
5. Por último, es recomendable que hagamos un resumen de los resultados obtenidos.

5.6. HERRAMIENTAS DE ANÁLISIS DE ACCESIBILIDAD WEB

Si bien es cierto que disponemos de numerosas herramientas que nos permiten saber, de forma
automática, si existen problemas de accesibilidad, hoy en día todavía no existe ninguna que nos indique
si un sitio es accesible al 100%. Por este motivo, esta tarea no se puede realizar de forma automática.

Aunque existen muchas herramientas que pretenden automatizar este proceso de evaluación de la
accesibilidad, siempre suelen dar algún tipo de error (falsos positivos) que debe ser resuelto de forma
manual por parte del usuario.

Por tanto, es recomendable añadir análisis con evaluaciones manuales a estas herramientas de análisis y
evaluación automáticas. De esta forma, podremos tratar los falsos positivos que se produzcan.

5.7. REVISIÓN DE LA ACCESIBILIDAD WEB DESDE DIFERENTES

NAVEGADORES
La mayoría de los navegadores permiten facilitar el proceso de evaluación de la accesibilidad de una
web de forma manual mediante una serie de extensiones que permiten, entre otras cosas, modificar la
resolución de forma rápida, comprobar los colores de un sitio web, etcétera. Algunas de estas ex-
tensiones, pueden ser:

• Web Developer: es una barra de herramientas que se utiliza para Mozilla Firefox con las
diferentes opciones que pueden utilizar los desarrolladores web.
• Firefox Accessibility Extension: extensión para la barra de herramientas utilizada en Mozilla
Fire- fox con las diferentes opciones que facilitan la navegación por los diferentes contenidos de aquellos
usuarios con alguna discapacidad.
• Web Accessibility Toolbar: plugin utilizado en Internet Explorer que permite una evaluación
ma- nual sencilla de la accesibilidad de un sitio web.
• Firebug: extensión que permite que los desarrolladores puedan realizar modificaciones sobre el
código fuente HTML, CSS, Javascript, etcétera.
• Fangs: extensión que permite mostrar el contenido de una determinada página como si fuera
un lector de pantalla.
• HTML Validator Tidy: extensión para Mozilla que permite agregar un validador de HTML en el
interior de Firefox.
 6.-DESARROLLO DE WEBS AMIGABLES. USABILIDAD
6.1. ANÁLISIS DE LA USABILIDAD. TÉCNICAS
A la hora de diseñar un sitio web es fundamental no olvidar que debe ser atractivo para los usuarios que
lo van a utilizar y, por ello, debemos seleccionar un tipo de formato que cumpla con las expectativas de
los usuarios, tanto a nivel de navegación y contenido como de organización.

Antes de poner en marcha un sitio web, es necesario realizar una prueba de usabilidad. Es conveniente
que esta prueba de usabilidad se realice a un grupo de usuarios distintos, añadiendo también a usuarios
que presenten algún tipo de discapacidad para que, de esta forma, nos aseguremos de que el sitio es
accesible para todos los tipos de usuarios.

6.2. ESTÁNDARES
A través de la web, permitimos que las personas se puedan comunicar entre sí mediante el intercambio
de información inde- pendientemente de su edad, sexo, ideología, etcétera.
Con el paso de los años, la web se ha convertido en una manera muy ventajosa de que las diferentes
empresas hagan publicidad y, a su vez, obtengan información, ya que:

• Cada vez existen más personas que consultan la web para leer la prensa, con lo que evitan tener que
salir a comprar el periódico.
• Podemos utilizar el ordenador para ver diferentes series en cualquier franja horaria.
Estos son solo algunos motivos por los que las interfaces web se utilizan más cada día. Así, a la hora de
poner en marcha alguna interfaz web es conveniente que tengamos en cuenta una serie de aspectos
relacionados con la usabilidad, como pueden ser:
• Debe permitir que los usuarios puedan buscar de una forma rápi- da, eficiente y cómoda cualquier tipo
de información.
• Los usuarios deben poder navegar de una forma fácil por el sitio web para que se pueda interactuar de
una manera más fácil.
• Es imprescindible que tengamos en cuenta las necesidades de- mandadas por los usuarios.

Además de todos estos factores, no debemos olvidar la utilización de los estándares de cara a
implementar un determinado sitio web. Para ello, utilizaremos algunos lenguajes de marcas, como son
HTML, XML y XHTML. Gracias a estos estándares podremos garantizar la continuidad en nuestro sitio.

Los lenguajes estándar nos garantizarán que un sitio web se pueda adaptar ante los posibles cambios
que se puedan producir en la tecnología, en nuevas versiones de navegadores, etcétera.

6.3. PRIORIDADES. PUNTOS DE VERIFICACIÓN

Como hemos indicado anteriormente, para diseñar un sitio web accesible es recomendable que sigamos
una serie de principios y pautas. Al tener en cuenta estos principios, conseguiremos escribir nuestras
páginas de una u otra forma. Por tanto, en este apartado vamos a utilizar estos principios como
elementos de organización, en los que haremos constar las diferentes recomendaciones que deben tener
en cuenta los diseñadores al realizar un sitio web accesible.

• Perceptividad: es imprescindible que el contenido web esté dis ponible para que pueda ser
perceptible por los distintos sentidos, como pueden ser la vista, el tacto o la audición. Para ello, de-
bemos tener en cuenta una serie de pautas que atiendan a las diferentes recomendaciones.
• Operatividad: la operatividad de una página web la podremos medir a través de los distintos
formularios, controles, etcétera, que nos permitirán interactuar con los diferentes usuarios.
• Comprensibilidad: tanto la interfaz como el contenido de una página web se deben entender de
forma fácil y deben ofrecer una buena semántica a los usuarios que accedan a ella, independientemente
de las particularidades que puedan tener los usuarios.
• Robustez: debemos tener un contenido consistente y, a la vez, fiable. Podremos permitir su uso
con diferentes agentes de usuario y así estar preparados para posibles tecnologías que puedan
aparecer.
 6.3.1. IDENTIFICACIÓN DEL OBJETIVO DE LA WEB
Es posible encontrar páginas web de diversos tipos y temáticas. Este tipo de páginas web pueden
atender diferentes criterios. Es por ello que los principales elementos de organización de un sitio web
son sus objetivos.

Uno de los objetivos iniciales que tenían las páginas web eran meramente informativo. Una página web
informativa pretende difundir y distribuir un tipo de información. Para este tipo de sitios web es
fundamental tener en cuenta la accesibilidad.

Con el paso del tiempo, han ido surgiendo muchos sitios web que han dado soporte a actividades
comerciales en la web, en los que se promocionaban y difundían instituciones con ánimo de lucro. Es
decir, la finalidad es fundamentalmente económica y no solamente informativa. Los sitios web
comerciales es posible organizarlos en webs corporativas, es decir, sitios web en los que se informa
sobre la empresa y se publicitan productos.

Otro tipo de actividades a las que da soporte la web es el ocio y el entretenimiento. En ellos, en el
fondo, también suele haber un propósito económico. En este tipo de webs, lo más importante es
sorprender al usuario con innovaciones.
Gracias a la evolución de la web, concretamente la web 2.0, mu- chos sitios que inicialmente eran
personales y cuyo responsable del contenido era el propietario se han sustituido por sitios web donde la
web se ha convertido en una plataforma donde la propiedad del contenido se distribuye entre muchos
usuarios. En este caso, se habla de sitios web colaborativos.
6.3.2. VELOCIDAD DE CONEXIÓN
En la actualidad, internet ha pasado a formar parte del día a día de mucha gente. Se utiliza como fuente
de investigación para algunos, y de ocio y trabajo para otros. Es por ese motivo que es importante
conocer las diferentes posibilidades de conexión, las ventajas y desventajas y cómo funciona cada una.
Hoy en día existen diferentes tipos de conexiones:

• Conexión por línea telefónica: es el método más antiguo, también conocido como dial-up. La conexión
se realiza mediante un módem y una línea telefónica convencional. La velocidad de datos no supera los
56 kbps y eso hace que cada vez se utilice menos este tipo de conexión.

• Conexión xDSL: es suministrada por la red convencional, pero difiere del acceso dial-up. Este tipo de
servicio funciona con la contratación de un proveedor de acceso, y es posible acceder a servicios con
diversas velocidades.

• Conexión por televisión por cable: este tipo de conexión es cada vez más popular y utiliza la misma
estructura que el servicio de cable contratado, lo que facilita la instalación. Estos tipos de conexión
ofrecen en el paquete el acceso a internet con distintas velocidades.

• Conexión por satélite: se realiza a través de equipos específicos que suelen tener un elevado costo. En
algunos casos, es el pro- veedor de servicio quien suministra la antena. Este tipo de acceso a internet
cuenta con planes que ofrecen velocidades desde 512 kbps hasta 2 Mbps. Una de las ventajas que
supone utilizar este tipo de conexión es el acceso sin depender de la ubicación.

• Conexión 3G: cada vez es mejor la conexión a internet a través de los teléfonos celulares. La gran ventaja
de este tipo de conexión es la movilidad. Las redes GSM pueden alcanzar velocidades de 800 kbps. Las
redes CDMA pueden llegar a alcanzar los 2 Mbps.

• Conexión 4G. Es la tecnología que se encuentra actualmente en funcionamiento. Utiliza la tecnología

LTE, capaz de alcanzar los 100Mbps de descarga y 50Mbps de subida.
También existe la conexión 5G, que se encuentra actualmente en fase de implantación.

Por lo tanto, la velocidad de conexión afecta a la carga del contenido, por lo que se ve afectada la
usabilidad y condiciona el comportamiento de los usuarios.
 6.4. TIPO DE USUARIO
Como todos los usuarios son distintos, es conveniente que realicemos un perfil de aquellos que pueden
acceder a un determinado sitio web para saber qué aspectos tienen en común y qué diferencias existen
entre ellos.

Para esta distinción de usuarios, es conveniente que tengamos en cuenta algunos aspectos y
recomendaciones a la hora de realizar un diseño web:

• A los usuarios no les gusta que una página principal tenga algún elemento de Flash que necesite más de
tres segundos para des- cargarse y, si no tienen posibilidad de poder saltarse este proceso, abandonan
la página.
• En las páginas con muchos elementos decorativos, los usuarios suelen abandonar las páginas porque
tardan demasiado tiempo en descargarse.
• Las páginas que tienen demasiadas interrupciones en la lectura provocadas por las diferentes ventanas
que las componen también son abandonadas por los usuarios.
• Las páginas con mucho texto y que ocupa toda la ventana no son favorables para los usuarios.

Cabe subrayar que se debe pensar siempre en el usuario potencial del sitio web, considerando sus
expectativas, capacidades y aptitudes, así como la información requerida, la forma de acceso a la web,
la experiencia previa sobre la utilidad de la web, etcétera.

También es importante conocer las limitaciones técnicas que pue- den tener los usuarios potenciales de
un determinado sitio web, la plataforma que se debe utilizar y la conexión que pueden tener.

Como decía Steve Krug, “usabilidad es que algo funciona bien: significa que una persona de capacidad y
aptitudes medias (o, incluso, por debajo de la media) pueda usar algo, tanto si es un sitio web, un
mando a distancia o una puerta giratoria, para lo que se supone que sirve, sin frustrarse
desesperadamente mientras lo hace”.

Es posible que nos encontremos con algunos sitios que hayan sido diseñados con la intención de poder
ser utilizados por distintos usuarios:

• Visitante o invitado.
• Usuario registrado o colaborador.
• Usuario experto o administrador.

Independientemente del usuario que utilice la web, se va a desarrollar una experiencia diferente.

En cualquiera de los casos, es fundamental que se garantice la usabilidad para el tipo de usuario que
interaccione con el sitio web.

6.5. INFORMACIÓN FÁCILMENTE ACCESIBLE

Para conseguir un mejor acceso a la información de un sitio web, es recomendable poner en práctica las
siguientes pautas:

• Tener organizados los contenidos del sitio correspondiente.

• Hacer un buen diseño del sistema de navegación.

Actualmente, existen millones de sitios web, algunos de los cuales son complejos y con gran cantidad de
páginas, mientras que otros son sencillos y en ellos el usuario puede acceder a toda la información de
forma rápida y concisa. Pero lo cierto es que, si un usuario tiene dificultades para manejarse por la
página, acabará abandonándola sin encontrar lo que buscaba.

Para orientar y guiar al usuario, las páginas web suelen incorporar menús de navegación, que incluyen
la información más importante del sitio web. En estos sitios, además, podemos tener acceso a otras
páginas que sean del mismo sitio (enlaces internos) o de otros (enlaces externos).
 A modo de resumen, en relación con la información de una página web, es conveniente que
comprobemos que:

• Los contenidos sean accesibles desde el menú de navegación principal o desde algún enlace.
• No es conveniente que existan enlaces que no nos lleven a ningún sitio concreto, es decir, debemos
validar que los links estén operativos.
• Los enlaces deben mostrar el contenido esperado.