Diseno Grafico Web

DISEO GRAFICO WEB
NDICE GENERAL
INTRODUCCIN GENERAL
OBJETIVOS Y DESTINATARIOS
MATERIALES Y MTODOS
1. INTRODUCCIN AL DISEO GRFICO WEB
Introduccin
Objetivos
Apartados
Conocimiento del medio: Internet
Presencia web
Contenidos web
Tareas bsicas del diseo grfico web
Configuracin entorno trabajo
Diseo
Grfico
Web
Ejercicios
Test de autoevaluacin
Conclusin
2. FORMATOS GRFICOS
Introduccin
Objetivos
Apartados
Usos de la imgenes en la Web
Ventajas e inconvenientes de los grficos en la Web
El almacenamiento
Tipos
Formatos de mapa de pxeles
Formatos vectoriales
Formatos grficos clsicos
Consejos
Ejercicios
Conclusin
3. CAJA DE HERRAMIENTAS
Introduccin
Objetivos
Apartados
Herramientas software
Herramientas hardware
Ejercicios
Conclusin
4. EDITORES GRFICOS
Introduccin
Objetivos
Apartados
Qu son?
Adobe Photoshop (PS)
Adobe image ready (IR)
Adobe Fireworks
Paint shop pro
Gimp
Ejercicios
Conclusin
5. ENTORNO Y MTODOS
Introduccin
Objetivos
Apartados
Equipos de desarrollo
Entornos de desarrollo
Sistema de trabajo
Ejercicios
Conclusin
6. HERRAMIENTAS AUXILIARES
Introduccin
Objetivos
Apartados
Catalogadores de imgenes
L-View
Futuris
IrfanView
AhaView
XnView
AcDeSee
Ejercicios
Conclusin
7. FASES DE CREACIN DE UN WEBSITE
Introduccin
Objetivos
Apartados
Fases de creacin de un website
xito en la web
Usabilidad
Ejercicios
Conclusin
8. DISEO Y COMPOSICIN
Introduccin
Objetivos
Apartados
Fuentes de diseo grfico
Diseo web
Elementos bsicos
Limitaciones del diseo
La composicin
Ejercicios
Conclusin
9. EL COLOR Y OTROS ATRIBUTOS
Introduccin
Objetivos
Apartados
El color en la naturaleza
El entorno visual
Componentes del color (HSB)
Profundidad de color
Modo de color
Color en HTML
Temperatura del color
El lenguaje de los colores
Ejercicios
Conclusin
10. TCNICAS DE SELECCIN. CAPAS
Introduccin
Objetivos
Apartados
Tipos de seleccin
Herramientas de seleccin
Usos selecciones
Herramientas de seleccin avanzadas
Capas
Ejercicios
Conclusin
11. TCNICAS BSICAS DE RETOQUE
Introduccin
Objetivos
Apartados
Mover una seleccin
Rellenar una seleccin
Deformar una seleccin
Herramienta de clonacin
Colocar una sombra
Uso de filtros
Ejercicios
Conclusin
12. FONDOS
Introduccin
Objetivos
Apartados
HTML de fondos
Posibilidades creacin de fondos
Ejercicios
Conclusin
13. IMAGEN INSTITUCIONAL
Introduccin
Objetivos
Apartados
Conceptos bsicos
Imagen institucional en las administraciones pblicas
Elementos que caracterizan una imagen institucional
Botones, lneas y banners.
Botones y lneas en HTML
Ejercicios
Conclusin
14. TEXTOS Y TIPOGRAFAS
Introduccin
Objetivos
Apartados
Caractersticas de la lectura en monitores
Consejos generales
Tipografas
Caractersticas
Cmo conseguimos fuentes?
Efectos sobre textos
Ejercicios
Conclusin
15. SECTORES
Introduccin
Objetivos
Apartados
Sectores
Guardar sectores
Importancia del tamao del fichero
Ejercicios
Conclusin
16. EFECTOS WEB
Introduccin
Objetivos
Apartados
Rollover o MouseOver
Animaciones
Mapas de imagen
Ejercicios
Conclusin
17. FLASH
Introduccin
Objetivos
Apartados
Posibilidades de Flash
Aprendizaje
Espacio de Trabajo
Animaciones
Ejercicios
Conclusin
18. DREAMWEAVER
Introduccin
Objetivos
Apartados
Espacio de trabajo
Mi primera pgina web
Elementos
Ejercicios
Conclusin
19. CMO SEGUIR?
Introduccin
Objetivos
HTML
Introduccin
Objetivos
Limitaciones HTML
Consejos generales
Mtodo de trabajo
Lenguaje de etiquetas
Elementos HTML
Conclusin
FUENTES DE REFERENCIA
Introduccin
Libros y Revistas
Internet y Cursos
Conclusin
Conclusin
PRCTICA FINAL DE CURSO (OBLIGATORIA)
BIBLIOGRAFA
GLOSARIO
INTRODUCCIN GENERAL
Internet es un mundo en continua evolucin y desarrollo, y que no est exento de la influcia de determinadas
modas. En la actualidad algunos de los servicios ms utilizados son el correo electrnico y las redes. Esto se
fundamenta en la cooperatividad de Internet, una gran red dnde todo el mundo puede aportar o intercambiar
material con otras personas. A ello se suman las facilidades que otorga el medio, ya que para comunicarse con
otra persona o transferir material, no es necesario que esas dos personas estn en un mismo lugar, slo basta
con conectarse a la red.
Cada vez hay ms y mejores formas de acceder a Internet, los dispositivos van avanzando y hoy en da
podemos tener acceso casi desde cualquier punto del planeta.
Campos en continuo desarrollo como el diseo eficiente de pginas web, la caducidad de la informacin, la
bsqueda de contenidos, el posicionamiento en buscadores, ... estn haciendo que se creen fructuosos negocios
en torno a ello.
OBJETIVOS Y DESTINATARIOS
En este curso, el objetivo fundamental es la navegacin web y nos centraremos en ello explicando la manera de
conseguir un buen diseo web para nuestras pginas web.
Este curso va destinado a una variedad de usuarios que no necesariamente tendrn que ser conocedores del
lenguaje HTML. Si se recomienda para un mayor aprovechamiento del curso que se posean un mnimo
conocimiento de internet y alguna herramienta de tratamiento de imgenes como Adobe Photoshop aunque
tampoco es imprescindible, ya que a travs de las diferentes lecciones se irn explicando desde los
componentes necesarios para realizar una pgina a los programas que se utilizarn para el diseo.
Por tanto, no se requieren conocimientos avanzados informticos para comenzar el curso, ni manejar editores
grficos con soltura. El curso comienza desde un nivel inicial y llega hasta un nivel medio-alto.
MATERIALES Y MTODOS
El curso se podr seguir con los materiales didcticos compuestos por:
Textos temticos, son las Unidades Didcticas (UD) que contienen la parte terica. Estarn disponibles
en la plataforma de virtualizacin.
Viewlets, elementos dinmicos flash de demostracin de procedimientos y tcnicas, son como fragmentos
de vdeo, que podremos manejar mediante botones de activacin o doble clic. Cuando se recomiende visualizar
un viewlet dentro de la clase terica se precisar el player de Flash para poder verlos. Cada uno consta de un
fichero html que maneja el elemento flash embebido. La mayora vienen denominados por la UD (unidad
didctica) a la que corresponden.
Prcticas y ejercicios:
Propuestas en las Unidades Didcticas (voluntarias).
Prcticas que se propondrn en el foro de seguimiento del curso.
Prctica final del curso (obligatoria).
10
Autoevaluaciones de cada UD, que se aconsejan realizar para un correcto asentamiento de la informacin
aprendida.
Participacin activa en el foro de discusin.

Correo electrnico para contactar con el tutor y con otros alumnos.
Pueden utilizarse sesiones programadas de chat si se considera de inters.
Se puede combinar con alguna clase o tutora presencial si se considera necesario.
Los alumnos deben preguntar cuantas cuestiones consideren al tutor por cualquiera de los medios a su
disposicin. Aunque se trata de un curso a distancia no es un curso sin tutor.
Aunque el curso est ordenado de una manera lgica, se aconseja a aquellos alumnos sin experiencia previa en
editores grficos, que alteren el orden de captulos, adelantando los de seleccin, capas y retoque. Quedara
pues as: 1, 4, 10, 11 y luego seguir el orden habitual de captulos. Se aconseja que estudien los viewlets todas
las veces que precisen, y que hagan las preguntas al tutor que crean convenientes (a travs del foro o del email).
Como material adicional, en la Unidad Didctica 19 se cuenta brevement el lenguaje HTML aunque es totalmente
opcional y ms bien se plantea como material de ampliacin.
Necesidades para cubrir el curso

Las mejores herramientas que podemos utilizar, y que necesitamos para seguir este curso son:
El cerebro, muchas veces minusvalorado, ... porque no slo tenemos manos y dedos. Hay que pensar las
cosas antes de lanzarnos como locos a teclear o mover el ratn y hacer clics.
Lpiz y papel, imprescindibles para planificar correctamente y no andar improvisando continuamente. Si
somos genios, alguno habr, se pueden conseguir resultados correctos sin planificar, pero el resto de mortales
slo conseguiremos chapuzas.
Una mente abierta, curiosidad, perseverancia y paciencia en elevadas dosis. Sobre todo paciencia.
Un equipo informtico tipo PC, con una versin trial de Photoshop, que se puede descargar desde la web
de Adobe <http://www.adobe.es/>, <http://www.adobe.es/products/tryadobe/main.html#photoshopcs2>
versin en ingls que ocupa 329 MB, o bien, conseguir una versin trial de revistas o una comercial si se dispone
de ella. En realidad no es necesaria la ltima versin del producto, es vlida cualquiera a partir de la 5.5 (la
primera en la que ya viene integrado Image Ready). Adobe suele sacar bastantes versiones, y muy rpidamente;
siempre es mejor tener la ltima que se pueda, pero los fundamentos del diseo grfico web no cambian por ello.
Podemos utilizar otros editores grficos para seguir el curso si no disponemos de Photoshop, como Fireworks,
PaintShop Pro (Shareware) o Gimp (Freeware). No siempre todas las opciones que oferta el lder estarn
representadas en los dems, pero las principales si.
El Player de Flash para los Viewlets.
Aunque el curso se puede seguir con otros equipos y S.O., nos centraremos para que las explicaciones se
adapten a equipos tipo Pentium IV o similar, con 512 MB de RAM y S.O. Windows XP (entorno ms utilizado en
la actualidad), aunque puede seguirse con Linux, y otros equipamientos, probablemente su equipo sea superior.
11
INTRODUCCIN AL DISEO GRFICO WEB
INTRODUCCIN
En este primer tema vamos a ver conceptos generales correspondientes al diseo grfico web. Se ver
brevemente como ha sido la evolucin de internet y en especial la de las pginas web, la importancia que tiene
en la actualidad tener una buena web, as como lo que debe contener dicha web.
Por otro lado, vamos a ver temas relacionadas con el diseo, colores, formas, textos ... y en especial nos
centraremos en todo el curso en el tema de las imgenes.
OBJETIVOS
Este material ha sido preparado como soporte de un curso a distancia, por lo que es autoexplicativo.
El objetivo principal consiste en revisar, de forma sistemtica, las peculiaridades de las imgenes en la web,
utilizando como herramienta principal de diseo Adobe Photoshop, con su complemento Image Ready, aunque
se usarn tambin otros programas (como veremos Image Ready est cayendo en desuso, siendo sustituida por
la aplicacin Adobe Fireworks).
Se aprender a construir fondos, logos, banners, tipografas grficas, elementos de navegacin, botones,
separadores, ...
Un curso de diseo grfico tiene un componente prctico muy elevado, por ello se ha reducido al mnimo
imprescindible el contenido terico, siendo incluso opcional en algunos apartados, y se ha hecho hincapi en el
aspecto prctico. Se propondrn multitud de ejercicios prcticos que tienen como finalidad aprender a utilizar un
editor grfico, como ejemplo de uso de otros, puesto que posee muchas caractersticas comunes con los ms
difundidos y utilizados, y revisar las particularidades de las imgenes que utilizamos en nuestras pginas web.
Se revisar la utilizacin de grficos e imgenes, con especial detenimiento en: la composicin, la utilizacin del
color, las combinaciones de fondo y primer plano, la preservacin de tipografas especiales pasndolas a grfico,
los tipos de formatos grficos ms utilizados en internet, cmo conseguir animaciones y efectos especiales,
cmo optimizar la carga, ... y acabaremos con una prctica completa.
Mostraremos un mtodo de trabajo aplicable a la preparacin de imgenes para web y a la construccin de
pginas web en general.
El alumno dispondr de una visin amplia de todo lo relacionado con el Diseo Grfico Web. En principio, los
alumnos no necesitan tener conocimientos de HTML, ni de editores grficos porque los necesarios se adquirirn
durante el curso.
Creemos importante destacar lo que NO es este curso:
No es un curso de Photoshop, aunque se utilizar ampliamente y se mostrarn sus funciones principales, en
concreto las orientadas al diseo de imgenes para web.
No es un curso de HTML, aunque se revisarn las etiquetas relacionadas con los contenidos multimedia y
grficos.
No es un curso de Diseo Web, aunque gran parte de los conocimientos adquiridos podrn aplicarse en dichos
menesteres.
No es un curso de Flash, aunque se mostrarn algunas de sus funcionalidades y posibilidades
APARTADOS
CONOCIMIENTO DEL MEDIO: INTERNET
Primer medio de comunicacin interactivo en tiempo real, que ha tenido un crecimiento exponencial desde finales
de los aos 80 y que ha revolucionado la manera y las posibilidades de difundir informacin y servicios.
12
La simplicidad de sus protocolos de transmisin, la omnipresencia de elementos de acceso a la red y la

expansin de sta, han hecho que se utilice cada vez ms.
Dentro del mundo internet, en continuo desarrollo y evolucin, funcionan distintos servicios que van
reconfigurando las posibilidades del medio. Un medio no exento de la influencia de las modas. El servicio ms
utilizado actualmente (el que ocupa ms ancho de banda y genera mas paquetes de informacin circulantes) es
el de correo electrnico, el segundo servicio mas difundido es el de navegacin web, pero hay otros como
transferencia de ficheros, blogs, chats, P2P, foros, elearning, webservices y aplicaciones, wiki, redes sociales ...
y continuamente van surgiendo nuevos servicios.
Nuestro objetivo es el de navegacin web, y por tanto, nos centraremos en conseguir buenos diseos grficos
para nuestras pginas.
No vamos a citar la historia de sus inicios y de su extraordinario crecimiento. Gran parte de ella se sigue
escribiendo. Tecleando historia de internet en Google aparecen ms de 93.000 referencias en castellano, los
interesados en profundizar en ello disponen, pues, de abundante documentacin. En cuanto a dimensiones y
trficos se recomiendan las URL <http://www.aui.es>, <http://www.zenithmedia.com>.
Pero s comentaremos que el ncleo duro de internet se basa en la utilizacin de unos protocolos muy
establecidos, a la par que sencillos, y en el uso de tecnologas de hipertexto fusionadas con multimedia.
Internet consiste en la interconexin de millones de equipos (hosts segn su terminologa), identificados
inequvocamente mediante una direccin (IP), que se mandan la informacin troceada en paquetes (TCP) que
pueden viajar por millones de circuitos distintos segn sean encaminados y enrutados (electrnica de red,
routers) y que se juntan en destino.
Hay internets pblicas, a las que puede acceder cualquiera, e internets privadas que limitan los usuarios que
pueden acceder (intranets).
Internet proporciona distintos, y variados, servicios. Uno de ellos es la navegacin web por pginas, construidas
por miles de desarrolladores, en continuo crecimiento exponencial, que constituyen la mayor fuente de
informacin disponible en la actualidad, mayor que todas las bibliotecas del mundo juntas. Mas de 8.000 millones
de pginas estn indexadas en buscadores, pero ello no es ms que la punta del iceberg y se habla de una
internet oculta de mas de 100.000 millones de pginas que, por supuesto, no estn siempre on-line o
disponibles y que no siempre poseen la calidad, actualizacin y validez suficiente para merecer la pena su
visualizacin, pero ah estn. Todas y cada una de ellas respetan el protocolo HTML y se transmiten entre los
equipos que las almacenan y los usuarios mediante el protocolo HTTP. Otro servicio muy utilizado, el de correo
electrnico, genera trficos de mas de 12.000 millones de correos diarios. Estamos pues ante unas dimensiones
muy elevadas y un gran inters econmico asociado.
Las formas de acceder van mejorando y diversificndose.
Aspectos como: el diseo eficiente de pginas, la caducidad de la informacin, la bsqueda de contenidos, el
posicionamiento en buscadores, ... estn generando nuevos y prsperos negocios.
El futuro, probablemente, nos deparar una diversificacin de los medios de acceso a la red (integracin con
telfonos mviles, PDA, ...); una consolidacin de una internet alternativa para negocios con prdida del
anonimato, mayor control y mayores anchos de banda; una mejora sustancial en las infraestructuras de la
internet actual que no desaparecer; un aumento de la brecha digital y un aumento de la regulacin legal del uso.
Conceptos importantes
Internet es el primer medio interactivo en tiempo real.
El servicio ms utilizado actualmente es el correo electrnico.
El ncleo duro de Internet est en sus protocolos.
Internet interconecta millones de ordenadores que se identifican mediante la IP y se mandan informacin
mediante TCP.
Las redes de internet privadas se llaman intranets.
Existen millones de pginas de internet indexadas por los buscadores pero tambin millones de ellas que estn
"ocultas".
13
PRESENCIA WEB
El inters por estar en Internet es indiscutible, y el nmero de pginas existentes es muy elevado y
exponencialmente creciente. Ello ha originado nuevos mercados, como los servicios de bsqueda (Google,
Yahoo, ...) y los recopilatorios de informacin como Wikipedia ... )
Las organizaciones y los particulares suelen construir su presencia web mediante pginas HTML que residen
fsicamente en los equipos de un proveedor de hosting. Si la presencia es mayor o menor, distinguimos entre:
pginas, si se limita a unas pocas pginas, normalmente de carcter personal.
sitio, si hablamos de un grupo de pginas con actualizacin frecuente y con algunos servicios ofertados, con
interactuacin incluso con los usuarios. Por ejemplo <es.softonic.com>.
portales, cuando se constituyen en una agrupacin de servicios y ofertas que pueden ser, a su vez, accesos
a otras partes de internet, con buscadores dentro y fuera del portal. Normalmente son temticos como, por
ejemplo, la edicin digital de los peridicos de tirada nacional o grandes distribuidores de informacin y servicios,
o las presencias de los grandes organismos pblicos (ms informacin en enlaces)
Para conseguir esa presencia, se utilizan estndares y protocolos:
El lenguaje HTML (HiperText Markup Languaje) para elaborar su contenido.
El protocolo FTP (File Transfer Protocol) para enviar los contenidos al host una vez desarrollados.
El protocolo HTTP (HiperText Transfer Protocol) para la transmisin de esos contenidos entre proveedor
(hosting) y usuario (navegante).
Enlaces
<www.elpais.es>.
<www.elmundo.es>.
<www.terra.es>.
<www.orange,es>.
<www.jazztel.es>.
<www.msn.es>.
<www.madrid.org>.
<www.mec.es>.
<www.la-moncloa.es>.
<www.map.es>.
Los sitios web son grupos de pginas con actualizaciones frecuentes.
Los portales son los grupos de servicios y ofertas que pueden ser, a su vez, accesos a otros sitos de internet.
Para elaborar el contenido de las pginas web se utiliza el lenguaje HTML.
Los protocolos FTP sirven para enviar los contenidos al host.
Los protocolos HTTP sirven para la transmisin de contenidos entre el proveedor y el usuario.
14
CONTENIDOS WEB
En una primera aproximacin, los contenidos web podemos clasificarlos en Textos y multimedia, pero si
profundizamos un poco podemos encontrar:
Textos
Hiperenlaces
Elementos Interactivos
Imgenes y Grficos
Ttulos
Subttulos
Fondos
Banners
Elementos de navegacin
Separadores
Enlaces a Bases de Datos
Sonido
Elementos embebidos
Enlaces a correo electrnico
Imgenes mviles
Vdeo
Flash
15
...
Todos estos elementos deben elaborarse para su introduccin en las distintas pginas, para ello utilizaremos
editores y software especfico para cada uno de ellos. Este curso se centra en los contenidos de carcter grfico
y multimedia.
TAREAS BSICAS DEL DISEO GRFICO WEB
Hasta hace relativamente pocos aos, es decir una vida hablando de Internet, todo lo que se aplicaba de
diseo grfico a la web se poda aprender, holgadamente, en una semana. En la actualidad, existen postgrados
universitarios y titulaciones especializadas en la materia.
Las tareas bsicas a dominar sern:
Captura de imgenes ya existentes, mediante aparatos especiales (escner, cmaras digitales, videocmaras, ...
), o creacin de imgenes desde cero (tabletas grficas, editores grficos, ... ), composicin y mejora de las
mismas.
Modificacin de las mismas: formato, colores, retoque, utilizacin de capas ...
Adaptacin y preparacin para web: peso, troceo, composicin, efectos especiales.
Publicacin: tamao, posicionamiento, interaccin.
Revisin y Mantenimiento: Eficacia y Eficiencia.
Lo ms importante para realizar dichas tareas es mantener una mente abierta y poseer una buena imaginacin,
tener capacidad de observacin, paciencia, perseverancia, algo de mtodo (objetivo fundamental de este curso)
y algunos, pocos, conocimientos tericos (tambin nos aproximaremos a ello en este curso). Las dems son un
tema de disposicin y aptitud.
No olvidar nunca que diseo sin contenido NO es nada. Prestaremos atencin al diseo y a la manera de
mostrar los contenidos de nuestras pginas, pero tendremos siempre presente que lo importante es ofrecer
contenidos de calidad: aunque la mona se vista de seda, ... mona se queda.
Para disear una web hay que saber capturar imgenes ya existentes, crearlas desde cero, hacer
composiciones, modificarlas, adaptarlas y prepararlas para la web, publicarlas, revisaralas y mantenerlas.
Diseo sin contenido no es nada.
CONFIGURACIN DEL ENTORNO TRABAJO

A la hora de construir diseos grficos, si es algo que nos apasiona, podemos caer en la tentacin de utilizar un
entorno de trabajo excepcional: grandes monitores con altsimas resoluciones, equipos de alta gama cargados
de RAM y procesador/es, tarjetas grficas con MB y MB de memoria ... Todo ello har que diseemos ms
cmodamente y mejor, ... pero nos aparta de la realidad excesivamente.
Aunque es cierto que no debemos despreciar dichas mejoras, tambin es cierto que, probablemente, el pblico
objetivo de nuestros diseos no dispondr de tales maravillas y NO podr apreciar nuestro trabajo debidamente.
Eso sin contar con las limitaciones del medio, que tambin nos van a condicionar. Es mejor, por tanto, colocarnos
en la silla del usuario tipo y disear para l.
Para comenzar, podemos adaptar nuestra configuracin del sistema al estndar ms utilizado en nuestra
organizacin.
16
Aunque las resoluciones de pantalla van mejorando y aumentando con el tiempo, la mayora de los internautas
estn todava con resoluciones de 800 x 600 pxeles, o de 1.024 x 768. As que deberemos ajustar nuestras
pginas para que se vean bien, al menos, con esas resoluciones. Por tanto conviene disear desde un principio
as, colocaremos el monitor con resolucin 800 x 600 para el curso (la peor de las normales), o bien la otra, a
nuestra eleccin.
Para ello suele bastar pulsar el botn derecho del ratn en nuestro escritorio y escoger propiedades >
configuracin > rea de pantalla. Tambin aprovecharemos para escoger color verdadero antes de aceptar.
Tambin haremos que el rea de trabajo sea lo ms amplia posible, para ello configuraremos la barra de tareas
del escritorio para que se oculte automticamente. Debemos tener en cuenta que, para el diseo grfico web,
hay que contar en pxeles y que los espacios disponibles deben estar bien controlados.
Conviene desactivar las barras auxiliares (Yahoo, Google, ...) de nuestro navegador, por los mismos motivos.
Conviene instalar Acrobat Reader, el Player de Flash (entre otras cosas para seguir los viewlets demostrativos) y
el de Shockwave, si no lo estn ya.
Deberemos ajustar las pginas a una resolucin de 800 x 600 pxeles o de 1.024 x 768.
Para ajustar nuestro monitor a sta resolucin hay que ir al escritorio propiedades > configuracin > rea de
pantalla.
Para que el rea de trabajo sea lo ms amplia posible:
Estableceremos la ocultacin automtica de la barra de tareas de nuestro escritorio podr tener ms

espacio.
Desactivaremos las barras auxiliares de nuestro navegador.
Es conveniente instalar Acrobat Reader, el Player de Flash y el de Shockwave.
DISEO
Se puede aplicar a todo y siempre lo mejora funcional o estticamente posible. As, un buen diseo puede
mejorar el consumo del combustible de un vehculo, pero tambin puede hacerlo ms deseado. Ambos aspectos
son aplicables a nuestras pginas web y a nuestras imgenes.
Los objetivos del diseo sern mejorar la eficacia y/o la eficiencia de nuestras pginas e imgenes. Adems, se
persiguen aspectos tales como: agradar, impactar, provocar ... es decir, evocar reacciones subliminales del
usuario.
Cuando omos que un avin est bien diseado, probablemente se refiere a la eficacia, el avin hace lo que se
espera que haga y lo hace bien. Cuando hablamos de diseo en un logotipo probablemente nos referimos a la
eficiencia, el logotipo es pegadizo, sencillo e identifica claramente lo que se desea.
El diseo se ha utilizado en todas las pocas y, curiosamente, con soluciones repetitivas peridicamente. Por
ejemplo el diseo piramidal en la construccin, o la ropa femenina por piezas, ... es lo que llamamos modas.
Las modas van y vienen, y siempre hay un grupo de gurs que las impulsan. Hay momentos en que se impone
lo sencillo y otros en que domina lo recargado y, sin motivo aparente, desaparece lo anterior e incluso demuestra
obsolescencia a aquel que no se adapta a la nueva tendencia. En muchas ocasiones, no existen motivos de
peso para el cambio, de hecho, suele haber un diseo clsico que no pasa de moda, que se considera elegante
y de otro nivel.
En internet el diseo ha entrado con gran fuerza, y no invertir esfuerzos en l es apostar por el fracaso de
nuestro site.
17
Los objetivos del diseo son la eficacia y/o la eficiencia de las pginas e imgenes.
Otro objetivo del diseo es evocar reacciones subliminales en el usuario.
GRFICO
El objetivo de todo lo grfico es ser visto. Ello tiene connotaciones importantes.
Cmo ser visto?, Con qu dispositivos? Eso va a condicionar nuestros diseos.
Lo habitual es que se utilice un monitor, de determinadas caractersticas, pero se van diversificando los medios
de acceso a nuestras pginas continuamente. No es lo mismo disear para tecnologa WAP que para monitores
de ordenador personal o para PDAs.
Los dispositivos de visualizacin van a restringir, y mucho, las posibilidades de nuestros diseos grficos.
CONCEPTOS IMPORTANTES
Lo habitual es utilizar un monitor con unas caractersticas determinadas, aunque actualmente se est
diversificando el acceso.
Los dispositivos desde los que se va a visualizar limita los diseos grficos
WEB
La web se ha convertido en un medio de comunicacin ms, en el medio por excelencia al permitir

interactividad y adaptacin al usuario, al ser casi instantnea y a su reducido coste y amplia disfusin.
Introduce reglas nuevas, pero puede, y lo hace, utilizar reglas clsicas de otros medios de expresin y
comunicacin. Veremos que el nmero de oro, la regla de los tercios, etc. de la pintura del Renacimiento, que se
pueden aplicar perfectamente a nuestros diseos grficos en la web.
Adems, nuestros diseos web tambin podrn valer para otras formas de comunicacin, como los soportes de
almacenamiento digital (DVDs, CDs, ...) e, incluso, la publicidad y el espectculo. Por ejemplo, un diseo en flash
puede convertirse en un anuncio de una bebida de xito o del ltimo modelo de coche o en un videoclip
promocional de un cantante. Un logo que realicemos puede acabar representando toda una filosofa.
Podemos hablar de webismo, un movimiento o cultura basado en:
18
El uso del hipertexto, que da tridimensionalidad a nuestros contenidos.

El uso amplio de elementos multimedia.
La inclusin de autntica interactividad instantnea con el usuario.
La web representa una nueva manera de hacer las cosas y de entender la comunicacin.
Cada vez que surge un nuevo medio (sucedi con la radio, con el cine, con la televisin, con el vdeo y con
tantos otros) existe una primera fase de exploracin de sus posibilidades. Los pioneros intentan hacer todo lo
que se les ocurre con l, adems de adaptarlo para hacer lo que se haca con otros. Internet sigue en esta fase.
Posteriormente hay una segunda fase de establecimiento de estndares, normas y procedimientos, ms o
menos obligatorios, que marcan las formas de actuar. Internet tambin est en esta fase.
Cierto, parece ambiguo, pero algunos usos de Internet ya estn ms que probados y asentados (por ejemplo: el
correo electrnico, la navegacin web, ...), mientras que todos los das surgen nuevas y variadas posibilidades
(podcasting, weblogs, P2P, chat, elearning, wiki, ...).
En principio, y centrndonos slo en el diseo grfico web, el que interpretar todos nuestros esfuerzos y los
mostrar al usuario, es el navegador, es decir, un software instalado en su dispositivo de visualizacin. Este
software interpreta lo que le llega y traduce segn su configuracin, parametrizacin y posibilidades del
dispositivo. Ello, por supuesto, tambin va a condicionar nuestros diseos.
La web es el medio por excelencia de comunicacin por su interactividad y adaptacin.
Los diseos web tambin servirn para soportes de almacenamiento digital.
Internet todava est en una primera fase de exploracin de sus posibilidades aunque tambin se estn
estableciendo estndares y normas que corresponderan a una segunda fase.
El navegador interpretar nuestros diseos para mostrrselos a los usuarios.
EJERCICIOS
El alumno debe haber recibido una clave de acceso y unas instrucciones para acceder a la plataforma. Si ello no
es as, debe ponerse en contacto con el INAP, o con el tutor del curso, bien de forma directa o a travs de otro
compaero.
1. Entrar en el foro y saludar a los compaeros (<www.inap.map.es> Cursos OnLine). Este mensaje
seala el punto de inicio del curso para cada alumno, y significa que se han recibido correctamente las claves de
acceso y que se sabe cmo acceder a la plataforma. No se considerar a un alumno activo hasta que publique el
mensaje (y por tanto NO se superar el curso correctamente sin este requisito).
2. Conseguir una versin trial de Photoshop.
Bien desde:
La web de Adobe.
La propia plataforma del curso, en donde se intentar colgar (si es posible por su tamao).
Una revista.
Una de la que ya se disponga.
3. Mandar un correo electrnico a los tutores (la direccin estar en el foro en el mensaje de bienvenida)
con:
19
Nombre del alumno.
Email de contacto que se desea (personal, oficial, ...).
Si se dispone ya de una versin de Photoshop y cul, si es trial o completa.
Conocimientos de Photoshop o de otros Editores Grficos (nulos, iniciales, medios, altos).
Si el alumno trabaja en un departamento de desarrollo y mantenimiento web o no.
Qu otras herramientas web se conocen y el nivel de conocimiento (Dreamweaver, Adobe GoLive,

FrontPage, ...).
No olvidar que los tutores pueden ir adaptando el nivel del curso al de los alumnos, por ello es
importante que se conozca.
Con carcter general, los tutores se ofrecen a profundizar en todas aquellas cuestiones que sean de
inters para los alumnos
20
TEST DE AUTOEVALUACIN
1. La mayor parte de Internet est indexada por los llamados buscadores como Google.
Verdadero
Falso
2. HTTP es el protocolo que permite construir pginas web.
Verdadero
Falso
3. Para utilizar un Editor grfico se requiere una buena cantidad de RAM, pero la potencia de la CPU no
es un elemento decisivo porque no requieren mucho clculo matemtico.
Verdadero
Falso
4. El diseo no consiste slo en innovar, muchas veces se aplican diseos antiguos que vuelven a estar
de moda.
Verdadero
Falso
5. Una pgina web puede adaptarse a las preferencias del usuario y, en la prxima visita, ser diferente.
Verdadero
Falso
6. Conviene utilizar siempre el mejor equipo disponible para el diseo grfico web, configurndolo a sus
mayores prestaciones para conseguir mejores diseos.
Verdadero
Falso
CONCLUSIN
Nos encontramos ante un nuevo medio de comunicacin que, adems, introduce nuevas maneras de entender el
aprendizaje, el ocio, la consulta, ...
Su caracterstica diferencial es la interactividad y adaptacin al usuario. Ofrece muchos servicios, uno de los ms
difundidos es la navegacin web.
En el curso nos centraremos en aprender las tcnicas del diseo grfico aplicables a nuestras pginas.
21
FORMATOS GRAFICOS
INTRODUCCIN
En la web, los grficos inicialmente no estaban soportados, la web era exclusivamente textual y ningn elemento
multimedia era manejado por los primeros navegadores. Eso cambi con MOSAIC, el precursor de Netscape
que, en 1.993, permiti visualizar grficos GIF en la web. Este simple hecho contribuy en gran medida a la
revolucin posterior del medio.
La necesidad de soportar otros formatos grficos se convirti en una guerra entre navegadores y entre
estndares. Y dada la importancia que tiene los grficos en la web los desarrolladores tuvieron que llegar a
acuerdos para conseguir introducirlos.
OBJETIVOS
Revisar las distintas maneras que tenemos de almacenar nuestros grficos.
Ver qu ventajas tienen unas con respecto de otras.
Combinar formatos.
USOS DE LAS IMGENES EN LA WEB

Las imgenes en nuestras pginas web se pueden utilizar como fondos, como elementos de navegacin,
botones flechas, bolos y lneas, como grficos e imgenes tal cual, como fotografas que aaden informacin al
navegante (una imagen vale ms que mil palabras), como logotipos y pequeos grficos institucionales,
bneres publicitarios o de noticias, mapas de imagen y mens, hiperenlaces, botones 3D, metforas y temas, y,
por ltimo, como una manera de mantener formatos textuales complejos.
Existen webs con un uso profuso de grficos, como las de cantantes famosos o de museos por ejemplo, mientras
que otras los usan muy comedidamente. Sea como sea, siempre transmiten informacin adicional y tambin
sensaciones subliminales en las personas que los visualizan. Si aprendemos a utilizarlos correctamente,
podremos hacerlo fcilmente.
Hay diferentes formas de utilizar las imgenes en internet:, por ejemplo, como fondo, como elemento de
navegacin, como grfico, como fotografa, como logotipo, como banner, como mapa de imgenes o mens ...
VENTAJAS E INCONVENIENTES DE LOS GRFICOS EN LA WEB
Ventajas
Mejoran la comprensin.
22
Dan un aspecto ms interesante.
Permiten dar formato.
Informan.
Entretienen.
Evocan sentimientos subliminales.
Inconvenientes
El gran problema de las imgenes, y en general de los elementos multimedia, dentro de nuestras webs es que
ocupan mucho espacio y ralentizan su descarga. Todo lo que podamos hacer para reducir ese peso de las
imgenes redundar en beneficio para el tiempo de respuesta y carga de las pginas, por tanto, debe ser un
elemento fundamental de nuestros diseos el optimizar nuestras imgenes.
Hay que ajustar el nmero, tamao y calidad de imgenes con el peso de su carga, inflacin de imgenes vs
ram.
No se ven igual en todas las plataformas, y ya no hablamos de una minipantalla de un telfono mvil de ltima
generacin comparada con un monitor de 21 pulgadas, sino de entornos casi similares. Por ejemplo en equipos
MAC la visualizacin es ms clara y en entornos Windows ms oscura, debido a que utilizan un distinto ajuste de
gamma.
Se habla de que slo existen unos cuantos colores comunes entre plataformas, los colores seguros, alrededor
de 212 colores.
Incluir imgenes en nuestros diseos es muy ventajoso ya que mejoran la comprensin, el aspecto, informan,
entretienen, permiten dar formatos y evocan sentimientos, pero habr que tener mucho cuidado, ya que el
problema de las imgenes es que ocupan mucho espacio y ralentizan la carga de la pgina web. Adems, no se
ven igual en todas las plataformas.
EL ALMACENAMIENTO
Las imgenes se generan, se almacenan, viajan y se visualizan. Para ello es necesario guardar la informacin
grfica de alguna manera. Desde casi el comienzo de la informtica, se han desarrollado procedimientos ms o
menos ingeniosos para conseguirlo. En este curso veremos muchas tcnicas para ello.
En definitiva, consiste en guardar la informacin de todas y cada una de las caractersticas de una imagen,
mediante un algoritmo que las codifica normalmente mediante una matriz de nmeros, de manera que un
procesador pueda reconstruirla y mostrarla en un dispositivo de salida. Este algoritmo es la base de un
determinado formato grfico, y muchas veces se mantiene oculto o se patenta.
Las imgenes se almacenan guardando toda la informacin de las caractersticas propias de ellas mediante un
algoritmo que las codifica.
23
TIPOS
Hay dos tipos de imgenes digitales:
De intensidad: fotografas, vdeos, ...
De alcance: radares, queratometra, ...
En este curso nos centraremos en las primeras.
Existen dos formas de almacenar la informacin grfica:
Mapas de pxeles.
Sistemas vectoriales.
Vamos a ver detenidamente ambas.
Los tipos de imgenes digitales son las de intensidad y las de alcance.
Las formas de almacenar la informacin grfica son en mapa de pxeles o en sistemas vectoriales.
FORMATOS DE MAPAS DE PXELES
Los Mapas de Pxeles se basan en que las imgenes digitales, todas ellas rectngulos (aunque existen tcnicas
para disimular esto), se pueden almacenar guardando la informacin asociada a todos y cada uno de los pxeles
que las componen.
Los pxeles son pequeos puntitos, generalmente pequeos rectangulitos, que mediante una determinada
luminosidad, color, tono y brillo, transmiten al ojo humano las imgenes, el ojo agrupa la informacin y ve los
pxeles en conjunto, y el cerebro interpreta el resultado.
Cuanto ms grande es la imagen, mayor es la informacin a almacenar. Cuanto ms compleja es la imagen,
mayor es la informacin. As, si guardamos 24 bits de informacin por cada pxel, una imagen de 640 x 400
pxeles ocupar alrededor de 1 MegaByte. Una de 800 x 600 1.44 MB.
El nmero de bits por pxel es la profundidad de bit, y cuanto mayor sea, mejor podremos reconstruir despus el
original. 24 bits se considera ya color real y permite utilizar una paleta de 65 millones de colores.
24
La solucin a estas enormes cantidades de espacio necesarias para almacenar imgenes es el uso de tcnicas
de compresin.
Existen:
Formatos, algoritmos, que comprimen sin prdida, es decir, que podremos reconstruir la imagen
consiguiendo una copia perfecta del original. Un ejemplo de compresin sin prdida es el formato GIF.
Formatos de compresin con prdida, de manera que la reconstruccin de la imagen no ser perfecta,
aunque podemos conseguir similitudes tan grandes que el ojo humano no las distinga en un monitor.
Normalmente conseguiremos mayor compresin con stos ltimos. Un ejemplo de compresin con
prdida es el formato JPG.
El formato de mapas de pxeles tiene algunos inconvenientes, como el efecto de pixelado al ampliar
imgenes. Los pxeles son tan pequeos que, habitualmente, no se ven, pero al ampliarlos acaban
vindose. Son los tpicos dientes de sierra en las curvas.
Tambin tienen ventajas, entre otras que suelen conseguir una mayor calidad, llegando a ser autnticas
fotografas.
Los mapas de pxeles guardan las imgenes asociando informacin a cada uno de los pxeles que las
componen.
Los pxeles son pequeos rectngulos que mediante el color, la luminosidad, el tono y el brillo
componen las imgenes.
Cuanto ms grande es la imagen mayor es la informacin a almacenar.
El nmero de bits por pxel es la profundidad de bit.
Para solucionar el problema del espacio en el almacenamiento de imgenes se utilizan tcnicas de

compresin.
Existen formatos de compresin con prdida como el JPG y sin prdida como el GIF.
El formato de mapa de pxeles tiene el inconveniente del pixelado al ampliar las imgenes.
Las imgenes en mapa de pxeles suelen ser de mayor calidad.
FORMATOS VECTORIALES
25
Los formatos vectoriales utilizan un mtodo completamente distinto para guardar la informacin de una imagen,
lo hacen mediante primitivas geomtricas y frmulas matemticas. As, una figura la descomponen en pequeos
polgonos regulares de los que almacenan su posicin, coordenadas de los vrtices o puntos clave (por ejemplo
el centro y el radio de un crculo), las texturas de las superficies, etc. Cuando se visualiza la imagen basta con
interpretar las frmulas e ir recomponiendo el puzzle. Todo ello permite, habitualmente, que se utilice un menor
espacio de almacenamiento.
Los problemas de pixelado al escalar desaparecen, porque a la CPU le da lo mismo dibujar un crculo de 3 de
radio que de 37. Ocupa lo mismo sea cual sea el tamao de la imagen reconstruida (resolucin infinita).
Recomponer una figura mediante polgonos no consigue calidades tan reales como los mapas de pxeles.
Adems, la mayora de los formatos vectoriales no son interpretados directamente por los navegadores,
debiendo utilizarse pluings adicionales, por ejemplo el Acrobat Reader para interpretar ficheros PDF, o el player
de Flash para ese tipo de ficheros. Se ha calculado que el 96% de los internautas habituales disponen de esos
complementos en sus sistemas por lo que no precisan descargarlos sobre la marcha cuando visitan pginas que
los precisen. An as, esta tcnica es habitual, de forma que las pginas hechas con flash o que utilicen estos
formatos suelen colocar un hiperenlace de descarga al software adicional necesario.
Nada impide que en lugar de polgonos, se utilicen poliedros con volumen, primitivas de volumen. Hablaremos
entonces de vxels en lugar de pxels y los poliedros almacenarn informacin de todas sus caras, lo que nos
permitir, por ejemplo, rotar elementos de la imagen que pasar a simular que est en tres dimensiones (3D).
Ello facilita enormemente el desarrollo de videojuegos y de pelculas pues basta con cambiar un parmetro de un
grupo de frmulas para ver por detrs un objeto o personaje que estbamos viendo por delante. Tambin
simplifica mover zonas de la imagen., redimensionarlas, modificar sus texturas, sus comportamientos ante las
fuentes de luz, ... Con estas tcnicas se suelen almacenar tambin datos sobre las fuentes lumnicas, como su
posicin espacial y sus caractersticas.
Los intentos de engaar al ojo humano y que ste piense que es una imagen real se han sofisticado tanto y con
tanto xito que hoy en da es casi imposible diferenciar a simple vista (y menos en un monitor) una imagen de
mapa de pxeles de una imagen vectorial.
Una de las tcnicas es la utilizacin de fractales, que no son ms que grficos confeccionados mediante la
aplicacin de valores crecientes a determinadas frmulas matemticas. Ello hace que se vayan juntando
elementos iguales para construir formas idnticas, pero mayores, y as sucesivamente. El uso de fractales para
texturas por ejemplo, simula completamente a la naturaleza, pudiendo obtener textura el agua, las cortezas, la
26
tierra, el cielo, las hojas, y cualquier otro elemento que se nos ocurra. Los ms conocidos, pero hay miles, son
los de Mandelbrot y el de Julia, que describimos a modo de ejemplo:
Mandelbrot. xnew = a + bx + cx2 + dy + ez + f sin(pi t/8), ynew = x, znew = y, donde a y f son

constantes.
Julia. z^2 + c.
Tambin se usan vectores que indican direcciones, as se consigue mover objetos.
FORMATOS GRFICOS CLSICOS

Aunque aparecen continuamente nuevos formatos, y otros muchos caen en el olvido, hay algunos que se han
mantenido durante mucho tiempo. La potencia de las empresas que los han respaldado no han sido ajena a ello,
existiendo incluso una rivalidad entre los pesos pesados de la industria por imponer sus formatos de
propietario.
Se suelen denominar por las tres letras del tipo de fichero que generan, y se reconocen por ello, adems de que
la mayora incluye informacin sobre formato y versin en la cabecera del fichero y podremos acceder a la
misma mediante un editor hexadecimal. Es un error frecuente denominar como un formato a un fichero de otro
formato, por ejemplo cambiar GIF por JPG en la extensin, lo que lo hace irreconocible por el sistema operativo.
Basta con leer la cabecera del mismo y asignarle la extensin correcta del nombre para que pueda manejarse.
Los formatos ms difundidos son:
PIC. Picture File. Utilizado por Lotus 1-2-3. Vectorial.
PCX. Paint Brush de Z-Soft. Vectorial.
BMP. BitMap de Microsoft. Como su nombre indica, mapa de pxeles.
TIFF. Taged Image File Format. Es el utilizado por la mayora de escneres. Mapa de pxeles.
PCD. Kodak Photo CD. Mapa de pxeles.
PSD. Photoshop de Adobe. Mapa de pxeles.
PDF. Adobe Acrobat de Adobe. Vectorial.
TGA. Targa.
IFF. Amiga.
WMF. Windows Metafile Format. De Microsoft. Vectorial.
27
EPS. Encapsulated Postscript. El utilizado por las impresoras postscript. Vectorial.
GIF. Graphic Interchange Format de Compuserve. Mapa de pixeles.
JPEG/JPG. Joint Photographic Experts Group. Mapa de pxeles.
FLA/SWF. El de Flash y el de Shokwave de Macromedia. Vectoriales.
Vamos a estudiar un poco ms a fondo los ms importantes para el diseo grfico web. Los ms utilizados en
Internet, precisamente por sus caractersticas como la compresin alcanzada, son el GIF, el JPG y el PNG.
Tambin nos encontraremos con PDF, TIFF y FLA para usos muy concretos.
Formato BMP
Formato de mapa de pxeles creado por Microsoft, nativo para los sistemas operativos Windows (se dice que es
nativo porque el sistema operativo es capaz de manejarlo sin ayuda de otro software, es decir, que posee
instrucciones de bajo nivel embebidas que lo manejan). Por tanto carga muy rpidamente.
Es compatible con Windows y con OS2.
Buena calidad puesto que utiliza 24 bits por pxel, llegando a los 16,7 millones de colores.
Permite transparencia en el color blanco. sto es importante para nosotros, porque podremos hacer
sobrevolar imgenes con fondo transparente sobre otras, sin que aparezca el efecto rectngulo de las
mismas.
Slo Internet Explorer lo maneja de forma nativa. Aunque las ltimas versiones de otros navegadores
admiten cada vez mas formatos.
Formato TGA
El formato TGA es un formato de mapa de pxeles, de uso profesional, que compite con el TIFF y consigue una
gran calidad.
Utiliza 32 bits de profundidad por pxel.
Muy extendido en Artes Grficas e Infografa.
Compatible con SGI, MAC y PCs.
Formato PDF
PDF (Portable Document File) es el programa utilizado para leer este formato es el Adobe Acrobat Reader
(gratuito).
No es exclusivo de imagen, tambin soporta texto.
Ocupa poco espacio.
Compatible con pc y mac
Formato GIF
Es uno de los ms difundidos en Internet por su flexibilidad. Es muy utilizado para: logos, iconos, pequeos
grficos animados....
Mapa de pxeles con compresin 10:1 sin prdida de calidad.
Admite una paleta de hasta 256 colores, aunque son variables y seleccionables entre todos los dems
para cada grfico. Ello se debe a que slo almacena 8 bits por pxel.
Los colores utilizados se almacenan junto con la imagen en una tabla especial, la tabla CLUT.
28
Como compresin utiliza el algoritmo LZW, el mismo que utiliza WinZip (algoritmo Lempel-Ziv-Welch)
que, desgraciadamente, posee copyright.
Una modificacin del formato original, el GIF89a, se ha impuesto para aadir la posibilidad de
transpariencia, entrelazado y animacin. El original, el GIF87 no los soportaba, y deberemos tener
precaucin al guardar nuestros grficos para escoger el bueno.
Resultado de calidad Web ms predecible.
La visualizacin de los colores en los monitores y en las distintas plataformas no siempre es idntica. En
la web se habla de los 212 colores seguros, que seran los nicos que garantizaran una
transportabilidad entre sistemas.
El formato GIF utiliza esquema de codificacin de compresin run-lenght que funciona bien con
grandes superficies de color uniforme y horizontales.
En cuanto a la transparencia:
Permite asignar transparencia a un color. Se solapa mejor con fondos: efecto flotante. Muy usado para
collages. La transpariencia usa un bit para definir el color.
Como los pxeles son cuadrados, las lneas curvas salen con dientes de sierra, para mejorarlo se rellenan
parcialmente los pixeles del borde (antialiasing) que NO se hacen transparentes junto con el resto, lo que
complica la transparencia GIF89a: Efecto de halo.
Hay varias soluciones:
Fondo de la imagen igual al color de fondo de la pgina.
Crear una imagen sin antialiasing.
Utilizar transpariencia de canal alfa.
El entrelazado es una tcnica consistente en la que la carga del fichero se hace por franjas horizontales
alternas de 8 pxeles de alto, de manera que se entrev el resultado final de la imagen mucho antes de que
est totalmente cargada. A cambio ralentiza un poco la carga total. La ventaja es que los grficos no deben
descargarse por completo para que el usuario pueda ya saber si le interesa esperar o ya puede hacer clic y saltar
a otra pgina.
29
En cuanto a la animacin:
Se almacena como un librillo de imgenes e informacin sobre el tiempo de transicin entre ellas y el nmero
de repeticiones. Como es de imaginar son ficheros grandes, puesto que poseen en su interior varias
imgenes. Se puede optimizar, guardando solo las diferencias entre una imagen y la anterior, as si hay
partes comunes no deben almacenarse ni ocupar espacio.
La tabla CLUT es la tabla de colores utilizados por el grfico, para ello se recurre al indexado.
Ejemplo: Si partimos de una imagen 100x100 pixeles con 24 bits: 240.000 bits.
Se basa en que pocas imgenes precisan 16 M de colores, por lo que se eligen 256 para cada imagen y se
almacenan en una tabla (256 como mximo). Cada color mantiene su profundidad de 24 bits, pero se
referencia, por la tabla, con slo 8 bits, en nuestro ejemplo: 86.144 bits.
Ocupa un poco ms de un tercio que el original porque la propia CLUT tambin necesita espacio.
En cuanto al tramado:
El tramado es una tcnica que mejora la calidad final. Calcula tonos intermedios entre cada dos colores de
CLUT, sin necesidad de almacenar un tercer color. Es ajustable y hace la compresin mas eficaz.
Jugar con el n de colores CLUT y con la cantidad de tramado consigue los ficheros menores con ms
calidad. Se pueden tramar slo partes de una imagen (canales alfa).
Emplea el algoritmo LZW, desarrollado por Lempel, Ziv y Welch, recorriendo la imagen de lnea en lnea
(como una mquina de escribir). Guarda los cambios de color. Cuantos menos colores tenga la CLUT, mejor
comprime LZW.
Ejemplo: 15 pix rojos seguidos = 15 x rojo, en lugar de: rojo, rojo, rojo, rojo, ....
La mayora de editores grficos poseen algoritmos ms o menos optimizados para guardar las imgenes. La
cantidad de compresin alcanzada y la calidad del resultado dependen de la bondad de los algoritmos
utilizados y stos mejoran de versin en versin de los productos. Por supuesto son secretos de las
empresas y todos no funcionan igual.
Por ejemplo existen diferencias entre Adobe Photoshop e Image Ready, estando este ltimo ms optimizado
para su uso en la web. Por tanto se recomienda su utilizacin en el ltimo paso de cualquiera de nuestros
trabajos.
Guardar para web: evita tener que pasar previamente de RGB a Indexado y calcula la tabla CLUT
mnima (adaptable) y LZW automticamente.
Guardar como obliga a cambiar de formato previamente.
Los problemas del formato GIF son obvios, slo maneja 256 tonos de color o gris.
Ejemplo: Ilustraciones planas
GIF89a (reglas tcnicas de 1989 que explican como pueden ponerse juntos los GIFs) posee algunas
caractersticas muy tiles.
Formato JPG / JPEG

Formato apropiado para fotografas (<256 colores). No soporta animacin ni transparencia y obtiene un resultado
de calidad Web poco predecible.
Compresin con prdida ajustable 10:1, 20:1, 100:1.
Compromiso calidad-tamao.
16,7 millones de colores (24 bits): alta calidad.
30
Prdida acumulativa con cada compresin. Es decir, si guardamos varias veces hay una prdida de
calidad en cada guardada, de forma acumulativa. Conclusin: slo guardaremos en este formato en el
ltimo momento. Mientras tanto trabajaremos con un formato ms potente, como el PSD, que nos
permitir adems guardar informacin adicional de capas, selecciones, trazados, canales, historia, etc.
Esta recomendacin es con carcter general, siempre trabajaremos durante la fase de depuracin en
formatos potentes y sin prdida, y slo al final, cuando ya colocamos las imgenes para su envo al
host, utilizaremos formatos de compresin.
MPEG es el formato jpg en movimiento (M-JPEG, MPEG-1, MPEG-2).
Puede almacenarse en formato RGB y CMYK.
Utiliza compresin DCT (Transformacin Discreta de Coseno).
Soporta un formato progresivo (la imagen va ganando resolucin poco a poco segn se va enfocando)
semejante al entrelazado.
Se basa en que el ojo humano es menos sensible a los cambios de color que a las variaciones de brillo.
Se separa la informacin de color y brillo de cada pixel y los comprime por separado.
Utiliza bloques de 8x8 pixeles.
Funciona mal con cambios de color extremos, bien con degradados.
Una imagen desenfocada comprime mejor (est ms suavizada).
La imagen descomprimida no es igual que el original a nivel binario (el ojo no lo percibe).
La calidad de la compresin vara de programa en programa segn los algoritmos utilizados.
JPEG 2000: emplea algoritmos distintos (transformada Wavelet) y bloques de imagen de 64x64 pix.
Puede hacerse totalmente reversible. Se puede organizar por capas (varias imgenes en una), y
muchas mas ventajas, pero no ha acabado de ser aceptado e implantado.
Tiene Copyright y Compresion Labs y ya est cobrando a fabricantes como Sony (patente 4.698.672
de 1986, 10 aos antes de la difusin de JPEG, se crea que no tena, reclamada el 5-7-2002).
Formato PNG
El formato PNG (Portable Network Graphic Format) nace para sustituir al GIF en Web, debido a que el algoritmo
LZW est patentado. Tiene algunas ventajas de GIF y de JPEG.
Compresin sin prdidas (Deflacin), pero menor.
16,7 millones de colores (24 bits).
Permite transpariencia (256 niveles), capas y canales Alfa.
Hay navegadores que todava no soportan bien sus caractersticas.
No permite animacin.
No se ha impuesto como era de esperar.
Formato TIFF
TIFF ( Tag image file format.) ofrece alta calidad y comprensin sin perdida pero es incompatible con muchos
navegadores.
31
Profesional: MAC.
Photoshop lo difundi: WIN.
Rpido en la carga.
Indicado para la impresin.
JPG comprime 10 veces ms.
Para algunas cosas es bueno: negro sobre blanco (BOE).
Formato FIF
FIF (Fractal Image Format) se comenta como curiosidad, para ver cmo algunos formatos diseados
especficamente para un determinado tipo de grficos consiguen grandes compresiones, pero que fuera de ese
entorno no son aplicables.
Sonda espacial galileo (nasa):
o
o
o
Miles de imgenes del sistema solar.

Antena principal inutilizada.
Antena de baja frecuencia.
Compresin brutal sin prdida, varios megas en pocos kb.
Formato FLA
Fla es un formato vectorial utilizado por FLASH (el de Shokwave, predecesor de flash, es el SWF). Est indicado
para animaciones y est muy de moda, ha generado una legin de fans provocando una revolucin esttica en
Internet aunque algunos gurs dicen que "despista" (Jackob Nielsen).
Estndar de facto.
Alto nivel de compresin.
Precisa plugin.
Se ha convertido en un soporte artstico: Online Flash Film Festival (OFFF), FlashForward, ...
Formato VML
VML (Vector Markup Language) es un formato creado para Microsoft (IE 5 y posteriores, MS-Office 2000 y
posteriores).
No precisar plugin run-time (si es apoyado).
Basado en XML.
Herencia del formato a compatible CSS2 (combinacin muy potente).
Formato SVG
SVG (Scalable Vector Graphics) aade zoom, tipografas, bsquedas, interaccin con usuario, ...
World Wide Web Consortium (W3C) <www.w3c.es>.
No precisar plugin run-time.
32
Basado en XML (integracin CSS2 y DOM).
Apoyado por Adobe.
De momento Plugin para IE y Netscape: <www.adobe.com/svg/viewer/install/main.html>.
El formato BMP:
Es un formato de mapa de pxeles para los sitemas de Windows y tambin compatible con
OS2.
Utiliza 24 bit por pxeles y llega a los 16,7 millones de colores.
Permite transparencia en el color blanco.
El formato GIF:
El formato GIF es un fomato de mapa de pxeles sin prdida de calidad.
Tiene una paleta de color de hasta 256 colores.
Almacena 8 bits por pxel.
Para comprimir usa el el algoritmo LZW.
Se utiliza para para logos, iconos y pequeos grficos animados.
Es un formato que permite transparencias.
El entrelazado es una tnica que permite entrever el resultado final de una imgen antes de
que se descargue totalmente, ya que almacena franjas horizontales.
Permite animaciones. Las imagenes se almacenan como un librillo y guarda la informacin

sobre el tiempo de la transicin entre ellas y el nmero de repeticiones.
En Adobe Photoshop e Image Ready se pueden guardar las imgenes para la web.
El formato JPEG:
Comprime con prdida progresiva en cada compresin.
Tiene 16, 7 millones de colores.
No admite transparencia.
El formato MPEG es el JPG en movimiento.
Se puede almacenar en RGB y en CMYK.
Es un formato apropiado para fotografas.
No permite ni animacin ni transparencias.
33
Usa compresin DCT.
Soporta un formato de carga "progresivo".
EJERCICIOS
Actividades
1. Generar una imagen RGB, con fondo transparente, de 300 x 300 pxeles.
Guardar como GIF con el nombre E1-Transp.gif.
Rellenar de blanco.
Guardar como GIF con el nombre E1-Blanco.gif.
Aadir franjas horizontales de 3 pxeles de color rojo.
Guardar como GIF con el nombre E1-Horizontal.gif.
Girar 90, las franjas se vern ahora en vertical.
Guardar como GIF con el nombre E1-Vertical.gif.
Comprobar las diferencias en tamao, con el administrador de archivos.
GIF funciona mejor con superficies uniformes, con cambios bruscos de color y con distribucin horizontal de
masas. As, un fondo uniforme de 300x300 pix ocupa 1 KB.
Si aadimos franjas horizontales de otro color, ocupa 1.4 KB. Con las mismas franjas, pero verticales ocupa 2.7
KB. Esto es debido a que GIF almacena la imagen en franjas de izda. a dcha. y almacena los cambios de color.
2. Abrir una imagen nueva, fondo blanco.
Utilizar el pincel para crear manchas de color, alternando los colores.
Cuando tengamos el lienzo bien embadurnado, guardamos como PSD.
Luego guardamos como GIF, como JPG y como PNG.
Comparamos los tamaos de los ficheros.
3. Guardar una imagen en formato JPG a calidad mxima.
La misma imagen a calidad media y baja.
Comparar el resultado visual de las tres imgenes.
34
1. Uno de los formatos grficos ms utilizados en Internet es el BMP.
Verdadero
Falso
2. El formato GIF y el JPG se usan tanto porque no tienen copyright.
Verdadero
Falso
3. GIF funciona mejor con cambios bruscos de color.
Verdadero
Falso
4. JPG funciona mejor con cambios graduales de color.
Verdadero
Falso
5. PNG comprime ms que JPG, por ello acabar imponindose.
Verdadero
Falso
6. SVG y VML son formatos antiguos, ya en desuso.
Verdadero
Falso
CONCLUSIN
Los formatos grficos tienen sus ventajas y sus inconvenientes, no existe el formato perfecto.
Utilizaremos unos u otros en funcin de las caractersticas concretas de la imagen a almacenar. Siempre que se
pueda, se deben utilizar formatos de compresin sin prdida.
Conviene guardar siempre una copia de nuestros trabajos en un formato potente, como PSD y luego pasarlas al
definitivo
35
CAJA DE HERRAMIENTAS
INTRODUCCIN
En esta leccin desglosaremos las diferentes herramientas que se utilizan para el diseo de pginas web.
Haremos recomendaciones sobre cules nos parecen ms adecuadas para un tipo de trabajo y cules para otro.
Tambin expondremos programas destinados para el mantenimiento de la web que creemos. En el mercado
existen muchisimas aplicaciones para el diseo de pginas web, mucho de este software es shareware o
freeware lo que nos facilitar bastante su adquisicin
OBJETIVOS
Distinguiremos entre herramientas software y herramientas hardware que nos pueden ser tiles en
nuestro trabajo.
Repasaremos las herramientas ms importantes.
Aprenderemos tcnicas que puedan mejorar su uso.
APARTADOS
HERRAMIENTAS SOFTWARE
Dentro del diseo web se utilizan masivamente una serie de aplicaciones y programas que cubren las diversas
tareas del mismo: edicin HTML, edicin grfica, elementos multimedia, transferencia de ficheros, ...
A continuacin describiremos los grupos ms importantes.
Edicin html
Se trata de aplicaciones que nos facilitan la tarea de escribir cdigo HTML y, por tanto, de construir pginas web.
Muchos de ellos se pueden integrar con herramientas complementarias como editores grficos y suelen venir en
paquetes completos o suites, como Visual Studio o Go Live.
Editores html (1995) 1 poca, Notepad de windows, Word, Hot dog, Aracnophilia, Coffecup html,
1-4-all, y tantos otros. Se trata de programas que permitan, y permiten, escribir cdigo ASCII HTML
con algunas ayudas. La mayora shareware y freeware. Se deba estar continuamente abriendo el
navegador para comprobar el resultado final. El NotePad de Windows y el WordPad, siguen utilizndose
mucho para trabajos sencillos y pequeas modificaciones de cdigo o adaptaciones, por ejemplo para
cambiar una fecha, o una descripcin.
Editores visuales html 2 poca, 1997. Surge el concepto wysiwyg (What You See is What You Get),
de manera que mientras se trabaja en pantalla ya se dispone del aspecto aproximado final. Este
movimiento no slo afect a este tipo de programas, sino a todo el software Ofimtico en general.
Algunos ejemplos son: Microsoft Front Page 2.002, Hot dog, Ulead webrazor, Liquid fx, Hot metal 6
y posteriores, Macromedia dreamweaver, Adobe golive, ... La mayora de estos editores
evolucionaran hacia los wysiwyg.
Las etiquetas HTML, y ms segn los estndares de W3C, tienen sus normas de construccin, y estos
programas ayudan mucho a evitar errores como dejar abiertas etiquetas, o dejarnos algn carcter.
El mercado profesional se reparte:
36
1. Dreamweaver de Adobe (80% del mercado).

2. Adobe Golive.
3. Front Page.
La fusin de las dos empresas Adobe y Macromedia, asegura un completo control del Mercado salvo que surjan
nuevos competidores o Microsoft apueste seriamente por su propio editor.
Desarrollo de aplicaciones web

Si queremos que nuestras pginas sean ms dinmicas y disponer de mayores posibilidades, debemos superar
los lmites de HTML. Para ello surgen otros lenguajes de programacin embebidos en HTML que amplian
enormemente sus posibilidades: CSS, DHTML con CGIs, JavaScript, Perl, Pitn, ASP, PHP, JAVA, ColFusion.
Hay aplicaciones que nos permiten gestionarlos, al mismo tiempo que nuestro HTML: Macromedia dreamweaver
studio, Visual studio, Visual interdev, Visual j++, Visual c++, Microsoft c.net (c#), Jbuilder Borland, Lotus devpack
esuite (applets).
JavaScript aadi muchas posibilidades. Hoy en da si queremos aadir opciones de foros, chat, weblog ... a
nuestras webs, utilizamos PHP. Y si queremos incluir aplicaciones completas usamos JAVA.
Gestores de contenido
Si queremos interaccin con Bases de Datos en tiempo real, con actualizacin de contenidos, existen un grupo
de aplicaciones muy potentes, autnticas plataformas para construir y mantener nuestros websites, y con precios
ajustados a sus posibilidades. Son entornos modulares, en donde adquirimos lo necesario y que estn en
continuo desarrollo y crecimiento: Vignette, Documentum, ...
Editores grficos
Se trata de aplicaciones orientadas al manejo y modificacin de imgenes. A continuacin se muestra una lista
de los editores grficos. Adems, veremos alguno en detalle durante el curso (editores grficos).
Paint shop pro, una gran alternativa shareware.
Photoshop, el ms utilizado y la referencia indiscutible.
Image ready, el complemento web de Photoshop.
Fireworks, era un excelente editor de Macromedia, competencia de Photoshop,hasta que se produjo la

unin, es el sustituto de ImageReady.
Corel Draw, el nmero uno en vectoriales.
Adobe in Design, la alternativa vectorial de Adobe.
Flash, autnticas pelculas de Macromedia.
Kaiss power.
Bryce.
Micrograf picture publisher 8.
Painter, para algunos una excelente herramienta de creacin grfica.
Picture it.
Photodraw.
GIMP, freeware, muy bueno.
37
Editores grficos 3d:
3d studio max.
Maya.
Pov ray.
Lightwave.
Editores grficos web. Los ms usados a nivel profesional:
Adobe photoshop + image ready.
Adobe flash.
Otros de calidad profesional:
Adobe fireworks.
3d studio.
Buenas alternativas (econmicos):
Paint shop pro (shareware).
Gimp (freeware).
Generalidades editores. La mayora de los editores grficos poseen:
Herramientas de seleccin, para extractar zonas de una imagen del resto.
Herramientas de retoque para modificar esas zonas seleccionadas.
Manejo de formatos y tipos de almacenamiento grfico.
Trabajo en capas (layers) como si de una pila de hojas transparentes se tratara, pudiendo colocar
objetos en capas y trabajar sobre ellos sin afectar al resto.
Utilizacin de texturas (patterns), o mtodos prediseados de relleno de zonas con texturas naturales
o muy elaboradas.
Utilizacin de filtros y efectos especiales con unos pocos clics, ahorrando un gran esfuerzo y tiempo.
Manejo de las caractersticas de tono, saturacin y luminosidad de las imgenes.
Opciones de guardado y transformacin de formatos
Para disear una pgina web necesitamos editores de HTML que nos facilitan la tarea de escribir el
cdigo.
El concepto wysiwyg permite ver en pantalla de manera aproximada el resultado del trabajo.
Actualmente el mercado de los editores de texto se reparte entre Macromedia Dreamweaver, Adobe
Golive y Front Page.
38
Existen aplicacioneas que nos permite hacer ms dinmicas nuestras pginas web. Utilizan lenguajes
de programacin "embebidos" en HTML. Ejemplos: CSS, DHTML con CGIs, JavaScript, Perl, Pitn,
ASP, PHP, JAVA, ColFusion.
Existen gestores de contenido que nos permite una interaccin con bases de datos en tiempo real.
Tambin hay una gran variedad de editores de grficos: Paint Shop Pro, Photoshop, Image Ready,
Fireworks, Corel Draw, Adobe in Design, Flash, Kaiss Power, Bryce, Micrograf Picture Publisher 8,
Painter, Picture It, Photodraw y GIMP.
Navegadores
Internet explorer (tras tener un 98% del mercado, hoy no pasa del 50%).
Netscape navigator.
Mozilla, aumentando mucho por ser GNU (linux).
Opera.
Google Chrome, nuevo navegador de la empresa google,es freeware.
Linx, slo textos.
Servidor web
Ms internet information server iis ( windows).
Apache (mundo unix), domina la web.
Otras herramientas multimedia
Multimedia: Adobe Flash (Player). Director (Shockwave).
Editores Vdeo: Adobe Premiere.
Editores De Texto: Ms Word.
Editores de pginas web: Dreamweaver.
Banners: Ulead Gif Animator.
Maquetadores: Pagemaker, Quarkxpress.
Animacin: Adobe Livemotion.
Crear Publicaciones: Neobook Pro, Director.
Ocr: Omnipage, Textbridge Pro.
Traductores: Babylon, Power Translator.
Gestin Web: Web Site Traffic Builder.
Adobe Indesign.
Adobe Illustrator.
Adobe Type Manager.
Adobe Web Collection.
39
Go Live.
Photoshop.
Illustrator.
Livemotion.
Como Acd-see, thumbplus, vueprint, Xnview, Lview,
En realidad hacen dos funciones:
1. Facilitan la clasificacin de imgenes visualizando pequeas muestras (thumbnails o uas del pulgar) de
forma que al ver la imagen pequeita podemos moverla, renombrarla, etc con mayor comodidad. Esta
funcionalidad ha sido reemplazada por el sistema operativo, que ya permite ver el contenido de directorios en
formato imgenes en miniatura.
2. Transforman entre distintos formatos grficos.
Algunos aaden posibilidades de edicin y retoque.
Un buen sitio para descargarnos versiones de prueba y versiones freeware de los mismos es
<www.softonic.com>.
Herramientas auxiliares
Ws-ftp pro, cute ftp y otras aplicaciones para transferir ficheros de una mquina a otra.
Dicer, para trocear las imgenes.
Winzip, pkzip para comprimir los ficheros.
Real player.
Adobe acrobat (reader).
Ms-office, Corel-wordperfect, Lotus smartsuite, Star-office, paquetes ofimticos
Galeras de imgenes
Son colecciones de imagines prediseadas libres de copyright y que podemos utilizar en nuestros proyectos.
Existen muchas:
Gallery.
Corel gallery 1.300.000, 380.000.
Art explosion 600.000, 250.000,
Colecciones clip arts.
Adobe design collection,
Adobe font folio 8.0 (2.300 fuentes).
Enciclopedias,
Internet.
40
Fases diseo pelcula

Como ejemplo se exponen las fases del diseo de una pelcula de animacin:
1. Papel: dibujos desde todos los ngulos.
2. Arcilla: para conseguir referencias espaciales.
3. Modelado 3d: Maya. Realista pero con la menor geometra posible. Especial hincapi en manos y cara
(rasgos personales).
4. Set-up: preparacin de movilidad de esqueletos, gravedad, interfaces, .
5. Animacin: Adobe Premiere. Desglose del movimiento.
6. Texturas: vestir el modelo 3d.
7. Acabado y montaje.
Entre los navegadores que han tenido ms relevancia estn: Internet Explorer, Netscape Navigator,
Mozilla, Opera y Linx.
Como servidores web: Ms internet information server y Apache.
Tambin existen otras herramientas multimedia orientadas a la edicin de vdeo, de texto, de

banners,maquetadores, traductores, creadores de animacin, de publicaciones, OCR y gestin web.
Otra aplicacin importantes son los catalogadores de imgenes.
Existen galera de imgenes prediseadas en internet que estn libre de copyright.
41
HERRAMIENTAS HARDWARE
Espectro electromagntico
Slo una pequea parte del espectro electromagntico corresponde a luz visible por el ojo humano. Para
hacernos una idea:
Rayos gamma: 1024 1020 (frecuencia: c/s)
Rayos x: 1020 1017
Ultravioleta: 1017 1015
Visible: 1015 (violeta, ..., rojo)
Infrarrojo: 1015 1011
Microondas: 1012 108
Ondas de radio: 108 - 102
Espectro visible
Violeta: 400 nm longitud de onda
Azul: 460 nm
Verde: 520 nm
Amarillo: 580 nm
Naranja: 640 nm
Rojo: 700 nm
Cualquier instrumento que utilicemos para capturar imgenes, o visualizarlas, se ajustar mas o menos al
espectro visible por el ojo, pero NO exactamente. Habrn diferencias, a veces significativas. Las cmaras
digitales, los monitores, etc, no pueden ver tanto como el ojo.
Capturar imgenes
Utilizaremos diversos instrumentos y aparatos capaces de capturar una imagen ya existente en la naturaleza
(cmaras), en otro soporte (escneres), o en vdeo (tarjetas digitalizadoras).
Tambin podemos conseguir imgenes ya hechas desde diversas fuentes como Internet o cds / dvds (galeras
de imgenes).
Debemos tener siempre presente los derechos de Copyright, y respetarlos escrupulosamente. Nunca sabemos si
la prxima vez, proteger, nuestros propios trabajos.
Cmaras digitales
Poseen tres elementos:
1. Un sensor de imagen (fotosensores de tecnologa ccd o cmos) que transforma luz en electricidad. Cuantos
ms photosites ms resolucin espacial.
42
2. Un convertidor analgico/digital.
3. Un filtro rgb o cmyk que aade color.
Caractersticas a tener en cuenta a la hora de adquirirla:
Resolucin. Mnimo 2 Megapixeles para nuestros objetivos (3.2 Mp para usos ldicos y ms para usos
profesionales). Actualmente no contaremos con esos problemas ya que las cmaras cuentan con
alrededor de 10 Mp, simplemente hay que ajustarla segn la necesidad.
Cada imagen ocupar bastante (ej. 1.024x768 = 786.432). Al interpolar por software se aumenta.
Sensibilidad (expresada en iso).
Calidad del objetivo (Zeiss, Nikon).
Intensidad de color: bits por pixel (24).
Forma de conexin (usb o firewire) y software.
Tipo de tarjeta almacenamiento y tamao.
Posibilidades de disparos en rfaga, de almacenar audio y vdeo, de gestionar la edicin de imgenes,

de utilizar ajustes manuales, zoom ptico, ...
Las mejores a nivel profesional son las Nikon y Canon, aunque existe una gran variedad en el mercado
con muy buenas prestaciones.
Algunos clculos:
Una imagen de 1.024 x 768 x 24 = 2,5 mb.
43
Una imagen de 800 x 600 x 24 = 1,37 mb.
Una imagen de 640 x 480 x 24 = 0,88 mb.
Para almacenarlas se comprimen (jpg), pero siempre podemos decirle a la cmara (si sta es de calidad) que las
guarde en formato RAW, sin comprimir.
Las memorias ,actualmente, suelen ser de 1-8 GB, con lo cual es un tamao ms que suficiente para uso
domstico aunque para uso profesional se recomienda comprar las de mayor tamao o llevar varias tarjetas de
memoria. Tampoco es mala idea comprar una segunda batera y un cargador rpido.
Para usos profesionales, grandes viajes, etc, conviene disponer de un disco duro porttil donde ir descargando
las imgenes (autnomo). Con uno de 40-60 GB estaramos muy bien, actualmente la capacidad de los discos
duros es muy superior a nuestras necesidades, con lo cual el propio disco duro lo podemos utilizar para esta
funcin ms de una vez.
Cmaras digitales y fotografa: <http://www.quesabesde.com>.
44
Los instrumentos que utilicemos para la captura de nuestras imgenes se ajustarn al espectro de luz
visible por el ojo humano.
Hay diferentes maneras de capturar imgenes desde cmaras, escneres o tarjetas digitalizadoras
hasta conseguirlas de internet.
A la hora de adquirir una cmara se ha de tener en cuenta la resolucin, la sensibilidad, la calidad del
objetivo, la forma de conexin, el tipo de tarjeta de alamcenamiento, la posibilidad de disparos en
rfagas, de almacenar audio y vdeo, de gestionar la edicin de imgenes, de utilizar ajustes manuales
y de usar zoom ptico.
Escneres
La Intefaz TWAIN propia de cada modelo, nos va a condicionar enormemente la utilizacin del aparato, puesto
que aunque tenga prestaciones superiores slo podremos utilizar las que estn disponibles en TWAIN.
Debemos fijarnos en aspectos como:
Color.
Resolucin + interpolacin (2.400 ppp y 48 bits es ofertado por la mayora, y es ms de lo que

necesitaremos).
Forma de conexin (usb).
Software que le acompaa.
Existen de Sobremesa y mquinas industriales, capaces de escanear documentos a gran velocidad (cientos por
minuto).
Fases escaneado
Suele haber un pre-escaneado.
Ajustamos las posibilidades de TWAIN (resolucin) y encuadramos.
Escaneamos.
Guardamos como tiff (es el formato habitual), bmp, jpg, gif.
45
Podemos necesitar otro programa para convertir a otro formato.
Creacin de imgenes
Consiste en el uso de aparatos que nos simplifican la tarea de crear imgenes
Tabletas digitalizadoras.
Ratones de alta precisin.
Pens especiales.
Visualizacin de imgenes
Monitores.
Impresoras.
Plotters: diseo tcnico y publicidad.
Tarjetas de vdeo.
46
Monitores
CRT: tubo de rayos catdicos (obsoletos)
LCD, TFT y Led.
Impresoras
Lser
Chorro de tinta
Apis aceleradores 3d
Direct 3d directx
A la hora de elegir un escaner debemos fijarnos en las posibilidades que tenga de color, resolucin e
interpolacin, la forma de conexin y el software que le acompaa.
Para la creacin de imgenes hay que tener en cuenta intrumentos como el monitor, la impresora, los
plotters y las tarjetas de vdeo.
47
EJERCICIOS
Actividades
1. Utilizar un catalogador de imgenes freeware / shareware tipo Xnview, ACDsee o similar para pasar
una imagen de un formato a otro.
Photoshop no puede abrir todos los formatos de almacenamiento grfico, en ocasiones deberemos transformar
previamente un formato ilegible como puede ser el DIB, muy utilizado en galeras de cuadros, a otro manejable.
2. Si se dispone de una cmara digital, capturar imgenes que puedan servir de textura (suelos, cortezas
de rbol, cielos, empedrados, ...), as como otras imgenes utilizables para otros ejercicios de este curso.
Veremos que la mayora de cmaras guardarn las imgenes en formato JPG.
3. Si se dispone de un scanner, utilizarlo para capturar algunas imgenes de folletos publicitarios, libros
o revistas.
48
1. Los catalogadores de imgenes ya no tienen uso porque el propio sistema operativo les ha
reemplazado.
Verdadero
Falso
2. Las webcams utilizan alrededor de 3 Megapxeles de resolucin.
Verdadero
Falso
3. Un scanner consigue buenas resoluciones con 24 puntos por pulgada.
Verdadero
Falso
4. La mejor manera de utilizar a fondo un scanner es disponer de una buena interface TWAIN.
Verdadero
Falso
5. Las galeras comerciales de imgenes no son utilizables porque las imgenes poseen copyright.
Verdadero
Falso
6. Una buena calidad de partida, es utilizar una resolucin de 3.2 Megapxeles.
Verdadero
Falso
7. Fireworks es un magnfico editor HTML.
Verdadero
Falso
49
CONCLUSIN
Hemos visto que existen multitud de herramientas de apoyo para nuestro trabajo, no consiste en conocerlas
todas y a fondo, sino en saber que estn ah por si las llegamos a necesitar.
Las herramientas evolucionan y mejoran con el tiempo. No podemos estar a la ltima en todo.
Lo habitual es que cada uno se acostumbre a un par de ellas, o ms, porque las tiene disponibles o porque las
conoce un poco mejor.
Todo el esfuerzo invertido en conocerlas mejor, redundar en una mejor calidad de nuestros resultados.
50
EDITORES GRFICOS
INTRODUCCIN
En esta leccin haremos un breve repaso por los editores grficos ms importantes. Algunos de los que veremos
en nuestro recorrido son freeware y shareware. Pero dedicaremos una gran espacio a Adobe Phtoshop,
programa muy potente de tratamiento de imagen que ofrece una amplia gama de posiblidades de trabajo.
Aunque evidentemente no podremos ver en toda su extensin las utilidades de este programa, nos servir como
toma de contacto y abriremos la posibilidad al alumno de seguir explorndolo.
Hay que considerar que utilizaremos slo algunas de sus funcionalidades, y no sern las nicas aplicaciones que
nos pueden ayudar.
OBJETIVOS
Conocer los editores grficos que utilizamos en el curso y ver que no existen grandes diferencias con
otros.
Repasar las reas principales de la pantalla y los elementos ms utilizados.
Ver las funciones ms habituales que se realizan con ellos
QU SON?
Son herramientas software capaces de manejar grficos de diversos formatos y efectuar con ellos operaciones
de apertura, edicin y modificacin, cambio de formato, guardado, ...
Habitualmente, cada programa posee su propio mtodo (algoritmo matemtico) de almacenamiento, su formato
especfico. Lo habitual es que sean capaces de abrir ficheros grficos de formatos muy variados.
Los hay vectoriales, como el Corel Draw, por ejemplo, y de mapa de pxeles, como el Photoshop. Aunque las
ltimas versiones son capaces de combinar y mezclar ambos.
Para el curso utilizaremos Photoshop, cualquier versin a partir de la 5.5, en la que ya se incorpora Image
Ready. Cuanto ms avanzada sea la versin mejor. Podemos usar una versin trial, limitada en el tiempo, o una
de aprendizaje.
Los editores grficos sirven para manejar grficos de varios formatos y modificarlos.
Cada programa usa su propio mtodo de almacenamiento.
Hay formatos de grficos vectoriales y de mapa de pxeles.
ADOBE PHOTOSHOP (PS)
51
Es el editor grfico profesional por excelencia, el ms utilizado y el lider indiscutible del mercado. Nace para
transformar formatos grficos. En el entorno MAC (MacIntosh Apple), y colabor en la difusin y popularizacin
de este entorno para el diseo grfico.
Los equipos MAC, pioneros en las interfaces de usuario grficas y en el uso del ratn, disponan de
procesadores dedicados para sonido y vdeo, descargando la principal de esas tareas y obteniendo as un mayor
rendimiento y superioridad sobre el entorno X86. Hoy en da las diferencias han desaparecido e, incluso, es
superior en X86, con los procesadores de doble ncleo y las tarjetas grficas cargadas de megas de RAM
propia.
A pesar de ello, sigue teniendo una gran presencia en el mundo del diseo grfico, mas basado en la inercia y en
dotarlo de algo especial, ms cercano a los gurs y expertos, que a cualquier otro motivo concreto.
Photoshop se incorpor posteriormente en arquitecturas X86 y ah obtuvo una inmensa difusin. El uso de
capas, la herramienta historia y sus capacidades le convirtieron en lider indiscutible del mercado profesional. Y
tambin que fuera imitado por muchos otros.
La competencia le hizo ir aadiendo nuevas opciones, los filtros, los trazados, las acciones, ... y la inclusin de
capas vectoriales entre otras de mapa de pxeles.
En realidad no deja de ser una agrupacin de cientos de programas, la mayora basados en algoritmos
matemticos ms o menos optimizados, que hacen determinadas cosas, por ejemplo, ampliar una imagen o
reducirla, quitar un trozo, copiar, aislar, modificar, etc. Muchos de estos programas son casi aplicaciones
informticas complejas por la cantidad de opciones y parmetros que manejan. Todo ello hace que el
aprendizaje de Photoshop tenga, al menos, 3 niveles. Un nivel inicial, en el que se consigue una visin general
del producto (el que daremos en el curso, adaptado hacia el diseo grfico web, dejando en el tintero cientos de
opciones no tan necesarias para el mismo). Un nivel intermedio y uno avanzado. A partir de ah, los expertos
profundizan en determinados aspectos, como el balance de blancos o el manejo de las curvas, que requieren
seminarios especficos.
Como Photoshop es un editor de carcter general, puede aplicarse a salidas impresas, desde diseos para
revistas y magazines, hasta posters y grandes paneles publicitarios, siendo la mas utilizada en Artes Grficas.
Tambin est entrando con fuerza en el mercado del retoque de fotografas digitales, y ya no hay fotgrafo
profesional, y casi ningn aficionado, que no lo maneje. Otro posible uso es el de salidas por monitor, las
nuestras, que se vern habitualmente mediante un ordenador. Ello significa que muchas opciones para un
entorno tendrn poca o nula utilizacin en otros. Aunque no debemos negar que cuanto mejor se conozca,
mejores resultados se obtendrn.
Photoshop permite tambin generar imgenes desde cero, veremos algn ejemplo de ello.
La enorme popularizacin de Internet en los ltimos aos, y la necesidad de incorporar elementos grficos a las
pginas web, hizo que apareciera una herramienta complementaria primero, e integrada despus: Image Ready.
Muy til por las caractersticas actuales de internet y el gran problema de las imgenes web, su tiempo de
descarga. Aunque actualmente est cayendo en desuso, siendo sustituida por la aplicacin Adobe Fireworks.
Las caractersticas ms importantes de PS, y las que le dieron una merecida fama son:
Posibilidad de hacer Selecciones, aislando zonas de una imagen para aplicarles modificaciones de
manera independiente.
Uso de Capas, las imgenes pasaron a ser pilas de rectngulos transparentes, de manera que se
miraban desde arriba de la pila y dejaban ver zonas de abajo. Simplificaron mucho los diseos, con la
posibilidad de aplicar efectos slo a una capa, sin incidir sobre las dems y la posibilidad de tratarlas por
separado o de forma conjunta. De hecho, se aconseja que, en la fase de diseo, se coloque cada objeto
en una capa.
Posibilidad de utilizar Retoques, modificando y alterando las caractersticas de una zona seleccionada
o de toda la imagen, de una capa o de varias.
Filtros, son efectos prediseados que basta con elegir y escoger sus parmetros para que un trabajo
largo y complejo se convierta en un solo clic del ratn.
Herramienta historia, para deshacer parte de lo que hemos hecho, de manera que, mientras quede
memoria en el equipo, podremos ir hacia atrs.
52
Similitudes
La mayora de herramientas de diseo grfico poseen utilidades semejantes. Cuando alguna introduce una
novedad, no pasa mucho tiempo sin ser imitada.
Por tanto, los conocimientos de una de ellas, son aplicables a cualquier otra. Variar la denominacin de las
herramientas, la ubicacin y la forma del icono, pero obtendremos resultados semejantes.
Lo que marca las diferencias en sus precios, es la calidad de los algoritmos matemticos utilizados, incluso entre
versiones. Por ejemplo es mejor guardar para web desde Image Ready, ms optimizado para ello, que desde el
propio Photoshop, y conseguiremos tasas de compresin mayores.
Cuando arrancamos PS (en nuestro caso PS CS2, puede variar ligeramente en otras versiones), veremos que la
pantalla est dividida en zonas, de forma similar a cualquier otra aplicacin Windows.
En su parte superior veremos:
La barra de ttulo, con los manejadores de ventana habituales.
Una barra de Mens, desde la que se puede hacer prcticamente todo.
Una barra de herramientas, normalmente con las opciones de la herramienta seleccionada en cada
momento.
En el lateral izquierdo:
La columna de herramientas, con las ms habituales y que veremos detenidamente.
En el lateral derecho:
Los paneles, con utilidades muy interesantes. Lo iremos viendo.
53
Por supuesto, la disposicin, ubicacin y visibilidad de los elementos es configurable, por lo que la segunda vez
que lo abramos, se acordar de cmo las dejamos y nos las colocar igual. Incluso con las opciones de color
elegidas.
Conceptos Importantes
Photoshop agrupa varios programas utilizados para ampliar y reducir la imagen, quitar un trozo, copiar,
aislar, modificar, etc.
Photoshop se utiliza para diseos de revistas y magazines, trabajos publicitarios, retoque fotogrfico,
entre otras funciones.
Con Photoshop podemos hacer selecciones, usar capas, hacer retoques, usar filtros, tambin tiene un
historial de lo que hemos ido haciendo para que podamos deshacer lo que queramos.
En la parte superior de Photoshop aparece la barra de ttulo, la barra de mens y la de herramientas; en

el lateral izquierdo, la columna de herramientas y en el lateral derecho los diversos paneles.
Cuando abrimos un fichero nuevo (men Archivo > Nuevo) nos pregunta una serie de cosas, y aqu ya
empiezan las diferencias con otros fines de PS. Tambin se acordar del ltimo fichero abierto y nos propondr
abrir uno semejante.
El nombre debemos intentar que sea significativo, en caso contrario ser muy difcil acordarnos de qu imagen
era la trabajada y acabada y diferenciarla de otros cientos de imgenes que pronto compartirn el mismo
directorio.
Conviene ser muy organizados y disponer de un directorio por proyecto y de, al menos, 3 subdirectorios para
grficos. El de originales, que nunca se perdern, SIEMPRE trabajaremos sobre una copia, debemos
acostumbrarnos desde el comienzo, cada vez que abramos una imagen existente, guardar inmediatamente una
copia de trabajo en el segundo directorio, el de trabajo. Y un tercer directorio con los trabajos concluidos.
54
Adems conviene no guardar en formatos pobres o con prdida de calidad, hasta el ltimo momento (por
ejemplo JPG), y guardar siempre una copia en formato PSD, con nuestra historia, capas, canales, y tantas otras
maravillas que nos permitirn no volver a comenzar casi desde cero si hay que modificar ligeramente el
resultado.
En resumen: tres subdirectorios (originales, trabajo, acabados) y, al menos dos guardadas de cada fichero
(formato PSD y formato de publicacin).
El tamao, debe estar ajustado a nuestras necesidades, sin olvidar que la herramienta de visualizacin (el
navegador) necesita partes de la pantalla para l, luego jams podremos ocupar toda ella.
Debemos trabajar siempre en pxeles, porque deberemos contar y ajustar nuestras imgenes al pxel. Incluso
deberemos configurar las reglas de ayuda de PS para que midan en pxeles, ya lo veremos.
La resolucin habitual para salidas impresas es de 70 pxeles por pulgada o ms. Para nuestros objetivos, no
vamos a distinguir calidades por encima de 24-26 pxeles por pulgada. Por ello ser la resolucin que
utilizaremos. Ello nos ahorrar peso del fichero definitivo. PS ya nos indica que nuestro fichero ocupar, con
esos parmetros ... xxx MegaBytes (eso vaco, cuando comencemos a meter cosas dentro el tamao ir
subiendo).
El modo de color ser RGB, la manera de construir colores en monitores, mediante superposicin de luces
rojas, verdes y azules. En cambio para salidas impresas se utilizar habitualmente el espacio de color CMYK (los
colores se consiguen mezclando tintas cin, magenta, amarilla y negro como complemento).
El fondo ser siempre transparente. Salvo que indiquemos lo contrario.
Y ya tenemos nuestro rectngulo de trabajo.

En su parte superior tenemos la barra de ttulo y manejadores de ventana, y en su parte inferior el zoom, es
decir, a qu tamao estamos ampliando/reduciendo la imagen en %. Es el tamao aparente no el real. Si
queremos ver su tamao real deberemos poner un zoom del 100% (ojo, cuando manejemos varias imgenes a la
vez, si tenemos distinto zoom en cada una de ellas podemos confundirnos y pensar que algo es mas grande o
pequeo de lo que es).
55
Tambin nos indica su tamao en megas.

Si queremos ver cmodamente nuestra imagen, basta con pulsar la tecla TAB (tabulador) para que se oculten
temporalmente, hasta volver a pulsarlas, todas las cosas que puedan molestar.
Para trabajar habitualmente debemos hacerlo en pxeles, porque ello facilitar la labor de ajustar los tamaos de
las imgenes. Para configurarlo podemos hacerlo escogiendo la opcin pxeles en Preferencias > Unidades y
reglas.
56
Photoshop nos ofrece una serie de ayudas:
Reglas, (vista > reglas) aparecen arriba y a la izquierda de la imagen y nos permiten situarnos mucho
ms exactamente en un punto concreto de la imagen. Tambin conviene tenerlas en pxeles.
Guas, arrastrando con el ratn desde las reglas, podemos dejar guas fijas donde queramos. Tienen la
particularidad de que cualquier objeto que acerquemos, por ejemplo al mover un trozo de la imagen, o
colocar un texto, se pega a la gua. Tienen como un imn. Se utilizan mucho para componer. El color
se puede ajustar.
Cuadrcula (vista > mostrar > cuadrcula). Son como guas pero muchas y a una distancia fija
preconfigurable.
Cuando acabemos nuestro trabajo, para guardar, iremos a men Archivo > Guardar, que por defecto lo har en
formato PSD, el nativo de Photoshop.
Nos permitir guardar en multitud de formatos, algunos slo aparecern como elegibles cuando la imagen pueda
almacenarse as. Por ejemplo si tiene muchos ms de 256 colores, es difcil guardarlo en formato GIF.
En ocasiones tendremos que efectuar acciones previas para guardar, como acoplar capas, etc.
57
Para salir deberemos, o bien ir a men Archivo > Salir, o bien pulsar la X de la esquina superior derecha. Si no
hemos guardado nos lo indicar y nos permitir hacerlo.
PS consume muchos recursos de mquina, puesto que obliga al procesador a hacer muchos clculos numricos
(como todos los editores grficos) y utiliza mucha memoria del sistema. Se recomienda que el procesador no sea
muy antiguo y que se disponga, al menos, de 1 GB de RAM, aunque no molestarn cantidades superiores. Caso
contrario el trabajo se puede hacer muy lento.
Conviene trabajar siempre desde una copia de la imagen y tener guardado el original.
Es recomendable guardar la evolucin de nuestro trabajo en formato PSD para poder tener la historia,
las capas y dems funcionalidades de Photoshop y al concluir el trabajo guardarlo en el formato que se
quiera.
La mejor opcin es crear tres directorios: uno de originales, otro de evoluciones y otro de trabajos
concluidos.
Se debe trabajar siempre en pxeles y previsualizar la imagen para comprobar cmo se vera con el
navegador.
La resolucin recomendable debera estar por debajo de los 24-26 pxeles por pulgada.
El modo del color ha de ser RGB.
El fondo predeterminado ser transparente.
58
Si se quiere ver con comodidad la imagen debemos pulsar TAB y esto ocultar los elementos que
pudieran estar interfiriendo en la visin.
Para ayudar a la edicin de imgenes Photoshop ofrece herramientas como reglas, cuadrculas o guas.
ADOBE IMAGE READY

Consiste en una aplicacin muy semejante a PS y complementaria del mismo, optimizada para resultados web.
Nos permite utilizar algoritmos de guardado mejores que muchos otros, consiguiendo menor ocupacin de
nuestras imgenes y una mejor gestin de los guardados, pudiendo comparar con distintos formatos y
compresiones. Tambin aade opciones de efectos especiales: mouseover, imgenes en movimiento,
sectorizacin de imgenes, mapas de imgenes.
Actualmente est cayendo en desuso, sustituida por la aplicacin Adobe Fireworks.
Como se encuentra integrado con PS, basta pulsar el ltimo botn de la columna de herramientas para abrirlo, y
compartir la misma imagen que tengamos abierta en PS.
El aspecto es muy similar al de PS.
Nos ofrece mejoras para:
Segmentacin de imgenes.
Efectos rollover.
Mapas de Imgenes.
59
Imgenes en movimiento.
Descripcin general:
Arrancar, abrir, nueva, salir.
Interfaz.
Cuadro herramientas.
Cuadro capas, historia, acciones.
Cuadro animacin, sector, rollover.
Cuadro optimizar.
Cuadro color, muestras, texto, pinceles.
Cuadro tabla colores, info, estilos.
Complementa a Photoshop y ofrece la posibilidad de segmentar imgenes, efectos de rollover, creain de mapa
de imgenes e imgenes en movimiento.
ImageReady (integrado en Photoshop) est siendo sustituido por Adobe Fireworks.
ADOBE FIREWORKS
Adobe Fireworks es una aplicacin en forma de estudio diseada para crear grficos expresivos y altamente
optimizados para la Web o prcticamente cualquier otro dispositivo: desde telfonos inteligentes a quioscos y
pantallas incrustadas.
Puede crear sitios web, interfaces de usuario y prototipos sofisticados que son editables tanto en modo vectorial
como de mapa de bits.
60
PAINT SHOP PRO

Editor grfico de JASC Software, de muy alta calidad. Existe una version professional de pago con bastantes
mejoras, pero la ms utilizada es la versin shareware.
Cmo obtenerlo?
<www.corel.com>.
Revistas.
Internet.
El aspecto y las opciones son muy similares a las de PS.
61
Es un editor grfico de muy alta calidad que tiene una versin shareware y otra de pago.
GIMP
Programa freeware, que se acompaa de su cdigo fuente. Tiene gran calidad y es muy utilizado en plataformas
Linux, aunque hay versiones para Windows.
Sus posibilidades y aspecto visual es semejante al de los dems editores grficos, y el hecho de ser gratuito no
desmerece en absoluto su calidad.
Cmo obtenerlo?
<www.softonic.com>.
Es un editor freeware de gran calidad muy utilizado en la plataforma Linux.
62
EJERCICIOS
Actividades
1. Abrir PS y configurar las opciones generales para que mida en pxeles (edicin > propiedades).
Tambin desde aqu podemos elegir el color de las guas y de otros elementos.
Se aconseja recorrer todos estos mens (aunque no cambiemos nada).
2. Abrir una imagen nueva en Photoshop, de 400 x 400 pxeles, fondo transparente, RGB.
Visualizarla al 75% (zoom).
Rellenarla de color negro (edicin > rellenar).
Cambiar el tamao del lienzo a 500 x 500 pxeles, de forma que se quede el color negro en el centro
(imagen > tamao del lienzo ... colocar en el centro).
Guardar como PSD.
Cerramos el programa, vemos que el tamao de visualizacin es independiente del tamao real.
3. Abra el documento anterior y obtenga la regla (en pxeles) (ver > regla).
Coloque una gua de color amarillo cada 50 pxeles (arrastrar desde regla) (tanto en horizontal, como en vertical).
63
1. Photoshop no permite manejar imgenes vectoriales, slo de mapas de pxeles.
Verdadero
Falso
2. Image Ready es una buena opcin para salidas impresas.
Verdadero
Falso
3. Gimp es un editor grfico de calidad.
Verdadero
Falso
4. El mejor editor grfico para nosotros es el que dominamos.
Verdadero
Falso
5. Las opciones generales de los editores grficos son muy similares.
Verdadero
Falso
6. Si tenemos una imagen del doble de tamao que otra, basta con colocar la mayor al 50% mediante el
zoom y ya podemos fusionarlas sin problemas de tamao.
Verdadero
Falso
7. Photshop lee cualquier formato de mapa de pxeles, aunque algunos no podr mantenerlos al guardar.
Verdadero
CONCLUSIN
Existen mltiples editores grficos. La combinacin Photoshop + Frameworks es la ms utilizada para diseo
grfico web a nivel profesional.
Las prestaciones de muchos de los editores son similares, por lo que conocer uno un poco ms a fondo es un
buen comienzo para cualquiera de ellos.
Todas las tcnicas que aprenderemos durante el curso podran haberse practicado con cualquiera de ellos,
variando tan solo en matices y calidades de algoritmos utilizados.
64
ENTORNO Y MTODOS
INTRODUCCIN
A continuacin aprenderemos la organizacin de los equipo de trabajo que se encargarn de crear la web, sus
funciones, mtodos de trabajo, las herramientas que van a utilizar, plataformas sobre las que van a desarrollar el
diseo web... Veremos como en colaboracin cada uno tendr su acometido en la creacin de la web y cmo sus
tareas estn claramente definidas y delimitadas
OBJETIVOS
Aprender las tcnicas y mtodos habituales de organizacin de equipos de trabajo.
Conocer las necesidades de equipamiento.
Describiremos brevemente lo que debera ser, conscientes de que muy pocas veces es.
APARTADOS
EQUIPOS DE DESARROLLO
Un equipo de desarrollo web debe trabajar de forma coordinada y conjunta para conseguir eficiencia y eficacia.
Las personas expertas en diseo grfico, no suelen ser expertas, adems, en desarrollo JAVA o PHP, o en
gestin de servidores web.
Por ello hace falta un reparto de tareas surgiendo, al menos, cuatro bloques diferenciados de trabajos:
Diseo web. Generan las pginas web, dominan HTML y editores web como Dreamweaver, ...
Diseo grfico. Producen las imgenes y grficos que irn en las pginas. Muchas veces abarcan
tareas de otros elementos multimedia como audio y vdeo. Utilizan herramientas como Photoshop,
Image Ready, Flash, ...
Administracin de sistemas. Se encargan de mantener los servidores web, los gestores de bases de
datos, los entornos de desarrollo, los plugins y applets necesarios y actualizan parches y versiones.
Tambin suelen encargarse de cuestiones de seguridad: antivirus, crackers, copias de seguridad, etc.
En entornos con hosting externo, son los que realizan las transferencias al host (FTP). Dominan el
sistema operativo, los SGBD, algn lenguaje de programacin. Muchas veces el ttulo de Web Master
recae sobre ellos.
Gestores de contenidos o documentalistas. Son los que fijan los estndares, mtodos y
procedimientos a seguir para publicar algo en la web. En la Administracin Pblica existen comits
para ello. Se deben encargar, adems, de impulsar la colaboracin de los distintos departamentos de la
organizacin, estableciendo flujos de informacin y periodicidad. Son los encargados de la Imagen
Institucional. Tambin suelen ocuparse de la accesibilidad y respeto de WAI.
Si se utilizan aplicaciones interactivas, suele existir otro grupo de desarrollo que domina JAVA, PHP, JavaScript,
Perl, ...
65
Por tanto un buen equipo debe ser multidisciplinar y altamente especializado. Las tendencias actuales consisten
en externalizar algunos de estos bloques debido, en gran medida, a la escasez de recursos humanos propia. La
alternativa es que una sla persona, o unas pocas, asuman la totalidad de las funciones.
En la creacin de una pgina web hay cuatro bloques de trabajo diferenciados: diseo web, diseo grfico,
administracin de sistemas y gestores de contenidos o documentalistas.
El diseo web consiste en la creacin de pginas web propiamente dichas.
El diseo grfico consiste en la produccin y modificacin de imgenes que se implantarn en la web.
La administracin de sistemas se encarga del mantenimiento de los servidores.
Para fijar los estndares se utilizarn los gestores de contenidos.
ENTORNOS DE DESARROLLO
Los entornos ms habituales de desarrollo son los basados en plataformas Windows, aunque la parte de diseo
todava se desarrolla en muchas ocasiones bajo entornos MAC. Tambin comienzan a aparecer bajo sistemas
Linux, debido en parte a su implantacin en el sistema acadmico.
Se debe trabajar en red, con directorios comunes para los originales y fuentes de documentacin, y los de
resultados definitivos. Los directorios de trabajo y temporales pueden residir en local o en la red, segn se
decida.
Para el diseo grfico deberamos establecer un mnimo de 1 GB de RAM en nuestros equipos, con CPUs de
ltima generacin, y al menos 10 GB libres en HD. Cualquier mejora en ello redundar en una mayor eficiencia y
menores tiempos de respuesta.
Resolucin pantalla: 800 x 600, 1.024 x 768, Color verdadero y monitores de 17-21.
Conviene ir probando los resultados, y para ello nada mejor que disponer de equipos para ello, que pueden ser
antiguos y casi obsoletos, con diferentes sistemas operativos y navegadores en ellos. Incluso con diferentes
versiones. Deberamos reproducir los entornos habituales de nuestros usuarios, y antes de subir bloques de
pginas al host deberan probarse en ellos. Ms de una desagradable sorpresa podra evitarse de esta manera.
Debemos disponer tambin de un servidor de prueba, con un servidor web: Apache (solaris, linux) es el ms
difundido, MS Internet Information Server...
Y si queremos aadir otros servicios, probablemente un SGBD como MySQL y un entorno PHP puede
simplificarnos la tarea de incluir foros, chat, weblogs, incluso eLearning.
66
Las plataformas ms utilizadas son Microsoft y Linux.
Se debe trabajar en red con directorios comunes para los originales, las fuentes de documentacin y los
resultados definitivos.
La resolucin de pantalla deber ser de 800 X 600 1.024 x 768.
Conviene ir previsualizando nuestro trabajo.
Es recomendable tener un servidor de prueba
SISTEMA DE TRABAJO
Como mxima general, nunca debemos perder los originales, por ello deben estar en una carpeta de la red, que
debera ser de slo lectura para casi todo el equipo salvo el documentalista, que debera irlos colocando all.
Esta carpeta debe estar altamente estructurada, distinguiendo entre imgenes, documentos, elementos
multimedia, elementos de imagen institucional, etc.
Incluso con subcarpetas de tercer nivel, por ejemplo debajo de imgenes podran estar: fondos, logos,
navegacin, etc.
Los resultados definitivos, HTML y elementos embebidos, deben estar en otra carpeta en red con las mismas
restricciones. Slo el documentalista coloca los ficheros en ella. Existe una carpeta de pre, en donde se colocan
todos los resultados del equipo (sta tiene todos los permisos) como paso previo. Cuando el documentalista
revisa, los pasa de pre a definitivos.
Se suele incluir una organizacin por versiones de la web, de manera que toda esta estructura se replica para
cada versin.
Cuando se est elaborando un contenido, se suele trabajar en local. De manera que el miembro del equipo coge
todo lo que precisa de las fuentes (copias), las coloca en sus carpetas de desarrollo y trabaja sobre ellas.
Cuando acaba lo manda a pre.
Nunca se deben de perder los originales, que deben estar en una carpeta en red.
La estructuracin de la carpeta en red ha de ser por imgenes, documentos, elementos multimedia,

elementos de imagen estructural y dems complementos que se quieran poner en nuestra web.
Se puede subdividir est carpeta en tantos niveles como sea necesario.
El resultado tiene que estar en otra carpeta diferente en red.
La carpeta de resultados definitivos, se puede dividir segun las diferentes versiones de la web
67
EJERCICIOS
1. Crear el sistema de directorios de trabajo en nuestro disco.
2. Abrir un debate en el foro sobre la mejor manera de organizar un equipo de desarrollo.
3. Aportar las experiencias personales.
1. Los mejores equipos de desarrollo web son los que estn especializados.
Verdadero
Falso
2. Un buen diseador grfico debe saber PHP y JAVA.
Verdadero
Falso
3. Cuanta ms RAM y CPU en un equipo mejor ser la eficiencia.
Verdadero
Falso
4. El trabajo en red debe reservarse para los equipos de desarrollo amplios, no tiene sentido con 4-5
personas.
Verdadero
Falso
CONCLUSIN
Una buena organizacin del trabajo, unos recursos materiales y humanos apropiados al esfuerzo necesario, una
especializacin y divisin del trabajo, redunda en mejores resultados y mejora la eficiencia y eficacia.
68
HERRAMIENTAS AUXILIARES
INTRODUCCIN
En esta leccin aprenderemos algunas herramientas que nos ayudan a realizar determinadas tareas en el diseo
web, aunque no son propiamente de diseo. Nos facilita la optimizacin de la web . Fundamentalmente son
programas de retoque de imgenes que adaptan stas al medio, es decir, a Internet, para que al usuario le
resulte fcil gestionarlas, abrirlas, cargarlas o manejarlas.
OBJETIVOS
Repasar las herramientas ms habituales que pueden utilizarse para complementar a los editores grficos.
APARTADOS
CATALOGADORES DE IMGENES
Muy utilizados hasta hace relativamente poco tiempo. En la actualidad han sido reemplazadas, en parte, por el
propio sistema operativo, que hace algunas de sus funciones.
La mayora son freeware o shareware y podemos descargarnos muchos de ellos desde <www.softonic.com>.
Sus funcionalidades ms normales son:
Generar pequeas imgenes, thumbnails (uas de pulgar), de las imgenes existentes en un

directorio. Normalmente permiten navegar por el rbol de directorios accesibles desde el equipo en
donde estn instalados.
Abrir casi cualquier tipo de formato grfico de almacenamiento.
Detectar las caractersticas del fichero: tamao, formato, parmetros utilizados, resolucin, etc.
Hacer pequeos cambios a las imgenes, como recortarlas, girarlas y voltearlas, cambiarles la
iluminacin y brillo, y algunos permiten opciones propias de sus hermanos mayores, los editores
grficos.
Guardar en otro formato, de dicha manera transforman un formato en otro.
Mover y cambiar grupos de imgenes de una carpeta a otra.
Renombrar masivamente, con patrones de denominacin.
Efectuar pases de diapositivas. Muy utilizados para dejar pasando imgenes en un monitor. Tambin
como salvapantallas.
Efectuar tareas de modificacin sobre grupos de imgenes.
Capturar y manejar salidas desde escneres.
Captura de pantallas para hacer presentaciones.
Aunque la mayora tiene funciones semejantes, todos tienen sus particularidades y matices que pueden hacerlos
muy interesantes.
Peridicamente van apareciendo nuevos en el mercado y conviene revisar de vez en cuando la situacin y las
opiniones de otros usuarios.
Con objeto de repasar las caractersticas del grupo, nada mejor que ver los ms habituales.
69
Las funciones ms importantes de los catalogadores de imgenes son: generar pequeas imgenes, abrir
diferentes formatos grficos, detectar las caractersticas del fichero, cambiar ligeramente las imgenes, guardar
en formatos diferentes, mover las imgenes de una carpeta a otra, cambiar de nombre las imgenes de manera
masiva, hacer pases de diapositivas, modificar masivamente un conjunto de imgenes, capturas y manejar
imgenes desde escneres y capturar imgenes en pantalla.
L-View
Tiene muchas opciones de retoque y destaca por ello. Es capaz de manejar escneres e instala una interface
TWAIN para ellos.
FUTURIS
Permite capturar pantallas y gestionar webcams.
70
IRFANVIEW
Bastante completo, permite hacer muchas modificaciones sobre las imgenes.
AHAVIEW
Muy enfocado al aspecto de catalogador de imgenes.
71
XNVIEW
Un buen catalogador, con muchas posibilidades.
ACDESEE
El clsico, tiene una versin comercial muy potente.
72
EJERCICIOS
Actividades
1. Descargarse desde la web un par de catalogadores.
Instalarlos en nuestro sistema.
Observar las diferencias.
2. Utilizar Ahaview para navegar por las imgenes de nuestro directorio Mis Imgenes.
3. Cambiar el formato de una imagen desde uno de los catalogadores.
1. Algunos catalogadores son capaces de manejar escneres.
Verdadero
Falso
2. La calidad de este software es baja puesto que es, en su mayora, son gratuitos.
Verdadero
Falso
3. Son muy tiles para manejar las fotos de nuestra nueva cmara digital.
Verdadero
Falso
4. Aunque son semejantes, es conveniente conocer varios porque tienen opciones complementarias.
Verdadero
Falso
CONCLUSIN
Los catalogadores nos sern muy tiles, sobre todo, para transformar formatos. Tambin para aplicar
modificaciones, redimensionados, etc. a grupos de imgenes.
Otras funciones como clasificacin, renombrado, etc. podrn sernos tambin de inters al igual que la posibilidad
de hacer pases de diapositivas.
73
FASES DE CREACIN DE UN WEBSITE
INTRODUCCIN
El trabajo de creacin de un website no es algo que se pueda desarrollar en un rato, se trata de un largo proceso
que conlleva diferentes fases, en las que veremos como poco a poco nuestra web va creciendo y evolucionando.
En esta leccin desglosaremos esas fases y explicaremos resumidamente en que consiste cada una de ellas.
Tambin se darn consejos para que nuestra creacin resulte un xito para los usuarios, pues ese es el fin de
los websites, que reciban muchas visitas y sean consideradas tiles por los usuarios.
OBJETIVO
Aprender las tcnicas y mtodos habituales de creacin de websites.
Describiremos las fases por las que atraviesa un proyecto, independientemente de su envergadura.
Veremos aspectos como el xito de un web, cmo medirlo, y la usabilidad, es decir, cmo hacer que
sea fcil de manejar para los usuarios.
Conoceremos las distintas fases del desarrollo de un web para planificar los diseos grficos.
APARTADOS
FASES DE CREACIN DE UN WEBSITE

Cualquier proyecto atraviesa por unas fases concretas:
Delimitacin del concepto general.
Fase 1. Planificacin.
Fase 2. Produccin.
Fase 3. Postproduccin y marketing.
Los condicionantes van a ser el tiempo disponible, el dinero y, por supuesto, el talento.
Construir un web es semejante a construir un programa de televisin y pasa por los mismos tems.
Concepto general
Es lo primero que debemos pensar. Hay que conocer el problema, y hay que centrarse en los problemas
especficos.
Se puede hacer si nos planteamos una serie de preguntas, y cuanto ms concretas podemos dar las respuestas,
mejor:
Fijar el objetivo general: qu.
Eleccin del medio, a veces la web no ser el ms apropiado, en otras ocasiones ser slo un
complemento a otros: cmo.
Identificar a la audiencia: quin.
Cundo debe estar realizado.
74
Cada vez ms, nos encontramos con que lo que se pretende es un rediseo, y no la construccin de un nuevo
web desde cero. Es decir, habr unos condicionantes previos, una gua de estilo, una imagen institucional, unos
diseos previos, que deberemos seguir.
Fase 1. Planificacin
Es una fase de pensar y de preparar, su resultado final ser una gua de estilo, unos bocetos de las pginas
principales, un mapa del web, y se elabora un prototipo.
Debemos centrarnos en aspectos como:
Objetivo, plazos, recursos.
A quin se dirige?: portales, intranets, pblico, profesionales.
Dnde se ubicar?: servidor, espacio necesario, servicios.
Accesibilidad vs seguridad: firewalls.
Quin lo ha encargado? Qu desea realmente?
Para ello:
Se efecta un Brainstorming: sobre los contenidos y sobre el diseo.
Se elige la idea-eje, la que va a dominar el desarrollo.
Se define la Estructura general: mapa del site, cartografiado y navegacin.
Entorno e interfaz.
Eleccin de tecnologas y herramientas.
Boceto de la pgina de inicio y de las pginas claves.
Composicin, colores, tipografa, imagen corporativa, usability: se confecciona una gua de estilo.
Adecuacin a la audiencia: prototipo.
Fase 2.- Produccin

Es una fase de desarrollar y de probar. Sus resultados sern todos los materiales de la web, ya preparados.
Ya existe un prototipo previo, no debemos pues improvisar. Si se nos ocurre la super-idea ahora, se deja en el
cajn para la versin dos. Salvo que sea tan buena que se decida aplicarla y, por tanto, se comience de nuevo.
Se define la Pgina de inicio: forma de maquetar con marcos o con tablas.
Se define el men principal.
Se desarrollan.
Diseo de fondos, preparacin de imgenes individuales. Aqu entrarn a fondo los diseadores
grficos.
Se prepara el Contenido textual.
Se genera el contenido Audio y multimedia.
Revisin por el cliente y visto bueno, a poder ser por escrito.
Montaje final y pruebas
75
Fase 3. Postproduccin
Es una fase prctica. Consiste en poner la web en marcha y mantenerla.
1. Aspectos prcticos (los veremos a continuacin).
Debemos disponer ya de todos los servicios necesarios contratados.
2. Montaje en el host y puesta en marcha.
Envo al servidor de todos los ficheros.
Adecuacin: rbol, links. Revisin de que todo funciona.
Pruebas de funcionamiento.
3. Publicidad.
Promocin y difusin. Buscadores.
4. Anlisis de resultados.
ndices audiencia: pblico real.
Estudio de eficacia.
5. Mantenimiento.
Conclusiones y rediseo.
Tener en cuenta:
Las Modas existen, y el diseo web no es una excepcin. Afecta a aspectos como:
Tipografa: verdana y trebuchet parecen estar de moda.
Tonos pastel.
Utilizar tablas para componer.
Lneas curvas.
No debemos huir de las modas, pero tampoco deben convertirse en condicionantes insalvables.
Aspectos prcticos
Una vez desarrollada la web, aparecen una serie de necesidades:
Dominios. Elegir y contratar uno es un paso imprescindible, salvo que ya se posea. Los dominios se
alquilan por un tiempo (no se adquieren de por vida) y en algunos casos estn ya muy saturados (los
.com por ejemplo).
Subdominios. Probablemente, si nuestro web va a ser grande, precisemos subdominios. No todos los
proveedores de hosting nos lo van a permitir.
76
Contratar un proveedor dns, es decir, un servidor que diga a los dems dnde encontrar nuestras
pginas. Normalmente va incluido con el hosting, pero no se obtendr un dominio sin l.
Contratar el hosting o parking de nuestras pginas. Hay que comprobar la cantidad de

almacenamiento que nos ofrecen, los Gb transferencia mensual (uno de los aspectos mas importantes),
el nmero de cuentas Pop3 de correo, y si existen extras como aplets, estadsticas, panel control, ftp, ...
Puesta en marcha
Subir el site al server de hosting, al directorio que nos indique el admin: ftp.
Probar y ajustar, sobre todo que no hay enlaces rotos.
Index.htm, default.htm son los nombres de la pgina de inicio habitual, y para qu cambiarlo.
Sintaxis: / vs \ segn el entorno sea unix o windows.
htm vs html las dos terminaciones son vlidas, hay que escoger una y hacerlo siempre igual. Nos
evitaremos muchos dolores de cabeza.
Alta en buscadores.
Conseguir un buen posicionamiento, existen algunas tcnicas.
En la creacin de una pgina web existen cuatro fases principales: delimitacin del concepto general,
planificacin, produccin, postproduccin y marketing.
Para delimitar el concepto general hay que pensar en lo que se va hacer, elegir el medio, identificar la
audiencia y pensar en el tiempo que tenemos para hacerlo.
En la fase de planificacin evaluaremos aspectos como objetivos, plazos, recursos, a quin se dirige,
dnde se ubicar, la accesibilidad y la seguridad y, qu y quin nos ha encargado el proyecto.
En la fase de produccin nos dedicaremos a desarrollar y probar. Se definirn la pgina de inicio, el

men principal, el diseo de los fondos, el contenido textual, el audio y multimedia y se esperar al visto
bueno del cliente.
La fase de postproduccin a su vez tiene cinco subfases: aspectos prcticos (dominios, subdominios,
proveedores...) , montaje en el host y puesta en marcha, publicidad, anlisis de resultados y
mantenimiento.
Finalmente subiremos la web al server de hosting, la probaremos y realizaremos los ajustes necesarios
y la daremos de alta en los buscadores.
XITO EN LA WEB
Porque no basta con estar. Qu objetivo tenemos, si se cumple pues ya est, o no?
Websites con xito: cmo medir?

Podemos medir impactos, adecuacin, resultados, premios. En unos casos interesar todo ello, en otros slo
algunos de esos aspectos.
Hay dos maneras de hacerlo:
Contadores, aplicaciones software que miden todo lo medible y alguna cosa ms.
Empresas especializadas, incluso con encuestas a usuarios (en nuestra propia web o aparte).
77
Los oscar web:

Los webby, en San Francisco
Alrededor de 150 nominados: BBC, GREENPEACE, ONU, ...
Otros premios: iBest
Websites de xito. Aprender de los triunfadores. En enlaces hay algunas referencias.
Compaas web Silicon Alley (manhattan): 5.000 empresas, 100.000 empleados. Confluencia
espectculo y ocio con Internet, es decir, contenidos y tecnologa. Ms informacin en los enlaces.
El tao de la web
Es una recopilacin de mximas de los distintos gurs del medio, que siempre nos pueden hacer pensar un
poco las cosas antes de hacerlas:
1. El contenido debe ser el rey, regalar calidad.
2. Conocer a la audiencia.
3. Construir comunidades: interactividad.
4. Cuestionar lo convencional, romper los lmites establecidos, sorprender.
5. Interfaces instintivos.
6. Resaltar nuestros puntos fuertes, delegar el resto.
7. Llevar el envoltorio tecnolgico al lmite.
8. Vivir el medio.
9. Planificar y organizar.
10. Sencillez bien diseada, sin olvidar la creatividad.
Errores habituales
Desconocimiento del medio.
Equivocar los objetivos.
Recursos inadecuados.
Mal diseo.
Errores de carga en vnculos, enlaces rotos.
Inducir a confusin variando la interfaz. Dificultar navegacin.
Poca calidad del contenido.
Mala eleccin de colores, tipografa.
Lentitud de carga.
Poca frecuencia de actualizacin.
Construir un buen web es un proceso laborioso, lento y evolutivo. Manda el usuario, por lo que habr que
ponerse en su lugar.
78
nlaces
<www.newrock.es>.
<www.word.com>.
<www.iconmedialab.es/ei>.
<www.yahoo.com>.
<www.planet9.com>.
<www.doubleyou.es>.
<www.brandmedia.com>.
<www.iconos.net>.
<www.wysiwyg.net>.
<www.cg21.net>.
<www.b-r.es>.
<www.lamosca.com>.
<www.cp-interactive.com>.
USABILIDAD
Cmo hacer sitios web eficaces y eficientes.
Barbarismo: usability. Difcil traduccin.
Criterios que debemos tener en cuenta al disear para que los visitantes:
Se sientan cmodos.
Tengan un entorno amigable.
Naveguen con facilidad.
Encuentren fcilmente lo que desean.
Cumplanos nuestros objetivos en tres pasos:

1. Conocer al visitante.
2. Qu no hacer?
3. Cmo atrapar al navegante?
Conocer al visitante
Disear por y para los visitantes. Caractersticas del internauta:
Impaciencia desmedida: si la pgina tarda o le cuesta llegar a lo que busca ms de dos clicks se va ... y
no vuelve .
Evitar pginas extensas y abigarradas, textos densos y montonos.
No tolera informacin desactualizada.
79
Odia dar informacin personal.
Si se va, no vuelve.
No lee todo, simplemente hojea detenindose en lo que le interesa.
Se miran: primero los titulares y resmenes, luego las listas, los grficos (no siempre), al final los textos
(poynter institute, mayo 2.000).
En transacciones, adems se busca:
Confidencialidad.
Seguridad.
Servicio y garanta.
Datos recientes:
62% compradores usa abandonan antes de acabar
60 % webs espaolas son lentas
46 % usuarios abandonan si tarda > de 20 (20 kb), y muchos si > 10
40% de los que buscan empleo en USA, no pueden poner curriculum en lnea
Qu suelen buscar:
Informacin.
Un buen negocio (algo bueno a precio razonable).
Entretenimiento.
Conocer a los nuestros;
Qu tecnologa suelen usar.
Cul es su nivel de formacin.
Cul es su edad media.
Desde dnde y a qu horas se conecta.
Cmo:
Herramientas de control y seguimiento.
Encuestas.
Qu no hacer?
Declogo de errores, Jacob Nielsen:
1. Crear pginas que tarden en descargarse.
Alardes tcnicos.
Muchas imgenes.
o
o
Solucin: sencillez y funcionalidad.

Ejemplo solucin: Yahoo, Altavista.
80
2. Abusar de frames (marcos).
No aportan nada especial.
Acarrean muchos problemas.
Incompatibles con navegadores antiguos.
Los motores de bsqueda no los reconocen.
Incrementan el tiempo de descarga.
Los navegadores antiguos no los incluyen en favoritos.
Dificultan y confunden la navegacin.
La direccin de pgina no aparece en barra de navegador.
3. Utilizar siempre las ltimas tecnologas.
El entorno del diseador no es el promedio del de los visitantes.
4. Animaciones y banners en constante movimiento.
Distraen y dificultan la concentracin.
5. Utilizar urls complejas.
No se memorizan fcilmente.
Solucin: Nombres cortos, fciles, pegadizos y relacionados con nosotros.

6. Pginas hurfanas (las que desentonan con las dems).
Parecen un pegote.
Dificultan navegacin e inducen al error.
7. Apoyo a la navegacin insuficiente.

Solucin:
Arrastrar formatos.
Mens claros y sencillos.
Botn home.
Mapa del web.
8. Uso de colores no convencionales (colores de facto).

Ejemplo: Enlaces en azul
9. Informacin desactualizada.
Nadie vuelve para ver lo mismo.
La fecha de ltima actualizacin es un arma de doble filo.
10. Redactar sin pensar en los visitantes.

Solucin:
81
Usar titulares llamativos y descriptivos.
Lo ms importante siempre al principio.
Poner pequeos resmenes debajo de los ttulos.
Prrafos y oraciones cortas.
Una sla idea en cada prrafo.
Para profundizar, usar enlaces.
Destacar las palabras o frases ms importantes.
Utilizar vietas para sistematizar ideas.
Evitar pginas largas (scroll).
No saturar las pginas, no abigarrar.
Conclusin:
Hacer siempre un test de usabilidad de nuestros sitios web
Cmo atrapar al navegante?
Es ms importante que vuelvan que capturar nuevos internautas.
Que encuentre rpido lo que busca.
Que lo consiga fcilmente: intuitivo.
Detectar rpido lo que quiere y ayudarle.
El arte y la innovacin es bueno, pero no lo ms importante.
Lo que no ayuda, estorba.
Concrecin: mejor cuatro palabras que cinco.
Economa en las grficas: si no aaden valor, se quitan.
Lenguaje comprensible: huir de la jerga y tecnicismos. Ajustar al usuario.
Estructura uniforme.
Interactividad.
Personalizacin, cada vez ms.
Para que una web tenga usabilidad hay que buscar la calidad, la rapidez, la agilidad, el anonimato y la
gratitud.
82
En materia de transacciones tiene que buscar la confidencialidad, la seguridad, dar servicio y

garantas.
Diez errores muy ferecuentes recogidos por Jacob Nielsen son: crear pginas lentas, abusar de los
marcos, utilizar simpre tecnologas punteras, usar urls complejas, pginas que no estn en sintona con
las dems, la poca navegabilidad, utilizacin de colores raros, desactualizacin del contenido y no
pensar en el usuario.
Es importante que el navegante encuentre rpido lo que quiere, que sea una interfaz intuitiva, que
innove, que sea concreta, con un lenguaje comprensible y una estructura uniforme, y que sea interactiva
y personalizada.
EJERCICIOS
Actividades
Se basarn en la construccin de una web de ocio.
1. Crear en el foro una tormenta de ideas para elegir las posibles lneas eje de una web de ocio.
Queremos construir una web de ocio y buscamos la idea.
Qu posibilidades debemos ofrecer. Qu buscarn los usuarios.
Qu tipo de usuarios sern.
2. Disear una Gua de estilo para nuestra web de ocio.
Fijar resolucin.
Eleccin tipografa.
Eleccin colores globales.
Diseo general pginas.
Posicin logotipos, imagen institucional.
3. Disear los elementos de navegacin y la primera pgina de nuestra futura web.

4. Mapa de nuestra web.
83
. Lo primero a hacer para construir un website es encender el ordenador y ponerse a teclear.
Verdadero
Falso
2. Se recomienda destinar bastante tiempo a la fase de planificacin antes de construir nuestra web.
Verdadero
Falso
3. Adaptar la web a las necesidades de los visitantes es imposible.
Verdadero
Falso
4. Los elementos parpadeantes y mviles son muy apropiados en nuestras webs.
Verdadero
Falso
CONCLUSIN
Disear un buen website es una tarea larga y ardua. Si respetamos las distintas fases, no slo haremos mejores
webs, sino que simplificaremos enormemente su desarrollo y mantenimiento.
Ser minuciosos y ordenados es imprescindible.
84
DISEO Y COMPOSICIN
INTRODUCCIN
En esta leccin enunciaremos cada uno de los elementos que entran en juego en una pgina web: videos,
grficos, publicidad, dibujos... Tambin analizaremos el punto de vista de los programadores web frente al de los
diseadores web y explicaremos las diferencias del trabajo de cada uno de ellos. Y por ltimo expondremos una
serie de limitaciones en el diseo de nuestra web y daremos algunos consejos generales y especficos para que
se adapte al pblico que queremos captar
OBJETIVOS
Veremos que las reglas de la pintura, la fotografa, el vdeo ... son perfectamente aplicables al entorno web.
Y aunque se trate de un nuevo medio de comunicacin, se pueden utilizar mtodos y procedimientos ya muy
asentados, aunque siempre aparecern otras maneras de hacer las cosas. No debemos evitarlo, sino ms bien
provocarlo.
APARTADOS:
FUENTES DE DISEO GRFICO
Las fuentes de diseo grfico son:
Dibujo y pintura.
Fotografa.
Vdeo.
Multimedia.
Publicidad.
Publicaciones.
Cine y televisin.
Y, en general, cualquier tcnica que trate la imagen de alguna forma. Lo que significa que tcnicas utilizadas en
estas materias sern trasladables y adaptables al diseo grfico web.
DISEO WEB
Programadores vs diseadores
Al principio de Internet, las primeras pginas web, eran desarrolladas y diseadas por las mismas personas. El
programador aprenda rudimentos de algn editor grfico y haca lo que poda.
Hoy esto ha cambiado. Han surgido especializaciones y expertos en diseo. Lo que antes se poda aprender en
una semana, ahora es una titulacin universitaria. Por tanto, el diseo grfico web se ha enriquecido con multitud
de aportaciones de otros campos y, al mismo tiempo, ha ido evolucionando y experimentando por s mismo.
85
Aspectos como la composicin general, distribucin de objetos, homogeneizacin, el uso apropiado de los
colores, las tipografas, iconos, solapas, logotipos, imgenes, sonido, multimedia, son importantsimos a la hora
de disear.
A pesar de ello, y aunque existan reglas, normas, tcnicas y procedimientos establecidos, el diseo grfico web
no est al margen de las modas, pudiendo aparecer elementos y formas de actuacin que nacen, se copian y
desaparecen, en un plazo de tiempo impensable para otros medios menos dinmicos.
No debemos olvidar nunca que diseo sin contenido no es nada. La frmula a aplicar es: diseo + contenido.
Podemos hacer el mejor diseo del mundo, pero si los contenidos no son de inters para los navegantes,
simplemente no visitarn nuestras pginas.
La composicin general, la distribucin de objetos, la homogeneizacin, el uso apropiado de colores, las

tipografas, los iconos, las solapas, los logotipos, las imgenes, el sonido, el multimedia tiene una
importancia grandsima para el diseo web.
Existen reglas, normas, tcnicas y procedimientos establecidos, aunque el diseo grfico web no est al
margen de las modas.
La clave es trabajar tanto en el diseo como en el contenido.
ELEMENTOS BSICOS
Los elementos bsicos de pgina son:
Textos.
Grficos e imgenes.
Links.
Formularios.
Frames-marcos.
Elementos multimedia.
Eventos-acciones, subprogramas.
Y todos ellos deben ser sometidos al diseo.
Los siete elementos principales de una pgina son: los textos, los grficos e imgenes, los links, los
formularios, los marcos, los elementos multimedia, y los eventos-acciones.
LIMITACIONES DEL DISEO
Aunque pensemos que nuestro diseo es excelente, va a estar condicionado por una serie de limitaciones que
dependen no solo de los usuarios, sino tambin del entorno en que van a ser vistos.
86
Todos los usuarios no son iguales, existe una diversificacin de usuarios, con sus gustos, hbitos y
costumbres. Lo que en una sociedad transmite la sensacin de duelo (el negro en la occidental por ejemplo)
puede no ser entendido en otra (la hind utiliza el blanco como color de duelo, por ejemplo). Debemos pues
conocer perfectamente a nuestros usuarios.
Tambin existe, cada vez ms, una diversificacin de medios de acceso a Internet. Ya no es necesario que el
dispositivo de salida sea un monitor de ltima generacin, sino que puede ser un telfono mvil, un PDA o
similar. Sus posibilidades son bastante menores y por mucho que hayamos trabajado una imagen, si el
dispositivo slo puede ver garabatos, pues es lo que ver.
Existe por ejemplo toda una rama del diseo web dedicada a estos nuevos dispositivos de acceso.
Tambin vamos a depender de las plataformas y del S.O. del usuario, que pueden modificar el aspecto de
nuestros diseos.
El hardware: monitor y tarjeta grfica que posea, la cantidad de ram, cpu, sonido, velocidad de descarga y
ancho de banda, son factores que tambin influirn.
El software utilizado, tanto navegadores como su configuracin, plug-ins instalados, prestaciones del proveedor,
calidad de conexin, resolucin de pantalla, tamao de las pginas, ... depender de la resolucin del monitor ...
14 pulgadas
640 x 480.
15 pulgadas
800 x 600 (svga).
15 pulgadas
832 x 624 (mac).
16/17 pulgadas
832 x 624.
19 pulgadas
1024 x 768.
21 pulgadas
1280 x 1024, ...
... y tambin de las zonas ocupadas por otro software, as el navegador, y a veces el S.O. segn la configuracin
particular de cada usuario y el espacio real disponible.
total: 800 x 600
navegador: 800 x 118 800 x 150.
pgina: 800 x 482, 800 x 450; 500 x 472.
banner: 468 x 60.
Hay que pensar en todos los tipos de usuarios que puedan ver la pgina web, porque no todos los
usuarios son iguales.
Tambin hay que reflexionar sobre los tipos de dispositivos desde los que el usuario va a realizar su
acceso a nuestra pgina ya que en la actualidad existen multitud dispositivos.
Otro aspecto a tener en cuenta es el tipo de plataforma o sistema operativo que el usuario puede
utilizar.
Por ltimo, tambin hay que pensar en el hardware y el software del usuario.
LA COMPOSICIN
87
Debe ser agradable a la vista y los elementos bien elegidos y convenientemente dispuestos: buscamos lo que
denominamos armona.
Aunque, en ocasiones, buscamos otras cosas e introducimos audacia, provocacin, sorpresa, etc.
Reglas clsicas
La reglas clsicas de la composicin son, no slo aplicables a nuestras imgenes, sino tambin a nuestras
pginas. Todas ellas podemos pensarlas, y aplicarlas a ambas.
Lo que no significa que para que una imagen, o una pgina, sea agradable a la vista cumplir todas y cada una de
las reglas. Todo lo contrario, habitualmente slo se usan unas pocas, una o incluso ninguna. Pero si no sabemos
cmo mejorar una imagen, aplicar una de las reglas de composicin o varias, puede mejorarla sustancialmente.
Regla 1: debe haber un solo centro de inters en cada imagen. Ms pueden distraer y evitar que el navegante
reciba el impacto que hemos preparado.
Regla 2: Dnde se coloca ese centro de inters?
Hay dos opciones: centralizado y regla de los tercios.
Un motivo central:
Atrae la atencin.
No da sensacin de movimiento.
Buena para motivos simtricos y estticos.
Regla de los tercios:
Consiste en dividir el rectngulo de nuestra imagen en zonas mediante dos rayas virtuales horizontales
y otras dos verticales, todas ellas equidistantes. Aparecen as 9 rectngulos. La regla de los tercios
indica que los cruces de las rayas son buenos puntos para colocar los focos de inters. Tambin
podemos utilizarla parcialmente, por ejemplo tomando slo una de las rayas y colocando los elementos
de nuestra imagen sobre ella.
Da sensacin de movimiento.
Consigue ser agradable a la vista.
Regla 3: unicidad de direccin: vertical, horizontal u oblcua.

Regla 4: rechazar simetra. La naturaleza no es simtrica, lo parece, pero la perfeccin no existe en la
naturaleza. El ser humano lo sabe y as como no hay dos rostros iguales, tampoco lo son si juntamos dos zonas
derechas y dos izquierdas de un mismo rostro. Una pequea imperfeccin hace mas natural y agradable a la
vista una imagen. Evitar que el horizonte est en medio.
Regla 5: reparto de masas. Los bloques de la imagen deben estar compensados.
Regla 6: dosificacin de luces y sombras. Igual que las masas, tambin las caractersticas de color, luz y sombra
deben estar equilibradas.
Regla 7: el motivo principal debe destacar.
Regla 8: los motivos secundarios deben dirigir hacia el principal.
Regla 9: ritmo, el ritmo es agradable a la vista.
88
Regla 10: evitar lneas dominantes en fondo.

Regla 11: no contrastes bruscos, tanto en tonos como en colores.
Todas ellas se resumen pues en que deben de existir focos de inters y que todo lo dems debe conducir hacia
l, sin enmascararlo, ni competir por la mirada del navegante.
Las reglas estn para ayudarnos a conseguir la inspiracin necesaria y obtener buenos diseos, pero no deben
ser una obligacin, se pueden conseguir excelentes resultados saltndose las reglas, pero para ello hay que ser
un genio ... o tener suerte.
Existen once reglas bsicas sobre la composicin de las pginas web: crear slo un centro de inters
en el centro de la pgina o siguiendo la regla de los tres tercios, tiene que haber una unicidad de direccin,
rechazar simetra, repartir las masas, dosificar las luces y las sombras, destacar el motivo principal, los motivos
secundarios deben dirigir hacia el principal, deben de tener un ritmo agradable, evitar lneas de fondo y evitar
contrastes bruscos.
EJERCICIOS
1. Abramos una fotografa de un rostro humano de frente con PS (si es propia, pues ms risas). Vale una
foto de carnet escaneada, o una fotografa nuestra. (Es mejor hacer este ejercicio cuando ya conozcamos las
tcnicas de seleccin).
Dupliquemos la capa (capas > duplicar).
Repitamos la operacin otra vez.
Ahora disponemos de tres imgenes idnticas, en tres capas.
Si observamos la paleta capas, veremos que las tres poseen un ojito a su izquierda. Quitemos el ojo a
la capa de fondo, para que no se visualice, nos servir para mantener la imagen original a efectos de
comparacin.
En la capa ms superior, seleccionemos la parte izquierda del rostro y la duplicamos, desplazndola

hasta que encaje con la izquierda original. Tenemos as dos partes izquierdas del rostro.
En la capa intermedia hacemos lo mismo con la parte derecha.
Observemos el resultado. No se parecen mucho verdad?, ni siquiera con la original.
2. Abrir una foto de primeros planos e intermedios, que no cumpla la regla de los tercios.
Jugando con la herramienta recorte, intentemos seguir la regla de los tercios obteniendo una imagen
ms pequea pero con el motivo principal bien colocado.
Comparemos ambas.
Cul nos gusta ms?
3. Intentemos aplicar el resto de reglas a imgenes que compongamos en collage.

Podemos sacar las imgenes originales de donde queramos.
89
1. Las reglas clsicas de diseo deben respetarse siempre.

Verdadero
Falso
2. Una de las reglas principales consiste en que no debemos colocar nunca el motivo principal en el
centro.
Verdadero
Falso
3. El colocar el horizonte en el medio de la imagen da profundidad.
Verdadero
Falso
4. Debemos huir de colocar elementos repetitivos en nuestras imgenes.
Verdadero
CONCLUSIN
Aunque hay diseadores que aplican de forma innata las reglas, que no son ms que conclusiones de estudios
sobre la materia, a los dems nos viene muy bien conocerlas porque en ocasiones nos ayudarn a mejorar
nuestras imgenes.
Eso no significa que deban aplicarse todas ellas y en todas las imgenes. La realidad es que comprobaremos
que nuestras imgenes cumplen una o dos reglas, ... o ninguna. Las reglas estn para ayudar no para impedir.
90
EL COLOR Y OTROS ATRIBUTOS
INTRODUCCIN
El color es un elemento muy importante en cualquier diseo, pero si se trata de captar y retener usuarios en
nuestra pgina web debemos de conocer algunas teoras acerca de ste, sobre como combinarlos para crear un
efecto deseado o cules son los que hacen la lectura ms ligera. Tambin existen diferentes modos de color que
repasaremos someramente en esta leccin, con el fin de utilizarlos adecuadamente en cada situacin.
OBJETIVOS
Profundizar en el estudio de los atributos de las imgenes que regulan su color, luminosidad, brillo, etc.
El color es fundamental en nuestros diseos y vamos a poder transmitir sensaciones a los usuarios mediante un
uso apropiado del mismo.
Tambin vamos a conseguir una mayor accesibilidad a nuestras pginas si elegimos apropiadamente los
contrastes entre primer plano y fondos.
Daremos un poco de teora, pero como el alumno entender a manejar el color es practicando.
APARTADOS
EL COLOR EN LA NATURALEZA
Los Colores del arco iris, los bsicos de la naturaleza son: rojo, anaranjado, amarillo, verde, azul, ail y violeta.
Todos los dems se pueden obtener mediante combinaciones de ellos.
Hay dos maneras de conseguir que nuestros ojos vean el color: sntesis aditiva y sntesis sustractiva.
Sntesis aditiva
Se consiguen los colores aadiendo unos colores a otros, mezclndolos.
As, la luz blanca es la suma de rojo, verde y azul (rgb, red + green + blue = rva, rojo + verde + azul).
Se genera sumando luces, por lo que es el mecanismo que utilizan los Monitores y otros dispositivos.
Sntesis sustractiva
Los colores se obtienen evitando reflejos desde una superficie. Cuando la luz blanca incide en un cuerpo,
debera rebotar entera, pero esto no es as, sino que dependiendo de las caractersticas de la superficie del
objeto se reflejan slo unas determinadas longitudes de onda lumnicas y decimos que el objeto es de tal color,
porque ese el el color que se ha reflejado tras quitarle colores a la luz blanca.
La pintura negra es la suma de: cyan, magenta y amarillo (cmyk - cman).
91
As es como funcionan los pigmentos. Y as se consigue el color mediante dispositivos de impresin.
Cmo vemos el color?

La luz, proveniente de una fuente de iluminacin o varias, directa o indirectamente, atraviesa la crnea, el
cristalino y el humor vtreo y llega a la retina, donde es traducida a impulsos nerviosos.
Los 6 millones de conos de cada ojo procesan:
La informacin cromtica (rojo, azul y verde), parece ser la ms importante.
La informacin acromtica (blanco, negro y gris).
En malas condiciones de luz, los 10 millones de bastones de cada ojo procesan:
La informacin acromtica (blanco, negro y gris).
Es decir, tanto conos como bastones son capaces de ver el color, pero unos se activan con buenas condiciones
de iluminacin y los otros con malas.
Percepcin del color

Depende de la persona. Los impulsos nerviosos codificados llegan al cerebro, y ah se interpretan.Depende de
sus condiciones innatas (tamao de los conos y bastones, funcionamiento general del circuito), y del aprendizaje
(experiencia, social, ...) el que el cerebro vea los colores de una manera o de otra. En realidad, de momento y
hasta que la tecnologa de interpretacin de actividad neuronal progrese lo suficiente, somos incapaces de saber
cmo ve el color una persona determinada. Lo que s sabemos es que las personas no los ven igual, sino que
hay variaciones individuales ... y patologas: las discromatopsias, de las que el daltonismo (invertir rojo y verde)
no es ms que una de las muchas que existen.
92
Depende de las condiciones ambientales (iluminacin). La frase de noche todos los gatos son pardos es
cierta: en malas condiciones lumnicas vemos las cosas en blanco y negro.
Depende del dispositivo de salida. La calidad y posibilidades del dispositivo tambin condicionar. Y no slo si
hablamos de un monitor en blanco y negro y uno en color, sino tambin si hablamos de un monitor de tal marca o
con tal tecnologa, y de un procesador grfico, una memoria dedicada, un software y una configuracin de todo
ello.
Nuestros ojos ven el color por sntesis aditiva o por sntesis sustractiva.
La sntesis aditiva consiste en la adicin de unos colores con otros.
La sntesis sustractiva consigue los colores evitando la reflexin.
Vemos los colores porque la luz atraviesa la cornea, el cristalino y el humor vtreo y llega a la retina,
posteriormente es traducida a impulsos nerviosos.
La percepcin del color depende de factores como las propias personas, las condiciones ambientales o el
dispositivo de salida.
EL ENTORNO VISUAL
El hardware utilizado por el usuario es fundamental, sobre todo su configuracin: tarjeta de vdeo y monitor.
Tambin limita el software de base: S.O., Plugins.
93
No todos los exploradores y equipos soportan la misma gama de colores (212 / 216 colores seguros). Muchos
programas de grficos nos avisan.
HTML limita la definicin de color a unos pocos elementos. CSS permite aplicarlo a casi todo, complementando
las posibilidades del HTML.
La Usabilidad, adems, obliga a usar un contraste elevado que an desvirta ms.
Si el equipo no soporta un color lo extrapola con los suyos: patrn de moteado o punteado.
Colores hbridos
Se basan en el pequeo tamao de un pixel y en la tendencia del ojo de rellenar los espacios en
blanco.
Se toman dos o ms colores seguros y se mezclan en damero (tablero ajedrez) u otro patrn.
El color depende del hardware utilizado (tarjeta de vdeo o monitor), software de base, los exploradores,
las limitaciones de HTML, adems las reglas de usabilidad no recomiendan el contraste.
Los colores hbridos estn basados en la tendencia del ojo a rellenar los espacios en blanco, tomando
dos o ms colores seguros y mezclndolos en damero.
COMPONENTES DEL COLOR (HSB)
La forma de reproducir con fiabilidad y precisin un color ha pasado por identificar claramente el mismo y
numerarlo o codificarlo. Hasta hace poco ello se basaba en la comparacin visual con patrones de color, as la
numeracin pantone.
Ahora ya nos basamos en otras caractersticas ms fsicas, como longitudes de onda y otras. Para guardar una
referencia de qu color, y qu tono concreto queremos se usa habitualmente la codificacin HSB (Hue,
Saturation y Value), que se basa en tres caractersticas que definen perfectamente el color.
Matiz (Hue). La calidad que le da nombre: rojo, azul ... Depende de la longitud de onda estrictamente.
Saturacin (Saturation). Intensidad del color. Es la proporcin en que est mezclado con el blanco. Alta
cuando hay poco blanco (rojo sangre), baja si hay mucho (rosa plido). Mide la pureza.
Tono (Value) = Luminosidad o Brillo. Lo claro u oscuro que es al compararse con otros en las mismas
condiciones visuales
Otras caractersticas pueden ser:
Contraste.
Monocromtico (un slo color).
Combinacin de color, con matiz nico (H), basada en cambios de:
Saturacin.
Tono.
Variacin de gamma.
94
Ajuste de Niveles de Brillo y Curvas

PS utiliza histogramas (n de pxeles de cada nivel de brillo)
Imagen en Clave Baja si se acumula en sombras.
Imagen en Clave Alta si se acumula en luces.
Permite especificar, con el cuentagotas, el pixel ms oscuro, el ms claro y uno intermedio.

El programa reajusta los niveles automticamente. til si el origen tiene excesivo o escaso brillo.
95
96
Ajustes de Equilibrio de Color
Ajustes de Brillo-Contraste
97
Ajustes de Tono Saturacin Luminosidad
Para identificar un color adecuadamente se cre una numeracin (numeracin pantone) o codificacin.
Para guardar una referencia de color y tono concreto podemos utilizar la codificacin HSB, basada en:
el matiz, la saturacin y el tono.
Photoshop permite el uso del histograma, acumulacin en sombras, acumulacin en luces, el uso del
cuentagotas y el reajuste automtico de niveles.
PROFUNDIDAD DE COLOR
Profundidad de Bits
Con 32 bits (a partir de 24 bits es color real).
16.777.216 colores + 8 bits de informacin de control (canales alfa de transpariencia).
Con 40 bits (10 bits por canal): mejores degradados y transpariencias.
Cuantos ms bits, ms calidad (2n).
Cuantos ms bits, ms tamao.
Ojo, no todos los usuarios los soportarn. Usuario medio no distingue ya entre 16 y 24 bits.
Direct X
La evolucin de las Direct X de MS ha ido marcando el tratamiento grfico por los chips grficos.
98
Diferencias monitores:
1. CRT
Emiten rayos catdicos.
Frecuencia de refresco 70 Hz min es la resolucin mnima para evitar cefaleas y cansancio.
2. LCD
Menor resolucin y colores.
ngulo de visin influye mucho, incluso en diversas zonas de la pantalla.
Tienen una retroiluminacin: afecta al brillo.
Cuantos ms bits por canal mayor es la calidad del color y el tamao.
La evolucin de las Direct X ha marcado el tratamiento grfico.
Los monitores CRT emiten rayos catdicos y su frecuencia de refresco es de 70 Hz min.
En los monitores LCD la resolucin es menor y los colores tambin, el ngulo de visin influye y tienen
una retroiluminacin.
99
MODO DE COLOR
Una manera de visualizar y medir el color:
RGB: Red, Green, Blue.
CMYK: Cyan, Magenta, Yellow, Black.
Lab: Luminosidad (L = 0-100), Verde-rojo (A = -120 +120), Azul-amarillo (B = -120 +120).
Independencia del dispositivo.
Mapa de Bits: Blanco y Negro.
Escala de Grises: 256 tonos (0=negro, 255=blanco).
Modo Indexado: paleta de 256 colores ajustada (extrapolacin o hbridos).
Monitor.
Impresin.
RGB
Se suele referenciar con tres valores (0-255). Por ejemplo: 102, 153, 204; donde 102 es el valor de
rojo, 153 el de verde y 204 el de azul.
En HTML y CSS se define:
En hexadecimal (00-FF), es ms preciso. Ejemplo: #6699CC.
Por su nombre (hay 16 bsicos, Netscape soporta 100). Ejemplo: black.
Lista de colores admitidos: <www.htmlref.com/Reference/AppE/colorchart.htm>
Existen varias formas de visualizar el color en RGB, en CMYK, en modo Lab, en Mapa de Bits, en Escala de
Grises o en Modo Indexado.
COLOR EN HTML
Cmo dar colores en las etiquetas HTML?
Estilo aplicado directamente en etiquetas:
Para todo el documento: elemento BODY.
Color del fondo: <body bgcolor=#FF12AC text=...>
100
Color de los enlaces: <body link=... alink=... vlink=...>
link: para enlaces no visitados.
alink: al hacer click en el enlace.
vlink: enlaces visitados.
Fijarse en contraste con texto normal y en estndares

Para elementos del documento:
Color de la fuente: <font color=#FF12AC> Rosa clido </font>
Color lnea horizontal: <hr color=...>. Mejor con grficos .
Color del fondo de las tablas, tambin se usa propiedad "bgcolor": <table ...> <tr ...> <th ...> <td ...>
Ojo, si "cellpadding" no es 0, se ver color de fondo entre celdas (IE)
Separado estilo y documentacin HTML: color en CSS.
Para todo el documento:
body {color: black}
body {color: #000000}
Para aadir caractersticas visuales distintivas a partes especficas de texto en los documentos.
span {color: rgb(0,0,255)}
span {color: rgb(100%,0%,0%)}
Las etiquetas ms importantes que indican el color en el cdigo HTML son body bgcolor y fontcolor
aunque existen muchas ms.
101
TEMPERATURA DEL COLOR
Colores clidos. Impresin de acercamiento. Primeros planos: para conseguir profundidad.
Rojo.
Naranja.
Amarillo.
Colores neutros. Planos medios.
Verde con un poco de amarillo.
Colores fros. Planos lejanos.
Verde azulado.
Azul.
Violeta
EL LENGUAJE DE LOS COLORES
Se pueden transmitir sensaciones con los colores:
Tranquilidad. Tonos suaves: rosas, amarillos, verdes, sobre fondos fros.
Modernidad. Colores vivos con negro, blanco o gris perla.
Excitacin. Rojos, magentas y naranjas.
Limpieza. Tonos suaves azules, verdes y marrones.
Calor. Naranjas, rojizos, amarillos, marrones y rosas (intensos).
Relajacin. Tonos suaves de verdes, marrones y azules.
Color textos segn fondo

Si el fondo es ... el texto debe ser:
Blanco: negro, azul, rojo ingls, verde oscuro.
Amarillo: negro, azul oscuro, rojo ingls.
Negro: amarillo, blanco.
Verde oscuro: blanco.
Rojo: blanco, amarillo.
102
Significados de los colores

Depende de aspectos sociales, histricos y antropolgicos. Lo que en una sociedad transmite algo, en otra
puede ser al contrario.
BLANCO: pureza, virginidad, honestidad, refinamiento, paz, calma.
NEGRO: fuerza, seriedad, sofisticacin, poder, terror, ignorancia, soledad.
GRIS: neutro, metlico, gravedad, pobreza.
AZUL: calma, autoridad, respeto, dignidad, frescor, fro, cielo, lealtad, agua.
PRPURA: misterio, melancola, sofisticacin, misticismo, temor, poder, orgullo.
ROJO: fuerza, dinamismo, coraje, pasin, fuego, agresin, caliente, atencin, peligro.
NARANJA: abierto, receptivo, informal, progreso.
MARRN: masculino, otoal, triste.
AMARILLO: luminoso, vital, extrovertido, divino, calor, luz, sosiego.
VERDE: naturaleza, salud, tranquilidad, quietud, seguridad, vitalidad.
SEPIA: antiguo.
Consejos
No abusar de los grandes contrastes.
Mantener uniformidad de color en todo el website.
Disear para nuestros usuarios con peores condiciones.
Los tonos suaves transmiten tranquilidad.
Los colores vivos transmiten modernidad.
Los tonos rojos transmiten excitacin.
Los tonos suaves azules transmiten limpieza.
Los tonos rojizos y anaranjados transmiten calor.
Los tonos suaves verde transmiten relajacin.
Existen reglas para combinar los colores del fondo con los de las fuentes.
Segn varios aspectos antropolgicos, sociales e histricos cada color transmite unas sensaciones.
Tres consejos clave son: no abusar de los contrastes, mantener la uniformidad y disear para todo tipo de
usuarios.
103
EJERCICIOS
1. Abrir una imagen con gran colorido.
Utilizar Imagen > Ajustes > Tono/Saturacin para jugar con las tres caractersticas HSB.
Si queremos obtener un tono azulado, qu debemos hacer?.
Si queremos convertirlo en un cromo con colores ms puros, qu debemos hacer?.
Y si queremos oscurecerla?.
2. Colorear Foto Antigua (B/N)

Se suele hacer a mano, pero hay trucos:
Seleccionar una zona, ir al men Tono/Saturacin > colorear.
Es conveniente trabajar con capas

3. Qu pasa al utilizar color automtico?. Ha mejorado la imagen?.
4. Utilizar la paleta Equilibrio de color para aumentar el eje de los rojos. Qu sucede?
5. Y si Desaturamos?
6. Cambiar un color por otro. Imagen > ajustes > reemplazar color.
Pinchamos con el cuentagotas en el color elegido y jugamos con la tolerancia.
Luego ajustamos el tono.
7. Uilizar la herramienta histograma para convertir una imagen normal en otra de clave baja. Ahora en
clave alta.
1. En un fondo amarillo, puedo usar el rojo para textos.
Verdadero
Falso
2. Se puede usar el color azul para dar sensacin de respetabilidad.
Verdadero
Falso
3. El amarillo es uno de los colores de la sntesis sustractiva.
Verdadero
104
Falso
4. Es obligatorio usar el negro en sntesis sustractiva.
Verdadero
Falso
CONCLUSIN
Podemos usar el color de nuestras imgenes para influir subliminalmente en la audiencia.
Tambin debemos ser estrictos a la hora de combinar colores en fondos y textos para evitar que se conviertan en
ilegibles.
105
TCNICAS DE SELECCIN. CAPAS
INTRODUCCIN
Una seleccin consiste en extractar o aislar una zona de una imagen del resto. Normalmente la zona en
cuestin tiene unas caractersticas concretas y nicas que nos llevan a querer modificarla, copiarla, moverla o
aplicarle efectos de cualquier tipo, y sto es imposible de hacer si no la seleccionamos previamente, porque sino,
todo lo que hiciramos afectara a la totalidad de la imagen. Por ello en esta leccin aprenderemos cmo
realizarlas con Photoshop y cmo se trabaja con capas.
OBJETIVOS
Aprender las tcnicas bsicas para seleccionar zonas de una imagen.
Comprender el concepto de capas y cmo trabajar con ellas.
Este captulo es casi completamente prctico, y engaosamente corto. Se aconseja realizarlo intercalado con el
resto de captulos.
Se darn algunas indicaciones tericas, pero el grueso sern ejercicios y Viewlets.
TIPOS DE SELECCIN
Podemos efectuar selecciones de muchos tipos:
De una zona de la imagen.
De toda la imagen.
De una capa o de varias.
De una sola imagen o de varias.
PS nos indica que algo est seleccionado marcndolo con una ristra de hormigas que parpadean y delimitan lo
que est seleccionado de lo que no.
Se puede seleccionar por tamao, forma y color.
Herramienta desplazar: se emplea para mover la seleccin.
Se puede ajustar la seleccin (men seleccin > modificar).
Maysculas aade cosas a una seleccin. Alt quita cosas. Su combinacin deja slo la interseccin.
Para qu queremos seleccionar algo, para modificarlo, para extraerlo y separarlo de su entorno, para
copiarlo.
Antes de modificar hay que seleccionar.
Guardar seleccin como canal, para recuperarla siempre que queramos. Recuperamos la forma de
la seleccin, no el contenido.
Copiar y pegar: en una nueva capa, en una nueva imagen, en otra imagen ya existente.
106
Modificar y retocar la seleccin.
Tab: oculta y muestra paletas y nos permite ver mejor una imagen.
Triangulito a la derecha de muchas herramienta y paletas que indica que hay ms opciones.
Tecla maysculas: Aade o mejora.
Tecla Alt: Restar/Quitar o disminuye de alguna forma.
Ventana de opciones para ajustar los parmetros de la herramienta.
No nos olvidarenos de la Herramienta historia y deshacer.
Utilizar siempre el zoom y la lupa para trabajar cmodamente.
HERRAMIENTAS DE SELECCIN
Photoshop nos oferta varias herramientas para conseguir seleccionar zonas de la imagen. Todas ellas esparcen
una lnea parpadeante de seleccin, obteniendo al final una o varias superficies cerradas.
Marcos
Para seleccionar por forma, disponemos de los marcos:
Marco rectangular. Pinchamos en una zona y, sin soltar, arrastramos en diagonal. Al soltar aparece la
seleccin realizada.
Marco oval. Funciona igual que el anterior.
Fila de pxeles. All donde pinchemos, selecciona esa fila de pxeles. Muy til cuando estamos
ajustando una imagen a nivel fino.
Columna de pxeles. Funciona igual que el anterior.
Lazos
Tambin seleccionan por forma.
107
Lazo a mano alzada. Pinchamos y sin soltar vamos dejando caer como un hilo de seleccin por donde
pasamos. Al final si estamos cerca del inicio se une solo, formando una superficie cerrada. Caso
contrario doble clic.
Lazo poligonal. Funciona parecido, pero vamos dando clics y va trazando rectas entre el actual y el
anterior, construyendo una superficie cerrada.
Lazo magntico. Parecido al primero, pero con la particularidad de que se pega a los cambios
bruscos de color. El nmero de tonos arriba y debajo de donde soltamos lo indica un parmetro de
configuracin.
Seleccin por color
Varita mgica. Si queremos seleccionar por tonos de color continuos Jugando con la tolerancia
aparecern ms o menos pxeles seleccionados.
Seleccin por color, para tonos discontinuos dispersos por varias zonas de la imagen.
108
Para seleccionar por forma existen: el marco oval, el rectangular, la fila de pxeles y la columna de
pxeles.
Otra herramienta que nos permite seleccionar por forma es el lazo. ste puede ser a mano alzada,
poligonal o magntico.
Para seleccionar por tonos de color continuos se usa la varita mgica.
La herramienta seleccionar por color escoge tono discontinuos dispersos por varias reas de la
imagen.
USOS SELECCIONES
Una vez realizada una seleccin la podemos guardar para no perderla, por ejemplo con algo tan sencillo como
pinchar en otro sitio. Tambin podemos recuperar una seleccin guardada. Todo ello se hace desde el men
seleccin y se guardan en canales que conviene denominar apropiadamente.
Tambin podemos combinar herramientas: si una vez realizada una seleccin queremos ampliarla, basta con
pulsar, al mismo tiempo que se selecciona, la tecla maysculas (la flecha).
Si queremos restarle zonas en cambio, lo haremos pulsando la tecla Alt al mismo tiempo que hacemos la
nueva seleccin.
Otra accin habitual es invertir la seleccin, desde el men seleccin, porque en muchas ocasiones es ms
sencillo seleccionar lo que NO necesitamos que lo que s.
Cuando tenemos selecciones guardadas, las perderemos si no las guardamos con un formato que las mantenga,
como el PSD. Si guardamos slo GIF o JPG, se perdern.
La nica manera de aprender a seleccionar es practicando.
109
Se han confeccionado Viewlets de cada una de estas herramientas y de tcnicas combinadas.
Herramienta Lupa
Debemos acostumbrarnos a trabajar cmodos, para ello es muy conveniente utilizar la lupa.
Manejo de las selecciones
Mover seleccin: Click en medio y arrastrar.
Flechas del cursor mueven de pixel en pixel (+ MAY = mueven 10 pixeles). Sin soltar click.
Espaciador y arrastrar: Mueve seleccin.
Slo arrastrar: aumenta o disminuye seleccin.
Aumentar seleccin: May + nueva sel.
Disminuir seleccin: Alt + nueva sel.
Mover duplicando: Click + Ctrl + Alt.
Mover recortando: Click + Ctrl.
Des-seleccionar: Pinchar fuera para perder una mala seleccin. Seleccin>deseleccionar. Ctrl + D.
Seleccin>Reseleccionar.
Deshacer la ltima accin: Editar>Deshacer.
Para mover una seleccin se hace clic en ella y se arrastra.
Para aumentar la seleccin se pulsa la tecla Maysculas y se marca una nueva seleccin.
Para disminuir la seleccin se pulsa Alt y se marca la nueva seleccin.
Para duplicar y mover la seleccin se hace clic y se pulsa Ctrl y Alt.
Para mover recortando se hace clic y se pulsa la tecla Ctrl.
Para deseleccionar se pulsa Ctrl y la tecla D.
HERRAMIENTAS DE SELECCIN AVANZADAS

Photoshop nos ofrece algunas herramientas ms.
Mscara Rpida
Es una herramienta eficaz para refinar selecciones burdas previas.
Se activa mediante los botones situados justo debajo del color de primer plano y de fondo, en la columna de
herramientas
110
Es como extender una tela sobre la imagen. El color es configurable mediante un doble clic en el botn.
Pasos:
Debemos tener seleccionados dos colores contrastados (blanco y negro) como fondo y primer plano.
Hacemos una seleccin grosera.
Activamos mscara rpida.
Valen varias herramientas para manejarla (no olvidar que slo estamos modificando nuestra
seleccin previa).
La tela tapa lo NO seleccionado.
111
Con pincel slido vamos extendiendo tela.
Si invertimos fondo y primer plano (doble flecha al lado de los cuadros de color de fondo y primer plano),
la va quitando.
Jugando con la flecha y con la herramienta elegida, aconsejamos el pincel slido (sin difuminaciones),
se va ajustando la seleccin.
Ayudados por la lupa, podemos conseguir selecciones muy precisas.
Cuando acabamos, pulsamos el botn de mscara rpida y volvemos a la imagen normal, pero con la
seleccin mejorada (ojo, si la perdemos por pinchar sin darnos cuenta, siempre podremos ir a
seleccin > reseleccionar).
Si se quiere refinar una seleccin realizada anteriormente se usa la mscara rpida.
Para usar esta herramienta debemos tener seleccionados dos colores contrastados en el fondo y en el
primer plano.
Es importante tener en cuenta que la "especie" de tela que se extienda sobre la imagen cuando usemos
esta herramienta tapa lo que no est seleccionado.
Si queremos ir extendiendo esta tela usaremos el pincel slido.
La manera de ir quitando la tela es invirtiendo el fondo y el primer plano.
Al acabar se pulsa el botn de mscara rpida y podremos volver a la imagen normal.
CAPAS
El trabajo por capas representa un mtodo ms potente que el habitual, mucho ms potente. Son como
rectngulos transparentes superpuestos. Siempre veremos el conjunto desde arriba, por lo que si colocamos
una capa opaca negra, por ejemplo, en el tope de la pila, slo veremos esta ltima capa.
Crear una Capa: paleta capas, botn inferior insertar capa, tambin desde el men capas.
Eliminar una capa: arrastrarla al botn papelera.
Una capa no precisa ser opaca completamente, puede tener transpariencia, es ms, no necesariamente debe
verse en el resultado final, podemos activarla o desactivarla mediante el smbolo del ojo.
Podemos actuar sobre varias capas a la vez si las enlazamos (smbolo de la cadena). La Capa Activa ser la
que aparezca sombreada. Ojo con copiar pxeles de capas vacas pues nos dir algo as como: Ningn pxel
seleccionado.
Para desplazar una capa: pinchar y arrastrarla a la posicin deseada.
Tener siempre presente que las capas situadas en la parte ms alta de la pila de capas, tapan a las que se
encuentran en una posicin inferior.
112
Consejos
No perder los originales nunca.
Organizar el trabajo: directorios.
Cuando se trabaja con ms de una imagen hay que tener en cuenta su tamao relativo.
Acostumbrarnos a usar capas.
Guardar las selecciones para poder recuperarlas.
Herramienta lupa permite ajustar mejor.
Herramienta mover: desplaza.
Recortando: Click.
Duplicando: Click + Alt.
OJO con selecciones en capas vacas.
Siempre se ver la primera capa que tengamos apilada y segn la transparencia que le vayamos
poniendo a sta y sus siguientes as podremos ver unos elementos u otros.
Para crear una capa debemos de ir al men de capas, a las paletas o a la opcin insertar capa.
Si queremos eliminar una capa slo tenemos que llevarla a la papelera.
Mediante el icono del ojo podemos activar o desactivar una capa para que sea visible o no en el
resultado final.
113
Mediante el icono de la cadena podemos enlazar las capas para trabajar con ellas simultneamente.
Para trabajar con ms comodidad usaremos la herramienta lupa.
Para el trabajo con capas tambin se recomienda la creacin de un directorio con los originales y los
modificados.
EJERCICIOS
1. Seleccin simple.
Abrir Imagen.
Seleccin Rectangular.
Mover Seleccin.
Ampliar Seleccin (MAY).
Reducir Una Zona (ALT).
Combinar Selecciones Geomtricas.
Perder la seleccin pinchando fuera.
Reseleccionar (men seleccin).
2. Efectuar una seleccin con lazo a mano alzada.

3. Efectuar una seleccin con lazo poligonal.
4. Efectuar una seleccin con lazo magntico.
5. Seleccin con varita mgica.
Jugar con tolerancia y ver qu sucede.
Aumentar seleccin con MAY.
6. Crear una capa (paleta capas, botn aadir capa).
Crear tres capas ms.
Activar una u otra capa.
Activar la que tiene contenido, efectuar una seleccin y pegarla en otra capa.
Duplicar una capa.
Eliminar una capa vaca.
Activar la visualizacin de las capas mediante el ojito.
Enlazar capas.
7. Combinaciones de tcnicas.
8. Utilizar la mscara rpida para refinar una seleccin.
9. Seleccin por color.
Cambiarle el color a un objeto de una imagen.
114
1. El marco elptico hace crculos perfectos si pulsamos MAY.
Verdadero
Falso
2. Si queremos modificar algo, primero hay que seleccionarlo.
Verdadero
Falso
3. La varita mgica es una buena herramienta para seleccionar por color.
Verdadero
Falso
4. Bajando la tolerancia aumentaremos el nmero de pxeles seleccionado.
Verdadero
Falso
5. No podemos hacer selecciones discontinuas, todos los pxeles seleccionados deben estar dentro de la
zona seleccionada y sta no puede estar partida.
Verdadero
Falso
CONCLUSIN
Las herramientas de seleccin son buenas por separado, pero mucho ms potentes cuando se combinan. Si,
adems las combinamos con el uso de capas, las posibilidades llegan hasta donde lo haga nuestra imaginacin.
Debemos practicar mucho para conseguir cierta soltura con estas tcnicas.
115
TCNICAS DE SELECCIN. CAPAS
INTRODUCCIN
En esta leccin descubriremos todo lo que se puede hacer con las selecciones que hemos creado anteriormente.
Las moveremos, las rellenaremos y las deformaremos. Adems aprenderemos a utilizar la herramienta de
clonacin, a aplicar sombras y a usar filtros.
Para todo ello utilizaremos Photoshop dado que como ya se ha mencionado en varios ocasiones es el programa
ms puntero en tratamiento de imagen
OBJETIVOS
Aprender tcnicas bsicas de retoque, sin entrar a fondo en las posibilidades del editor grfico, sino slo en
aquellos aspectos que nos sern mas tiles para nuestro trabajo.
La mejor forma de aprender, es practicar. Por lo que insistiremos en el aspecto prctico.
Se aconseja estudiar este tema al mismo tiempo que el resto del curso.
APARTADOS
MOVER UNA SELECCIN
Una vez tenemos una seleccin realizada, podemos moverla con la herramienta mover (el tringulo con la cruz,
arriba en la columna de herramientas).
Si la activamos, nos permitir mover el contenido de la seleccin, es decir los pxeles, a otra zona de la imagen,
o a otra imagen. El problema es que recorta la seleccin, dejando un hueco al moverla. El cursor nos avisa
colocando unas pequeas tijeras.
Otra opcin es moverla duplicando, pulsando al mismo tiempo la tecla Alt, veremos que cambia el cursor y
aparece una doble flecha.
Tambin podemos utilizar el men edicin y copiar y pegar donde queramos , como en cualquier otra
aplicacin Windows. Tambin funciona la combinacin de teclas CTRL + C (copiar) y CTRL + V (pegar)
116
La herramienta mover seleccin se encuentra en la parte superior derecha de la paleta de

herramientas, en la zona izquierda de la pantalla y es una flecha con una cruz.
Esta herramienta recorta la seleccin y la mueve.
Si se quiere mover duplicando la seleccin debemos pulsar la tecla Alt.
Con CTRL+C y CTRL+V podemos copiar y pegar la seleccin donde queramos.
RELLENAR UNA SELECCIN

Una seleccin tambin podemos rellenarla. Para ello utilizaremos el men edicin >rellenar. Nos permitir
escoger el color frontal, el de fondo, el blanco, el negro o elegir un color desde la paleta de colores desplegable.
Tambin nos dejar elegir la densidad del relleno: opacidad y el modo, Normal y Disolver son los ms
habituales.
Una opcin muy interesante es rellenarlo con un motivo. Los motivos no son ms que pequeas imgenes que
utiliza como ladrillos para rellenar la superficie. Hay mucho predefinidos, y otros muchos nos los podremos bajar
de Internet.
Tambin podremos construirnos uno, con el marco rectangular, seleccionamos una pequea parte de una
imagen y desde edicin > definir motivo, nos dejar ponerle un nombre y utilizarlo inmediatamente para
rellenar.
Para rellenar una seleccin iremoas al men edicin > rellenar.
Podremos elegir el color frontal, el del fondo, el blanco, el negro o un color desde la paleta de colores.
Para regular la opacidad existe la opcin de escoger el tipo de densidad que quiera.
Tambin se puede rellenar una seleccin con algn motivo
DEFORMAR UNA SELECCIN
Desde el men Edicin > transformar disponemos de muchas opciones:
Escala
Rotar
Sesgar...
117
Para deformar una seleccin tenemos que ir a men Edicin > transformar. Aqu podremos elegir
entre escala, rotar, sesgar...
HERRAMIENTA DE CLONACIN
Es una herramienta potentsima, con la que podremos elegir un pxel de inicio y uno de destino. A partir de ah va
copiando el pxel de origen, encima del de destino. Al desplazarnos, van cambiando ambos, el de origen lo indica
con una pequea cruz, el de destino es donde tenemos el cursor.
El origen puede ser la misma capa, otra capa de la misma imagen, u otra imagen.
118
Se escoge el tampn y para elegir el origen, se pulsa Alt y se hace clic.
Precaucin: debemos estar en la capa correcta y debe haber contenido.
Ojo: Ajustar tamaos y posicin (engaa), ojo con el zoom de ambas imgenes, si utilizamos dos.
Es conveniente crear una capa transparente y trabajar el destino en ella, as no perderemos los pxeles originales
del destino y, adems, podremos mover y transformar mejor en caso de necesidad.
Con la herramienta clonacin elegiremos un pxel de inicio pulsando Alt y otro de destino y se irn
copiando el pxel de origen encima del destino.
Se recomienda crear una capa transparente que sea donde se trabaje con el destino.
COLOCAR UNA SOMBRA

Los efectos de capa son muy interesantes, como ejemplo veremos el de crear una sombra.
La sombra creada sobre la seleccin activa queda justo detrs, por lo que no se ve correctamente hasta que la
desplazamos, volteamos y sesgamos
Primero creamos la sombra, por ejemplo de un texto, desde capa > estilo de capa > sombra paralela.
Las opciones las dejamos por defecto, aunque el alumno debera practicar.
119
Una vez creada, en capa > estilo de capa > crear capa, podemos convertir ese efecto en una capa
independiente, que ya podremos desplazar, modificar, ...
Se deja como ejercicio que el alumno voltee y posicione correctamente la sombra. Por supuesto, el efecto se
puede aplicar a objetos, personas, etc.
Existen muchos mas efectos de capa, muy interesantes por ejemplo para hacer ttulos fcilmente: relieve,
destellos, etc.
Para crear una sombra tenemos que ir a capa > estilo de capa > sombra paralela.
Cuando hemos creado la sombra, si creamos una nueva capa podemos convertir esa sombra en un
elemento independiente.
La sombra se puede desplazar, modificar, voltear...
USO DE FILTROS
Photoshop dispone de bastantes filtros, que no son ms que una serie de acciones encadenadas que se pueden
activar por su nombre y que trasforman, en ocasiones radicalmente, el contenido de una seleccin o de toda la
imagen.
En la carpeta goodies suelen haber mas de estos filtros, as como pinceles y motivos.
Tambin nos podemos descargar miles desde Internet, algunos de pago y otros gratuitamente, por este motivo
podemos afirmar que existen dos tipos de filtros:
Filtros photoshop.
Filtros de otros fabricantes.
120
Filtros ms habituales para nuestro trabajo
Artstico: cuarteado.
Bosquejar: carboncillo.
Desenfocar: desenfoque gaussiano.
Distorsionar: onda.
Enfocar: enfocar bordes.
Estilizar: trazar contorno.
Interpretar: nubes.
Pixelizar: puntillista, semitono de color.
Ruido: polvo y raspaduras.
Textura: granulado.
Trazos pincel: sombreado.
Otro: dither box.
Digimarc: incrustar y leer marca de agua.
Se aconseja que el alumno los pruebe todos con una imagen, para comprobar sus efectos.
Photoshop los agrupa por tipos, aunque el motivo de que un filtro pertenezca a un grupo o a otro a veces es poco
comprensible.
Filtros Artsticos.
Filtros Bosquejar.
Filtros Desenfocar.
Filtros Distorsionar.
Filtros Enfocar.
Filtros Estilizar.
Filtros Interpretar.
Filtros Pixelizar.
Filtros Ruido.
Filtros Textura.
Filtros Trazos de Pincel.
Filtros Vdeo: No aplicables.
Otros Filtros.
Todos ellos disponen, adems, de multitud de parmetros de configuracin que hacen que los resultados sean
completamente distintos.
121
Paint Shop Pro, dispone de una herramienta semejante al motivo, pero ms elaborada, la Herramienta Picture
Tube. Son grupos de grficos muy elaborados que podemos utilizar, manejando sus parmetros, para rellenar
zonas con vegetales, animales, smbolos, etc. Permite seleccionar una gran cantidad de ellos.
Los filtros consisten en una serie de acciones encadenadas que producen diversos efectos en la
imagen.
Los filtros ms habituales son: artstico, bosquejar, desenfocar, distorsionar, enfocar, estilizar,
interperetar, pixelizar, ruido, textura, trazos pincel, dither box y Digimarc.
Con la herramienta Picture Tube de Paint Shop Pro podemos rellenar zonas de la imagen con
vegetales, animales, smbolos...
EJERCICIOS
1. Definir un motivo desde una imagen, por ejemplo una superficie lquida o un suelo, ...
2. Aadir nubes a un fondo.
Buscar una foto con nubes y seleccionarlas.
Abrir una segunda imagen con cielo, que sustituiremos por las nubes.
Las dos imgenes del mismo tamao aproximado.
Las dos imgenes al 100 % de zoom.
Crear capa nueva en la de destino.
Seleccionamos, las nubes, desde la otra imagen.
Herramienta mover.
Arrastrar seleccin, a la capa nueva en la imagen actual.
Luego se coloca por debajo la capa de nubes.
Y se recorta el cielo normal para que deje ver la capa de abajo.
3. Crear un gemelo de un personaje.

4. Aadir y posicionar una sombra a un objeto.
Sombra.
Abrir imagen.
Seleccionar objeto.
Capa, efectos sombra paralela.
Capa, efectos, crear capa.
Activar capa sombra.
Edicin, transformar, distorsionar.
Visualizar objeto.
Ajustar sombra: mover.
122
5. Compondremos una imagen en cuadrcula de 3 x 3 bloques, con repeticiones de la misma imagen en

cada una de las 9 celdas.
Aplicar filtros distintos a cada celda.
6. Crear una foto antigua.
Filtro>Ruido>Aadir.
Colors>Colorize.
37% Hue.
48% Saturation.
7. Rellenar una seleccin con un motivo de los que ya existen en PS.
1. El tampn de clonar conviene usarlo teniendo como destino una capa vaca y no directamente sobre la
de destino.
Verdadero
Falso
2. El aspecto visual de las imgenes es claro para saber si podemos pasar zonas de una a otra sin
problemas de escalado.
Verdadero
Falso
3. El efecto sombra paralela es uno de los muchos efectos que podemos aplicar a una capa.
Verdadero
Falso
4. Podemos definir motivos personales con el marco rectangular.
Verdadero
Falso
5. El uso de filtros es complejo por la gran cantidad de parmetros que poseen, es mejor hacer las cosas
a mano y no utilizarlos mucho.
Verdadero
Falso
CONCLUSIN
La herramientas de retoque que ponen a nuestra disposicin los editores grficos son muy variadas y potentes.
El lmite lo marca nuestra imaginacin.
Conviene practicar mucho con ellas para, al menos, saber que existen.
123
FONDOS
INTRODUCCIN
Los tamaos de carga deben ser apropiados, y la nica forma de conseguirlo es tratar las imgenes utilizadas
para quitarles peso.
Un buen fondo nunca debera sobrepasar los 40-50 KB, pero lo ideal sera no pasar de 10 KB.
Todas stas son recomendaciones para que nuestra web cargue rpido y el usuario no tenga que esperar mucho
tiempo para ver la informacin que quiera.
En esta leccin se profundizar en la creacin de los fondos, un elemento muy importante que sustenta el
contenido de la web.
OBJETIVOS
El estudio de los fondos es imprescindible para conseguir no sobrecargar las pginas.
APARTADOS
HTML DE FONDOS
HTML permite definir un fondo de pgina de color uniforme:
Forma antigua:
<body bgcolor="yellow" text="navy">
<body bgcolor="#FFFFFF">
Tambin permite utilizar una imagen:
<body background=..... .gif>
Forma moderna (con hojas de estilo):
Color de fondo:
<style type="text/css">
body {background-color:yellow}
</style>
Fondo con imagen:

body {background-image: url(/imagenes/fondo.gif)}
</style>
Se repite por defecto (vertical y horizontal), generando un mosaico. Puede ser molesto si es pequeo y poco
contrastado con texto. Si puede interferir con legibilidad NO usar
HTML fondos de tablas

Forma Antigua:
<table bgcolor= ...>
<table border=2 cellspacing=3 cellpadding=0>
<caption>...</caption>
124
<tr>
<th>...</th>
<td bgcolor=blue>...</td>
<td bgcolor=green>...</td>
</tr>
Forma Moderna (hojas de estilo):
<html>
<head>
table, td, th{border:1px solid white;background-color:blue;color:white}
th{background-color:blue;
color:white;}
</style>
</head>
<body>
<tr>
<th>...</th>
<td >...</td>
<td >...</td>
</tr>
</body>
Problema 1
Versiones antiguas de navegador repiten los motivos de fondo.
Soluciones:
Hacer el fondo grande (1280 X 1024).
Javascript que ajuste.
Cuadro invisible.
Usar tablas (limitaciones de Netscape 4.x).
Utilizar CSS: No-repeat, repeat-x, repeat-y.
Problema 2
Alinear fondo con primer plano (Desviacin del navegador).
Solucin 1: Javascript + Distintas versiones de la pgina (se carga la apropiada cada vez).
Solucin 2: Fondo del mismo color.
Problema 3
Las imgenes de primer plano pueden enmascarar.
Solucin: Hacerlas siempre transparentes. Motivo principal flota sobre fondo.
125
HTML permite establer un color de fondo usando las hojas de estilo mediante background-color:.
Si queremos establecer una imagen de fondo debemos introducir el comando background-image

seguido del nombre del archivo de imagen.
Para establecer el color del fondo de una tabla pondremos en la hoja de estilo en el campo table
{background-color = seguido del color elegido}.
POSIBILIDADES DE CREACIN DE FONDOS
Un color nico: HTML, CSS.
Usar un grfico repetido (en horizontal o vertical). Ej. bicolor.
Usar una fotografa tratada.
Usar un embaldosado:
Sin unin.
Con unin.
Otras.
Los vamos a ver uno a uno, mediante los ejercicios propuestos
Para nuestra pgina web se pueden establecer fondos de color nico, usar grficos repetidos, usar fotografas ya
tratadas, usar un "embaldosado" con o sin unin.
EJERCICIOS
1. Color uniforme
Es el ms simple de utilizar y de hacer, nos basamos en las posibilidades del HTML que interpretar parejas de
nmeros en hexadecimal (canales R, G y B) o bien nemotcnicos de los colores principales.
<body bgcolor=#000000>
<body bgcolor=black>
2. Fondo bicolor
Utilizar un gif de 1.200 x 5 con dos tonos. Se repite en vertical y crea dos zonas. Si es de 1-2 pxeles de alto:
crea un efecto de resplandor molesto (con un buen monitor no se aprecia).
Lo haremos eligiendo dos colores.
Abriremos una nueva imagen de 800 x 5 transparente, RGB.
Haremos una seleccin de los primeros 200 pxeles (usar reglas en pix).
La rellenaremos con unos de los colores elegidos.
126
Invertiremos la seleccin y rellenaremos con el otro.
Guardamos como GIF y lo utilizamos en la etiqueta: <body background = ..... .gif>.
3. Fotografa fondo
Una fotografa que ocupe TODO el fondo pesa mucho. Hay que quitarle parte de ese peso. La foto elegida no
puede tener muchos detalles .
La redimensionamos y recortamos al tamao definitivo (680-800 x 480-600).
Utilizamos la paleta de Tono de saturacin u otra, para reducir sus atributos por pxel.
Para usarlo: <body background=... .jpg bgcolor=#FFFFFF> (Conviene usar ambas, as mientras se carga la
imagen se ve el fondo uniforme ya).
Abrir una imagen nueva 800 x 460: transparente.
Guardar en nuestro directorio de trabajo.
Abrir una imagen y seleccionar un marco rectangular de la misma.
Copiar y pegar.
Repetir con otras imgenes para realizar un collage.
Aadir una capa de fondo uniforme de color.
Guardar copia .psd (SIEMPRE!!).
Acoplar imagen.
Aplicar ajuste de Saturacin, Luminosidad, Brillo / opacidad capa.
Guardar para web: gif.
4. Embaldosado sin unin

Utilizacin de una imagen repetida. Acta como un embaldosado. Slo debe guardarse una de las baldosas
(menor peso).
Tipos:
Sin soldadura.
Con soldadura: Hay que prepararlas para que encajen.
Creamos una nueva imagen transparente de 150 x 150.
Con el marco oval intentamos seleccionar un valo grande y dos o tres pequeos para simular la huella
de un oso.
Rellenamos la seleccin con un tono plido.
Ajustamos Transpariencia capa hasta que nos guste.
Para usarlo: <body background=huella.gif bgcolor=#FFFFFF>.

As, mientras se carga, se ver el color uniforme.
5. Embaldosado con soldadura
Fondo con logo. Con Soldadura. Hay que ajustar bien para que encajen las baldosas, tanto por los laterales,
como por los bordes superior e inferior.
127
Se hace con un filtro: desplazar, con la opcin repetir desde el borde.
Creamos una nueva imagen transparente de 150 x 150.
Tecleamos un texto, por ejemplo Logo.
Duplicamos capa.
Desplazamos una un poco arriba. Se ver dos veces el texto.
En una capa, aplicamos el filtro, se desplazar hacia la derecha, salindose de la imagen y volviendo a
comenzar por el principio.
Ajustamos bien pensando en el solape de las baldosas.
Guardamos como gif.
1. Un fondo no debera pasar de 50 KB, aunque deberamos conseguirlos de 10 KB.

Verdadero
Falso
2. El contraste entre fondo y textos no es tan importante.
Verdadero
Falso
3. Conviene usar formatos muy compresivos para guardar baldosas.
Verdadero
Falso
4. Cualquier imagen nos puede servir de fondo, siempre que la tratemos antes.
Verdadero
Falso
5. Es laborioso conseguir resultados perfectos con baldosas con solape, pero los resultados son muy
buenos.
Verdadero
Falso
128
CONCLUSIN
Es relativamente sencillo crear un fondo de poco peso, entre 5 y 25 KB.

Los trucos se centran en reducir el detalle o en reducir el tamao del elemento que se va a utilizar.
129
IMAGEN INSTITUCIONAL
INTRODUCCIN
Nuestra web tiene que tener un aspecto uniforme, las letras han de estar en la misma familia, los enlaces se
recomienda marcarlos con el tradicional color azul, es decir, todo tiene que tener una unidad que no desoriente al
usuario, pero la imagen institucional, a nosotros como diseadores normalmente nos viene dada, es algo que no
podemos cambiar, pero lo que si podemos hacer es ajustar nuestro diseo a esa imagen, con sto lo que se
quiere decir es que si se trata de una imagen conservadora o tradicional no se deber crear un diseo innovador.
La armona ha de ser el elemento principal de nuestra website, para ello en esta leccin se darn una pautas.
OBJETIVOS
Dar al alumno las referencias bsicas sobre lo que es la imagen institucional y cmo obtenerla.
Revisar algunos de los elementos que suelen intervenir en su formacin y la importancia para la
navegabilidad que proporciona.
APARTADOS
CONCEPTOS BSICOS
Es conveniente mantener una uniformidad en todo la web. Eso no slo lo hace ms agradable visualmente, sino
que facilita enormemente el aprendizaje de su manejo. Si adems, respetamos algunos estndares de facto
como el aspecto visual de los hiperenlaces, la posicin de ttulos y subttulos ... , el usuario se sentir ms
cmodo visitando nuestra web. Facilita la navegacin y es ms gratificante para el usuario
A veces, la Imagen Institucional, nos viene impuesta, debido a que estamos desarrollando una parte nueva de
un web ya existente. Debemos mantener el aspecto de lo antiguo, ... salvo que nos planteemos modificarlo en su
totalidad.
IMAGEN INSTITUCIONAL EN LAS ADMINISTRACIONES PBLICAS

Es el caso de la mayora de webs de la Administracin Pblica, que ya existen y que van creciendo con nuevos
contenidos. An as, conviene modificarlas de vez en cuando.
La Asociacin de Internautas <www.internautas.org> hizo una feroz crtica de las webs de la Administracin
Pblica: Una aproximacin al anlisis de webs ministeriales. 30 abril 2.003.
En ella remarcaba los defectos de muchas webs, que se hacan difciles de manejar para los usuarios.
Los errores ms habituales fueron:
Organizacin del mapa del web como reflejo de la estructura del Organismo, lo que dificulta a los
desconocedores de la misma encontrar lo que buscan.
Dificultades de navegacin causadas por existir zonas de las webs distintas completamente a otras.
Falta de seguimiento de WAI para facilitar la accesibilidad.
Poco hincapi en los servicios ofertados a los usuarios, y excesivo en la Organizacin de la propia
Administracin Pblica.
En definitiva, se critic la poca adaptacin a los usuarios.

Afortunadamente, las webs institucionales han ido cambiando estos aos y se han hecho mucho mejores. No
tienen nada que ver con las que fueron objeto de crtica. Se estn enfocando mucho mas hacia los servicios y la
interactividad, sin menoscabo de la accesibilidad.
130
La Asociacin de Internautas realiz un estudio sobre las web de la Administracin y entre los errores ms
importantes que encontro estn:
Los mapas webs estaban organizados de la misma manera que la estructura del Organismo.
Diferencias significativas entre unas zonas de la web y otras.
No se sigue la WAI.
No se enfatizan los servicios que se ofrecen a los usuarios.
ELEMETOS QUE CARACTERIZAN UNA IMAGEN INSTITUCIONAL

Los elementos bsicos que la constituyen se pueden dividir en:
Aspecto general de las pginas del web: disposicin de masas, colores y tipografas, logotipos y
ttulos.
Elementos de composicin: lneas y separadores, columnas, marcos y tablas.
Elementos de navegacin: home, mapa del web, botones y flechas.
Elementos propios: buscadores internos, contacto con webmaster, acerca de, foro de usuarios.
Muchos de ellos vendrn predefinidos en la Gua de Estilo.
Disposicin de masas
Debe mantenerse en todo el web, de manera que el aspecto general sea el mismo. Efectivamente, hay pginas
distintas a otras y en algunas ser imposible mantenerlo, pero debemos intentarlo. Las pginas de inicio deben
intentar meterse en una sola pantalla (a la resolucin elegida) y evitar que aparezcan las barras de
desplazamiento. Hay elementos que se suelen repitir en todas nuestras pginas (cabecera, pie, men).
Cabecera: suele contener el logotipo de la organizacin, el ttulo principal y en ocasiones un men

general de navegacin. Se repite en todo el web.
Pie de pgina: suele contener enlaces de contacto y copyright, as como fecha. En ocasiones un mapa
del web y home. Suele repetirse en todas las pginas.
Men: colocado habitualmente en margen izquierdo, aunque en ocasiones muy variado en su posicin.
Contiene enlaces a las principales zonas del web. Tambin suele mantenerse en todas las pginas
igual.
Colores
Debemos mantener las tonalidades. Por ejemplo el color institucional, amarillo u otro, y con la misma disposicin
en todas las pginas. La combinacin de colores debe mantenerse y hacerse familiar al visitante.
Tipografas
Las de ttulos, subttulos, resmenes, ttulos de tercer nivel, prrafos normales, ... Todo ello debe estar bien
definido en cuanto a fuentes, tamaos y uso de negrillas, subrayados y formatos de prrafo (justificacin o no,
interlineado, separacin arriba y abajo).
Logotipos
La imagen institucional, en muchas ocasiones se limita a la eleccin de un buen logotipo identificativo. En el caso
de la Administracin Pblica, el escudo institucional.
131
Ttulos
La disposicin de los ttulos, subttulos y resmenes debe mantenerse a lo largo del web.
Lneas y separadores
Muy utilizados hasta hace poco, ahora ms en desuso. Permiten componer mejor, visualmente, los contenidos.
Columnas
El texto suele colocarse en bloques, en columnas, dentro de la pgina. Un buen ejemplo son las webs con gran
cantidad de contenido textual como las de los grandes peridicos.
Marcos y Tablas
Son los maquetadores de las pginas por excelencia.
Los marcos, muy utilizados hasta hace unos aos, consisten en incrustar varias pginas en una. Sus ventajas
son que permiten gestionar mejor las partes que permanecen fijas y las que no, acelerando su carga. Sus
problemas son que se indexan mal en buscadores, dificultan la impresin de las pginas y dificultan la
memorizacin de URLs por los usuarios (cada marco tiene la suya).
Las tablas, completamente imprescindibles actualmente, han sustituido a los marcos, convirtindo cada bloque
de la pgina en una celda. Su inconveniente es que tardan mas en cargarse.
Home
Es la posibilidad que se le ofrece a los usuarios de que, estn donde estn, puedan acceder a la pgina de inicio
con un solo clic.
Mapa del web

Un buen elemento para facilitar la navegacin por s mismo. Se puede, de esta manera, ir a cualquier parte del
web con un par de clics.
Botones y flechas
Son elementos grficos que mejoran el aspecto visual de los elementos de navegacin por el web.
Buscadores internos
Pequeos formularios que permiten al usuario buscar contenidos por palabras concretas dentro de nuestro web.
Algunas grandes empresas los ofrecen gratuitamente y slo deberemos copiar y pegar el cdigo que nos
facilitan, por ejemplo, Google.
Contacto con webmaster

Es la posibilidad de activar el envo de un email fcilmente. Habra que distinguir entre el email al webmaster
(personal meramente tcnico), del contacto con el administrador de contenidos.
Copyright
Suele colocarse con la disposicin: Nombre Organizacin 200X-200X (ao de inicio del web y ao de la ltima
actualizacin).
132
Los buscadores premian que exista.
Fecha de Actualizacin
Es un arma de doble filo si no vamos a mantener permanentemente actualizado el web. La tendencia es poner
slo el ao, junto con el copyright.
Contadores
Tambin en desuso porque ralentizan la carga de la pgina. Normalmente residen en otro host, que no siempre
est online. Es mejor utilizar programas de estadstica en segundo plano, ms eficaces y mucho ms eficientes.
Acerca de
Cada vez ms frecuente, una breve descripcin de cada pgina, o de la propia Organizacin.
Una extensin de este concepto seran las etiquetas ALT de las imgenes que despliegan una caja de texto
amarilla con su descripcin cuando el cursor pasa por encima de las mismas y que mejoran enormemente la
accesibilidad.
Foro de usuarios
Muchas webs de servicios los incluyen y constituyen un buen mtodo de que unos usuarios apoyen a otros en
dudas y problemas, adems de ser un elemento de gran valor para detectar anomalas dentro de nuestro web, o
de nuestros servicios. Imprescindible asignar la tarea de leer todos los hilos y mensajes, y contestar algunos a
alguna persona de la organizacin con posibilidad de acceder a altos estamentos de la misma.
Como hemos visto, muchos de los elementos descritos son de carcter grfico
Los elementos bsico que caracterizan una imagen institucional son: aspecto general de las pginas
web, elementos de composicin, elementos de navegacin y elementos propios.
Estos elementos bsicos se componen de disposicin de masas, cabecera, pie de pgina, men,
colores, tipografas, logotipos, ttulos, lineas, separadores, columnas, marcos, tablas, home, mapa del
web, botones, flechas, buscadores internos, contacto con webmaster, copyright, fecha de actualizacin,
contadores, acerca de y foro de usuarios
BOTONES, LNEAS Y BANNERS

Botones
Hay muchos prediseados de libre uso, por ejemplo si buscamos botones o bullets en Google, encontraremos
miles.
Es muy sencillo disear uno (sombreados, efectos 3D, gradientes de color, ...)
Lneas
Las lneas seran similares a los botones.
Banners
Son contenidos publicitarios o de noticias y avisos. Normalmente dentro de cajas de tamaos prefijados.
Los tamaos ms difundidos en Internet son los que marca el Advertising Bureau:
133
Estndar horizontal: 468 x 60 pix.
Botn 1: 120 x 90.
Botn 2: 120 x 60.
Botn 3: 125 x 125.
Micro: 88 x 31.
Half Banner: 234 x 60.
Vertical: 120 x 240.
Rectngulos y Pop-ups.
Rectngulo: 180 x 150, 336 x 280.
PopUp cuadrado: 250 x 250, 300 x 250.
Rectngulo vertical: 240 x 400.
Skyscrapper: 160 x 600, 125 x 600, 120 x 600
BOTONES Y LNEAS EN HTML

Botones
Son lo denominados "bolos" que se utilizan en las listas:
ul (Unordered List)
Lista con vietas: <ul></ul>
Tipo (square, circle, disc).
Elementos: <li></li>
Por ejemplo:
<ul type = circle>
<li> uno </li>
<li> dos </li>
<li> tres </li>
</ul>
HTML Botones
<a href=#Pepe> <img scr=xxx.gif alt=Mi Grfico vspace=n hspace=n align=middle> Mi Grfico </a>
Lneas
Elemento hr (Horizontal Rule). Muy utilizada hace aos, hoy en desuso.
<hr xxxxx = xxxxx>
Grosor: size (pixel).
Anchura: width (pixeles, %).
Alineacin: Align (center, left, right).
134
EJERCICIOS
1. Construir un Banner.
Vamos a confeccionar un banner mediante una composicin de varias imgenes, que harn de fondo, y luego le
colocaremos textos encima.
Tamao 468 x 60.
Primero fabricar el collage usando capas distintas para cada sub-imagen.
Luego ajustar la transpariencia de todas ellas hasta conseguir el efecto buscado.
2. Disear un botn circular 3D.
Utilizando el valo de seleccin y efectos de capa.
Utilizando estilos.
3. Disear un separador.
Una lnea que, con los efectos que deseemos, ocupe un 80% de la pantalla.
1. Podemos hacer nuestros banners de cualquier tamao, pero conviene seguir los tamaos prefijados.
Verdadero
Falso
2. Hay partes de las pginas que se repiten en todo un conjunto de pginas.
Verdadero
Falso
3. Las lneas de separacin horizontal (hr) se utilizan mucho en las webs modernas.
Verdadero
Falso
4. Es conveniente utilizar contadores de visitas en nuestras pginas.
Verdadero
Falso
5. Poner el copyright no sirve de nada.
Verdadero
Falso
135
CONCLUSIN
Si queremos mantener una imagen institucional uniforme debemos evitar las pginas hurfanas, pginas que
aparecen como pegotes dentro del web.
La implantacin y uso de una buena gua de estilo, junto con hojas CSS, nos va a facilitar mucho la tarea.
Los elementos a tener en cuenta son pocos, y facilitaremos enormemente la navegabilidad de los usuarios por
nuestro web.
Siempre que podamos debemos seguir los estndares, tanto de facto (por el uso y difusin), como de jure
(reglados y normados).
136
TEXTOS Y TIPOGRAFAS
INTRODUCCIN
Las tipografas son conjuntos de signos, unos ms angulosos, otros ms redondeados, que componen un texto
para que pueda ser ledo por un usuario. Debido a las diferencias establecidas entre las diferentes familias, se
han realizado numerosos estudios para determinar cuales son ms legibles en la pantalla del ordenador y cuales
menos. En esta leccin trazaremos unas pautas para que el alumno cree sus textos en la web de manera
atractiva para el usuario.
OBJETIVOS
Conocer ms a fondo las tipografas y las posibilidades que nos dan.
Revisar tcnicas para conseguir buenos ttulos.
Saber cmo mantener el aspecto de nuestros textos, sea cual sea la configuracin personal del usuario
y la arquitectura empleada
APARTADOS
CARACTERSTICAS DE LA LECTURA EN MONITORES

Los textos en pantalla se ven pero, su lectura es un 25% ms lenta. Hay una mayor dificultad de concentracin.
Todo ello hace que sea un medio completamente distinto del material impreso.
Debemos pues adoptar una serie de medidas para compensar estas dificultades:
Los textos de nuestras pginas web siempre deben estar ajustados al usuario.
Deben ser breves, nunca ms de 800 palabras, habitualmente menos.
Mensajes claros. Estilo periodstico, impactantes.
Incluir frases resumen en los laterales.
Utilizar buenas combinaciones de tipografas.
No huir de la creatividad.
Combinar con grficos.
Para que los textos de nuestra web tengan unas buenas condiciones de legibilidad debemos pensar en todos los
usuarios, ser breves y claros, incluir resmenes, combinar tipografas adecuadamente, ser creativos e incluir
grficos.
CONSEJOS GENERALES
Will Harris es uno de los gurs ms influyentes en el tema de tipografas en internet <www.will-harris.com>, y
nos da una serie de pautas a seguir. Algunas son fcilmente comprensibles, y todas ellas son fruto de una gran
experiencia:
Tamao de tipos: >12 ppp.
Interlineado: 20% mayor que el tamao tipos.
Lneas entre 30 y 70 caracteres.
137
Usar indentacin o bolos.
Siempre un espacio despus de cada signo de puntuacin.
No justificar textos si no es imprescindible.
Consejos 2 (will harris).
No subrayar, en especial ttulos.
Utilizar cursiva en su lugar.
No abusar de la cursiva, negrilla o ambas.
Dejar > espacio sobre ttulos que debajo.
Ttulos siempre en maysculas.
Subttulos deben ayudar en navegacin.
Las tipografas facilitan la lectura, o la dificultan, de lo que queremos transmitir al usuario. Sirven al texto.
Influyen subconscientemente en el navegante.
Nos representa ante el lector. Y esto es muy importante, una mala eleccin puede hacer que no se alcance el
objetivo de la web.
No hay fuentes buenas o malas, sino apropiadas o inapropiadas.
El tamao recomendable de los tipos debera de ser de 12 puntos.
El interlineado debera ser un 20% mayor que los tipos.
Las lineas no han de ser demasiado largas, entre 30 y 70 caracteres.
Es recomendable la utilizacin de bolos.
Los signos de puntuacin han de ir seguidos de un espacio.
Los textos no se deben justificar a no ser que sea necesario.
No es recomendable usar el subrayado, es mejor utilizar las cursivas, aunque sin abusar de stas.
Los ttulos han de ir siempre en maysuclas y con un espacio por debajo de ellos.
Es recomendable incluir subttulos para ayudar a la navegacin.
TIPOGRAFAS
Una tipografa es un conjunto de smbolos. No necesariamente letras, o solo letras. Las habituales recogen
las letras minsculas, las maysculas, los nmeros del 0 al 9, signos de puntuacin y algunos caracteres
especiales, como: #, 2 @, , ...
Una tipografa utilizable por nuestras aplicaciones informticas y en nuestro equipo, consiste en un fichero con un
conjunto de grficos que representan los distintos smbolos almacenados, normalmente 255, y a los que se
puede hacer referencia por un ndice de 8 bits.
Para poder utilizar una tipografa, no slo debe estar en nuestro equipo, sino que debe estar cargada en
memoria. Una de las cosas que hace el ordenador al arrancar es cargar en memoria las tipografas que le
hayamos configurado, el problema es que consumen mucha RAM y que no conviene sobrecargar su nmero.
138
Existen miles de tipografas. Pero en nuestros sistemas no solemos disponer de mas de 30-40 . Algunas
aplicaciones incorporan alguna mas.
En el caso de las pginas web, los usuarios deben disponer de las que utilicemos, caso contrario sus
navegadores las sustituirn por otras que s que posean, perdindose todo el efecto buscado. Por ello, no
solemos usar tipografas distintas a las habituales, y cuando lo hacemos, nos aseguraremos de que las vern,
bien incrustndolas total o parcialmente junto con la pgina (embedding), o bien convirtiendo el resultado en un
grfico.
Hay muchas tipografas distintas, y muchas maneras de clasificarlas.
Por el tipo de grficos utilizado:
Fuentes fijas -usos muy concretos- son mapas de pxeles, y son las tpicas de inicio de prrafo en los
tratados medievales. Suelen ser letras muy elaboradas y adornadas.
Escalables -las que se usan- son grficos vectoriales, y por tanto, escalables.
Por el formato concreto:
Truetype (Windows las gestiona) .TTF
Type 1 (Postcript, Adobe Type Manager) .PFB .PFM
Por la forma de terminar los palos rectos:
Serif, con bolos o pequeos trazos que delimitan los palos de las letras. Por ejemplo la Times New
Roman.
Sans, sin ellos, por ejemplo la Arial.
Enlaces
<platea.pntic.mec.es/~jpacheco/tipograf.htm>.
Se llama tipografa al conjunto de smbolos que componen un texto.
Si se quiere usar una tipografa determinada para nuestra web no basta con que est instalada en el
equipo sino que tambin tiene que estar cargada en memoria.
Hay que recordar que para que una tipografa pueda ser vista por los usuarios ha de estar instalada en
sus equipos.
Segn el tipo de grfico utilizado hay fuentes fijas o escalables.
Segn el formato las hay Truetype o Type 1.
Segn las terminaciones de los caracteres son Serif o Sans
139
CARACTERSTICAS
Lo que define una tipografa no es solo su forma, sino que hay una serie de caractersticas asociadas, que
tambin se guardan en el fichero de la tipografa.
Tipo de fuente
Es lo que la identifica: Arial, Times, etc. Es el valor del campo Font Face de HTML.
Tamao
Se mide en Puntos Por Pulgada, es el tamao al que la veremos, al que se escalar durante la visualizacin. En
HTML es el campo Size del Font.
Se aconseja que:
Cabeceras 24-72 ppp.
Subttulos 14-18 ppp.
Texto normal ms de 12 ppp (o 12).
Anchura de los tipos
Proporcional, si se adapta a cada letra en concreto, as la i ocupa mucho menos que la W.
Ejemplo: la Arial Wiii.
Monoespaciada si son de tamao fijo, simulan la mquina de escribir.
Ejemplo: la Lucida Console: Wiii.
Forma
Negrilla (Bold): negrilla.
Cursiva (Italic): cursiva o itlica.
Negrilla-Cursiva: negrilla-cursiva.
Subrayada: subrayado se utiliza para los hiperenlaces.
140
Separacin letras
Es lo que denominamos "Kerning", depende de las parejas de letras que vayan juntas.
Interlineado
Es lo que denominamos "Leading", debe ser mayor del 20% del tamao de tipos para que se lean mejor.
Dingbats
Tipografas que, en lugar de almacenar caracteres alfanumricos, almacenan pequeos grficos como caritas,
corazones, flechas, botones, etc. Algunos de gran calidad y altamente especializados.
El tipo de fuente identifica la fuente (Arial, Times New Roman... ).
Se aconseja que el tamao de las letras de la cabecera sea entre 24 y 72 puntos, el de los subttulos
entre 14 y 18 puntos y el del texto normal de 12 puntos.
El ancho de los tipos debe ser proporcional entre todos ellos.
La forma puede ser negrilla, cursiva, negrilla-cursiva o subrayado.
Kerning es la separacin de las letras.
Leading es el interlineado. Se recomienda que sea un 20% mayor que el tamao de los tipos.
Dingbats son tipografas que almacenan pequeos grficos.
CMO CONSEGUIMOS FUENTES?

Las habituales, las normales, las que tiene todo el mundo, nos las proporciona el propio Sistema Operativo. Son
las ms usadas. Por ejemplo:
Times New Roman.
Arial.
Verdana.
Trebuchet.
Lucida Handwriting.
Courier New.
Algunas aplicaciones, como Photoshop incorporan nuevas fuentes. A travs de Internet podemos conseguir
miles de fuentes de carcter gratuito.
Podemos utilizar las que aparecen peridicamente en CDs junto con revistas especializadas tcnicas.
Podemos adquirir grupos de fuentes de empresas que se dedican a construirlas. La ltima tendencia de estas
empresas es a comercializarlas por Internet, pudiendo adquirir una de ellas de forma bastante asequible.
141
Organizar las fuentes

Pronto tendremos unos cuantos cientos de tipografas y ello nos obliga a pensar en cmo organizarlas, de forma
que sean fcilmente localizables y utilizables. Podemos organizarlas por carpetas:
Serif y Sans para Texto.
Mquina de escribir (Monoespaciadas).
Manuales Y Caligrficas.
Ttulos Y Decorativas.
Dingbats Y Smbolos, Ilustraciones.
Tipos Fcilmente Legibles en un monitor:
Times New Roman.
Arial.
Arial Narrow.
Courier New.
Garamont.
Tahoma.
Trebuchet Ms.
Comic Sans.
Georgia.
Las tipografas habituales nos las proporciona el propio sistema operativo.
Photoshop proporciona algunas tipografas diferentes.
En Internet tambin se pueden conseguir muchas.
Las revistas especializadas tcnicas a veces adjuntan CDs con tipografas.
Tambin existen empresas que se dedican a crear tipografas para posteriromente comercializarlas.
Las tipografas se pueden organizar en diferentes carpetas segn si son Serif para texto, Sans para
texto, Mquina Escribir, Manuales y Caligrficas, Ttulos y Decorativas, Dingbats y Smbolos,
Ilustaraciones.
EFECTOS SOBRE TEXTOS

142
Aparte de las opciones de prrafo y fuente, podremos actuar sobre los textos, que en Photoshop aparecern
como capas vectoriales, de mltiples maneras.
En ocasiones deberemos pasar, previamente, a formato mapa de pxeles la capa vectorial, mediante la
rasterizacin de la capa.
Podemos jugar con la opacidad de la capa. Tambin podremos aplicarle filtros, muchos de ellos con
rasterizacin previa.
Podremos seleccionar la forma de las letras y rellenarla con colores, motivos, aplicarle degradados, etc.
Tambin podremos rellenarla con partes de otra imagen, efecto muy utilizado.
Por ltimo, podremos aplicar recetas de las miles que circulan por Internet, para darle un aspecto concreto.
Estas recetas no son ms que una serie de instrucciones a aplicar en orden para conseguir, por ejemplo, que
parezcan de cristal o de madera.
A veces para aplicar efectos a los textos debemos pasar a mapa de pxeles la capa vectorial. A sto se
le llama rasterizacin.
De esta manera podremos actuar sobre la opacidad, aplicarle filtros, seleccionar la forma de los
caracteres y rellenarlos.
Podemos aplicar una serie de instrucciones que circulan por Internet para conseguir un aspecto
determinado.
EJERCICIOS
1. Aplicacin de efectos especiales: transparencia de capa y desenfoque (filtro) a un texto

2. Rellenar de color rojo un texto
3. Rellenar con un motivo un texto
4. Seleccionar la forma de un texto y rellenarlo con otra imagen
5. Aplicar un estilo a un texto
6. Aplicar una receta:
Archivo, Nuevo, 350 x 150, 28346 pix/cm, escala de grises, transparente.
Edicin > Rellenar, usar negro, 100%, normal.
Texto, click en sitio, Futura Lt BT, Fax-Bold, Tamao 50 ptos, Interlineado 100, Tracking 1, lnea base 0,
blanco (RGB=237).
Teclear un Texto, Posicionar (Mover).
Capa, tringulo, combinar hacia abajo.
Imagen, Rotar Lienzo, 90ACD.
Filtro, Estilizar, Viento (Vendaval, desde izda).
143
Imagen, Rotar Lienzo, 90AC.
Filtro, Estilizar, Difusin (Normal).
Filtro, Desenfocar, Desenfocar Ms.
Filtro, Distorsionar, Onda (gener=1, sinusoidal, long=118-120, amp=1-1, Escala 100%, repetir pixels
borde).
Imagen, Modo, Color Indexado, Acoplar capas OK.
Imagen, Modo, Tabla de Colores Cuerpo negro.
7. Crear un Reflejo sobre el suelo de un texto

Paso primero: pensar cmo deberamos hacerlo.
Parece claro que necesitaremos dos textos, uno el original y otro para el reflejo: duplicar capa.
Uno de ellos deberemos cambiarlo de posicin: voltear.
Deberemos sesgarlo: modificar > sesgar.
Tendr que parecer mucho ms claro: transparencia de capa.
1. Conseguiremos mejores efectos si utilizamos tipografas espectaculares. Cualquier usuario nos lo

agradecer porque ser ms agradable visualmente.
Verdadero
Falso
2. Las tipografas transmiten sensaciones subliminales al usuario.
Verdadero
Falso
3. Los textos de nuestras pginas web deben tener un mnimo de 12 ppp.
Verdadero
Falso
4. El interlineado debe ser de un tamao un 20% superior al del tamao de letra.
Verdadero
Falso
5. Si el usuario no dispone de nuestra tipografa, es imposible que visualice las pginas como nosotros.
144
Verdadero
Falso
6. Es conveniente utilizar subrayado en subttulos.
Verdadero
Falso
CONCLUSIN
Existen cientos de tipografas disponibles, pero todas ellas no lo estarn para todos los usuarios. La nica
manera de poder utilizar una tipografa es tenerla cargada en la memoria del ordenador.
Las tipografas pueden embeberse y viajar junto con nuestras pginas. Tambin podremos convertir a grfico
un texto ya concluido.
145
SECTORES
INTRODUCCIN
En esta leccin aprenderemos a seleccionar sectores, guardarlos, aplicarles efectos... Una utilidad bastante
utilizada son los hiperenlaces, queda muy vistoso poner links en diferentes puntos de una misma imagen, para
ello primero tendramos que seleccionar estos puntos con los sectores y luego establecer el enlace.
Un ejemplo que aparece bastante en las pginas webs son los hiperenlaces en los mapas polticos
seleccionando sectores en cada uno de los polticos e introducindoles hiperenlaces.
OBJETIVOS
Aprender a trocear una imagen de manera que se puede almacenar cada pedazo en un formato y con
unas caractersticas distintas.
Aplicar efectos a un trozo de la imagen y no a los dems (mouseover, filtros, etc.).
Apartados:
SECTORES
Cada uno de los pedazos en que podemos partir una imagen es un sector. Los sectores siempre son
rectangulares, y deben cubrir toda la imagen original.
Existen dos tipos de sectores:
Sector de usuario: los que creamos nosotros.
Sector automtico: los que crea la aplicacin para completar.
Slo podremos aplicar efectos a sectores de usuario, por lo que si queremos hacerlo con uno automtico, habr
que transformarlo antes.
Con PS se pueden efectuar sectores mediante la herramienta escalpelo, o sector.
La herramienta escalpelo funciona igual que el marco rectangular, as que nos ser fcil realizar sectores en una
imagen.
146
Al lado aparece otra herramienta que es la de seleccionar sector, por ejemplo para asociarle una URL y se
convierte en un hiperenlace, o para ascenderlo a sector de usuario.
El panel sector nos permite muchas opciones.
Se le llama sector a cada uno de los trozos rectangulares en que podemos partir de una imagen.
Los sectores los podemos crear nosotros (sector de usuario) o los puede crear la aplicacin (sector
automtico).
Los efectos slo se podrn aplicar a los sectores creados por nosotros.
La herramienta escalpelo nos servir para crear sectores.
Con la herramienta seleccionar sector podremos insertarle un enlace o pasarlo a sector de usuario.
147
GUARDAR SECTORES
Cuando guardamos, en realidad guardar dos cosas, salvo que le digamos lo contrario: un HTML con una tabla y
una carpeta con todas las subimgenes.
Al visualizar el HTML, se ver la imagen porque la compone como si de un puzzle se tratara, y no se aprecia que
en realidad no es una imagen nica.
Utilizaremos siempre la opcin Guardar optimizada como que consigue grandes compresiones.
Al guardar los sectores lo que se alamacena es un HTML con una tabla y una carpeta con
subimgenes.
Para alcanzar grandes compresiones al guardar utilizaremos la opcin Guardar optimizada como.
148
IMPORTANCIA DEL TAMAO DEL FICHERO
El tamao del fichero es fundamental para conseguir cargas rpidas de nuestras pginas. Uno de los factores
que ms penaliza esta carga es el contenido grfico.Se aconseja que No haya ms de 50-60 kb en cada carga
nueva. Las pginas se van cargando una a una.
Opciones:
Comprimir imgenes (Guardar para Web, con prdida).
Uso de cach local.
Posibilidad de cargar imgenes en pginas previas, reducidas (un pxel). Consiste en aadir
imgenes de pginas posteriores a las anteriores, de esta forma ya estn en cach local y no necesitan
descargarse de nuevo. Para que no molesten, se redimensionan a 1x1 pix.
Javascript en segundo plano.
Todas ellas se basan en precargar, antes de necesitarlas, las imgenes correspondientes a pginas que vendrn
posteriormente.
Cuanto ms grande es un fichero, ms tarda en transmitirse por Web.
Soluciones:
Recortar y ajustar el tamao de la imagen, quitar lo sobrante.
Reducir el nmero de colores.
Comprimir (jpg).
Photoshop, Image Ready y Fireworks nos ofrecen una muy buena herramienta, Guardar Optimizada, que
permite seleccionar entre 4 o ms posibilidades, viendo los resultados al mismo tiempo y facilitando que
escojamos.
149
Para que nuestra pgina web se cargue rpidamente se aconseja que el fichero no exceda los 50-60 kb.
Cuanto ms grande sea el fichero ms tarda en cargarse
Es recomendable: comprimir las imgenes, usar la memoria cach local, cargar imgenes en pginas
previas, dejar en un segundo plano con Javascript.
EJERCICIOS
1. Manejo de sectores.
Crear un sector en una imagen.
Aadir sectores.
Asociar a pginas (URL).
Convertir un sector automtico en sector de usuario.
Seleccionar y recolocar o ajustar (con manejadores laterales).
150
Guardar optimizada.
2. Guardar Optimizada como.

Guardar una imagen escogiendo entre GIF, JPG max, JPG medio, JPG mnimo.
1. Un sector de automtico permite que se le asocie un hiperenlace.
Verdadero
Falso
2. Una carga apropiada de una pgina es de 10 MB.
Verdadero
Falso
3. Todos los algoritmos para guardar JPG funcionan igual, independientemente del programa que
utilicemos para ello.
Verdadero
Falso
4. Los sectores de usuario son siempre rectngulos.
Verdadero
Falso
5. Una tcnica para no ver una imagen en una pgina es dimensionarla a 1x1 pix.
Verdadero
Falso
6. Los sectores necesitan un HTML con TABLA para reconstruirse en destino.
Verdadero
Falso
Evaluar
CONCLUSIN
151
Podemos trocear una imagen y cada trozo guardarlo en un formato y con una compresin. Ello nos permitir
jugar con zonas de la imagen que no tienen importancia, bajndoles peso, mientras las zonas nobles de la
imagen se respetan.
El tamao de la pgina en KB es muy importante porque pginas grandes tardarn mucho en descargarse.
152
EFECTOS WEB
INTRODUCCIN
Los rollover son efectos basados en los sectores, consiste en la transformacin del rea de la imagen a la que
se le ha aplicado el efecto cuando se pasa el ratn por encima de ella, en esta leccin explicaremos como se
crean paso a paso.
Otro elemento que se suele utilizar en el diseo de pginas web son las animaciones, es decir, dibujos en
movimiento realizados a partir de varias capas. Por ltimo, aprenderemos lo que son los mapas de imagen y
cuales son sus utilidades.
OBJETIVOS
Aprender a utilizar efectos mouseover y animaciones con la aplicacin Image Ready , que se convierte
en un complemento magnfico de Photoshop para nuestros objetivos.
Propondremos muchos ejercicios porque la mejor manera de aprender a efectuarlos es practicando.
Apartados:
ROLLOVER O MOUSEOVER
Consiste en modificar un sector al sobrevolar el puntero del ratn sobre l.
Muy utilizado en ndices y mens, en donde cambia la forma del texto cuando el ratn pasa por encima, lo que es
una buena ayuda visual a la que se han acostumbrado ya los navegantes y que es un estndar de facto.
153
Cmo se crea uno de estos efectos RollOver?
Crear Rollover con PS e IR:
1.
2.
3.
4.
Con PS creamos las capas que posteriormente mediante la aplicacin IR animaremos.

En PS se crea un texto.
Se duplica capa.
Se desplaza ligeramente y se aplican efectos sobre ella, los que queramos. La idea es que se quede
sensiblemente diferente.
Pasamos a IR.
En IR se crea un sector de usuario que coja el texto.
En paleta Rollover se aade nueva incidencia sobre (ojo porque aqu aparecen muchas
posibilidades, la primera es sobre).
Se juega con la visualizacin de las capas en cada una de las posiciones: normal y sobre.
5.
6.
7.
8.
Ejemplo: Buscar al propietario (se colgar en el foro).

El sector que activa el proceso puede no ser el afectado por los cambios, la imagen nueva puede aparecer en
cualquier sitio.
Puede ser una imagen completamente distinta, no slo una modificacin de lo existente.
Crear efecto rollover con fireworks:
154
1.
2.
3.
4.
5.
6.
7.
Seleccione Edicin > Insertar > Insertar divisin rectangular o Insertar divisin poligonal para
crear una divisin sobre el objeto de activacin.
Cree un nuevo estado en el panel Estados haciendo clic en el botn Estado nuevo/duplicado.
Cree, pegue o importe una imagen para utilizarla como imagen de intercambio en el nuevo estado.
Coloque la imagen bajo la divisin creada en el paso 1. Aunque actualmente se encuentra en el estado
1, la divisin es visible.
Seleccione el estado 1 en el panel Estados para volver al estado que contiene la imagen original.
Seleccione la divisin y coloque el puntero sobre el tirador de comportamiento.
Haga clic en el tirador de comportamiento y elija Aadir un comportamiento de Rollover simple en el
men.
Haga clic en la ficha Vista previa y pruebe el rollover simple o pulse F12 para verlo en un navegador.
El Rollover o Mouseover es la modificacin de un sector pasando el ratn por encima.
Se suele utilizar mucho en ndices o mens.
ANIMACIONES
Consiste en utilizar la capacidad de los formatos GIF, a partir del GIF89a, de almacenar varias imgenes en una.
Normalmente utilizamos las capas para ello, cada capa se convierte en una imagen distinta (IR posee una opcin
para ello).
155
Cmo se hace?
Crear una imagen o cargar una imagen en PS.
Duplicar capas repetidamente.
Desplazar algn objeto seleccionado (texto o imagen) ligeramente en cada capa.
Pasar a IR.
Activar cuadro de animaciones.
Opciones paleta.
Crear cuadros a partir de capas.
Fijar n de repeticiones.
Optimizar animacin (<<50kb).
Seleccionar velocidad reproduccin.
Probar.
ltimos retoques.
Guardar optimizada como GIF.
Fireworks
En Fireworks, puede crear animaciones mediante la asignacin de propiedades a objetos llamados smbolos de
animacin. La animacin de un smbolo se divide en fotogramas. Pasos a seguir:
Cree un smbolo de animacin, puede crearlo desde cero o convertir un objeto existente en un
smbolo.
Utilice el Inspector de propiedades o el cuadro de dilogo Animar para introducir los valores del
smbolo. Puede definir el grado y la direccin de movimiento, la escala, la opacidad (aparicin o
desaparicin paulatina) y, el ngulo y la direccin de rotacin.
Utilice los controles Demora de fotogramas en el panel Fotogramas para establecer la velocidad de
movimiento de la animacin.
Optimice el documento como un archivo GIF animado.
Puede exportar el documento como un archivo GIF animado o SWF, o guardarlo como PNG de
Fireworks e importarlo despus en Flash para modificarlo.
Flash
Aunque dedicaremos un captulo a esta aplicacin, <Flash> , al hablar de imgenes animadas no podemos dejar
de citarlo.
Flash es un programa capaz de manejar grficos vectoriales en movimiento. Adems, dispone de un lenguaje de
programacin potente y de acceso a bases de datos, lo que permite desarrollar aplicaciones completas.
Flash se embebe dentro del HTML y podemos construir una web completa slo con Flash. Hay autnticos
fans de este sistema y se habl de la revolucin FLASH. Muy denostado por algunos gurs.
Permite mltiples animaciones.
Fcil de generar.
156
Poco peso en los resultados (los Viewlets estn almacenados en este formato).
Precisa un plugin o versiones modernas de navegadores para poder visualizarlo.
Normalmente para crear animaciones utilizaremos diferentes capas.
Lo primero que hay que hacer es crear una imagen o buscar una ya hecha, duplicar las capas,
desplazar algn objeto en cada capa,ir a ImageReady activar el cuadro de animaciones, escoger la
opcin crear cuadro a partir de capas y establecer los parmetros que se quiera.
Las animaciones se debern guardar en formato GIF.
MAPAS DE IMAGEN
Consiste en utilizar una imagen como men, para ello se divide en trozos que disponen de hiperenlaces.
Los sectores o trozos pueden ser poligonales, no necesariamente rectngulos, lo que permite sectores
complejos. En realidad se almacenan las coordenadas de cada vrtice. Tambin crculos. Muy utilizado con
mapas geogrficos, en donde cada trozo corresponde a una provincia, Comunidad o similar.
IR posee una paleta especfica para mapas de imagen.
157
La herramienta de mapa poligonal funciona de forma parecida al lazo poligonal, y nos permite hacer
selecciones complejas.
Mediante Fireworks tambin se pueden hacer mapas de imgenes y crear zonas interactivas.
Para realizarlo haga lo siguiente y seleccione el tipo de seleccin que desee (rectangular, circular o
poligonal):seleccione la herramienta Zona interactiva rectangular o Zona interactiva circular o Zona
interactiva poligonal en la seccin Web del panel Herramienta.
Un mapa de imagen consiste en el establecimiento de una imagen como men basado en la creacin
de enlaces en las diferentes reas de sta.
Las reas adems de rectangulares, pueden ser poligonales o circulares.
Un mapa de imagen se suele utilizar en mapas geogrficos.
EJERCICIOS
1. Ejercicio MouseOver sobre Texto.
Crear un efecto Rollover sobre un grupo de 5 textos, a modo de men, de forma que cuando el ratn
sobrevuele los distintos textos, en columna, stos cambien su aspecto.
Colocar hiperenlaces a pginas web existentes (por ejemplo Google y similares).
2. Ejercicio MouseOver sobre una imagen.
Desarrollar un ejemplo semejante al de la momia: buscar a ....
Crear imagen con dos capas (PS).
Sector de usuario (IR).
Crear Rollover (IR).
Previsualizar.
Guardar el HTML y las imgenes.
3. Imgenes animadas.
Crear un logotipo animado.
4. Texto animado en ventana.
Dentro de un rectngulo de 800 x 200 pix.
Un texto corto, debe irse desplazando de izquierda a derecha.
5. Mapa de imagen.
Utilizar un mapa de Espaa para construir un mapa de imagen de las distintas CC.AA. con hiperenlaces
a pginas ficticias con su nombre.
Utilizar etiqueta ALT.
158
1. Los trozos del mapa de imagen no pueden ser circulares.
Verdadero
Falso
2. Cualquier formato GIF nos vale para grficos animados.
Verdadero
Falso
3. Necesitamos capas para conseguir mouseover.
Verdadero
Falso
4. Se puede convertir desde capas directamente a frames de un grfico animado.
Verdadero
Falso
5. Flash se basa en formatos de grficos de mapa de pxeles.
Verdadero
Falso
6. Un sector automtico permite que se le asocien acciones.
Verdadero
Falso
CONCLUSIN
El entorno web es muy especfico y hay determinados efectos caractersticos del mismo, como los efectos
mouseover o las animaciones. Image Ready se ha especializado en stos y otros efectos y simplifica mucho su
realizacin. Al igual que Adobe fireworks, ms utilizado recientemente.
159
FLASH
INTRODUCCIN
Debido a la predominancia de grficos realizados con Flash en la web, hemos introducido una leccin que lleva
este mismo nombre, donde se explicar de forma esquemtica qu tipo de materiales se pueden crear con
Flash, cul es el nivel de dificultad que exige esta herramienta y qu conocimiento previos se recomienda que se
tengan. Lo que ha impulsado esta tecnologa es el uso de animaciones vectoriales con poco peso, es decir, que
tardan poco tiempo en ser cargadas por el navegador.
Por ltimo aprenderemos como se guardan las animaciones creadas por este programa.
OBJETIVOS
Revisar las posibilidades de Flash, aunque no entraremos a fondo en esta estupenda aplicacin de Macromedia
(ahora Adobe). Aconsejamos que las personas interesadas realicen un curso de Flash.
Apartados:
POSIBILIDADES DE FLASH
Flash es una herramienta de Macromedia, ahora Adobe, que maneja grficos vectoriales. Necesita un plug-in,
player, en el cliente para poder ejecutarse. Los navegadores superiores a v.5 ya lo soportan directamente. El
98,3% de los internautas lo tienen.
Es un editor de grficos vectoriales en movimiento. Genera ficheros .FLA y .SWF (pelculas) con un tamao
reducido.
Permite:
Dibujar.
Crear pelculas con fotogramas.
Incluir sonido (importado).
Manejo de variables.
Interactividad.
Programacin.
Flash para interaccionar con el usuario utiliza un lenguaje de programacin llamado Action Script. ste es un
lenguaje orientado a objetos que tiene muchas influencias de Javascript.
Se puede obtener en revistas del sector o una versin trial en la web de la empresa.
Flash es un editor de grficos vectoriales en movimiento.
Los tipos de ficheros que genera tienen la extensin .FLA y .SWF.
El tamao de los ficheros suele ser reducido.
Entre las posibilidades de Flash estn: dibujar, crear pelculas, incluir sonido, manejar variables,
interactuar y programar.
160
APRENDIZAJE
Inicialmente, Flash es una herramienta un poco compleja. Para alguien familiarizado con PS y otros programas
similares, cuesta un poco. El concepto bsico es que TODO son vectores y TODO se puede tocar y
modificar.
Se guarda en formato .FLA y se visualiza con Flash.
Puede importar imgenes BMP, JPG, GIF, etc. Para algunos formatos de vdeo precisa el Quicktime.
ESPACIO DE TRABAJO
A continuacin, se ilustra el entorno de trabajo.
La barra de men. Se encuentra en la parte superior y en ella estn la mayora de opciones de flash.
La Caja de Herramientas. Est en la parte izquierda de la pantalla. Se puede encontrar las

herramientas necesarias para el dibujo y la insercin de textos.
La Lnea de tiempo. Es uno de los paneles ms importantes de flash ya que en ella es donde
desarrollaremos las animaciones y en ellas se encuentran algunos elementos importantes como las
capas, las mascaras, las lneas guas, la biblioteca de smbolos y otras cosas que mas adelante
hablaremos en detalle de cada una de ellas.
rea de Trabajo. Es donde se introducen lo que son los trazados, dibujos, imgenes, textos, etc
161
Paneles Flotantes. Aqu se puede ver todos los distintos tipos de ventanas con las que cuenta flash.
Cada una con una funcin especfica
Modificadores. Se trata del panel Propiedades. En ste panel podemos modificar todas las
propiedades del los elementos que selecciones en el rea de dibujo.
Barra Men. Se encuentran la mayora de las opciones.
Lnea de tiempo. Es un panel muy importante donde se desarrollan las animaciones.
rea de Trabajo. Aqu introduciremos textos, dibujos, trazados...
Panel Propiedades. Se puede modificar las propiedades de los elementeos del rea de trabajo.
ANIMACIONES
Tipos de Fotogramas
Fotogramas clave (F6):
162
Fotogramas de inicio y fin de una animacin.
Fotogramas con acciones.
Se indican en la lnea de tiempo con un punto en la capa en que se encuentren.
Fotogramas normales (F5):
Fotogramas normales entre fotogramas clave.
Formas de crear animaciones
Fotograma a fotograma.
Animaciones interpoladas:
De movimiento.
De tamao.
De color.
De forma (morphing).
Guardar animaciones
Una vez creada una animacin podemos:
Guardarla para que se ejecute con el Player (SWF).
Guardarla embebida en una pgina HTML (Object, Embed).
Creacin de animaciones fotograma a fotograma
163
Dibuje algo en el rea de trabajo.
Si nos fijamos en la lnea de tiempo, vemos que hay un pequeo cuadro gris, esto es que nuestra
animacin slo tiene un fotograma.
164
Para agregar un nuevo fotograma a nuestra escena, damos un clic derecho en el fotograma vaco de la
derecha en la lnea de tiempo y seleccionamos insertar fotograma clave.
Seleccionamos el segundo fotograma en la lnea de tiempo y en la escena seleccionemos el dibujo y lo

movemos un poco.
Para crear ms fotogramas y que la animacin se mueva ms, repita las anteriores operaciones.
Podemos previsualizar nuestra animacin haciendo Ctrl + Enter.
Creacin de animaciones mediante interpolacin de movimiento

Este es otro mtodo de hacer animaciones en flash.
En primer lugar hay que dibujar algo en el cuadro de rea de trabajo.
Vamos a la lnea de tiempo y damos clic derecho sobre el fotograma donde actualmente estamos y
elegimos la opcin crear interpolacin de movimiento.
165
Ahora hay que fijar hasta donde queremos la interpolacin. Para ello seleccionamos el ltimo fotograma
que deseamos y clic derecho y seleccionamos insertar fotograma clave.
El ltimo paso es mover o modificar el dibujo para la creacin del efecto. Este efecto se ver en el
intervalo de tiempo seleccionado en los fotogramas.
Podemos previsualizarla con Ctrl + Enter.
Los fotogramas clave son: el de inicio y el de fin y los que tienen acciones.
Los fotogramas clave se indican en la linea del tiempo con un punto en la capa en que se encuentren .
Entre los fotogramas clave se encuentran los normales.
Existen dos maneras de crear animaciones con Flash fotograma a fotograma o con animaciones
interpoladas.
Podemos guardar las animaciones para que se ejecuten con el player o incrustadas en una pgina web
EJERCICIOS
1. Ejercicio crear animacin mediante fotogramas.
Crear una animacin con al menos 5 fotogramas de un crculo desplazndose por la pantalla.
2. Ejercicio interpolacin de movimiento
Crear una animacin de duracin 50 fotogramas.
El contenido de dicha animacin debe ser un crculo desplazndose en linea recta por la pantalla.
1. Flash permite importar grficos de mapa de pxeles.

Verdadero
Falso
2. Dentro de una pgina HTML no podemos meter flash. Podemos escoger uno u otro, pero no los dos,
para hacer nuestras pginas.
Verdadero
Falso
3. El concepto de fotograma en flash es similar a cmo utilizbamos las capas en los grficos animados,
aunque mucho ms potente.
166
Verdadero
Falso
4. Flash permite usar capas.
Verdadero
Falso
CONCLUSIN
Flash es una excelente aplicacin para crear pequeas (o grandes) animaciones que incorporar a nuestras
pginas, pero sus posibilidades no se limitan a ello.
Se pueden crear aplicaciones completas con Flash, programacin en Flash, e incluso hay concursos de cortos
hechos con l.
167
DREAMWEAVER
INTRODUCCIN
Dreamweaver es una aplicacin en forma de estudio, enfocada a la construccin y edicin de sitios y
aplicaciones web basados en estndares. Fue inicialmente creado por Macromedia, pero en la actualidad es
producido por Adobe .
Es el programa de este tipo ms utilizado en el sector del diseo y la programacin web, por sus funcionalidades,
su integracin con otras herramientas como Adobe Flash y, recientemente, por su soporte de los estndares del
World Wide Web Consortium. Tiene soporte tanto para edicin de imgenes como para animacin a travs de su
integracin con otras, como puede ser el caso de ImageReader.
Es importante hablar un poco de este programa ya que actualmente mantiene el 90% del mercado de editores
HTML.
ESPACIO DE TRABAJO
A continuacin se muestra el espacio de trabajo.
A. Barra de la aplicacin B. Barra de herramientas Documento C. Conmutador de espacios de trabajo D.

Ventana de documento E. CS Live F. Grupos de paneles G. Selector de etiquetas H. Inspector de propiedades I.
Panel Archivos
El espacio de trabajo incluye los siguientes elementos:
Ventana de bienvenida. Le permite abrir un documento reciente o crear un documento nuevo. Desde la
pantalla de
168
bienvenida, tambin puede profundizar sus conocimientos sobre Dreamweaver mediante una visita
guiada o un
tutorial del producto.
Barra de la aplicacin. A lo largo de su parte superior, la ventana de la aplicacin contiene un

conmutador de espacios de trabajo, mens (slo Windows) y otros controles de aplicacin.
Barra de herramientas Documento. Contiene botones que proporcionan opciones para diferentes
vistas de la ventana de documento (como la vista Diseo y la vista Cdigo), diversas opciones de
visualizacin y algunas operaciones comunes como la obtencin de una vista previa en un navegador.
Barra de herramientas Estndar (No se muestra en el diseo de espacio de trabajo predeterminado).

Contiene botones para las operaciones ms habituales de los mens Archivo y Edicin: Nuevo, Abrir,
Examinar en Brigde, Guardar, Guardar todo, Imprimir cdigo, Cortar, Copiar, Pegar, Deshacer y
Rehacer. Para mostrar la barra de herramientas Estndar, seleccione Ver > Barras de herramientas >
Estndar.
Barra de herramientas Codificacin (Slo se muestra en la vista Cdigo). Contiene botones que le
permiten realizar numerosas operaciones de codificacin estndar.
Barra de herramientas Representacin de estilos (Oculta de manera predeterminada). Contiene

botones que permiten ver cmo aparecera el diseo en distintos tipos de medios si utilizase hojas de
estilos dependientes de los medios. Tambin contiene un botn que permite activar o desactivar estilos
de hojas de estilos en cascada (CSS).
Ventana de documento. Muestra el documento actual mientras lo est creando y editando.
Inspector de propiedades. Le permite ver y cambiar diversas propiedades del objeto o texto
seleccionado. Cada objeto tiene propiedades distintas. El inspector de propiedades no est ampliado de
forma predeterminada en el diseo del espacio de trabajo del codificador.
Selector de etiquetas. Situado en la barra de estado de la parte inferior de la ventana de documento.

Muestra la jerarqua de etiquetas que rodea a la seleccin actual. Haz clic en cualquier etiqueta de la
jerarqua para seleccionar la etiqueta y todo su contenido.
Paneles. Ayudan a supervisar y modificar el trabajo realizado. Ejemplos de paneles son el panel
Insertar, el panel Estilos CSS y el panel Archivos. Para ampliar un panel, haga doble clic en su ficha.
Panel Insertar. Contiene botones para la insercin de diversos tipos de objeto, como imgenes, tablas
y elementos multimedia, en un documento. Cada objeto es un fragmento de cdigo HTML que permite
establecer diversos atributos al insertarlo. Por ejemplo, puede insertar una tabla haciendo clic en el
botn Tabla del panel Insertar. Si se prefiere, se pueden insertar objetos utilizando el men Insertar en
lugar del panel Insertar.
Panel Archivos. Permite administrar los archivos y las carpetas, tanto si forman parte de un sitio de
Dreamweaver como si se encuentran en un servidor remoto. El panel Archivos tambin proporciona
acceso a todos los archivos del disco local, como ocurre en el Explorador de Windows (Windows) o en
el Finder (Macintosh).
Nota: Dreamweaver ofrece otros muchos paneles, inspectores y ventanas. Para abrir los paneles,
inspectores y ventanas,utilice el men Ventana.
Ventana del documento. Se puede ver el documento mientras se est editando.
Panel Insertar. Permite introducir varios tipos de elementos en nuestro diseo y al insertarlo se crea
cdigo HTML.
MI PRIMERA PGINA WEB

169
Para que te vayas familiarizando sobre como funciona Dreamweaver, vamos a crear una pgina web sencilla,
con varios estilos de texto, una imagen y un enlace a otra pgina.
Crear esta pgina te llevar muy poco tiempo y sabrs cmo trabajar con los elementos bsicos con los que
estn hechas la mayora de las pginas web. Si nunca has hecho una pgina web, ste es el momento para
descubrir lo fcil que es.
Actividades
Lo primero que tienes que hacer es abrir Dreamweaver.
Abre un documento nuevo y selecciona la Categora Pgina bsica, HTML, en la columna Diseo
dejamos la opcin por defecto: <ninguno>.
Haz clic sobre la zona blanca del documento y escribe unas pocas lneas y una lnea que sea
<www.google.es>.
Vamos a modificar el ttulo y el color de fondo del documento. Clic en men Modificar > Propiedades
de la pgina.
Color de Fondo escribe #CCCCFF (azul). Haz clic en Ttulo/Codificacin, y en el Ttulo escribe Mi
primera pgina.
Para insertar una imagen haga clic Insertar > Imagen. Seleccione la que desee.
Para cambiar el color del texto cambiamos el panel a las opciones de estilo, pulsando el icono CSS a la
izquierda.
Por ltimo vamos a crear el enlace. Selecciona el texto de la lnea <www.google.es>, y cambia el panel
de Propiedades a las propiedades de HTML.
En el campo Vnculo, escribe la URL de la pgina a enlazar.
Por ltimo guarda el documento con extensin htm o html. Archivo > Guardar.
Ahora, puedes ver cmo se ve en tu navegador pulsando la tecla F12.
ELEMENTOS
Los tres primeros elementos los hemos visto en la prctica del apartado anterior (Mi primera pgina web). Ahora
se van a explicar algunos elementos ms que permiten las pginas web y por consiguiente el programa
Dreamweaver.
Textos
Es uno de los campos ms importantes en las pginas html, ya que prcticamente todas contienen textos para
transmitirnos informacin.
Imgenes
Las imgenes son los elementos ms vistosos, entre ellos estn: el logo, las animaciones y las propias imgenes
insertadas para mostrar algo. Mejoran el aspecto visual de la imagen.
Enlaces
170
Los enlaces sirven para llevarnos a otros sitios web, ya sean internos, que es dentro de nuestro sitio web, o
externos, fuera de nuestro sitio web.
Listas
Las listas sirven para dar un aspecto ms ordenado a nuestro texto, en vez de simplemente poner una
enumeracin. Existen dos tipos de listas, las listas simples o no ordenadas (ul) y las listas ordenadas (ol), stas
ltimas se caracterizan porque a cada elemento antecede un nmero en orden creciente.
Para crear una lista simple haga clic en el botn
Para crear una lista ordenada haga clic en el botn
.
.
Tablas
La finalidad de las tablas es presentar una serie de datos de forma clara y organizada, dividindolos en filas y
columnas.
Para insertar una tabla, haga clic en Insertar > Tabla.
Especifique el nmero de Filas y Columnas que tendr la tabla, as como el Ancho de la tabla, en
pixeles o porcentaje.
Formularios
Los formularios se utilizan para recoger datos de los usuarios, nos pueden servir para: realizar una encuesta,
inscripcin en alguna pgina, etc.
Una vez el usuario rellena los datos y pulsa el botn para enviar el formulario se arrancar un programa que
recibir los datos y har el tratamiento correspondiente, esto no lo vamos a ver, nos centraremos solamente la
creacin de los campos del formulario.
Dentro del campo formulario, ste dispone de mltiples elementos, campos de texto, reas de texto, botones,
listas, etiquetas, botn de opciones...
Para insertar un formulario, haga clic en Insertar > Formularios.
Insertar textos. Escribir directamente en el rea de diseo.
Insercin de elementos. Haga clic en insertar > elemento deseado.
Listas, hay dos tipos: listas ordenadas (ol) y listas simples o no ordenadas (ul).
Tablas, permite ordenar cosas. Hay que especificar las Filas, las Columnas y el Ancho de la tabla.
Formularios, tiles para recoger los datos de los usuarios. Poseen mltiples elementos.
EJERCICIOS
171
Basndonos en la primera pgina web que hizo durante esta leccin, ahora le pedimos que amplie esa
pgina web.
1. Crear una tabla.
Como temtica de la tabla se propone realizar un horario.
2. Crear dos listas.
La primera debe ser una lista ordenada con sus deportes favoritos, utilice la lista para especificar el
orden de preferencia (1 el que ms le gusta).
La segunda lista debe ser una lista simple de sus aficiones.
3. Crear un formulario sencillo.
Debe contener como mnimo los campos: nombre, apellidos, cdigo postal, e incluir dos botones: un
botn enviar y otro resetear que inicialice de nuevo el formulario.
1. Existen dos tipos de listas en html, ordenadas y simples.

Verdadero
Falso
2. Dreamweaver no permite integrar archivos de Adobe Flash.
Verdadero
Falso
3. Es necesario un conocimiento alto de HTML para utilizar Dreamweaver.
Verdadero
Falso
4. Las tablas permiten recoger los datos de los usuarios.
Verdadero
Falso
CONCLUSIN
172
Dreamweaver es un excelente programa para la creacin y edicin de pginas web. Como se ha visto no es
necesario tener un conocimiento amplio de HTML para poder usar este programa.
173
CMO SEGUIR?
INTRODUCCIN
Este es un captulo de ampliacin y totalmente opcional. Est dirigido a los alumnos que deseen ampliar sus
conocimientos.
Por un lado, se hablar muy brevemente del lenguaje html as como de sus componentes y elementos.
Por otro lado se darn una serie de referencias para ayudar a la labor de continuar el aprendizaje por
cuenta ajena.
OBJETIVOS
Se adjunta una pequea gua introductoria de html y de sus principales elementos.
Se adjuntan una serie de referencias por si el alumno desea profundizar en algn aspecto del curso.
HTML
INTRODUCCIN
HTML es el acrnimo de Hypertext Markup Languaje, o Lenguaje de marcas de hipertexto. Utiliza marcas o
etiquetas para definir las caractersticas y acciones asociadas al texto incluido entre ellas. Utiliza el concepto de
hiperenlace o saltos (links). Es como un texto polidimensional.
Las etiquetas son interpretadas por el navegador del usuario (local). Si no las entiende: las ignora y sigue.
Siempre hay pequeas diferencias de interpretacin.
El estndar es regulado por el WWW Consortium <www.w3c.es>.
La nueva referencia: XHTML (extensible), est en continuo desarrollo. Tiene una dificultad aprendizaje baja.
Qu permite HTML?
Hiperenlaces.
Imgenes y multimedia.
Listas.
Tablas.
Formularios.
Mapas de Imgenes.
Pginas web activas.
174
OBJETIVOS
Revisar algunos aspectos de HTML.
Este tema es opcional y no es necesario que los alumnos lo estudien. Est aqu como referencia del lenguaje y
como material de consulta.
Se basa en un curso de HTML impartido por el tutor.
LIMITACIONES HTML
No es un lenguaje de composicin. Y genera problemas a la hora de intentar expresar frmulas matemticas o
las notaciones cientficas.
Diferencias de interpretacin:
Navegadores: fuentes, etiquetas especiales.
Hardware: b/n, tamao monitor, ram, resolucin, s.o. y configuracin.
Usuario: configuracin.
El nuevo estndar xhtml: extensible hipertext markup languaje supera algunas limitaciones. El uso de las hojas
de estilo en cascada tambin (CSS y CSS2).
CONSEJOS GENERALES
La mejor forma de aprender es practicando, visualizando el origen de pginas y navegando mucho. Todo se
puede hacer de varias maneras, cometer errores ensea: no hay que tener miedo a probar. Es imprescindible
conocer HTML si queremos hacer buenas pginas WEB.
La principal recomendacin que se puede decir, es que se separe el estilo del contenido, es decir, dejar el estilo
en una hoja css y el contenido en una pgina html.
Los editores Wysiwyg facilitan mucho la tarea, pero hay que saber HTML.
Todo se traduce, al final, en HTML, aunque utilicemos varias herramientas distintas.
Cmo empezar?
Un ordenador.
Un editor (Notepad o bloc de notas de WINDOWS).
Un navegador (para ver resultados). No es necesaria la conexin a internet para construir una pgina.
Tener abiertos el editor y el navegador para comprobar los resultados.
MTODO DE TRABAJO
Hacer siempre un boceto en papel previo. Un site se compone de varias pginas: esbozar el mapa de
navegacin. No olvidar que cada pgina colocada en el servidor tendr su direccin (URL) y se podr acceder
a ella directamente.
Pensar previamente el estilo: tipografas, colores, imgenes de fondo, imagen institucional, ...
175
Organizar el entorno de trabajo: Directorios, Herramientas.
CGI, Common Gateway Interface

Cuando en ACTION del FORM ponemos una URL suele ser un programa CGI en el servidor el que lo
interpreta.
El CGI puede devolver el resultado en forma HTML.
Hay bibliotecas de CGI ya creadas.
Se puede programar un CGI en muchos lenguajes:
Guiones UNIX, shell, Perl, Tcl.
Archivos DOS.
Visual Basic.
AppleScript.
C y C++.
Ejemplo: <http://www.htmlgoodies.com/beyond/cgi/article.php/3470191/So-You-Want-To-Place-ACGI-Huh.htm>.
Etiquetas META
Se colocan en el HEAD, no se visualizan en la pgina.
Le dicen a los Buscadores qu palabras indexar para encontrar pginas, o qu texto breve mostrar.
Hay dos formas de uso (se pueden combinar):
<meta name=keywords content=pal1,pal2,...> (OJO! si ocupa ms de 1 lnea, acabar con

coma cada una).
<meta name=description content=Web dedicada a ...>
o ambos.
CSS. Hojas De Estilo en Cascada

Simplifican la construccin de las pginas. Se define una vez el formato general y se aplica a todo el site.
176
Objetos embebidos en HTML

PDF
<html>
<body leftmargin = 0 topmargin = 0 scroll = no >
<embed width = 100% height = 100% fullscreen = yes src = "file: / / c:\ Fichero.pdf" >
</body>
</html>
SONIDO
Formatos (.WAV, .MID, .MP3, etc.).
Requieren plug-in especficos: Real Player, WinAmp, Windows Media Player, etc.
Pueden tener mucho peso.
Crear el archivo de sonido: Tarjeta de sonido, micrfono, grabadora de sonidos de Windows. Otra
alternativa es utilizar uno ya creado.
Reproducir: Software especfico, altavoces, aumentar volumen...
<A href=xxxxx.wav>pulsar para escuchar</A>.
Fondo de pginas:
Internet Explorer: <bgsound>.
Netscape: <embed>.
src: indica el recurso a escuchar.
loop: para indicar veces que se desea escuchar el recurso.
autostart = true: suena al cargar la pgina sin necesidad de pulsar un botn.
hidden = true: esconde reproductor.
VDEO
Formatos:
Vdeo para Windows: .AVI
Apple Quicktime: .MOV
Secuencias se crean con: Tarjetas Digitalizadoras (cmara vdeo, vdeo, ...), cmaras digitales, etc.
Secuencias se editan con Software especfico: Adobe Premiere.
Inconvenientes:
Gran peso de las pginas (tiempo de carga).
177
Necesitan el reproductor o Player (tiempo de carga).
FLASH
Imgenes vectoriales en movimiento.
Poco peso y muy vistosas.
Necesitan el Player de Flash.
JAVA
Una de las mayores revoluciones en Internet.
Desarrollado por SUN MICROSYSTEMS.
Introduce vida en las pginas.
Genera cdigo Multiplataforma: Lenguaje Universal.
Sirve para crear:
Applets (integrados en pgina, se suelen utilizar para personalizar pginas, hay bibliotecas).
Beans (muy limitados y especficos).
Aplicaciones (ms independientes y potentes).
JAVASCRIPT
Desarrollado por NETSCAPE para completar el HTML (se incluye dentro de la pgina).
<script> .... </script>
No es tan potente como JAVA.
Muy sencillo de aprender.
Permite utilizar Funciones: onMouseOver, onclick, Write, alert, etc.
Tambin Variables, Bucles, Arrays, Condiciones.
LENGUAJE DE ETIQUETAS
Decir que segn el estandar w3c todas las etiquetas deben ir en minsculas. Casi Todas las etiquetas
deben estar cerradas < ... />.
Lenguaje Estructural
<......>
Parejas de etiquetas (corchetes angulares).
Inicio (afecta al contenido)
178
Contenido
...
</.....>
Cierre
Hay etiquetas simples (sin cierre) <.......>
Muchas admiten parmetros o atributos. <... XXXX=xxxxx YYYY=yyyyy ...>
ELEMENTOS HTML
Para poder entender los diferentes elementos Html, esta gua va a ser prctica. Se recomienda ir probando los
diferentes elementos segun se vayan viendo.
Crate un directorio de trabajo c:\Tra\Html. Para cada tipo de fichero usaremos subdirectorios.
Utilizar Bloc de notas: Inicio>Programas>Accesorios>Bloc de Notas.
Etiquetas bsicas
Estructura del documento:
<html>
<head> : Cabecera. Ttulo e informacin de control
<title>............</title>
</head>
<body> : Cuerpo, contenido principal de la pgina: Textos, imgenes, multimedia
</body>
</html>
Comentarios:  (no ser leido por el navegador).
Actividades
Escribe el texto que est a continuacin en el bloc de notas.
Guardar como "esqueleto.htm" en directorio c:\Tra\Html.
<html>
<head>
<title>
Mi primera pgina web
</title>
</head>
<body>
Hola Mundo!!!
</body>
</html>
179
brelo con tu navegador.
Formato de texto
Encabezado de nivel (1-6): <h1>...</h1>
Prrafo: <p>
Lnea en blanco: <br>
Negrita (ajustable): <b>...</b>, <strong>...</strong>
Cursiva (ajustable: <i>...</i>, <em>...</em>
Subrayado (obsoleto hay que hacerlo con css: <u>...</u>
Subndice: <sub>...</sub>
Superndice: <sup>...</sup>
Escribe el texto que est a continuacin en el bloc de notas.
Guardar como "esqueleto.htm" en directorio c:\Tra\Html.
<html>
<head>
<title>
Hola Mundo!!!
</title>
</head>
<body>
<h1>Texto con H1 </h1>
<h4>Texto con H4
<strong>Negrita </strong> <BR>
<em>Cursiva </em>
<br>
<u>Subrayado </u>
<br>
</h4>
<br>
</body>
</html>
brelo con tu navegador.
Atributos
Los atributos se utilizan para dar ciertas caractersticas a una etiqueta. Pueden ser de estilo, como pueden ser el
tamao, el color, la posicin...Actualmente estos han quedado obsoletos. El otro tipo de atributos pueden ser de
ciertas caractersticas como puede ser la accin en un formulario.
Un ejemplo es :
<form action= "..." method = post>
....
</form>
A continuacin se muestran unos atributos de estilo que se han quedado obsoletos en las nuevas
especificacciones de html y se recomienda que no se usen. No obstante, funcionarn si se prueban sobre la
pgina html por la compatibilidad que existe. Como se dijo anteriormente, siempre hay que hacer la hoja de estilo
por un lado y por otro la hoja de contenidos o html.
180
Alineacin en titulares(center | left | right | justify): <h3 align= xxx > (Ojo, algunas NO permitidas dentro
de H).
Tamao, grosos(1-7, +/-): size (--1 es el menor Ojo!!).
Anchura (pixeles, %): witdth
Con relleno: noshade.
Tipo de letra: face.
Color de fondo: bgcolor.
Algunos atributos tiles son:
Para el envo de formularios: action.
Para el cdigo del idioma: lang.
Para el tipo de contenido: type.
Para el valor de la propiedad: value.
Mantener un formato de prrafo existente
Bloque de texto preformateado: <pre>...</pre>
Para escribir una cita textual o un prrafo exacto y que ste se diferencie del resto del texto:
<blockquote>...</blockquote>
Ejemplo:
<body>
<pre>
Haba una vez un barquito ...
En un lugar de la mancha ...
Y no puedo dejar de mencionar ...
</pre>
<blockquote>
Y ste es un texto resaltado con Blockquote
</blockquote>
</body>
Listas
Ttulo: <lh>...</lh>
Lista con vietas: <ul>...</ul>
Atributo type: square, circle, disc.
Elementos: <li>
Lista numerada u ordenada: <ol>...</ol>
N arbigos (por defecto): 1, 2, ...
letras minsculas: a, b, ... , z
181
letras maysculas: A, B, ... , Z
N romanos pequeos: i, ii, ...
N romanos grandes: I, II, ...
Lista de definicin: <dl>...</dl>
Conceptos: <dt>
Definiciones: <dd>
Ejemplo:
<dl>
<dt>Trmino que definimos</dt>
<dd>Definicin propiamente dicha.</dd>
</dl>
Los anidamientos estn permitidos.
Actividades
Copiar el siguiente cdigo a continuacin del ejemplo hecho en el apartado anterior. Tenga en cuenta
que tiene que colocar correctamente cada etiqueta y cerrar su correspondiente en el orden correcto.
<html>
<head>
body {color:black;background-color:yellow}
ol.a {color:red;;text-align:center}
</style>
</head>
<body>

<ul>
<lh>LISTA CON VIETAS </lh>
<li>Primera
<li>Segunda
<ul type=square>
<lh>LISTA CON VIETAS CUADRADAS </lh>
<li>Primera
<li>Segunda
</ul>
</ul>
<ol class="a">
<lh>LISTA NUMERADA </lh>
<li>Primera
<li>Segunda
</ol>
</body>
</html>
182
Imgenes
<img xxxxx = xxxxx>
Fuente: src.
Alineacin: align.
si hay texto alrededor: top, middle, bottom (Vertical).
si no hay texto: right, center, left (Horizontal).
Reserva espacio drecha e izquierda: hspace.
Reserva espacio arriba y abajo: vspace.
Anchura: width (Ojo! Con la deformacin).
Altura: height (Ojo! Con la deformacin).
Texto alternativo (o imagen menor peso): alt.
Actividades
Ahora vamos a insertar una imagen en la pgina web, para ello copia el texto que hay a continuacin y sustituya
la ruta de la imagen para poner la imagen que desee.
<html>
<head><style type="text/css">
body {color:black;background-color:yellow}
div.img
{ margin:2px; border:1px solid #0000ff; height:auto; width:auto; float:left; text-align:center; }
</style>
<title>
Insertando imgenes
</title>
</head>
<body>

<h1>UNA IMAGEN VALE MS QUE MIL PALABRAS</h1>
Vamos a probar el efecto de insertar una imagen en nuestra pgina:
<p>
<div class="img">
<img src=D:\practicas\mono.jpg" alt="Imagen de fondo de windows">
</div>
</p>
</body>
</html>
Vnculos
Saltar desde: <a href = #xxxxx>...</a>.
Sitio a saltar: <a name = xxxxx>...</a>.
Saltar a otra pgina: <a href = xx.htm>...</a>.
183
Saltar a otro site: <a href = http://www...>...</a>.
Ejemplo saltar con imgenes:

<a href=#Pepe> <img scr=xxx.gif alt=Mi Grfico vspace=n hspace=n align=middle>Mi Grfico</a>
......
<a name=Pepe>Soy Pepe ...
Consejos:
Utilizar copiar y pegar simplifica mucho el proceso adems es muy repetitivo (...como habitualmente).
Copie el cdigo de debajo y sustituya #Lgarx y #Inicio por las direcciones que desee.
<a bane = "Inicio">Inicio de la pgina </a>

<a href = "#Lugar1">Saltar al lugar 1</a>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<a name = "Lugar1">Este es el lugar 1</a><br>
<a href = "#Inicio">Saltar al Inicio</a><br>
Ejemplo para mandar un correo :

<a href=mailto:xxxxx@yyyyyy.es>xxxxx</a> (mailto y la direccin email entrecomillada).
sto abre el correo del usuario con nuestra direccin ya puesta.
Mapas de imgenes
A continuacin se muestra cmo se hara un mapa de imgenes manual.
<img src=mimapa.gif usemap=def_mapa ismap border=0 height=125 width=500>
<map name=def_mapa>
<area shape=rect coords=30,7,70,15 href=#zona1></area>
<area shape=rect href=http://www....... (coords=...")></area>
</map>
<a name=zona1>Zona1</a>
Sin herramientas de apoyo es engorroso definir las zonas (mapedit)

<http://www.boutell.com/mapedit> (share)
Tambin con editores HTML profesionales como Dreamweaver, con Image Ready y fireworks.
Al pasar cursor por encima, se transforma en mano (puntos calientes).
El origen de coordenadas X-Y es la esquina superior izquierda (0,0).
Puede tener forma de rectngulo, crculo, polgono.
rect: dos coordenadas, vrtices opuestos.
circle: coordenadas centro y radio.
polygon: varias coordenadas (un par por vrtice).
184
Tablas
Se componen de filas y columnas: celdas, el borde puede desactivarse.
La primera fila suele ser de cabeceras.
Tabla: <table>.
Ttulo tabla: <caption>.
Fila: <tr>.
Encabezado fila o columna: <th>.
Datos de cada celda: <td>.
Antiguamente eran ideales para componer pginas y colocar elementos en posiciones concretas:
maquetar.
Actualmente no se usan para este fin ya que la representacin en dispositivos limitados no sera
correcta y habra problemas para las personas discapacitadas(lectores de texto no lo reconoceran
bien).
Muy tiles para grficos (las celdas se autoajustan al tamao del grfico, salvo que especifiquemos lo
contrario).
Muy tiles para mens.
Necesita cargarse completamente en memoria antes de visualizarse: lentitud.
Existen opciones especficas de cada navegador (no las veremos).
La tabla admite:
Border: con borde, sin l, parcial (10 es como un botn).
Cellspacing: espacio entre celdas.
Cellpadding: espacio entre borde celda y contenido.
Width: por defecto el navegador ajusta al ancho de la ventana.
Cada celda puede tener:
Un texto.
Un grfico.
Estar vaca.
Las celdas admiten:
Align: center, right, left.
Valign: top, middle, bottom.
185
Formato de texto: B, L, U, P, BR, FONT, ...
Pueden fusionarse: vertical, horizontal.
Colspan: Ocupa varias columnas.
Rowspan: Ocupa varias filas.
Width: Ancho de la columna (absoluto en pixels o %) NO USAR CON GRFICOS!
Ejemplo:
<table border = xx cellspacing= xx>
<caption>...</caption>
<tr>
<th>...</th>
<td>...</td>
...
</tr>
...
</table>
Actividades
Cree una pgina nueva con la siguiente tabla.
<html>
<head>
table,td{border:1px solid white;background-color:blue;color:white}
th{background-color:blue;
color:white;}
</style>
</head>
<body>
<table>
<tr>
<th>Nombre</th>
<th>Apellidos</th>
<th>Dinero</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
</body>
</html>
186
Marcos
Permiten colocar varias pginas en una pantalla. Semejante a una Tabla.
tiles cuando hay contenido invariable en varias pginas (tiempo de carga menor).
Hay una pgina que engloba a las dems:

o Definicin forma.
o Punteros.
Los puntos activos de un rea normalmente cambian el contenido de otro rea.
Muy utilizados hasta el ao 2.000.
Tienen algunos inconvenientes: solapes, impresin, ...
El Navegador ajusta el tamao de cada hoja y coloca, si se requieren, barras de desplazamiento.
Tamao de rows y cols: Pxeles, % o * (utiliza espacio libre).
No conviene utilizar ms de 2 3.
Ejemplo:
<frameset rows=*,35%,100>
<frame name=superior src=superior.htm>
<frame name=medio src=medio.htm>
<frame name=inferior src=inferior.htm>
</frameset>
Anidar: rows en cols o viceversa.
Parmetros de <FRAME ...>:
Ancho del margen (pizel): marginheight.
Alto del margen (pizel): marginwidth.
Barra navegacin: scrolling=SI/NO.
Evitar modificacin: nore size.
Formularios
Introducen INTERACTIVIDAD con el usuario.
Ocupan muy poco espacio.
Es ms fcil que un usuario los conteste que responda con un email.
Es conveniente utilizar herramientas para su generacin (Front Page, ...).
La informacin puede viajar encriptada.
El tratamiento de la informacin recibida se suele hacer con CGI en el servidor.
187
Ejemplo:
<form method=POST action=mailto:pepe@tururu.es>
<pre>
Escribe tu nombre: <input name=tunombre type=text size=20>
<br>
Tu email: <input name=email type=text size=20>
</pre>
</form>
Parmetros INPUT:
Nombre que le asignamos a la respuesta: name.
Tamao de la variable: size.
Imagen asociada: cSrc.
Posicin del cuadro: cAlign.
Tipo de variable: type.
Texto: text.
Para contraseas (salen *** al rellenar): password.
Escoger opciones (una o ms): checkbox.
Escoger (una entre varias): radio.
Genera un botn para envo: submit.
Genera un botn de poner en blanco: reset.
Puede cargar un fichero: file.
Semejante a Submit, pero con una imagen: image.
Rango (MIN y MAX): range.
Genera botones (se recomienda input): button.
Cuadro de texto libre: textarea.
Nombre asociado: name.
N de filas: rows.
N de columnas: cols.
N de orden (tabulador): tabindez.
Cuadro de seleccin: select.
Nombre asociado: name
188
Tamao: size.
Para seleccionar las opciones: option.

Ejemplo:
<select name="Elige color">
<option value="1">Azul</option>
<option value="2">Amarillo</option>
<option value="3">Verde</option>
</select>
Actividades
Ahora va a introducir un formulario en las pginas anteriores que ha creado.
Copie y pegue en dicha pgina.
<select name=xxxx>
<option value=Varn>Varn</option>
<option value=Mujer>Mujer</option>
</select>
<form method="POST" action="mailto:pepe@tururu.es">
<pre>
Escribe tu nombre: <input name="tunombre" type="text" size=20 >
<br>
Tu email: <input name="email" type="text" size=20>
<br>
Tu password: <input name="password" type="PASSWORD" size=8>
<br>
Tu sexo:
<select name="sexo">
<option value=Varn>Varn
<option valueMujer>Mujer
</select>
Qieres recibir informacin peridica?: <input name="quiere" type="checkbox">
<br>
<textarea name="textolargo" rows=5 cols=10>
</textarea>
<br>
<input type="submit">
<br>
<input type="reset">
</pre>
</form>
CONCLUSIN
HTML es un lenguaje interpretado de marcas de hipertexto.
Es un lenguaje estructurado, formado por etiquetas que permiten embeber los diferentes elementos. Adems
estos elementos podrn tener ciertas caractersticas mediante el uso de atributos.
Hemos visto como insertar: imgenes, lista, vnculos, tablas, formularios... entre otros elementos.
189
Fuentes de Referencia
LIBROS Y REVISTAS.
Libros
Existen muchos y muy variados, la mayora sobre herramientas especficas como Photoshop o los otros editores,
tambin sobre edicin web en general. Hay que fijarse en la fecha, puesto que en todo lo referente a informtica,
y a Internet, importa y mucho y el material se vuelve obsoleto con mucha rapidez:
Diseo de Imgenes para la Web, LYNDA WEINMAN, Es de 1.999, Publicado en Espaa en 2.002.
ANAYA Multimedia. Mucha Experiencia pero algo obsoleto. Es el nico que se centra en estos temas
en castellano.
Diseo de sitios web, manual de referencia. La Biblia, de Mc Graw Hill.
La serie de Anaya Multimedia Diseo y Creatividad con grandes ttulos, al lado de otros
prescindibles.
La serie Manuales Visuales de editorial Blenguer.
Recopilaciones de webs y de primeras pginas (para coger ideas), como la serie Web Design Index
que se publica anualmente.
Revistas
Hay muchas, de gran calidad, pero algo caras:
Web Master.
Design.
INTERNET Y CURSOS
Internet
Desde hace unos aos, la mayor biblioteca del mundo. Se puede encontrar de todo, aunque hay que ser muy
crtico con su calidad y obsolescencia.
Imprescindible la web de Adobe y algunas ms como pueden ser:
El rincn del programador.
Asociacin Internautas.
Asociacin Usuarios de Internet.
Adobe.es.
Quesabesde.com, todo sobre las cmaras digitales
Ms informacin en enlaces.
Cursos
Algunos de gran calidad. Se recomienda a los alumnos que realicen alguno intermedio sobre photoshop.
190
Enlaces
<wwwac.org>
<www.nynma.org>
<www.3dcafe.com>
<www.adobe.com/es>
<www.lawebdelprogramador.com>
<www.galeon.com/todowebmaster>
<www.softonic.com>
<www.solorecursos.com>
CONCLUSIN
A la hora de buscar un libro de consulta hay que tener muy en cuenta la fecha de publicacin de ste en
materias informticas.
Las revistas que existen sobre el diseo web tienen el inconveniente que son muy caras.
En internet hay que ser muy crtico con el material que se elige sobre la materia.
Se recomienda la realizacin de un curso intermedio de Photoshop.
CONCLUSIN
HTML es un lenguaje de marcas de hipertexto que utiliza marcar y etiquetas para definir las caractersticas y
acciones asociadas al texto incluido en ellas. Tiene ciertas limitaciones debido a que no es un lenguaje de
composicin, y a las diferentes interpretaciones de: navegadores, hardware y configuracin que tenga el usuario.
Se ha explicado un poco este lenguaje ya que aunque no es imprescindible para los desarrolladores web, se
considera bueno que dispongan de dichos conocimientos.
Adems se facilitan diferentes fuentes de referencias para los alumnos que quieran seguir avanzando con
informacin relacionada con el curso.
PRCTICA FINAL DE CURSO (OBLIGATORIA)
Objetivos:
Poner en prctica todo lo aprendido durante el curso.
Cada alumno debe entregar al tutor una serie de trabajos, comprimidos mediante formato zip y
adjuntos a un correo electrnico. Los formatos se especifican en cada uno de los apartados.
191
Materiales a entregar
Las imgenes originales, de trabajo, pueden conseguirse por cualquier medio. El tutor pondr algunas en el foro
(comprimidas en formato zip, se pueden utilizar imgenes propias, se pueden descargar de Internet, ...).
Tcnicas de seleccin
5 objetos, personajes o elementos extractados de otras imgenes, con la mayor calidad posible. Formato JPG o
GIF.
Fondos
3 fondos, de 800 x 600 pxeles, en formato JPG o GIF.
Textos
5 ttulos realizados con las tcnicas aprendidas durante el curso. En este caso debe adjuntarse el archivo PSD
con sus capas.
Botones
3 botones realizados con las tcnicas aprendidas. Formato JPG o GIF.
Logos
2 logotipos. Formato JPG o GIF.
Imgenes en movimiento
2 ficheros GIF animados.
Mouse Over
Un fichero Html con su carpeta images, con un men con efectos mouse over.
Un juego ldico de encontrar a.
Formato PSD con las capas, junto con el resultado JPG o GIF, y el HTML.
BIBLIOGRAFA
Libros
Diseo de Imgenes para la Web, LYNDA WEINMAN, Es de 1.999, Publicado en Espaa en 2.002.
ANAYA Multimedia. Mucha Experiencia pero algo obsoleto. Es el nico que se centra en estos temas
en castellano.
Diseo de sitios web, manual de referencia. La Biblia, de Mc Graw Hill.
La serie de Anaya Multimedia Diseo y Creatividad con grandes ttulos, al lado de otros prescindibles.
192
La serie Manuales Visuales de editorial Blenguer.
Enlaces
<www.adobe.com/es>.
<www.lawebdelprogramador.com>.
<www.galeon.com/todowebmaster>.
GLOSARIO
AcDeSee
Programa de fotografa digital.
Adobe Image Ready

Es una aplicacin semejante a Adobe Photoshop que permite mejorar los resultados de ste. Permite utilizar
unos algoritmos de guardado que consigue que nuestras imgenes ocupen menos. Actualmente se incluye
dentro de Photoshop y Dreamweaver
Adobe Photoshop
Editor grgfico que agrupa las utilidades de varios programas basadoas en algoritmos matemticos y permite
ampliar y reducir una imagen, quitar trozos, copiar, aislar, modificar, etc.
Administracin de sistemas
Es la tarea de mantener los servidores web. los gestores de bases de datos, los entornos de desarrollo, los
plugins y applets necesarios y actualizar parches y versiones.
AhaView
Programa indicado para la catalogacin de imgenes.
Animaciones
Estn basadas en los formatos que tienen la capacidad de almacenar varias imgenes en un solo archivo.
Banners
Contenidos publicitarios o de noticias y avisos.
Cmara digital
Se compone de tres elementos un sensor de imagen, un convertidor de analgico/digital y un filtro rgb o cmyk
que aade color.
Capas
Rectngulos transparentes u opacos superpuestos unos a otros que componen una imagen.
Facilitan la clasificacin de imgenes visualizando pequeas muestras. Tambin transforma los diferentes
formatos grficos.
CMYK
Cyan, Magenta, Yellow, Black
Codificacin HSB
Referencia del color basado en el matiz, la saturacin y la luminosidad o el brillo.
Colores hbridos
Se basan en la tendencia del ojo a rellenar los espacios en blanco, tomando dos o ms colores y mezclndolos
en damero.
193

Dingbat
Tipografas que almacenan pequeos grficos como caritas, corazones, flechas, botones, etc.
Diseo grfico
Es la tarea de producir los grficos y las imgenes que posteriormente se colocarn en la web.
Diseo Web
Es la tarea de generar pginas mediante editores usando el lenguaje HTML.
Dominio
Se trata de una red de identificacin existente en Internet que se asocia a un grupo de dipositivos o equipos
conectados.
Escaner
A la hora de adquirir un escaner nos fijaremos en aspectos como el color, la resolucin, la interpolacin, la forma
de conexin o el software.
Editores HTML
Se trata de programas que permiten escribir codigo ASCII HTML. Las pginas se deban estar abriendo con el
navegador para ver los resultados.
Editores grficos
Son las herramientas software que permiten manejar grficos de diversos formatos y relizar con ellos
operaciones como apertura, edicin, modificacin, cambio de formato o guardado.
Editores visuales HTML

Son editores que permiten ver el resultado mientras se trabaja con ellos.
Escala de grises
256 tonos (0=negro, 255=blanco)
Filtros
Son una serie de acciones encadenadas en Photoshop que transforman el contenido de la seleccin o de toda la
imagen.
FLASH
Editor de grficos creada por Macromedia que maneja grficos vectoriales.
Formato BMP
Formato de mapa de pxeles creado para Microsoft.
Formato FIF
Fractal Image Format.Formato de imagen que consigue grandes compresiones.
Formato FLA
Formato vectorial utilizado por FLASH, con una compresin grande y muy bueno para animaciones.
Formato GIF
Formato de mapa de pxeles con compresin sin prdida de calidad.
Formato JPG/JPEG
Formato de mapa de pxeles con compresin con prdida de calidad.
Formato de mapa de pxeles

Formato grfico que almacena la informacin asociada en cada uno los pxeles de la imagen.
Formato MPEG
Formato JPG en movimiento.
Formato PDF
Creado por Adobe Acrobat, gratuito. No es exclusivo de imagen.
Formato PNG
Formato de mapa de bit con compresin sin prdidas.
Formato SVG
194
Scalable Vector Graphics. Basado en XML. Entre sus utilidades aade zoom, tipografas, bsquedas e
interaccin con el usuario
Formato TGA
Formato profesional de mapa de pxeles que compite con el formato TIFF.
Formato TIFF
Tag Image File Format. Fomato de imagen de alta calidad y sin prdida en la compresin.
Formatos vectoriales
Almacena las imgenes las descomponindolas en pequeos polgonos regulares de los que guarda su posicin,
coordenadas de los vrtices o puntos clave, las texturas de las superficies, etc. Para visualizar slo tiene que
interpretarlas las frmulas e interpretarlas.
Formato VML
Vector Markup Language. Est basado en XML.
Fotograma
Secuencia de imgenes que se reproducen en una secuencia determinada.
Fractales
Grficos confeccionados mediante la aplicacin de valores crecientes a determinadas frmulas matemticas.
Fuentes Fijas
Son mapas de pxeles, utilizadas normalmente al inicio de prrafos.
Fuentes Sans
Las letras no tienen pequeos trazos que las delimiten.
Fuentes Serif
Tienen pequeos trazos que delimitan los palos de las letras.
Futuris
Programa que permite capturar pantallas y gestiuonar webcams.
Galeras de imgenes
Son colecciones de imgenes prediseadas libres de copyright.
Gestores de contenidos
Fijan los estndares, mtodos y procedimientos para publicar algo en la web.
GIMP
Editor grfico freeware.
Grficos escalables
Grficos vectoriales.
Herramienta escalpelo
Herramienta de Photoshop para dividir una imgen en sectores.
Hosting
Servicio que provee a los usuarios de Internet un sistema para poder almacenar informacin.
IrfranView
Programa bastante completo que permite hacer modificaciones de buena calidad a las imgenes.
Kerning
Separacin entre letras.
Lab
Luminosidad (L = 0-100), Verde-rojo (A = -120 +120), Azul-amarillo (B = -120 +120).
Lazos
Herramienta para seleccionar por forma, se puede selccionar a mano alzada, poligonal o magnticamente.
Leading
195
Interlineado o espacio que hay entre las lneas de escritura.
Lenguaje HTML
HiperText Markup Languaje. Se utiliza para elaborar el contenido de las pginas web.
L-View
Programa que destaca por sus amplias opciones de retoque.
Mapa de imagen
Utilizacin de una imagen como men.
Marcos
Herramienta para seleccionar por forma, puede ser rectangular, oval, fila de pxeles o columna de pxeles.
Mscara rpida
Sirve para refinar una seleccin realizada previamente.
Modo indexado
Paleta de 256 colores ajustada.
Monitores CTR
Son los que estn compuestos por un tubo de rayos catdicos.
Monitores LCD
Son los llamados de pantalla plana.
Nmero de bits por pxel

Cantidad de bits por pxel necesarios para representar un color.
Pginas
Presencia web que se limita a unas cuantas pginas elaboradas con HTML y que normalemnte suelen ser de
carcter personal.
Paint Shop Pro

Editor grfico de muy alta calidad.
Pantone
Paleta de colores numerada con el fin de poder identificar un color determinado.
Picture Tube
Herramienta de Paint Shop Pro que sirve para rellenar zonas de las imgenes con vegetales, animales,
smbolos, etc.
Pxels
Pequeos rectngulos, que mediante una determinada luminosidad, color, tono y brillo, transmiten al ojo
humano las imgenes, el ojo agrupa la informacin y ve los pxeles en conjunto, y el cerebro interpreta el
resultado.
Portales
Agrupacin de servicios y ofertas. Desde ellos se puede acceder a otros sitios de Internet. Suelen tener
buscadores dentro y fuera del portal.
Protocolo FTP
File Transfer Protocol. Se utiliza para enviar los contenidos de las pginas web al host una vez desarrollados.
Protocolo HTTP
HiperText Transfer Protocol. Se utiliza para la transmisin de los contenidos de las pginas web entre proveedor
(hosting) y usuario (navegante).
Radiosity
Calcula tambin los rebotes de los haces de luz y su interrelacin con otras superficies, y as sucesivamente,
calculando la amortiguacin hasta que desaparece completamente.
Sectores
Es cada uno de los trozos rectangulares en los que podemos dividir una imagen. stos pueden ser de usuario o
automticos.
196

Sntesis aditiva del color
Es una manera de conseguir colores aadiendo a unos colores otros y mezclndolos.
Sntesis sustractiva del color

Es una forma de obtener colores evitando reflejos desde una superficie.
Sitios Web
Grupo de pginas con actualizacin frecuente que ofertan servicios e interactan con los usuarios.
Rasterizacin
Proceso mediante el cul una imagen en formato vectorial se convierte en un conjunto de pxeles para formar
una imagen de mapa de bits.
Render
Consiste en proyectar haces de luz desde las fuentes de iluminacin de una imagen hasta todos y cada uno de
los vxeles de las superficies, modificando en consecuencia sus caractersticas de color, brillo y luminosidad.
RGB
Red, Green, Blue(Rojo,Verde,Azul)
Rollover o Mouseover
Efecto de la imgen que modifica un secotr cuando se pasa el puntero sobre l.
Subdomino
Subgrupo de clasificacin del nombre del dominio.
Tipo de fuente
Es la familia de la fuente, es decir, la que la identifica.
Tipografa
Conjunto de smbolos que componen un texto.
Usabilidad
Consiste en hacer los sitios web ms eficaces, eficientes y cmodos para que el usuario pueda navegar por
ellos.
Varita mgica
Herramienta que permite seleccionar el color de una imgen por tonos continuos.
Vxel
Es el equivalente del pxel en una figura 3D.
XnView
Programa catalogador de imgenes con muchas posibilidades.
197

Diseno Grafico Web

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Diseno Grafico Web

Caricato da

Copyright:

Formati disponibili

DISEO GRAFICO WEB

Propuestas en las Unidades Didcticas (voluntarias).

Prcticas que se propondrn en el foro de seguimiento del curso.

Prctica final del curso (obligatoria).

Participacin activa en el foro de discusin.

Necesidades para cubrir el curso

INTRODUCCIN AL DISEO GRFICO WEB

La simplicidad de sus protocolos de transmisin, la omnipresencia de elementos de acceso a la red y la

Enlaces a Bases de Datos

Enlaces a correo electrnico

TAREAS BSICAS DEL DISEO GRFICO WEB

CONFIGURACIN DEL ENTORNO TRABAJO

Estableceremos la ocultacin automtica de la barra de tareas de nuestro escritorio podr tener ms

Otro objetivo del diseo es evocar reacciones subliminales en el usuario.

La web se ha convertido en un medio de comunicacin ms, en el medio por excelencia al permitir

El uso del hipertexto, que da tridimensionalidad a nuestros contenidos.

Una de la que ya se disponga.

Nombre del alumno.

Email de contacto que se desea (personal, oficial, ...).

Si se dispone ya de una versin de Photoshop y cul, si es trial o completa.

Conocimientos de Photoshop o de otros Editores Grficos (nulos, iniciales, medios, altos).

Si el alumno trabaja en un departamento de desarrollo y mantenimiento web o no.

Qu otras herramientas web se conocen y el nivel de conocimiento (Dreamweaver, Adobe GoLive,

Revisar las distintas maneras que tenemos de almacenar nuestros grficos.

Ver qu ventajas tienen unas con respecto de otras.

USOS DE LAS IMGENES EN LA WEB

VENTAJAS E INCONVENIENTES DE LOS GRFICOS EN LA WEB

Dan un aspecto ms interesante.

Permiten dar formato.

Evocan sentimientos subliminales.

De intensidad: fotografas, vdeos, ...

De alcance: radares, queratometra, ...

En este curso nos centraremos en las primeras.

Existen dos formas de almacenar la informacin grfica:

Vamos a ver detenidamente ambas.

Los tipos de imgenes digitales son las de intensidad y las de alcance.

FORMATOS DE MAPAS DE PXELES

Cuanto ms grande es la imagen mayor es la informacin a almacenar.

El nmero de bits por pxel es la profundidad de bit.

Para solucionar el problema del espacio en el almacenamiento de imgenes se utilizan tcnicas de

Las imgenes en mapa de pxeles suelen ser de mayor calidad.

Mandelbrot. xnew = a + bx + cx2 + dy + ez + f sin(pi t/8), ynew = x, znew = y, donde a y f son

Tambin se usan vectores que indican direcciones, as se consigue mover objetos.

FORMATOS GRFICOS CLSICOS

PIC. Picture File. Utilizado por Lotus 1-2-3. Vectorial.

PCX. Paint Brush de Z-Soft. Vectorial.

BMP. BitMap de Microsoft. Como su nombre indica, mapa de pxeles.

PCD. Kodak Photo CD. Mapa de pxeles.

PSD. Photoshop de Adobe. Mapa de pxeles.

PDF. Adobe Acrobat de Adobe. Vectorial.

WMF. Windows Metafile Format. De Microsoft. Vectorial.

EPS. Encapsulated Postscript. El utilizado por las impresoras postscript. Vectorial.

GIF. Graphic Interchange Format de Compuserve. Mapa de pixeles.

JPEG/JPG. Joint Photographic Experts Group. Mapa de pxeles.

FLA/SWF. El de Flash y el de Shokwave de Macromedia. Vectoriales.

Es compatible con Windows y con OS2.

Utiliza 32 bits de profundidad por pxel.

Muy extendido en Artes Grficas e Infografa.

Compatible con SGI, MAC y PCs.

No es exclusivo de imagen, tambin soporta texto.

Ocupa poco espacio.

Compatible con pc y mac

Mapa de pxeles con compresin 10:1 sin prdida de calidad.