Escolar Documentos
Profissional Documentos
Cultura Documentos
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
Test de autoevaluacin
Conclusin
3. CAJA DE HERRAMIENTAS
Introduccin
Objetivos
Apartados
Herramientas software
Herramientas hardware
Ejercicios
Test de autoevaluacin
Conclusin
4. EDITORES GRFICOS
Introduccin
Objetivos
Apartados
Qu son?
Adobe Photoshop (PS)
Adobe image ready (IR)
Adobe Fireworks
Paint shop pro
Gimp
Ejercicios
Test de autoevaluacin
Conclusin
5. ENTORNO Y MTODOS
Introduccin
Objetivos
Apartados
Equipos de desarrollo
Entornos de desarrollo
Sistema de trabajo
Ejercicios
Test de autoevaluacin
Conclusin
6. HERRAMIENTAS AUXILIARES
Introduccin
Objetivos
Apartados
Catalogadores de imgenes
L-View
Futuris
IrfanView
AhaView
XnView
AcDeSee
Ejercicios
Test de autoevaluacin
Conclusin
7. FASES DE CREACIN DE UN WEBSITE
Introduccin
Objetivos
Apartados
Fases de creacin de un website
xito en la web
Usabilidad
Ejercicios
Test de autoevaluacin
Conclusin
8. DISEO Y COMPOSICIN
Introduccin
Objetivos
Apartados
Fuentes de diseo grfico
Diseo web
Elementos bsicos
Limitaciones del diseo
La composicin
Ejercicios
Test de autoevaluacin
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
Test de autoevaluacin
Conclusin
10. TCNICAS DE SELECCIN. CAPAS
Introduccin
Objetivos
Apartados
Tipos de seleccin
Herramientas de seleccin
Usos selecciones
Herramientas de seleccin avanzadas
Capas
Ejercicios
Test de autoevaluacin
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
Test de autoevaluacin
Conclusin
12. FONDOS
Introduccin
Objetivos
Apartados
HTML de fondos
Posibilidades creacin de fondos
Ejercicios
Test de autoevaluacin
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
Test de autoevaluacin
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
Test de autoevaluacin
Conclusin
15. SECTORES
Introduccin
Objetivos
Apartados
Sectores
Guardar sectores
Importancia del tamao del fichero
Ejercicios
Test de autoevaluacin
Conclusin
16. EFECTOS WEB
Introduccin
Objetivos
Apartados
Rollover o MouseOver
Animaciones
Mapas de imagen
Ejercicios
Test de autoevaluacin
Conclusin
17. FLASH
Introduccin
Objetivos
Apartados
Posibilidades de Flash
Aprendizaje
Espacio de Trabajo
Animaciones
Ejercicios
Test de autoevaluacin
Conclusin
18. DREAMWEAVER
Introduccin
Objetivos
Apartados
Espacio de trabajo
Mi primera pgina web
Elementos
Ejercicios
Test de autoevaluacin
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:
10
Autoevaluaciones de cada UD, que se aconsejan realizar para un correcto asentamiento de la informacin
aprendida.
11
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
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>.
Conceptos importantes
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
Sonido
Elementos embebidos
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.
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.
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:
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.
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
18
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.
3. Mandar un correo electrnico a los tutores (la direccin estar en el foro en el mensaje de bienvenida)
con:
19
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
Combinar formatos.
CONCEPTOS IMPORTANTES
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
Mejoran la comprensin.
22
Informan.
Entretienen.
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.
CONCEPTOS IMPORTANTES
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.
CONCEPTOS IMPORTANTES
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:
Mapas de pxeles.
Sistemas vectoriales.
CONCEPTOS IMPORTANTES
Las formas de almacenar la informacin grfica son en mapa de pxeles o en sistemas vectoriales.
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.
CONCEPTOS IMPORTANTES
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.
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.
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:
Julia. z^2 + c.
TIFF. Taged Image File Format. Es el utilizado por la mayora de escneres. Mapa de pxeles.
TGA. Targa.
IFF. Amiga.
27
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.
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.
Formato PDF
PDF (Portable Document File) es el programa utilizado para leer este formato es el Adobe Acrobat Reader
(gratuito).
Formato GIF
Es uno de los ms difundidos en Internet por su flexibilidad. Es muy utilizado para: logos, iconos, pequeos
grficos animados....
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.
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:
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.
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.
Compromiso calidad-tamao.
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.
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.
La imagen descomprimida no es igual que el original a nivel binario (el ojo no lo percibe).
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.
No permite animacin.
Formato TIFF
TIFF ( Tag image file format.) ofrece alta calidad y comprensin sin perdida pero es incompatible con muchos
navegadores.
31
Profesional: MAC.
Rpido en la carga.
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.
o
o
o
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.
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).
Basado en XML.
Formato SVG
SVG (Scalable Vector Graphics) aade zoom, tipografas, bsquedas, interaccin con usuario, ...
32
Conceptos importantes
El formato BMP:
Es un formato de mapa de pxeles para los sitemas de Windows y tambin compatible con
OS2.
El formato GIF:
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.
En Adobe Photoshop e Image Ready se pueden guardar las imgenes para la web.
El formato JPEG:
No admite transparencia.
33
EJERCICIOS
Actividades
1. Generar una imagen RGB, con fondo transparente, de 300 x 300 pxeles.
Rellenar de blanco.
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.
34
TEST DE AUTOEVALUACIN
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.
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
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).
Kaiss power.
Bryce.
Picture it.
Photodraw.
37
3d studio max.
Maya.
Pov ray.
Lightwave.
Adobe flash.
Adobe fireworks.
3d studio.
Gimp (freeware).
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.
CONCEPTOS IMPORTANTES
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.
Opera.
Servidor web
Adobe Indesign.
Adobe Illustrator.
39
Go Live.
Photoshop.
Illustrator.
Livemotion.
Catalogadores de imgenes
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.
Real player.
Galeras de imgenes
Son colecciones de imagines prediseadas libres de copyright y que podemos utilizar en nuestros proyectos.
Existen muchas:
Gallery.
Enciclopedias,
Internet.
40
CONCEPTOS IMPORTANTES
Entre los navegadores que han tenido ms relevancia estn: Internet Explorer, Netscape Navigator,
Mozilla, Opera y Linx.
41
HERRAMIENTAS HARDWARE
Espectro electromagntico
Slo una pequea parte del espectro electromagntico corresponde a luz visible por el ojo humano. Para
hacernos una idea:
Espectro visible
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.
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.
Las mejores a nivel profesional son las Nikon y Canon, aunque existe una gran variedad en el mercado
con muy buenas prestaciones.
Algunos clculos:
43
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.
44
CONCEPTOS IMPORTANTES
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.
Existen de Sobremesa y mquinas industriales, capaces de escanear documentos a gran velocidad (cientos por
minuto).
Fases escaneado
Escaneamos.
45
Creacin de imgenes
Consiste en el uso de aparatos que nos simplifican la tarea de crear imgenes
Tabletas digitalizadoras.
Pens especiales.
Visualizacin de imgenes
Monitores.
Impresoras.
Tarjetas de vdeo.
46
Monitores
Impresoras
Lser
Chorro de tinta
Apis aceleradores 3d
Direct 3d directx
CONCEPTOS IMPORTANTES
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
TEST DE AUTOEVALUACIN
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.
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.
Conceptos importantes
Los editores grficos sirven para manejar grficos de varios formatos y modificarlos.
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:
Una barra de herramientas, normalmente con las opciones de la herramienta seleccionada en cada
momento.
En el lateral izquierdo:
En el lateral derecho:
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.
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.
55
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
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.
Conceptos Importantes
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.
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.
Segmentacin de imgenes.
Efectos rollover.
Mapas de Imgenes.
59
Imgenes en movimiento.
Descripcin general:
Interfaz.
Cuadro herramientas.
Cuadro optimizar.
Conceptos Importantes
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
Cmo obtenerlo?
<www.corel.com>.
Revistas.
Internet.
61
Conceptos Importantes
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>.
Conceptos Importantes
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.
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).
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
TEST DE AUTOEVALUACIN
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
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.
Conceptos Importantes
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.
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
Conceptos Importantes
Se debe trabajar en red con directorios comunes para los originales, las fuentes de documentacin y los
resultados definitivos.
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.
Conceptos Importantes
Nunca se deben de perder los originales, que deben estar en una carpeta 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.
TEST DE AUTOEVALUACIN
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:
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.
Efectuar pases de diapositivas. Muy utilizados para dejar pasando imgenes en un monitor. Tambin
como salvapantallas.
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.
Conceptos Importantes
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.
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.
TEST DE AUTOEVALUACIN
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
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
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
Fase 1. Planificacin.
Fase 2. Produccin.
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:
Eleccin del medio, a veces la web no ser el ms apropiado, en otras ocasiones ser slo un
complemento a otros: cmo.
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:
Para ello:
Entorno e interfaz.
Composicin, colores, tipografa, imagen corporativa, usability: se confecciona una gua de estilo.
Se desarrollan.
Diseo de fondos, preparacin de imgenes individuales. Aqu entrarn a fondo los diseadores
grficos.
75
Fase 3. Postproduccin
Es una fase prctica. Consiste en poner la web en marcha y mantenerla.
1. Aspectos prcticos (los veremos a continuacin).
Pruebas de funcionamiento.
3. Publicidad.
4. Anlisis de resultados.
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:
Tonos pastel.
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.
Puesta en marcha
Subir el site al server de hosting, al directorio que nos indique el admin: ftp.
Index.htm, default.htm son los nombres de la pgina de inicio habitual, y para qu cambiarlo.
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.
Conceptos importantes
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.
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?
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
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
Recursos inadecuados.
Mal diseo.
Lentitud de carga.
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.
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 .
79
Si se va, no vuelve.
Se miran: primero los titulares y resmenes, luego las listas, los grficos (no siempre), al final los textos
(poynter institute, mayo 2.000).
Confidencialidad.
Seguridad.
Servicio y garanta.
Datos recientes:
40% de los que buscan empleo en USA, no pueden poner curriculum en lnea
Qu suelen buscar:
Informacin.
Entretenimiento.
Cmo:
Encuestas.
Qu no hacer?
Declogo de errores, Jacob Nielsen:
1. Crear pginas que tarden en descargarse.
Alardes tcnicos.
Muchas imgenes.
o
o
80
No se memorizan fcilmente.
Parecen un pegote.
Arrastrar formatos.
Botn home.
81
Conclusin:
Hacer siempre un test de usabilidad de nuestros sitios web
Estructura uniforme.
Interactividad.
Conceptos importantes
Para que una web tenga usabilidad hay que buscar la calidad, la rapidez, la agilidad, el anonimato y la
gratitud.
82
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.
Fijar resolucin.
Eleccin tipografa.
83
TEST DE AUTOEVALUACIN
. 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.
Conceptos importantes
Existen reglas, normas, tcnicas y procedimientos establecidos, aunque el diseo grfico web no est al
margen de las modas.
ELEMENTOS BSICOS
Textos.
Grficos e imgenes.
Links.
Formularios.
Frames-marcos.
Elementos multimedia.
Eventos-acciones, subprogramas.
Conceptos importantes
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.
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
15 pulgadas
16/17 pulgadas
832 x 624.
19 pulgadas
1024 x 768.
21 pulgadas
... 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.
Conceptos importantes
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?
Un motivo central:
Atrae la atencin.
No da sensacin de movimiento.
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.
88
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.
Conceptos importantes
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).
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.
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.
89
TEST DE AUTOEVALUACIN
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
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
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.
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.
Conceptos importantes
Nuestros ojos ven el color por sntesis aditiva o por sntesis sustractiva.
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.
Conceptos importantes
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.
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
Contraste.
Saturacin.
Tono.
Variacin de gamma.
94
95
96
Ajustes de Brillo-Contraste
97
Conceptos importantes
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
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
2. LCD
Conceptos importantes
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
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.
Conceptos importantes
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
100
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)
Para aadir caractersticas visuales distintivas a partes especficas de texto en los documentos.
Conceptos importantes
Las etiquetas ms importantes que indican el color en el cdigo HTML son body bgcolor y fontcolor
aunque existen muchas ms.
101
Rojo.
Naranja.
Amarillo.
Verde azulado.
Azul.
Violeta
102
AZUL: calma, autoridad, respeto, dignidad, frescor, fro, cielo, lealtad, agua.
ROJO: fuerza, dinamismo, coraje, pasin, fuego, agresin, caliente, atencin, peligro.
SEPIA: antiguo.
Consejos
Conceptos importantes
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
Utilizar Imagen > Ajustes > Tono/Saturacin para jugar con las tres caractersticas HSB.
Y si queremos oscurecerla?.
7. Uilizar la herramienta histograma para convertir una imagen normal en otra de clave baja. Ahora en
clave alta.
TEST DE AUTOEVALUACIN
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
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
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 toda la imagen.
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.
Conceptos Importantes
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.
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
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.
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.
Fila de pxeles. All donde pinchemos, selecciona esa fila de pxeles. Muy til cuando estamos
ajustando una imagen a nivel fino.
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.
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
Conceptos Importantes
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.
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
Herramienta Lupa
Debemos acostumbrarnos a trabajar cmodos, para ello es muy conveniente utilizar la lupa.
Flechas del cursor mueven de pixel en pixel (+ MAY = mueven 10 pixeles). Sin soltar click.
Des-seleccionar: Pinchar fuera para perder una mala seleccin. Seleccin>deseleccionar. Ctrl + D.
Seleccin>Reseleccionar.
Conceptos Importantes
Para aumentar la seleccin se pulsa la tecla Maysculas y se marca una nueva seleccin.
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.
Valen varias herramientas para manejarla (no olvidar que slo estamos modificando nuestra
seleccin previa).
111
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.
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).
Conceptos Importantes
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.
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.
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
Cuando se trabaja con ms de una imagen hay que tener en cuenta su tamao relativo.
Recortando: Click.
Conceptos Importantes
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.
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 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.
Activar la que tiene contenido, efectuar una seleccin y pegarla en otra capa.
Enlazar capas.
7. Combinaciones de tcnicas.
8. Utilizar la mscara rpida para refinar una seleccin.
9. Seleccin por color.
114
TEST DE AUTOEVALUACIN
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
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
Conceptos Importantes
Conceptos Importantes
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.
Escala
Rotar
Sesgar...
117
Conceptos Importantes
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
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.
Conceptos Importantes
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.
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.
Conceptos Importantes
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.
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.
120
Artstico: cuarteado.
Bosquejar: carboncillo.
Distorsionar: onda.
Interpretar: nubes.
Textura: granulado.
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.
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.
Conceptos Importantes
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.
Abrir una segunda imagen con cielo, que sustituiremos por las nubes.
Herramienta mover.
Sombra.
Abrir imagen.
Seleccionar objeto.
Visualizar objeto.
122
Filtro>Ruido>Aadir.
Colors>Colorize.
37% Hue.
48% Saturation.
TEST DE AUTOEVALUACIN
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
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>
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
124
<tr>
<th>...</th>
<td bgcolor=blue>...</td>
<td bgcolor=green>...</td>
</tr>
Forma Moderna (hojas de estilo):
<html>
<head>
<style type="text/css">
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:
Cuadro invisible.
Problema 2
Alinear fondo con primer plano (Desviacin del navegador).
Solucin 1: Javascript + Distintas versiones de la pgina (se carga la apropiada cada vez).
Problema 3
Las imgenes de primer plano pueden enmascarar.
125
Conceptos Importantes
HTML permite establer un color de fondo usando las hojas de estilo mediante background-color:.
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}.
Usar un embaldosado:
Sin unin.
Con unin.
Otras.
Conceptos Importantes
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.
Haremos una seleccin de los primeros 200 pxeles (usar reglas en pix).
126
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 .
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).
Copiar y pegar.
Acoplar imagen.
Sin soldadura.
Con el marco oval intentamos seleccionar un valo grande y dos o tres pequeos para simular la huella
de un oso.
127
Duplicamos capa.
En una capa, aplicamos el filtro, se desplazar hacia la derecha, salindose de la imagen y volviendo a
comenzar por el principio.
TEST DE AUTOEVALUACIN
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
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.
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.
Poco hincapi en los servicios ofertados a los usuarios, y excesivo en la Organizacin de la propia
Administracin Pblica.
130
Conceptos Importantes
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.
No se sigue la WAI.
Aspecto general de las pginas del web: disposicin de masas, colores y tipografas, logotipos y
ttulos.
Elementos propios: buscadores internos, contacto con webmaster, acerca de, foro de usuarios.
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).
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.
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.
Copyright
Suele colocarse con la disposicin: Nombre Organizacin 200X-200X (ao de inicio del web y ao de la ltima
actualizacin).
132
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
Conceptos Importantes
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
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
Micro: 88 x 31.
Rectngulos y Pop-ups.
ul (Unordered List)
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
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.
Utilizando estilos.
3. Disear un separador.
Una lnea que, con los efectos que deseemos, ocupe un 80% de la pantalla.
TEST DE AUTOEVALUACIN
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
Saber cmo mantener el aspecto de nuestros textos, sea cual sea la configuracin personal del usuario
y la arquitectura empleada
APARTADOS
Los textos de nuestras pginas web siempre deben estar ajustados al usuario.
No huir de la creatividad.
Conceptos importantes
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:
137
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.
Conceptos importantes
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.
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.
Serif, con bolos o pequeos trazos que delimitan los palos de las letras. Por ejemplo la Times New
Roman.
Enlaces
<platea.pntic.mec.es/~jpacheco/tipograf.htm>.
Conceptos importantes
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.
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:
Forma
Negrilla-Cursiva: negrilla-cursiva.
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.
Conceptos importantes
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.
Leading es el interlineado. Se recomienda que sea un 20% mayor que el tamao de los tipos.
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
Manuales Y Caligrficas.
Ttulos Y Decorativas.
Arial.
Arial Narrow.
Courier New.
Garamont.
Tahoma.
Trebuchet Ms.
Comic Sans.
Georgia.
Conceptos importantes
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.
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.
Conceptos importantes
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
Texto, click en sitio, Futura Lt BT, Fax-Bold, Tamao 50 ptos, Interlineado 100, Tracking 1, lnea base 0,
blanco (RGB=237).
143
Filtro, Distorsionar, Onda (gener=1, sinusoidal, long=118-120, amp=1-1, Escala 100%, repetir pixels
borde).
Parece claro que necesitaremos dos textos, uno el original y otro para el reflejo: duplicar capa.
TEST DE AUTOEVALUACIN
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.
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:
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.
Conceptos importantes
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.
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.
Conceptos importantes
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
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:
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.
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:
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
Conceptos importantes
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.
Aadir sectores.
150
Guardar optimizada.
TEST DE AUTOEVALUACIN
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.
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
1.
2.
3.
4.
5.
6.
7.
8.
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.
Conceptos importantes
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?
Pasar a IR.
Opciones paleta.
Fijar n de repeticiones.
Probar.
ltimos retoques.
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.
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.
Fcil de generar.
156
Poco peso en los resultados (los Viewlets estn almacenados en este formato).
Conceptos importantes
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.
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.
Conceptos importantes
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.
EJERCICIOS
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.
Previsualizar.
3. Imgenes animadas.
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.
158
TEST DE AUTOEVALUACIN
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.
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.
Conceptos importantes
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 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.
Conceptos importantes
Panel Propiedades. Se puede modificar las propiedades de los elementeos del rea de trabajo.
ANIMACIONES
Tipos de Fotogramas
162
Fotograma a fotograma.
Animaciones interpoladas:
De movimiento.
De tamao.
De color.
De forma (morphing).
Guardar animaciones
Una vez creada una animacin podemos:
163
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.
Para crear ms fotogramas y que la animacin se mueva ms, repita las anteriores operaciones.
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.
Conceptos importantes
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 .
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.
El contenido de dicha animacin debe ser un crculo desplazndose en linea recta por la pantalla.
TEST DE AUTOEVALUACIN
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.
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 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 Codificacin (Slo se muestra en la vista Cdigo). Contiene botones que le
permiten realizar numerosas operaciones de codificacin estndar.
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.
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.
Conceptos importantes
Panel Insertar. Permite introducir varios tipos de elementos en nuestro diseo y al insertarlo se crea
cdigo HTML.
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
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.
Por ltimo guarda el documento con extensin htm o html. Archivo > Guardar.
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.
.
.
Tablas
La finalidad de las tablas es presentar una serie de datos de forma clara y organizada, dividindolos en filas y
columnas.
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...
Conceptos importantes
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.
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).
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.
TEST DE AUTOEVALUACIN
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 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.
174
OBJETIVOS
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:
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 navegador (para ver resultados). No es necesaria la conexin a internet para construir una pgina.
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
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
Le dicen a los Buscadores qu palabras indexar para encontrar pginas, o qu texto breve mostrar.
o ambos.
176
SONIDO
Requieren plug-in especficos: Real Player, WinAmp, Windows Media Player, etc.
Crear el archivo de sonido: Tarjeta de sonido, micrfono, grabadora de sonidos de Windows. Otra
alternativa es utilizar uno ya creado.
Fondo de pginas:
Netscape: <embed>.
VDEO
Formatos:
Secuencias se crean con: Tarjetas Digitalizadoras (cmara vdeo, vdeo, ...), cmaras digitales, etc.
Inconvenientes:
177
FLASH
JAVA
Applets (integrados en pgina, se suelen utilizar para personalizar pginas, hay bibliotecas).
JAVASCRIPT
Desarrollado por NETSCAPE para completar el HTML (se incluye dentro de la pgina).
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
<......>
178
Contenido
...
</.....>
Cierre
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.
Etiquetas bsicas
<html>
<head> : Cabecera. Ttulo e informacin de control
<title>............</title>
</head>
<body> : Cuerpo, contenido principal de la pgina: Textos, imgenes, multimedia
</body>
</html>
Actividades
<html>
<head>
<title>
Mi primera pgina web
</title>
</head>
<body>
Hola Mundo!!!
</body>
</html>
179
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>
<html>
<head>
<title>
Hola Mundo!!!
</title>
</head>
<body>
<h1>Texto con H1 </h1>
<h2>Texto con H2 </h2>
<h3>Texto con H3 </h3>
<h4>Texto con H4
<strong>Negrita </strong> <BR>
<em>Cursiva </em>
<br>
<u>Subrayado </u>
<br>
</h4>
<br>
<h5>Texto con H5 </h5>
<h6>Texto con H6 </h6>
</body>
</html>
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).
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>
Elementos: <li>
181
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>
<style type="text/css">
body {color:black;background-color:yellow}
ol.a {color:red;;text-align:center}
</style>
</head>
<body>
<!-- Vamos a probar con listas -->
<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.
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>
<!-- Insercin de imgenes -->
<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
183
Copie el cdigo de debajo y sustituya #Lgarx y #Inicio por las direcciones que desee.
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>
Tambin con editores HTML profesionales como Dreamweaver, con Image Ready y fireworks.
184
Tablas
Tabla: <table>.
Fila: <tr>.
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).
La tabla admite:
Un texto.
Un grfico.
Estar vaca.
185
Ejemplo:
<table border = xx cellspacing= xx>
<caption>...</caption>
<tr>
<th>...</th>
<td>...</td>
...
</tr>
...
</table>
Actividades
<html>
<head>
<style type="text/css">
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
tiles cuando hay contenido invariable en varias pginas (tiempo de carga menor).
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>
Formularios
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:
Texto: text.
N de filas: rows.
N de columnas: cols.
188
Tamao: size.
Actividades
<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.
La serie de Anaya Multimedia Diseo y Creatividad con grandes ttulos, al lado de otros
prescindibles.
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:
Asociacin Internautas.
Adobe.es.
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.
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.
Objetivos:
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
Textos
5 ttulos realizados con las tcnicas aprendidas durante el curso. En este caso debe adjuntarse el archivo PSD
con sus capas.
Botones
Logos
Imgenes en movimiento
Mouse Over
Un fichero Html con su carpeta images, con un men con efectos mouse over.
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.
La serie de Anaya Multimedia Diseo y Creatividad con grandes ttulos, al lado de otros prescindibles.
192
Enlaces
<www.adobe.com/es>.
<www.lawebdelprogramador.com>.
<www.galeon.com/todowebmaster>.
GLOSARIO
AcDeSee
Programa de fotografa digital.
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.
Catalogadores de imgenes
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.
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 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
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.
Pginas
Presencia web que se limita a unas cuantas pginas elaboradas con HTML y que normalemnte suelen ser de
carcter personal.
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.
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