Curso de Diseno Web PDF

87_54_59_Curso 12/2/04 14:59 Pgina 14
Curso
Diseo de pginas web

Gua del curso Crear una web no es un reto imposible. Con unos
pocos conocimientos y algunas horas de prctica,
1. Introduccin al diseo web.
Planificar y organizar el sitio. Principales elementos de las pginas web. PC Today n 87 vers que no es tan complicado y podrs plasmar tu
2. Herramientas para el diseo web. imaginacin en pginas que puede ver todo el mundo.
Introduccin a las herramientas WYSIWYG. Trabajando con Sausage Hot Dog. PC Today n 88
L
3. El color y las imgenes. a idea de realizar un sitio web creando. No es lo mismo disear un si-
Psicologa del color, el color en la web. Imgenes: tipologa y caractersticas. Mapas de imgenes.
propio es un propsito que sue- tio personal pequeo para mostrar tus
le pasrsele a muchos cibernau- aficiones en unas pocas pginas que
Herramientas para el tratamiento de las imgenes y el color. The GIMP. PC Today n 89
tas por la cabeza. Sin embargo, crear el portal corporativo de una
4. Usabilidad. debido a la aparente complejidad que gran empresa que pretende vender sus
Qu es la usabilidad y por qu se debe tener en cuenta? Qu hacer y no hacer en el diseo web. conlleva hacerlo, muchas veces se queda productos a travs de la Red. Disear y
Cmo saber si una web es usable. PC Today n 90 en un simple proyecto. Con este curso mantener nuestras pginas, aunque sean
5. Accesibilidad. queremos transmitir la idea de que con- personales, es una tarea que requiere
Qu se entiende por accesibilidad? Deficiencias y polticas. El diseo inclusivo. vertirte en diseador de tu propia web cierto tiempo. Por eso es importante
Consejos para disear una web accesible. Evaluar la accesibilidad. PC Today n 91 no tiene por qu ser una epopeya. Con centrar primero los temas de los que va-
6. Tecnologas multimedia en la Red. una pequea base de conocimientos y mos a tratar y ver hasta qu punto vamos
Msica y sonido. Imagen animada y pelculas. Integracin multimedia: Macromedia Flash unas cuantas horas de prctica se puede a ser capaces de llevarlos a cabo. Cun-
y Action Script. PC Today n 92 llegar a hacer diseos muy interesantes. tas veces nos hemos encontrado en la
7. Programacin. Lo primero que debemos tener muy Red con sitios que estn a medio ter-
Razones para conocer los principios de la programacin. PC Today n 93 claro cuando creamos un sitio web es minar? Esto no da una buena imagen de
saber qu y para qu lo estamos quien ha creado la pgina, da la sensa-
54 www.pctoday.es
87_54_59_Curso 12/2/04 13:50 Pgina 15
Diseo web. Parte 1
cin de ser un tanto descuidado. Es me- cuerpo (<BODY>...</BODY >) don-

jor tener poco contenido pero completo, de se muestran todos los elementos en
que mucho y no poder abarcarlo todo. la pantalla.
De los elementos que componen la
Planificar el sitio web cabecera, el ms importante es el t-
Lo segundo que debemos saber es tulo <TITLE>...</TITLE>, que, co-
qu es el diseo. Disear va ms all mo su nombre indica, especifica el t-
de hacer una pgina bonita. Disear es tulo de la pgina web. Es muy impor-
organizar los contenidos que se van a tante que no se nos olvide ponerlo, ya
mostrar en un sitio web de tal forma Selecciona Todos los archivos y Codificacin ANSI para que cualquier progra- que este ttulo aparecer en la barra
que el visitante: primero, encuentre la ma pueda entenderlo y sea totalmente compatible con el estndar HTML. de ventana identificando los conteni-
informacin que busca; y segundo, dos de la ventana.
que el entorno donde reside esa infor- mente dicho de las pginas. Una de utilizar siempre minsculas o mays-
macin sea agradable y ayude a la las mejores formas de aprender a di- culas, pero nunca mezcladas, por la
comprensin del contenido. Para con- sear pginas web es ver cmo lo ha- misma razn anterior.
seguir que tu sitio web est estructurado cen los dems y decidir si lo que esta- Es preciso tener unos breves conoci-
debes, antes de hacer nada, saber cmo mos viendo nos gusta o no. Lo que s mientos del lenguaje HTML (Hiper
va a dividirse esa informacin para que conviene recalcar es que debemos ha- Text Mark-up Language) para empezar
le llegue al visitante de la mejor manera. cer uso de esta tcnica para apren- a disear pginas. HTML es un lenguaje
Los cibernautas, en su gran mayora, vi- der, no para copiar y pegar el de marcas, es decir, que se aaden una
sitan pginas web por la informacin trabajo de otros diseadores. serie de marcas o etiquetas que definen
que encuentran en ella, no por su dise-
o. Por eso, cuanto ms claro sea ese
aspecto, mejor cumplir su labor de ve- Si desde un principio tenemos claro
hculo de contenidos. qu es lo que queremos hacer, nos
Una herramienta muy til a la hora de
comenzar con el planteamiento son los ahorraremos mucho tiempo.
mapas del sitio, que no es otra cosa Una pgina sin ttulo resta identidad
y, simplemente, queda mal.
que un diagrama donde se muestra c- Para empezar a crear pginas web no la presentacin grfica de los elemen-
mo va a estar estructurado el conjunto necesitamos de complicados editores de tos que componen la pgina. La mayo-
de pginas y servicios. No tiene por qu cdigo HTML. Simplemente con la apli- ra de las etiquetas de HTML se presen- Elementos de una
ser exhaustivo y, si quieres, puedes ha- cacin Bloc de Notas o cualquier otro ta en parejas: una que indica el modo pgina web bsica
cerlo a mano. La idea es tener una re- editor de texto nos vale. Una vez que ha- de presentacin y otra que lo finaliza, Aunque cada vez se utilicen ms
ferencia de qu es lo que vas a decir y yamos escrito nuestro cdigo, en el cua- como puedes ver a continuacin: imgenes en las pginas web, el texto
cmo. Recomendamos tenerlo siempre dro de dilogo Guardar como, elegire- <etiqueta> texto </etiqueta>. sigue siendo el mejor comunica-
mos Todos los ar- Todo el documento HTML debe estar dor que podemos utilizar. Dentro de
chivos y codificacin contenido dentro de las marcas pocos aos veremos cmo se consoli-
ANSI. A continuacin, <HTML> y </HTML>, que son las da la llamada Web Semntica, es de-
elegiremos un nombre que indican el principio y el fin del cir, una extensin de la Web actual en
para la pgina y luego mismo. La pgina web tiene dos partes: la que el contenido se separar defini-
aadiremos la exten- una cabecera (<HEAD>...</HEAD>) tivamente del continente. Aunque

sin .htm o .html. De- que es la que define el documento y un HTML no ser el lenguaje que se utili-
bemos saber que los
nombres de pgina
web no admiten al-
gunos caracteres, Plantillas de diseo
como por ejemplo, la
Ee. Hay que limitarse Si crees que la originalidad no es lo pgina, pero es necesario trabajarlas
a las letras utilizadas tuyo o necesitas un lugar donde para que se adapten a lo que necesi-
en ingls, nmeros y poder inspirarte para crear la estruc- tamos, por lo que, si no elegimos una
guiones, tanto norma- tura de tus pginas, puedes utilizar que se acerque mucho a nuestra
una plantilla o template de otros
Un mapa del sitio no deja de ser una vista esquemtica les - como bajos _.
diseadores, que las regalan o ven-
de cmo est organizada la informacin. Nuestro consejo es
den, dependiendo de su complejidad.
que, a la hora de www.freewebtemplates.com
cerca al crear las pginas, sobre todo si guardar las pginas web que vayamos www.steves-templates.com
el sitio contiene muchas. creando, usemos siempre una de estas www.freelayouts.com
Cuando ya est claro qu es lo que dos extensiones, ya que es fcil olvidar- freesitetemplates.com
queremos trasmitir con nuestro sitio y se y luego, a la hora de enlazar las p- Lo que los diseadores envan cuan-
cmo lo vamos a hacer, pasamos a la ginas, podemos volvernos locos bus- do descargas sus plantillas es, aparte
segunda fase, que es el diseo propia- cando el error. Tambin es aconsejable de las imgenes y otros archivos vin-
culados como pueden ser las hojas
Algunas extensiones que debemos conocer de estilo, los archivos fuente para
generar los diversos elementos que
.html .htm Pginas escritas con Lenguaje de Marcas de Hipertexto. se visualizan. Por ejemplo, si contie-
Puedes escoger entre una gran
.css Archivo externo de definicin de estilos (Hoja de Estilo en Cascada). ne una animacin Flash en .swf, variedad de modelos que pue-
.js Archivo externo con comandos de javascript. tambin proporcionan el archivo .fla des modificar a tu gusto.
.asp Pgina dinmica que se ejecuta en el servidor. Es propiedad de Microsoft. para que puedas abrirlo en tu equipo
y modificarlo segn tus preferencias. idea, al final, nos llevar ms tiempo
.php Pgina dinmica que se ejecuta en el servidor, como ocurre con los Estas plantillas simplifican la tarea del que hubiramos empleado en
.asp, pero de cdigo abierto y que cualquiera puede modificar. de concebir el diseo de nuestra hacer una nueva desde cero.
.swf Archivo realizado con el programa Macromedia Flash.
N 87 55
87_54_59_Curso 12/2/04 13:50 Pgina 16
Curso
Principales etiquetas de formato de texto

Cdigo simple
Formato del prrafo Formato de texto Formato de frase
En las pginas pequeas, es <P>...</P> Sirve para delimitar la ex- <BIG>...</BIG> Incrementa el tamao <CITE>...</CITE> Se utiliza para citar
muy fcil leer el cdigo, pero, tensin de un prrafo. del tipo de letra. un texto ajeno.
cuando vamos insertando im- <BR> Salto de lnea. <B>...</B> Pone el texto en negrita. <EM>...</EM> Para dar nfasis.
genes, tablas, etc., se va com-
<CENTER>...</CENTER> Permite cen- <SMALL>...</SMALL> Disminuye el ta- <STRONG>...</STRONG> Resalta un
plicando. Por eso, hemos de
tomar unas pautas de trabajo, trar todo el texto del prrafo. mao del tipo de letra. texto cambiando el tamao y carcter.
ya que si queremos modificar <BLOCKQUOTE>...</BLOCKQUOTE> <I>...</I> Representa el texto en cur- <ABBR>...</ABBR> Se usa para mos-
algo transcurridos unos das Para citar un texto ajeno. siva o itlica. trar abreviaturas.
de la escritura de nuestro <PRE>...</PRE> Representa el texto <U>...</U> Para subrayar un texto, in- <Hx>...</Hx> Si se sustituye x por un nme-
cdigo, nos daremos cuenta
con un tipo de letra de paso fijo. dependientemente del formato. ro del 1 al 6, se obtendr distinta relevancia.
de que no es tan sencillo
como habamos pensado.
El primer consejo es utilizar sobre fondo blanco. Las fuentes ms c- es a travs del programa CGI, que ser el pgina del mismo sitio o incluso a otro
comentarios para identificar modas de leer son las de tipo sans-se- que elabore el mensaje que nos llegar. sitio web distinto. Sin ellos, el concepto
las partes en que se divide la
rif, como la Arial o la Verdana, y su ta- La estructura de un formulario bsi- se vera reducido a una publicacin de
pgina, por ejemplo: <!
mao debera definirse de forma relati- co es la siguiente: documentos de texto en Internet.
menu lateral >. De este
modo, cuando necesitemos
va (porcentajes), no absoluta (pxeles), <FORM ACTION=mailto:correo La etiqueta bsica de los enlaces es
modificar el men, tardaremos para que los usuarios con cierta disca- _o_programa METHOD=POST <a href=direccion>...</a> y, de-
menos en encontrarlo. pacidad visual o con una alta resolucin ENCTYPE=TEXT/PLAIN> pendiendo de a dnde enlacen, pode-
Tambin es recomendable de pantalla puedan aumentar (o dismi- [Campos del formulario para in- mos clasificarlos en varios tipos:
insertar una nueva lnea para nuir) el tamao de la fuente de la pgi- troducir datos.] Hipervnculo dentro de la propia
cada nueva etiqueta HTML. Si na desde su navegador. <INPUT TYPE=submit VALUE= pgina: nos podemos mover de un la-
escribiramos todo el cdigo Las imgenes pueden comunicar men- Enviar> do a otro de la misma pgina con un
seguido resultara difcil de sajes de una manera que no es posible </FORM> simple click. Suele utilizarse con ndi-
leer, por lo que es preferible hacer por medio de palabras. Otra de las Vamos a explicarlo: ces, pies de pgina o para subir al
insertar las etiquetas en dife- funciones de las imgenes es el sentido FORM abre y cierra el formulario. principio de la misma si es muy larga.
rentes lneas y, a ser posible, esttico y decorativo. Sin embargo, en ACTION indica la accin, en este Para hacerlo, es necesario especificar
de forma tabulada. muchas ocasiones nos encontramos con caso que los datos se enven a la di- unas anclas, mediante la etiqueta <a
pginas web repletas de imgenes que reccin indicada. name=principio></a>, a la que
no cumplen ninguna de estas dos fun- METHOD=POST hace que los da- nos referiremos luego a travs de <a
zar en el futuro para este proyecto, href=#principio>...</a>
sino XML y RDF, s podemos hacer que Hipervnculo a una pgina del pro-
nuestros textos estn insertos pulcra- Si no sabes programar no te asustes. pio sitio web (pgina local): esto
mente dentro del cdigo HTML.
Con ello conseguiremos que los
Resulta ms sencillo de lo que significa que el archivo de la pgina
web a la que se refiere el enlace se en-
buscadores nos agreguen correcta- parece a simple vista. cuentra en el mismo servidor que lo
mente a sus bases de datos y as, ga- contiene, de modo que, para referir-
nar posiciones cuando muestran los ciones, con lo que distraen la atencin tos se procesen con el botn de envo. nos a ella, basta con escribir la ruta
resultados de las bsquedas. de lo que se quiere comunicar y aumen- ENCTYPE=TEXT/PLAIN indica relativa. Por ejemplo, supongamos
tan el tiempo de descarga. que los datos se enven sin codificacin. que tenemos un enlace desde nuestra
Quiz lo ms difcil de las Los enlaces son la esencia de las p-
imgenes sea conseguirlas. ginas web. De una forma muy breve se Formatos de grficos
Lo ideal sera que las fabric- podran definir como aquellas lneas de .gif Archivo de imagen suele ser pe-
ramos nosotros mismos, me- programacin que, aunque no sean vi- quea y de colores muy definidos.
diante el escaneo de las foto- sibles al usuario o navegante de una p- .jpg Archivo de imagen empleado ha-
grafas que queramos inser- gina web, permiten o facilitan al mismo
bitualmente para fotografas.
tar, obtenindolas con una con un mero click sobre determinado
cmara digital o crendolas texto, imagen o icono, acceder a otra .png Archivo de imagen parecido al
mediante editores. No debe- parte de la misma pgina web, a otra .gif, pero de cdigo abierto.
mos preocuparnos si no do-
minamos alguno de estos
programas generadores de
imgenes, ya que existen en
Internet muchos lugares
donde se ofrecen gratuita-
mente imgenes para fondos
Es difcil leer un texto que no presenta algn tipo de pginas, separadores, gifs
de divisiones o destacados. animados, rtulos, barras,
etc., como www.gifmania.com.
Sin embargo, leer en la pantalla del Los formularios son la mejor mane-
ordenador es mucho ms incmodo ra de que nuestros lectores se comuni-
que leer sobre papel. Debido a esto, se quen con nosotros. Hay dos formas de
recomienda tomar como norma general realizar o recibir un formulario: genera-
el uso de textos concretos, breves y do por el navegador o mediante un pro-
separados en varios prrafos. El an- grama CGI del servidor. La primera op-
cho de los prrafos no debera exceder cin es la ms sencilla, ya que el navega-
de la mitad de la pantalla, y, preferible- dor generar automticamente un men- Se pueden apreciar las diferencias de legibilidad y calidad de los tonos conti-
mente, conviene utilizar letras negras saje de correo electrnico. La otra forma nuos entre los dos formatos de imagen ms utilizados, .gif y.jpg.
56 www.pctoday.es
87_54_59_Curso 12/2/04 15:34 Pgina 17
Diseo web. Parte 1
pgina portada.htm a otra llamada

informacion.htm que est en la car-
peta nosotros. El hipervnculo sera:
nosotros/informacion.htm.
Hipervnculo a otro sitio web (p-
gina externa): es un enlace a una p-
gina fuera de nuestro sitio. Cuando
especificamos un enlace externo, de-
bemos escribir la direccin completa
de la pgina incluido http://www.
Hipervnculo a una direccin de co-
rreo electrnico: al pulsar en l, au-
tomticamente se abre el programa de
correo que tenga instalado el usuario
para poder escribir a la direccin de
correo que especifiquemos. Para ello,
escribiremos mailto:nombre@do- No te preocupes por aprender todos los cdigos, ya que existen herramientas que permiten generar hojas de estilo de
minio.com dentro de href. forma automtica, como www.webexperto.com/herramientas/hojasdeestilo.php o www.webmastercuyo.com.ar/servicios/css.php.
Un elemento muy importante a la
hora de organizar la informacin y <TABLE BORDER=1> celda se expande 2 filas > web, mediante la asociacin de un con-
darle forma a la pgina son las ta- <TR> <TD colspan=2>Celda junto de propiedades de formato a los
blas. El empleo de las tablas facilita <! th indica que es una celda de 6</TD> elementos del lenguaje HTML. As, po-
la distribucin de la informacin con cabecera > <TD>Celda 7</TD> demos separar la estructura de la
estabilidad, en los espacios y lugares <TH>Cabecera 1</TH> </TR> pgina de los contenidos. El resultado
de la pantalla que uno desea, sin ries- <TH>Cabecera 2</TH> </TABLE> final en pantalla es una mezcla entre
go de que se deforme. Como pode- <TH>Cabecera 3</TH> Los marcos son otra forma de organi- las caractersticas predefinidas para ca-
mos imaginar, las tablas se dividen en </TR> zar la pgina. En realidad se trata de una da comando HTML y la hoja de estilo.
columnas y filas, creando celdas, a <TR> pgina que contiene otras pginas. Son Lo mejor de esta tcnica es que logra-
las que podemos dar una serie de ca- <TD>Celda 1</TD> muy tiles cuando queremos que unas mos una presentacin muy uniforme,
ya que basta con definir
un estilo una nica vez
Existen muchos programas gratuitos para que ste se aplique
que nos ayudarn a crear y editar a todos los elementos
del mismo tipo que exis-
nuestras imgenes. tan en una pgina o en el
sitio web entero.
ractersticas determinadas, como el <TD>Celda 2</TD> Existen tres formas
ancho, alto, color, tipo de letra, aline- <! rowspan=2 indica que esta Este es el resultado de las lneas de cdigo que presen- de aplicar estilos a las
acin, etc. Sin embargo, no debemos celda se expande 2 filas > tamos como ejemplo. etiquetas HTML. La pri-
abusar de las tablas e introducir unas <TD rowspan=2>Celda mera es la ms sencilla:
dentro de otras de forma recurrente, 3</TD> partes de la pgina estn siempre visi- se trata de redefinir la propia etiqueta
pues los buscadores penalizan los </TR> bles con un men de opciones situado a mediante el atributo STYLE. Por ejemplo
textos que se encuentran en textos ro- <TR> un lado, mientras que las otras cambian. la etiqueta <a href=pagina.
deados por muchas tablas, creyendo <TD>Celda 4</TD> htmlstyle=color:red>Enlace</a>
que son de poca relevancia dentro del <TD>Celda 5</TD> Elementos de una generara un enlace de color rojo, en vez
contenido global de la pgina. </TR> pgina web intermedia de azul, que es el color predeterminado.
A continuacin, puedes ver un ejem- <TR> Las hojas de estilo permiten con- Una segunda forma consiste en definir el
plo de tabla: <! colspan=2 indica que esta trolar cmo se vern nuestras pginas estilo de todas las etiquetas de la pgina.
Si la hoja de estilo no se va a aplicar a
Campos de formularios otros documentos, es ms conveniente
<INPUT TYPE=hidden NAME=xxx VALUE=yyy> Campos ocultos, donde xxx es el nombre de la informacin introducida e utilizar esta tcnica para as tener la hoja
yyy la informacin en s. de estilo y el contenido de la pgina en
un mismo lugar. Para hacerlo, incluira-
<INPUT TYPE=text NAME=xxx VALUE=yyy> Cuadros de texto de una lnea, donde xxx indica el nombre de la infor-
mos lo siguiente dentro de la cabecera:
macin introducida e yyy indica si queremos que el formulario incluya <STYLE TYPE=text/css> a { co-
alguna informacin inicial. lor: red } </STYLE>. De este modo,
<INPUT TYPE=password NAME=xxx> Cuadros de texto oculto, donde xxx es el nombre de la informacin intro- conseguiramos que todos los enlaces
ducida. Ideal para contraseas. de la pgina fueran rojos. Por ltimo, el
<TEXTAREA NAME=xxx ROWS=y COLS=z></TEXTAREA> Cuadros de texto con desplazamiento, donde xxx es el nombre de la tercer mtodo consiste en escribir los
informacin introducida, y el nmero de filas y z el nmero de columnas. estilos en un archivo externo. Podemos
hacerlo mediante el bloc de notas,
<SELECT NAME=xxx> Listas desplegables, donde xxx es el nombre de la informacin intro-
guardarlo como .css y luego vincularlo
<OPTION>yyy ducida e yyy el nombre de cada opcin de la lista. Se pueden aadir a las pginas mediante la orden <LINK
<OPTION>yyy muchos de tipo yyy, aunque es necesario establecer un lmite de REL=StyleSheet HREF=estilo.css
<OPTION>yyy acuerdo con el tamao de la pantalla y la dificultad para manejar- TYPE=text/css>.
</SELECT > los, crece con su extensin. Para que todos los navegadores reco-
<INPUT TYPE=radio NAME=xxx VALUE=yyy> Botn de opcin, donde xxx es el nombre de la informacin introducida e nozcan los comandos, recomendamos
yyy es el nombre de cada opcin en concreto. Ideal para seleccionar una seguir las indicaciones del Consorcio
W3C y sus especificaciones para las
opcin entre varias.
CSS, que puedes encontrar en
<INPUT TYPE=checkbox NAME=xxx> Casilla de verificacin, donde xxx es el nombre de la informacin introducida.

www.w3.org/Style/CSS.
N 87 57
87_54_59_Curso 12/2/04 13:50 Pgina 8
Curso
permiten agregar- hace exactamente de la misma manera. podemos crear pelculas o utilidades de
los directamente a En definitiva, la mejor manera de mos- forma muy rpida. Adems, cuando ha-
las pginas, como trar una msica de fondo es mediante yamos creado nuestra pelcula Flash,
son los sonidos un pequeo script que averige en qu insertarla en la pgina es muy sencillo;
midi, mientras que navegador est instalado y discrimine. basta con copiar y pegar el cdigo
otros requieren de Otro elemento que podemos incluir HTML que genera automticamente.
plug-ins o progra- en nuestras pginas
mas asociados pa- es el vdeo, que no
ra reproducirse. es sino una mezcla
Podemos introdu- de sonido e imagen
cir el sonido de va- en un slo archivo
rias formas: bien digital. La fidelidad
activado por el de la imagen de v-
usuario, bien co- deo se mide por los
mo sonido de fon- mismos parmetros
El formulario ms utilizado de toda la Web consta de un do. La manera ms de audio e imagen
campo de entrada y un botn de envo. sencilla es dejar al que la componen,
usuario la decisin as como por una
Otro de los elementos que podemos de escucharlos o no. Para hacerlo, variable adicional
incluir dentro de nuestras pginas son incluiremos el sonido en el parme- que corresponde al
los scripts, pequeos programas escri- tro HREF de un enlace, como si fuera nmero de cuadros
tos en lenguaje Javascript. Estos pro- una pgina HTML, aunque obligare- que se exponen por
gramas se encargan de realizar acciones mos a que se abra una ventana inde- segundo. Lo usual En Internet podemos encontrar multitud de scripts ya he-
dentro del navegador de la pgina web, pendiente con los controles de soni- en una pelcula de chos y listos para utilizarlos en nuestras pginas, como los
es decir, se trata de un lenguaje de pro- do. La segunda forma consiste en in- vdeo estndar es 24 que se hallan en www.mundojavascript.com.
gramacin del lado del cliente. cluirlo como sonido de fondo. El pro- cuadros por segun-
Entre las acciones ms habituales que blema es que se necesitan diversas do, aunque este nmero es muy variable Una vez ms, observaremos que hay eti-
facilita Javascript tenemos dos vertientes: etiquetas para hacerlo operativo en en los formatos digitales. quetas <OBJECT> y <EMBED> para
efectos e interactividad. Por un lado, los distintos navegadores.
podemos incluir efectos especiales en Uno de los mayores retos para los
nuestras pginas, como elementos en Los enlaces son los que marcan la buscadores de Internet es encontrar la
movimiento o que cambian de color. Por diferencia entre la Red y los informacin que realmente estn bus-
el otro, este lenguaje nos permite ejecu- cando los internautas. Para ello, se han
tar instrucciones como respuesta a las documentos de papel. introducido las etiquetas META o
acciones del usuario, lo que permite metatags, unas informaciones que no
crear pginas interactivas con progra- diversos navegadores. Por ejemplo, Al igual que con el sonido, es necesa- se visualizan pero que estn integradas
mas como agendas o calculadoras. en Internet Explorer, se pueden rio utilizar distintas etiquetas segn el en la pgina web y la definen. Las eti-
En el fondo, Javascript es un lengua- incluir fondos sonoros utilizando la navegador: <OBJECT> para Internet quetas META se introducen dentro de
je de programacin muy sencillo, etiqueta <BGSOUND SRC=musi- Explorer y <EMBED> para Netsca- la cabecera de la pgina y no llevan eti-
pensado para hacer las cosas rpida- ca.mid> , mientras que el progra- pe. Existen servidores de vdeo bajo queta de cierre. Su estructura es la de
mente. Incluso sin tener experiencia en ma Netscape Navigator utiliza la demanda, que utilizan un sistema que una declaracin: nombre de la propie-
programacin, podemos aprenderlo etiqueta <EMBED hidden=true permite la reproduccin de vdeo di- dad y, a continuacin, su valor.
con facilidad y utilizarlo en toda su po- src=musica.wav>. rectamente como si fuera la televisin. No existe ninguna regla acerca de la
tencia con slo un poco de prctica. Dado que ambas etiquetas son in- informacin
Si lo que queremos es incluir so- compatibles entre s, tendremos que que se puede
nido, primero tenemos que elegir el incluir las dos. Aunque el Explorer es o no incluir
formato de estos archivos. Algunos te capaz de interpretar <EMBED>, no lo en las etique-
tas META. El
lenguaje
HTML define
Algunos tipos de archivo de sonido la estructura
de una eti-
.mid Archivo de sonido muy bsico. incluyen sonidos los colocan queta META,
.ra Real Audio es un formato en formato AIFF para las per- pero no sus
ampliamente distribuido y sonas que tengan Macintosh y valores. Por
usado, capaz de reproducir WAV para los usuarios de PC. eso, puedes
sonido con fidelidad gradua- .wav Los archivos WAV son en inventarte tus
da, es decir, uno puede decidir general muy grandes, aunque propias eti-
No debe asustarnos la gran cantidad de recursos que nos per-
la calidad del sonido para as este formato permite variar la
mite Flash, ya que es un programa muy intuitivo. quetas META,
encontrar un equilibrio entre calidad del sonido para lograr
aunque, co-
un archivo muy grande con archivos ms pequeos. Al
alta fidelidad a uno muy ser el formato nativo de
La tecnologa Flash de Macrome- mo no se visualizan en el navegador y
pequeo de baja fidelidad. Windows, est ampliamente dia nos permite crear pginas mucho slo las utilizan los buscadores y al-
.au Es el formato nativo de las estandarizado. ms interactivas y entretenidas. Para la gunas otras herramientas, tampoco
estaciones de trabajo Sun y .mp3 Popular formato que ofrece visualizacin de esta tecnologa se re- tiene mucho sentido crear tu propia
similares. Es poco conocido una calidad muy alta en archi- quiere del plug-in propio de Macrome- metainformacin, excepto para nues-
fuera del ambiente UNIX. vos pequeos. Es fcil obtener dia Flash, que se incluye en la mayora tro propio uso.
.aiff Formato de sonido tpico de conversores de .cda (archivos en los navegadores. Usar Flash no es di- Las dos etiquetas META ms impor-
Macintosh y estaciones de de un CD de msica) a este fcil, pero requiere de nuestra creativi- tantes son las que indican la descrip-
trabajo Silicon Graphics. En formato, o bien extractores dad. Con un buen tutorial de la ltima cin (description) y las palabras
general, las pginas web que desde un CD audio. versin y unas horas de prctica delan- clave (keyword) del documento, ya
te del ordenador, comprobaremos que que los buscadores leen estas etiquetas
58 www.pctoday.es
87_54_59_Curso 12/2/04 15:36 Pgina 9
Diseo web. Parte 1
que se transfieren con las pgi-

Principales tipos de archivo de vdeo nas web y que el navegador eje-
cuta en el espacio de la pgina.
.mpg Empresas de tecnologa de .qt .mov El formato QuickTime No hay que confundir Java
todo el mundo forman el Grupo fue creado originalmente con Javascript, pues son len-
de Expertos en Imgenes en por Apple para su uso en guajes muy diferentes. Los ap-
Movimiento, dedicado a crear los ordenadores plets son ms difciles de pro-
este estndar para compact Macintosh. Junta audio, gramar que los scripts y requie-
discs, televisin por cable, animacin, vdeo y capa- ren unos conocimientos bsicos
transmisin satelital directa y cidades interactivas. o medios del lenguaje Java. Su
televisin de alta definicin. El Este estndar lleva principal ventaja consiste en que
formato MPEG es muy popular mucho ms tiempo dependen en menor medida del
en PC compatibles. vigente que el MPEG. navegador e incluso son inde-
Podemos hacer la bsqueda tan completa pendientes del sistema operativo
como deseemos dentro de las bases de datos del ordenador donde se ejecu-
disponibles en la Red. tan. Sin embargo, los applets
son ms lentos de procesar y
de datos si hay habitaciones disponibles tienen un espacio muy delimitado en la
para esa fecha. Con la respuesta que ob- pgina donde se ejecutan, es decir, no se
tenga de esa bsqueda, crear una pgi- mezclan con todos los componentes de
na HTML que informe de que hay una la pgina. En la Red puedes encontrar
habitacin disponible para
esas fechas y que el importe
es de 100 por noche. Con
ese resultado, el visitante que
desee reservar una habitacin
Los dos formatos de vdeo ms conocidos, MPEG y qt, frente a frente. introducir sus datos perso-
nales en un formulario que se
enviar a una pgina dinmi-
y califican la pgina en funcin de lo Imaginemos que tenemos un hotel y ca que, por un lado, notifica-
que dicen. Hay que seleccionar con queremos que desde nuestra pgina r a la base de datos anterior
cuidado las palabras que vamos a utili- web se puedan reservar habitaciones. que esa habitacin queda
zar dentro de estas dos etiquetas, ya Necesitaremos que el visitante sepa qu ocupada, por otro lado man-
que van a determinar la posicin en la habitaciones tenemos, qu precios tie- dar a otra base de datos la
que aparecer nuestra pgina en las nen y cundo van a estar libres. En una informacin que nos ha pro- Una de las desventajas de los applets es que,
bsquedas de los cibernautas. base de datos albergada en el servi- porcionado y por ltimo noti- hasta que no se cargan por completo, en pantalla
<meta name=description con- dor podemos especificar estos datos. ficar, tanto al visitante como slo aparece un cuadro gris.
tent=Esta pgina es una prueba del En primer lugar el visitante nos dir, a nosotros mismos, que se ha
curso de diseo web de PCToday/> mediante un formulario: quiero reser- realizado la reserva. multitud de applets gratuitos que pode-
<meta name=keywords con- var una habitacin del 1 al 5 de marzo. Otra forma de programacin dentro mos incluir en nuestra pgina HTML, co-
tent=curso, diseo, PCToday, Entonces esa peticin se trasladar a la de la web son los applets. Se trata de mo los que puedes encontrar en
prueba /> pgina dinmica que buscar en la base pequeos programas hechos en Java, www.appletcollection.com.
Puedes encontrar generadores auto-
mticos de etiquetas META gratuitos en Otras etiquetas Meta
la Red, como por ejemplo www.mucho
<meta name=generator content=Sausage Hot Dog /> Informa acerca del editor que se ha utilizado para crear la pgina web.
grafico.com/contenidos/metatags.html.
<meta HTTP-EQUIV=content-type CONTENT= Indicamos el tipo de documento que es nuestra pgina: documento HTML,
Elementos de una text/html; charset=ISO-8859-1/> un documento de texto plano, etc. Aqu significara que es un documento
pgina web avanzada texto-HTML y que usa un juego de carcteres ISO-8859-1,es decir, que no
Hasta ahora hemos estado viendo p- usa caracteres cirlicos o rabes, por ejemplo.
ginas que almacenbamos en el servi- <meta http-equiv=refresh content=5 /> Con esta etiqueta podemos indicar al navegador que debe recargar la
dor y que ste nos enviaba cuando no- pgina una vez transcurrido el tiempo de segundos especificado.
sotros se las pedamos mediante la in-
<meta http-equiv=refresh content=5;url= En el segundo caso, adems, llevara a la pgina especificada.
troduccin de una direccin en la ba-
rra del navegador. Pero supongamos http://www.misitio.com/otra_pagina.htm />
que queremos que esa pgina muestre <meta http-equiv=expires content= Con esta etiqueta META informamos de la vigencia del documento,
unos elementos u otros en funcin de Tue, 04 Dec 2000 21:29:02 GMT> de modo que obligue al navegador a cargar las nuevas versiones de la
lo que le pide el visitante. Para po- pgina que hay en el servidor y en lugar de la almacenada.
der hacerlo, necesitaremos que la p- <meta http-equiv=pragma content=no-cache /> Ordena al navegador que no almacene la pgina en la cach del
gina escuche la peticin del visitante, navegador, lo que puede resultar muy til cuando se trata de pginas
interacte con el resto de elementos
dinmicas cuyo contenido cambia frecuentemente.
que hay en el servidor si lo necesita y
cree la pgina HTML que enviar al vi- <meta http-equiv=Set-Cookie CONTENT=nombre_ Mediante esta etiqueta podemos enviar un archivo de informacin o cookie
sitante que se la ha pedido. A esto le cookie=valor_cookie; expires=fecha_valor; path=/ /> al navegador del usuario. Si contiene fecha de expiracin, el navegador la
llamamos pgina dinmica. Ya no ten- conservar en el disco duro hasta dicha fecha y si no la borrar al terminar.
dr la extensin .htm, sino .asp o <meta name=robots content=noindex, follow> Podemos dar instrucciones a los robots de los buscadores acerca de qu
.php, dependiendo del lenguaje de pginas pueden incluir en sus bases de datos y cules deben saltarse.
programacin que utilicemos. Sus valores son: index, que indica que la pgina se debe indexar; noindex
Una de las principales utilidades de
es justo lo contrario; follow pide que siga los hipervnculos que existan en
las pginas dinmicas es interactuar con
las bases de datos. Veamos un ejemplo. la pgina y que indexe las pginas resultantes; nofollow indica lo contrario.
N 87 59
88_54_58_Curso 27/2/04 09:25 Pgina 14
Curso
Trabajar con Sausage Hot Dog

En cualquier ordenador es posible crear una pgina web, hasta el editor de texto ms sencillo puede ser la
solucin. Elegir la herramienta ms cara no tiene por qu significar disear mejor, todo es cuestin de
saber utilizar las aplicaciones de las que disponemos y aprovecharlas para dejar volar la creatividad.
C
Gua del curso omo vimos en la entrega ante- mente publicables en la Red mediante el
rior, toda pgina web se uso de aplicaciones indicadas para todo
1. Introduccin al diseo web. compone de cdigo y una tipo de usuarios. Estos programas mo-
Planificar y organizar el sitio. Principales elementos de las pginas web. PC Today n 87 serie de elementos (textos, dernos y otros especialmente diseados
2. Herramientas para el diseo web. imgenes, sonidos, etc.) insertados o para el desarrollo web son las conocidas
enlazados dentro. Al principio todas las herramientas WYSIWYG (What you see
pginas web se construan introducien- is what you get: Lo que ves es lo que ob-
3. El color y las imgenes.
do los comandos en un editor de textos, tienes). Estas aplicaciones permiten una
como puede ser el Bloc de notas. Sin total interactividad grfica con el usuario
Herramientas para el tratamiento de las imgenes y el color. The GIMP. PC Today n 89 embargo, el rpido crecimiento de la a travs de una pantalla de diseo, don-
4. Usabilidad. Red y la necesidad de que los usuarios de podemos construir una pgina web,
Qu es la usabilidad y por qu se debe tener en cuenta? Qu hacer y no hacer en el diseo web. no tcnicos tambin pudieran crear sus siguiendo las instrucciones del progra-
Cmo saber si una web es usable. PC Today n 90 propias pginas, llev a la aparicin de ma y prescindiendo del cdigo, que es
5. Accesibilidad. programas que les ayuda en esa ardua generado por el propio software.
Qu se entiende por accesibilidad? Deficiencias y polticas. El diseo inclusivo. tarea facilitndoles su diseo.
Consejos para disear una web accesible. Evaluar la accesibilidad. PC Today n 91
6. Tecnologas multimedia en la Red. Introduccin
Msica y sonido. Imagen animada y pelculas. Integracin multimedia: Macromedia Flash a las herramientas
y Action Script. PC Today n 92 La forma ms fcil de crear una pgina
7. Programacin. web consiste en utilizar paquetes de pro- Estas dos pestaas nos permiten al-
gramas como Microsoft Office, que ternar entre las distintas vistas que
Razones para conocer los principios de la programacin. PC Today n 93
permiten generar pginas web directa- ofrece el programa.
54 www.pctoday.es
88_54_58_Curso 27/2/04 09:25 Pgina 15
Diseo web. Parte 2
Tambin tenemos los editores mienta avanzada de desarrollo de sitios plegar un mensaje explicativo de su
HTML, unos programas que se encuen- web. Una de sus principales caracters- funcin. La siguiente barra incluye
tran a caballo entre los WYSIWYG y los ticas es la claridad del cdigo que una recopilacin de los distintos re-
editores de texto normales. No per- genera, resaltado en distintos colores y cursos que ofrece el programa: for-
miten la creacin de la pgina en modo bien tabulado, lo que permite una fcil mato, formularios, tablas, colores,
navegacin, etc. Si hacemos click en
cada una, veremos que justo debajo
se despliega una serie de opciones
relativas al botn, con las que pode-
mos acceder directamente a las
En la parte superior de la pantalla se muestra la barra de mens desde la que
se accede a las principales funciones.
funciones para dibujar y dar
formato a los distintos elementos
grfico, pero a cambio incluyen multi- comprensin y manipulacin. Sin em- de la pgina.
tud de ayudas para facilitar la lectura y bargo, sus virtudes no se quedan ah. Para pasar de una vista a otra
escritura del cdigo. Para utilizarlos, es Otra de las funciones que ofrece es la pulsaremos en las pestaas que apa-
necesario tener algunos conocimientos capacidad de crear y vincular otros recen en la parte inferior derecha. La
de HTML, ya que, al fin y al cabo, vamos lenguajes distintos a HTML, como vista de edicin es la que utilizaremos
a trabajar en la vista de cdigo. Lo puede ser Javascript, las Hojas de habitualmente para crear las pginas.
mejor de estos programas es que se estilo en cascada (CSS) o incluso len- Esta vista muestra los cdigos que el Vers que, aparte de tus archivos,
pueden ver los resultados de lo que va- guajes de programacin de servidor. programa genera al construir la pgi- dentro del sitio aparecen otros. Son
archivos del sistema, no los borres.
mos haciendo en una pantalla del edi- Algunas de las utilidades que pode- na. La vista preliminar visualiza el as-
tor o bien pedirle que nos abra la pgi- mos encontrar en este editor son, pecto aproximado que tendr la rior colocamos el cursor sobre la ba-
na que estamos creando en un navega- rra y, sin soltarlo, lo moveremos a la
dor de Internet. Ten en cuenta que, posicin deseada. Tambin podemos
aunque se denominen editores de Se puede utilizar el bloc de notas para personalizar las barras aadiendo
o quitando botones.
pginas muy sencillas, pero pronto Lo primero que tenemos que hacer
necesitaremos herramientas que nos cuando vamos a crear un sitio web es
crear una carpeta donde alojar
hagan ms ameno el trabajo. las pginas, imgenes, sonidos, etc.
Para ello utiliza el comando
por ejemplo, barras de herra- pgina en los navegadores de Internet. File>Open Website, que abre el pa-
mientas que dan acceso rpido a las Todas las barras de herramientas se nel flotante de administracin de si-
funciones ms importantes (creacin pueden modificar y mover de un la- tios. Con el asistente automtico po-
de tablas, insercin de imgenes, do a otro de la pantalla. Para ello, co- demos configurar de una forma muy
etc.); paneles de recursos; crea- locamos el cursor sobre el extremo intuitiva el nombre del sitio en nues-
cin en modo de asistente o de de la barra y, mantenindolo pulsado, tro ordenador, as como en el servi-
asistente automtico; y botones de lo movemos a la posicin deseada. dor. Otra de las virtudes de este pro-
ayuda para cada opcin, aunque, Podemos colocar las barras de forma grama es que lleva integrado un ad-
lamentablemente, estn en ingls, co- flotante en medio de la pgina. Para ministrador FTP, lo que permite su-
mo el resto del programa. Sin embar- situarlas de nuevo en la parte supe- bir y bajar archivos del servidor.

go, si te decides a comprarlo, puedes
acoplar el mdulo de espaol.
Este programa admite archivos CSS,
Las barras de herramientas que Dos WYSIWYG frente a frente
Javascript, PHP, etc. Desde luego,
el programa muestra en pantalla
es un editor muy completo. pueden variar dependiendo de las
que estn activadas. Para que apa- FrontPage 2003 funciones, pero no tantas como
HTML, se pueden utilizar otros len- rezca o no una barra en la pantalla, Se trata de un buen programa que para abrumar a los usuarios inex-
guajes, como Javascript, PHP, etc. la marcamos partiendo de ha subsanado muchas de las crti- pertos. Slo se vende como parte
En cualquier caso, escojamos el soft- View>Toolbars. La barra de archi- cas que se le hacan en versiones del paquete Office, lo que nos obli-
ware que escojamos, es necesario te- vo muestra las funciones comunes anteriores. Por ejemplo, que no res- ga a realizar un mayor desembolso.
petaba el cdigo que se introduca a
ner unos conceptos de programacin con el resto de programas, como
mano en la pantalla de cdigo. Es Dreamweaver
de la web. No te preocupes si nunca pueden ser abrir, guardar, impri- una herramienta completa y fcil de Macromedia nos ofrece el progra-
has tenido contacto con HTML. Ten en mir... Un truco: al colocar el ratn utilizar, con la que podemos crear, ma ms completo dentro de esta
cuenta que, aunque puedas ir visuali- encima de cada botn, se nos des- organizar, administrar y publicar familia, quizs con demasiadas
zando los resultados de pginas web muy completas. Es opciones, pero que, en cualquier
lo que vayas haciendo en caso, cubre todas las
una pantalla del propio necesidades que puedas
editor o en el navegador, tener para la creacin de
trabajars normalmente pginas web y otros ele-
en la pgina de cdigo mentos. Su potencia resi-
puro. Las utilidades del de en cmo se comple-
programa te ayudarn, menta con otros progra-
pero no sustituirn el mas de la misma empre-
conveniente conoci- sa, como Flash o
miento de HTML. Los WYSIWYG ms vendidos rivalizan Fireworks para crear ani-
en sencillez de uso versin tras versin. maciones e imgenes.
Sausage Puedes descargarte una
Hot Dog ideal para diseadores principian-
tes, ya que contiene las principales
versin de demostracin gratuita
en www.macromedia.com.
Hot Dog es un editor Aunque de un aspecto un poco hosco, es tremen-
de HTML y una herra- damente intuitivo trabajar con Sausage Hot Dog.
N 88 55
88_54_58_Curso 27/2/04 09:25 Pgina 16
Curso
Para ponerle el ttulo a la pgina, abre bemos seleccionarlo con el ratn y ha-
el panel y en el recuadro Ttulo escri- cer click en el botn de negrita, sino
be el nombre deseado para la pgina. que primero hacemos click en este bo-
A continuacin, podremos verlo al na- tn, lo que generar dos etiquetas
El perrito verde es un huevo de Pascua dentro de este software. Si haces click vegar por Internet justo en la parte su- (<b> y </b>), y luego escribiremos
en l, se introducir la direccin de Sausage en la pgina. perior izquierda de la pantalla. el texto entre ambas. Si ests ms acos-
Es interesante poner un ttulo descrip- tumbrado a la primera forma, tambin
Tras crear el sitio, vamos a empezar lada dentro de la pgina. Estos datos tivo puesto que es la gua
con las pginas. Si haces click en el pe- puedes cambiarlos ms adelante en que muchos internautas si-
queo tringulo situado junto a la hoja Format>Document Properties. guen para reconocer una
en blanco, se desplegar un men con Tambin podemos cambiar el fondo web. No hay que confundir
los distintos tipos de documentos que de la pgina, bien eligiendo una ima- el nombre de la pgina con
reconoce Hot Dog, aunque se le po- gen o un color en el recuadro que el nombre del fichero .htm
dran aadir otros lenguajes, como nos lo indica. Existen mltiples direc- de la pgina. La opcin Sa-
XML o TCL-TK. ciones en Internet como ve as (Guardar como) per-
mite ponerle el nombre de-
seado y seleccionar el tipo
Puedes probar Hot Dog gratis durante de archivo. Es importante
ser ordenado y crear una
treinta das, tiempo suficiente para carpeta para cada web y
aprender el funcionamiento de los subcarpetas para los distin-
tos apartados.
editores HTML en general. Aunque usar HotDog es sencillo, el asistente auto-
Dar cuerpo mtico te lo pone an ms fcil.
Si elegimos HTML, nos encontrare- www.areas.net/colorvivo/home.htm, que a la pgina puedes utilizarla, pero no desde el pa-
mos con el panel de propiedades disponen de fondos e imgenes gratis Al escribir un texto, ste se distribuye nel de acceso rpido, sino desde el
del documento, que nos ayudar a para insertar en las pginas web. de forma continua y forma un prrafo men superior Format>Bold o pul-
configurar los datos bsicos del mis- La opcin Format>Document In- hasta que pulsamos Enter. Si ests sando Control+b. Del mismo modo
mo, como los colores del fondo, formation nos permite establecer el habituado a trabajar con herramientas que hemos modificado un texto convir-
texto, enlaces, etc., sin olvidar que ttulo de la pgina y las etiquetas me- como Word, te dars cuenta de que tindolo en negrita, lo podemos trans-
todos estos datos pueden definirse en ta, as como otros datos que suele con- Hot Dog no funciona as. Para aplicar formar de tamao, color, alineacin,
una hoja de estilos .css aparte y vincu- tener la cabecera de las pginas web. formato a un texto determinado, no de- apariencia, bordes y fondos. Ahora es
cuando te vendrn bien los conoci-
mientos de HTML, para ajustar ma-
Cmo elegir la herramienta ms adecuada nualmente todos aquellos pequeos
En el mercado existen muchos edito- dars cuenta de que te resulta mucho Un buen sitio en el que encontrar un
res de HTML y WYSIWYG, unos ms ms rpido y prctico escribir directa- listado de editores y herramientas es,
complejos que otros, todos ellos mente los comandos, es decir, sin de nuevo, el Consorcio W3C, en la
herramientas fantsticas para la crea- ayudas visuales. Lo ms til que pue- siguiente direccin:
cin de pginas web. Las nuevas verdes encontrar en cualquiera de las www.w3.org/WAI/group/AU/tools#HTM,
siones suelen incluir muchos recursos herramientas es el resaltado en colo- aunque en sitios comerciales como
y ayudas, de tal forma que la eleccin res del cdigo y la posibilidad de ir www.tucows.com o www.softonic.com
de una u otra no depender slo de lo viendo los resultados a medida que se (en espaol), tambin puedes des-
completas que sean, sino cargarte versiones gratuitas,
tambin de su precio. shareware o demostraciones
Para este tutorial vamos comerciales de evaluacin.
a utilizar la aplicacin Conviene resaltar que no por
Hot Dog de la compaa disponer de unas herramientas
Sausage. (www.sausage u otras vamos a crear pginas
.com/products.html). mejores. Todo depende de
Puedes utilizarla durante cmo se utilice cada una, aun-
30 das de forma gratuita que, evidentemente, las que
y, si te gusta, puedes facilitan el trabajo gozarn de Hot Dog pone a nuestra disposicin
adquirirla por un precio ms simpatas que las ms todos los componentes de un formu-
razonable. En cualquier simples. Lo importante es lario al alcance de un click.
caso, si no tienes previs- El Consorcio World Wide Web es el lugar de referencia poder disponer de las herra-
to adquirir una herra- para todos los diseadores web. mientas ms adecuadas para detalles que Hot Dog no permite cam-
mienta de estas caractersticas, pue- va creando la pgina. nuestras necesidades. Antes de deci- biar de forma automtica.
des decantarte por una gratuita, como Escojas el programa que escojas, dirte por alguna ten en cuenta el Sausage pone a nuestra disposicin
Acehtml (freeware.acehtml.com) o conviene tener unos conocimientos aspecto econmico. otro panel para insertar elementos.
Arachnophilia (www.arachnoid.com/ mnimos de HTML para realizar Tu situacin personal y tus necesida- Con l puedes ahorrarte mucho tiempo
arachnophilia). pequeas correcciones o incluso des deciden por ti en muchos casos. si necesitas incluir una imagen, un
Si el presupuesto lo permite, es reco- corregir algn error que haya podido No es lo mismo un principiante que enlace, un comentario, una lnea
mendable que adquieras alguna generar la herramienta. Puedes un profesional del diseo. Si nica- horizontal, listas de vietas o inclu-
herramienta WYSIWYG, que te permiti- encontrar multitud de tutoriales en la mente vas a disear una web perso-
so elementos multimedia incrusta-
r crear pginas de forma rpida y Red, aunque te recomendamos acu- nal, de pequeo tamao, y sin gran-
dos. El funcionamiento es similar al del
sencilla gracias a sus recursos, utili- dir al World Wide Web Consortium des complicaciones, es muy posible
dades, ayudas y funciones de uso. Sin (W3C) para conocer la ltima versin que no necesites muchos programas
formato de texto.
embargo, segn vayas profundizando oficial del lenguaje. Puedes encon- ni que stos sean los mejores o ms Un ejemplo de la sencillez del pro-
en el conocimiento del cdigo, te trarla en www.w3c.org/MarkUp. caros del mercado. grama se puede ver a la hora de inser-
tar los enlaces o las tablas. En el caso
56 www.pctoday.es
88_54_58_Curso 27/2/04 09:25 Pgina 17
Diseo web. Parte 2
de los enlaces, en una sola ventana te-

nemos acceso a todas las variables que
se pueden dar: la direccin, una des-
Los 7 pasos para la gestacin de una pgina web
cripcin, la ventana o marco a la que
se destina, el idioma, la tecla de acceso 1. Analiza la informacin que tendr un mximo de 3 pulsaciones del mientas WYSIWYG o los editores
rpido, el ndice de tabulacin, etc. y procura tener muy claro los con- ratn. El sitio en el que lo coloques, HTML que quieras utilizar. Es la
Por ltimo, vamos a ver los formula- tenidos que quieres mostrar a tus depender de la siguiente fase. etapa ms laboriosa, aunque tam-
rios, los elementos ms problemticos visitantes. Piensa en si merece la 4. Marca las pautas del diseo grfi- bin la ms agradecida.
del diseo web. Aunque ests familiari- pena el esfuerzo que supone crear co. Se trata de la parte creativa tra- 6. Difunde o publica el sitio en
zado con el lenguaje HTML, es recomen- una pgina web y si aporta o te dicional, donde decides los colores, Internet. Y ahora que tengo creada
dable utilizar el asistente automtico, aporta algo. mi pgina, cmo hago para que
ya que nos presenta todas las opciones Hay dema- los dems la puedan ver? Para
que pueden darse para cada campo del siadas pgi- ello necesitaremos alojarla en
formulario, as como la posibilidad de nas en algn servidor que nos ofrezca
cambiar el orden de aparicin. Internet espacio. Hay multitud de servido-
Tras construir una parte de la pgi- como para res que lo hacen gratis, como el
prestar aten- pionero www.geocities.com o
na, vamos a ver cmo queda, tanto
cin a una www.iespana.es, ste ltimo en
que no dice espaol. Para llevarlo a cabo,
nada nuevo. basta con abrir una cuenta gratui-
2. Busca y ta para acceder al panel de con-
estructura trol, donde podrs administrar
dichos con- toda la informacin relativa a tu
tenidos. Haz sitio dentro del servidor: estadsti-
un diagrama cas, archivos, contadores, libros
o mapa del de visitas, etc.
sitio y con- iespana permite utilizar algunos comandos de PHP y 7. Mantn la informacin viva, super-
srvalo cerca ofrece bases de datos. Adems puedes subir los ficheros vsala, corrgela y actualzala. No
mientras a travs de un administrador FTP. Y todo ello, gratis. hay nada ms descorazonador que
creas las una pgina abandonada, con infor-
pginas. Te ayudar a no perderte. los tipos de fuente, la distribucin macin caducada. Prstale aten-
Al hacer click en cada lnea, te llevar 3. Traza el rbol de navegacin. Es de los distintos elementos, etc. cin y haz caso a los correos que
a la etiqueta exacta. Con un doble
click se abrir un cuadro de dilogo.
importante tener un men siempre Recuerda utilizar hojas de estilo y te lleguen a travs de ella. Al fin y
visible con las grandes reas, de echarle un poco de imaginacin. al cabo, las pginas web no son
en la vista de cdigo como en la vista tal forma que, entre las dos pgi- 5. Confecciona la interfaz. En esta ms que instrumentos para poner a
preliminar y, finalmente, en la vista nas ms distantes del sitio, haya fase es donde utilizars las herra- las personas en contacto.
del navegador. En primer lugar, guar-
damos la pgina en el ordenador y
pulsamos F9, lo que abrir una venta- aparecer una ventana con el sitio web Una vez all, hacemos click en H?, gar, seleccionamos "Esta frase est
na del navegador predeterminado. Es que has creado; all alojaremos la pgi- lo que nos mostrar una ventana flo- en negrita" y hacemos click en el ico-
momento de comparar los resultados na. Es necesario recordar que hay que tante con diversos nmeros, siendo el no marcado con una B (del ingls
arrojados por el navegador con lo darle la extensin .htm o .html, que 1 el de mayor tamao y el 6 el de me- "bold", negrita). As mismo, seleccio-
que ofrece la vista preliminar de Hot es el formato que reconocen los navega- nor. Elegimos, en este caso, H1. Para namos "esta otra en itlica" y hace-
Dog y realizar los ajustes precisos en mos click en el icono marcado con
el cdigo, de ser necesarios. una I (de "itlica"). Por ltimo, vamos
Otras utilidades que puedes encon- Lo que observes en la Vista previa no a crear una lista de guiones. Seleccio-
trar dentro de Sausage Hot Dog es namos "Uno, dos y tres" con el ratn
un inspector de cdigo accesible, tiene por qu coincidir con lo que luego y elegimos el men Insert.
que evala cada etiqueta y nos dice si se mostrar en el navegador. Elegimos el sexto icono (empezando
nos sobra o falta alguna propiedad pa- por la izquierda), identificado por lneas
ra personas con alguna discapacidad. dores. Es recomendable seguir una pau- centrar el texto debemos hacer click y puntos alineados de forma horizontal.
ta y guardar todos nuestros archivos ba- en el icono que hay justo al lado Aparecer una ventana donde podremos
Un ejemplo prctico jo una misma extensin para no hacer- de H?, el de las rayas horizontales. elegir si queremos que la lista conten-
Ahora que hemos visto las principa- nos luego un lo a la hora de enlazarlos. Vamos ahora a resaltar la frase ga nmeros o imgenes, as como el
les funciones de Sausage Hot Dog, Ahora que est guardada, vamos a in- en negrita e itlica. En primer lu- tipo de imgenes que deseamos incluir.
vamos a utilizarlo para crear una sen- troducir varios prrafos de texto y a re- En este caso, elegiremos "circle",
cilla pgina web. En primer lugar, va- saltar determinadas palabras. Dentro o crculos.
mos a crear una web. Hacemos click de las etiquetas <body> </body> in- Veamos ahora cmo podemos
en File>Open Website, para ver el troduciremos el siguiente texto: introducir una imagen para
administrador de sitios. Con el asisten- dar un poco de vida a nuestra p-
te automtico, creamos un sitio llama- Bienvenidos. gina. En el men Insert, hace-
do "Pruebas" y lo guardamos dentro de Esta es mi primera pgina web. mos click en el primer botn y
"Mis documentos" en el ordenador. Esta frase est en negrita; y esta elegimos una imagen que tenga-
Hacemos click en la hoja en blanco otra en itlica. mos almacenada en nuestro disco
que se encuentra en la parte superior iz- Uno, duro. En este cuadro de dilogo
quierda y aparecer una ventana donde dos tambin podemos elegir el tama-
configurar las propiedades del docu- y tres. o, las opciones de accesibilidad,
mento (color de fondo, color de texto, la alineacin, etc.
etc.). Cambia todos los datos a tu gusto y Vamos a centrar y hacer ms grande la Ahora que ya nos hemos fami-
haz click en OK. palabra "Bienvenidos". Para ello, la se- Intenta no abusar de las transicio-
liarizado con los mens de forma-
Antes que nada, hay que grabar la p- leccionamos a continuacin, nos dirigi- nes, ya que cansan y ralentizan la to e insercin, vamos a aadir dos ele-
gina. Hacemos click en File>Save As y mos al men Format. mentos ms complejos: una tabla y un

carga de las pginas.
N 88 57
88_54_58_Curso 27/2/04 09:25 Pgina 8
Curso
naranja. La mejor vi-

Insertar una imagen sibilidad se obtiene
con el negro sobre
Veamos paso a paso cmo se inser- con discapacidad visual, ya que blanco.
ta una imagen. En primer lugar, haz pueden obtener una descripcin Procura evitar
click en el icono correspondiente detallada de lo que se muestra en los colores chillo-
del men de insercin. A continua- un archivo separado y evitar nes como fondo
cin, aparecer una ventana con ralentizar la carga de la pgina al de pgina. Son vi-
multitud de campos que rellenar: el ponerla en la etiqueta alt (ernativa). sualmente agresivos
ms importante es el que pide el Por ltimo, examina la tercera pes- y cansan. Tampoco
nombre del archivo (Filename). taa, Advanced. En esta seccin conviene utilizar
Bscalo en tu ordenador y acepta podemos definir la alineacin de imgenes gif animadas, ya que suelen
cuando lo hayas seleccionado. y se debera ver as: irritar a todos los visitantes.
Entonces, vers un icono de la ima- En Internet, escribir todo en ma-
gen dentro de la ventana, y obser- ysculas equivale a gritar.
vars cmo los datos relativos a la Recuerda que no todo el mundo
altura, anchura y texto descriptivo tiene las mismas fuentes instala-
alternativo se han rellenado de das en su equipo. Por ejemplo, puede
que con la fuente Staccatto el texto
Acordarnos de las personas con Algunos consejos quede fabuloso para ti, pero si quien
discapacidades es un deber mo- Una buena regla general para escri- este viendo la pgina no la tiene insta-
ral de todos los diseadores.
bir pginas web es que su longitud lada, su navegador la visualizar con la
nuestra imagen, si va a llevar o no no supere dos o tres pantallas de fuente por defecto (que suele ser Ti-
borde y a cunta distancia de ella se 640 x 480, incluidos los enlaces de mes New Roman en equipos Win-
tienen que colocar el resto de ele- navegacin locales, al principio y fi- dows), y obtendr un resultado no de-
Aqu introduciremos los datos mentos de la pgina. nal de la pgina. seado y generalmente poco agraciado.
ms importantes, es decir, los Si la informacin es muy extensa, di- Para evitarlo usa fuentes comunes o
identificativos.
vdela en pginas separadas o in- ampliamente extendidas como, por
forma automtica. Siempre puedes cluye un enlace con un archivo dife- ejemplo, Arial, Times New Roman,
modificarlos segn tus necesidades. rente que contenga el texto en una so- Courier o Verdana.
Si haces click en la pestaa la pgina. Esto permitir que la des- La pgina puede tener un aspecto
Accesibility, te pedir que introduz- carga de la informacin y la en nuestra pantalla y otro muy dife-
cas una direccin URL para la des- navegacin a lo largo de los diferentes rente en las de los usuarios que la
cripcin de la imagen. Esto resulta- Es recomendable rellenar estos temas se haga ms rpida para los visi- vean. Los usuarios ven las pgi-
r muy til para aquellas personas datos para ayudar al navegador. tantes del sitio web. nas con distintos exploradores
No uses tamaos de fuentes gran- web (por ejemplo, Internet Explo-
des para el texto. Procura que no su- rer o Netscape Navigator) o incluso
formulario; pero primero vamos a Es ahora cuando deben entrar en jue- peren los 10 o 12 puntos (tamao 2 o sistemas operativos diferentes. Re-
crear una nueva pgina para que quede go nuestros conocimientos de HTML. 3) o Heading 4, y es aconsejable utili- comendamos una codificacin lo
ms claro. Guardamos y cerramos la Por un lado, tenemos un formulario y zar un tamao mayor en los ttulos o si ms ajustada a los estndares para
que tenemos y creamos una nueva si- una tabla, y nuestro objetivo es entrela- quieres destacar alguna cosa. que sea legible en todas o en la ma-
guiendo los pasos anteriores. zarlos para dar formato visual. Una de Procura que los colores se combi- yora de las circunstancias. Aunque
Para insertar un formulario reco- las primeras lecciones que debemos nen bien y que el texto sea legible. todos los navegadores admiten un
mendamos utilizar el asistente automti- aprender de HTML es que las etiquetas Por ejemplo, si utilizas el rojo como nico lenguaje HTML, existen algu-
co, ya que se trata de uno de los elemen- deben estar anidadas entre s; es decir, color de fondo, no pongas el texto en nas diferencias entre ellos.
tos ms complicados de controlar. En <b><i>negrita e itlica
este ejemplo insertaremos un formulario correcta</i></b> y no <b><i>negri-
llamado "mi_formulario" con dos cam- ta e itlica correcta</b></i>. Por lo
Tablas tiles
Las herramientas incluidas en el Otro de los elementos de los que
paquete nos ayudarn a mejorar podemos hacer uso son las tablas.
Podemos utilizarlas como herra-
nuestra web de forma muy sencilla. mienta de diseo, pero tambin
para organizar la informacin. Para
pos de texto: "nombre" y "apellidos", y tanto, la etiqueta <form></form> de- aadir una tabla a nuestra pgina
un botn de envo (Submit). Este for- be ser la que envuelva toda la tabla. utilizaremos primero el asistente
mulario nos permite enviar un correo Por otro lado, debemos saber que las automtico, que nos guiar paso a
electrnico a la cuenta que nosotros eli- etiquetas <tr> y </tr> delimitan las paso por las diferentes opciones
jamos. Dejemos un momento aparcado filas y <td></td>, las diferentes cel- que pueden configurar nuestra
el formulario y centrmonos en la tabla. das. Utilizaremos la primera columna tabla: filas, columnas, bordes, etc. El asistente nos brinda la posibili-
Sin embargo, podemos crear nues- dad de escoger entre alguno de
A continuacin, vamos a crear una ta- para presentar un mensaje al visitante y estos modelos prediseados.
tras tablas de una forma mucho
bla de dos filas (rows) y dos columnas la segunda, para introducir los campos
ms rpida, con la opcin Quick hacerlo, se desplegar una rejilla
(columns) para albergar nuestro formu- de texto respectivos. Por ltimo, colo-
Table (Tabla rpida), una posibili- que servir de base para elegir el
lario. En el men Table utilizaremos el caremos el botn de envo fuera de dad similar a la existente en pro- nmero de filas y columnas desea-
asistente automtico, que nos evitar la tabla, para reducir as la compleji- gramas como Word. Para crear la das. Lo malo de esta opcin es que
muchos quebraderos de cabeza a la ho- dad de este ejemplo, pero tambin po- tabla, basta con que hagas click y hay que configurar las propiedades
ra de configurar las etiquetas HTML. De dramos incluir una tercera columna y arrastres el puntero del ratn a mano, dentro de la ventana de
este modo, podremos elegir el ancho y situarlo all. Aproximadamente, el c- mientras mantienes pulsado el cdigo, ya que Hot Dog no es
alto, la alineacin, los colores de fondo, digo que hemos generado y manipula- botn izquierdo del mismo. Al capaz de hacerlo a posteriori.
los bordes, etc. do, debera ser:
58 www.pctoday.es
89_54_59_Curso 10/3/04 17:41 Pgina 14
Curso
El color y las imgenes

Las imgenes y los colores dan vida a nuestras pginas, a veces demasiado recargadas de texto. Sin
embargo, hay que saber cmo utilizarlos y mezclarlos, ya que muchas veces las pginas terminan siendo un
collage poco cuidado. La imagen, como el color, debera cumplir alguna funcin, aunque fuera decorativa.
H
Gua del curso ace tan slo unos pocos aos tes iguales de tres colores, llamados
la mayora de los ordenado- primarios: rojo, verde y azul. El
1. Introduccin al diseo web. res de los que dispona el p- color blanco es pues, una mezcla en la
Planificar y organizar el sitio. Principales elementos de las pginas web. PC Today n 87 blico en general funcionaban que se encuentran la mxima cantidad
2. Herramientas para el diseo web. tan slo con 256 colores. Actualmente, posible de rojo, verde y azul. La au-
lo normal es trabajar con millones de sencia de los tres colores primarios
colores y con monitores de velocidad de da como resultado el negro.
actualizacin rpida y cualidades grfi- En el sistema RGB (siglas en ingls de
cas. Lamentablemente, los navegadores, Red, Green, Blue, es decir rojo, verde,
Herramientas para el tratamiento de las imgenes y el color. The GIMP. PC Today n 89 es decir, los programas encargados de azul) la cantidad de cada uno de estos
4. Usabilidad. mostrarnos las pginas web, no han colores puede ir desde 0 (ausencia to-
Qu es la usabilidad y por qu se debe tener en cuenta? Qu hacer y no hacer en el diseo web. evolucionado de la misma manera y, co- tal) hasta 255 (mxima cantidad). El
Cmo saber si una web es usable. PC Today n 90 mo consecuencia, los millones de colo- sistema RGB indicar la cantidad de
5. Accesibilidad. res de los que se disponen para trabajar cada color entre 0 y 255 para as formar
Qu se entiende por accesibilidad? Deficiencias y polticas. El diseo inclusivo. quedan reducidos drsticamente a un nuevo color. Ya sabemos que
Consejos para disear una web accesible. Evaluar la accesibilidad. PC Today n 91 la hora de crear pginas web. R=255, G=255, B=255 dara blanco y
6. Tecnologas multimedia en la Red. Cmo indicamos a la pgina el color que R=0, G=0, B=0 dara negro. Y el
Msica y sonido. Imagen animada y pelculas. Integracin multimedia: Macromedia Flash que queremos? Utilizamos el siste- hexadecimal? Funciona bsicamente
y Action Script. PC Today n 92 ma hexadecimal, que nos permite igual, indicando la cantidad de cada
7. Programacin. trabajar con millones de colores. Aho- uno de los colores primarios, pero
ra bien, cmo funciona este sistema? usando nmeros en base 16. Qu sig-
La luz blanca est compuesta por par- nifica esto? Pues que en lugar de 10 d-
54 www.pctoday.es
89_54_59_Curso 10/3/04 17:41 Pgina 15
Diseo web. Parte 3
mente de un navegador a otro y de un menor medida, y los segundos son el

sistema operativo a otro distinto. azul, el verde, el azul verdoso, el vio-
leta, cian, y el celeste.
Tipos de colores
Colores clidos y fros Colores claros y oscuros
Una forma de dividir los colores es Otra posible divisin de los colores es
en clidos y fros. Los colores cali- aquella que distingue entre colores cla-
ros o luminosos y oscuros. Los claros
inspiran limpieza, juventud, joviali-
dad, como ocurre con amarillos, verdes
Hay que tener en cuenta que, dependiendo del sistema operativo en que traba-
jemos, utilizaremos distintas paletas de colores.
gitos utiliza 16, pero como no hay ms mas, slo podremos usar unos de-
que diez nmeros recurre a las seis terminados colores, en concreto
primeras letras del abecedario: 216. Pero esta paleta no es en realidad
0123456789ABCDEF. tan segura, ya que cada usuario que
Por otro lado, para indicar el color vea nuestra web, tendr configurado su Utilizar colores clidos puede dar
utilizamos seis valores: los dos pri- monitor con unas determinadas pro- dinamismo a la pgina.
meros indican el rojo, los dos siguien-
tes, el verde y los dos ltimos, el azul.
De este modo, en HTML el color blanco
Por mucho que nos esforcemos en que
sera "#FFFF" y el negro "#0000". los colores sean iguales para todos, la Los colores oscuros crean espacios
ntimos, mientras que los luminosos
La profundidad de color marca la
cantidad de bits de informacin de que diferencia de los monitores nos dan sensacin de apertura.
disponemos para definir los colores

derivados de los primarios. A ms bits,
desbaratar nuestra intencin. y naranjas. Los oscuros inspiran se-
riedad, madurez, calma, como es el
se obtiene mayor nmero de variacio- piedades de contraste, saturacin, lu- dos dan sensacin de actividad, de caso de los tonos rojos, azules y negro.
nes de un color primario. Para 256 co- minosidad, etc., lo que borrar cual- alegra, de dinamismo, de confianza y
lores se precisan 8 bits, para obtener quier posibilidad de que nuestros colo- de amistad, mientras que los colores Los mejores colores
miles de colores necesitamos 16 bits res se vean de la misma manera en dos fros dan sensacin de tranquilidad, No existe una respuesta nica para
(color de alta densidad) y para obte- de seriedad, de distanciamiento. En esta pregunta, todo depende del pbli-
ner millones de colores hacen falta 24 cuanto a los primeros, son el amari- co al que va destinada la pgina, de los

bits (conocido como color verdadero). llo, el rojo, el naranja y el prpura en colores corporativos que quiz este-
Existe tambin otra profundidad de co-
lor, la de 32 bits, pero con ella no se
consiguen ms colores, sino que los Propiedades de los colores
que usemos se muestran ms rpido.
Volvamos a los 256 colores bsicos de Todos los colores poseen una serie convierta en celeste. Otra forma de
8 bits; de stos 256 colores, el propio de propiedades que les hacen variar desaturar, es mezclarlo con su com-
sistema operativo se queda con 40 pa- de aspecto y que definen su apa- plementario; esto producir tambin
ra su gestin interna, con lo que dispo- riencia final. Entre estas propieda- su neutralizacin. La intensidad de
nemos de 216, podemos combinar 6 des cabe distinguir: un color est determinada por su
tonos de rojo, 6 de azul y 6 de verde. Matiz: es el estado puro del color, carcter de brillante o apagado.
Con el paso del tiempo se ha adoptado sin el blanco o negro agregados. El Brillo: es la intensidad con ms
una lista de colores con un nombre re- matiz se define como un atributo claridad u oscuridad en el color;
presentativo, de tal forma que los nue- La paleta Reallysafe o colores real- de color que nos permite distinguir se refiere a la cantidad de luz per-
mente seguros.
vos navegadores los interpretan y el rojo del azul. Tambin lo pode- cibida. El brillo se puede definir
los traducen internamente por su valor monitores distintos. Como consuelo, mos identificar con un verde ama- como la cantidad de "oscuridad"
hexadecimal equivalente. podemos trabajar dirigindonos al ma- rillento y un verde azulado, ambos que tiene un color, es decir, repre-
Visto lo anterior, si queremos traba- yor nmero de usuarios posibles, y pa- distintos matices del mismo color, senta lo claro u oscuro que es un
jar con una gama de colores compati- ra ello podemos disear nuestras pgi- el verde. Los tres colores primarios color respecto de su color patrn.
ble con todas las profundidades, nas usando bien la paleta de 216 colo- representan los tres matices pri- Se trata de una propiedad impor-
navegadores, sistemas y platafor- res, lo que nos permitir tener cubier- marios; mezclndolos se obtienen tante, ya que contribuye a crear
to el rango de usuarios los dems matices o colores. sensaciones espaciales. As, por-
con sistemas de color de Saturacin o intensidad: se refiere ciones de un mismo color con
8 bits y de 24 bits. Tam- a la viveza o palidez de un color. In- fuertes diferencias de brillo (con-
dica la pureza del mismo; los colo- traste) definen porciones diferen-
bin podemos disear
res puros del espectro estn com- tes en el espacio, mientras que un
con toda la gama de 24 pletamente saturados. Si mezcla- cambio gradual en el valor de un
bits, y disponer as de mi- mos un color, por ejemplo, el rojo, color (gradacin) da sensacin de
llones de colores para con el blanco, no slo aumentar su contorno, de continuidad de un
trabajar, pero entonces valor sino que disminuir su satura- objeto en el espacio. La descrip-
slo apreciaran bien cin. Para desaturar un color sin que cin clsica de los valores corres-
nuestras pginas los vare su valor, es necesario mezclar- ponde con: claro (cuando contiene
usuarios con sistemas de lo con un gris de blanco y negro de cantidades de blanco); medio
altas prestaciones, y su mismo valor. Un color intenso, (cuando contiene cantidades de
siempre deberemos tener como el azul, perder su saturacin gris) y oscuro (cuando contiene
Existen ms colores con nombre, pero slo stos se en cuenta que los colores a medida que se aada blanco y se cantidades de negro).
mostrarn en todos los navegadores. utilizados variarn ligera-
N 89 55
89_54_59_Curso 10/3/04 17:42 Pgina 16
Curso
fundamental de estas pginas es ser

El color y las emociones ledas. Como consejo, utilizar un fon-
do claro y letras oscuras, que desta-
Es bien sabido que las respuestas Amarillo: comunica entusiasmo, pa- dad, cielo, agua, sensualidad, comodi- quen muy bien.
emocionales varan enormemente sin, fuerza, peligro, calor, primave- dad... Si es muy plido, puede inspirar Pginas exticas y a la vez ele-
para cada color y para cada intensi- ra, inocencia, infancia... Es un color frescura e incluso fro. Da sensacin gantes: se pueden obtener con fon-
dad de un mismo color, as como optimista, moderno y denota alegra. de elegancia cuando no es muy oscu- do negro o con color muy oscuro y
para las diferentes combinaciones de Si es muy brillante, puede indicar ro. Si es oscuro, da sensacin de espi- letras o motivos dorados, blancos o
colores que se pueden dar. peligro y si es muy suave, sugerir ritualidad. Es un color que influye so- prpuras-rojos.
Normalmente, cada color individual delicadeza. Un entorno amarillo me- bre el apetito, hacindolo disminuir, Otro aspecto que debemos tener en
lleva asociado un conjunto de emo- dio o plido transmite comodidad, seguramente porque no hay ningn cuenta es si queremos que el usuario
ciones y asociaciones de ideas pro- calor. Se ha asociado siempre el alimento azul en la naturaleza, por lo pueda imprimir nuestras pginas. Si la
pio. Sin embargo, hay que recordar amarillo a la intelectualidad y al pen- que no es aconsejable su uso para respuesta es afirmativa, hay que evitar
que estas emociones asociadas samiento claro, y hay psiclogos que una pgina sobre recetas de cocina. los colores muy oscuros, ya que esto nos
corresponden a la cultura occidental, dicen que este color ayuda a memo- Tambin puede expresar tristeza. obligara a dar colores claros a los tex-
ya que en otras culturas los Naranja: simboliza alegra, ju- tos, para que se pudieran visualizar. Con
colores pueden expresar senti- ventud, calor, verano... Es el este planteamiento, si el usuario quiere
mientos totalmente opuestos a color de la carne y del fuego
imprimir la pgina va a tener proble-
los anteriormente indicados. del hogar. Es vibrante como la
As, y por citar slo unos cuan- luz del sol, extico como las
mas por todos lados. Si no tiene activada
tos colores, podramos estable- frutas tropicales, jugoso como
la opcin de imprimir los colores de
cer lo siguiente: la naranja, sugiere informali- fondo, no ver nada en la impresin, y si
Rojo: transmite pasin, alarma, dad en el trato, amistad y des- la tiene activada, gastar el cartucho de
entusiasmo, agitacin, fuerza, taca mucho sobre el entorno tinta de la impresora, obteniendo de to-
sexo, peligro, calor, fuego, san- que le rodea. das formas un mal resultado.
gre, carcter belicoso, intensi- Verde: recuerda la naturale- Un aspecto a tener en cuenta es el
dad... Est asociado con senti- za, salud, dinero, frescura, contraste creado cuando sobre un co-
mientos enrgicos y con la ex- No es casual que los coches deportivos utilicen fre- crecimiento, abundancia, fer- lor o una imagen de fondo colocamos
cuentemente el rojo, ya que es un color pasional.
citacin apasionada o ertica, tilidad, plantas, bosques. Se otro color diferente, o cuando situa-
aunque tambin la ira y enfado. El ro- rizar datos a las personas. Hay que dice que es el color ms descansado mos prximos en nuestra pgina dos o
jo puede ser atractivo y seductor co- tener en cuenta que es el color que para el ojo humano y que tiene poder ms colores distintos. Como norma ge-
mo los labios pintados de una mujer o fatiga ms a la vista, y llega a ser de curacin. Es contradictorio; a mu- neral, siempre debe destacar el texto
desencadenar asco, mareo, como aplastante, porque causa una esti- chas personas les parece desagra- sobre el fondo con la suficiente clari-
cuando se contempla un charco de mulacin excesiva de los ojos, por lo dable, y a otras les sugiere pasin.
sangre. Puede llamar la atencin, pa- que un entorno amarillo brillante El negro: implica elegancia, seduc-
ra incitar a una accin o para marcar puede llegar a provocar una sensacin, misterio, fuerza, mal.
los elementos ms importantes de la cin de irritabilidad en las personas. El blanco: est asociado a la pure-
pgina, pero cuando se emplea mu- Azul: implica verdad, dignidad, melan- za, inocencia, limpieza, ligereza, ju-
cho cansa la vista. cola, tristeza, confianza, masculini- ventud y suavidad.
mos obligados a seguir y, en especial, nido. El color de los enlaces convie- primarios, con altos contrastes entre
de cada diseador, ya que un disea- ne que sea el azul estndar del nave- fondo y contenido, o bien con fondos
dor es un creador, y por lo tanto nues- gador, o si lo cambiamos por lo me- oscuros y textos claros, con la inclu-
tras creaciones estn en gran medida nos dejar los enlaces subrayados, ya sin de pequeas animaciones en
inspiradas por nuestra personalidad, que es el color que est acostumbra- Flash de tonos vistosos.
estado de nimo, etc. Sin embargo, po- En las sitios educativos, prima la lim-
pieza y claridad de las pginas.
demos seguir unas pautas generales
que nos orientarn: No hay colores mejores o peores para dad como para que se pueda leer c-
Pginas destinadas a un pblico
general: deben estar basadas en co-
crear pginas web, todo depende del modamente, y esto tambin es impor-
tante en el caso de las imgenes de p-
lores ms bien neutros, que puedan contexto y del conjunto. gina. No olvidemos nunca que la mi-
gustar a la mayora, como colores sin principal de una pgina web
secundarios o terciarios en tonos do a ver la mayora de los usuarios. Pginas destinadas a un pblico es transmitir informacin, por lo
pastel o en una gama de grises, con Pginas orientadas a un pblico adulto: deben disearse con colores que una lectura clara y cmoda es fun-
bajos contrastes entre fondo y conte- joven: pueden incluir colores vivos, serios, elegantes, fros, sin altos con- damental. Los buenos contrastes se ob-
trastes de tono, en colores neutros, tienen con fondos claros y textos oscu-
incluso tirando a grises. Siempre po- ros, o al revs, y tambin con fondos
demos recurrir en este caso al tpico fros y textos clidos, o al revs, siem-
estndar de fondo blanco y letras ne- pre que no sean anlogos. No podemos
gras o gris oscuro. olvidar la accesibilidad que debemos
Pginas corporativas, de em- dar a nuestras pginas. Debemos verlas
presa o de instituciones: deben con los ojos del posible visitante, y es-
disearse de acuerdo con los colo- tos ojos muchas veces no estn en las
res identificativos de las mismas, mismas condiciones que los nuestros.
incluyendo siempre el logotipo de No debemos olvidar a los usuarios
la empresa. afectados por el daltonismo, a quie-
Pginas divulgativas, como ma- nes la navegacin por nuestra pgina
nuales y artculos: debemos tener les resultar muy difcil si nos basamos
especial cuidado en que el texto des- nicamente en rojos y verdes.
taque adecuadamente sobre el fon- Por otro lado, no es recomendable
do, sin usar colores chillones que usar imgenes de fondo en las pginas
Los colores alegres dominan las pginas juveniles y dirigidas a un pblico infantil. cansen la vista, ya que el objetivo web, salvo que sta sea de un color y to-
56 www.pctoday.es
89_54_59_Curso 10/3/04 17:42 Pgina 17
Diseo web. Parte 3
Manipulation Program), el ms cono-

cido dentro del mundo del software
de libre distribucin dedicado al reto-
que fotogrfico y la composicin y
creacin de imgenes. En un princi- Fichero, extensiones y ayuda.
pio se desarroll para el sistema ope-
rativo Linux, y hace ya algn tiempo Vamos a comenzar con la descrip-
que se encuentra disponible para cin de los mens y las herramientas,
Windows, aunque los autores aclaran para ms adelante realizar varios ejer-
que esta versin an presenta peque- cicios prcticos. Cuando lo abrimos,
os fallos. Funciona en todos las ver- slo aparece la caja de herramientas,
siones de Windows, desde Windows que contiene tres mens:
95 hasta Windows XP, y los requisitos El men Fichero contiene los si-
mnimos del sistema son los siguien- guientes submens:
tes: Pentium I a 133 MHz, 32 Mb de Nuevo: despliega un cuadro de di-
Ram, 200 Mb de espacio libre en dis- logo desde donde podemos escoger
Cuadro comparativo entre los dos principales formatos para web. Se pueden apre-
co duro, resolucin mnima de las medidas para una nueva imagen.
ciar las diferencias de legibilidad y calidad de los tonos continuos (www.dispar.cl). 800x600 ppp y color verdadero de 24 Abrir: nos permite seleccionar una
32 bits. No funcionar con una con- imagen desde una carpeta para po-
no muy apagado y con poco contenido JPEG es el acrnimo de Joint Photo- figuracin de 256 colores. der trabajar en ella.
grfico por unidad de pantalla, ya que graphic Experts Group (Grupo Unido de Adquirir: bien sea por es-
despistan mucho al usuario y enmasca- Expertos de Fotografa). Fue diseado cner, el portapapeles o
ran excesivamente el texto, as como los para la compresin de imgenes foto- por captura de pantalla.
dems elementos de la pgina. grficas, basndose en el hecho de que Preferencias: desde don-
el ojo humano no es perfecto y no logra de se pueden cambiar los
Formatos grficos captar toda la informacin que se puede valores correspondientes al
Una misma imagen puede almacenar- almacenar el una imagen de 24 bits. El nmero de niveles de des-
se en diferentes formatos; los ms formato JPEG intenta eliminar la infor- hacer, la resolucin del
extendidos en Internet son GIF y JPEG. macin que el ojo humano no es capaz monitor, la forma en que se
La organizacin W3C recomienda el uso de distinguir, por eso se dice que posee visualizan las ventanas de
del formato PNG (Portable Network un formato de compresin con prdida, GIMP, etc.
Graphic) para cubrir ciertas lagunas que porque elimina informacin. Respecto a Dilogos: con las opcio-
dejan los otros formatos, aunque, como los colores, pueden ser 24 bits en im- La compatibilidad con LZW se encuentra separa- nes que se muestran a con-
es de reciente aparicin, todava no se genes de color o solamente 8 en fotogra- tinuacin.

da del programa por la vigencia de la patente.
admite en todos los navegadores. fa en blanco y negro. Una de las desven-
El formato PNG es el que ms futuro Cmo instalar The GIMP

tiene, ya que los desarrolladores de Podemos descargar el programa ciaciones de archivo se nos pregunta
software libre se estn volcando en l. desde www2.arnes.si/~sopjsimo/ qu tipos de archivos grficos desea-
gimp. Es importante instalar los archi- mos asociar a GIMP. Recomendamos
GIF es el acrnimo de Graphic Image tajas de este formato es que no permite vos en el orden que indicamos. dejar todas las casillas sin seleccio-
Descomprimimos gtk+-version- nar. Asmismo, nos indica que GIMP
File Format (Archivo de Formato Grfi- la transparencia ni la animacin.
setup-1.zip y lo ejecutamos haciendo necesita filtros extra para exportar
co de Imagen). Fue desarrollado para PNG es el acrnimo de Portable Net- doble click . Una vez que hemos archivos en formato gif y tiff compri-
el intercambio de imgenes en Compu- work Graphics (Grficos de Red Port- aceptado los trminos de la licencia , mido. Estos filtros se instalan por
serve, aunque la patente ya ha prescri- tiles). Su objetivo es proporcionar un nos pide elegir una carpeta para ins- separado. En Seleccionar tareas adi-
to en muchos pases. Se caracteriza formato de compresin de imgenes talar el programa. Recomendamos cionales, dejamos seleccionadas las
sin prdida adapta- dejar la predeterminada. opciones por defecto y por ltimo,
ble a cualquier tipo A continuacin, descomprimimos el procedemos a la instalacin.
de imagen. Se carac- archivo .zip. En caso de que nuestra Ahora que ya est instalado, ejecuta-
teriza por conseguir resolucin de mos el programa
una mayor compre- pantalla no para configurarlo
sin que el formato tenga de acuerdo a
GIF (alrededor del 1.024x768 ppp, nuestras necesi-
10%) y, al igual que el programa de dades. Aqu ele-
ste, su compresin instalacin des- giremos la car-
es sin prdida y per- plegar un peta donde guar-
Para las fotografas es mejor utilizar el formato JPG. mensaje de daremos los
mite la transparen-
por el nmero de colores que utiliza, cia. Sin embargo, esta transparencia es advertencia , archivos, el ajus-
que puede variar entre 2, 4, 8, 16, 32, mucho ms avanzada, ya que permite pero no te pre- te de rendimien-
ocupes, con Configura el programa de acuerdo to, la resolucin
128 256 de una paleta de 24 bits. Su que sea variable, es decir, que pode-
compresin se basa en el algoritmo mos hacer un degradado de transpa- una resolucin con las caractersticas del equipo. del monitor y los
de 800x600 el programa funciona sin plug-ins aadidos.
LZW, es decir, un formato de compre- rencia, por ejemplo. Respecto al color,
problemas. Aceptamos los trminos Ahora que tenemos instalado el pro-
sin sin prdida. Una de las grandes diremos que soporta hasta 256 colo- de la licencia y seleccionamos el grama, vamos a acoplarle el mdulo
ventajas de este formato es que permite res. Por contra, presenta la desventaja directorio donde lo queremos instalar. de archivos .gif. Cierra GIMP para
la transparencia, es decir, que la ima- de que no permite la animacin. Igualmente, dejamos el predetermina- poder instalar el plug-in , y descom-
gen no tiene por qu ser cuadrada, sido. En el siguiente cuadro de dilogo primimos gimp-version-lzw-setup.zip.
no que puede tener un recorte. Ade- Que es GIMP? elegimos la Instalacin tpica. En el Simplemente pulsamos en l, y le
ms, se pueden crear imgenes anima- GIMP es el Programa de Manipula- cuadro de dilogo Seleccionar aso- decimos instalar.
das, por ejemplo, los banners. cin de Imgenes GNU (GNU, Image
N 89 57
89_54_59_Curso 10/3/04 17:42 Pgina 8
Curso
con 56 patrones que se pueden - Paleta indexada. Abre el cuadro encuentran guardadas en nuestro
usar para rellenar objetos. Tambin de dilogo Paleta de color indexa- ordenador. Se puede abrir cual-
se puede llegar a este cuadro de do, que permite escoger entre cualquiera de ellas desde aqu.
dilogo haciendo doble click en el quiera de los colores que se en- - Consola de errores. Muestra un
icono Patrn activo. cuentran en una imagen indexada informe de los errores producidos
- Gradientes. Abre el cuadro de (generalmente un gif) para pintar o en el transcurso de la sesin de
dilogo Seleccin de gradientes. rellenar nuevos objetos. Para ver trabajo.
ste cuenta con setenta y ocho di- los colores de esta paleta, se deber Debajo del men Dilogos, apa-
seos que se pueden modificar tener abierta una imagen indexada. rece una lista con los ltimos cuatro
para crear ms. Tambin se puede - Dispositivos de entrada. Mues- archivos abiertos, siendo el primero,
llegar a este cuadro de dilogo ha- tra el dispositivo de entrada por el que se abri ms recientemente.
ciendo doble click en el icono ejemplo, cuando se tiene instalada Salir. Es el ltimo de los submens
Las las herramientas de seleccin,
Gradiente activo. una tableta digitalizadora. y, como ya habrs deducido, cierra
edicin y dibujo estn en el centro. el programa y cualquier archivo que
est abierto. En caso de que no se
- Capas, canales y caminos GIMP es la alternativa gratuita a Adobe hayan guardado los cambios de algu-
- Opciones de herramienta. Abre
el cuadro de dilogo correspon-
Photoshop, aunque an le quedan na imagen, GIMP despliega un men-
diente a las opciones de la herra- muchas diferencias por pulir.

mienta que se encuentra activa.
Tambin se puede llegar a este cua- - Paleta. Abre el cuadro de dilogo - Estado de dispositivo. Permite
dro de dilogo haciendo doble Paleta de colores, en donde se hacer cambios en los colores, pa-
click en la herramienta deseada. puede escoger un color para re- trones, brochas y gradientes cuan-
- Brochas. Abre el cuadro de dilo- llenar objetos (color de frente) do se tiene instalado algn disposi-
go Brochas para escoger entre una desde las 39 paletas con que tivo de entrada.
coleccin de 50 diseos y tamaos. cuenta. Al hacer doble click en el - ndice de documentos. Despliega
Tambin se puede llegar a este cua- icono Color de frente, se abre el la ventana ndice del documento,
dro de dilogo deshaciendo doble cuadro de dilogo Seleccin de similar al administrador de archi-
click en el icono Brocha activa. color. Aqu podemos ver los valo- vos, pero a diferencia de ste mues-
- Patrones. Despliega el cuadro de res RGB, el nmero hexadecimal tra una lista de todas las carpetas
dilogo Seleccin de patrn. Cuenta del color o escoger uno nuevo. que contienen imgenes y que se
Mapas de imgenes
Supongamos que tenemos un mapa de <area shape=
Europa y queremos que, al pulsar sobre "rect"#Espaa y
determinado pas, aparezca una pgina Portugal coords=
relacionada con ese pas. Este tipo de "1,222,76,296"
imgenes activas se denominan "Mapas href="espana_portu-
de imgenes". Veamos el cdigo: gal.htm" title=
<img src="europa.gif" "Espaa y Portugal"/> Este men es equivalente al tradicional
<area shape= "Archivo" en otros programas.
"poly"#Italia y Grecia
coords= "121,230,134, saje preguntando si realmente quere-
233,137,245,124,243, mos salir. Podemos hacer click en
121,278,130,277,130, Salir si no deseamos guardar los
249,139,247,173,269, MapEdit es una aplicacin muy sencilla que nos cambios o en Cancelar, para poder
174,280,149,285,169, ayudar a crear mapas de imgenes. guardar el trabajo.
298,173,286,182,277, que lo componen. La cuarta lnea nos
177,269,178,262,187,268,200,266,205 dice que el rea de fondo no tiene nin- Cmo abrir y
,274,212,291,226,291,224,280,237,27 gn enlace y la ltima cierra el mapa. guardar una imagen
4,220,264,215,255,196,259,189,264,1 Construir un mapa introduciendo a Entre los formatos ms conoci-
71,253,157,243,157,237,147,232,147, mano las coordenadas de cada uno de dos que se pueden abrir y guardar con
220" href="italia_grecia" title="Italia los puntos que definen las reas es muy GIMP se encuentran: BMP, GIF, JPG,
y Grecia" /> engorroso. Existen programas que nos TGA, TIFF, PNG, etc., Tambin se puede
<area shape="default" nohref="noh- ayudarn en esta tarea. Por ejemplo, leer y guardar archivos de Adobe Pho-
ref" alt="Europa" /> podemos utilizar el programa Mapedit toshop, aunque si la imagen contiene
</map> de la empresa Boutell para crear un capas, stas no se guardarn.
Si ponemos el cursor encima de Este cdigo define el funcionamiento del mapa de imagen. Podemos descargar
un rea activa de la imagen, apa- Para abrir una imagen, hacemos
mapa. La primera lnea incluye el nom- una copia de evaluacin de este softwa-
recer una mano para indicar click en el men Fichero y selecciona-
que se trata de un enlace. bre y la segunda indica que el rea acti- re en www.boutell.com. Una vez que
va correspondiente es un rectngulo hayamos instalado el programa, abri-
mos la opcin Abrir, momento en el
usemap="#europa" alt="Europa" /> (shape="rect"), seala las coordenadas mos una imagen de nuestro sitio web y cual se despliega el cuadro de dilogo
Ser el atributo usemap= "#europa" el del mapa (coords) e introduce el con las herramientas cuadrado o polgo- Cargar imagen. Debajo de Directo-
que nos va a indicar que las instruccio- comentario (alt="Espaa y Portugal") y no, creamos reas activas. En el mismo rios se encuentran las unidades de dis-
nes de este mapa estn guardadas en el enlace al que se llamar. La tercera momento en que terminemos de definir co y las carpetas. Podemos localizar la
otro sitio, en algn lugar debajo de la lnea es similar, pero define un polgono el rea, aparecer un cuadro de dilogo carpeta donde est guardada la imagen
etiqueta IMG. Veamos el cdigo necesa- e indica las coordenadas (en pares X,Y donde se nos pedir el nombre de la mediante la barra de desplazamiento y,
rio para hacer funcionar nuestro mapa: desde la esquina superior izquierda de pgina a la que queramos enlazar, as colocando el cursor en la unidad raz,
<map id="europa" name="europa"> la imagen) de cada uno de los puntos como otras opciones adicionales. hacemos doble click para visualizar
las carpetas. Repetimos la operacin
58 www.pctoday.es
89_54_59_Curso 10/3/04 17:42 Pgina 9
Diseo web. Parte 3
en la carpeta correspondiente a la ubi- pulso para no desviarse demasiado al un color o cualquiera de las muchas
cacin de la imagen. Del lado derecho, realizar dicha seleccin. La forma de opciones que nos ofrece GIMP. Para
debajo de Archivos, buscamos la hacerlo es mantener presionado el mover la seleccin a otro punto, pri-
imagen que deseamos abrir. Se puede botn del ratn mientras deslizas el mero elige una zona de la imagen me-
crear una vista previa de la imagen an- cursor sobre el contorno que quieres diante cualquiera de las herramientas
tes de abrirla si hacemos click en el ar- seleccionar. Al soltar el botn, la se- que has visto antes. Ahora, en la caja
chivo y luego otro en el botn Gene- leccin se cierra automticamente. de herramientas, selecciona el icono
rar vista previa. Seleccionamos la ima- Para realizar una nueva seleccin, es que se encuentra en la segunda fila y
gen y aceptamos para abrirla. necesario hacer click en cualquier segunda columna (cuatro flechas
Para guardar una imagen en punto exterior de la seleccin actual. cruzadas). Vuelve a poner el cursor
otro de los formatos disponibles, Otra forma de seleccionar regiones encima de la seleccin y, con el botn
hacemos click con el botn derecho continuas es mediante la herramienta izquierdo del ratn presionado,
del ratn en cualquier parte de la llamada "varita mgica", uno de los arrastra la seleccin al punto desea-
imagen y en el men que aparece, se- mtodos ms sencillos de seleccionar do. Finalmente, para fijar la seleccin
leccionamos Fichero y luego Guardar objetos. Con ella puedes acotar regio- en su lugar, haz click dentro de sta.
Elige la extensin del archivo depen-
como. En el cuadro de dilogo Guar- diendo de los colores y el tamao.
nes de colores similares, bien sean
dar imagen, debajo de Directorios, contiguos o no.
buscamos la carpeta en la cual vamos mejores resultados. Hacemos click en Seleccionar regiones con curvas de
a guardar la imagen y en el cuadro de Aceptar para guardar la imagen. Bzier es muy til para elegir formas
texto que se encuentra arriba del bo- irregulares o con curvas. Lo mejor de
tn Aceptar, escribimos el nombre Las herramientas esta herramienta es que permite mo-
que le vamos a dar a la imagen inclu- de seleccin dificar la seleccin mediante los pun-
yendo la extensin. Ahora, hacemos La seleccin rectangular nos permite tos de control que forman las aristas.
click en el botn Aceptar. Para que seleccionar un rea con esa forma en Para cancelar la seleccin ac-
GIMP pueda guardar las imgenes en una imagen; de esta manera, podemos tual, coloca el cursor fuera del rea
formato .gif, primero tenemos que in- recortar, mover o rellenar con un color punteada y, a continuacin, haz click.
dexar la imagen. Si quisiramos guar- el rea que queda dentro de la selec- Si haces doble click en cualquiera de
darla en formato jpg, deberamos
proceder de la misma manera, pero
en la Vista previa, tenemos que ajus- Una buena manera de conocer el Mediante unos tiradores podemos de-
terminar fcilmente el rea que que-
tar la barra deslizable Calidad y el ta-
mao en bytes y Kb.
programa es trastearcon todas las remos recortar.
A un valor bajo, la calidad es ms opciones que nos ofrece. Recuerda que si te equivocas, siem-
pobre. A un valor alto, la calidad de pre puedes usar la opcin Deshacer.
la imagen es mejor pero tambin su cin. Para realizar esta seleccin haz los iconos de seleccin, se desplegar Pulsa click sobre la imagen y, desde el
tamao en Kb. Probaremos con varios click en el icono Seleccin rectangular el cuadro de dilogo relativo a las men Editar, selecciona Deshacer, o
valores hasta que encuentres un pun- ubicado en la barra de herramientas y propiedades de la herramientan que mientras mantienes presionada la tecla
to adecuado. La opcin Suavizado tie- luego, coloca el cursor en una esquina ests utilizando. Control, al mismo tiem-
ne un efecto parecido al desenfoque, de la imagen; con el botn izquierdo Si mantienes pre- po, presiona la tecla Z.
del ratn, arrastra el sionada la tecla de Prueba ahora a cor-
cursor en diagonal maysculas, podrs tar la imagen. Con
para formar una ven- sumar selecciones esta herramienta (se-
tana de seleccin, parciales que estn gunda fila, cuarta co-
suelta luego el botn en contacto y conver- lumna) se puede se-
del ratn para termi- tirlas en una sola. Si leccionar con detalle
nar la seleccin. Haz ahora mantienes pre- el rea de una imagen
click en una de las sionada la tecla Con- Las herramientas de seleccin y realizar un recorte
esquinas y mantn trol, podrs restar son las ms importantes den-
tro del programa.
de la misma. Haz click
pulsado el botn del trozos de las selec- en una esquina de la
ratn, mueve el cur- ciones a una seleccin anterior. imagen y mientras pulsas el botn iz-
sor hacia cualquiera quierdo del ratn, arrstralo en dia-
de las otras esquinas. Transformacin gonal para formar una ventana. Para
La seleccin circu- de una imagen ajustar la seleccin, coloca el cursor
lar nos permite reali- Una vez terminada la seleccin, en uno de los cuadros de las esquinas
zar selecciones elp- puedes moverla, cortarla, aplicarle y cuando cambie de forma, mientras
ticas o circulares de muestra una flecha en diagonal,
una imagen. La for- arrstralo para cambiar el tamao de
ma de realizar la se- la ventana. Para mover la ventana, co-
leccin es exacta- loca el cursor en uno de los cuadros
mente igual a la sede las esquinas y cuando cambie de
leccin rectangular. forma y muestre cuatro flechas,
Coloca el cursor y arrstralo hasta encuadrar la imagen.
luego lo arrstralo, Notars que aparece el cuadro de di-
Trabajar con GIMP es similar a hacerlo con otro software.
se formar una elip- logo Informacin de recorte y cambio
se. Para realizar una de tamao, que incluye la informa-
un valor de 0.00 muestra la imagen seleccin circular, mantn presiona- cin y en el que tambin puedes ha-
ntida, a un valor mayor, la imagen se da la tecla de maysculas mientras cer los ajustes necesarios mediante la
ve borrosa. Seleccionamos las opcio- arrastras el cursor sobre la imagen. introduccin de valores en pxeles.
nes Optimizar, Progresivo y dejamos Para seleccionar formas irregulares El rea seleccionada queda enmarca-
Una vez que la seleccin haya queda-
los valores por defecto para Sub- de una imagen, utiliza regiones dibu- da con lneas discontinuas que se do a tu gusto, haz click dentro sta
muestreo y Mtodo DCT y as lograr jadas a mano. Se requiere tener buen desplazan alrededor de la imagen. para recortar la imagen.
N 89 59
90_52_57_Curso 23/3/04 16:38 Pgina 14
Curso
Usabilidad
Hemos visto en las anteriores entregas todo lo relacionado con los elementos que podemos
utilizar para crear nuestra web. Pero no consiste slo en encajar piezas, hay una parte muy
importante que muchas veces se pasa por alto: la usabilidad.
S
Gua del curso i acudimos a definiciones forma- recen las palabras efectivo y eficiente,
les, la Organizacin Internacional conviene indicar la diferencia. Efecti-
1. Introduccin al diseo web. para la Estandarizacin (ISO, vo es aquello que produce resul-
Planificar y organizar el sitio. Principales elementos de las pginas web. PC Today n 87 www.iso.org) dispone de dos: tados rpidamente a costa de utilizar
2. Herramientas para el diseo web. ISO/IEC 9126: "La usabilidad se re- los recursos necesarios y eficiente es
fiere a la capacidad de un software aquello que genera los mismos resulta-
de ser comprendido, aprendido, usados con un mnimo de recursos.
do y ser atractivo para el usuario, en Dejndonos de tecnicismos y normas
condiciones especficas de uso". (siempre necesarias), coloquialmente
Herramientas para el tratamiento de las imgenes y el color. The GIMP. PC Today n 89 ISO/IEC 9241: "Usabilidad es la podemos definir "usabilidad" como la
4. Usabilidad. efectividad, eficiencia y satisfaccin facilidad de uso aplicable a cualquier
Qu es la usabilidad y por qu se debe tener en cuenta? Qu hacer y no hacer en el diseo web. con la que un producto permite al- sistema que interacta con un usuario.
Cmo saber si una web es usable. PC Today n 90 canzar objetivos especficos a usua- Para conseguir este objetivo, hay que
5. Accesibilidad. rios especficos en un contexto de plantear el desarrollo de nuestra web
Qu se entiende por accesibilidad? Deficiencias y polticas. El diseo inclusivo. uso especfico". de forma que bsicamente sea rpida,
Consejos para disear una web accesible. Evaluar la accesibilidad. PC Today n 91 La primera definicin hace referen- cmoda y fcil de navegar.
6. Tecnologas multimedia en la Red. cia a la necesidad de que exista un En la primera parte ya dimos algunas
Msica y sonido. Imagen animada y pelculas. Integracin multimedia: Macromedia Flash usuario para valorar si un producto es pautas que se deben seguir y antes de
y Action Script. PC Today n 92 usable o no. La segunda hace referen- ponerse a trabajar hay que planificar.
7. Programacin. cia a cmo el usuario puede realizar Nos daremos cuenta de que la dura re-
un trabajo en un determinado escena- alidad es que el esfuerzo que se utiliza
rio de forma efectiva. Siempre que apa- en crear una web se centra en ver y
52 www.pctoday.es
90_52_57_Curso 23/3/04 16:38 Pgina 15
Diseo web. Parte 4
comprender el uso de la misma. Al fi- lo mismo desarrollar una web para un

nal siempre es rentable emplear ms astrnomo que para un diseador gr-
tiempo en este punto. fico. Incluso dentro del mismo contex-
to, no es lo mismo desarrollar una web
Interfaz para un diseador grfico de 3D que
Siempre que hablamos del trmino para un diseador de carteles de cine.
interfaz, slo se piensa en los ordena- Esto no significa que no haya una se-
dores, pero llevamos utilizando las in- rie de principios que se debe seguir en
terfaces desde la revolucin industrial. cualquier diseo, ya sea una pgina
Podemos ver la importancia del dise- web, una revista o un coche.
o de una interfaz en algo tan cotidia- Mientras los cientficos se preocupan
no como un coche (cuya interfaz ha de cuantificar los comportamientos in-
mejorado a lo largo de los aos desde teractivos, la mayora de los diseado-
su invencin). Pues bien, si la interfaz res se conforman con que no existan
de un coche no fuese clara, sera un restricciones en la comunicacin.
desastre o ni siquiera lo podramos po- Quin no ve regularmente docenas
ner en funcionamiento. de interfaces a la semana? En muchas
Si tuviramos que definir el trmino, ocasiones (como es el caso de los bus-
habra que decir que una interfaz es cadores) repetimos la visita regular-
una serie de elementos que nos per- mente. Pues bien, esto indica que una
mite manejar algo complejo de interfaz es ante todo, un intermediario
forma sencilla. Organizacin Internacional para la Estandarizacin, www.iso.ch. Aqu pode- de la comunicacin con la audiencia.
Volviendo al concepto de la interfaz mos consultar los estndares de usabilidad. Muchas interfaces estn diseadas
del coche, sera bastante complicado para trasladar herramientas del mundo
sacar el carn de conducir si todos tu- En Internet podemos encontrar A pesar de que existan estudios y es- real al virtual. Evidentemente, con una
viramos que comprender el funciona- mucha informacin acerca de la pecialidades en carreras universitarias, serie de adaptaciones que permite cam-
miento interno del mismo. Si a eso usabilidad. Esto indica que no es sim- no existen unas "reglas" de usabilidad biar, por ejemplo, un lpiz por el ratn
aadimos que si no fuese por la palan- plemente un trmino del que se puede que se deban seguir para utilizar los y el bloc de dibujo por la pantalla.
elementos de una interfaz web. Por de- La mayora de las personas sienten
duccin vers que el trmino se hace afinidad y familiaridad con una pgina
Procura ponerte en la piel de un relativo, es decir, una web puede ser web porque quieren, necesitan o estn
usuario. Todos hemos tenido ms o menos usable dependiendo de de alguna forma relacionados con el
una serie de cuestiones: contenido que se ofrece.
experiencia como usuarios en las miles Para qu sirve la web (objetivo). Hay estudios que indican que la pobla-
de interfaces que existen. A quines va dirigida.
Dnde se utiliza o en qu contexto.
cin que estuvo conectada a Internet en
2003 a nivel mundial ascenda a 450 mi-
El propio concepto no permite unas llones de personas. Se perdieron ms de

ca de marchas (elemento de la inter- prescindir a la hora de crear una pgi- reglas fijas para estas preguntas. No es 23 billones de euros debido a la falta de
faz), tendramos que preocuparnos de na web. Hay muchos estudios que de-
sincronizar el motor con la caja de muestran que los comportamientos de
cambios para poder ir marcha atrs. los usuarios con respecto a un sitio
Algo tan sencillo como poner unas le- web determinan su usabilidad.
Qu el IPO?
tras en el pomo de la palanca nos da
una informacin esencial e indica las Interaccin Este trmino es ms conocido por sus sobre sus contenidos y a la forma
acciones necesarias para poder cambiar Persona-Ordenador siglas IPO, en ingls HCI (Human- de actuar de sus "espectadores".
de velocidad. Acompaado de un pedal Haciendo un poco de historia, la usa- Computer Interaction o interaccin Aqu mostramos una serie de enla-
de embrague (otro elemento de la inter- bilidad y su estandarizacin vienen de entre mquina y persona). Aunque ces relacionados, para aqullos que
faz), se permite esta operacin. una rama de Psicologa Aplicada que es- generalmente vienen unidos: IPO/HCI. queris profundizar en este tema.
Siempre se ha pensado que era un www.ainda.info
terreno al que slo se dedicaban griho.udl.es:8080/aipo
los ingenieros e informticos, pero www.desarrolloweb.com/manuales
la influencia y expansin de www.usability.serco.com/trump/
Internet han abierto un lugar cre- resources/standards.htm
ciente a los estudios sicolgicos (Este ltimo en ingls).
El quinto congreso sobre Interaccin se celebrar entre el 3 y 7 de mayo de

2004 en la Universidad de Lleida.
Si el trmino lo llevamos a cualquier tudia la Interaccin Persona-Orde-

herramienta que usemos en nuestro nador. Ms conocida como IPO, podr-
PC, simplemente una interfaz es el con- amos definirla como el intercambio de
junto de elementos que nos permite in- informacin entre personas y ordenado-
teraccionar con dicha herramienta res. Su objetivo es que este intercambio Dentro de los sitios web en castellano, ainda.info puede ser uno de
(botones, enlaces, cuadros de dilogo, sea ms productivo en aquellas tareas en los ms interesantes donde obtener informacin.
listas desplegables, etc.). las que cooperan humano y mquina.
N 90 53
90_52_57_Curso 23/3/04 16:38 Pgina 16
Curso
Para validar tus pginas web lenguaje que utilizamos y del navegador y eliminar partes para cubrir las nue-
Tipo URL Accin
en el que se visualizar la pgina. vas necesidades del usuario.
HTML validator.w3.org Ayuda a convertir el cdigo de las pginas a HTML vlido
Si trabajamos directamente con Mantenimiento adaptativo: cam-
CSS1 www.w3c.org/Style/CSS/Test Tests para verificar hojas de estilo CSS1
cdigo, habr que evitar el uso de bios y modificaciones que hay que
CSS2 jigsaw.w3.org/css-validador Verifica hojas de estilo CSS2
ciertos elementos de interfaz o hilar fi- introducir para que el producto se
no con las diferencias que surgirn al amolde al sistema en el que funciona
usabilidad de los sitios de comercio do. Cuando digo sencillo, no significa

electrnico y casi la mitad de las tran- "sin calidad".
sacciones no se llegaron a completar. Si la prctica o experiencia nos lo
Quiere decir que la relacin interfaz- permite, podemos trabajar directamen-
usuario no estaba resuelta adecuada- te en un editor de texto o echar mano
mente. La consecuencia de romper la fa- de las herramientas de diseo como
miliaridad con el usuario es que nuestro
sitio web no se visite. Si aadimos que
depende de nuestra interfaz web que ga-
nemos dinero, ser peor todava.
El mercado Dentro del consorcio internacional W3C podemos utilizar herramientas para va-
de nuestra web lidar el cdigo de nuestras pginas.
El primer paso siempre es identifi-
car el mercado que va a cubrir nues- visualizarlos en distintos navegadores. (nuevo hardware, cambio de sistema
tro sitio web. El usuario es quien va a Podemos encontrar herramientas de operativo, bases de datos, etc.).
medir realmente nuestro trabajo final validacin de cdigo y, principalmente, Mantenimiento perfectivo: mejoras
(por lo general nosotros mismos, a no acudir al consorcio internacional W3C, que hay que realizar en la calidad del
ser que nos dediquemos profesional- donde obtendremos informacin de producto final (optimizacin de cdi-
mente a ello). A quin queremos atraer los estndares que debemos seguir en go, reestructuracin del sistema, etc.)
con nuestra interfaz? Cmo, cundo y nuestros desarrollos. An as, es muy di- Enfrentarnos a los cambios de un si-
por qu usarn nuestros servicios? El A la hora de trabajar, no podemos ol-
fcil conseguir un diseo de pgina uni- tio web vendr condicionado por la
tiempo final de desarrollo depender de vidar la cantidad de sistemas y nave- versal para todos los navegadores o dis- forma en la que se haya desarrollado.
la claridad de estos conceptos y de lo gadores existentes. positivos, que no siempre funcionan se- Volvemos a repetirnos: cuanto ms
que queremos plasmar en nuestra web. gn las normas. Slo podemos dar un sencillo sea un diseo y ms clara
Lo que influye de manera funda- Sausage Hot Dog o Hot Metal Pro (que consejo: prueba tus pginas sobre dis- la informacin suministrada al usua-
mental son las soluciones tecnolgi- ya vimos en una entrega anterior). tintos navegadores. Tambin est la op- rio, ms fcil ser aplicar cambios,
cas que vamos a emplear en nuestro Evidentemente, utilizar herramientas cin ms sencilla y que muchos hemos ampliaciones y mejoras.
desarrollo. Desde mi punto de vista, de desarrollo evitar que necesitemos
siempre es preferible acudir a lo sen- un conocimiento profundo del sistema
cillo para obtener un resultado rpi- operativo sobre el que trabajamos, del Como todo en esta vida, no hay un sitio
web perfecto, pero podemos conseguir
Los expertos opinan
que su uso sea ms agradable.
visto en Internet: aadir en nuestra Ho- Para asegurarnos un mantenimien-
Dentro de los expertos en esta enlaces, colores, tipografa, etc.). En me la lnea tpica que dice "Optimizada to con bajo coste de nuestro sitio
materia de la usabilidad, podemos cuanto al "user model", podemos para XXXXXXX en 800x600", pero es el web (tanto si lo hemos desarrollado
seguir la analoga que Dick Berry decir que es lo que le da funcionali- peor consejo que se debe seguir. nosotros, como si hemos contratado a
(IBM) hace entre sta y un iceberg. dad a la interfaz, hace que sea com- un profesional), quiz debamos emple-
Una interfaz se compone de dos prensible para el usuario y permite Mantenimiento ar ms presupuesto en el desarrollo,
partes: los elementos invisibles (lo
que se denomina user model) y los
resolver sus tareas (familiaridad?).
Por importancia se podra establecer
de una web sobre todo en la parte inicial del mis-
Evidentemente, por muy estricto que mo. Un presupuesto anual de manteni-
visibles (look & que dentro de un
haya sido nuestro trabajo de desarrollo, miento debera ser al menos un 50%
feel). Pues 100%, el "look"
las pginas web deben evolucionar para del coste inicial.
bien, segn su supone el 10%,
postulado, el el "feel" un 30%
adaptarse a nuevas
usuario slo ve y el "user tecnologas, crecer
la punta del model" un 60%. y ampliar sus fun-
iceberg (look & Podrs deducir cionalidades, solu-
feel), pero lo que los cimien- cionar problemas
que se encuen- tos de un pro- de uso, etc.
tra bajo el agua yecto web estn En esta evolu-
se compone de basados en crear cin tenemos va-
una estructura Dick Berry esuno de los expertos una interfaz fun- rios tipos de man-
multidimensio- ms reconocidos por su trabajo so- cional para el tenimiento:
bre interfaces hombre-ordenador.
nal construida usuario. Esto es Mantenimiento
en funcin de los usuarios. Si tradu- indispensable, pero hay que aunar los correctivo: cam-
cimos esto, quiere decir que la inter- tres elementos. bios que hay que
faz es el "feel", ya que es la que se En esta entrega no vamos a entrar realizar para co-
comunica con el usuario por s en programacin, ya que la usabili- rregir errores del
misma, mientras que el "look" es dad depende ms de las convencio- software.
cmo se muestran los contenidos nes y estndares de la interfaz que Mantenimiento
dentro de ella (estructura, mens, de su programacin. evolutivo: incor- Hay herramientas como Macromedia Coldfusion permiten
porar, modificar trabajar con todas las posibilidades de un desarrollo web.
54 www.pctoday.es
90_52_57_Curso 23/3/04 16:38 Pgina 17
Diseo web. Parte 4
Adems del coste econmico est pios conseguiremos reducir los tiem-
el coste humano. Todo lo hagamos en pos de desarrollo, costes de manteni-
una pgina web repercute en el desa- miento, aumentaremos la calidad final
rrollador y sobre todo en el usuario. del producto y crearemos una interfaz
Es fcil saber qu har que el mante- que nos asegurar muchas visitas. La
nimiento de una interfaz sea ms o me- consecuencia positiva ser la satisfac-
nos costoso. Se han dado casos bastante cin de nuestros clientes.
demostrativos de los problemas que Podramos dar miles de consejos,
puede ocasionar una interfaz de la pero no hay que olvidar:
pgina mal diseada o con falta de Seguir los principios de usabilidad.
rigor en su desarrollo. En cierta oca- Al final e que manda es quien visita
sin la interfaz fue creada por una em- nuestra pgina. Tenemos que ser ca-
presa de diseo con poca experiencia paces de facilitar al usuario el alcance
en interfaces informticas. Se utiliz una de sus objetivos con un mnimo es-
tipografa propietaria, se abus de fuerzo y unos resultados mximos.
los enlaces de texto en formato grfi- Debemos evitar el trato hostil al
co (GIF), las pginas estaban satura- usuario. Si se produce un error, te-
das de informacin... En definitiva, se Herramientas como Flash permiten resultados conjugables de tecnologa, nemos que proporcionar opciones o
saltaron muchas reglas bsicas del dise- usabilidad y grficos multimedia sofisticados. soluciones, y no un simple mensaje o
o de la interfaz. El mantenimiento tuvo pgina con el error.
un gran coste posterior, ya que se utiliz Hemos hablado de principios, no de Aprendizaje: es necesario crear in- Limitemos las acciones de nuestra
ms tiempo en introducir cambios normas rgidas o reglas, que seran im- terfaces que no impliquen un largo pgina al objetivo de la misma. Si un
que en escribir cdigo. posibles de cumplir dada la diversifica- proceso de aprendizaje. usuario entra en una web y no sabe
cin de plataformas en las que se vi- Valores por defecto: de este modo por dnde empezar a leer, es que es-
sualizara una web. se obtendr una interfaz ms gil. t sobrecargada de informacin.
Bruce Tognazzini, perteneciente a Metforas: deben existir similitud en- Nuestra web debe proporcionar in-
Nielsen Norman Group (Jakob Niel- tre las funciones de la interfaz y los ob- formacin de lo que suceda en las
sen y Donald A. Norman, www.nngroup. jetos de la vida real, evitando los tecni- acciones (feedback), contribuye a
com), es un experto en HCI. En su pgi- cismos. Por ejemplo, si una aplicacin la comprensin de las funcio-
na web (www.asktog.com/tog.html) expli- tiene aspecto de talonario, a nadie se nalidades de la pgina web.
ca los principios que son necesarios pale ocurrira pensar que es para dibu- Conviene emplear tcnicas como las
de enfoque "persona" y creacin de
"escenarios" (www.ainda.info/persona
Si es tu trabajo profesional, siempre _escenarios.html) a la hora de dise-
puedes contar con algn diseador ar la estructura de nuestra web:
- El enfoque "persona". Consiste
experimentado que te aconseje en los ni ms ni menos que en restringir
puntos clave. los perfiles de nuestros posibles
usuarios. Cuando decidimos crear
Otra de las mejores pginas sobre usa-
una pgina web, normalmente no
bilidad es www.useit.com de Jacob Niel- ra disear e implementar interfaces con jar. Conocido por todos es la metfora se hace con propsitos generales y
sen, cofundador de N. Nielsen Group. xito. Aqu estn resumidos: de la papelera de reciclaje: nadie pon- para todo el mundo, sino que esta-
Anticipacin: debemos anticipar- dra una canasta de baloncesto como blecemos un posible universo de
Despus de todo lo comentado, es nos a las necesidades del usuario. icono para acciones de eliminacin. trabajo. Si intentamos cubrir las
ms fcil deducir qu es lo apropiado Evita la navegacin intil. Eficiencia: las pginas web deben necesidades de todos los usuarios
o inapropiado en una interfaz. La canti- Autonoma: los usuarios tienen que ser productivas para el usuario, no estamos cometiendo un error.
dad de errores que se comenten en el sentir la familiaridad con el sitio web slo para la propia web. - "Escenarios". Despus de definir
diseo web es mayor que las recomen- de forma que lo vean como un sitio Proteccin del trabajo: debemos nuestro universo de usuarios, te-
daciones que se pueden dar. finito y controlable. asegurar que los usuarios no pierdan nemos que marcar los objetivos
Jacob Nielsen (www.useit.com) experto Colores: hay que tener en cuenta la el trabajo por un error. de nuestros visitantes para poder
en usabilidad, realiza estadsticas anua- accesibilidad de un buen porcentaje Legibilidad: al proporcionar con- establecer el entorno de trabajo.
les desde 1996 para informar de los 10 de usuarios con problemas de distin- trastes en la interfaz, se facilita su uso. La nica forma de definir un esce-
errores ms frecuentes en el diseo web. cin de colores (hemos dedicado to- Si llevamos a la prctica estos princi- nario es mediante entrevistas u
Lo ms preocupante es que desde 1996 da una entrega a los colores).
a 1999 se siguen cometiendo los mis- Consistencia: las aplicaciones de-
mos fallos. Esta web recibe ms de ben ser fciles de comprender, de
17.000 visitas mensuales, lo que indica este modo se evitan reacciones in-
la importancia y preocupacin por crear sospechadas de la interfaz.
una interfaz correcta. Ley de Fitts: indica que el tiempo pa-
ra alcanzar un objetivo mediante el
Qu debemos hacer ratn depende de la distancia y tama-
La inmediatez de crear una web pue- o del objetivo (clicks de ratn para
de hacernos caer en la tentacin de pa- llegar a un punto o para realizar una
sar por alto los planteamientos que ex- tarea y ste debe ser mnimo).
pondremos aqu, pero es tan impor- Reversibilidad: una pgina web
tante y tiene tanto peso la usabilidad? debe permitir anular las acciones
Aunque sea para uso propio, no est que se realicen.
mal que empleemos algn tiempo en Reduccin del tiempo de laten-
estas cuestiones. Pensar y planificar cia: en lo posible, evitar tiempos de
ahorrar muchos quebraderos de ca- espera al usuario diseando pgi-
beza, incluso rehacer todo el trabajo. nas ligeras. En www.asktog.com puedes ver consejos a seguir para disear una pgina web.
N 90 55
90_52_57_Curso 23/3/04 16:38 Pgina 8
Curso
observando el trabajo que reali- La tipografa Ruptura de continuidad dentro

zan los usuarios a los que vamos a puede estar per- de una web: operaciones que obli-
dar servicio. fectamente limi- guen al usuario a desviar su atencin
tada a la que te (descargar plug-ins, vdeos, actuali-
Qu hacer en la interfaz ofrece el sistema. zaciones, etc.) reducen la velocidad
Despus de un chequeo general de la HTML tiene de conexin.
web, el usuario pasar al siguiente suficientes re- Pginas con errores: enlaces ro-
punto en el orden de lectura que se cursos para di- tos, pginas caducadas o trasladadas,
muestra en la imagen de la derecha. sear una web bsquedas que no ofrecen resulta-
Los usuarios terminan gravitando por sofisticada, dos, sesiones expiradas. Lo ms se-
la pgina en busca de hipervnculos, que aprovchalos. guro es que nuestro visitante se mar-
es donde se centra la atencin. Qu ha- Usa pginas de che a otra de las cientos de webs que
cer para que nuestra interfaz tenga cri- tamao fijo. le ofrecen la misma informacin.
terios de usabilidad? Veamos: Evita que la p- Errores de cdigo: otro de los
Los formularios han de ser sim- gina de inicio problemas que no debemos dejar
ples y a ser posible con pocos cam- sea para usua- pasar en una web.
pos. Debemos tener muy claro para rios registra- Uso de direcciones complejas:
qu solicitamos la informacin y agru- Del amarillo al rojo, indica que se dedica ms atencin. Ms dos o que cues- sobre todo cuando quieres aconsejar
amarillo = menos atencin, ms rojo = ms atencin. La
par los datos que se van a validar. flecha indica el orden de lectura.
te dinero acce- una pgina a un amigo.
Evita que la informacin est muy der a ella.
fragmentada. El error tpico de la ciones (algunos expertos indican Simplemente, hay que tener un poco
direccin fragmentada (segn para como mximo siete). Si son mens de coherencia. El usuario no va a valorar
que uso): tipo de calle, calle, nme- desplegables, lo aconsejable es que si nuestra web est a la ltima, valorar
ro, escalera, piso, puerta. A veces es no se cierren si el usuario no quiere. que tenga la funcionalidad que espera.
mejor un solo campo.
Cuando usemos combos deberan
ser de seleccin nica. Algunos Las normas son flexibles , puedes
autores no los recomiendan, pero to- permitirte ciertos lujos para hacer tu
do en esta vida es relativo.
Por defecto es aconsejable utilizar web ms vistosa o con ciertos efectos
los enlaces y botones del
sistema. Ser ms intuitivo y el que la hagan atractiva.
usuario los reconocer.
Los botones de la interfaz han de te- Conviene evitar el uso de mens con
ner un tamao proporcionado. rollover, son ms cmodos los que se Qu errores no hay Los botones han de tener formas, co-
lores y estar delimitados, para as
Sus formas tambin influyen: es ms abren al hacer click. que cometer ayudar al usuario.
fcil hacer click en un botn cuadra- Reduce el peso de tus pginas Lo primero: el tiempo es muy im-
do que en uno redondo. adaptndolas lo ms posible al c- portante para todos nosotros, y lo Texto parpadeante: resta impor-
En los enlaces de texto, hay que indi- digo HTML. Divide la informacin fundamental en Internet es ahorrar tancia visual al resto de los elemen-
car claramente el destino mediante en ms pginas y no intentes tiempo (sobre todo porque el coste tos de la pgina.
la etiqueta TITLE. aglutinar todo en una. de las comunicaciones en Espaa si- Textos deslizantes (efecto mar-
Es recomendable al 100% acogernos No abuses de los grficos. Si tu gue siendo caro). quesina): la lectura de un texto que
a los 216 colores estndar del siste- web no est enfocada a este fin, se- Debemos tener en cuenta: se desplaza es incmoda y limita la
ra conveniente Uso de marcos: en determinados atencin sobre la pgina.
reducirlos a un navegadores no funcionan bien. Im- Combinaciones ilegibles de tex-
logotipo. Esto piden conocer la estructura de la to y fondo.
puede parecer web, imprimir la pgina correcta- Animaciones cclicas intiles: re-
contradictorio mente y guardarla en el disco duro trasan la visualizacin de la pgina y
cuando lo que se (depende del navegador). distraen la atencin del usuario.
ve en Internet es-
t lleno de im-
genes, sonido,
etc., pero es ne-
cesario pensar
en el usuario.
Aqu incluyo los
banners, slo el
25% de los usua-
El enfoque persona nos ayudar a adaptar el diseo al rios recuerdan el
tipo de visitantes que vamos a tener. banner visto en
su ltima visita.
ma que se visualizarn de la misma Si los usamos, en lo posible evitare-
forma en cualquier navegador (colo- mos los de autopromocin. Han de
res seguros). cumplir su funcin claramente an-
Cuando se usan las hojas de estilo tes de entrar en florituras.
(CSS), es mejor especificar los tama- Si incluyes vdeo en tu web, procu-
os de las fuentes en porcentaje y no ra que el formato sea siempre
en cifras absolutas. comprimido, de imgenes homo-
No es aconsejable quitar los subra- gneas y de corta duracin. No abu-
yados de los enlaces. ses del color; entre menos colores, Algo de lo que no gozan muchas de las webs que podemos encontrar en la
Los mens han de incluir pocas op- ms se comprime. Red: la posibilidad de elegir entre varios idiomas de visualizacin.
56 www.pctoday.es
90_52_57_Curso 23/3/04 16:39 Pgina 9
Diseo web. Parte 4
Estudio rpido de una web

Hay muchos ejemplos con los que Hay demasiados espacios vacos
podemos ilustrar cules son pgi- en la web, y en el conjunto gene-
nas buenas y cules malas. Aqu ral pesan. El tiempo empleado
reseamos una, que por sus carac- por una conexin de banda
tersticas podemos considerar una ancha de 256Kbps a las siete de
pgina web psima: North Royalton la tarde para cargar la pgina
Estos errores pueden provocar la huida automtica de nuestro visitante. Police (en Ohio), members.aol.com/ supera los 15 segundos.
NRPolice/nrpdhomepage.html. Cuando se produce un error, se
Textos intermitentes. ma, sin conocer unos datos base Sin hacer un repaso exhaustivo hace imposible volver a cargar la
Banners pesados. exactos, podemos llegar a un resul- vemos lo siguiente: pgina.
Elementos de apariencia publi- tado final y detectar hasta un 42% de El fondo utilizado difi-
citaria: la "ceguera a los banners" problemas de diseo graves y un culta la visibilidad de
(www.ainda.info/ceguera_banners.htm) 32% de problemas menores. Es el los textos empleados.
hace que muchos usuarios ignoren mtodo de menor coste y como Faltan demasiadas
contenidos de la pgina. mnimo se emplean tres evaluadores imgenes que el
Cambios de resolucin del mo- (segn Nielsen de tres a cinco eva- explorador ha susti-
tuido por el icono de
nitor: nadie cambia la resolucin luadores es suficiente).
imagen no localizada.
del monitor por una pgina. El trabajo de estos expertos en usabi-
No hay una distribu-
Logotipos: deben tener una resolu- lidad se centra en la interpretacin de cin de la informa-
cin y peso adecuados incluso para las acciones realizadas por los usuarios cin que permita en
las conexiones ms lentas. y su propia navegacin por el sitio web un solo vistazo saber
qu contiene la pgi-
Una web que incumple bastantes criterios de
na y su objetivo.
Antes de arriesgarte, cuenta con las El texto en marquesi-
usabilidad.
opiniones y consejos de alguien na que aparece debajo del ttulo

de la pgina no aporta nada.
Despus de utilizar un validador
de HTML
experimentado en estos temas. La fotografa utilizada como pre- (www.htmlhelp.com/tools/validator)
sentacin es oscura. que nos permite introducir una
Toda la web es una nica pgina, URL para validarla, se obtuvieron
La apertura automtica (Pop- (cada experto trabaja por separado). totalmente continua, que obliga a ms de 68 errores (el mximo
ups)de nuevas ventanas en el navega- Analizan pgina por pgina siguiendo desplazarse por toda ella en bs- permitido por la herramienta de
dor disgusta a los usuarios. una lista de criterios y redactan un in- queda de mens que orienten al chequeo online).
Basar la interfaz slo en su as- forme posterior que ponen en comn. usuario sobre la localizacin de Podramos continuar, pero lo ms
pecto esttico, complacencia de la Los diez criterios ms conocidos son: alguna informacin. sencillo es que juzgues por ti mismo
marca o estructura empresarial. 1. Visibilidad del estado del sistema. Muchos enlaces estn rotos. sin entrar en detalle.
2. Emparejamiento entre el sistema y
Cmo saber si una el mundo real.
web es usable 3. Control y libertad del usuario. sumen mucho tiempo y gran canti- paso a paso, aunque sin mostrarlos
Todos los consejos ofrecidos para se- 4. Consistencia y estndares. dad de recursos. Una empresa tarda de forma abierta a los usuarios fi-
guir unas pautas de usabilidad son 5. Prevencin de errores. en decidirse a realizar estos tests, nales, slo para los desarrollado-
buenos, pero tambin hay que saber 6. Reconocimiento sobre recuerdo. pero es peor enfrentarse a la factura res. Se utilizan los escenarios esta-
discernir si una web es usable o no. 7. Flexibilidad y eficiencia de uso. que nos pue-
Hay diversos mtodos que se pueden 8. Esttica y diseo minimalista. den hacer pa-
utilizar, no slo la coherencia. 9. Ayudar a reconocer, diagnosticar y sar los usua-
Evaluacin heurstica por ex- solucionar errores. rios. Este tipo
pertos (tambin denominada por 10. Ayuda y documentacin. de evaluacio-
Existe tambin nes es com-
una evaluacin au- plejo, ya que
tomtica que se re- implica ms
aliza con herra- preparacin,
mientas de valida- tiempo de re-
cin, pero que la alizacin y
mayora de las ve- anlisis, pero
ces no incluye cri- proporciona
terios de usabili- mucha infor-
dad. No obstante macin. Uno de los mayores expertos mundiales en el estudio de
permite ahorrar En este tipo IPO/HCI es Jakob Nielsen.
trabajo posterior. de pruebas
Aqu tienes un enla- no se da ninguna pauta a los usua- blecidos durante el diseo web. Es-
ce donde podrs rios para que exista un comporta- te tipo de evaluaciones se puede re-
encontrar muchas miento espontneo. Se registran el alizar por un usuario o por un
Hay sitios web que nos permiten medir la velocidad de de estas herramien- rendimiento y la opinin de los mis- equipo multidisciplinar (incluyen-
nuestra conexin. Por ejemplo testacceso.es.tdatacenter.com tas: www.desarrollo mos en una reunin final donde se do los desarrolladores y expertos
/informacion.html. web.com/directorio/ ponen en comn estos datos. en usabilidad). Finalmente, se rea-
programacion/html/ Simulacin cognitiva: consiste liza una puesta en comn de todos
criterios): consiste en utilizar prue- validadores_html. en la puesta en prctica de forma los problemas encontrados y plas-
bas, exmenes o aproximaciones pa- Test con grupos de usuarios: detallada de todos los procesos mados en un formulario estableci-
ra llegar a una solucin. De esta for- este tipo de pruebas son caras, con- existentes en un sitio web seguidos do para este fin.
N 90 57
91_52_57_Curso 5/4/04 16:27 Pgina 14
Curso
Accesibilidad
Siempre hemos odo hablar sobre un mundo sin barreras, donde no haya obstculos
y todos tengamos las mismas oportunidades. En el mundo virtual tambin existen
dificultades y barreras, aun siendo ms moldeable y maleable que la vida real.
L
Gua del curso a Real Academia de la Len- trabajo y asuntos sociales. Vamos a
gua Espaola la define como pensar en ese mundo virtual que, aun
1. Introduccin al diseo web. cualidad de accesible, y acce- siendo el mundo ms maleable y mol-
Planificar y organizar el sitio. Principales elementos de las pginas web. PC Today n 87 sible es aquello que tiene acce- deable, sigue estando adaptado ma-
2. Herramientas para el diseo web. so, de fcil acceso o trato y de fcil yormente a los que podemos disfrutar
comprensin, inteligible. Bajo estas de grficos y sonidos impactantes y, an-
premisas, el mundo real siempre se ha te todo, de informacin.
basado en esos trminos de forma lite- Timothy John Berners-Lee, inventor de
ral y siempre que pensamos en algo acla World Wide Web y presidente del
Herramientas para el tratamiento de las imgenes y el color. The GIMP. PC Today n 89 cesible, nos imaginamos grandes aveni- W3C (www.w3.org/People/Berners-Lee/)
4. Usabilidad. das, mucho aparcamiento y centros co- dice: El poder de la Red est en su
Qu es la usabilidad y por qu se debe tener en cuenta? Qu hacer y no hacer en el diseo web. merciales. Los menos nos acordamos universalidad. El acceso para todos sin
Cmo saber si una web es usable. PC Today n 90 de los que van en silla de ruedas, los tener en cuenta sus discapacidades es
5. Accesibilidad. que tienen ciertas minusvalas y c- un aspecto esencial.
Qu se entiende por accesibilidad? Deficiencias y polticas. El diseo inclusivo. mo no? de nuestro amigo al que le com-
Consejos para disear una web accesible. Evaluar la accesibilidad. PC Today n 91 pramos de vez en cuando un cupn. Deficiencias que limitan
6. Tecnologas multimedia en la Red. Todos sabemos y comprendemos las el acceso a la Red
Msica y sonido. Imagen animada y pelculas. Integracin multimedia: Macromedia Flash dificultades que entraa pasear por la Podemos distinguir distintas deficien-
y Action Script. PC Today n 92 calle a las personas con discapacidad. cias y minusvalas que condicionan el
7. Programacin. Este no va a ser un artculo crtico de la uso de los sistemas informticos:
poltica del mundo sin barreras que Visuales. Afectan principalmente a
puede estar haciendo el ministerio de los elementos de textos, grficos y uso
52 www.pctoday.es
91_52_57_Curso 5/4/04 16:28 Pgina 15
Diseo web. Parte 5
del ratn. Para reducir esta dificultad, <tr>

se utilizan ampliadores de imagen, <td height="30" colspan="2"
dispositivos con salida en Braille, lec- bgcolor="#CCCCCC">
tores de pantalla, etc. <h4><font co-
Auditivas. Impiden o dificultan or lor="#000000">Diario del PC.
las seales de alerta o alarma y todos Líneas del día:
los elementos relacionados con el 25 de abril del
sonido. En este caso se usan sistemas 2004</font></h4></td>
de conversin de los archivos de au- </tr>
dio a texto. <tr>
Motrices. Principalmente afectan al <td height="85" colspan="2"
uso de elementos que requieren movi- bgcolor="#E2FBFE">
mientos, como son el teclado y el ra- <h1><font co-
tn. Para paliar estas deficiencias se lor="#003399">El mejor PC del
utilizan sistemas de reconocimiento de mercado</font></h1>
voz y dispositivos que sustituyen al te- <h2>Después de
El consorcio internacional W3C contiene un apartado dedicado a promocionar la
clado o ratn. accesibilidad en la Red (www.w3.org/WAI).
años de espera se pone a la
Cognitivas y de lenguaje. Afectan a venta </h2></td>
la comprensin, aprendizaje y comu- accesibilidad y fomentarla para dar un <!DOCTYPE HTML PUBLIC "- </tr>
nicacin. Para estos usuarios deben acceso igualitario a la informacin. //W3C//DTD HTML 4.01 Transitio- <tr>
utilizarse interfaces claras y sencillas Crear aplicaciones accesibles para tonal//EN"> <td width="63%" height="281"
(sobre todo usables), con sonido y dos no implica renunciar a las nue- <html> valign="top" bgcolor="#F4F4F4">
texto para la informacin contenida. vas tecnologas, sino conocerlas para <head> <p>Por fin se encuentra en el
A estas deficiencias, si les aadimos obtener mejores resultados. Una interfaz <title>Ejemplo de columna</title> mercado el ordenador más
las barreras informticas (elementos accesible para daltnicos, por ejemplo, <meta http-equiv="Content-Type" sofisticado del
de hardware o software) que crecen requiere que los colores rojo y verde no content="text/html; charset=iso- mundo. No requiere teclado,
continuamente, llegan a convertirse en se empleen juntos; una pgina web acce- 8859-1"> pantalla, ni ratón. Todo es
una verdadera preocupacin para los sible para un invidente deber tener una </head> configurable a las necesidades del
profesionales y sobre todo para las en- interfaz hablada. Clientes diferentes re- usuario.</p>
tidades gubernamentales. quieren necesidades distintas, por eso <body> <p>Bla, bli, blo......</p>
Desde el punto de vista del hardwa- los diseadores pueden anticiparse a to- <table width="78%" height="406" <p>Y en esta parte de la tabla
border="1"> se sigue</p></td>

Todos tenemos derecho a la
informacin sin barreras de ningn Fundacin SIDAR
tipo, y ms en Internet. Una de las pginas ms interesantes en este foro de diseadores, investi-
en castellano que podemos encon- gadores y colaboradores.
trar en Internet es la web de la fun- Lo ms interesante y que siempre se
re, cualquier elemento por su diseo dos estos problemas y que en sus herra- dacin SIDAR Acceso universal. agradece es que el idioma de comu-
(incluso el ms bsico) se convierte mientas finales exista la flexibilidad y la Su principal cometido es dar a cono- nicacin es el espaol.
en una barrera para algunos discapa- configuracin propia para cada caso. cer todo lo existente sobre accesibili- Sus objetivos principales:
citados y, a su vez, en ayuda para Pensamos que la accesibilidad est lidad a la Sociedad de la Informacin y Estimular el diseo accesible
otros. En este sentido, muchas empre- gada exclusivamente a personas con mi- principalmente a Internet. Adems de (Diseo para Todos) en la Red y
sas apuestan por sus inventos y sustitu- nusvalas, pero una interfaz bien disea- proporcionar informacin sobre legis- la presencia de la discapacidad
tos de hardware. da en cuanto usabilidad y accesibilidad, lacin, la fundacin permite la partici- en Internet.
En cuanto al software, los expertos en mejorar para el usuario tradicional. pacin activa en sus actividades, tra- Estimular el intercambio de infor-
desarrollo deben ponerse las pilas pa- bajos, obtencin de recursos, etc. macin e investigacin, en habla
ra disear aplicaciones que sean accesi- Interfaz simple En una sociedad mundial en donde hispana, sobre la evolucin de las
bles para todos. Y sobre todo, las ad- Aqu proponemos un ejemplo de c- ms de 175
ministraciones deben hacer polticas de digo HTML de una pgina de noticias: millones de
usuarios estn
afectados por
alguna discapa-
cidad, existe la
necesidad de
proporcionarles
las mismas
oportunidades
de acceso a
estos servi- Seminario Iberoamericano sobre Discapacidad y Ac-
cios. Sobre cesibilidad en la Red.
este contexto,
surge el foro DISTEC dentro de la directrices, herramientas y normas
fundacin que se centra en la de accesibilidad en Internet.
Tecnologa de la Rehabilitacin (TR) Contribuir a la calidad de los con-
y en la Ayuda Tcnica (AT). Cualquier tenidos de la Red, tanto en el orden
sistema, pieza, elemento, dispositivo tcnico como en el tico y en el de
o servicio que se pueda utilizar en la estilo; y promover el acceso a la
mejora de la accesibilidad de los Red por parte de las personas con
Los elementos ms cotidianos se convierten en ayuda para unos y en barre- discapacitados estar bien acogido necesidades especiales.
ras para otros.
N 91 53
91_52_57_Curso 5/4/04 16:28 Pgina 16
Curso
2004</font></h4></td> rio (conocido como DCU). Todo el

Validacin de una web </tr> proceso de diseo asume la partici-
<tr> pacin del usuario y de los expertos en
<td bgcolor="#E2FBFE"> discapacidades.
Es aconsejable utilizar <h1><font color="#003399">El El proceso incluye varios pasos:
mtodos de validacin mejor PC del Definicin de requerimientos.
desde el principio del mercado</font></h1> En esta premisa se especifican los
desarrollo de una <h2>Después de objetivos del producto que se va a
web. Si detectamos años de espera se pone a la desarrollar, las necesidades del
los errores desde el
venta </h2></td> usuario medio, el contexto de uso y
principio, ser ms
fcil corregirlos.
</tr> los requerimientos tcnicos para sa-
Algunos de los mto-
<tr> tisfacer estas necesidades.
dos de validacin ms <td bgcolor="#F4F4F4"> Modelado del usuario. Aunque la
importantes son los <p>Por fin se encuentra en el mer- definicin de requerimientos se hace
Ejemplo de una web accesible y con mucha
que exponemos aqu: informacin: Ayuntamiento de Pinto cado el ordenador más so- pensando en el usuario medio, hay
Utiliza una herra- accesible.ayto-pinto.es. fisticado del mundo. No requiere que definir perfiles y as poder satisfa-
mienta de accesibi- - Marcos, scripts, hojas de estilo y teclado, pantalla, ni ratón. cer las necesidades de todos. Para fa-
lidad automtica y una herra- applets no cargados Todo es configurable a las necesi- cilitar el contexto global de estos gru-
mienta de validacin del navega- Utiliza un navegador por voz, lec- dades del usuario.</p> pos de usuarios, se buscan caracters-
dor. Asegrate de que las herra- tor de pantallas (JAWS), software <p>Bla, bli, blo......</p> ticas comunes (informacin, limita-
mientas verifican todos los pro- de magnificacin (MAGic 9.0), <p>Y en esta parte de
blemas de accesibilidad. visualizador pequeo, etc. la tabla se sigue la noticia
Verifica la sintaxis del lenguaje de Presta atencin a la ortografa y pero podría rom-
programacin empleado y las gramtica. Quien utilice un sinte- perse al añadir algu-
hojas de estilo. tizador de voz puede malinterpre- na imagen.</p></td>
Utiliza un navegador slo-texto tar el resultado de la lectura. </tr>
(por ejemplo Lynx - Revisa el documento para obtener <tr>
http://lynx.browser.org) o un emu- claridad y simplicidad. Si puedes <td bgcolor="#F4F4
lador. contar con la ayuda de un editor F4"><img src="imagenbue-
Utiliza distintos navegadores (e experimentado, que revise la cla- na.gif" alt="Imagen del nue-
incluso antiguos) con: ridad del texto escrito.
- Sonidos y grficos cargados
vo superordenador"
Invita a personas con discapaci-
- Grficos no cargados
w i d t h = " 1 9 2 "
dad a revisar el resultado de los
- Sonidos no cargados documentos, te proporcionarn
height="220"></td>
- Sin ratn gran ayuda.
</tr> Por 155 euros podemos obtener un teclado cu-
yas letras tienen un tamao cuatro veces ms
</table> grande que el normal.
</body>
</html> ciones, patrones de conducta, etc.).
<td width="37%" valign="top" La alternativa es intentar hacer pginas Como en la usabilidad, hay que esta-
bgcolor="#F4F4F4"> lo ms lineales posible. Son ms fciles Es un ejemplo, pero las barreras que blecer escenarios para aunar interac-
<p>la noticia pero podría de disear y cumplen mejor los objetivos pueden encontrar en las pginas web cin-persona.
romperse al añadir alguna de la accesibilidad. las personas con discapacidad fsica, vi- Diseo conceptual. Ante la difi-
imagen.</p> Un cdigo ms efectivo sera: sual, auditiva y cognitiva incluyen: cultad de satisfacer las necesidades
<p><img src="imagenbuena.gif" Imgenes sin texto alternativo. de interaccin de todos los usua-
w i d t h = " 1 9 2 " <!DOCTYPE HTML PUBLIC "- Ausencia de texto alternativo en los rios, se buscan alternativas para di-
height="220"></p></td> //W3C//DTD HTML 4.01 Transitio- puntos sensibles de mapas de imagen. sear interfaces adaptables dinmi-
</tr> camente a las necesidades de cada
</table> uno. Esto acarrea dificultades tcni-
</body> Muchas empresas apuestan por cas, ya que habra que detectar si
</html> hardware que sustituya a dispositivos un usuario est accediendo median-
te un navegador convencional, nave-
El resultado como interfaz no es muy de entrada/salida tradicionales. gador de audio, tctil, etc., y adap-
profesional, pero puede ser una de las tar la forma y presentacin de los
miles que nos encontramos en Internet. nal//EN"> Uso incorrecto de los elementos es- contenidos conforme se suceden.
Si un invidente visita la pgina con un <html> tructurales en las pginas.
lector de pantalla, la disposicin es bas- <head> Sonidos no subtitulados
tante escabrosa. Cuando el lector est <title>Ejemplo de columna</ti- o imgenes no descritas.
preparado para leer tablas lo har per- tle> Ausencia de informacin
fectamente, pero si lo realiza linealmente <meta http-equiv="Content-Type" alternativa para usuarios
la interpretacin ser errnea. content="text/html; charset=iso- que no pueden acceder a
8859-1"> los marcos o a scripts.
</head> Tablas difciles de inter-
pretar cuando se alinean
<body> (el ejemplo).
<table width="55%" Sitios con contraste de
height="524" border="1"> colores pobre.
<tr>
<td bgcolor="#CCCCCC"> Diseo inclusivo
<h4><font co- Bajo este trmino subyace
lor="#000000">Diario del una metodologa que se basa
El formato de la interfaz de este ejemplo podra- PC. Líneas del d&ia- en el diseo de aplicacio- El resultado no parece tan brillante, pero es ms
mos encontrarlo en cualquier web de noticias. cute;a: 25 de abril del nes centrado en el usua- funcional para una interfaz hablada.
54 www.pctoday.es
91_52_57_Curso 6/4/04 12:32 Pgina 17
Diseo web. Parte 5
Si seguimos estas recomendaciones Texto explicativo de una imagen in-

podremos colocar unos logotipos que cluida en un objeto <OBJECT data="
definen el nivel de adecuacin de la paginainicio.gif " type="image/gif"
pgina web, y slo tendremos que height=100 width=100>Aqu una pe-
aadir el cdigo apropiado que sumi- quea descripcin o enlace a una pgina
nistra la direccin www.w3.org/ explicativa</OBJECT>
WAI/WCAG1-Conformance. Texto explicativo para un applet
Segn los elementos que se vayan a <APPLET code="textoparpadeante.
utilizar en el diseo de nuestra interfaz,
class" width="128" height="32"
estos son los criterios que se deben se- alt="Applet de Java: texto que parpa-
guir basndonos en el nivel de prioridad dea">Si utiliza un explorador con Ja-
de los puntos de verificacin. Expone- va habilitado, podra ver un texto par-
mos los puntos de verificacin con padeante en lugar de este
Prioridad 1 que son los ms importan- prrafo</APPLET>
tes. El seguimiento, las recomendacio- Texto para imgenes de efectos de
nes y los ejemplos para los puntos de texto <IMG SRC="WAI.gif" ALT="Inicia-
Prioridad 2 y 3 se pueden consultar en tiva de accesibilidad a la Red">
la pgina www.w3.org/WAI/wcag-curric/ Uso del elemento NOSCRIPT para des-
El gran inconveniente del hardware adaptado es el coste: un ratn para te-
trapljicos puede salir por 745 euros. overchk.htm: cribir cualquier cdigo incrustado
Elementos de interfaz en general: <SCRIPT type="text/javascript">c-
La solucin implica separar con- 7. Asegura al usuario el control so- - Proporciona un texto equivalente digo de un script que visualiza una tira
tenidos, presentacin y estructura bre los cambios de los contenidos para todos los elementos no textuales. cmica como consecuencia de un even-
de los elementos. Diferentes usua- tempodependientes. Texto alternativo a imgenes o anima- to...</SCRIPT>
rios necesitarn diferentes formas de 8. Asegura la accesibilidad directa < N O S -
presentacin, pero tambin elementos de las interfaces incrustadas. CRIPT>En la
de interaccin adaptados. 9. Disea para la independencia primera se-
del dispositivo. Estos iconos nos resultarn familiares a partir de ahora. cuencia, el
Pautas para crear una 10. Utiliza soluciones provisionales. personaje mira
web accesible 11. Utiliza las tecnologas y pau- ciones <IMG SRC="pagini.gif" ALT="Ico- por una ventana al vaco. En la segun-
Todo est muy bien, pero cmo pode- tas W3C. no de acceso a pgina de inicio"> da llega un amigo que le invita al ci-
mos poner en prctica la accesibilidad 12. Proporciona informacin de con- Texto explicativo de enlace <A HREF= ne"</NOSCRIPT>
en nuestro diseo de pginas web? texto y orientacin. "paginainicio.htm"><IMG SRC="pagi- - Asegrate de que toda la informacin
Lo primero que hay que tener claro 13. Proporciona mecanismos claros nainicio.gif" ALT="Enlace a la pgina de transmitida mediante colores tambin
es que las pautas establecidas por el de navegacin. inicio"></A> est disponible sin color (por contex-
consorcio W3C/WAI estn pensadas 14. Asegrate de que los documentos Pgina de texto explicativo ampliada to o marcadores).
para los desarrolladores de conteni- son claros y simples. <IMG SRC="estadstico.gif" LONG- - Identifica claramente los cambios
do y para los desarrolladores de he- Cada recomendacin incluye uno o DESC="explica_grfico.htm" ALT="Gr- en el idioma original del texto del do-
rramientas. Siguiendo estas reco- dos puntos de verificacin que describen fico estadstico en barras"> cumento y en cualquier texto equivalente

mendaciones, tambin conseguire- cmo aplicar esa pauta a las caracters-
mos que la web sea ms accesible ticas particulares de las pginas web.
por otros dispositivos que navegan en A su vez, cada punto de verificacin I+D en Espaa
Internet (mviles, agendas electrni- tiene asignado un nivel de prioridad:
Aunque en Espaa el I+D no se
Todos los que nos dedicamos a la prodiga mucho, podemos jactarnos
de que la tecnologa es digna de
Sociedad de la Informacin debemos mencin. Podemos encontrar
poner nuestro granito de arena. muchas empresas que apuestan
por una sociedad igualitaria
mediante sus inventos.
cas, exploradores convencionales, Prioridad 1. Puntos de verificacin El ejemplo que exponemos es la
WebTV, etc.) o por situaciones que que el desarrollador tiene que satisfa- firma Irdata, que dispone de varias
dificulten condiciones de acceso nor- cer. De lo contrario, algunas personas soluciones para resolver el trabajo
mal (centros de operacin poco ilu- sern incapaces de acceder a la infor- en el ordenador para personas con Integracin de personas con dis-
capacidades cognitivas y de len-
minados, entornos con mucho ruido, macin. problemas motrices. Hardware para
guaje, www.atzegieskuetara.org.
etc.). Prioridad 2. El desarrollador debe acceder al ordenador mediante los
Hay un error que no hay que cometer: satisfacerla; si no, habr personas que movimientos de cabeza, software problemas motrices, etc.
hacer una web accesible, no implica encontrarn muchas dificultades para que sustituye los clicks del ratn a En cuanto al software, hay muchas
que no sea atractiva. acceder a la informacin. travs de una imagen, software de pginas adaptadas, pero en con-
Existen catorce recomendaciones que Prioridad 3. El desarrollador puede rehabilitacin para personas con creto la del proyecto Atzegi, patro-
se aconseja seguir: satisfacerla, de lo contrario algunas cinado por la Diputacin de
Guipzcoa y de la Caja Kutxa, es
1. Ofrece alternativas equivalentes personas hallarn dificultades para ac-
un buen ejemplo de una web dise-
para el contenido visual y sonoro. ceder a la informacin. ada para personas con una disca-
2. No te bases slo en el color. Para facilitar la referencia por otras pacidad intelectual.
3. Utiliza marcadores y hojas de es- organizaciones, la especificacin tiene Otro proyecto denominado NI4,
tilo de forma apropiada. tres niveles de adecuacin y son: surge con la finalidad de facilitar a
4. Identifica el idioma empleado. Nivel A: incluye los puntos de verifica- las personas con discapacidad inte-
5. Crea tablas que se transformen cin de la prioridad 1. lectual el acceso a las nuevas tec-
correctamente. Nivel doble A: incluye las prioridades nologas y al uso de Internet. Para
6. Asegrate de que las pginas que in- 1 y 2. Muchos colectivos necesitan for- obtener ms informacin, visita la
corporen nuevas tecnologas se trans- Nivel triple A: incluye las prioridades mar parte de la internetizacin. pgina www.ni4.org.
formen correctamente. 1, 2 y 3.
N 91 55
91_52_57_Curso 5/4/04 16:28 Pgina 8
Curso
right"> Se comprenden mejor los problemas

</FRAMESET> de la pgina, ya que se acta directa-
Applets y scripts: mente con el diseo.
- Asegrate de que las pginas siguen Permite comparar distintas soluciones
siendo utilizables cuando se desconec- mediante pruebas reales.
ten o no se admitan los scripts, applets u Es la nica forma en la que podemos
otros objetos de programacin. Si esto revisar las adecuaciones de textos al-
Este es el resultado del cdigo descrito con cabeceras de tabla. no es posible, proporciona informacin ternativos, ttulos de marcos, informa-
(leyendas). Los cdigos de representa- </TH> equivalente en una pgina alternativa accin de los grficos, etc.
cin de los idiomas se encuentran en </TR> cesible. Pero tambin tiene sus problemas:
www.oasis-open.org/cover/iso 639a.html. <TR> Multimedia: Es un proceso costoso y requiere
Uso del elemento langMadre, pregunta <TH>Cabecera de fila 1</TH> - Hasta que las aplicaciones de usua- tiempo.
que a dnde va. Est diciendo,<SPAN <TD>C1F1</TD> rio puedan leer automticamente el Para las pruebas hay que disponer de
lang="fr"> "Allons, Madame plaisan- <TD>C1F2</TD> texto equivalente de la banda visual, los distintos navegadores y sus confi-
te!"</SPAN> </TR> proporciona una descripcin sonora guraciones.
- Organiza el documento de forma que <TR> de la informacin importante de una Exige el juicio personal del revisor,
pueda leerse sin hojas de estilo. Es <TH>Cabecera de fila 2</TH> presentacin multimedia. Los tres for- que implica falta de objetividad en al-
decir, si un documento HTML se inter- <TD>C2F1</TD> matos o lenguajes que admiten una gunos aspectos.
preta sin hoja de estilo asociada, tiene <TD>C2F2</TD> pista de audio descriptiva son: Quickti- Las pruebas emulando ciertas caracte-
que ser posible leerlo. rsticas pueden ser difciles de realizar
- Asegrate de que los equivalentes de si no se dispone de hardware especia-
un contenido dinmico se actualicen
cuando cambia.
No son tantas normas que permiten lizado o si la formacin del equipo de
revisin no es la adecuada.
- Hasta que las aplicaciones de usuario que una web sea accesible, Dentro de la pgina web
permitan controlarlo, evita provocar www.sidar.org/recur/aplica/index.php po-
parpadeo en la pantalla.
ponlas en prctica. demos encontrar toda una serie de re-
- Utiliza el lenguaje apropiado ms cursos dedicados a la accesibilidad:
claro y simple para el contenido de </TR> me de Apple, SMIL de W3C y SAMI de aplicaciones para usuarios de la Red,
una pgina web. </TABLE> Microsoft (ms informacin en diseadores y desarrolladores, para
Imagen y mapas de imagen: traductores, etc.
w w w. w 3 . o r g / WA I / w c a g - c u r r i c /
- Proporciona vnculos de texto re- - Para las tablas de datos que tienen mmsoftwr.htm). Por citar algn ejemplo de herramien-
dundantes con cada zona activa de un dos o ms niveles lgicos de cabeceras - Para toda presentacin multime- ta manual tenemos a Hera, diseada y
mapa de imagen del servidor. de fila o columna, utiliza marcadores dia dependiente del tiempo
- Proporciona mapas de imagen para asociar las celdas de encabeza- (pelcula o animacin), sin-
controlados por el cliente en lugar miento y las celdas de datos. croniza alternativas equiva-
de por el servidor, excepto donde las zo- Marcos (frames): lentes (subttulos o descrip-
nas sensibles no puedan definirse con - Titula cada marco para facilitar ciones) con la presentacin.
una forma geomtrica. la identificacin y navegacin de los Si no hay alternativas:
Tablas: mismos. - Si finalmente no puedes
Herramienta de creacin de hojas de estilo Edipo,
- En las tablas de datos, identifica las <FRAMESET ROWS="20%,*,30%"> crear una pgina accesible, www.sidar.org/edipo/selector.php.
cabeceras de fila y columna: <FRAME SRC="f1.htm" title="Mar- ser necesario proporcio-
co de ttulo y barra principal de na- nar un vnculo a otra pgina al- desarrollada por Carlos Benavdez en
<TABLE border=1> vegacin"> ternativa que use tecnologas W3C, colaboracin con Emmanuelle Guti-
<CAPTION>Ejemplo de una tabla <FRAMESET COLS="20%,*,"> sea accesible, tenga informacin rrez y Restrepo, especialmente para la
de datos sencilla que identifica ca- <FRAME SRC="f2.htm" title="Mar- equivalente (o funcional) y se actuali- Fundacin Sidar. El nombre de la he-
beceras y filas.</CAPTION> co con la tabla de contenidos "> ce tan a menudo como la pgina (ori- rramienta viene como consecuencia del
<TR> <FRAME SRC="f3.htm" title="Mar- ginal) inaccesible. lanzamiento de Edipo (Editor Personal
<TD></TD> co con la vista de contenidos"> de Opciones de estilo), para la creacin
<TH>Cabecera de columna 1 </FRAMESET> Evaluar la accesibilidad de hojas de estilo personales. La utilidad
</TH> <FRAME SRC="f4.htm" title="Marco La mejor forma de verificar la ac- consta de una pgina con opciones y
<TH>Cabecera de columna 2 secundario de navegacin y copy- cesibilidad de una pgina web es si- otra con el resultado visual de las mis-
mular como lo hara un discapacita- mas. Una vez elegidas las opciones y po-
do. Podemos utilizar navegadores al- sibilidades de nuestra hoja de estilo, se
ternativos o programas que simulen puede ver el cdigo, copiarlo y pegarlo
su funcionamiento. en cualquier editor de texto, o descar-
Generalmente se utilizan herra- garlo como un fichero. Era necesaria la
mientas de verificacin automti- existencia de una utilidad hermana
ca, aunque el resultado positivo de las basada en la aplicacin de hojas de esti-
comprobaciones no implica que una lo para facilitar la revisin de la accesibi-
web sea accesible. Dentro de la web lidad de un sitio web. El nombre mitol-
www.tawdis.net hay diversas herramien- gico es un acrnimo de Hojas de Esti-
tas de verificacin online. lo para la Revisin de la Accesibili-
Mediante la revisin automtica obte- dad. Hera localiza los errores de las
nemos un funcionamiento rpido y siste- pginas aplicando unas hojas de estilo
mtico (son los verificadores online). creadas para ello e indica qu es lo
Proporcionan un anlisis global de la que hay que revisar con respecto a
pgina, pero la interpretacin de los re- unos puntos de control.
sultados es compleja y exige conocer los La ventaja de utilizar las hojas de es-
principios bsicos de accesibilidad. tilo es que facilita la revisin de la ac-
TAW es una herramienta de verificacin online de accesibilidad en castella- Si optamos por una revisin manual, cesibilidad y usabilidad de una web du-
no. Lo puedes encontrar en www.tawdis.net. veremos ventajas sobre la automtica: rante su desarrollo.
56 www.pctoday.es
91_52_57_Curso 5/4/04 16:28 Pgina 9
Diseo web. Parte 5
Hay una particularidad para el uso efi-

caz de Hera: se aconseja el uso del na- Polticas de accesibilidad
vegador Opera (www.opera.com), ya que
es el nico que interpreta adecuadamen-
te algunas propiedades de la especifi- Partimos de la base que para reducir normas de accesibilidad. dad a Internet mediante cinco reas
cacin CSS. De cualquier manera, siem- las barreras se requiere de la parti- En 1998, la Seccin 508 de la de trabajo esenciales: tecnologa,
pre hay una serie de principios e ins- cipacin de los afectados y de los Rehabilitation Act Amendments directrices, herramientas, formacin y
trucciones para configurar cualquier na- organismos gubernamentales. Las requiere que todas las agencias fede- difusin, e investigacin y desarrollo.
administraciones tienen la obligacin rales de Estados Unidos obliguen y La Seccin 508 es una extensin y/o
vegador para usarlas correctamente.
de fomentar la accesibilidad universal aseguren que las tecnologas de la modificacin de las Directrices de
En la Fundacin Sidar se dan las cla- para asegurar la igualdad de condicio- informacin empleadas sean accesi- Accesibilidad del W3C, por lo tanto las
ves para parametrizar los navegadores nes en el acceso a la diferencias son mnimas.
ms utilizados: Internet Explorer, informacin para todos En cuanto a la Unin
los ciudadanos (artculo Europea, el plan de accin
20 de la Constitucin e-Europe 2005 (comenz en
Espaola). 2002) incluye entre sus pla-
Sin embargo en los pa- nes de accin el e-
ses desarrollados, la Accessibility, cuyo fin es
poltica gubernamental conseguir que todos los ciu-
se ha orientado hacia la dadanos disfruten de la
desregulacin de las Sociedad de la Informacin.
telecomunicaciones con Entre sus objetivos se
el objetivo de incremen- encuentran polticas de
tar la competencia en la fomento, investigacin e
prestacin de estos ser- La Seccin 508 norteamericana, www.access-board.gov/ innovacin, y normalizacin.
vicios, que a largo plazo sec508/508standards.htm, establece una serie de estndares. Por el momento son de
habr incrementado la carcter no legislativo, aun-
disponibilidad de los servicios y redu- bles para personas con discapacidad, que no se descarta en un futuro. Esto
cido su coste. sugiriendo la forma de conseguirlo. quiere decir que no son unas premi-
En el caso de Estados Unidos, los Tiene gran repercusin, ya que todos sas muy esperanzadoras a da de hoy.
derechos de los discapacitados estn los productos y servicios digitales En lo que respecta a Espaa, a pesar
Bobby permite seleccionar dentro de protegidos por la Americans with adquiridos por la Administracin han de formar parte de los Estados
una gran lista de navegadores y sus
versiones, bobby.watchfire.com/bobby/
Disabilities Act (ADA) de 1990, que de cumplir con estas normas y, por lo Miembros y de tener un presupuesto
html/en/advanced.jsp. prohbe la discriminacin por discapa- tanto, obliga a las empresas provee- dedicado a accesibilidad y alfabetiza-
cidad en los lugares pblicos y obliga doras a seguir estos criterios de acce- cin digital (plan Info XXI -
Nestcape, Mozilla, Opera, Amaya, a la adaptacin de stos para asegu- sibilidad. Desde el 25 de junio de www.ceoe.es/webceoe/ceoe/cesi/p6_1
www.sidar.org/recur/usuar/nav/config. rar su accesibilidad. La aplicacin de 2001, exige que los sitios web mante- .htm), se ha demostrado por estudios
Otra herramienta de revisin de acce- esta ley en Internet se hizo en 1996, nidos por organismos federales y sus de consultoras dedicadas al anlisis
sibilidad que podemos utilizar va online cuando el Departamento de Justicia intranets estn en conformidad con de la accesibilidad que la gran mayo-
es Bobby, bobby.watchfire.com/bobby/ de Estados Unidos dictamin que las normas establecidas. ra de las pginas web de las admi-
html/en/index.jsp, que nos permite elegir cualquier sitio web se considera como El grupo de iniciativa de accesibilidad nistraciones pblicas espaolas no
la revisin a realizar: la Seccin 508 local pblico y debe cumplir ciertas del W3C (WAI) persigue la accesibili- son accesibles.
americana o las recomendaciones de la
WAI. Ya hemos dicho al principio que
prcticamente son similares en las exi- que el sitio web es inaccesible para per- [WAI] Un desarrollador
gencias de diseo. sonas con discapacidades: 122 imgenes de contenidos de pginas
Hemos hecho la prueba de un conoci- que no proporcionan texto alternativo Web tiene que satisfacer
do portal como es Terra y el resultado (Prioridad 1), ms de 164 lneas utilizan este punto de verificacin.
ha sido bastante demostrativo. Slo en la en el cdigo colores para dar informa- De otra forma, uno o ms
grupos de usuarios en-
Es importante recordar contrarn imposible acce-
der a la informacin del
que no siempre la imagen vale ms documento. Satisfaciendo
este punto de verificacin
que mil palabras. es un requerimiento bsi-
co para que algunos gru-
pgina de inicio se producen suficientes cin que no tienen alternativa de texto, pos puedan usar estos do-
incumplimientos de las recomendacio- 23 lneas de cdigo que no especifican cumentos Web . Se han
nes de accesibilidad, como para decir cabeceras para las tablas existentes, y un encontrado 124 proble- El navegador Opera permite visualizar las pginas
largo etctera. mas de tipo automtico y sin imagen, slo con el texto alternativo.
Slo tienes que pro- 248 de tipo manual. [WAI] Problemas accesibilidad
bar los resultados por [WAI] Problemas accesibilidad de tipo 3. Un desarrollador de
ti mismo con la web de tipo 2. Un desarrollador de con- contenidos de pginas Web puede
que ms te guste. tenidos de pginas Web debera sa- satisfacer este punto de verifica-
Mediante la herra- tisfacer este punto de verificacin. cin. De otra forma, uno o ms
mienta Taw (www.taw De otra forma, uno o ms grupos en- grupos de usuarios encontrarn al-
dis.net) de revisin contrarn dificultades en el acceso a guna dificultad para acceder a la
online el resultado de la informacin del documento. Satis- informacin del documento. Satis-
verificacin es ms faciendo este punto de verificacin faciendo este punto de verificacin
sorprendente, ya que eliminar importantes barreras de mejorar la accesibilidad de los do-
encuentra ms fallos acceso a los documentos Web. Se cumentos Web. Se han encontrado
Herramienta de verificacin de accesibilidad a travs de las de accesibilidad que han encontrado 35 problemas de ti- 35 problemas de tipo automtico y
hojas de estilo Hera, www.sidar.org/hera. Bobby: po automtico y 69 de tipo manual. 69 de tipo manual.
N 91 57
92_54_60_Curso 22/4/04 12:15 Pgina 14
Curso
Tecnologas multimedia
La tecnologa ya permite que la imagen y el sonido usados en situaciones imposibles y escenas
espectaculares se trasladen a Internet. El derroche de imaginacin reside ahora en permitir que
cualquier usuario vea esas imgenes y esos sonidos sin necesidad de estar a la ltima en hardware.
L
Gua del curso a mayora de los usuarios de In- msica en tiempo casi real y, si nos
ternet poseemos un equipo ponemos, ver mediante una webcam la
1. Introduccin al diseo web. multimedia con una razonable orquesta que lo interpreta. Habrs o-
Planificar y organizar el sitio. Principales elementos de las pginas web. PC Today n 87 tarjeta de sonido, vdeo y cone- do hablar de la superproduccin de
2. Herramientas para el diseo web. xin a la Red, condiciones indispen- cine El Seor de los Anillos. No
sables para poder disfrutar de la queremos ocupar un artculo hablan-
informacin difundida en la Red. do de la triloga, sino de la capacidad
Los profesionales intentan que sus que pueden proporcionar los medios
pginas web sean cada vez ms so- tecnolgicos. Mientras su director Pe-
Herramientas para el tratamiento de las imgenes y el color. The GIMP. PC Today n 89 fisticadas, llenas de color, de sonido ter Jackson se encontraba en Nueva
4. Usabilidad. y de todo aquello que las hagan atrac- Zelanda, rodando, por las tardes poda
Qu es la usabilidad y por qu se debe tener en cuenta? Qu hacer y no hacer en el diseo web. tivas a sus potenciales clientes. Cada repasar la banda sonora en tiempo real
Cmo saber si una web es usable. PC Today n 90 vez ms se hace necesario (o reco- con su compositor Howard Shore. La
5. Accesibilidad. mendable) que los diseadores dis- particularidad es que el director de or-
Qu se entiende por accesibilidad? Deficiencias y polticas. El diseo inclusivo. pongan tambin de conocimientos questa se encontraba a unos miles de
Consejos para disear una web accesible. Evaluar la accesibilidad. PC Today n 91 acerca del sonido y sus propiedades kilmetros, en Inglaterra y la conexin
6. Tecnologas multimedia en la Red. para adaptarlos a las limitaciones que se realizaba mediante satlite y fi-
Msica y sonido. Imagen animada y pelculas. Integracin multimedia: Macromedia Flash an existen en Internet. bra ptica.
y Action Script. PC Today n 92 Evidentemente, si disponemos de la Para el usuario medio, una conexin
7. Programacin. suficiente capacidad econmica, pode Internet puede realizarse, incluso,
dremos llegar a incluir sistemas que mediante un mdem de 56 Kbps y, por
transmitan desde nuestra pgina web lo tanto, la capacidad es incomparable.
54 www.pctoday.es
92_54_60_Curso 22/4/04 12:16 Pgina 15
Diseo web. Parte 6
Dadas las caractersticas de Inter- ractersticas ocupar menos que el

net, surge la necesidad de estudiar original y lo oiremos igual.
tcnicas que permitan reducir los Compresin de vdeo psicovi-
costes de transmisin o almace- sual: similar al sonido, en este mo-
naje de grficos y sonidos sin pr- delo se descartan los datos que los
dida de calidad. El primer proceso ojos no necesitan. Si en una pelcu-
que se requiere, es la conversin a la aparece un coche aparcado du-
formato digital. Con el audio tenemos rante un minuto, el coche se repite
otra posibilidad: que viajen los datos en la misma posicin en cada foto-
como un archivo de comandos y que grama. Con la compresin de vdeo
la tarjeta de sonido de nuestro cliente psicovisual, los datos del coche de
los interprete. un fotograma se almacenan y se
Por si queda alguna duda, la repre- vuelven a utilizar en los fotogramas
sentacin analgica del sonido se siguientes (redundancia de datos
produce como consecuencia de las estadsticos). Es uno de los trucos En el Panel de control>Dispositivos de sonido>Hardware, seleccionamos Co-
variaciones de la seal elctrica matemticos que utilizan WMV, decs de audio para poder ver los codecs que se encuentran instalados.
del reproductor. El caso ms repre- MPEG y otros formatos.
sentativo es el disco de vinilo, cuyos Compresin sin prdida de da- vdeo una y otra vez sin perder cali- Compresin con prdida: este tipo
surcos hacen que se desplace una agu- tos: esta tcnica conserva el 100 dad, la compresin slo concentra de tcnicas desecha datos para obte-
ja; estas vibraciones se convierten en por 100 de los datos, es decir, si los datos en menos espacio. Slo ner una cantidad de bits inferior. La
una seal elctrica que oscila en ten- compresin psicoacstica y la psicovi-
sin. Esta oscilacin es la que trans- sual son tecnologas con prdidas que
El xito de algunas pginas web consiguen archivos ms pequeos, pe-
reside en la riqueza de los grficos y ro con menos datos que los archivos
originales. Cada vez que se guarda un
sonidos que muestran a los usuarios. archivo de esta forma, se desechan
ms datos, aunque sea con el mismo
aplicamos el algoritmo de descom- puede comprimir los datos hasta formato. Como regla, se debe utilizar
presin el archivo ser exactamente que no le quede ms remedio que un formato con prdidas slo como

idntico al original. Puede guardar desechar informacin. paso final del trabajo que se realiza.
Conceptos bsicos de sonido

Para poder comprender Intensidad: es una mag-
Una representacin muy bsica de
lo que sera una conversin de siste-
ciertas tcnicas de sonido nitud directamente rela-
ma analgico a digital. empleadas en Internet, es cionada con nuestro odo
necesario conocer algunos y se define como la
forma el amplificador de nuestro equi- conceptos de acstica. energa de la onda sono-
po en sonido a travs de los altavoces. El sonido se produce cuan- ra por unidad de superfi-
En el apartado digital, el sonido se do una fuente sonora (por cie: se mide en decibe-
representa por una cuantizacin y el ejemplo, la cuerda de un lios (dB). Esta es la
muestreo de una seal analgica (en piano) vibra. Esta vibracin caracterstica que nos
los conversores analgico/digitales) produce un movimiento de hace determinar un soni-
en cifras que dividen la seal en fun- vaivn que obliga a las do dbil o uno fuerte.
cin del tiempo y la resolucin. Un CD molculas del aire a mover- Nuestro odo abarca,
lleva directamente grabados estos da- se de la misma manera. segn estudios estadsti-
tos, por lo que simplemente se necesi- Como consecuencia, se cos, de 0 a 130 dB.
ta un reproductor que convierta esa producen unas zonas de Herramienta para analizar todos los elementos que for- Podemos establecer una
seal digital en oscilaciones de ten- compresin y de depresin man un sonido, www.iua.upf.es/mtg/clam. lista, segn la intensidad de
sin, para que a travs de los altavoces que a su vez empujan a la fuente sonora:
salga sonido (el mismo proceso de un otras molculas contiguas y as suce- Perodo: es el tiempo que transcurre 120 Umbral del dolor.
conversor digital/analgico). sivamente. Es similar al efecto que en un ciclo, y se expresa en segundos 90 Martillo neumtico.
Todos los inventores de nuevos for- se genera cuando se tira una piedra o milisegundos (1.000 ms = 1 s). 75 Fbrica ruidosa.
matos ofrecen cdecs (codificadores- en un estanque, con la diferencia de Frecuencia: es el nmero de veces 70 Calle con mucho trfico.
decodificadores) que permiten a nues- que las ondas son esfricas. que se repite un ciclo por segundo, 65 Conversacin a un metro.
tros reproductores interpretar los ar- La propagacin del sonido se realiza y se expresa en herzios (Hz) o 40 Radio ligeramente alta.
chivos de audio codificados. Otros su- a una velocidad constante cercana a ciclos por segundo. Un odo normal 30 Casa en el campo.
ministran una utilidad propietaria que los 340 metros por segundo y en puede percibir un rango entre 20 y 15 Susurro.
se encarga de reproducirlos. lnea recta. Si encuentran obstculos 20.000 Hz, disminuyendo hasta 0 Umbral de audicin.
Hay muchos mtodos y estrategias en su camino, unas ondas se absor- 16.000 con el paso de los aos y El perodo es inverso a la frecuencia. Por
para comprimir los archivos multi- ben y otras se reflejan, llegando al por el maltrato acstico. ejemplo,un sonido de 0,004 segundos
media hasta un tamao prctico. Los oyente mezcladas. Cuando escuchamos sonidos gra- de duracin, hay que repetirlo 250
ms comunes: La vibracin ms simple tiene forma ves o agudos es lo que se denomi- veces para completar 1s, es decir, su
Compresin de sonido psicoa- senoidal y, como consecuencia, produ- na altura tonal. frecuencia es de 250 Hz.
cstica: todas las formas de sonido ce un sonido puro. Cuando se repite Amplitud: es la variacin de la pre- Trasladando esta teora a la msica, la
comprimido utilizan algoritmos pa- esa onda, se denomina peridica y sin, positiva o negativa, de la onda nota la utilizada para afinar instru-
ra desechar la informacin sonora cada repeticin, ciclo. sonora. Est relacionada con nuestra mentos musicales tiene una frecuencia
que el cerebro ignora. A efectos Los elementos que la forman son: sensacin dinmica del sonido. de 440 Hz.
prcticos, un archivo de estas ca-
N 92 55
92_54_60_Curso 22/4/04 12:16 Pgina 16
Curso
cin de 16 bits. Si quieres digitali- cada seccin de transmisin. Para

zar 3 minutos de msica a un cada muestra se utilizan 8 bits de re-
muestreo de 44,1 KHz y a 16 bits de solucin a una velocidad de 64 Kb/s,
resolucin, ocupar 3min x 60 teniendo en cuenta una frecuencia
s/min x 44.100 muestras/s x 2 by- de muestreo de 8 KHz.
tes/muestra (estreo)= 15.876.000 ADPCM (Adaptative Diferencial
bytes (unos 16 Mb). PCM): posterior al anterior, permite
AIFF (Audio Interface File For- codificar canales telefnicos con ve-
mat). Este formato introducido por locidades de 16, 24 y 32 Kb/s; apli-
las empresas Apple y Sun Microsys- cados como enlace entre satlites.
tems tiene una versin comprimida
denominada AIFC. Ambos tipos Compresin de
pueden contener informacin MIDI audio sin prdida
de hasta 6 canales. Para los que Son los formatos de audio denomina-
tengan ordenadores Mac de Apple, dos lossless, que reducen los tama-
el software gratuito que genera este os de los archivos y permiten que la
formato est disponible en la web decodificacin sea idntica al original.
sun.rediris.es/software/mac/soun/ Al ser formatos especficos de audio, su
soundutil/sampleeditor1.03.cpt.hqx.gz. compresin es ms efectiva que la utili-
(Sample Editor). zada en los compresores de tipo ZIP.
Dentro del cdigo abierto tenemos Audacity, audacity.sourceforge.net, software de
edicin de Wav y otros formatos.
16 bits de resolucin estreo ocu- El derroche de imaginacin ya no est

Audio no comprimido pan 775 Kb. El mismo archivo a 22 tan reido con el coste y prestaciones
RIFF, ms conocido como WAV KHz, 8 bits y en mono ocupan 140
(WAVE, Waveform Audio). Es el Kb (calidad radio FM). Al aplicar de nuestra conexin a la Red.
formato desarrollado por Microsoft cdecs podemos reducirlo aun
y empleado de forma generalizada ms, pero el resultado va perdien- PCM (Pulse Code Modulation): Cada formato tiene sus algoritmos
en su sistema operativo Windows, do calidad. La resolucin hace re- formato de audio creado para telefo- de trabajo para conseguir esa com-
de ah su amplia difusin. En los ferencia a la exactitud de las medi- na y patentado por A.Reeves en presin. Aqu exponemos la lista de
programas de codificacin se puedas de frecuencia, y se mide en 1939. K.Cattermole en 1962 propuso los formatos ms conocidos y los si-
de definir la frecuencia de mues- bits. Si la resolucin es de 8 bits, la ley A de codificacin para PCM. Su tios donde se puede obtener informa-
treo (Hz) y el nmero de bits por tenemos 255 niveles posibles aplicacin comercial era integrarlo cin acerca de su funcionamiento.
muestra. Cuanta mayor sea la cali- (2^8=256). Si se ampla a 16 bits, en una red mixta de transmisin di- Explicar los algoritmos de cada uno
dad del sonido, ms grande ser el el rango se extiende a 65.535 gital y centros analgicos de conmu-
archivo. Cuatro segundos en cali- (2^16=65.536). Es decir, un CD se tacin. Requera de conversores ana-
dad Compact Disc (44,1 KHz) con graba a 44,1 KHz. y a una resolu- lgico-digital y digital-analgico en
Extraer pistas de un CD a otros formatos de audio

Vamos a explicar paso por paso ratn podemos marcar/desmarcar las
cmo utilizar una aplicacin gratuita pistas, o con Mays y el ratn selec-
que nos sirva de reproductor y que cionarlas todas (en la opcin prede-
adems nos permita extraer el audio terminada se marcan todas).
de un CD en formato WAV o MP3. El Seleccionamos el tipo de extraccin
reproductor se llama CDex y su ver- con los iconos que se encuentran a la
sin 1.51 est disponible en la web derecha de la interfaz. De arriba
Winamp, www.winamp.com, es un re-
cdexos.sourceforge.net. abajo: CD a formato WAV, CD a forma-
productor gratuito que permite gra-
Despus de instalarlo, la pantalla ini- to comprimido, Extraer un fragmento bar nuestros archivos de sonido.
cial es la tpica de un reproductor de detenernos en Codificador. Aqu de CD, WAV a formato comprimido,
archivos multimedia con sus iconos de podemos determinar el tipo de archi- podra suponer un libro completo.
avance y retroceso de cancin, repro- vo comprimido al que queremos con- APE. Es el nuevo formato de la casa
duccin, pausa, etc. Lo primero que vertir las pistas del CD. La lista es Monkey: www.monkeysaudio.com/
hay que comprobar es que la aplica- bastante amplia y abarca la mayora theory.html.
de los formatos men- FLAC. Free Lossless Audio Codec,
cionados, tanto de forma parte del formato Ogg de do-
compresin con prdi- minio pblico y es similar al MP3:
da como sin prdida. flac.sourceforge.net.
Los iconos de la dere- LA. Lossless Audio: www.lossless-
cha de la interfaz nos Formato comprimido a WAV, Leer audio.com.
permiten realizar con- informacin del CD en una Base de LPAC. Linear Prediction Audio Co-
versiones entre forma- Datos remota (si se consultan los dec, es el predecesor del nuevo for-
tos. Evidentemente, la diversos servidores de Internet pue- mato MPEG4 Audio Lossless Coding
cin aparezca en espaol mediante extraccin al formato comprimido den obtenerse datos del artista, (ALS): www.nue.tu-berlin.de/wer/
Options>Select Language>Spanish. ser sobre el tipo de archivo configu- lbum, etc. del CD) y Configuracin. liebchen/lpac.html.
Mediante F4 accedemos a la confi- rado en F4>Codificador. Y ya est, lo nico que falta es probar MAC. Se trata del antiguo formato de
guracin avanzada. Todas las pesta- Ahora seleccionamos las pistas que distintas configuraciones hasta dar Monkey.
as son importantes, pero vamos a queremos extraer. Con Control y el con la que ms nos agrade. MLP. Meridian Lossless Packaging,
utilizado sobre DVD-A y de tecnologa
56 www.pctoday.es
92_54_60_Curso 22/4/04 12:16 Pgina 17
Diseo web. Parte 6
propietaria, se ha tardado tres aos en lo. Esto implica que el re- ma dentro de lorien.die.upm.es/index-
desarrollar: www.meridian-audio.com/ sultado de la descodifica- e.html de la Universidad Politcni-
welcome.htm. cin ser similar al origi- ca de Madrid.
MPEG4 Audio Lossless Coding nal, nunca idntico. De Adems de los especificados, hay ms
(ALS). www.nue.tu-berlin.de/forschung/ hecho, una seal decodi- tipos de audio que no se utilizan dentro
projekte/lossless/mpeg4als.html. ficada en ciertos anchos de las pginas web, an teniendo gran
RKAU. El formato RK Audio, que de banda de ecualizacin repercusin como formatos de inter-
no es gratuito: www.msoftware.co.nz/ sonar con ruido. cambio. Todos funcionan mediante una
index.php. Los ms conocidos y serie de canales de informacin que in-
SHN. Shorten, formato pensado para por orden alfabtico son: corporan muestras de sonido, instru-
la compresin de archivos de sonido AAC. Advanced Audio mentos, patrones y listas de reproduc-
digital DAT: www.etree.org. Coding, desde su finali- cin. Para componer melodas sobre
SZIP. String Sort ZIP, no se pens zacin en 1997 es el ellos es necesario utilizar cdigos de
originalmente para sonido pero por estndar para MPEG2 y nota musical, duracin, etc. y se crean
sus excelentes resultados a nivel de MPEG4: www.iis.fraun Los desarrolladores de codecs ofrecen kits de desarro-
llo para profundizar en sus formatos dentro del MSDN.
as verdaderas obras sin pentagrama.
compresin se ha adaptado: hofer.de/amm/ En www.madtracker.org encontraremos
www.compressconsult.com/szip. techinf/aac/index.html. MP2. MPEG-1 Layer II: www.tnt.uni mucha informacin sobre estos compo-
WavPack.Wave Packer es un com- AAC+ o aacPlus. MPEG-4 AAC -hannover.de/project/mpeg/audio. sitores basados en muestras de sonido.
presor de archivos de tipo WAV: combinado con Spectral Band MP3. MPEG-1/2 Layer III, el ms co- MIDI es uno de los protocolos ms
www.wavpack.com. Replication (SBR). Utilizado en re- nocido de los formatos dentro del in- utilizados y conocidos por los msi-
WMA. La versin 9 permite una co- produccin de audio calidad CD con tercambio de msica en Internet: cos profesionales. Desde 1983 ms
dificacin sin prdida. WMA perte- un ratio de bits de 64Kb (un MP3 de www.tnt.uni-hannover.de/project/mpeg/ de 300 compaas han adaptado este
neca al grupo de formatos con pr- la misma calidad necesita un ratio audio.
dida. Para obtener informacin tc- de 128 Kb): www.codingtechnologies. MP3Pro. MPEG-1 Layer
nica debemos acudir a la pgina com/products/aacPlus.htm. III combinado con Spec-
www.ebu.ch/en/index.php. AC-2. Versin 2 del Audio Coding tral Band Replication:
La mayora de los formatos tienen de los laboratorios Dolby: www.codingtechnologies.
plug-ins o complementos para uno de www.dolby.com/tech/highqual.html. com/products/mp3pro.htm.
MP4. MPEG-4 AAC, refi-
rindonos al audiosound.
Encontrar buen software gratuito para media.mit.edu/ mpeg4.
desarrollar tecnologas Flash es, MPC. Musepack, deno-
minado formalmente
todava, bastante complicado. MP+ o MPEGplus:
www.heibrink.nl/mpcworld.
los reproductores ms conocido, gra- AC-3. Versin 3 del Audio Coding de Ogg Vorbis. Formato de
tuito y que permite utilizar mltiples Dolby, ms conocido como AC3: audio sin patente comer-
formatos de audio: Winamp 5.03, www.dolby.com/tech/ac-3mult.html. cial: www.vorbis.com. Hay software profesional para el tratamiento de la
www.winamp.com. ATRAC. Adaptive Transform Acoustic RA. Formato RealAudio: seal de audio y para trabajar directamente con
instrumentos MIDI virtuales.
Para poder seleccionar el compre- Coding, utilizado por Sony en sus www.realnetworks.com/
sor/decompresor ms adecuado a grabadores de Minidisc (MD): products/codecs/realaudio.html. protocolo en sus instrumentos elec-
nuestras necesidades, gustos y bolsi- www.sony.net/Products/ATRAC3. SDDS. Sony Dynamic Digital Sound: trnicos. Bsicamente funciona me-
llo, en la web flac.sourceforge.net/ DTS. Digital Theatre System de la www.sdds.com. diante mensajes con instrucciones
comparison.html podemos ver una bue- compaa Digital Theater Systems VQF. Tambin conocido como concretas que el instrumento inter-
na comparativa. Inc: www.dtsonline.com/technology/ TwinVQ (Transform-domain Weigh- preta. Al contrario que el resto de
technical_literature.php. ted Interleave Vector Quantization): formatos, slo transporta mensajes.
Compresin de ECM. Compresin de sonido en for- www.vqf.com. El smil es el funcionamiento entre
sonido con prdida mato ECAM, desarrollado por So- impresora y ordenador. Este manda
Denominados lossy, son los forma- lidyne en los aos 80: www.caper.org/ mensajes con instrucciones que la
tos de audio que por sus algoritmos y empresas/solidyne.htm. impresora interpreta para poder plas-
codificacin alteran el contenido del MP1. MPEG-1 Layer I: www.tnt.uni- mar en un papel lo que deseamos.
archivo de sonido para poder reducir- hannover.de/project/mpeg/audio. En un equipo MIDI los instrumen-
tos estn interconectados entre s me-
diante un cableado especfico para
transportar el protocolo. Dentro de es-
te conjunto hay un maestro que lleva
el control sobre el resto de esclavos.
lorien.die.upm.es contiene informa- Normalmente es una caja de ritmos o
cin sobre formatos dedicados a la un secuenciador (o un PC dotado con
voz humana y su reconocimiento.
una tarjeta que admite el protocolo y
WMA. Formato Windows Media Au- hace las veces de secuenciador).
dio de Microsoft: www.ebu.ch/ Los conectores MIDI son de tres ti-
trev_293-ribas.pdf (requiere Adobe pos: In, Out y Thru, y podemos ver
Acrobat para ver el documento). combinaciones de ellos en multitud de
Tambin en www.microsoft.com/win aparatos dedicados al sonido:
dows/windowsmedia/9series/codecs/ IN: el instrumento recibe la informa-
audio.aspx. cin por este conector.
Existen otros formatos especializa- OUT: es por donde un instrumento
dos en la estructura de audio para enva la informacin.
El trabajo que se realiza para las aplicaciones sin nimo de lucro sobrepasa mu- tratar la voz humana. Variantes del THRU: es un puente, los datos sim-
PCM, podemos profundizar en este te- plemente pasan y no son procesa-

chas veces a los profesionales flac.sourceforge.net/ comparison.html.
N 92 57
92_54_60_Curso 22/4/04 12:16 Pgina 8
Curso
Comandos HTML relacionados con el sonido (tabla 1) Podemos crear nuestro

pequeo estudio
Parmetro Valores Descripcin MIDI gracias a
Src fuente de sonido archivo que se va a reproducir innovaciones
hardware
Hidden true/false ocultar/no ocultar la consola como stas
Controls CONSOLE/SMALLCONSOLE/ consola grande/consola pequea/ de www.prod
PLAYBUTTON botn de play nicamente keys.com.
Width nmero de pxeles anchura reservada para la consola
Height nmero de pxeles altura para la consola Este sera el cdi-
Loop true/false/nmero repeticin indefinida/al menos go para poner un
una vez/nmero de veces sonido de fondo (slo
Volume valor de 1 a 100 volumen de reproduccin Internet Explorer):
Autostart true/false con/sin autoarranque vdeo ms conocidos y que permiten
Starttime formato MM:SS inicio de reproduccin en < b g s o u n d hacer streaming, una tcnica de dis-
minutos/segundos src="ruta_archivo" loop="l" ba- tribucin de vdeo en Internet que
Endtime formato MM:SS fin de reproduccin lance="0" volume="0">Este suena permite la transmisin en directo del
una vez</bgsound> Ver tabla 2 contenido sin necesidad de descar-
dos por el instrumento. Por decirlo Si es la primera vez que oyes hablar garlo completamente para su visuali-
de alguna manera, es como un mlti- de secuenciadores, cajas de ritmo, Imagen animada zacin. Conforme llegan los datos se
ple en el que se enchufan varios apa-sintetizadores, etc., te recomendamos Posiblemente, sea la parte ms im- va presentando en pantalla. Para ello,
ratos a la electricidad. que visites la pgina web www.midi.org portante de una web. Acostumbrados a dispone de un servidor especial que
Hay que dejarlo muy claro, con MIDI y algunos enlaces de las compaas las imgenes estticas, la visualizacin se encarga de transmitir los datos del
slo viajan datos, no sonido. El ins- que aparecen. de grficos en movimiento es quiz lo vdeo de modo secuencial, mientras
trumento se encarga de interpretar Despus de toda esta parafernalia te que ms nos engancha. que en la parte cliente un plug-in es-
preguntars qu pinta todo esto como
esos datos y el resultado sigue saliendo Dentro de los grficos animados pecial o el reproductor se encarga de
por sus conectores estreo normales. formato de audio en la Red. Pues que nos podemos encontrar, los ms ir recomponiendo los datos y visuali-
En resumen, puedes distribuir la in- bien, un formato MIDI necesita que tu conocidos son los GIF. Formato crea- zar el vdeo en pantalla.
formacin mediante 16 canales (del 0 PC incluya una tarjeta especializada o do y patentado por Compuserve, utili- AVI. Audio Vdeo Interleave (Audio
al 15), hacer que un instrumento de sonido que interprete este proto- za un sistema de compresin sin pr- y Vdeo Intercalado) es un formato
interprete los datos que van por uno colo. Si eres un sibarita, puedes co- dida con 8 bits de informacin por desarrollado por Microsoft. En este
o varios canales y ordenarle, median- nectar un mdulo sintetizador a tu cada pxel y admite un mximo de 256 tipo de archivos los datos de audio
te esos mensajes, que reproduzca tal tarjeta de audio/MIDI para que sea el
nota, con tal duracin, aadirle
reverberacin, etc.
intrprete de los mensajes. Enviar por
Internet cinco minutos de una tocata
Internet es una escuela inmensa y hay
de Bach puede supo- miles de recursos de todo tipo para
ner 4 Kb de datos,
menos que cualquier ampliar todo lo aprendido.
grfico JPEG que
puedas encontrar por colores por imagen. Hay dos varian- y vdeo se almacenan consecutiva-
la Red. tes, GIF87 y GIF89a. La primera no mente en capas, es decir, un seg-
Cmo podemos re- permite animacin, fondos transpa- mento de datos de vdeo va seguido
ferenciar cualquier rentes ni formato entrelazado (carga inmediatamente por otro de audio.
formato de archivo la imagen en varias fases). La segunda No se necesita ningn cdec para
Los conectores IN, OUT y THRU son habituales en
de sonido en nues- ocupa un poco ms, pero su carga
cualquier instrumento que admita MIDI. tras pginas web? progresiva permite detener la ejecu-
Bajo este primer cin de la pgina cuando no nos inte-
Parece limitado, pero hay multiple- ejemplo, vamos a dar los valores posi- resa el contenido.
xores que permiten controlar ms de bles de cada parmetro: El GIF animado es un archivo de ima-
1.000 canales. Adems, hoy en da los gen nico e internamente se compone
instrumentos musicales electrnicos <EMBED src="tocataRE.mid" de una secuencia de imgenes estticas
permiten interpretar hasta 64 notas de hidden=false controls=CONSO- que se reproducen consecutivamente.
polifona. Puedes montar una verdade- LE width=192 height=70 El sistema es similar al de los dibu-
ra orquesta con pocos instrumentos. loop=TRUE volume=50 autos- jos animados tradicionales.
En los conciertos, para sincronizar tart=FALSE> Ver tabla 1 Para crear un GIF animado, tienes
luces, efectos y dems elementos, se que crear la serie completa de imge-
emplea un PC o Mac que hace de maes- Podemos repetir el cdigo como tan- nes (con un editor de imgenes) y as
tro de ceremonia. Lo que va a suceder tos reproductores queramos a la vez. poder componer la secuencia y,
en el escenario est perfectamente or- Como un enlace: posteriormente, unirlas con un
ganizado, premeditado y guardado en editor de GIF.
el disco duro. <a href="archivos/UnaCan- Dentro de los formatos de vdeo
MIDI incorpora un sistema de cin.mp3" target="_blank">Has- tambin encontramos tecnologas que Una herramienta gratuita para crear
GIF animados de Microsoft,
control de tiempo a travs del reloj ta que no pulse el enlace no so- tratan de reducir el tamao de los ar- www.jhepple.com/gif_animator.htm.
interno que cumple unas normas de nor.</a> chivos. Exponemos los formatos de
cuantizacin internacionales, y per- visualizarlo, pero al no estar com-
mite una sincronizacin, bastante Comandos HTML relacionados con el sonido (tabla 2) primido se necesita bastante espa-
limitada, de vdeo y sonido. cio de almacenamiento. Alcanza re-
No es un protocolo pasivo, es decir, Parmetro Valores Descripcin soluciones de 320x240 pxeles y 30
si tienes nociones de msica y tienes Src ruta archivo de audio para reproducir (incluso URL) fotogramas por segundo. Llevan la
algn teclado MIDI, al ejecutar una Loop nmero veces que se va a repetir el audio extensin .avi, y se visualizan direc-
pieza puede transmitir rdenes a otro Balance valor entre -10.000 y 10.000 0 sera un sonido centrado en ambos altavoces tamente sobre Windows con el re-
perifrico conectado. Volume valor entre -10.000 y 0 0 es el valor mximo productor Windows Media Pla-
58 www.pctoday.es
92_54_60_Curso 22/4/04 12:16 Pgina 9
Diseo web. Parte 6
Comandos HTML relacionados con archivos GIF animados (tabla 3) Netscape no acepta este modelo, por Para los ficheros de tipo MOV, proce-
lo que slo aparecer el GIF animado dentes del formato QuickTime, todos los
Parmetro Valores Descripcin en lugar del vdeo. navegadores necesitan un plug-in que se
Src ruta imagen GIF animado que saldr en la ventana puede instalar de manera automtica.
de reproduccin. <embed src="ejemplos/ Ver tabla 4
Dynsrc ruta del vdeo localizacin del archivo (incluso una URL completa). mov1.mov" type="video/quickti-
Loop nmero/INFINITE nmero de veces que se debe visualizar y me" autostart="True" <object width="110"
por defecto es 1. width="320" height="240"> h e i g h t = " 8 2 "
Start fileopen/mouseover cundo se reproduce el vdeo: al abrir la pgina classid="CLSID:22D6F312-B0F6-
o al pasar con el ratn sobre l. Esta etiqueta la introdujo Netscape 11D0-94AB-0080C74C7E95" code-
Controls CONSOLE/SMALLCONSOLE/ consola grande/consola pequea/botn a pesar de que en la prctica no fun- base="http://activex.microsoft.com
PLAYBUTTON Play nicamente.
Loopdelay nmero milisegundos entre una y otra reproduccin
de vdeo.
Width nmero de pxeles anchura reservada para la consola.
Height nmero de pxeles altura para la consola.
yer: www.microsoft.com/windows/ 1,5 Mb/s y una resolucin de

windowsmedia/intl/download/default.asp 352x240 pxeles.
?DispLang=es. MPEG2 es un estndar para transmi-
MOV. Formato desarrollado por siones de vdeo de alta calidad a panta-
Apple (inicialmente para el entorno lla completa, que utiliza entre 3 y 10
Macintosh), requiere tener el re- Mb/s para resoluciones que oscilan en-
productor QuickTime. Los archi- tre 352x480 y 1.920x1.080 pxeles.
vos de este formato son de menor MPEG4 es un estndar para vdeo-te-
tamao que los AVI y permiten in- lefona sobre entornos GSM.
cluir interaccin. El ratio alcanzado MPEG utiliza la codificacin de im-
de resolucin y reproduccin es el genes en formato JPEG. Posteriormen-
mismo que el AVI. Las extensiones te, aplica simplificaciones usando com- Juzga por ti mismo, un excelente sitio web relacionado con documentacin
asociadas son .qt o .mov. Para des- presin de vdeo psicovisual. En cuanto tcnica sobre cdecs de audio y vdeo es www.elisoft.net.
cargar el reproductor QuickTime: al audio, utiliza las mismas frecuencias
www.apple.com/es/quicktime/download. de muestreo que los CD o los DAT ciona bien en sus navegadores. Al in- /activex/controls/mplayer/en/nsmp
MPEG. Creado por Moving Pictures (44,1 KHz, 48 KHz, 32 KHz, todas con tentar ver un vdeo con esta etiqueta 2inf.cab#Version=6,4,7,1112"
Expert Group (empleados de Sony y una resolucin de 16 bits). suele salir el tpico mensaje de nece- standby="Cargando fichero..." ty-
Apple unidos desde 1988). A travs La calidad obtenida con MPEG es la sidad de instalacin de un plug-in es- pe="application/x-oleobject">
de la ISO crean un formato de vdeo que se utiliza en los DVD. Los archi- pecial. Tras descargar e instalar el <param name="filename" va-
estndar para comprimir ficheros lue="ejemplos/lavida.avi">
audio/vdeo en formato digital. El Siempre hay algn amigo en Internet <param name="showcontrols"
resultado es una cierta prdida de value="0">
calidad visual pero con una notable que puede aportarnos trucos para <param name="showdisplay"
reduccin en el tamao del archi- value="0">
vo. Actualmente se encuentra ope- mejorar nuestra tcnica. <param name="showstatusbar"
rativa la versin MPEG2 mejorada y value="0">
se est perfeccionando la versin vos de este formato tienen la exten- plug-in Quick Time, en las versiones <param name="autosize" va-
MPEG4 (difusin a travs de Inter- sin .mpeg o .mpg, y se pueden visua- 4x de Netscape Navigator slo se vi- lue="0">
net), que permite conseguir una lizar con Microsoft Windows Me- sualizan bien los ficheros AVI, mien- <param name="autostart" va-
calidad prxima a la del DVD y una dia Player y Apple QuickTime. tras que en las versiones 6x se visuali- lue="1">

compresin considerablemente RTV. Formato creado por Intel per- zan tambin los ficheros MPEG. </object>
mayor. La versin MPEG7 est re- mite alcanzar ratios de hasta 150:1
cin desarrollada. de compresin. La tecnologa es si- Comandos HTML relacionados con archivos de vdeo MOV (tabla 4)
MPEG1 es un estndar para el CD milar a la del MPEG. Un vdeo de 60
audio/vdeo, con una codificacin de minutos a pantalla completa requiere Parmetro Valores Descripcin
550 Mb de almacena- Src ruta del vdeo localizacin del archivo (incluso una URL completa).
miento. Requiere el re- Loop true/false repeticin indefinida/al menos una vez.
productor Realplayer: Type tipo archivo tipo de archivo de vdeo que indica al navegador
www.realnetworks.com. el programa o plug-in adecuado para la visualizacin
Todos estos formatos (video/avi, video/quicktime, video/mpeg, etc.).
de archivo tienen una for- Pluginspage URL en caso de ser necesario un plug-in, la pgina
ma de utilizarse en las web donde se puede descargar.
pginas web similar a la Showcontrols 1/0 muestra o no la barra de control de la consola
del sonido. de vdeo (Netscape 4x).
Para referenciar nues- Showdisplay 1/0 muestra o no la barra de informacin sobre el
tros archivos de imagen o vdeo (Netscape 4x).
vdeo tenemos las si- Showstatusbar 1/0 muestra o no la barra de estado (Netscape 4x).
guientes posibilidades: Name nombre identificador que debe ser nico en la pgina,
para referenciar por lenguajes de script.
<img src= "imagen/ Volume valor de 0 a 100 volumen de reproduccin (Netscape Navigator).
animado.gif" Width nmero de pxeles anchura reservada para la consola.
dynsrc="peliculas/bo- Height nmero de pxeles altura para la consola.
da.mpg" loop="2"> Align top/bottom/center/ alineacin en la pgina de la consola.
Real Player es uno de los reproductores ms difundi-
dos, despus de Windows Media de Microsoft. Ver tabla 3 left/right/middle
N 92 59
92_54_60_Curso 22/4/04 12:16 Pgina 10
Prctico
Como solucin a los problemas de Parmetros asociados a OBJECT (tabla 5)

compatibilidad entre las etiquetas an-
teriores y los diferentes navegadores Parmetro Valores Descripcin
web, la organizacin W3C sugiri a Classid "identificador_objeto" fija el identificador CLSID de los controles
partir del lenguaje HTML 4.0. la utili- ActiveX necesarios.
zacin de la etiqueta OBJECT, con la Codebase "URL" URL del objeto o componente externo
que se podran incluir archivos de v- necesario para reproducir el archivo.
deo (igual que para todo tipo de ar- Type tipo archivo declara el tipo de archivo de vdeo.
chivos incrustados). Hasta la fecha, Width nmero de pxeles anchura reservada para la consola.
Internet Explorer es el nico na- Height nmero de pxeles altura para la consola.
vegador que admite correctamente la Align top/bottom/center/left/ alineacin en la pgina de la consola. Las posibilidades para exportar la pe-
etiqueta OBJECT. right/middle lcula incluyen el formato AVI y QT.
Esta etiqueta define un objeto o Autostart true/false con/sin autoarranque.
componente externo encargado de la Standby "mensaje" aparece en pantalla un mensaje dirigido nuestra animacin, basta con pulsar
reproduccin del fichero de vdeo, al usuario mientras se carga el archivo. la tecla Intro del teclado numri-
que en el caso de Internet Explorer es co y se reproducir la animacin en
alguna clase de control perteneciente Hay un proyecto de software gratuito Nada ms abrir la aplicacin aparece nuestro espacio de trabajo.
al tipo ActiveX. Se crea una instancia en marcha, donde se puede encontrar un escenario donde estn casi todas las Para guardar la animacin en for-
del objeto, se declara su URL y las mucha informacin acerca del funcio- herramientas necesarias. mato swf, que es el nico que per-
principales propiedades generales y, namiento de Flash, en www.openswf.org. Primero decidimos cuantos foto- mite editar las pelculas creadas, se-
mediante un conjunto de etiquetas es- Pero se requieren conocimientos de gramas o imgenes independien- leccione en el men File>Export
peciales PARAM, se parametrizan los programacin avanzados.
valores que necesita para el correcto
funcionamiento o para la configura-
Si se tiene en cuenta que el precio
de la herramienta de desarrollo es-
Los descodificadores de archivos Flash
cin deseada. Ver tabla 5 tndar Flash MX 2004 es de casi 600 deben usarse con intencin de
Para los parmetros pertenecientes euros y el profesional de 840, los
al comando PARAM, aprender y no de robar cdigo ajeno.
ver tabla 6.
Para profundizar so- tes va a tener nuestra animacin; pa- Movie, que es la animacin reprodu-
bre los parmetros y ra ello, seleccionamos con el ratn la cible con Flash Player. El software
opciones disponibles, lnea de tiempo de la primera ca- de Flash instala el plug-in para visua-
se puede obtener in- pa y, a continuacin, en el fotograma lizar las pelculas Flash en nuestros
formacin extra en deseado con el botn derecho de ra- navegadores y tambin el programa
webmaster.lycos.es/re tn seleccionamos Insert frame (40 ejecutable de Flash Player.
ferences/html/ fotogramas en el ejemplo). Vamos a Slo tendremos que hacer doble
content.phtml#object o crear un texto que se va a deformar a click sobre nuestra animacin Flash y
en www.w3c.org. lo largo del tiempo. comenzar a reproducirse.
Nos situamos en el primer foto- Si no hemos utilizado el entorno de
Flash grama y con la herramienta de texto Flash, la herramienta dispondr de
Una de las herra- seleccionamos el color de la letra y algn reproductor. Si no es as, en la
mientas que est de- Flash parte de una tecnologa que adquiri Macro- el tamao que va a ocupar. direccin www.macromedia.com/
jando de ser un simple media a partir del desarrollo de otra empresa. Sobre la lnea de tiempo con el bo- shockwave/download/download.cgi?P1_
visualizador de anima- tn derecho de ratn, seleccionamos Prod_Version=ShockwaveFlash&Lang=
ciones es Flash de Macromedia. Sus programas shareware, que como el Create Motion Tween y nos situa- Spanish lo obtendremos.
posibilidades son infinitas, con gran- producto de Macromedia permiten mos en el fotograma 1. Selecciona- Otra caracterstica muy importante de
des posibilidades de inversin y baja un periodo de prueba, de la lista ob- mos la caja del texto y la opcin de este formato es la facilidad con que se
carga para la conexin. Por dar una tenida en www.webexperto.com/downlo men Modify>Transform>Free pueden crear animaciones y pelculas
pincelada, el cdigo que se genera ads/listado.php?subcat=10, parecen ra- Transform. Seleccionamos el foto- para su posterior distribucin en disco.
con Flash no se puede piratear de zonables. Los podemos encontrar grama 5 y deformamos el texto. El tamao reducido y la gran extensin
una forma sencilla y eficaz. Es una desde 17 euros a 150 euros segn las del programa que permite su reproduc-
herramienta que te permite obtener caractersticas del software. cin, lo hacen apto para sistemas de al-
grficos de alta calidad, formularios Macromedia permite usar el software macenamiento porttiles de cualquier
interactivos, conexin a bases de da- durante 30 das, as que los aprovecha- tipo. De todos modos, en las produc-
tos, reproduccin de audio/vdeo y mos para ver cmo es esta tecnologa y ciones profesionales que llenan multi-
MIDI, etc. Un buen contrincante del su entorno. Haremos una sencilla ani- tud de CDROMs promocionales, se in-
cdigo HTML, DHTML y de Javas- macin para que veas que en pocos pa- cluye el programa reproductor Flash
cript, pero a un precio desorbitado. sos se pueden hacer cosas. Player para que el usuario que carezca
de conexin a Internet tambin pueda
Opciones disponibles con PARAM (tabla 6) visualizar el contenido multimedia.
Otra caracterstica destacada del
Parmetro Valores Descripcin programa, es la facilidad con que
param name="filename" value="ruta_fichero" establece la ruta del archivo de vdeo. permite la actualizacin del software
La herramienta de transformacin es
param name="showcontrols" value="1/0" muestra o no la barra de controles de las ms utilizadas en Flash. de reproduccin de manera automti-
(Internet Explorer). ca. Si una pelcula est creada con
param name="showdisplay" value="1/0" muestra o no la barra de informacin En intervalos de 5 fotogramas repeti- una versin ms moderna de Flash
sobre el vdeo (Internet Explorer). mos el paso anterior reduciendo cada Player que la instalada en el ordena-
param name="showstatusbar" value="1/0" muestra o no la barra de estado vez ms el texto de prueba. dor, ste intentar descargarla sin
(Internet Explorer). En el fotograma 40 eliminamos lo que el usuario deba preocuparse de-
param name="autosize" value="1/0" autoajusta o no el tamao de la consola que queda de texto para dar la sensa- masiado. Adems, su condicin mul-
(Internet Explorer). cin de que ha desaparecido por tiplataforma lo hacen idneo para to-
param name="autostart" value="true/false" con/sin autoarranque completo. Para ver una prueba de do tipo de sistemas informticos.
60 www.pctoday.es
93_52_57_Curso 6/5/04 17:14 Pgina 14
Curso
Programacin
El entorno de programacin se ha convertido en algo tan sencillo, que cualquiera podra crear
una pgina web en un abrir y cerrar de ojos. Pero tambin se requiere que, para trabajar
detrs de la cmara, profundicemos en algunos conocimientos.
P
Gua del curso rogramar nuestra pgina web ms que el diseador sepa de qu le ha-
no consiste slo en abrir una blan los programadores. Puede que el
1. Introduccin al diseo web. herramienta de desarrollo del diseo no permita ciertas libertades en
Planificar y organizar el sitio. Principales elementos de las pginas web. PC Today n 87 tipo Hot Metal Pro o similar y programacin, y viceversa. De ah, que si
2. Herramientas para el diseo web. colocar texto e imgenes aqu y all. el diseador ya sabe cules son las limi-
Hemos visto a lo largo de las entregas taciones de una interfaz, ms rpido
anteriores que hay que conocer bien ser el desarrollo. No hace falta decir
el medio en el que vamos a trabajar y que los factores fundamentales van a ser
no dejarnos llevar, exclusivamente, por los presupuestos y el tiempo disponible,
Herramientas para el tratamiento de las imgenes y el color. The GIMP. PC Today n 89 nuestro sentido artstico. incluso para un proyecto domstico.
4. Usabilidad. Uno de los conceptos ms ambiguos La parte ms oscura del desarrollo es
Qu es la usabilidad y por qu se debe tener en cuenta? Qu hacer y no hacer en el diseo web. del desarrollo es, precisamente, el dise- la programacin en s. No hablamos de
Cmo saber si una web es usable. PC Today n 90 ador web. Cul es su cometido? De- HTML ni de las hojas de estilo, nos refe-
5. Accesibilidad. bera tener conocimientos de programa- rimos al cdigo realizado sobre un len-
Qu se entiende por accesibilidad? Deficiencias y polticas. El diseo inclusivo. cin? Evidentemente, cuando los visitan- guaje de programacin y que aumenta
Consejos para disear una web accesible. Evaluar la accesibilidad. PC Today n 91 tes la vean, lo primero que encontrarn las posibilidades de la pgina web.
6. Tecnologas multimedia en la Red. es la interfaz, junto a esos textos y fotos
Msica y sonido. Imagen animada y pelculas. Integracin multimedia: Macromedia Flash que hemos mencionado. Hemos comen- Principios
y Action Script. PC Today n 92 tado la importancia que tiene y sobre to- de programacin
7. Programacin. do su usabilidad, accesibilidad y na- El origen militar de Internet, con la
vegacin. Cada uno tiene sus labores red ARPANET, dio paso a una serie de
dentro de un proyecto, pero no est de avances en los sistemas, gnesis de
52 www.pctoday.es
93_52_57_Curso 6/5/04 17:14 Pgina 15
Diseo web. Parte 7
diseo o los aspectos Hay una serie de diferencias que nos Desde el punto de vista de las comuni-
del sistema no estn pa- ayudan a determinar qu lado de una caciones, admite los servicios de co-
tentados, es decir, se conexin es el cliente y qu lado es el nexin TCP/IP y funciona de la misma
pueden obtener todos servidor. Una aplicacin servidor casi forma que el resto de los servicios co-
los detalles sobre el sis- siempre se inicia ella misma y luego munes de entornos en red: un pro-
tema y utilizarlos con permanece latente,
entera libertad. El mo- en espera de otra
delo OSI se deriv de un aplicacin cliente.
modelo propuesto por Por ejemplo, una
la Organizacin In- base de datos dis-
ternacional de Nor- tribuida proporcio-
mas (ISO, Internacional na a las compaas
Standards Organiza- areas informacin
tion). En la literatura so- sobre las reservas.
Para profundizar en el origen de las primeras redes de
bre redes casi siempre El sistema emplea
ordenadores podemos encontrar buen material en se hace mencin a los un proceso servi-
www.isoc.org/internet/history/cerf.shtml. modelos ISO/OSI, lo que dor que accede a
demuestra su influencia. una base de datos
protocolos y arquitecturas muy varia- El modelo ISO/OSI utiliza capas para distribuida y da
das al unirse centros universitarios y organizar una red en mdulos funcio- respuesta a todas
hacerse pblica la existencia de dicha nales bien definidos. Cada uno de estos las empresas.
red en 1972. El objetivo principal era mdulos o capas, proporciona una fun- Siempre nos En cualquier servicio de compra por Internet, como este
construir redes de rea amplia (WAN cionalidad especfica o una serie de imaginamos un de Iberia, www.iberia.es, se puede experimentar el funcio-
Wide Area Network) o redes de rea servicios a la capa subyacente. gran ordenador namiento del modelo cliente/servidor.
local (LAN Local Area Network). Este modelo de red ha dado lugar al que da respuesta a
El hecho de conectar dos o ms orde- uso del mismo en la programacin de las peticiones de miles de clientes. Pe- ceso servidor escucha en un puerto de
nadores para que se comuniquen es redes: el modelo cliente/servidor. ro internamente nuestro propio PC comunicaciones TCP (por defecto, el
crear una red. Conectar dos o ms re- Consiste en dividir una aplicacin de funciona como un cliente/servidor. Los 80) y espera las solicitudes de conexin
des a nivel mundial forma una inter- red en dos lados. El lado cliente soli- clientes seran los procesos que solici- de los clientes de la WWW. Una vez esta-
net, con la i en minscula. Inter- cita informacin o servicios del lado tan tareas de comunicacin (por ejem- blecida la conexin, el protocolo TCP se
net en maysculas naci a partir de AR- servidor y ste a su vez responde a las plo, entre la impresora y el PC) y los encarga de mantener la comunica-
PANET, y es la Red de Redes con ms de solicitudes del cliente. En otras pala- servicios de impresin del sistema ope- cin y garantizar un intercambio de
20.000 redes enlazadas en 130 pases. datos libre de errores.
La cuna de la World Wide Web fue el HTTP se basa en operaciones senci-
laboratorio europeo de fsica de part- El modelo cliente/servidor consiste en llas de solicitud/respuesta. Un cliente
culas CERN, con sede en Ginebra, en dividir una aplicacin de red en dos establece una conexin con un servidor
1989. Su creador, Tim Berners-Lee, y enva un mensaje con los datos de la
londinense e ingeniero de programa- lados, el que solicita y el que sirve. solicitud. El servidor responde con un
cin, la orient como herramienta de mensaje similar, que contiene el estado
trabajo para el intercambio de infor- bras, el modelo cliente/servidor de rativo se encargaran de realizar las de la operacin y su posible resultado.
macin entre los cientficos del centro, una aplicacin de red cumple dos funciones de servidor. Todas las operaciones pueden adjuntar
sin necesidad de descargar documen- funciones bien diferenciadas e inde- Generalmente en la programacin un objeto o recurso sobre el que act-
tos mediante FTP. De esta forma, la in- pendientes: solicita informacin y cliente/servidor, las propias funciones an; cada objeto de la WWW, documento
formacin se encontraba localizada en responde a esas peticiones. prefabricadas y las libreras del siste- HTML, fichero multimedia o aplicacin

ma hacen innecesario conocer en CGI, se reconoce por su URL (Universal
profundidad el funcionamiento de la
red. Esto nos evita tener que saber
qu hace nuestro navegador a travs
de una pgina web cuando realiza una
consulta en un servidor.
Programacin
de formateo
Durante mucho tiempo los cientficos
e ingenieros se han centrado en la idea
de desarrollar una base de datos uni-
versal, pero slo desde hace poco han
En la web del laboratorio de fsica de partculas CERN, public.web.cern.ch/public/ contado con los medios para crearla.
index.html, se puede comprobar el origen real de la World Wide Web. Muchas personas han considerado a la
World Wide Web como el prototipo
un lugar y permita su consulta desde Se puede disear una aplicacin que para crear esa base de datos.
cualquier punto. cumpla las dos funciones. Dentro de este Como todo lo que se encuentra en In-
Para comprender el concepto de pro- modelo se puede dar la siguiente situa- ternet, las operaciones dependen
gramacin en Internet, usaremos las cin: el cliente realiza una peticin y si el de un protocolo: HTTP o Pro-
mismas ideas que si programamos para servidor no puede satisfacer la respues- tocolo de Transferencia de
una red local. ta, har las veces de cliente y solicitar la Hipertexto. La especificacin
Entre 1977 y 1984 los profesionales informacin a otro servidor. completa del protocolo HTTP
de redes disearon un modelo de re- Como en el modelo de red y su divi- 1/0 propuesta por su creador,
ferencia para Interconexin de Siste- sin en capas, el modelo de programa- Tim Berners-Lee, se encuentra recogida Los servidores de
mas Abiertos (OSI, Open Systems In- cin divide el diseo de una aplicacin en el documento de referencia RFC pginas web se suelen relacionar
terconnection). En un sistema abierto el en tareas del cliente y tareas del servidor. 1945, www.faqs.org/rfcs/rfc1945.html. con grandes grupos de ordenadores.
N 93 53
93_52_57_Curso 6/5/04 17:15 Pgina 16
Curso
Resource Locator). El nico propsito be interpretar. Pero las verdaderas

de un URL es encapsular informa- operaciones de red en la WWW, reali-
cin que pueda utilizar un programa zadas con HTTP, URL y URI (Universal
con el fin de localizar un objeto en In- Resource Identifier), son relativamente
ternet. Una vez localizado el objeto, el sencillas. Este tipo de operaciones son
URL no desempea ninguna funcin. Es mucho ms simples que las operaciones
decir, a efectos prcticos puede ver un de FTP (File Transfer Protocol). Para
URL como un tipo especial de direccin ejecutar una operacin, el programa s-
de red. No obstante, en lugar de identifi- lo debe manejar una conexin TCP. In-
car un ordenador anfitrin, un URL cluso, ms fcil an, slo tiene que man-
identifica un objeto especfico de dicho tener esta conexin durante el transcur-
equipo y el mtodo de acceso para el so de la transferencia del archivo.
objeto al que hace referencia. Al contrario, crear una aplicacin que
El esquema URL para HTTP slo interprete y despliegue de forma adecua-
identifica recursos de Internet sobre da el contenido de un documento HTML
los que se puede utilizar el Protocolo es bastante complicado. Hoy en da est
de Transferencia de Hipertexto. La bastante superado este tema por las
sintaxis sera: grandes compaas de software especia-
La arquitectura cliente/servidor puede desglosarse en capas. Generalmente es lizado en comunicaciones. De ah que
http://anfitrin:puerto/ruta? la parte servidor la que se divide en n niveles. nuestro reto sea utilizar bien las po-
objeto de bsqueda sibilidades que nos permita la aplica-
La direccin en la que encontrars to- solicitud/respuesta entre cliente y servi- cin que funcione como navegador.
Si los programas omiten el puerto do lo referente al protocolo correspon- dor, te recomendamos que consultes la
se opta por el 80, que es el prede- de al consorcio internacional del W3C y pgina web cdec.unican.es/libro/HTTP.htm. Las capas de red
terminado. Adems, en la actualidad, que ya hemos mencionado en ms de Si salimos un poco de estas profundi- El diseo de nuestra web y su progra-
a pesar de estar referenciada en la una ocasin: www.w3.org/Protocols. dades, en la superficie de Internet macin va a depender tambin de los ni-
sintaxis de esquema, la parte objeto Si adems quieres comprender con siempre estar nuestro querido HTML. veles o las capas del mismo. Qu quere-
de bsqueda no se utiliza, por lo algn ejemplo el funcionamiento de los Los documentos HTML contienen mu- mos decir con esto? Dentro de la arqui-
que puedes ignorarla. comandos de este protocolo basado en cha informacin que un cliente Web de- tectura cliente/servidor podemos esta-
blecer niveles que van a estar
determinados por los componentes de la
Las capas de una red arquitectura. Si vamos a almacenar da-
tos que posteriormente se utilizarn para
El modelo ISO/OSI se divide en estas De red. Es el sistema de entrega proceso se denomina registro. Si alimentar la web (una pgina de noti-
capas funcionales: primario dentro de la red. En creamos varias sesiones con un cias, por ejemplo), necesitaremos un
Fsica. Es la que transmite los datos a Internet, esta capa enva paquetes sistema, la capa de sesin negocia gestor de base de datos en nuestro servi-
travs del canal de comunicacin de individuales de datos que contienen y establece las conexiones entre
la red. Adems, determina las propie- la direccin de destino y fuente para los procesos y las aplicaciones en
dades mecnicas y elctricas de este el enrutamiento. Permite buscar la diferentes anfitriones para cada
canal. Por ejemplo, la capa fsica mejor trayectoria entre el ordenador sesin. Es la asignacin.
determina el tipo de cable que utiliza- anfitrin y cualquier destino en la De presentacin. Esta capa contie-
r la red, la tipologa de la misma, etc. red. Esta capa asegura la entrega ne funciones comunes que la red
De enlace (de datos). Transforma los de los datos de forma correcta. utiliza repetidamente durante las
datos binarios puros en informacin De transporte. Cuando se estable- comunicaciones. Estas funciones
La mejor fuente de informacin en
inteligible para la capa de red, general- ce la comunicacin entre dos orde- incluyen la interfaz de red con cuanto a protocolos es www.w3c.org,
mente en tramas de datos. Por ejemplo, nadores a travs de una red, en impresoras, monitores y formatos de aunque est totalmente en ingls.
si dos ordenadores del mismo tipo estn realidad hay dos programas que archivos. Esta capa determina cmo
se presentan los datos al usuario. dor. Este sera un nivel. Cuando se dise-
Incluye varias rutinas de conversin a un sitio web y se dimensiona por n-
de datos. Desafortunadamente, las
mero de visitas, para reducir el trabajo
redes en Internet no incluyen una
del servidor web (encargado de servir
capa de presentacin estndar, y
son los programas de aplicacin los
las pginas web a Internet), se incorpora
que se encargan de las funciones de un servidor de aplicaciones que se
esta capa. encarga de la ejecucin de los progra-
De aplicacin. En la capa de apli- mas internos y de preparar la informa-
cacin se incluyen todos los deta- cin para el servidor web. Este sera otro
lles relacionados con programas nivel. Para una arquitectura
diseados para usuarios de red. cliente/servidor de tres niveles tendr-
Para aprovechar ciertas capacida- amos: un servidor de base de datos,
des de la red, quiz haya que crear un servidor de aplicaciones y un ser-
algn mdulo especializado. Un vidor web. Dentro de las capas, pode-
El modelo ISO/OSI es el ms estandarizado y se caracteriza por la
ejemplo sera aprovechar las capa- mos imaginar cuantos niveles queramos
conversin que se establece entre las capas que lo componen. cidades de la red y utilizar varios segn el diseo de la arquitectura. Siem-
ordenadores como centros de pre vara en funcin de la seguridad es-
conectados en una intranet, uno en una son los que intercambian los datos. almacenamiento de datos. tablecida en nuestra red, de cmo que-
red de tipo Ethernet y otro en una de Esta capa es la que los conduce al Hay mucha bibliografa relacionada remos distribuir la informacin y sobre
tipo Token Ring, en el nivel de capa de programa correcto. con la teora de redes que abarca todo de cmo queremos repartir la car-
red los datos parecen idnticos, pero en De sesin. Cuando se accede a todas las cuestiones relacionadas ga de trabajo entre los servidores. Por lo
el nivel de capa de enlace y fsica son una red, generalmente hay que con arquitectura, protocolos, metodo- tanto, tenemos que distinguir aplicacio-
formatos completamente distintos. identificarse y conectarse. Este logas, etc.
nes que se ejecutan en la parte cliente y
las que lo hacen en la parte servidor.
54 www.pctoday.es
93_52_57_Curso 7/5/04 11:17 Pgina 17
Diseo web. Parte 7
Cdigos que enva el servidor al explorador

Cdigo Mensaje Descripcin
200 OK Operacin realizada satisfactoriamente.
201 Created Operacin realizada correctamente. Como resultado, se ha creado un nuevo objeto cuyo URL de acceso se encuentra en el cuerpo
de la respuesta. Este nuevo objeto ya est disponible. Puede utilizarse en sistemas de edicin de documentos.
202 Accepted Operacin realizada correctamente. Como resultado, se ha creado un nuevo objeto cuyo URL de acceso se encuentra en el cuerpo
de la respuesta. El nuevo objeto no est disponible por el momento. En el cuerpo de la respuesta se debe informar sobre la
disponibilidad de la informacin.
204 No Content Se ha aceptado la operacin, pero no ha producido ningn resultado de inters. El cliente no deber modificar el documento
que se muestra en este momento.
301 Moved Permanently El objeto al que se accede se ha movido a otro lugar de forma permanente. El servidor proporciona la nueva direccin URL en la
variable Location de la respuesta. Algunos navegadores acceden automticamente a la nueva direccin URL. En caso de tener
suficiente capacidad, el cliente puede actualizar la direccin URL incorrecta en la agenda de favoritos, por ejemplo.
302 Moved Temporarily El objeto al que se accede se ha movido a otro lugar de forma temporal. El servidor proporciona la nueva direccin URL en la
variable Location de la respuesta. Algunos navegadores acceden automticamente a la nueva direccin URL. El cliente no debe
modificar ninguna de las referencias a la direccin URL errnea.
304 Not Modified Cuando se ejecuta un comando get condicional, y el documento no ha sido modificado, se devuelve este cdigo de estado.
400 Bad Request La peticin tiene un error de sintaxis y el servidor no la entiende.
401 Unauthorized La peticin requiere una autorizacin especial, que normalmente consiste en un nombre y una clave que el servidor verificar.
El campo WWW-Autenticate informa de los protocolos de autentificacin aceptados para este recurso.
403 Forbidden Est prohibido el acceso a este recurso. No es posible utilizar una clave para modificar la proteccin.
404 Not Found La direccin URL solicitada no existe.
500 Internal Server Error Se ha producido un error interno en el servidor y no puede continuar con el procesamiento.
501 Not Implemented Por su diseo interno, el servidor no tiene capacidad suficiente para llevar a cabo la peticin del cliente.
502 Bad Gateway El servidor, que est actuando como proxy o pasarela, ha encontrado un error al acceder al recurso que haba solicitado el cliente.
503 Service Unavailable El servidor est actualmente deshabilitado y no es capaz de atender el requerimiento.
En concreto, HTML/CSS, al ser un len- tructurar la informacin. Principalmen- utilizado por los programadores, y sim-
guaje interpretado, siempre se ejecuta te, se codifica de esta forma para que el plemente estaba de moda en la Web.
en la parte cliente. Ya lo hemos mencio- cdigo fuente del archivo referenciado Java y JavaScript no tienen nada
nado anteriormente, el navegador de permanezca en el anonimato. que ver, aunque tienen muchas cosas
nuestro PC recopila la pgina que ha so- en comn, como todos los lenguajes
licitado al servidor y posteriormente in- En el cliente orientados a objetos.
terpreta las etiquetas y el contenido para Haciendo un poco de historia, en Microsoft no adapt Internet Ex-
visualizarla. Quien se lleva el trabajo es 1995 Brendan Eich, ingeniero de plorer hasta 1996 para interpretar Ja-
nuestro PC, el servidor se limita a res- Netscape, invent un lenguaje de pro- vaScript, pero hoy en da no existen pro-
ponder a nuestra peticin con un archi- gramacin llamado Livescript. Ante la blemas para utilizar incluso la ltima
vo que viaja por Internet. Este ejemplo, posibilidad de realizar muchas opera- versin 1.6 de JavaScript.
ciones sin necesidad de un servidor de Este lenguaje ha sido la base para lo- Con la opcin Ver cdigo fuente de
<HTML> aplicaciones, los ingenieros de Netscape grar la animacin de las pginas web sin un navegador se pueden ver los en-
<HEAD> vieron que con un poco de preparacin necesidad de estudiar herramientas dif- tresijos de una web.
<LINK REL=stylesheet se podan adaptar los navegadores para ciles o lenguajes que requieran mucho
TYPE=text/css interpretar este cdigo. En una cola- tiempo de aprendizaje. HTML, CSS y Ja- adems, es la nica forma de llegar a
HREF=Mi_hoja_estilos.css> boracin entre Netscape y Sun Microsys- vaScript han dado lugar a la tecnologa comprender y dominar su sintaxis.
</HEAD>
tems se termin la sintaxis del que sera denominada Dynamic HTML o DHTML. Existen dos tipos de JavaScript:
<BODY>
......
rebautizado como JavaScript. Dadas sus caractersticas, este len- JavaScript cliente: se desarrolla y
</BODY>
Se le dio ese nombre porque en esos guaje requiere el uso de un editor de aplica en el navegador del cliente.
</HTML> momentos Java era un lenguaje muy texto, que no es el editor de HTML; JavaScript servidor: menos conoci-
o referenciando al archivo CSS do, se ejecuta en el servidor, lo mismo
mediante la etiqueta @IMPORT que cualquier CGI, pero ms sencillo.

<HTML> Vamos a crear un ejemplo sencillo:

<HEAD>
<STYLE TYPE=text/css> <html>
@IMPORT <head>
URL(Mi_hoja_estilos.css) <title>Primer
</STYLE> Javascript</title>
</HEAD> </head>
<BODY> <body>
...... <h1>Tpico ejemplo de</h1>
</BODY> <script language=javascript>
</HTML> <! de esta forma ocultamos el
cdigo JavaScript para los
provocar dos peticiones al servi- antiguos navegadores.
dor, una para el documento HTML y document.write(Hola, mundo)
otra para el documento CSS enlazado. //>fin de ocultar
Esto no significa que sera mejor incluir </script>
</body>
todo directamente en el HTML y olvidar- Dentro de www.htmlhelp.com podemos encontrar muchos recursos que nos ayuda- </html>
nos, simplemente es una forma de es- rn a desarrollar pginas no dependientes del explorador.
N 93 55
93_52_57_Curso 7/5/04 11:17 Pgina 8
Curso
La doble barra inclinada // se utiliza Si se refiere a que hay que realizar al- cript. Para aquellos
en JavaScript para indicar comentarios guna accin al cargar el documento, que estn familiariza-
que sern ignorados por el navegador. es mejor ponerla en BODY. dos con Visual Basic,
Tienen el mismo significado que la eti- Pero si la funcin se pude invocar es muy fcil codificar
queta <! . > en HTML. desde cualquier punto de BODY, lo script potentes para
La etiqueta <script> </script> mejor ser colocarla dentro de HEAD. una pgina web. No ol-
permite al navegador reconocer que Si se transcribe el siguiente ejemplo videmos que dado el
se inicia en este punto un script o pro- en un documento HTML, con Notepad origen de VBS, es un
grama a interpretar, y uno de sus atri- podremos ver las posibilidades que lenguaje bastante ex-
butos es el lenguaje en que est escri- nos otorga el control de ciertas ca- clusivo para utilizarlo
to, por eso se aade language=Javas- ractersticas. Este ejemplo, en con- con software de la ca-
cript. creto, aplica un efecto de nen entre sa Microsoft.
Se ha aadido la etiqueta <!, as se rojo, verde y azul: Veamos un ejemplo
oculta el cdigo JavaScript para los an- en el que se muestra
tiguos navegadores. No sirve slo para <html> cmo se pueden utili-
navegadores antiguos, sino para los <head> La base de datos es un eje fundamental para alimentar zar los cuadros de di-
nuestras pginas. Dentro del software libre y aprove-
navegadores ms modernos en los que <title>PC Today - texto que
chando el estndar SQL, MySQL es la ms extendida. logo de mensajes t-
el usuario ha decidido desactivar el in- cambia de color</title> picos de las aplica-
<style type=text/css>
trprete JavaScript. Para profundizar ms sobre las funciones que funcionan sobre Windows:
<!.posicion
{position:absolute; top:100;
ciones, constantes y posibilidades
font-weight:bold; }>
que nos ofrece JavaScript, recomenda- <HTML><HEAD>
</style> mos consultar devedge.netscape.com/cen <TITLE>PC Today - MsgBox

</TITLE>
<script language=JavaScript tral/javascript, donde encontrars ma-
<BASEFONT SIZE=3>
type=text/javascript> nuales y guas sobre este tema. Algunas </HEAD>
<!var message=Texto que se pginas en las que recopilar ejemplos y <BODY>
cambia en tres colores; var ms informacin son: www.mundojava <FONT FACE=Verdana, Arial>
x=0,i=message.length; script.com, javascript.internet.com, www. <SCRIPT LANGUAGE=VBScript>
function cambia_texto() programacion.com, www.elguruprograma Document.Write Un ejemplo
{ if(x<=message.length)
dor.com.ar o www.htmlweb.net. con MsgBox
{document.getElementById
(id_texto1).innerHTML=messa
Adems de JavaScript, tambin est MsgBox Esto es un
ge.substring(x,0);document.ge Visual Basic Script, VBScript o VBS. ejemplo,vbInformation,PC

Visual Basic Script es un subconjunto Today - MsgBox
tElementById(id_texto0).inn
Document.Write <BR> Has
erHTML=message; x+=1; } de Microsoft Visual Basic, que ha
pulsado <B> Aceptar</B>
else heredado parte de las funcionalidades I = MsgBox (Otro ejemplo
{ if(i>=0) de este lenguaje. La desventaja es que ,vbQuestion + vbOkCancel +
Esta pgina de error indica que hay
{document.getElementById slo lo pueden ejecutar navegadores vbDefaultButton2,PC Today -
una mala programacin de la web
(id_texto2).innerHTML=messa de Microsoft y sus principales posibili- MsgBox)
ge.substring(i,0);i-=1;}
que las origina. dades son utilizar controles ActiveX, If I = vbOk then
else { x=0; i=message.length;
}}
servidores de automatizacin OLE y Document. Write <BR>Has
Para navegadores con el intrprete Ja- setTimeout(cambia_texto();,
utilizar Java. pulsado <B> Aceptar</B>
vaScript habilitado, se ejecutar el c- 25);}//> La versin en VBS del primer ejem- Else
Document.Write <BR> Has
digo tras leer una etiqueta de script. </script> plo de JavaScript sera as:
pulsado <B>Cancelar</B>
La etiqueta de cierre del comentario End If
HTML se antecede con las dos barras </head> <html> </SCRIPT></FONT>
de comentario de JavaScript. Esto es <body onload=cambia_texto() <head> </BODY></HTML>
necesario para que el navegador no bgColor=#EEEEEE> <title>Mi primer Visual Basic
se confunda e interprete errnea- <span class=posicion id= Script</title> Los nicos requisitos necesarios
id_texto0 style=z-index:- </head>
mente el cierre >. para utilizar ambos lenguajes de
1;color:red;font- <body>
Dentro de este breve script tenemos size:20></span> <h1>El tpico ejemplo de</h1>
scripting es tener un navegador y un
una lnea de comando que escribir <span class=posicion id= <script language=VBScript>
editor de texto que nos permita crear
la frase en pantalla. Es document.wri- id_texto1 style=z- Document.Write Hola, mundo! nuestro cdigo. Embeber el cdigo
te(), y dentro del parntesis de este index:1;color:green;font- </script> dentro de un documento HTML no es
comando se escribe entre comillas el size:20></span> </body> difcil, y nos permite manejar todos
texto que queremos que aparezca en <span class=posicion id= </html> los elementos de la interfaz mediante
pantalla. El texto tiene que ir necesa- id_texto2 style=z- estos lenguajes. Ya sabes, la nica di-
riamente entre comillas. index:2;color: blue;font- Se parecen bastante, pero cuando se ferencia es que uno es estndar para
size:20></span></left>
JavaScript tiene la particularidad de trata en detalle objetos Com, ActiveX, cualquier navegador y el otro es ex-
</body>
ser CASE SENSITIVE, sensible a las ma- </html>
etc. vemos que el script de VBS es mu- clusivo de Internet Explorer. La venta-
ysculas; por lo tanto, habr que tener cho ms denso que el de JavaS- ja que tiene VBS es que permite ser
cuidado cuando se escriban las pala-
bras reservadas, los identificadores, etc. Las versiones de JavaScript
La etiqueta <script></script> puede Versin navegador Netscape Internet Explorer
incluirse tanto entre las etiquetas <he- 2 JavaScript 1.0 No aceptado
ad></head> como dentro de 3 JavaScript 1.1 JavaScript 1.0
<body></body>. La decisin de dn- 4 JavaScript 1.2 sin ajustarse a ECMA-262 (*) JavaScript 1.2 ajustndose a ECMA-262
de colocarla depender de varios fac- 5 JavaScript 1.3 sin ajustarse a ECMA-334 (*) JavaScript 1.3 ajustndose a ECMA-334
tores, aparte de nuestro gusto. Lo 6 JavaScript 1.4 sin ajustarse a ECMA-335 (*) JavaScript 1.4 ajustndose a ECMA-335
aconsejable ser seguir estas pautas:
Si la funcin es corta y acta sobre un (*) ECMA. Conjuntamente al W3C, la European Computer Manufacturers Association, se encarga de propagar la forma en que se deben
elemento del documento, hay que es- usar las altas tecnologas. Por ejemplo, JavaScript 1.2 est debidamente descrito en el documento ECMA-262: www.ecma-international.org/
cribir el cdigo cerca de ella. publications/standards/Ecma-262.htm.
56 www.pctoday.es
93_52_57_Curso 7/5/04 11:17 Pgina 9
Diseo web. Parte 7
XML/XHTML
Un lenguaje de marcas que est cin. Estos entornos publican docu-
adquiriendo gran auge como medio mentos XML que antes de enviarse al
de comunicacin entre distintas tec- cliente sufrirn una serie de transfor-
nologas es XML (eXtensible Markup maciones para adaptarse a los requi-
Language), o lenguaje de anotacin sitos pertinentes.
extensible. XML no es slo un len- La caracterstica esencial de XML es
guaje, es una manera de especificar que permite estructurar la informa-
lenguajes, de ah que sea extensi- cin y luego aplicar transformaciones
ble. Por lo tanto, XML no es un len- para su visualizacin. Recupera infor-
guaje para crear pginas web, sino macin de una base de datos, la
informacin autodescrita. convierte a XML y, a continuacin, la
XML naci como subconjunto de transforma para servirlo al cliente en
SGML, Structured
Generalized Markup
Language, un stan-
dard para documen-
tos estructurados,
Se pueden obtener programas ya hechos en pginas espaolas, pero una de las sumamente complejo
ms completas es www.visualbasicscript.com.
para poder servir
documentos web.
mucho ms potente a la hora de utili- cliente VBS, est basada en la progra- Lo normal es que
zar las caractersticas de un lenguaje macin de Visual Basic. Al igual que el XML se utilice en el
de programacin. resto de los lenguajes de script vistos servidor y se sirva La reformulacin de HTML 4.0 a XML 1.0 ha dado
Un buen tutorial sobre VBS lo pode- hasta ahora, ASP se compone de pgi- lugar a XHTML 1.0. Documentacin en castellano:
otro tipo de docu- leo.worldonline.es/jlgranad/xhtml/xhtml1.htm#toc.
mos encontrar en www.programacion. nas en formato ASCII. Al igual que mentos, HTML por
com/asp/tutorial/vbscript, y una direccin VBScript, permite el uso de compo- ejemplo, que se obtienen a base de el formato solicitado. Para obtener
de muchsimos recursos de VBScript es nentes ActiveX, pero adems puede co- transformaciones. Esto hace que XML informacin ms detallada, visita
www.visualbasicscript.com. nectarse a una base de datos para in- se use dentro de entornos de aplica- html.programacion.net/xml.
Frente a las posibilidades de Flash,

el lenguaje de script es muy manejable
y, sobre todo, es gratuito.
En la pgina www.desarrolloweb.com/ tercambiar informacin. La gran dife-
directorio/programacion/asp han realiza- rencia de funcionamiento es que ASP
do un gran trabajo de comparativas en- se ejecuta en el servidor y el resultado
tre estos tipos de tecnologas de scrip- lo enva al cliente.
ting, no lo pases por alto. Una pgina ASP es como un documen-
to HTML, pero de extensin
.asp (aunque lo que conten-
ga sea cdigo HTML).
Para poder ejecutar pgi-
nas ASP debemos disponer
como mnimo de:
Windows XP PRO con Dentro de los servidores web gratuitos, el ms difundido y eficiente es Apache,
IIS (Internet Information principalmente sobre Linux.
Server) instalado (es un
componente del sistema El resultado de esta pgina sera: = VBScript %> que vamos a utilizar Vi-
operativo). Hoy es 5/10/2004 10:01:59 AM sual Basic Script en el servidor. Todo lo
Windows 2000 Server Existen bastantes variaciones entre que queremos ejecutar en el servidor ir
con IIS. VBScript y ASP; para empezar, se indi- dentro de las etiquetas <% %>.
El lenguaje JavaScript ofrece la posibilidad de crear
Windows 95/98 con ca mediante la etiqueta <%@ Language En www.desarrolloweb.com/manuales/8
aplicaciones sencillas y compatibles con cualquier PWS (Personal Web Server) hay un buen tutorial sobre ASP y PWS.
ordenador. instalado. Dentro de las opciones que presen-
Un buen tutorial para tan los script que se ejecutan en el ser-
En el servidor montar nuestro servidor web desde vidor, tambin est PHP (PHP: Hyper-
Hemos comentado la parte que se cero con Windows XP PRO se puede text Preprocessor). La versin homlo-
ejecuta en el cliente. Es necesario tener encontrar en www.compuayuda.net/ ga de ASP en versin gratuita. La pgi-
ciertas nociones de la parte servidor. Si guia25-1.htm. na web donde obtener informacin y
alguna vez montamos nuestro propio Un ejemplo de pgina ASP sera: poder descargar su intrprete es
negocio sin alojamientos contratados y www.php.net. La parte dedicada a infor-
nuestro PC se convierte en servidor, ha- <%@ Language = VBScript %> macin y manuales en espaol se en-
br que saber qu necesitamos para <html><head> cuentra en www.php.net/manual/es/.
dar servicio a nuestros clientes. <title>PC Today</title> Al ser gratuito, su recomendacin es
ASP (Active Server Pages) es la tec- </head><body> utilizar como servidor web Apache
<H1>Hoy es <%= now %></H1> En el caso de Windows XP, el servi-
nologa de servidor desarrollada por dor de pginas web es un compo- 1.3.x, www.apache.org, y la base de da-
</body></html>
Microsoft. Homloga a su versin nente ms del sistema. tos MySQL, www.mysql.com.
N 93 57
94_60_65_Curso 20/5/02 20:19 Pgina 14
Curso
Introduccin al
retoque fotogrfico
Las cmaras digitales ya son mayora dentro del mercado de la fotografa y su compaero ideal es
el ordenador. Pronto sabrs cmo sacarles el mximo partido con los dos programas que te ayudamos
a dominar en este nuevo curso, Adobe Photoshop y Paint Shop Pro.
E
l mundo de la fotografa ha su- tido en todo un referente, Photoshop.
Gua del curso frido una transformacin es- Este ttulo de Adobe, www.adobe.es,
pectacular en slo una dcada, ofrece posibilidades casi infinitas y no
1. Introduccin al retoque fotogrfico.
gracias a la difusin de las c- para de evolucionar. En el curso tam-
Primer contacto con las herramientas de Photoshop 7 y Paint Shop Pro 7. Conceptos bsicos.
maras digitales. El ordenador se ha bin utilizaremos el programa Paint
Selecciones sencillas. Mscara rpida. Extraer. The GIMP. PC Today n 94 adueado de un hobby aparentemente Shop Pro 7, www.jasc.com. sta es la
2. Seleccin avanzada. caro y complicado de dominar que, sin ltima versin en castellano del mismo,
Seleccin avanzada. Curvas de Bezier. Opacidad. Trabajo bsico con capas. PC Today n 95 embargo, puede ofrecernos muchas hasta que a finales de ao est disponi-
3. Objetos mltiples. posibilidades sin grandes desembolsos ble la versin 8. Dispones de una ver-
Trabajo avanzado con capas. Modos de color. Canales y trazados. PC Today n 96 para poder corregir o aadir efec- sin de evaluacin de ambos progra-
4. Fotgrafos digitales. tos a nuestras fotos. mas en su pgina web, y en www.softo-
Adquisicin de imgenes. Edicin fotogrfica. Modificacin del color. Eliminacin de desperfectos. Una buena cmara y un software nic.com, con las que podrs seguir y
Composicin de escenas. PC Today n 97 potente pueden ofrecer resultados mu- practicar los ejemplos de este curso. En
5. Diseo para Internet. cho ms satisfactorios que si te limitas esta primera entrega, puedes ver una
Trabajar de cara a la web. Diseo de una interfaz. PC Today n 98 a apretar el botn y mostrar las fotos en descripcin escueta de la barra de he-
6. Trucos avanzados y filtros. el televisor. Muchos profesionales y afi- rramientas de ambos y algunas de las
Composicin avanzada. Efectos especiales. Filtros. Texturas. PC Today n 99
cionados han optado por un programa acciones bsicas que sern muy impor-
que, a pesar de su precio, se ha conver- tantes en las siguientes lecciones.
60 www.pctoday.es
94_60_65_Curso 20/5/02 20:20 Pgina 15
Retoque fotogrfico. Parte 1
ran u oscurecen zonas de la imagen. La utilizar varias formas como flechas,

Paleta de herramientas tercera se emplea para aumentar o dis- crculos, etc.
minuir la saturacin del color.
7 Lazo. Adems de la seleccin a
Adobe Photoshop 7 Paint shop Pro 7 Seleccin de trazado y selec-
15 cin directa. Se utilizan para se-
mano alzada, ofrece una versin
inteligente y otra con manejadores.
1 leccionar todo o parte de un trazado pe- 8 Varita mgica. Selecciona zonas
ro sin modificarlos. de una imagen que comparten co-
2
16 Texto, horizontal, vertical, se-
leccin horizontal y vertical.
lor u otras caractersticas.
1 2 3 9 Gotero. Se utiliza para seleccio-
Para escribir texto en horizontal o verti- nar un color que aparezca en
3 4 4 cal y para crear selecciones con forma cualquier lugar de la pantalla.
de texto. 10 Pincel. Herramienta de dibujo
5
5 6 17 Pluma. Se utiliza para crear traza- natural, a mano alzada.
6 dos complejos y poder seleccionar 11 Pincel de copia. Copia una zona
7 8 elementos de una imagen de forma sen- de la imagen a otro lugar. Ofrece
7 cilla y precisa. Ofrece otras herramientas muchas opciones en su paleta de confi-
9 10 8 para manejar los elementos de los traza- guracin asociada.
dos. 12 Reemplazar color. Cambia un
11 12 9
18 Rectngulo, rectngulo redon- color de la imagen por otro que
13 14 10 deado, elipse, polgono, lnea se seleccione.
y forma personalizada. Sirven para 13 Retoque. Desplaza zonas de la
15 16 11 crear diseos poligonales fciles de mo- imagen para darle distintos efectos
12 dificar. como difuminado o enfoque.
17 18 19 Notas, anotacin sonora. Se 14 Eliminar rayaduras. Suaviza
13 usa para crear notas recordato- pequeas zonas de la imagen
19 20 14 rias, tanto de texto como sonoras. para quitar desperfectos.
21 22 15 20 Cuentagotas, muestra de color 15 Borrador. Tiene un efecto similar
y medicin. Permite averiguar y a la herramienta pincel pero quita
16 utilizar un color al hacer click en una zonas de la imagen en lugar de pintar.
23 zona. Medicin mide la distancia entre 16 Sello de imgenes. Dibuja, a
17 dos puntos. modo de tampn, los objetos pre-
18 21 Mano. Mueve la imagen o capa diseados de una lista.
seleccionada dentro de la ventana
24 19 principal.
17 Aergrafo. Dibuja partculas
con una separacin variable y
20 22 Zoom. Aumenta o disminuye la produce un efecto de spray.
25 zona visible de una imagen. 18 Bote de pintura. Rellena zonas
21
23 Selector de color. Permite elegir de la imagen y permite aplicar di-
26 22 el color que se usar con cada he- ferentes efectos de fusin.
rramienta de dibujo. 19 Texto. Permite introducir texto
24 Modo de edicin estndar y
mscara rpida. Permite alter-
en las imgenes.
20 Diseo. Dibuja formas sencillas,
Photoshop 7 ral. Admite distintas opciones de tama- nar entre el escritorio de trabajo nor- como lneas rectas o flechas.
o, forma y transparencia. mal o uno con el que crear selecciones 21 Formas. Crea objetos poligonales
1 Marco rectangular, elptico, fi- Tampn de clonar y tampn
9 de motivo. Copia una zona de la
complejas con las herramientas de di- y diseos ms complicados, como
la y columna nica. Permite se- bujo habituales. botones de navegacin.
leccionar zonas de una imagen. Si de- imagen a otro lugar, entre capas y entre 25 Modos de pantalla. Ofrece va- 22 Objeto vectorial. Permite dibu-
jas el botn izquierdo pulsado, per- varios documentos. rios estilos de escritorio donde se jar con puntos y curvas fciles de
mite elegir otras formas, adems del 10 Pincel de historia y pincel his- muestra una porcin mayor o menor de modificar en cualquier momento.
marco rectangular. trico. Con ambos se deshacen la zona de diseo y las herramientas.
2 Mover. Se utiliza para desplazar operaciones. La diferencia entre ellos Ir a ImageReady. Lanza la apli-
26 cacin de diseo para la Red Ima-
Como se puede comprobar en sus
capas u objetos de una imagen. consiste en que al utilizar el segundo se paletas de herramientas, hay algunas
3 Lazo, lazo poligonal y lazo
magntico. Permite seleccionar
aaden a la zona modificada efectos pro-
pios de una pintura.
geReady, que acompaa a Photoshop. comunes en Photoshop 7 y Paint
Shop Pro 7. Muchas tareas se pueden
zonas de una imagen. Si dejas el botn 11 Borrador, borrador de fondos Paint Shop Pro 7 realizar con resultados similares en
izquierdo pulsado, muestra el lazo poli- y borrador mgico. El primero ambos casos. La nica diferencia con-
gonal y el magntico. pinta con el color de fondo. El borrador 1 Flecha. Permite mover la imagen siste en el nmero de pasos necesa-
4 Varita mgica. Selecciona una de fondos sirve para destacar elementos seleccionada dentro de la ventana. rios en cada una de las aplicaciones.
zona de la imagen que comparte de una imagen y el mgico hace lo mis- 2 Zoom. Acerca o aleja la imagen Para completar la lista, Paint Shop
un color similar. mo pero de forma automtica. en funcin de si se usa con el bo- Pro 7 tambin dispone de una paleta
5 Recortar. Permite eliminar de 12 Degradado y bote de pintura. tn izquierdo o derecho del ratn. flotante, que se puede colocar en
la imagen la zona que queda fue- La primera rellena una zona con 3 Deformar. Se utiliza para rotar, cualquier lugar de la pantalla, dedica-
ra de la seleccin. un degradado de color. La segunda sirve cambiar de tamao y deformar de da al control del color y con las si-
6 Sector y seleccionar sector. para colorear zonas. forma libre una capa o seleccin. guientes zonas:
Se emplean en la construccin 13 Desenfocar, enfocar y dedo. La 4 Recortar. Adems de recortar Selector de color, estilo y textu-
de webs, para dividir las pginas en primera aplica un efecto de de- zonas a mano, ofrece otras opcio- ras. Es el lugar donde elegir el color que
varias zonas. senfoque a una zona. La segunda lo nes de seleccin por capas. se aplicar a cada una de las herramientas
7 Pincel corrector y parche. Co- contrario. Con la tercera se simula la 5 Mover. Sirve para mover capas, de dibujo y el modo en que aparecer.
pian una zona de la imagen en accin de arrastrar un dedo sobre guas o marcas de seleccin de Bloqueo. Indica si se utilizan las ca-
otra lugar para corregir desperfectos. pintura hmeda. una imagen. ractersticas tpicas de un pincel o las
8 Pincel y lpiz. El pincel se utiliza 14 Sobreexponer, subexponer y
6 Seleccionar. Crea selecciones que se encuentran seleccionadas en el
como herramienta de dibujo natu- esponja. Las dos primeras acla- y permite variar la forma de la instante de dibujar.

N 94 61
94_60_65_Curso 20/5/02 20:20 Pgina 16
Curso
mao. Haz click con el botn derecho

Consejo
Imgenes de mapa de bits sobre la imagen y sta se reducir de
tamao en Paint Shop Pro.
Aunque una imagen ofrezca una cali-
Las fotografas digitales se encuentran dad muy buena en la pantalla y sea di-
fcil apreciar los puntos que la forman,
en un formato llamado bitmap o mapa En Photoshop 7,
de bits, lo cual indica que estn forma-
das por multitud de pequeos puntos o
bits. stos muestran un color cada uno
3 pulsa la techa Alt
del teclado y sin
soltarla, pincha sobre
a la hora de imprimirla, hay que tener
muy en cuenta el tamao o la cantidad
de pxeles que la forman. Procura ver
las fotografas en su tamao real, con
y, en conjunto, dan la sensacin de ser cualquir lugar de la imagen. La vista las herramientas de zoom, para asegu-
una imagen nica. Puedes comprobar- se reducir y podrs ver una zona rarte antes de usar la impresora.
lo con la herramienta zoom de cual- ms extensa de la misma.
quiera de las aplicaciones.
Resumiendo...
Pulsa en el icono de la
1 herramienta zoom. s-
te se transformar en
una lupa con la que podrs pinchar so- 2
Pulsa con el bo-
tn derecho del
ratn sobre la
1 Para agrandar 3 Pulsar zoom 3 Pinchar en la imagen.
2 Para alejar en Paint Shop Pro 3 Botn derecho y arrastrar el puntero.
bre la imagen. Si lo haces con el botn imagen y arrastra el pun- 3 Para alejar en Photoshop pulsar Alt y sobre la imagen.
izquierdo, sta se agrandar. tero, la zona elegida aumentar de ta-
de fondo utilizar el color

Elige un lienzo a tu medida que se encuentre selecciona-
do en la barra de herramien-
tas y Transparente, no mos-
1 Photoshop vo. En la ventana que se abre a conti- trar ningn color, con lo
nuacin, se pueden elegir los parme- que har ms sencillo el tra-
tros del nuevo lienzo. bajo con elementos transpa-
El lugar donde se colocan las imgenes rentes. Aunque en la pantalla
de Photoshop se llama lienzo. Aqu es aparezca un tramado de cua-
donde puedes colocar todas las imge- Escribe el nombre que tendr el RGB si vas a utilizar el monitor, un v- dros, como un tablero de ajedrez, s-
nes que quieras y modificarlas a tu anto-
jo. Sobre el lienzo se colocan las capas,
los objetos o, simplemente, una imagen
2 archivo de la imagen. El formato
en que se guardar la imagen se
aplicar en el momento de guardarla,
deo o la televisin para mostrar tus
imgenes. Si vas a imprimirlas con
buena calidad, selecciona la opcin
tos no se consideran parte de la ima-
gen y no se imprimirn.
nica o fondo. Al abrir una fotografa en ahora no es necesario tenerlo en cuenta. CMYK, ya que es la que ms se acerca a
Photoshop, lo que realmente se abre es Selecciona un tamao para el lienzo en la forma de trabajar de las impresoras.
un lienzo donde la nica imagen corres- la lista. Si no aparece ninguno que se
ponde al fondo de la misma. adapte a tus necesidades, introduce los
datos en pxeles en las casillas de An- La ltima caracterstica que de-
Para crear un documento desde

chura y Altura. Para elegir otro tipo de
medida, pulsa en las flechas situadas a 3 bes elegir es el tipo de fondo
que mostrar el documento.
1 cero, en el que poder importar

cualquier fotografa, abre el me-
n Archivo de la barra superior de he-
la derecha de cada casilla.
Si vas a imprimir la imagen, aumenta
la resolucin que aparece en la casilla
Selecciona Blanco en la lista desple-
gable y pulsa aceptar. La opcin Color
rramientas. Selecciona la opcin nue- siguiente, hasta por lo menos 300 ppp.
Por defecto es 72 ppp
Resumiendo...
(pxeles por pulgada),
que es equivalente a la 1 Abrir men Archivo 3 Seleccionar nuevo.
que muestra un monitor 2 Escribir el nombre 3 Seleccionar tamao 3 Seleccionar el modo de
de ordenador.
Selecciona el modo de color.
color con la flecha de la 3 Seleccionar fondo blanco.
siguiente casilla. Elige
Consejo
2 Paint Shop Pro
Una imagen no gana calidad si se aumen-
ta su tamao, una vez dentro del progra-
Elige la opcin nuevo que se en-
1 cuentra en el men Archivo de la

barra superior de herramientas.
En la venta que se abre a continuacin,
ma. La mxima resolucin que se puede
obtener sin perder detalle es la que tenga
el original en su medio de origen, por
ejemplo, una cmara de fotos digital. Lo
elige un ancho y alto de imagen que se xeles por pulgada. Se refiere al nmero que s es posible, es reducir la resolucin
ajuste a tus necesidades. Para ello, pul- de puntos de la imagen o bits que ca- Selecciona el color blanco en la
2
de una imagen hasta que encaje en la
sa en las flechas que hay junto a las ca- ben dentro de la unidad de medida ele- casilla Color de fondo de la zo- pantalla del ordenador o en una pgina
sillas Ancho y alto o introduce la canti- gida. Cuanto mayor sea la cifra, ms re- na Caractersticas de la imagen. web. De esta forma, se podr ver en su
dad directamente en ellas. La resolu- solucin y calidad podr tener la ima- As, tendrs un fondo blanco que des- totalidad sin necesidad de moverla.
cin que aparece por defecto es 72 p- gen. Elige 300 ppp si vas a imprimir. tacar y te permitir saber si los ele-
62 www.pctoday.es
94_60_65_Curso 20/5/02 20:20 Pgina 17
mentos de tu lienzo han encajado co- Si la imagen se queda pequea
4
Formatos admitidos por Paint Shop Pro 7
rrectamente con el fondo. para tus necesidades, todava
Elige 16.7 millones de colores, ya que puedes ampliar o reducir el ta- Amiga iff (*.IFF)
es la mxima profundidad de color que mao del lienzo. SGI (*.RGB, *.BW, *.RGBA, *.SGI)
permite el programa. En documentos Selecciona la opcin agrandar del men Kodak Digital Camera (*.KDC)
Imagen que se encuentra Tagged Image File Format (*.TIF, *.TIFF)
en la barra de herramien- Windows Enhanced Meta (*.emf)
tas superior. Windows Meta (*.WMF)
Cambia las cifras que Autodesk Drawing Interchange (*.dxf)
muestran la cantidad de Compatible con JPEG y JFIF (*.JPG, *.JIF,
pxeles que tiene el lienzo. *.JPEG)
Selecciona las casillas Compuserve Graphics Interchange (*.GIF)
Centrar la imagen hori- Computer Graphics Metafile (*.CGM)
zontal y verticalmente. Si Corel Clipart (*.CMX)
en blanco y negro o ilustraciones, pue- tienes una imagen en tu lienzo, se situa- Deluxe Paint (*.LBM)
des elegir una cantidad inferior de co- r en el centro del mismo. Vara las can- Dibujo Corel Draw (*.CDR)
lores. Es recomendable elegir una can- Dibujo Ventura/GEM (*.GEM)
tidad alta de colores, incluso si vas a Dr. Halo (*.CUT)
utilizar slo unos pocos, ya que siem- FlashPix (*.FPX)
pre se puede reducir la cantidad de s- tidades de la zona inferior para elegir el GEM Paint (*.IMG)
tos en el ltimo paso de la edicin. lugar en que quedarn los grficos que Kodak Photo CD (*.PCD)
hubiera en tu lienzo, antes de modificar- Lenguaje grfico HP (*.HGL, *.HPG, *.PGL)
lo. Si no haba nada en el lienzo, slo Lotus Pic (*.PIC)
Pulsa Aceptar y tendrs un lien- aparecer con un tamao mayor. Macintosh PICT (*.PCT)
3 zo en blanco donde poder expe-

rimentar con las herramientas
que ofrece el programa. Resumiendo...
MacPaint (*.MAC)
Mapa de bits Porttil (*.PBM)
Mapa de Bits Windows u OS/2 (*.BMP)
Mapa de Bits WordPerfect (*.WPG)
Micrografx Draw (*.DRW)
1 Eligir la opcin nuevo 3 Eligir ancho y alto de imagen. Microsoft Paint (*.MSP)
2 Seleccionar blanco como color de fondo 3 Elegir 16.7 millones de Paint Shop Pro Imagen (*.PSP, *.JLS,
*.PFR, *.TUB)
colores. PC Paint (*.PIC)
Photoshop (*.PSD)
3 Pulsar Aceptar.
Portable Greymap (*.PGM)
4 Seleccionar agrandar 3 Cambiar resolucin 3 Seleccionar Centrar Portable Network Graphics (*.PNG)
Portable Pixelmap (*.PPM)
imagen.
PostScript Encapsulado (*.EPS, *.AI, *.PS)
Raw File Format (*.RAW)
Sun Raster Image (*.RAS)
tn del ratn, des- Tono contnuo SciTex (*.SCT, *.CT)
Selecciona elementos plaza el puntero
hasta que el reci-
Truevision Targa (*.TGA)
Windows Clipboard (*.CLP)
de una imagen piente del ejemplo
est dentro del re-
Windows o Compuserve RLE (*.RLE)
Windows u OS/2 DIB (*.DIB)
En una fotografa, no tienes por qu La imagen que has elegido aparecer cuadro. Suelta el WordPerfect Vector (*.WPG)
estar disconforme con todos los ele- en pantalla. Utiliza la herramienta zo- botn del ratn y Zsoft Multipage Paintbrush (*.DCX)
mentos de la misma. Para seleccionar om hasta que la imagen ocupe casi to- la seleccin aparecer rodeada con una Zsoft Paintbrush (*.PCX)
lo que realmente te disgusta o lo que da la pantalla. lnea discontinua que parpadea.
ms te interesa y modificarlo a tu gus- aceptar. Habrs creado un nuevo do-
to, dispones de varias herramientas cumento con las medidas exactas de
de seleccin. Algunas son ms preci- Accede al men la seleccin que has hecho.
sas que otras, pero es muy importante
saber cul se adapta mejor a cada si-
tuacin y al tiempo disponible. Vamos
3 edicin de la barra
de herramientas su-
perior. Selecciona la op- Elige la opcin Pegar del men
a ver algunas que son comunes a am-
bas aplicaciones.
cin Copiar. Dirgete al
men Archivo y crea un
nuevo documento de la
4 Edicin de la barra de herramien-
tas. El contenido del recuadro de
la seleccin aparecer dentro.
manera que explicamos al Si te fijas en la ventana de la derecha,
1 Photoshop principio de la leccin. en la seccin con el ttulo Capas, ve-
Deja las opciones como rs que hay dos iconos; un recuadro
aparecen en la pantalla de blanco y otro con el contenido de la
Elige una imagen con la que dese- configuracin y pulsa imagen. Las capas contienen los ele-
1 es practicar. En este caso usare-

mos Pimientos.jpg que est en la
carpeta de muestras de Photoshop, Pincha en la herra-
mentos que colocas dentro del lienzo.
En este caso, dispones de una capa
que es el fondo de color blanco y otra
C:\Archivos de Programa\Adobe\Photos-
hop 7.0\Muestras\.
Selecciona la opcin Abrir del men
2 mienta Marco rectan-
gular de la barra de
herramientas principal.
que contiene la imagen que acabas de
pegar. En Photoshop 7, si no cambias
las opciones, se crea una capa nueva
Archivo y bscala en el disco duro. Pul- Pulsa cerca de la esquina superior iz- de forma automtica cada vez que uti-
sa aceptar cuando la hayas encontrado. quierda de la imagen y sin soltar el bo- lizas el comando pegar algn conteni-

N 94 63
94_60_65_Curso 20/5/02 20:20 Pgina 8
Curso
do. Otro mtodo, mucho

ms rpido, de quedarte Resumiendo...
con una zona rectangular
de la imagen y deshechar el resto, es 1 Abrir men Archivo 3 Buscar imagen 3 Pulsar aceptar 3 Utilizar
la herramienta recortar. Seleccinala
en la barra de herramientas, pulsa y zoom.
arrastra en un punto inicial de la ima- 2 Pinchar en Marco rectangular 3 Seleccionar el rea rectangular.
gen, Suelta el botn y una vez que
tengas dentro del rectngulo el rea 3 Copiar 3 Crear documento.
elegida, haz doble clik en el interior 4 Pegar nueva capa.
de la seleccin.
2 Paint Shop Pro al punto de inicio, deja de apretar el un ejemplo, vamos a eliminar el trozo Pulsa cualquiera de las dos te-
Acerca la imagen
botn y comprueba que la lnea de se-
leccin se corresponde con el objeto
que deseas.
de tallo y a aadir el tallo verde de la
zona superior.
Pulsa la tecla Alt y sin soltarla, com-
3 clas de Maysculas que hay en
el teclado. Sin soltarla, rodea el
tallo verde que est encima del tomate.
1 con la herramienta
zoom. Pincha en la
herramienta lazo de la ba- Una vez que has hecho la se-
prueba que junto al puntero del ratn
ha aparecido un smbolo menos. Esto
quiere decir que el contorno que de-
Suelta primero el botn del ratn y
despus la tecla mayscula. El tallo ya
forma parte de la seleccin.
rra principal.
El cursor se transformar en la herra-
mienta que has seleccionado. Haz
2 leccin, siempre puedes aa-
dir o quitar zonas al contorno
que has dibujado. Incluso puedes
finas con la herramienta se restar
del que ya tengas seleccionado. Ro-
dea el tallo del centro de la misma
crear agujeros y zonas independien- forma que lo has hecho con el tomate
tes dentro de una imagen. Para poner en el paso anterior. Cuando termines,
vers que hay una nueva lnea discon-
tinua dentro de la anterior. Ahora la
seleccin comprende slo la zona ro-
ja del tomate.
Resumiendo...
1 Hacer zoom 3 Seleccionar lazo 3 Seguir contorno 3 Soltar botn.
2 Pulsar Alt 3 Rodear el tallo.
click con el botn izquierdo e intenta 3 Pulsar Maysculas 3 Rodear el tallo 3 Soltar botn del ratn 3 Soltar
seguir el contorno de una de las pie-
zas que aparecen en la imagen sin le- maysculas.
vantar el dedo. Cuando hayas llegado
Uso de la mscara rpida que deseas seleccionar, lo haces con la

que quieres eliminar. Para cambiar las
propiedades de la imagen que indica la
Photoshop Selecciona el botn Mscara rpida mscara, haz doble click en el botn
que se encuentra en la zona inferior mscara rpida y aparecer una venta-
El modo mscara rpida que ofrece de la caja de herramientas principal. na de opciones. Elige ah, el color que
Photoshop permite utilizar las herra- Comprueba que la zona seleccionada tendrn las reas que quedarn en la
mientas tpicas del dibujo, como pince- anteriormente, es la nica que con- zona de mscara, el de las selecciona-
les, para crear selecciones. Se trata de serva los colores originales. El resto, das y la transparencia. Pulsa Ok.
una forma rpida y sencilla de hacer muestra un tono rojizo, que indica
que los bordes de las reas selecciona- que no est dentro de la seleccin.
das sean ms suaves o que ofrezcan un Cualquier accin que realices con las un poco las seleccin, haz click en la he-
estilo ms natural y perfecto. herramientas de dibujo, har que va- rramienta pincel de la barra principal, y
re la seleccin actual. Un buen ejem- pinta el borde de la imagen hasta que to-
plo es el pincel, que permite dibujar da la zona que deseas delimitar est li-
Crea una seleccin en Photos- selecciones y aprovechar sus posibili- bre de color.
1 hop con cualquiera de las he-

rramientas especiales de la ba-
rra principal y el mtodo explicado
dades de grosor, trasparencia o dure-
za. Con el borrador, se puede elimi-
nar la seleccin, algo tambin muy
El mtodo de trabajo es mucho ms
sencillo si en lugar de pintar la zona
en pasos anteriores. til y rpido.

Resumiendo...
Pulsa el botn
2 Editar modo
estndar, que
se encuentra junto al de Mscara rpida.
1 Crear una seleccin 3 Seleccionar Mscara rpida.
2 Pulsar Editar modo estndar de la mscara rpida 3 Seleccionar
herramienta pincel 3 Elegir las opciones de la mscara rpida 3
As volvers a la situacin original con
las reas seleccionadas delimitadas por Pintar las zonas que delimitan la seleccin.
lneas discontnuas. Ahora, ajustaremos
64 www.pctoday.es
94_60_65_Curso 20/5/02 20:20 Pgina 9
Curso
Selecciona ms rpidamente Atajos de teclado

Photoshop la herramienta Resaltador La mayora de las acciones que se Ctrl + N Nuevo documento.
de bordes que se encuentra realizan con el ratn, tanto en Ctrl + O Abrir documento.
Una de las herramientas ms avanzadas en la barra de la izquierda, o Photoshop como Paint Shop Pro, se Ctrl + S Guardar documento.
de Photoshop 7 es el filtro Extraer. ste la tecla B del teclado, para activarla. pueden acelerar mediante el uso Ctrl + C Copiar.
permite seleccionar perfiles y zonas de del teclado. La pulsacin de algunas Ctrl + V Pegar.
una imagen que, de otra forma, reque- combinaciones de teclas, no slo Ctrl + X Cortar.
riran mucho trabajo y paciencia. Te En la seccin Opciones de he- ahorran tiempo, sino que enrique- Mayus + Herramienta seleccin
mostramos cmo seleccionar el fondo
de una imagen, para poder eliminarlo
o sustituirlo por otro.
2 rramienta, que se encuentra a
la derecha de la ventana, elige
el tamao 15 de pincel. Con el botn
cen los resultados, ya que permiten
acciones ms complejas. Algunas
de las ms utilizadas durante el
curso sn:
Aadir a la seleccin.
Alt + Herramienta seleccin
Restar a la seleccin.
Ctrl + Z Deshacer accin.
izquierdo del ratn, pulsa y arrastra el
cursor alrededor de la figura que de-
Es aconsejable que elijas una foto- seas seleccionar, como muestra la
1 grafa que contenga una silueta

bien definida,
por ejemplo, la del
combinacin de teclas Ctrl+Z o elige
Deshacer del men Edicin de la ba-
rra superior. Cuanto ms estrecha y
para el fondo,
que se diferencie
bien del resto de
guila que se en- ajustada sea la lnea trazada, ms pre- colores de la
cuentra entre las cisa ser la operacin y la seleccin imagen, con los
muestras de Pho- saldr mejor. Tambin puedes activar botones Resaltar
toshop, aguila.psd. la casilla resaltado suavizado para que y Rellenar. Pin-
Selecciona la op- la lnea se ajuste sola. cha en la zona
cin Extraer del imagen. Si deseas que el color sea di- que deseas con-
men Filtro que se ferente y que se distinga mejor del fon- servar de la ima-
encuentra en la ba- do, cmbialo en la seccin resaltar. Selecciona la herra- gen y pulsa en el botn previsualizar.
rra de herramientas superior. Pulsa en Puedes dejar de hacer click en cual-
quier momento y retomar el trazado
despus, la nueva lnea se aadir a la
3 mienta relleno en la co-
lumna de la izquierda,
que est representada por un bote de
Pulsa el botn aceptar si ests de
acuerdo y podrs ver la imagen libre
del fondo y lista para continuar con la
anterior. Si te equivocas, utiliza la pintura. Elige un color para el trazado y siguiente entrega del curso.
Resumiendo...
1 Abrir imagen 3 Seleccionar filtro Extraer 3 Pulsar la tecla B.
2 Elegir tamao pincel 15 3 Pulsar y arrastrar.
3 Seleccionar la herramienta relleno 3 Elegir colores 3 Pulsar en la
zona a conservar 3 Previsualizar 3 Aceptar.
Formatos admitidos por Photoshop 7

The GIMP, la alternativa gratuita
Photoshop (*.PSD, PDD)
Las herramientas que utiliza- herramienta predilecta para Archivo PICT (*.PCT, *.PICT)
remos durante el curso, no este tipo de trabajo. BMP (*.BMP, *.RLE, *.DIB)
son las nicas disponibles. Respecto a los formatos gr- Compuserve GIF (*.GIF)
Junto a desarrollos de gran- ficos que acepta, incluye los Photoshop Encasulated PostScript (*.EPS)
des compaas de software, ms habituales como PSD de Photoshop DCS 1.0 (*.EPS)
tambin se pueden encontrar Photoshop, aunque ste slo Photoshop DCS 2.0 (*.EPS)
buenos programas gratuitos para adquirir datos. Es capaz Filmstrip (*.FLM)
como the GIMP, de crear animaciones en for- JPEG (*.JPG, *.JPEG, *.JPE)
www.gimp.org. Es un progra- mato MPEG y los habituales Mapa de bits inalmbrico (*.WBMP, *.WBM)
ma que no para de mejorar, GIF o PNG de cara a Internet. PDF genrico (*.PDF, *.PDP, *.AI)
gracias a su cdigo abierto y En cuanto a las caracters- EPS genrico (*.AI3, *.AI4, *.AI5, *.AI6, *.
que cualquiera puede modifi- ticas y herramientas de edi- AI7, *. AI8, *. PS, *.EPS)
car con total libertad. cin, admite capas y canales PCX (*.PCX)
Adems, ofrece versiones, fil- alfa para trabajos avanzados. Photoshop PDF (*.PDF, *.PDP)
tros y complementos nuevos Todo esto, con unos requisi-
Retocar imagen de Acrobat (*.PDF, *.AI,
cada pocos das. Otro punto The GIMP, www.gimp.org, utiliza ventanas flotantes tos que no exigen una
*.PDP)
a su favor es que no slo se para mostrar todos los elementos del programa. mquina demasiado potente
Photo CD de Kodak (*.PCD)
limita al sistema Windows o edicin en castellano y en otras len- o moderna, a partir de
Mac, sino que est disponible tambin Windows 98 y 64 Mb de RAM. Pixar (*.PXR)
guas diferentes al omnipresente PNG (*.PNG)
para Linux y otros sistemas operativos ingls. Esto es fruto del trabajo de Tambin puedes encontrar el progra-
RAW (*.RAW)
menos habituales. Es muy importante, miles de entusiastas que lo consideran ma en www.softonic.com, con una
destacar que al poco tiempo de lan- pequea explicacin de cmo descar- Scitex (*.SCT)
el mejor software para la edicin de
zarse una nueva versin, aparece su garlo, totalmente en castellano. Targa (*.TGA, *.VDA, *.ICB, *.VST)
imagen. stos lo han convertido en su
TIFF (*.TIF)
N 94 65
95_54_59_Curso 3/6/04 11:13 Pgina 14
Curso
Corrige tus fotos

Tanto Photoshop como Paint Shop Pro son poderosas aplicaciones que permiten realizar sorprendentes
efectos visuales, pero adems ambos poseen excelentes herramientas para el control de la imagen,
con las cuales podrs mejorar notablemente el aspecto de tus fotografas digitales.
L
a mayora de los usuarios que La sutileza al iluminar una foto,
Gua del curso han probado alguna vez Pho- puede crear un clima y una atmsfera
toshop o Paint Shop Pro, se- muy particular; una composicin sosa
guramente han jugueteado a in- o sin inters, puede transformarse en
tentar hacer montajes fotogrficos una imagen hermosa, en un placer para
Selecciones sencillas. Mscara rpida. Extraer. The GIMP. PC Today n 94 (por ejemplo, reemplazar un persona- la vista, con una correcta iluminacin.
2. Corrige el aspecto general de tus fotos. je por otro, eliminar algn elemento La disposicin de los elementos de
Brillo y contraste, capas de ajuste, tono, exposicin y color. PC Today n 95 no deseado, etc.). Son caractersticas una imagen tambin se puede modifi-
3. Tcnicas de reparacin de fotos (I). espectaculares que hoy en da estn al car ligeramente, sin que se note, para
Reparar manchas y texturas, corregir polvo y rascaduras, eliminar el moir. PC Today n 96 alcance de cualquier persona con un corregir los efectos de la improvisa-
4. Tcnicas de reparacin de fotos (II). ordenador y un poco de habilidad. cin o la falta de tiempo cuando hi-
Eliminar araazos rectos, borrar elementos no deseados, minimizar manchas. PC Today n 97 Pero muchos pasan por alto algu- ciste una foto.
5. Recreando fotos creativamente. nas funciones muy sencillas de ambos En este captulo del curso de Foto-
Fondos personalizados, bordes y marcos creativos, modificar personajes. PC Today n 98 programas, con las cuales es posible grafa Digital aprenders a utilizar
6. Embellecer y refinar retratos. mejorar notablemente el aspecto estas sencillas herramientas, pero so-
Eliminar defectos de la piel, enfoque suavizado, disimular el paso del tiempo, general de las fotografas, tanto bre todo a entrenar tu ojo y tu buen
mejorar los retratos con luz. PC Today n 99
de las tomadas digitalmente como las gusto para conseguir los mejores re-
escaneadas del papel. sultados en las fotos digitales.
54 www.pctoday.es
95_54_59_Curso 3/6/04 11:14 Pgina 15
cacin Previsualizar para ver cmo

Trabajar con brillo y contraste afectarn los cambios introducidos a la
imagen final. Intenta que la imagen sea
Si ajustamos correctamente los niveles Consejo ntida, con un buen contraste, y que se
de brillo y contraste, podemos mejorar observen los detalles con gran claridad.
de un modo notable el nivel de detalle y En Photoshop 7, los valores de brillo y
nitidez de cualquier fotogafa. Son par- contraste pueden funcionar de manera
metros que afectan radicalmente a la Haz click en el botn Aceptar
calidad de cualquier imagen. Incluso
pueden "salvar" algunas fotografas to-
automtica, con el uso de parmetros
estandarizados. Para ello v al men
4 para que los cambios se apli-
quen a tu fotografa. Para modificar los valores de
madas en malas condiciones, como in-
teriores con escasa iluminacin, o con-
traluces al aire libre. Antes de conocer
Imagen, selecciona Ajustes y abre Nive-
les Automticos (o pulsa el atajo de te-
clado Mays.+Ctrl+L). Ten en cuenta
que esta caracterstica, al ser "estanda-
3 Luminosidad y Porcentaje de
contraste, introduce la cantidad
directamente en la casilla correspon-
su funcionamiento, es importante defi- rizada", funciona de manera similar so- diente, pulsa en las flechas hacia arri-
nir claramente qu significan: bre todas las imgenes, con lo que no ba o hacia abajo o despliega el men
Brillo: Es la luminosidad u oscuri- siempre obtendrs unos resultados pti- representado por los tringulos y eli-
dad relativa al color, y se mide ha- mos. Si no ests seguro de haber obte-
bitualmente mediante un porcenta- nido un buen resultado con Niveles Au-
je comprendido entre 0 (negro) y tomticos, mejor utiliza Brillo y Contraste
100 (blanco). manualmente, segn tu propio criterio.
Contraste: Es el ajuste de las luces y
las sombras de la imagen. Los pxeles con algo de tiempo y prctica conse-
ms claros y los ms oscuros, se con- guirs resultados cada vez mejores.
vierten a blanco y a negro, respecti-
vamente; as mejora notablemente el
aspecto de imgenes fotogrficas. Photoshop Paint Shop Pro
En el men Archivo, selecciona Desde el men Archivo, selec-
1 Abrir y escoje la imagen de tu dis-

co duro o CD. Haz click en Abrir. 1 ciona Abrir. Luego elige una
imagen, seleccinala, y haz
click en el botn Abrir.
ge una de las cifras de la barra que
aparecer. Puedes ampliar o reducir
el rea que quieras visualizar para
poder observar los detalles que t
prefieras. Tambin puedes pulsar en
la flecha que se encuentra a la iz-
Existe un ejemplo muy sencillo de quierda del icono del ojo y, as, verifi-
aplicacin de brillo y contraste en la car los cambios que se produzcan en
vida cotidiana: el control de ilumina- la fotografa, de forma automtica.
cin del televisor. Ambos parmetros
se ajustan en forma independiente,
pero se aplican con la misma intensi- Haz click en el botn Aceptar
dad en toda la imagen.
Los controles de brillo y contraste
2
Abre el cuadro Brillo y Contraste
desde el men Imagen, luego
2
Accede al men Colores de la
barra de herramientas supe- 4 de la zona inferior para aplicar
las modificaciones que hayas

trabajan con cualquier modo de co- elige Ajustes y finalmente selec- rior. Despliega las opciones elegido en el paso anterior.
lor, pero para el siguiente ejemplo ciona el apartado Brillo y Contraste. Se que cuelgan de la seccin Ajustar.
prctico, es recomendable que utili- abrir el cuadro de dilogo. Luego selecciona Luminosidad/Cons-
ces alguna foto que encuentres, en traste (o pulsa la combinacin de te-
blanco y negro (escala de grises), o clas Maysculas+B); se abrir un
incluso alguna instantnea que consi- cuadro de dilogo.
deres muy oscura, para comprender
mejor su funcionamiento.
En ambos casos, observa la imagen
detenidamente, e intenta conseguir un Resumiendo...
equilibrio entre las zonas iluminadas y
las ms oscuras; los blancos no deben Photoshop
estar sobreexpuestos (exceso de luz),
ni las zonas oscuras deben aparecer Una vez en la nueva ventana, des- 1 Abrir men Archivo 3 Seleccionar imagen
como grandes manchas totalmente ne-
gras. Lo ideal es conseguir el mayor ni-
vel de detalle y "suavidad" posibles en
3 plaza ambos reguladores hacia
la derecha, cada uno en forma
independiente (tambin puedes teclear
2 Ir al Men Imagen 3 Seleccionar Ajustes 3 Abrir Brillo y Contraste
3 Mover los dos reguladores hacia la derecha 3 Previsualizar
la foto. Experimenta y entrena tu ojo, los valores); marca la casilla de verifi- 4 Click en Aceptar para aplicar los cambios
Paint Shop Pro

1 Elegir Ir al Men Archivo 3 Escoger Abrir 3 Seleccionar fotografa 3
Abrir
2 Ir al Men Colores 3 Escoger Ajustar 3 Luminosidad y Contraste
3 Aumentar la luminosidad haciendo click en las flechas
4 Click en Aceptar para aplicar los cambios
N 95 55
95_54_59_Curso 3/6/04 11:14 Pgina 16
Curso
Utilizar capas de ajuste momentnea-

mente oculta,
Consejo
y podrs ver la Las capas de ajuste pueden modificar
Antes que nada: Qu son las capas y res que hemos ingresado si el aspecto imagen sin los tambin otras variables, como Nive-
cmo se utilizan? Las capas funcionan general no es satisfactorio. cambios que les, Tono y Saturacin, Equilibrio de
como si fueran hojas transparentes, has aplicado. Color, Curvas, Correccin selectiva,
que pueden apilarse unas sobre otras. Este procedi- etctera. Ms adelante aprenders a
Cada una de esas capas es indepen- Photoshop miento es muy til para comparar c- utilizar las capas de ajuste combina-
diente, de tal manera que si se trabaja mo era la imagen antes de los cam- das con los modos de fusin, y obten-
sobre una de ellas, el resto de capas no Abre el men Capa, selecciona bios, y cmo ha quedado despus de
1
drs cada vez ms herramientas para
se modifican. Es posible mover los ob- Nueva capa de ajuste y finalmente los cambios. retocar y corregir tus fotos digitales.
jetos que se encuentran en cada capa, elige Brillo / Contraste.
o cambiar el orden de apilado. Lo que la casilla de verificacin. En la solapa
estaba abajo puede moverse arriba, o Modifica la opacidad de la capa Ajuste del mismo cuadro de dilogo,
viceversa. Al tener aislados los distintos
elementos que componen una imagen,
gozamos de una enorme libertad para
5 de ajuste, moviendo el regula-
dor (desplazando el regulador a
la derecha, los cambios sern mas in-
modifica los parmetros de Luminosidad
y Constraste moviendo los reguladores.
Tu misin siempre es conseguir una
retocarlos o reubicarlos, sin preocu- tensos, y movindolo hacia la izquierda imagen que no sea borrosa. Cntrate en
parnos por estropear el resto. los cambios se- la claridad de los detalles.
En Photoshop y Paint Shop Pro puedes rn ms leves).
encontrar varios tipos de capas: Intenta conse-
Capas de texto: Permiten escribir, guir siempre Cuando
editar y modificarl el texto. una imagen nti-
da y pura. 3 hayas
consegui-
do que la imagen
Ponle un nombre a la nueva capa sea lo suficiente-
2 (por ejemplo Brillo Nuevo) y

deja el resto de valores exacta-
mente igual que como aparecen por de-
Paint Shop Pro
Ve al men Capas, elige Nueva
mente ntida,
pulsa en Aceptar
para aplicar los
fecto (modo normal, opacidad 100%).
1 capa de ajuste, y selecciona Lu-
minosidad / Contraste.
cambios a la fo-
tografa.
En la Paleta Capas observa la ca-
Capas vectoriales: Permiten crear

trazados y formas vectoriales.
4 pa de ajuste que has creado. Pue-
des modificar su opacidad, mo-
viendo el regulador que aparece en el
Capas de relleno: En stas se sector derecho de la ventana. Si la opaci-
pueden aplicar motivos, patrones o dad est por
degradados. Se abrir la ventana Propiedades ejemplo al
Capas de ajuste: Son las que ms
nos interesan para manipular foto-
grafas digitalmente.
2 de capa. En la solapa General,
pon un
nombre a la
50%, los ajus-
tes de brillo y
contraste se
Las capas de ajuste permiten modificar capa, deja el reducirn y se-
la informacin de color de los pxeles Se abrir el mismo cuadro de Modo de Mez- rn ms leves.
ubicados por debajo de ellas; nos dan la
posibilidad de experimentar con varia-
ciones de tono y de color, sin necesidad
3 dilogo de Brillo y Constraste
que ya conoces, pero el resul-
tado de este trabajo ser distinto ya
cla en Normal,
Opacidad
100%, y tilda
Evita contras-
tar demasiado la imagen, ya que puede
pixelarse y perder sutileza.
de modificar sus pxeles constantemen- que lo aplicars a una Capa de Ajuste.
te. Los cambios se aplican slo a la capa Mueve los reguladores hacia la dere-
de ajuste y afectan a la capa subyacente. cha buscando la mayor nitidez posi-
En otras palabras, la capa de Resumiendo...
ajuste funciona como un "filtro",
a travs del cual podemos ver las Photoshop
capas inferiores.
Las capas de ajuste afectan a to- 1 Ir al Men Capa 3 Nueva Capa de Ajuste 3 Elegir Brillo y Contraste
das las capas ubicadas debajo; 2 Nombrar la nueva Capa 3 Dejar valores por defecto 3 Aceptar
algo smamente til ya que po-
demos corregir varias capas a 3 Mover reguladores hacia la derecha 3 Verificar cambios 3 Aceptar
la vez con un solo ajuste, en lugar de ble en la imagen. Tras verificar los 4 Ir al men Ventana 3 Elegir Capas 3 Observar Capa de Ajuste
efectuar cada retoque por separado. cambios pulsa el botn Aceptar.
Aplicar variables simples como brillo y 5 Modificar opacidad de la capa buscando nitidez
contraste (o algunas ms complejas
como niveles, tono, saturacin, etc.) Abre el men Ventana, y elige Paint Shop Pro
mediante las capas de ajuste, otorga un
mayor control, y minimiza el margen
de error, ya que los cambios son apli-
4 Capas para
observar la
capa de ajuste que
1 Ir al Men Capas 3 Nueva Capa de Ajuste 3 Luminosidad/Contraste
2 Nombrar Capa 3 Opacidad 100% 3 Aumentar Luminosidad
cados slo a la capa elegida, y no a la has creado. Si ha-
imagen real. De esta manera, pode- ces click en el 3 Click en Aceptar
mos eliminar cuando queramos la ca- icono del ojo, la 4 Ir a la Paleta Capas 3 Reducir la opacidad de la Capa
pa de ajuste, o bien modificar los valo- capa queda
56 www.pctoday.es
95_54_59_Curso 3/6/04 11:14 Pgina 17
El tono, las curvas y el contraste El cuadro de dilogo curvas

Photoshop y Paint Shop Pro cuentan haz click en el punto de control y sin sol-
con un arma an ms poderosa para tar el botn izquierdo desplzalo hacia
modificar los ajustes de brillo y con- abajo, para oscurecer las sombras.
traste de una imagen: la herramienta
Curvas. sta nos permite controlar
cada una de las 256 sombras en for- Pulsa Aceptar. Como resultado,
ma independiente.
La herramienta Curvas puede ajustar la
gama de tonos de una imagen, modifi-
4 las sombras ahora son ms os-
curas, y las luces ms claras, de
manera que la fotografa est ms con-
cando cualquier punto de la escala to- trastada y tiene mejor definicin.
nal entre 0 y 255. De esta manera se
consigue un control an mayor que
con la herramienta Niveles, ya que sta
trabaja solamente en tres variables, lu-
ces, sombras y medios tonos.
Photoshop
Abre el men Imagen, despliega
1 el submen Ajustes y luego elige

Curvas (o si prefieres pulsa el
atajo de teclado Ctrl + M).
1 Canal: con l puedes restringir
la correccin de brillo y con-
traste a un canal determinado.
2 Grfico de curva: el eje hori-
5
cambiar entre los distintos
modos de trabajo con curvas.
Cargar / Guardar: carga o
guarda una configuracin de
Paint Shop Pro zontal representa los valores curvas, para luego aplicarla
de luminosidad originales (de en otra imagen.
Dirgete al men Colores y selec- entrada), y el vertical, los 6 Suavizar: permite suavizar la
1 ciona la opcin Ajustar. Final-

mente elige Curvas.
nuevos valores de luminosi-
dad (de salida). En la lnea
diagonal (aparece por defec-
to) todos los pixeles tienen
los mismos valores de entra-
7
8
curva creada. Muy til en el
modo Mapa Arbitrario.
Auto: el programa realiza los
ajustes automticamente.
Previsualizar: muestra el re-
da y salida. sultado parcial del efecto de
3 Entrada / Salida: permite ver nuestros cambios, a medida
los valores de entrada y de que los vamos realizando.
Pulsa Ctrl y haz click simultne-
2
salida del punto de la curva. 9 Punto blanco, negro, y escala
amente en un rea clara de la 4 Modo Curva / Modo Mapa Ar- de grises: muestrea los tres
imagen que veas opaca, de ma- bitrario: con ellos puedes valores a partir de la imagen.
nera que necesite mas iluminacin. Es-
to aadir automticamente una marca En el Pulsa el icono que ces y las sombras sea pa-
(llamada punto de control) en el grfi-
co de Curvas. En el cuadro de dilogo 2 cuadro
de di-
logo Curvas,
4 representa un ojo
para ver cmo
afectan los cambios a la
rejo. Las sombras deben
haberse oscurecido, y las
luces deben ser ms cla-
haz click en imagen. Finalmente haz ras, consiguiendo una
una zona infe- click en Aceptar cuando mejor nitidez y mayor

rior de la dia- el equilibrio entre las lu- contraste en la imagen.
gonal, para de-
jar una marca
en ella. Luego
haz otro click en una zona superior de la Resumiendo...
misma diagonal, agregando otra marca.
Photoshop
Mueve ambas marcas en forma 1 Ir al Men Imagen 3 Seleccionar Ajustes 3 Abrir Curvas
Curvas, haz click en el punto de control
que acabas de crear, y sin soltar el bo-
tn izquierdo del ratn muvelo hacia
3 independiente (primero una, y
luego la otra), conseguirs que
la lnea recta se curve formando una
2 Hacer Ctrl + click en zonas claras 3 Mover punto de control para
aclarar an ms 3 Observar cambios
arriba para aclarar las luces de la foto. S. Para mover las marcas debes hacer 3 Ctrl + click en zonas oscuras 3 Mover punto de control para oscure-
Observa los cambios en la fotografa.
cer an ms 3 Observar cambios
4 Click en Aceptar para aplicar los cambios
Pulsa Ctrl y haz click click en un
3 rea os-
cura que
necesites en-
Paint Shop Pro
1 Ir al Men Colores 3 Seleccionar Ajustar 3 Abrir Curvas
s o m b r e c e r.
Nuevamente 2 Click dos veces la diagonal 3 Dejar dos marcas
aadirs otro 3 Mover marcas para formar una S
punto de con- click en ellas y luego arrastrarlas, co-
trol al grfico. A gidas por los manejadores, sin soltar 4 Click en O j o para ver modificaciones 3 Aceptar
continuacin el botn izquierdo del ratn.
N 95 57
95_54_59_Curso 3/6/04 11:15 Pgina 8
Curso
Corregir y mejorar la exposicin En la Paleta Colores, selecciona
Ms de una vez te debe haber sucedido Selecciona toda la superficie del

3 el color Gris 50% haciendo
click en la muestra.
que despus de sacar una gran cantidad

de fotos de momentos irrepetibles de tu
vida, ya sea con una cmara tradicional
3 lienzo de la nueva capa; para ello
te dirgete al men Seleccin y
elige Todo (o la combinacin de teclas
o con una digital, te has quedado decep- Ctrl + A). Unas lneas punteadas rodea- En la misma ventana de Propie-
cionado con el resultado. Demasiada luz
u oscuridad han arruinado tus fotos. Es-
to se debe a problemas en la exposicin.
rn toda la
superficie de
la imagen,
2 dades de la Capa, abre el men
desplegable Modo de Mezcla.
Busca y se-
En fotografa tradicional, la exposicin mostrndote lecciona la
es el tiempo que debe permanecer a la toda el rea opcin Som-
luz una placa fotogrfica o un papel sen- selecciona- bra. Sin salir
sible, de manera que quede impreso. da. Final- de la ventana
Cuando recibe demasiada luz, se dice mente relle- actual, en el
que est sobreexpuesta, y cuando es de- na la nueva apartado
masiado oscura est subexpuesta. capa con el Opacidad,
Puede que hayas tomado fotografas en color Gris completa las
condiciones forzadas, como un contra- 50% del si- modificaciones de la opacidad inro-
luz, o bien que por alguna razn no se guiente mo- duciendo el nmero 70 en la casilla
haya encendido el flash en el momento do: ve al me- correspondiente. El resto de opciones
de la instantnea. Tambin, el paso del n Edicin y no son importantes en este momento Ve a la Barra de Herramientas, y
tiempo, la luz solar, o la humedad, pue-
den daar tus viejas fotografas en papel.
Siempre es conveniente comenzar a tra-
selecciona Rellenar. En el cuadro de di-
logo Rellenar, selecciona Color Frontal.
y las dejaremos como estn. Haz click
en Aceptar para validar los cambios. 4 selecciona el Bote de Pintura.
Ahora haz click en cualquier
punto de la imagen (recuerda que es-
bajar con una fotografa bien expuesta, ts trabajando sobre la nueva capa que
sin embargo a veces el fotmetro puede Sin salir has creado), para rellenar automtica-
fallar, las pilas de la cmara se agotan,
o el clima puede resultar adverso. Co-
mo consecuencia, los recuerdos imbo-
4 del mis-
mo cua-
dro de dilogo,
Consejo
Si deseas mejorar alguna vieja foto im-
presa en papel, y dispones adems de
rrables de tu vida se desvanecen. Aun- en el Modo de
que la tecnologa no suele hacer mila- Fusin, abre el su negativo, escanea siempre el negati-
vo, ya que con l obtendrs mejores re-
gros, es posible mejorar o corregir mu- men contex-
sultados (muchos escneres actual-
chos de estos problemas de exposicin tual. Busca y mente cuentan con esta utilidad de se-
con las herramientas adecuadas. selecciona Su- rie). Incluso un negativo extremadamen-
bexponer Co- te sobreexpuesto o subexpuesto,
Photoshop lor. Esto oscu- siempre contendr ms informacin y
recer la ima- detalles que la copia que hayas hecho
Ve al men Capa, selecciona Nueva gen de un mo- mente la capa de color gris. La imagen
1 Capa (te interesa ponerle un nom-

bre para identificarla, nmbrala
por ejemplo Capa para oscurecer).
do muy
pronunciado.
en papel. Por eso siempre es bueno
conservar los negativos, adems de las
impresiones fotogrficas.
debe haber mejorado notablemente,
estando equilibrados los tonos oscuros
y los tonos claros.
Ve a la paleta Capas, y selecciona
5 la capa que has creado haciendo

click en su nombre: Capa para
oscurecer, vara su opacidad del 100%
Resumiendo...
al 70% desplazando el regulador hacia Photoshop
1 Ir al Men Capa 3 Crear N u e va Capa 3 Ponerle nombre
2 Paleta Muestras 3 Seleccionar Gris 50%
3 Ctrl + A para seleccionar todo el lienzo 3 Ir al men Edicin 3
Rellenar capa con Gris
4 Cambiar Modo de Fusin 3 Subexponer Color
la izquierda, o tecleando los valores. La
5 Ir a Paleta Capas 3 Seleccionar Capa 3 Reducir Opacidad al 70%
imagen ahora debe tener una correcta
exposicin (no debe estar demasiado
iluminada, ni demasiado oscura).
Paint Shop Pro
En la paleta Muestras, selecciona
2 el Gris al 50%. Sita el puntero

del ratn sobre las muestras, y un
men emergente te informar del valor
Paint Shop Pro
1 Ir a Paleta Capas 3 Click en icono para Crear Nueva Capa 3 Nombrar Capa
2 Abrir Modo de Mezcla 3 Seleccionar Sombra 3 Completar Opacidad:
70 3 A c e p t a r
de cada co- En la paleta Capas, haz click en el
lor. Cuando
halles el Gris
50% selec-
1 icono de la esquina superior iz-
quierda, para crear una nueva
Capa. Nombra la nueva Capa como
3 Ir a Paleta Colores 3 Seleccionar Gris 50%
4 Seleccionar Bote de Pintura 3 Click en la imagen 3 Rellenar la capa
cionalo ha- Capa para oscurecer, escribindolo con gris
ciendo click. en el mismo cuadro de dilogo.
58 www.pctoday.es
95_54_59_Curso 3/6/04 11:15 Pgina 9
Optimizar el color Paint Shop Pro

muestra los cambios que se vayan
produciendo mientras modificas los
valores siguientes.
Seguramente la mayora de tus fotos cuestin de observar detenidamente Ve al men Capas, elige Nueva
(tanto en papel como digitales) son a
todo color. Por lo tanto, es importante
la imagen, agudizar la vista, y realizar
paso a paso el siguiente ejemplo 1 Capa de Ajuste, y selecciona el
apartado Niveles. Desplaza los reguladores hasta
que conozcas algunos fundamentos b-
sicos de su mundo. Si comprendes
profundamente los rudimentos del co-
prctico para aprender a corregir tus
fotos utilizando los Niveles: 3 quitarle saturacin al color.
Primero puedes hacerlo de for-
ma drstica para ver el efecto y, des-
lor y de la luz, seguramente podrs pus, en intervalos suaves para conse-
aplicar retoques y mejoras a tus foto- Photoshop
grafas con mucha ms calidad.
Existen bsicamente dos tipos de color: Crea una nueva capa de Niveles:
el aditivo, y el sustractivo.
Colores aditivos: Se forman a
partir de una fuente de luz; por
1 para ello, accede al men Capa,
elige Nueva Capa, y selecciona
Niveles. Como la imagen est satura-
ejemplo, los colores de tu monitor
son aditivos ya que
utilizan la luz co- Si no has modificado la confi-
mo fuente.
Cuando los co-
lores pri-
2 guracin por defecto del pro-
grama, vers que aparece la
solapa correspondiente a la seccin
marios se Ajuste. En el
suman men co-
(de ah el rrespon- guir un efecto ms acorde con tus in-
nombre da de color, el Histograma (el grfico diente a las tenciones. Ten en cuenta que en el
de aditivo) que muestra el cuadro de dilogo Ni- capas, ob- apartado Nivel de Entrada, los colores
crean el color veles) se muestra muy cargado en la serva los canales de color y seleccio- se aclaran si desplazas el regulador
blanco. Observa la imagen en que parte izquierda. na el que se encuentre ms saturado. hacia la izquierda, y el siguiente Nivel
la suma del rojo, verde y azul dan Haz click en el icono que representa de Salida,
por resultado el blanco. una flecha y un ojo para que a conti- se aclara
Colores sustractivos: El color se nuacin se active la opcin y que te movindo-
determina por la absorcin de la lo hacia la
luz. Cuando los colores secunda- derecha.
rios (cian, ma- Consejo Las barras
genta y ama- de colores
rillo) se Cuando la correccin de una fotografa que se en-
combinan, mediante el uso de Capas de Ajuste cuentran
crean el Busca alguna zona de la foto que comienza a complicarse, lo mejor es en la zona
negro
(co-
m o
2 pudiera ser originalmente de
blanco pu-
ro, o bien la ms
volver a empezar. Recuerda que al tra-
bajar solamente en una capa, no ests
modificando los pixeles reales de la
foto, con lo cual puedes eliminar la ca-
inferior de
la pantalla
sirven pa-
mues- iluminada. Debes ra mostrar
tra la observar deteni- pa y crear una nueva. Otra alternativa las modificaciones que se producen
es crear varias Capas de Ajustes, con
imagen). damente la gama en la zona seleccionada. La superior
distintos niveles y variaciones cada
La impresin de tinta sobre papel (re- de colores y utili- representa los tonos del original,
una, de manera que puedas comparar
vistas, peridicos, etctera) es un zar el sentido co- entre un resultado y otro. Recuerda
mientras que la inferior lo hace con
ejemplo de color sustractivo. Pero pa- mn para decidir cul elegir. Coge la he- que puedes ocultar y mostrar cual- los nuevos valores que hayas aplicado.
ra conseguir negros puros y sombras rramienta Cuentagotas Blanco (el terce- quier capa pulsando en el icono del Cuando la foto luzca colorida y bri-
ms intensas, se aade tinta negra en ro cuentagotas de la derecha, dentro del Ojo (en Photoshop), o en el icono de llante (los colores deben ser ntidos y
el proceso de impresin. mismo cuadro de dilogo) y con dicha Gafas (en Paint Shop Pro). bien diferenciados entre s), haz click
Mediante la combinacin de los colo- herramienta haz click en la fotografa, en el botn Aceptar.
res primarios aditivos, se obtienen los sobre la zona potencial de blanco puro.
colores primarios sustractivos, y
combinando los primarios sustracti-
vos se obtienen los primarios aditi- Observa el resultado parcial en Resumiendo...
vos. Te preguntas para qu sirve este
trabalenguas? Pues para algo im-
portantsimo: comprender esta rela-
3 la fotografa que has modifica-
do: de esta manera, habrs eli-
minado la dominante de color. Si el re-
Photoshop
cin opuesta. Por ejemplo, si en una sultado an es 1 Ir al Men Capa 3 Crear nueva Capa de Niveles 3 Ver Histograma
imagen predomina demasiado el co- una imagen al- 2 Buscar zona blanca 3 Hacer click con cuentagotas blanco
lor azul, hay que aumentar el amari- go oscura,
llo (adems de disminuir el azul, cla- desliza el pe- 3 Dominante de color eliminada 3 Aclarar los semitonos
ro est). El amarillo neutraliza al azul queo tringu-
ya que ste es su opuesto. El resulta- lo correspon- Paint Shop Pro
do: una imagen con menos azul y diente al me-
mucha ms calidad! dio tono gris, 1 Men Capas 3 Nueva Capa de Ajuste 3 Elegir Niveles
Rebusca entre tus lbumes familiares, con pequeos 2 Elegir canal saturado 3 Click en ojo para ver cambios
y seguramente encontrars alguna fo- incrementos
to que haya salido muy oscura, con hacia la iz- 3 Mover reguladores para quitar saturacin 3 Aceptar
algn color dominante. Ahora es quierda.
N 95 59
96_52_57_Curso 17/6/04 11:11 Pgina 14
Curso
Tcnicas de reparacin
Las actuales cmaras digitales permiten tomar instantneas, reemplazando los viejos negativos por pequeas
tarjetas de memoria. Pero es muy probable que tus viejas y ms preciadas fotos (impresas en papel) estn
daadas por el paso del tiempo. Puedes salvarlas con tan slo escanearlas y seguir los pasos que te mostramos.
P
uede que guardes an muchas A menudo suele ser un trabajo duro
Gua del curso fotos familiares, cientos de ins- y fatigoso corregir este tipo de pro-
tantneas de tus padres, abue- blemas en las viejas fotografas im-
los y dems ancestros. Sin empresas en papel. Sin embargo, las po-
bargo es muy posible que las fotos es- sibilidades de los programas de reto-
Selecciones sencillas. Mscara rpida. Extraer. The GIMP. PC Today n 94 tn sucias, con manchas de humedad, que fotogrfico hacen que este tipo
2. Corrige el aspecto general de tus fotos. decoloridas y llenas de polvo. El pri- de correcciones se pueda resolver en
Brillo y contraste, capas de ajuste, tono, exposicin y color. PC Today n 95 mer paso para salvarlas es digitalizar- unos cuantos y sencillos pasos. Slo
3. Tcnicas de reparacin de fotos (I). las. Con la ayuda de un escner es muy habr que aislar el problema y actuar
Reparar manchas y texturas, corregir polvo y rascaduras, eliminar el moir. PC Today n 96 sencillo convertir esos frgiles trozos con la herramienta ms adecuada pa-
4. Tcnicas de reparacin de fotos (II). de papel o diapositivas en ficheros de ra cada situacin.
Eliminar araazos rectos, borrar elementos no deseados, minimizar manchas. PC Today n 97 nuestro ordenador. Finalmente, tampoco hay que olvidar
5. Recreando fotos creativamente. Para el siguiente paso te servirs de que es posible que por diversas razo-
Fondos personalizados, bordes y marcos creativos, modificar personajes. PC Today n 98 tres herramientas: Adobe Photoshop, nes tambin las fotos tomadas con una
6. Embellecer y refinar retratos. Jasc Paint Shop Pro y PC Today. Te cmara digital muestren defectos pare-
Eliminar defectos de la piel, enfoque suavizado, disimular el paso del tiempo, mostraremos cmo solucionar los pro- cidos a los que aparecen en antiguas
blemas de limpieza de cualquier foto fotografas. En ese caso el proceso de
que est deteriorada. restauracin es el mismo.
58 www.pctoday.es
96_52_57_Curso 17/6/04 11:11 Pgina 15
Dirgete una vez ms a la Barra

Reparar manchas y texturas 3 de Herramientas y escoje la he-
rramienta Tampn de Clonar.
Luego desde la Barra de Propiedades,
Tanto Adobe Photoshop como Jasc Paint realiza la siguiente configuracin:
Shop Pro poseen una innumerable canti- despliega el men Pin-
dad de herramientas para el retoque di- cel y escoje un grosor
gital de fotografas. Sin embargo, algunas
de ellas podran ser clasificadas como
mgicas, ya que consiguen unos resul-
tados increblemente sorprendentes con de 15 pxeles y bordes
una gran sencillez en su uso. Nos referi- suavizados; en Modo selecciona Nor-
mos al Pincel Corrector y el Tampn de mal, Opacidad 100%, Flujo 100%, y
Clonar (en Photoshop) y el Pincel de Co- marca la opcin Alineado.
pia (en Paint Shop Pro).
El funcionamiento de estas herramientas
es similar, aunque cada una posee algu- cha o textura como marcas de dedos,
nas caractersticas que las diferencian huellas, etctera.
entre s. A grandes rasgos, con stas he- A continuacin trabajars en de- Paint Shop Pro
rramientas es posible tomar muestras de
la imagen, y pintar con ellas en un rea Desde la Barra de Herramien- 4 talle. Tomars muestras sanas
de la imagen, y las reproducirs Abre el men Archivo, en el me-
distinta o incluso en otra imagen. De es-
te modo podemos copiar zonas de textu-
ras (como cielos, rboles, tejidos, piel,
2 tas de Photoshop (suele encon-
trarse a la izquierda del rea de
trabajo) elige la Herramienta Zoom,
sobre las partes daadas. Busca una zo-
na de la foto en buen estado. Con la He-
rramienta Tampn haz click mientras
1 n desplegable elige Abrir. Tam-
bin puedes pulsar el atajo Ctrl +
O para abir imgenes, o bien pulsar el
etctera) y reproducirlas en la zona don- la reconocers enseguida ya que es el presionas la tecla Alt, para tomar una icono de la carpeta abierta en la Barra
de sea conveniente. Son herramientas icono de la lupa. Puedes tambin ac- muestra de la imagen. Luego suelta la te-
cla Alt, y comienza a pintar sobre el rea
daada. Mientras pintas, Photoshop te
muestra dos cursores: el que ests utili-
de Herramientas Estndar.
Luego escoge alguna foto-
grafa manchada que hayas
escaneado previamente, o que tengas
almacenada en tu disco duro.
imprescindibles a la hora de retocar ceder a ella pulsando la

cualquier fotografa. En cuanto al Pincel letra Z. Ahora debes
Corrector de Photoshop (includo desde acercarte a la zona en
la versin 7), ste no solamente toma donde se encuentra la zando para pintar, y una cruz que indica
como fuente una muestra de la imagen, mancha, para trabajar la zona de muestra. Debes elegir zonas
sino que adems compara la textura, va- en detalle: haz click cercanas y similares (en cuanto a luz y
lores de brillo, luz y contraste. con la lupa, y sin soltar textura) para que el retoque sea prcti-
En el siguiente ejercicio aprenders a el botn del ratn, des- camente impreceptible
eliminar una gran mancha utilizando al- plzalo de izquierda a
gunas de las herramientas de clonacin.
Puedes utilizar estas tcnicas para repa- Desplzate por la imagen, bus- Una vez abierta la imagen, am-
rar detalles que no aparecen en la foto
por otro tipo de problemas (mal encua-
dre, objetos en primer plano...)
5 cando zonas defectuosas, utili-
zando
el Navegador
2 pla el rea sobre la cual traba-
jars. Para ello, dirgete a la
Paleta de Herramientas, y haz click en
de Photos- el icono de la lupa (herramienta

hop. Abre el
Photoshop men Venta-
na, y elige Na-
Desde el men Archivo, seleccio- vegador para
1 na Abrir y escoje la imagen que

hayas escaneado en tu disco du-
ro. Haz click en Abrir. Intenta elegir al-
que se abra la
paleta.
mostrar una
Te
Acercar). Am-
guna foto vieja, que tenga alguna man- derecha y de arriba miniatura de pla el rea de
abajo. Se dibujar un la fotografa la foto que vas
recuadro delimitador, y por la que a corregir, ha-
al soltar te habrs acer- podrs des- ciendo click
cado al detalle como si plazarte mo- con la lupa, y
hubieras colocado una viendo el rec- desplazando
lupa sobre esa zona. tngulo rojo. sin soltar el
N 96 59
96_52_58_Curso 17/6/04 11:33 Pgina 16
Curso
botn del ratn, para trabajar con producirlas tapando la mancha. Al pa- do un pincel mucho mas fino, ya que
gran detalle. sar el cursor corregirs los defectos.. laz zonas son ms intrincadas y pose-
en ms detalle. Modifica el grosor del
pincel desde la Paleta de Configura-
A continuacin elige la herra- cin. Una cifra cercana a 10 segura-
3 mienta Pincel de Copia desde la

Paleta de Herramientas. En la
Paleta de Configuracin, completa con
mente te servir. En cualquier caso y
dependiendo de la textura a corregir
es posible que tengas que ajustar el
los siguientes parmetros: forma Re- grosor del pincel.
donda, Tamao 20, Definicin 70,
Opacidad 100, Paso 25, y Densidad Consejo
100. Una miniatura te mostrar la si-
Tanto en Photoshop como en Paint
Shop Pro, es conveniente que utilices
pinceles pequeos y trazos cortos para
clonar; as conseguirs copiar texturas
de una manera ms fiel, y evitars de-
Comienza a tomar muestras de
lueta del pincel que has configurado. Si

ests trabajando con una foto muy pe-
4 zonas que no estn daadas en
la imagen, y que posean tonos y
texturas similares a los daados. Para 5
Para co-
rregir la
mancha
fectos como copiar zonas no deseadas,
o inclusive zonas con iluminacin dife-
rente, lo cual producir que el efecto
del truco sea muy visible. El trabajo de
quea, utiliza una cifra menor para el ello pulsa maysculas mientras haces sobre la chupa clonar y pintar con zonas clonadas re-
tamao del pincel, te permitir trabajar click en la zona elegida de la imagen. de cuero, se quiere de mucha paciencia, y sobre to-
con ms detalle. El resto de solapas de Por ejemplo, para la parte superior del han tomado do horas y horas de prctica para lo-
la Paleta de Configuracin, djalas tal hombro, se han utilizado como mues- muestras de la grar resultados ptimos.
cual vienen por defecto. tra partes sanas de la pared, para re- misma, utilizan-
Resumiendo...
Photoshop Paint Shop Pro
1 Archivo 3 Abrir 3 Seleccionar imagen 3 Abrir 1 Men Archivo 3 Abrir 3 Seleccionar fotografa 3 Abrir
2 Herrramienta Zoom 3 Hacer click y desplazar el cursor3 Ampliar zona 2 Herramienta Acercar 3 Hacer cl i c k y desplazar 3 Ampliar zona
defectuosa defectuosa
3 Tampn de Clonar imagen 3 Ir a Barra de Propiedades 3 Configurar 3 Ir a Paleta de Herramientas 3 Elegir Pincel de Copia 3 Ir a
Ta m p n Configuracin 3 Definir parmetros del pincel
4 Click + Alt para tomar muestras vlidas 3 Pintar sobre rea daada 4 Maysculas + Click para tomar muestras 3 Pintar zonas defectuosas
5 Abrir Navegador 3 Desplazarse por la imagen 3 Seguir corrigiendo 5 Paleta Configuracin 3 Modificar grosor del pincel 3 Seguir corrigiendo
tu escner, te ahorarrs mucho tiempo

Corregir polvo y rascaduras en el posterior tratamiento digital que
realices. Recuerda que el polvo nunca
Existen muchas y muy variadas tcnicas Debes tener bien claro algo muy im- se encuentra en los archivos digitales,
para eliminar el polvo y las manchas portante para minimizar los problemas sino que se ha depositado a lo largo
de las viejas fotos; lo ideal es conocer antes de tiempo: la limpieza de tu esc- del tiempo sobre los negativos o en las
la mayora de ellas, para usarlas en ner. Aunque muchas viejas fotos ya es- copias de papel.
forma combinada, de acuerdo al pro- tan daadas o sucias por el paso del Para limpiar tu escner sigue los con-
blema particular de cada foto. tiemo, si mantienes limpio el cristal de sejos del manual del fabricante; como
regla general, lo ideal es usar un pao
limpio, que no forme pelusas, utilizn-
dolo apenas humedecido con muy po-
co agua (nunca mojado). Jams utili-
ces sustancias abrasivas como limpia-
cristales o alcohol. Crea una nueva capa de la si-
Photoshop
2 guiente manera: dirgete al me-
n Capa, selecciona Nueva, y del
men desplegable elige Capa. Tambien
puedes pulsar el atajo de teclado Ma-
En primer lugar abre el men Ar-
1 chivo y selecciona la opcin

Abrir. En la ventana que eparece,
escoje una imagen que se encuentre en
tu disco duro o CD. Haz click en Abrir.
60 www.pctoday.es
96_52_57_Curso 17/6/04 11:11 Pgina 17
ys. + Ctrl + N. En el cuadro de dilo- paso 3), y en la Barra de Propiedades En la Paleta de Herramientas, has seleccio-
go que se abrir, ponle un nombre a la
capa (por ejemplo Correccin de
despliega el men Pincel y define el
grosor (puedes escribir el tamao, o
desplazar el regulador).
3 elige la herramienta Lazo. Luego
te desplzate con el
cursor sobre la parte am-
nado con la
herramienta
de lazo en el
pliada de la foto, y realiza paso anterior.
una seleccin a mano alza-
Ahora es el moda, rodeando el rea defec-
6 mento de trabajar
directamente so-
bre las manchas de pol-
tuosa de la foto. Eso que ests hacien-
do es realizar una seleccin, de mane-
ra que a continuacin puedas trabajar 5
En el cuadro de dilogo Quitar
Polvo haz lo siguiente: en Tama-
o de los granos (pixeles) escri-
Manchas), deja todos los valores por vo. Con la Herramienta Desenfocar se- solamente sobre dicha rea, mientras be 3, en Sensibilidad 5, y haz click so-
defecto, y pulsa OK. leccionada, haz click sin soltar el bo- el resto de la foto queda intacto. bre el icono del ojo para observar el re-
tn en cada mancha. Cuanto ms tiem- sultado parcial. Si las manchas de polvo
po dejes pulsado el botn, el son muy visibles an, marca el aparta-
Acude al cuadro de herramientas, do Accin Agresiva. En el mismo cua-
3 y selecciona la Herramienta De-

senfocar (tambin puedes pulsar
la tecla R). En la Barra de Propiedades,
dro de dilogo puedes ver un antes y un
despus de aplicar Quitar Polvo. Si las
que se encuentra en la parte superior

del rea de trabajo,
ajusta las variables de la Consejo
Debes encontrar el equilibrio justo entre
desenfoque ser mayor, y as desapa- un desenfoque sutil y uno exagerado.
herramienta de la si- recern las manchas de polvo. Realiza Procura no desenfocar demasiado las
guiente forma: Modo la tarea con paciencia, intentando que manchas, ya que la imagen podra que-
Normal, Intensidad el rea corregida sea lo ms homog- dar con unas salpicaduras de desenfo-
100% y activa Usar todas las capas. nea posible. que, en lugar de las manchas de polvo.
La clave es encontrar el punto justo del
suavizado, sin que se note ningn tipo de
retoque ni correccin. Tmate tiempo pa- marcas de polvo an se ven, modifica
ra aprender esta tcnica, ya que slo re- los nmeros y previsualiza el resultado.
quiere prctica y un buen ojo observador. Cuando el resultado sea satisfactorio,
pulsa Aceptar para aplicar los cambios.
Procura adaptar el tamao del pincel a
Dirgete al Cuadro de Herra- Paint Shop Pro A continuacin, en la Barra de cada mancha. Ten en cuenta que de
4 mientas, y elige la herramienta

Zoom (puedes pulsar la tecla Z Desde el men Archivo, seleccio- 4 Herramientas Foto, haz click
sobre el icono llamado Quitar
acuerdo a cada foto, las variables cam-
bian por lo cual debers probar con el
para seleccionarla). Ampla el rea de
1 nas Abrir (o pulsa la combina- Polvo. De esta manera aplicars filtro viejo mtodo de ensayo y error hasta

la foto que vas a corregir, haciendo cin Ctrl + O). Luego elige una fotogrfico digital sobre el rea que obtener un buen resultado.
click con la lupa, y imagen, la seleccionas, y haces click en
desplazando el cursor el botn Abrir.
Resumiendo...
sin soltar el botn del
ratn. De esta manera Photoshop
podrs trabajar con 1 Archivo 3 Seleccionar Imagen 3 Abrir
mucha presicin sobre las manchas.
2 Capa 3 Crear nueva Capa 3 Ponerle nombre 3 Aceptar
A continuacin debes ampliar to-
2 do lo que puedas el rea sobre la

cual trabajars. Para ello, dirge-
te a la Paleta de Herramientas, y haz
3 Seleccionar Herramienta Desenfocar 3 Configurar sus propiedades
4 Herramienta Zoom 3 Hacer cl i c k y desplazar 3 Ampliar rea de
correccin
clicken el icono de la lupa (la herra-
mienta se llama 5 Herramienta Desenfocar 3 Ir a Barra de Propiedades 3
Acercar). Ampla
el rea de la foto Configurar tamao de pincel
que vas a corre- 6 Hacer click sobre cada mancha 3 Pulsar ms tiempo para desenfocar ms
Ahora debes configurar el tama- gir, haciendo
5 o del pincel, para que coincida

aproxi-
madamente
click con la lupa,
y desplazando sin soltar el botn del ra-
tn, as trabajars con gran presicin.
Paint Shop Pro
1 Archivo 3 Seleccionar Imagen 3 Abrir
con el tamao
de las man- 2 Paleta de Herramientas 3 Seleccionar Lupa 3 Acercar imagen
chas. Para
ello, vuelve a 3 Paleta de Herramientas 3 Seleccionar Lazo 3 Realizar seleccin
seleccionar la 4 Herramientas Foto 3 Seleccionar Quitar polvo
Herramienta
Desenfocar 5 Tamao de granos 3 3 Sensibilidad 5 3 Previsualizar 3 Aceptar
(como en el
N 96 61
96_52_57_Curso 17/6/04 11:23 Pgina 8
Curso
Despus de escanear la foto, di-

Elimina el efecto Moir 2 rgete al men Archivo y selec-
ciona Guardar Como, o pulsa la
tecla F12. Completa el cuadro con el
Si tienes alguna foto impresa (ya sea de nombre de archivo que te apetezca, y
una revista, peridico, folleto, etcte- en Tipo selecciona TIF.
ra) y deseas conservarla en formato di-
gital, este truco es para ti.
En cualquier revista (includa la que tie-
nes entre tus manos), las imgenes se
conforman de unos muy pequeos pun-
tos, debido a la separacin de los cuatro
Ahora abre el men Filtro, elige
5 Enfocar, y selecciona finalmente

Mscara de Enfoque. En el cua-
dro de dilogo Mscara de Enfoque,
completa los siguientes valores: Canti- V al men Efectos, elige Ruido,
3 y selecciona de la lista el Filtro

Mediana. Completa el cuadro de
dilogo tecleando 2 en el apartado
Apertura de Filtro. Pulsa el icono del
ojo para previsualizar el resultado. Fi-
nalmente, haz click en Aceptar.
colores durante el proceso de impre- Dirgete al men Filtro, elige
sin. Al escanear pginas impresas y
abrirlas en la pantalla de tu ordenador,
notars que la imagen ha quedado cu-
3 Ruido, y finalmente selecciona
Mediana. En el cuadro de di-
logo llamado Mediana, completa la
bierta por unos molestos patrones de variable Radio con el nmero 2. Pue-
color; esto empeora la calidad de la foto, dad: 50%, Radio: 3 pixe-
y se llama efecto moir. les, Umbral: 5 niveles.
Si tienes un escner y quieres digitali- Con este filtro de enfoque,
zar alguna foto previamente impresa, finalmente habrs logrado
lleva a cabo los siguientes pasos. eliminar (o reducir, en al-
gunos casos), el molesto
efecto moir.
Photoshop des marcar la casilla Ver para previ-
sualizar el resultado. Acepta pulsando
Coloca la fotografa impresa so- el botn OK. Finalmente, abre el men Ar- Dirgete al men Imagen, y
1 bre el cristal de tu escner. Inicia

el proceso de digitalizacin, de-
pendiendo del software que utilices
6 chivo, y selecciona Guardar pa-
ra aplicar y conservar en un ar-
chivo los cambios que acabas de rea-
4 abre Redimensionar. Se abrir
un cuadro de dilogo. Debes
hacer click en la casilla Tamao real /
(habitualmente, para escanear debes ir lizar en tu fotografa. de impresin, y solamente modificar
al men Archivo, y luego seleccionar
Paint Shop Pro

Coloca la foto en tu escner, y
1 abre el men Archivo, luego elige

Importar, selecciona TWAIN y fi-
nalmente Adquirir para iniciar el pro-
V al men Imagen, y selecciona ceso de digitalizacin. Completa con
Importar). Completa con los siguientes

parmetros el cuadro de dilogo de tu
4 Tamao de Imagen. En el cua-
dro de dilogo Tamao de Ima-
gen, modifica so-
los siguientes parmetros el cuadro de
dilogo de tu escner: Modo > Foto-
grafa a color, RGB. Resolucin / Entra-
escner: Modo: Fotografa a color, lamente los si-
RGB. Resolucin / Entrada: 718 dpi guientes valores:
(pixeles por pulgada). Escalar: 100%. Resolucin: tipea
Conserva los ajustes por defecto del 300 (pixeles por
resto de variables. pulgada). Marca
las casillas de veri-
ficacin de Res-
Una vez escaneada la imagen, v tringir Proporcio-
2 al men Archivo, y selecciona

Guardar Como. Pnle el nombre
que quieras a tu foto, y gurdala en for-
nes, y Remuestre-
ar la Imagen. De-
ja intactos los
da> 718 dpi (pixeles por pulgada). Es-
calar: 100%. Conserva los ajustes por
el apartado Resolucin, tipeando el
nmero 300. Deja como estn el res-
mato TIF. dems valores. defecto del resto de variables. to de los valores de la ventana.
62 www.pctoday.es
96_52_57_Curso 17/6/04 11:12 Pgina 9
Consejo Resumiendo...
Aunque la tcnica descripta en este pa-
so a paso logra excelentes resultados, Photoshop
lamentablemente no es infalible ni mi-
1 Colocar foto en el escner 3 Configurar la digitalizacin 3 Escanear
lagrosa. Hay fotos que tienen una trama
tan marcada, que difcilmente pueda 2 Archivo 3 Guardar Como 3 Nombrar archivo
suprimirse por completo. En algunos
casos, debers conformarte con mejo- 3 Filtro 3 Elegir Ruido, Mediana 3 Radio 2 3 Aceptar
rar y enfocar un poco la imagen. Una 4 Imagen 3 Tamao de imagen 3 Completar 300 dpi
ltima sugerencia: mira detenidamente
el software de tu escner, ya que algu- 5 Filtro 3 Enfocar 3 Aplicar Mscara de Enfoque 3 Aceptar
Para finalizar tu trabajo con la
nos incluyen la opcin de destramar
al digitaliza. Utilzalo para mejorar an
mas tus resultados. 6 imagen, desde el men Archivo
selecciona Guardar para as
aplicar los cambios realizados y con-
6 Archivo 3 Guardar
Paint Shop Pro

servarlos en tu fotografa.
1 Colocar foto en el escner 3 Configurar la digitalizacin 3 Escanear
A continuacin haz click en el
5 men Efectos, luego elige Acen-

tuar, y selecciona Mscara de
desenfoque. En el cuadro de dilogo,
2 Archivo 3 Guardar como TIF 3 Nombrar archivo
3 Efectos 3 Elegir Ruido, Filtro Mediana 3 Tipear 2 3 Aceptar
4 Imagen 3 Redimensionar 3 Tipear 300 dpi
completa con los siguientes valores:
Radio: 3, Potencia: 50, Diferencia: 5. 5 Efectos 3 Mscara de Desenfoque 3 Tipear valores 3 Aceptar
Haz click en Aceptar para aplicar los
cambios. En este momento el efecto 6 Archivo 3 Guardar
moir debera haber desaparecido.
V al men Filtro, elige Desenfo-

Reducir la textura del papel 2 car, y selecciona Desenfoque
gaussiano. En el cuadro de dilo-
go, slo debes completar el apartado Ra-
pincel de 70 pixeles, y en Opacidad te-
clea 50%. Si tu foto es muy pequea,
A principios del siglo XX, las antiguas Photoshop dio tecleando el nmero 2. Esto difumi- elige un pincel ms fino.
empresas de fotografa (florecientes en
aquella poca), comenzaron a ofrecer Abre la foto escaneada (desde el
un tipo de papel texturado, muy origi-
nal y avanzado para esos tiempos; se-
guramente en tu cajn encontrars al-
1 men Archivo, eligiendo Abrir).
Luego v al men Capa, y selec-
ciona Duplicar Capa. En el cuadro de 4
Tu tarea a continua-
cin es la ms delica-
da. Debes pintar
guna foto de tu abuelo en un papel con dilogo, deja Fondo Copia como con el pincel las zonas ms
esas caractersticas. importantes de la foto (co-
Pero hoy, en el siglo XXI, estas fotos nar un poco la imagen, y har la textura mo los rasgos de la cara, o elementos
suelen resultar bastante problemticas del papel menos perceptible. Para apli- en primer plano). Al hacer click y mo-
a la hora de escanear. La textura del car los cambios pulsa el botn OK. ver el cursor sobre la foto, notars que
papel proyecta sombras en la imagen las zonas pintadas se oscurecen y enfo-
que dificultan su visin y claridad. nombre por defecto. Luego pulsa so- can. Deja intactas las zonas secunda-
A continuacin te ofrecemos un truco bre el botn OK. rias como el fondo del retrato. El de-
para corregir el texturado del papel; es
un poco laborioso y lleva tiempo domi-
narlo. No te desanimes con los prime-
ros resultados y sigue practicando has-
ta devolver a tus viejas fotos el esplen-
dor de hoy.
Abre el men Capa, elige Aadir senfoque aplicado en el paso anterior
3 mscara de capa, y finalmente

haz click en Descubrir todas. A
continuacin, desde la Paleta de Herra-
har que la textura sea menos percep-
tible. Cuando la foto no est borrosa, y
las zonas importantes queden bien
mientas elige el Pincel. V a la Barra de destacadas, v al men Archivo y haz

Propiedades y configura un grosor de click en Guardar.
N 96 63
96_52_57_Curso 17/6/04 11:28 Pgina 10
Prctico
Paint Shop Pro Personalizar pinceles para retoque

Abre el men Archivo, luego se-
1 lecciona la opcin Abrir. Marca

el fichero que contiene la foto es-
caneada previamente, desde tu disco
Aunque Photoshop y Paint
Shop Pro ofrecen una
enorme cantidad de pin-
principio los resultados sern
algo imprevisible, seguramente
duro o cualquier otro soporte. celes y variantes de los

mismos, tambin es posi-
ble crear pinceles perso-
nalizados; algo tremen-
damente til en cualquier
tarea de retoque fotogr-
fico. Por ejemplo, puedes
crear un pincel a partir de con la prctica podrs controlar
una textura de piel, para a fondo tus propios pinceles. Es
corregir defectos en un divertido y estimulante crear
Dirgete al men Efectos, selec- muy grueso, cambia su valor desde el rostro (arrugas, marcas pinceles personalizados con tex-
2 ciona Desenfoque y luego elige

Desenfoque de Gauss. En el
cuadro de dilogo, completa tecleando
apartado Tamao. de acn, etctera). O
tomar muestras de cielo
o csped, luego crear tus
pinceles personalizados, y
turas. Puedes crear tantos pin-
celes como te apetezca, y
recuerda almacenarlos correcta-
mente para su posterior utiliza-
el nmero 2 en el apartado Radio. Si Consejo corregir fotos de paisajes. cin (en el caso de Photoshop
Algo muy interesante y puedes utiliza el Gestor de
Un truco interesante (al tiempo que di- sorprendente, es utilizar Ajustes Preestablecidos para
vertido) a la hora de digitalizar fotos con las herramientas habi- organizarlos). Tanto en
papeles texturados: prueba inclinar las tuales de retoque (como Photoshop como Paint Shop Pro
fotos en distintos ngulos, sobre el cristal el Tampn de Clonar) en tienes la posibilidad de dar un
del escner, para luego digitalizarlas. De- conjunto con un pincel nombre a cada pincel: aprove-
bido a que el escaner hace un barrido personalizado: puedes cha esta posibilidad dando a tus
con su haz de luz, probablemente ilumi- clonar la textura de una pinceles algn nombre descripti-
ne de manera distinta de acuerdo a la in- tela, y reproducirla en vo, para que puedas localizarlo
en la previsualizacin observas que la clinacin del papel. En algn caso te sor- otro sitio agregndole un con mayor rapidez (por ejemplo
foto est demasiado borrosa, en lugar prenders ya que la textura se puede tor- toque personal con la Pincel suave con textura de
de 2 escribe 1. nar casi imperceptible. El azar tambin textura que has utilizado piel) y optimizar tu trabajo.
existe en el mundo digital en tu pincel. Aunque al Finalmente, investiga y aprende a
configurar sus variantes (son
casi infinitas!) para explotar al mxi-
mo sus posibilidades en el retoque
Ahora haz click y mueve el cursor fotogrfico. Cntrate sobre todo en el
4 sobre las zonas destacadas de la

foto, como rasgos (en el caso de
un retrato), o elementos en primer pla-
no (por ejemplo, en un paisaje). Hazlo
con tranqui-
lidad, bus-
V a la Paleta de Herramientas, y cando que
3 elige el pincel Retoque (es el

icono de la mano). A
continuacin v a la Paleta
slo se des-
taquen los
elementos
de Configuracin, y completa primordia- tipo de bordes del pincel
con los siguientes datos: For- les, y sin La configura- (nunca deben ser muy
ma: Redonda. Tamao: 32. Definicin: preocuparte cin de un duros), y recuerda que lo
0. Opacidad: 40. Paso: 25. Densidad: por el resto pincel nos ms importante al editar
permitir rea-
100. Y lo ms importante, en Modo de que resultar algo difuminado. Cuando lizar retoques
digitalmente una foto es
Retoque selecciona Oscurecer RVA. la foto quede equilibrada y la textura del con mucha que el resultado sea lo
Desplaza el cursor sobre la fotografa. papel se haya atenuado, v al men Ar- precisin. ms natural posible.
Si observas que el pincel es muy fino o chivo y selecciona Guardar.
Resumiendo...
1 Abrir archivo 3 Ir al men Capa 3 Duplicar Capa 3 O K 1 Archivo 3 Elegir foto 3 Abrir
2 Filtro 3 Elegir Desenfoque Gaussiano 3 Tipear 2 3 O K 2 Click en men Efectos 3 Desenfoque de Gauss 3 Escribir 2 en el campo
3 Capa 3 Aadir mscara de capa 3 Click en Pincel 3 Configurar de cantidad
propiedades 3 Elegir Pincel de Retoque 3 Paleta Configuracin 3 Configurar pincel
4 Pintar zonas destacadas 3 Enfocar reas 3 Archivo 3 Guardar 4 Pintar zonas destacadas 3 Enfocar reas 3 Men Archivo 3 Guardar
64 www.pctoday.es
97_50_56_Curso 5/7/04 02:28 pm Pgina 14
Curso
Tcnicas de reparacin II
Tanto en fotografas tomadas digitalmente, como en instantneas escaneadas, puede haber desde pequeos
defectos que empobrecen la imagen, hasta grandes errores como objetos o elementos que entorpecen la
armona de la composicin. Te enseamos ms trucos y secretos para manipular tus fotos digitalmente.
L
a mayora de la gente puede Los programas Adobe Photoshop y
Gua del curso observar fotografas, y descu- Paint Shop Pro te dan las herramien-
brir errores y defectos a golpe tas necesarias para que puedas corre-
de vista: manchas, araazos, gir este tipo de errores. PC Today te
zonas borrosas o desenfocadas, ojos ensea todas las claves y trucos en es-
Selecciones sencillas. Mscara rpida. Extraer. The GIMP. PC Today n 94 rojos, etctera. Todos son proble- te curso, y a ti te corresponde poner
2. Corrige el aspecto general de tus fotos. mas habituales tanto en la fotogra- creatividad e ingenio para combinar
Brillo y contraste, capas de ajuste, tono, exposicin y color. PC Today n 95 fa tradicional como en la digital. todas estas tcnicas y obtener los me-
3. Tcnicas de reparacin de fotos (I). Pero agudizando un poco ms la jores resultados.
Reparar manchas y texturas, corregir polvo y rascaduras, eliminar el moir. PC Today n 96 observacin, hay veces que en las fo- Ten siempre en tu mente lo ms im-
4. Tcnicas de reparacin de fotos (II). tos encontramos elementos que no portante: en este curso, vers trucos
Eliminar araazos rectos, borrar elementos no deseados, minimizar manchas. PC Today n 97 aportan nada a la escena, y que ade- muy puntuales para resolver proble-
5. Recreando fotos creativamente. ms entorpecen la armona de la mas concretos que presentan muchas
Fondos personalizados, bordes y marcos creativos, modificar personajes. PC Today n 98 composicin; estos no son considera- fotografas. Una vez que los aprendas,
6. Embellecer y refinar retratos. dos como errores, pero si no estu- tu misin es combinar las tcnicas
Eliminar defectos de la piel, enfoque suavizado, disimular el paso del tiempo, vieran all, probablemente la fotogra- que has aprendido. Con la prctica
fa gozara de una mayor belleza, o su podrs conseguir resultados especta-
mensaje sera mucho ms claro. culares en muy poco tiempo.
56 www.pctoday.es
97_50_56_Curso 5/7/04 02:28 pm Pgina 15
Repite los pasos 2, 3 y 4 para

Eliminar araazos rectos
Es muy comn que al escanear foto- sar el icono de
5 corregir los dems araazos.
Recuerda que al realizar la se-
leccin con Marco Fila nica, debes
Consejo
Shop Pro, es mejor que utilices las he-
grafas, cualquier mnimo rastro de Marco Rectan- usar las flechas del teclado para acer-
polvo estropee la digitalizacin de la gular durante carte lo ms posible al rea daada. rramientas de este ejercicio (Marco Fila
imagen, creando algunas finas lneas un segundo. nica, y Eliminar Rayaduras) con un
rectas, tanto en forma vertical como Ahora acrcate con el cursor lo ms grosor similar al de las rayas, para ob-
tener resultados ptimos. All radica la
horizontal. Tambin puede suceder que puedas al araazo, y haz click; se
clave de este truco. Ten paciencia e in-
que simplemente el negativo se en- formar una seleccin que abarcar tntalo varias veces, hasta dar con el
cuentre rayado, de manera que el re- todo el ancho de la imagen, y tendr grosor de herramienta que ms se
velado presentar algn araazo. slo un pxel de alto. ajuste a las rayaduras. No escatimes en
Para eliminar araazos rectos, Pho- ampliar la imagen con el zoom todo lo
toshop provee una herramienta suma- que haga falta, ya que as obtendrs la
mente til (y muy poco utilizada): la precisin necesaria para que el retoque
herramienta Marco Columna nica, sea perfecto.
Abre el men Archivo y elige Guardar
para salvar los cambios.
Paint Shop Pro

Abre el men Archivo, y en el
1 men desplegable elige Abrir.

Tambin puedes pulsar el atajo
Ctrl + O, o bien pulsar el icono de la
carpeta abierta en la Barra de Herra-
que crea una seleccin de tan slo un continuacin debes copiar in-
pxel, que te permitir corregir este ti-
po de defectos. En cuanto a Paint
Shop Pro, debes utilizar la herramien-
3 formacin sana de los pxeles
ms cercanos al a las rayadu-
ras. Utiliza las teclas de flecha de tu 3
A continuacin elige la herra-
mienta Eliminar Rayaduras des-
de la Paleta de Herramientas
ta Eliminar Rayaduras. teclado, para moverte hacia arriba o (icono de esptula). En la Paleta de
Sigue paso a paso el ejercicio para re- Configuracin, debes escribir el Ancho
solver este tipo de problemas, y re- mientas Estndar. Luego escoge alguna
cuerda: si no ests del todo conforme fotografa rayada que hayas escaneado
con tus resultado, combina sta tcni- previamente, o que tengas guardada
ca con otras que has aprendido en el en tu disco duro, y haz click en Abrir.
curso. De nada valen las mejores he-
rramientas, si no se utilizan con inge- en cantidad de
nio y creatividad. pxeles que quieres dar a la herramien-
ta . En el ejemplo hemos utilizado un
hacia abajo y localizarlos. Si es nece-
Photoshop sario, ampla la vista pulsando la
combinacin de teclas Ctrl + + para
Desde el men Archivo, elige trabajar con precisin.
1 Abrir y escoge la imagen que

presente algn araazo en for-
ma de lneas ms o menos rectas. Haz
click en Abrir.
valor de 2 pxeles, ya que ste es el

grosor de la rayadura.
Con la imagen que acabas de
Finalmente pulsa con cuidado 2 abrir en pantalla, ampla el

rea sobre la cual deseas tra- Ahora debes dibujar con la
4 la combinacin de teclas Ctrl +

Alt + Flecha Abajo. Esto dupli-
car los pxeles sanos, y cubrir los
bajar a continuacin. Para ello, dir-
gete a la Paleta de Herramientas, y 4 herramienta Eliminar Rayadu-
ras, sobre las rayas de la foto;
haz click en un extremo del defecto, y
araazos, dejndolos invisibles. sin soltar el botn del ratn, despl-
zate gasta el otro extremo de la raya-

haz click en el ico-

no que representa una lupa (herra-
mienta Acercar). Ampla el rea de la
Desde la Barra de Herramientas fotografa que vas a retocar, haciendo
2 de Photoshop (la encuentras a

la izquierda del rea de traba-
jo) elige la Herramienta Marco Fila
click con la lupa, y desplazando sin
soltar el botn del ratn, as podrs
trabajar con mayor precisin que con
nica; para acceder a ella debes pul- la vista general.
N 97 57
97_50_56_Curso 5/7/04 02:29 pm Pgina 16
Curso
dura . Procura que la lnea sea lo ms ancho sea igual al de las rayaduras. Fi-
recta posible. nalmente v al men Archivo y elige
Guardar para conservar los cambios
realizados. Cuanto ms tiempo dediques
Para corregir los dems araa- a este tipo de procesos, mejor resultado
5 zos, repite los pasos 2, 3 y 4 . La

herramienta Eliminar Rayaduras
dibuja el contorno de su grosor, de ma-
se apreciar. Tambin es importante
que la imagen llegue con la mejor cali-
dad al ordenador, si es por medio de un
nera que ajusta sus pxeles para que su escner, con la mayor resolucin.
Resumiendo...
1 Ir al men Archivo 3 Abrir 3 Seleccionar imagen 3 Abrir 1 Ir al Men Archivo 3 Escoger Abrir 3 Seleccionar fotografa 3 Abrir
2 Ir a Barra de Herramientas 3 Elegir Marco Fila nica 3 Click en el 2 Seleccionar Herramienta Acercar 3 Hacer click y desplazar 3 Ampliar
araazo zona defectuosa
3 Copiar informacin sana 3 Mover con las flechas del tecl a d o 3 3 Ir a Paleta de Herramientas 3 Elegir Eliminar Rayaduras 3 Ir a
Ampliar vista Configuracin 3 Grosor de 2 pxeles
4 Pulsar Ctrl + Alt + Flecha Abajo 3 Duplicar pxeles sanos 3 Cubrir 4 Click + desplazar ratn sobre rayaduras 3 Trazar lnea bien recta
araazos 5 Corregir ms araazos 3 Ir al men Archivo 3 Guardar cambios
5 Corregir ms araazos 3 Ir al men Archivo 3 Guardar cambios
ratn, desplaza la seleccin hacia una

Borrar elementos no deseados zona que no tenga obstculos, y pxeles
sanos para cubrir el objeto.
alzada. Procura dejar algo de espacio

alrededor del objeto.
Pulsa la letra Q de tu teclado,

Es muy probable que alguna vez hayas
tomado una bella fotografa, en la que
todo parece correcto salvo por un
3 para activar el modo Mscara
Rpida (la imagen protegida
por la selec- 5
Pulsa la combinacin de teclas
Ctrl + J para crear una nueva ca-
pa, copiando la seleccin de p-
objeto que estorba y distrae la atencin se pon- xeles sanos. Observa la paleta Capas, y
cin. Aunque sera exagerado consi- dr de color vers en una nueva capa el trozo de p-
derarlo un error, podemos recurrir rojo momen- xeles sanos que acabas de crear. Ahora
a las tcnicas digitales para subsanar tneamente). v a la Paleta
este tipo de problemas, y as embelle- V al men de Herramien-
cer la composicin final. Ya que no Filtro, abre tas, y escoge
podemos eliminar los objetos fsica- icono de Desenfocar, y elige Desenfoque Gaus- Herramienta
mente, lo que hars a continuacin la lupa). siano. En el cuadro de dilogo, com- Mover; coge
con Photoshop o Paint Shop Pro ser Haz click pleta con un la seleccin de
cubrir los elementos no deseados. En en la ima- valor de 3,0. pxeles sanos y
el ejemplo que damos a continuacin, gen, y sin De sta manera muvelos, ta-
hay un globo que aparece por detrs soltar el la seleccin pando el ele-
de la cabeza de un personaje, distra- botn del que has creado mento que deseas ocultar. . Dicho ele-
yendo la atencin del tema de la foto- ratn, rodea el rea donde se encuen- ahora tiene sus mento debe haber desaparecido.
grafa: la nia recibiendo su vela de tra el elemento no deseado. bordes muy
cumpleaos para soplar. suavizados.
Photoshop Dirgete a la Paleta
Abre el men Archivo, seleccio- 2 de Herramientas, y

selecciona la Herra-
4
Pulsa nuevamente la letra Q de
tu teclado para salir del modo
1 na Abrir y escoge la imagen de

tu disco duro o CD. Haz click en
Abrir. V a la Paleta de Herramientas,
mienta Lazo. A continua-
cin rodea el objeto que
deseas eliminar, dibujando
Mscara Rpida, y activar la se-
leccin suavizada. Ahora con
la herramienta Lazo, haz click
y selecciona la Herramienta Zoom (el una seleccin libre a mano en la seleccin. Sin soltar el botn del
58 www.pctoday.es
97_50_56_Curso 5/7/04 02:29 pm Pgina 17
Dirgete alzada. Intenta dejar algo de espacio rs la seleccin que has creado; para men Seleccionar, y elige la opcin
6 al men
Capa, y
selecciona Aco-
alrededor del objeto. ello, v a la Paleta Capas, y haz click en
Seleccin Flotante, y luego en el icono
de la Papelera en la misma paleta. Un
Quitar Seleccin, para que desaparez-
can los halos que aparecan alrede-
dor de la zona que ests tratando de
plar Imagen. Fi- cuadro de dilogo te pedir que confir- reparar.
nalmente abre el
men Archivo y
elige Guardar,
para conservar
los cambios.
mes si deseas eliminar la capa activa, a

Paint Shop Pro lo que respondes pulsando el botn S.
Desde el men Archivo, seleccio- V al men Edicin, y seleccio-
1 nas Abrir (o pulsa la combinacin

Ctrl + O). Luego elige una imagen
y seleccinala. Haz click en el botn
3 na Copiar (o pulsa la combina-
cin Ctrl + C). De esta manera
copias la seleccin al Portapapeles. 5
Ya tienes lo que necesitas: una
seleccin que ocupa la misma
superficie que el rea que de-
Abrir. Dirgete a la Paleta de Herramien- Abre nuevamente el men Edicin, y seas cubrir. Pulsa nuevamente Ctrl +
ahora selecciona Pegar Como nueva C para copiar los pxeles sanos de la
pared con tu seleccin, y luego la
combinacin Ctrl + E para pegar lo
que has copiado como una nueva se-
Finalmente abre el men Archi-
6 vo, y selecciona Guardar para

conservar los cambios. Si algn
pixel concreto presenta un color que
resalta frente a los dems, puedes usar
tas, y selecciona la Herramienta Acercar la herramienta pincel para que pase de-
(icono de la lupa). Haz click en la ima- sapercibido, o repetir el proceso con
gen, y sin seleccin (pulsa el atajo Ctrl + E) y selecciones del tamao de un punto.

soltar el bo- coloca la seleccin en un rea de la
tn del ra- pared con pxeles sanos. Consejo
tn, rodea el
rea donde leccin. Arras- El procedimiento que has realizado es
se encuentra tra, con el mis- muy sencillo: consiste en copiar el rea
el elemento mo cursor y del objeto que quieres eliminar, luego
no deseado. sin cambiar de utilizar dicha seleccin para copiar p-
herramienta, la seleccin pegada. A xeles sanos de la imagen (en este caso
continuacin colcala sobre el rea de una pared), para finalmente super-
Dirgete a la Paleta de Herra- Ahora del objeto que deseas eliminar y sus- ponerlos y ocultar el objeto no deseado.
2 mientas, y selecciona la Herra-

mienta Lazo. A continuacin
rodea el objeto que deseas eliminar,
4 en tu
imagen
debe aparecer
tituir por la seleccin correcta. V al Ten en cuenta que, segn el caso, la
iluminacin del rea copiada no coinci-
de exactamente con la zona donde la
has pegado: echa mano de las herra-
dibujando una seleccin libre a mano el objeto que mientas de brillo y contraste para ajus-
quieres elimi- tar las luces, y si hiciera falta de las he-
nar por dupli- rramientas de clonacin para ocultar
cado; a continuacin vas a eliminar el los bordes pegados.
contenido de la imagen, pero conserva-
Resumiendo...
1 Ir al Men Archivo 3 Seleccionar Imagen 3 Abrir 1 Ir al Men Archivo 3 Seleccionar Imagen 3 Abrir
2 Ir a Paleta de Herramientas 3 Elegir Lazo 3 Rodear el objeto con 2 Ir a Paleta de Herramientas 3 Elegir Lazo 3 Rodear el objeto con selec-
seleccin cin
3 Pulsar Q para Mscara Rpida 3 Ir al men Filtro 3 Aplicar Desenfoque 3 Ctrl + C para copiar seleccin 3 Ctrl + E para pegar seleccin 3
Gaussiano Colocar en pxeles sanos
4 Pulsar Q para salir de Mscara Rpida 3 Desplazar seleccin con el 4 Ir a Paleta Capas 3 Click en Seleccin Flotante 3 Click en Papelera
Lazo para eliminar seleccin
5 Ctrl + J crea nueva capa 3 Ir a Paleta de Herramientas 3 Elegir Mover 5 Ctrl + C copia pxeles sanos 3 Ctrl + E pega nueva seleccin 3 Colocar
3 Tapar el objeto no deseado sobre el objeto 3 Quitar seleccin
6 Ir al men Capa 3 Acoplar Imagen 3 Ir al men Archivo 3 Guardar 6 Ir al men Archivo 3 Elegir Guardar
N 97 59
97_50_56_Curso 5/7/04 02:29 pm Pgina 8
Curso
Minimizar las manchas
debes manipular, para que la selec-

cin encaje perfectamente con la
El siguiente truco es muy til en foto- una seleccin de un tamao parecido mancha. Cuando encaje correctamen-
grafas que poseen grandes superfi- al de la mancha. Abre el men Edi- te, pulsa la tecla Enter. Configuracin, elige Rectngulo en el
cies de un color y textura relativa- cin y selecciona Copiar (o pulsa la apartado Tipo de Seleccin.
mente homogneos. En este caso he- combinacin Ctrl + C) para copiar
mos utilizado una vieja fotografa, en los pxeles sanos al portapapeles.
la cual una mancha de humedad ha Busca un rea de la pared don-
daado la zona de la pared. Tambin
lo encontrars muy til para restau-
rar fotografas donde aparezcan gran-
2 de los pxeles sean sanos y pa-
rejos. Con la Herramienta Se-
leccionar, haz click y sin soltar el bo-
des cielos, csped, montaas, etc. tn del ratn, desplaza para crear
Como casi siempre, la tcnica consiste una seleccin de un tamao parecido
en hallar y copiar pxeles tiles que
remplacen el rea daada. En ste caso
recurrirs al auxilio de las capas, utili-
zando el comando Pegar Dentro. V al men Capa, y elige Aco-
Photoshop 5 plar Imagen. Y finalmente abre

el men Archivo, y escoge
Guardar (o la combinacin Ctrl + S),
En el men Archivo, elige Abrir, para aplicar los cambios.
1 y escoge la fotografa de tu dis-

co duro o CD. Dirgete a la Pa-
leta de Herramientas, y escoge la He- En la Paleta de Herramientas al de la mancha. V al men Edicin y
rramienta Marco Rectangular.
3 haz click en el icono del Lazo.
A continuacin dibuja una se-
leccin libre alrededor de la mancha
selecciona Copiar (o pulsa la combi-
nacin Ctrl + C) para copiar los pxe-
les sanos al portapapeles.
que deseas corregir.
Paint Shop Pro Consejo

V al men Archivo, elige Abrir, Recuerda que ste truco funciona de
1 y escoge la fotografa de tu dis-

co duro o CD. Dirgete a la Pa-
leta de Herramientas, y escoge la He-
manera ptima cuando en la fotografa
existen grandes zonas de imagen sana
que puede reemplazar al trozo daado
o manchado. Realizando selecciones
Busca un rea de la pared don- Dirgete al men Edicin y es- rramienta Seleccionar. En la Paleta de
2 de los pxeles sean correctos.

Con la Herramienta Marco
Rectangular, haz click y sin soltar el
4 coge Pegar Dentro (o la com-
binacin Mays + Ctrl + V). El
trozo sano anteriormente copiado
muy simples a mano alzada puedes ob-
tener muy buenos resultados, sencilla-
mente pegando el trozo de pxeles sa-
nos en una nueva capa. Si tu fotografa
botn del ratn, desplaza para crear ahora se ha pegado dentro del rea contiene manchas en zonas que no es-
de la mancha. Ahora v al men Edi- tn claramente despejadas, recurre a
cin, y escoge la opcin Transforma- las herramientas de clonacin combi-
cin Libre. Alrededor del trozo pega- nadas con pinceles pequeos.
do aparecern unos manejadores que
60 www.pctoday.es
97_50_56_Curso 5/7/04 02:29 pm Pgina 9
En la Paleta de Herramientas Dirgete al men de Edicin,
3 haz click en el icono de selec-

cin que contiene un Lazo. A
continuacin dibuja una seleccin a
4 escoge Pegar, y luego En la se-
leccin (o la combinacin Ma-
ys + Ctrl + L). El trozo sano ante-
mano alzada alrededor de la mancha riormente copiado ahora se ha pega-
que deseas corregir. do dentro del rea de la mancha.
En la Paleta de Herramientas
5 elige Deformar. Alrededor del

trozo pegado aparecern unos
manejadores y un recuadro que de-
Ahora v al men Seleccionar, y esco- bes utilizar para manipular la forma
ge Promover a Capa. de la seleccin, para que sta encaje
perfectamente con la forma de la chivo y elige Guardar, para aplicar los
mancha. Finalmente abre el men Ar- cambios realizados.
Resumiendo...
1 Ir al Men Archivo 3 Abrir Foto 3 Ir a Paleta de Herramientas 3 Escoger 1 Ir al Men Archivo 3 Abrir Foto 3 Ir a Paleta de Herramientas 3 Elegir
Marco Rectangular Rectngulo
2 Buscar pxeles sanos 3 Crear seleccin 3 Pulsar Ctrl + C para copiar 2 Buscar pxeles sanos 3 Crear seleccin 3 Pulsar Ctrl + C para copiar
seleccin seleccin
3 Ir a Paleta de Herramientas 3 Elegir Lazo 3 Crear seleccin rodeando la 3 Ir a Paleta de Herramientas 3 Elegir Lazo 3 Crear seleccin rodeando la
mancha mancha
4 Ir al Men Edicin 3 Pegar Dentro 3 Ir al Men Edicin 3 Elegir 4 Pulsar Mays + Ctrl + L para pegar dentro 3 Ir al Men Seleccionar 3
Transformacin Libre 3 Manipular la seleccin hasta encajar. Elegir Promover a Capa
5 Ir al Men Capa 3 Acoplar imagen 3 Ir al Men Archivo 3 Guardar 5 Ir a Paleta de Herramientas 3 Elegir Deformar 3 Manipular la seleccin
3 Ir al men Archivo 3 Guardar
Remplazar el fondo Photoshop

Aunque el hombre del tiempo en la tienes en tu ordenador. En el siguien- V al men Archivo, elige Abrir,
TV, y el Servicio Meteorolgico cada
da son ms precisos, nosotros pode-
mos contradecirlos que a qu nos
te prctico, utilizars la varita mgica
y el agregado de una capa, para mo-
dificar el color del cielo y as realzar
1 y busca en tu ordenador la foto-
grafa que vas a utilizar. A conti-
nuacin debes fijarte en la Paleta de
referimos? Muy sencillo: si has toma- la belleza de una fotografa. Herramientas y escoger la Varita M-
do algunas fotografas en tu ltimo fin En la fotografa utilizada en este ejem- gica. En la Barra de Propiedades es-
de semana, y el tiempo no era bueno, plo, del maravilloso mundo de Walt cribe 50 en el apartado Tolerancia, y
con Photoshop y Paint Shop Pro pue- Disney, la gran ventaja es que el cielo marca las casillas de verificacin de
des corregirlo. ocupa un rea contnua, y no se v inte- Suavizado y Contiguo.
Para decirlo en otras palabras: pue- rrumpida por cables, o elementos que Con la Herramienta Vari-
des transformar un da fro y gris, en
un clido atardecer de verano, gra-
cias a las herramientas digitales que
dificulten su seleccin. De esta manera
es muy simple seleccionar el rea a
modificar con la varita mgica.
2 ta Mgica, haz click so-
bre la fotografa, en
cualquier punto de la zona del
cielo que necesitas modificar.
Aparecern unas lneas puntea-
das que marcarn el rea que
haya sido seleccionada. Si la
superficie de seleccin excede
los lmites del cielo, reduce el
valor que hayas dado en el
campo Tolerancia. Por el con-
trario, si la seleccin no cubre
todo el cielo, debes poner una
Tolerancia mayor.

N 97 61
97_50_56_Curso 5/7/04 02:29 pm Pgina 10
Prctico
res: en Usar, elige Color selecciona Color, y en Opacidad es-

Frontal (el Naranja que ya cribe 80. Deja el resto de valores co-
habas seleccionado). En mo han aparecido por defecto.
Modo de Fusin, pon Nor-
mal, y en Opacidad, comple-
ta con 100%. A continuacin Dirgete a la Paleta Colores, y
pulsa OK. De esta manera,
habrs rellenado el rea del
cielo con un color Naranja,
4 haz doble click en una muestra
cualquiera, para abrir el cua-
dro de dilogo Color. All selecciona
en una capa de fusin Color un color clido como el naranja. Lue-
que mantiene la textura y el go v a la Paleta de Herramientas, y
brillo originales del cielo, y le agrega selecciona el Bote de Pintura. En la
Abre el men Capa, elige la op- simplemente un tono clido.
3 cin Nueva, y finalmente selec-

ciona Capa en el men que se Con la Herramienta Varita M-
despliega (o pulsa la combinacin
Mays + Ctrl + N en el teclado), para
crear una nueva capa. En el cuadro 5
Si el resultado no te convence del
todo, abre la paleta Capas, y mo-
difica el porcentaje de Opacidad
2 gica, haz click sobre la foto-
grafa, en cualquier punto del
cielo que vas a modificar; unas lneas
de dilogo, primero nombra la nueva de la capa (cuanto mayor sea la opaci- punteadas marcarn el rea que se ha
dad, ms intenso ser el efecto
aplicado). Finalmente abre el
men Capas, y selecciona Acoplar
Imagen. Por ltimo, guarda los Paleta de Configuracin, elige Oscu-
cambios desde el men Archivo, recer en el apartado Combinar. Deja
haciendo click en Guardar. intactos el resto de valores.
capa (por ejem-
plo, Nuevo Cie-
lo). En el aparta- Haz click con el Bote de Pintura
do Modo, abre el
men y elige la
opcin Color, y en seleccionado. Si el rea de seleccin
5 en cualquier punto del cielo. La
capa se habr llenado de Naran-
ja y habrs obtenido el efecto buscado.
Opacidad escribe excede los lmites del cielo, reduce el Si el resultado no te convence del todo,
80%. Pulsa OK valor de la Tolerancia; por el contra- abre la paleta Capas, y modifica el por-
para que se cree rio, si la seleccin no cubre toda la centaje de Opacidad de la capa (cuan-
dicha capa. zona del cielo, debes poner una can- to mayor sea la opacidad, ms intenso
tidad superior en la Tolerancia. ser el efecto aplicado). Finalmente v
Ahora abre la Paleta Muestras,
4 y selecciona un color clido

como el Naranja Puro;. Simple-
mente debes hacer click en el color
Paint Shop Pro
V al men Archivo, elige Abrir, 3
Abre la Paleta Capas, y haz click
en el icono Crear una Capa. Se
abrir el cuadro de dilogo
elegido. Abre el men Edicin, y es-
coge Rellenar; en el cuadro de dilo-
go completa con los siguientes valo-
1 y busca entre las carpetas de tu
ordenador la fotografa que
quieres utilizar. Despus de pulsar
Propiedades de la Capa. Debes com-
pletar con un nombre (por ejemplo
Nuevo Cielo), en Modo de Mezcla
al men Capas, elige Fusionar y luego
Fusionar Todo. Por ltimo, guarda los
cambios desde el men Archivo, ha-
Abrir, dirgete a la Paleta de Herra- ciendo click en el botn Guardar.
mientas y escoge la Varita Mgica. En
la Paleta de Configuracin escribe 50
en el apartado Tolerancia, en Corres-
pondencia elige Valor RVA, en Progre-
sivo escribe 1, y marca la casilla
Muestra Fusionada.
Resumiendo...
1 Ir al Men Archivo 3 Abrir Fotografa 3 Ir a Paleta de Herramientas 3 1 Ir al Men Archivo 3 Abrir Fotografa 3 Ir a Paleta de Herramientas 3
Escoger Varita Mgica 3 Configurar Propiedades Escoger Varita Mgica 3 Configurar Propiedades
2 Clickear con la Varita en la foto 3 Lneas punteadas marcan la seleccin 2 Clickear con la Varita en la foto 3 Lneas punteadas marcan la seleccin
3 Mays + Ctrl + N para crear Capa 3 Configurar Capa 3 O K 3 Ir a Paleta Capas 3 Click en Crear Capa 3 Configurar Propiedades de
4 Ir a Paleta Muestras 3 Elegir Naranja 3 Ir al Men Edicin 3 Rellenar 3 Capa
OK 4 Ir a Paleta Colores 3 Elegir Naranja 3 Ir a Paleta de Herramientas 3
5 Si el resultado no es ptimo ir a Paleta Capas 3 Variar la opacidad 3 Ir al Escoger Bote de Pintura 3 Configurar Propiedades
men Capas 3 Acoplar Imagen 3 G u a r d a r 5 Click con el Bote en la foto 3 Rellenar con Naranja 3 Si el resultado no es
ptimo ir a Paleta Capas 3 Variar Opacidad 3 Fusionar todo 3 G u a r d a r
62 www.pctoday.es
Curso
Retoques creativos
Los programas de retoque fotogrfico que utilizas en este curso, Adobe Photoshop y Jasc Paint Shop Pro, no
slo son excelentes herramientas que hacen verdaderos milagros con tus fotografas, sino que son una fuente
inagotable de diversin: en esta entrega aprenders unos trucos con los que te divertirs en grande.
T
Gua del curso e apetecera pintar tu coche de lagrosos con tus fotografas; y lo mejor
otro color? Es algo demasiado de todo, es que para llevarlos a cabo
caro para realizar, y luego arre- slo necesitas un poco de prctica
pentirte Con Photoshop y Paint Shop y te divertirs en grande! Es la combi-
Selecciones sencillas. Mscara rpida. Extraer. The GIMP. PC Today n 94 Pro puedes modificar el color de tu au- nacin perfecta para realizar cualquier
2. Corrige el aspecto general de tus fotos. tomvil en tan solo cinco minutos y tarea creativa: trabajo, entretenimiento
Brillo y contraste, capas de ajuste, tono, exposicin y color. PC Today n 95 no necesitas llevarlo al taller! y placer.
3. Tcnicas de reparacin de fotos (I). Te has enfadado con un viejo ami- En este captulo aprenders algunos
Reparar manchas y texturas, corregir polvo y rascaduras, eliminar el moir. PC Today n 96 go, y deseas borrarlo literalmente de trucos para reparar fotos que se han
4. Tcnicas de reparacin de fotos (II). tus fotografas? Con las herramientas roto, agregar marcos de las formas ms
Eliminar araazos rectos, borrar elementos no deseados, minimizar manchas. PC Today n 97 digitales que tienes entre manos, ser variadas, crear tus propios fondos per-
5. Recreando fotos creativamente. una tarea muy sencilla quitar de tus sonalizados y mucho ms; pero recuer-
Fondos personalizados, bordes y marcos creativos, modificar personajes. PC Today n 98 recuerdos fotogrficos a quien quieras da siempre lo ms importante: no exis-
6. Embellecer y refinar retratos. olvidar te solamente un camino para obtener
Eliminar defectos de la piel, enfoque suavizado, disimular el paso del tiempo, Adobe Photoshop y Paint Shop Pro buenos resultados en fotografa digital;
son dos poderosas herramientas con lo mejor es combinar distintas tcnicas
las cuales puedes realizar trabajos mide un modo prctico y creativo.
52 www.pctoday.es
98_52_59_Curso ok.indd 14 21/2/08 16:04:08

Crear fondos personalizados

bien pulsar el icono de la carpeta abierta
Consejo en la Barra de Herramientas Estndar.
Tanto en Photoshop como en Paint Shop
Si has tomado una fotografa, y ests a lores: Tolerancia: 50, y selecciona las Pro, lo ms importante en este truco es
gusto con la figura principal, pero no casillas Suavizado, Contiguo, y Usar la perfeccin de la seleccin que de-
con el fondo, este truco es para ti: pue- todas las capas. bes crear para el fondo. Si utilizando
la varita mgica no consigues que la
seleccin se ajuste al fondo y a la figu-
ra, echa mano de otras herramientas,
como la mscara rpida en combina-
cin con los pinceles, para agregar
o quitar zonas de seleccin. Tambin
puedes realizar un trazado alrededor de
la figura, y convertirlo en una mscara.
Escoge el camino que te otorgue mayor
rapidez y precisin.
Luego escoge alguna
fotografa cuyo fon-
do deseas reempla-
3
des eliminar el fondo de una manera A continuacin, haz click con zar, y haz click en Abrir.
muy sencilla, y reemplazarlo por una la varita mgica en alguna zo-
2
textura propia. De esta manera dars a na del fondo donde el color de nubes que combina los colores En la Paleta de Herramientas,
tu fotografa otro aspecto, seguramente sea homogneo. Si la seleccin que ha azul y blanco que has seleccionado escoge la Varita Mgica. Luego
ms impactante que el original. creado la varita no abarca todo el fon- ve a la Paleta de Configuracin,
Tanto Photoshop como Paint Shop do, pulsa la y completa con los siguientes valores:
Pro poseen herramientas para crear tecla Mays- Correspon-
texturas de un modo muy simple; culas y sigue dencia, Valor
puedes utilizar las que son creadas haciendo RVA. Toleran-
en forma automtica (como en este click simul- cia, 50. Pro-
caso), y ms tarde experimentar apli- tneamente gresivo, 1, y
cando tus propias variantes. El lmite en distintas marca la casi-
lo pone tu creatividad. zonas del lla de verifica-
Un dato importante: pon especial cui- fondo hasta cin Muestra
dado al realizar la seleccin donde que la selec- Fusionada.
aplicars la textura, ya que de esto de- cin lo abar-
3
pende que el resultado sea lo ms rea- que todo. A continuacin haz click con la
lista posible. El fondo y la figura deben en el paso anterior, y lo aplicar en la varita en alguna zona del fondo
4
fundirse de un modo suave y natural. Dirgete a la Paleta Capas, y totalidad de la nueva capa. donde el color sea parejo. Si la
haz click en el icono Crear una seleccin que ha
6
Photoshop capa nueva, situado en la parte Abre el men Archivo, y selec- creado la varita
inferior derecha de la paleta. Ahora ciona Guardar Como. Se abrir no abarca todo
1
Desde el men Archivo de la ve a la Paleta Muestras y haz click en un cuadro de dilogo; ponle un el fondo, pulsa la
barra superior de herramientas, tecla Maysculas
elige Abrir y escoge la imagen y sigue haciendo
que desees utilizar para cambiar su click simultnea-
fondo. Ahora haz click en Abrir. nombre al archivo y en Formato selec- mente en dis-
ciona Photoshop (*.PSD). Haz click en el tintas zonas del
apartado Capas de las Opciones de Guar- fondo hasta que
dado. Finalmente haz click en el la seleccin lo
botn Guardar. De sta manera, abarque todo.
en el futuro podrs acceder al archivo y
4
cualquier color azul oscuro; luego Dirgete al men Efectos, abre
pulsa las teclas Ctrl + Mays. mien- Efectos de Textura, y selecciona
tras haces Azulejos. Se abrir un cuadro de
click en el dilogo, donde encontrars muchas op-
color blan-
co. De sta modificar la capa con el fondo persona-
manera, lizado, sin que esto afecte a la fotografa
has confi- original, con el fondo intacto.
2
Desde la Barra de Herramien- gurado al
tas de Photoshop azul como color de frente, y al blanco ciones para personalizar
(la encuentras a como color de fondo. Paint Shop Pro el filtro. Puedes basarte
la izquierda del rea de en los parmetros de este ejemplo, pero
5 1
trabajo) elige la Herra- Ahora abre el men Filtro de la Abre men Archivo, y en el des- prueba tus propias variantes; para ello,
mienta Varita Mgica ; en barra superior de herramien- plegable elige Abrir . Tambin haz click en el icono del ojo, as previ-
la Barra tas, escoge la opcin Interpre- puedes pulsar el atajo Ctrl + O, o sualizas los resultados. Debes buscar
de Pro- tar y, finalmente, haz click en el botn que el fondo quede bien diferenciado de
piedades, completa los siguientes va- Nubes. Dicho filtro crear un efecto la figura. Presta atencin a los bordes de
la forma , deben estar muy bien delimita-
dos. Una vez que el resultado te agrade,
pulsa el botn Aceptar.
N 98 53
98_52_59_Curso ok.indd 15 21/2/08 16:04:11

Curso
5
Ahora el fondo de la imagen se y luego pulsa el botn
ha convertido en un motivo per- Guardar. Siempre te inte-
sonalizado. Pulsa la combina- resa guardar este tipo de
cin de teclas Ctrl + D para soltar la imgenes en formato Tiff,
seleccin. Final- ya que as puedes volver
mente, abre el a esitarlas cuantas veces
men Archivo, lo desees, sin perder ca-
escoge Guar- lidad en el proceso. Uti-
dar como, y en liza la compresin LZW,
el cuadro de de entre las que se ofre-
dilogo escribe cen a la hora de guardar,
un nombre pa- para que no se produzca
ra el archivo; prdida de informacin
en el apartado pero el tamao del ar-
Tipo elige TIFF, chivo sea menor.
Resumiendo...
1 Ir al men Archivo 3 Escoger Abrir 3 Seleccionar imagen 3 Abrir 1 Abrir Men Archivo 3 Escoger Abrir 3 Seleccionar fotografa 3 Abrir
2 Ir a Barra de Herramientas 3 Elegir Varita Mgica 3 Configurar 2 Ir a Paleta de Herramientas 3 Elegir Varita Mgica 3 Configurar
Propiedades Propiedades
3 Click en el fondo 3 Pulsar Mays. + Click 3 Agregar zonas de seleccin 3 Click con la varita en el fondo 3 Pulsar Mays. + Click hasta abarcar
4 Ir a Paleta Capas 3 Crear Capa 3 Ir a Paleta Muestras 3 Seleccionar todo el fondo
azul para el frente 3 Seleccionar Blanco para el fondo 4 Abrir men Efectos 3 Efectos de Textura 3 Seleccionar Azulejos 3
5 Ir al men Filtro 3 Escoger Interpretar 3 Click en Nubes Configurar cuadro de dilogo 3 Aceptar
6 Ir al men Archivo 3 Guardar Como 3 Nombrar el archivo 3 Formato 5 Pulsar Ctrl + D para soltar seleccin 3 Men Archivo 3 Guardar como 3
PSD 3 Click en Capas 3 Guardar Elegir TIFF 3 Escribir nombre 3 Guardar
Photoshop
Reconstruir y mejorar retratos pulsa la tecla Suprimir (o Retroceso)
para borrar el fondo.
1
Procura escanear la foto con los
3
Aunque no puede decirse que la infor- ra que el trabajo sea perfecto, hacen trozos colocados cerca uno del Ahora abre el men Seleccin,
mtica haga verdaderos milagros, a ve- falta bastantes horas de prctica. Pero otro, sin llegar a tocarse. Pue- y escoge Invertir (puedes pul-
ces lleva a cabo tareas que en otras po- recuerda, todas las cosas son difciles des dejar como sar la combinacin Ctrl + I).
cas hubieran sido inimaginables; una de antes de hacerse fciles Verdad? fondo el color
ellas, es la de reconstruir una fotografa Sigue paso a paso este ejercicio, y no te negro de la ta-
que se ha roto; por supuesto, estamos desanimes si al principio no ests satis- pa del escner.
hablando de tcnicas digitales, y para fecho con los resultados. Guarda el ar- En este momento has invertido la se-
eso tienes en Photoshop y Paint Shop Pro Reljate y experimenta todo lo posible chivo en forma- leccin, y has cogido ambos trozos
a dos aliados extraordinarios. sin temor a equivocarte, ya que siempre to TIF con una de la foto. Ve a la Paleta de Herramien-
Puedes unir digitalmente dos trozos podrs volver un paso atrs pulsando la buena resolu- tas, escoge Marco Rectangular; pulsa
de una foto, sin que se vean marcas combinazin Ctrl+Z, o empezando des- cin (300 dpi la tecla Alt, y sin soltar el botn del ra-
ni huellas; de ms est decir que pa- de el principio con el archivo original. sern ms que tn, rodea toda la parte inferior de la
suficientes).
2
Ve a la Paleta de Herramientas,
y escoge la Varita Mgica; con-
figura sus parmetros desde la
Barra de Propiedades, de la siguiente
manera: Tolerancia, 20; en Suaviza- foto, de manera de restar esta rea
do, Contiguo, y Usar todas las capas, de la seleccin. Ahora tienes seleccio-
marca las casillas nado solamente el trozo superior de la

de verificacin. foto, como una seleccin flotante que
Luego haz click podrs mover libremente.
con la varita en la
zona negra que ha
quedado por de-
trs de la foto, pa-
ra seleccionarla; y
54 www.pctoday.es
98_52_59_Curso ok.indd 16 21/2/08 16:04:12

4 3 5
Ve a la Paleta de Herramientas la fotografa. Una Ahora abre el men Seleccionar, Ahora ve a la Paleta de Herra-
y escoge la Herramienta Mover. vez que hayas y escoge Invertir (puedes pulsar mientas y escoge el Pincel de
Acrcate con el ratn a la zo- acabado, abre la combinacin Mays + Ctrl + I) Copia. A continuacin debes ir
na rota de la fotografa, y vers que el el men Archivo copiando informacin con
cursor se transforma en una pequea y elige Guardar pxeles
para aplicar los sanos
cambios. En este momento has invertido la selec- de la
cin, y has cogido ambos trozos de imagen (pulsando Mays +
la foto. Ve a la Paleta de Herramientas, Click), y pintar sobre la cicatriz de
escoge Seleccionar; pulsa la tecla Alt, y la unin de ambos trozos de foto, pa-
sin soltar el botn del ratn, rodea toda
Paint Shop Pro la parte inferior de la foto,
de manera de restar es-
1
tijera; haz click Procura ta rea de la seleccin .
en el trozo y sin escanear Ahora tienes seleccionado
soltar el botn del la foto solamente el tro-
ratn, arrstralo con los trozos zo superior de la
literalmente hasta colocados cerca foto. Si lo deseas, ra evitar que se note, hasta cubrirla
pegarlo al trozo uno del otro, sin puedes realizar el mismo procedimien- totalmente. Es algo que requiere bas-
inferior de la foto. llegar a tocarse. to con otra herramienta de seleccin, tante tiempo y dedicacin.
Puedes dejar como el lazo.
5 6
Ahora ve a la Paleta de Herra- como fondo el Aprovecha que ya ests utili-
4
mientas y escoge el Tampn de color negro de la tapa del escner. Ve a la zando la herramienta Pincel de
Clonar. A continuacin debes ir Guarda el archivo en formato TIF con Pale- Copia, para corregir otros des-
copiando informacin con una buena resolucin (300 dpi sern ta de perfectos en la foto como manchas y
pxeles sanos de la imagen ms que suficientes). Herramientas araazos y de esta manera mejorar el
(pulsando Alt + Click), y y escoge nue- aspecto general
2
Ve a l a vamente la de la fotogra-
Paleta Herramienta fa. Una vez que
de He- S e l e c c i o n a r. hayas acabado,
pintar sobre la cicatriz de la unin rramientas, y Acrcate con abre el men Ar-
de ambos trozos de foto, para evitar escoge la Varita el ratn a la chivo y elige la
que se note, hasta cubrirla totalmente. Mgica; edita zona rota de la fotografa: haz click en opcin Guardar
Es algo que requiere bastante tiempo y sus parmetros el trozo y sin soltar el botn del ratn, para aplicar todos los cambios.
dedicacin. desde la Pale- arrstralo literalmente hasta pegarlo
ta de Configuracin, de la siguiente al trozo inferior de la foto
manera: Correspondencia, RVA. To-
lerancia, 20. Progresivo, 1, y marca
Muestra Fusionada. Luego haz click
con la varita en Consejo
la zona negra
Procura realizar la tarea de clonar pxeles
que ha queda-
sanos con la mayor dedicacin posible;
do por detrs all es donde radica la clave del xito en
de la foto, para
6
este tipo de retoques. Cuando tengas al-
Aprovecha que ests usando el seleccionarla; go ms de prctica, modifica el tamao
Tampn de Clonar, para corre- y pulsa la te- del pincel con que trabajas, adaptndolo
gir otros desperfectos en la foto cla Suprimir a cada zona estropeada, para aplicar co-
como manchas y araazos, y de esta para limpiar el rrecciones con ms detalle.
manera mejorar el aspecto general de fondo.
Resumiendo...
1 Escanear foto rota 3 Dejar fondo negro 3 Guardar en TIFF a 300 dpi 1 Escanear foto rota 3 Dejar fondo negro 3 Guardar en TIFF a 300 dpi
2 Ir a Paleta de Herramientas 3 Escoger Varita Mgica 3 Editar 2 Ir a Paleta de Herramientas 3 Escoger Varita Mgica 3 Configurar
Propiedades 3 Click en fondo negro 3 Suprimir el fondo Propiedades 3 Click en fondo negro 3 Suprimir el fondo
3 Abrir men Seleccin 3 Escoger invertir 3 Ir a Paleta de Herramientas 3 Men Seleccionar 3 Escoger Invertir 3 Ir a Paleta de Herramientas 3
3 Escoger Marco Rectangular 3 Alt + desplazar para restar seleccin Escoger Seleccionar 3 Alt + desplazar para restar seleccin
4 Ir a Paleta de Herramientas 3 Escoger Mover 3 Click en trozo roto 3 4 Paleta de Herramientas 3 Seleccionar 3 Seleccionar el trozo a reparar
Mover y pegar hacia abajo 3 Mover y pegar hacia abajo
5 Ir a Paleta de Herramientas 3 Escoger Tampn de clonar 3 Alt + click 5 Paleta de Herramientas 3 Escoger Pincel de copia 3 Mays + click
para copiar pxeles sanos 3 Pintar sobre la unin para copiar pxeles sanos 3 Pintar sobre la unin
6 Corregir manchas y araazos 3 Abrir men Archivo 3 Guardar 6 Corregir manchas y araazos 3 Men Archivo 3 Guardar
N 98 55
98_52_59_Curso ok.indd 17 21/2/08 16:04:14

Curso
Colorizar y entonar 4
Abre el men Imagen, selecciona una Varita Mgi-
Ajustes y luego elige Tono / Satu- ca. En la Paleta
racin (o pulsa la combinacin de Configura-
2
Si ests pensando en cambiar de co- Abre el men Seleccin, y elige Ctrl + U). En el apartado Editar, seleccin, selecciona
che, y no te has decidido por ningn Gama de Colores. Se abrir un ciona Todos. Ahora puedes desplazar Tinte del aparta-
color en particular este truco es cuadro de dilogo, y el cursor do Corres-
para ti. Con herramientas tan senci- se transformar en un gotero. En el pondencia,
llas como la seleccin por gama de apartado Seleccionar, elige Muestrea- y escribe 40
colores, y la modificacin del tono y como valor en el apartado Tole-
la saturacin de una imagen, podrs rancia. Deja el resto de valores
obtener unos resultados impactantes intactos, exactamente igual que
en el retoque de tus fotografas. aparecen por defecto.
En este caso hemos aplicado la tcnica los reguladores de Tono, Saturacin, y
3
sobre la foto de un automvil, pero ima- Luminosidad. Marca la casilla de veri- A continuacin haz click con la
gnate todos los casos en que tambin te ficacin Ver, para varita
podr ser til son casi infinitos! previsualizar el en al-
resultado en la guna zona del
fotografa. En este coche donde
el color sea
homogneo. Si
la seleccin que ha creado la varita no
abarca todo el color del coche, pulsa
caso los valores han sido: Tono, +135.

Saturacin, -6. Luminosidad, -3.
5
La ventaja de este mtodo radica en dos; luego haz click con el gotero en Ten en cuenta que la Satura-
que puedes modificar la coloracin una zona de color pleno del coche. cin agrega intensidad de co-
de cualquier objeto, sin alterar otras El cuadro de dilogo te mostrar una lor, y la Luminosidad agrega
variables como su brillo, textura o re- previsuali- Luz. Un valor la tecla Maysculas y sigue clickeando
flejos. De esta manera el resultado es zacin de la cero deja in- simultneamente en distintas zonas del
muy realista, y muy pocos podrn dar- seleccin que tactas estas color del coche, hasta que la seleccin
se cuenta que la foto ha sido manipula- variables. lo abarque todo.
da digitalmente. Cuando el
4
color sea el Abre el men Colores, escoge
Photoshop elegido, pulsa Ajustar y finalmente abre la op-
el botn OK. cin Tinte/Saturacin/Luminosi-
1
Comienza por buscar la foto de has creado, Finalmente dad. Tambin puedes pulsar la combi-
tu coche o de otro elemento en blanco y abre el men Archivo, elige Guardar
habitual que tenga buena cali- negro.
dad. Escoge alguna en donde el color
3
sea bastante ntido y no haya otros Si observas que la seleccin
elementos que lo tapen de forma al- no abarca la totalidad del veh- Como (o pulsa la combinacin Mays nacin de teclas Mays+H. En el cua-
culo, puedes subir el nivel de + Ctrl + S); ponle un nuevo nombre dro de dilogo que aparezca, completa
tolerancia, escribindolo en la casilla al archivo, y haz click en Guardar. la informacin
de texto o desplazando la barra del con los siguien-
cuadro de dilogo. Cuando la selec- Paint Shop Pro tes valores: en
cin sea correcta, pulsa el botn OK. Editar, selec-
1
Comienza por buscar la foto de ciona la opcin
tu coche, dirigindote al men Maestro. Deja el
Archivo y seleccionando Abrir. apartado Colo-
guna. Dirgete al men Archivo y se- Una vez que la hayas localizado en tu rear sin marcar.
lecciona la opcin Abrir. Una vez que disco duro, pulsa en Abrir. Luego escribe
hayas localizado la foto en tu disco Ahora vers unos halos rodeando el 135 en la casi-
duro, pulsa el botn abrir. rea del coche que has seleccionado lla Tinte, -6 en
(el color dominante).
2
ve a la Paleta de He-
rramientas, y escoge la de Saturacin, y 3 en Luminosidad.
la que Pulsa el icono del ojo para previsuali-
representa zar el resultado en la foto original.
56 www.pctoday.es
98_52_59_Curso ok.indd 8 21/2/08 16:04:17

5 6
Cuando el color se haya trans- Como siempre, conserva la zas mtodos de compresin. Pero si Consejo
formado en el verde del ejem- versin original del archivo deseas enviar la imagen por correo
plo, pulsa el botn de Aceptar. en formato Tiff o en el original electrnico o colocarla en una pgi- Las herramientas de Tono y Saturacin
Finalmente abre el men Archivo, del programa que ests utilizando, ya na web, abre el men Archivo, escoge son armas muy sutiles y extremadamen-
elige la opcin Guardar Como o pul- sea PSD de Photoshop o PSP de Paint te sensibles; debes utilizarlas con cautela
sa la tecla Shop Pro. De esta forma se conser- y buscar que al transformar colores, los
F12. En var toda la informacin de capas y resultados no sean excesivamente no-
el cuadro efectos que se hayan aplicado sin nuevamente Guardar como y ,en el torios ni artificiales. Evita llegar a satura-
de dilogo merma de calidad y con posibilidad aparatado Formato, elige Jpeg, Gif o cin que produzca colores fluo: intenta
ponle un de volver atrs sobre los cambios PNG. De esta manera, el tamao del conservar el brillo y la textura de los co-
nuevo nombre al archivo para que no realizados. archivo ser ms liviano y se descar- lores originales, de manera que el truco
sustituya al original y puedas volver Tambin es muy til si deseas im- gar ms rpido desde Internet, ade- sea imperceptible y realista.
a ste en otra ocasin. Haz click en primir la imagen en cuestin, ya que ms de ser compatible con la mayora
Guardar. conservar ms detalle que si utili- de los navegadores de Internet.
Resumiendo...
1 Ir al men Archivo 3 Elegir imagen 3 Abrir 1 Ir al men Archivo 3 Elegir imagen 3 Abrir
2 Abrir men Seleccin 3 Elegir Gama de Colores 3 Tomar muestra de 2 Paleta de Herramienta 3 Elegir Varita Mgica 3 Configurar propiedades
color 3 Click con la varita en el coche 3 Seleccionarlo todo
3 Aumentar Nivel de Tolerancia 3 Pulsar OK 4 Men Colores 3 Ajustar 3 Tinte/Saturacin 3 Editar valores
4 Abrir men Imagen 3 Elegir Ajustes 3 Tono y Saturacin 3 Editar valores 5 Aceptar cuando el color sea ptimo 3 Abrir men Archivo 3 Guardar
5 Pulsar OK cuando el color sea ptimo 3 Abrir men Archivo 3 Guardar como 3 Nombrar archivo 3 Guardar
como 3 Nombrar archivo 3 Guardar 6 Conservar el original en Tiff. Para la Web, guardar como Jpeg.
Modificar y eliminar personajes

4
sobre la imagen, y sin soltar el botn Ahora abre el men Edicin, y
del ratn, selecciona el rea donde elige Borrar; tambin puedes
Hoy en da, con los avances de la in- tica y experiencia, y ms pronto que se encuentra pulsar la tecla Retroceso de tu
formtica (y en particular del retoque tarde estars retocando fotos como un la persona que teclado. Como consecuencia, has elimi-
digital de imgenes), es muy sencillo verdadero artista. eliminars; nado a la persona y en su lugar queda
procura dejar un espacio en blanco. Ahora desde la
un margen sufi- Paleta de Herramientas elige el Tampn
ciente para ob- de Clonar, y con-
servar algo del figura sus pro-
entorno. Has piedades de la si-
ampliado la guiente manera:
vista de la zona Modo, Normal.
que editars. Opacidad: 100%.
Flujo, 100%, y
3
Nuevamente ve a la Paleta de He- marca las casillas
rramientas, pero ahora escoge la Alineado y Usar
Herramienta Lazo; en la Barra de todas las capas.
Propiedades, escribe 2 px en el apartado
5
agregar, quitar o modificar personas Photoshop Calado, y marca la casilla de verificacin Tu tarea ahora consiste en ir clo-
que aparecen en las fotografas. Imag- Suavizado. A continuacin realiza con nando partes del fondo del pai-
1
nate cmo se aprovechan los fotgrafos Desde el men Archivo, elige sumo cuidado una seleccin a mano saje, pintando sobre el rea que
profesionales de estas herramientas: Abrir y escoge una fotografa en ha quedado en blanco. Para
han capturado una instantnea perfecta la que puedas eliminar algn ello, pulsa la tecla Alt y haz
e irrepetible de una celebridad mundial, personaje. Haz click en Abrir. click simultneamente con el
pero por detrs aparece un personaje
annimo que (sin querer) estropea la
escena. Con Photoshop y Paint Shop Pro tampn de clonar, en la zona que deseas
es muy sencillo eliminarlo de la compo- copiar. A continuacin, comienzas a
sicin, sin dejar siquiera una huella. pintar en la zona blanca, con la muestra
Aunque t no seas un fotgrafo pro- alzada alrededor que has tomado. Repite el mismo proce-
fesional, puedes aprender el siguiente del sujeto que vas dimiento tan-
truco y comenzar a experimentar con a eliminar; hazlo tas veces
2
tus propias fotografas, te divertirs en Dirgete a la Paleta de Herra- con paciencia y como sea ne-
grande. Seguramente al principio te mientas, y esco- tranquilidad. Si te cesario, hasta
costar un poco, y quedarn algunas ge la Herramien- equivocas y la se- cubrir toda la
marcas en la zona donde se encontraba ta Zoom (el icono de la leccin desapare- zona blanca.
el personaje eliminado. Pero recuerda lupa). Aho- ce, puedes empe- Debes intentar
que todo es cuestin de horas de prc- ra haz click zar nuevamente. que el blanco
N 98 57
98_52_59_Curso ok.indd 9 21/2/08 16:04:19

Prctico
se fusione con el fondo, de manera que donde se encuentra la persona

el truco sea natural y no queden cica- que eliminars. Procura de- Consejo
trices del retoque. jar un margen suficiente para Aqu hay dos factores muy importan-
observar algo del en- tes que determinarn la calidad del
torno, ya que ser una retoque digital; en primer lugar, una
referencia bsica en el proceso que seleccin ajustada, de bordes sua-
viene a continuacin. De esta forma, ves, que no elimine informacin que
has ampliado la vista de la zona que deseas conservar. Por otro lado, el
editars. ingenio y buen ojo que hacen falta pa-
ra escoger acertadamente las zonas
3
Dirgete a ideales para clonar. Cuando se trata
la Paleta de rboles, cielo y paisajes lejanos
de Herra- (como en este ejercicio) la tarea se
mientas, escoge la simplifica, ya que los defectos se disi-
Herramienta Lazo; mulan muy fcilmente. Y como siem-
6
Finalmente abre el men Archi- en la Paleta de Con- Paso, 1; Densidad, 100. Has creado pre: practica, practica, y practica
vo, elige Guardar Como (o pulsa figuracin, selec- un pincel redondo con los bordes
la combinacin Ctrl + Mays + ciona la opcin A suavizados. la zona de color blanco, con la mues-
S); ponle un nuevo nombre al archivo mano alzada, escri- tra que has tomado. Repite el mismo
5
(para conservar el original intacto), y be 2 en el apartado Progresivo, y marca Tu tarea procedimiento tantas veces como sea
haz click en Guardar. la casilla de verificacin Antiarrugas. A ahora
continuacin realiza con sumo cuidado consiste
Paint Shop Pro una seleccin a mano alzada alrededor en clonar par-
del sujeto que vas a eliminar; hazlo tes del fondo
1
En el men Archivo, elige Abrir con paciencia del paisaje, o
y escoge una fotografa en la que y tranquilidad. lo que es lo
aparezca algn personaje que Si te equivocas mismo, inven-
desees eliminar. Lo ptimo sera que el y la seleccin tarte lo que
desaparece, pue- debera haber
des empezar de detrs del personaje eliminado. Pa- necesario, hasta cubrir toda la zona
nuevo. ra ello tendrs que pintar sobre el del color elegido. Debes intentar que
fondo fuera homogneo, pero no es im- rea que ha quedado en blanco., de el blanco se fusione con el color del
4
prescindible porque con las herramien- Ahora abre tal forma que no se note en exceso. fondo, de manera que el truco sea
tas adecuadas se puede inventar lo que el men Es tan fcil como parece. Pulsa la te- natural y no queden cicatrices del
falta. A continuacin, haz click en Abrir. Edicin, cla Shift y haz click simultneamente retoque .
y elige Limpiar; con la herramienta del Pincel de Co-
2 6
Dirgete a la Paleta de Herra- tambin puedes pia, en la zona que deseas copiar. A Finalmente abre el men Ar-
mientas, y escoge Acercar (el pulsar la tecla continuacin, comienza a pintar en chivo, elige la opcin Guardar
icono de la lupa). Ahora haz Suprimir de tu Como, o pulsa la tecla F12. En
teclado. Como la ventana que se abre, escribe un
consecuencia, nuevo nombre para el archivo, dife-
has eliminado a
la persona y en
su lugar queda un espacio en blanco.
Ahora desde la Paleta de Herramien- rente al de la imagen original, en la
tas elige el Pincel de Copia, y confi- casilla Nombre. De esta forma podrs
gura sus propiedades de la siguiente conservar el original intacto, pero
click sobre la imagen, y sin soltar el manera: Forma, Redonda; Tamao, tendrs una versin retocada el mis-
botn del ratn, selecciona el rea 20. Definicin, 50; Opacidad, 100; mo. Haz click en el botn guardar.
Resumiendo...
1 Ir al men Archivo 3 Elegir Abrir 3 Seleccionar fotografa 3 Abrir 1 Ir al men Archivo 3 Elegir Abrir 3 Seleccionar fotografa 3 Abrir
2 Abrir Paleta de Herramientas 3 Escoger Zoom 3 Click y desplazar 3 2 Abrir Paleta de Herramientas 3 Escoger Acercar 3 Click y desplazar 3
Ampliar imagen Ampliar imagen
3 Ir a Paleta de Herramientas 3 Escoger Lazo 3 Configurar Propiedades 3 3 Ir a Paleta de Herramientas 3 Escoger Lazo 3 Configurar Propiedades 3
Realizar seleccin a mano alzada Realizar seleccin a mano alzada
4 Abrir Men Edicin 3 Borrar 3 Ir a Paleta de Herramientas 3 Elegir 4 Abrir Men Edicin 3 Borrar 3 Ir a Paleta de Herramientas 3 Elegir
Tampn de Clonar 3 Configurar Propiedades Pincel de copia 3 Configurar Propiedades
5 Click + Alt para tomar muestras 3 Pintar clonando hasta cubrir las 5 Click + Maysculas para tomar muestras 3 Pintar clonando hasta cubrir
zonas blancas las zonas blancas
6 Abrir men Archivo 3 Elegir Guardar Como 3 Nombrar archivo 3 Guardar 6 Abrir men Archivo 3 Elegir Guardar Como 3 Nombrar archivo 3
58 www.pctoday.es
98_52_59_Curso ok.indd 10 21/2/08 16:04:20

Curso
Escanear fotografas 2
Abre el men Archivo, seleccio- Opaco, en Entrada (o Resolucin)
na la opcin Importar, escoge escribe 300 dpi, y en Escalar escoge
TWAIN y luego la opcin Adqui- el 100%. Ahora coloca el puntero del
Aunque ya slo utilices tu cmara di- Paint Shop Pro rir. Se abrir la ventana del software de ratn en un ngulo de la fotografa,
gital, puede que tengas muchas im-
genes en papel que quieras almace-
y Adobe Photoshop tu escner. Pulsa el botn Previsualizar y sin soltar el botn arrastra hasta
1
nar junto a las primeras, en un CD o Apoya la foto que desees digita-
en el propio disco duro del PC. lizar sobre el vidrio de tu esc-
Para hacerlo, necesitars un escner, ner o la bandeja de entrada del para que el escner haga un barrido y abarcar toda su superficie. Suel-
el cual es un perifrico dedicado ex- mismo. Pon la imagen hacia abajo para te muestre lo que has colocado sobre ta el botn izquierdo del ratn que
presamente al proceso de digitalizar que el haz de luz pueda capturarla. Co- la bandeja. quede seleccionada el rea que de-
imgenes. Este dispositivo explora la loca los bordes de la foto junto a cual- seas adquirir. Luego pulsa el botn
informacin de tu fotografa con un haz Digitalizar.
de luz, traduce esa informacin a unos
y ceros para que la entienda el ordena-
dor y la vuelca a tu programa favorito
de tratamiento de imgenes. Eso es
todo! Ya tienes tu foto en formato di-
4
gital, lista para archivar o retocar con Una vez que finalice la explo-
las herramientas de tu programa. Algu- racin de la imagen, se abrir
nos modelos incluso pueden realizar el la fotografa en una nueva ven-
proceso con diapositivas, transparen- tana de Photoshop o de Paint Shop
cias y otros tipos de representaciones, Pro. Abre el men archivo y escoge
adems de las tpicas fotografas o do- Guardar, o pulsa la combinacin Ctrl
cumentos en papel. Incluso los hay es-
pecficos para escanear objetos en tres
dimensiones.
El proceso es muy similar en ambos + S. En el apartado Formato escoge
programas, ya que ambos aprovechan quier ngulo del escner, para que la TIFF para que la imagen no pierda
el software que viene incluido con el foto quede correctamente alineada con calidad, escri-
escner o el propio de Windows XP. s- la direccin de lectura. Luego baja la be un nombre
te ha de ser compatible con el estndar tapa del escner si es necesario o pro- descriptivo pa-
TWAIN, algo que ya es habitual en casi cede a activar el botn de preparado si ra tu fotografa,
la totalidad de los productos. es un escner de bandeja. elige un destino de tu disco duro, y
3
Configura los parmetros de finalmente haz click en Guardar. Ya
exploracin de la imagen. El tienes tu fotografa en formato digital,
Aplicar bordes y marcos creativos nombre de los apartados pue-
de variar de acuerdo a cada software,
lista para archivar o para retocar en
la aplicacin que has utilizado o en
pero bsicamente estos son los valo- cualquier otra compatible con el for-
Algo muy interesante es la aplica- del men Capa, y luego en Estilo res importantes: en Modo de Color mato en que la has guardado.
cin de marcos personalizados a las de Capa. escoge RGB, en Original selecciona
fotos. En Paint Shop Pro, debes abrir Puedes crear marcos rectangulares
el men Imagen y luego escoger la o elpticos; planos, o en relieve. Los Consejo
opcin Marcos. A partir de all, se bordes tambin pueden ser suaviza-
dos, como en las viejas fotos de tus Los controladores de la mayora de
abuelos. El lmite lo pone tu crea- los escneres traen de serie potentes
tividad. Puedes aplicar los marcos funciones, que puedes aprovechar al
para enviar tarjetas de felicitacin mximo antes de escanear: parmetros
a travs del correo electrnico, o como el brillo y el contraste, el enfoque
imprimirlas para sorprender a tus y la gama de colores, habitualmente
familiares y seres queridos. Tambin puedes configurarlos desde el software
puedes apli- carlos del escner. Si aprendes a manejar a
para fondo estas funciones, te ahorrars
abrir el Asistente de Enmarcado, colocar mucho tiempo en el tratamiento poste-
que ofrecer algunos estilos prede- en un rior de la fotografa.
finidos, con los que seguramente lbum
llegars a resultados sorprendentes. de
En cuanto a Photoshop, no es todo foto-
tan sencillo ya que no posee una grafas
herramienta automatizada (como en la web. Resumiendo...
Paint Shop Pro) que lleve a cabo Recuerda algo importante: siempre
esta tarea. Para agregar marcos a que apliques marcos personaliza- 1 Apoyar la foto en el escner 3 Ajustarla a un ngulo 3 Bajar la tapa
tus fotos desde Photoshop, primero dos a tus fotografas, hazlo en una
debes ampliar el tamao del lienzo nueva capa as preservas los pxe- 2 Abrir men Archivo 3 Elegir Importar 3 Elegir TWAIN 3 Click en
para crear unos bor- les reales de la foto. Adquirir 3 Se abre ventana del controlador 3 Click en Previsualizar
des blancos alrede- Y guarda el archivo
dor de la fotografa. con un nombre dife- 3 Configurar parmetros de exploracin 3 Seleccionar fotografa 3
Luego puedes crear rente, en formato TIFF,
el marco en una para conservar intacto Click en Digitalizar
nueva capa, apli- el original. Podrs vol- 4 Se abre la foto 3 Abrir men Archivo 3 Escoger Guardar 3 Formato
cando los infinitos ver a editarlo en cual-
efectos de capa que quier momento. TIFF 3 Nombrar foto 3 Click en Guardar
encontrars dentro
N 98 59
98_52_59_Curso ok.indd 11 21/2/08 16:04:22

Curso
Embellecer retratos
En esta ltima entrega del curso de retoque fotogrfico digital, el protagonista es el retrato. Aqu
te enseamos los mejores trucos para que puedas embellecer y mejorar las fotografas de tus seres
queridos y eliminar as las marcas del paso del paso del tiempo o corregir defectos de la piel.
Gua del curso

Selecciones sencillas. Mscara rpida. Extraer. The GIMP. PC Today n 94
Q uin no se ha peinado o ha
puesto una hermosa sonri-
sa, ante el disparo de una
cmara fotogrfica? Todo el
mundo desea aparecer con su mejor
rostro en cualquier fotografa. Esta ac-
rompas ninguna foto; lee atentamente
los trucos que te enseamos a conti-
nuacin y tus nietos te recordarn
como una hermosa persona!
En este captulo del curso, el ser
humano es el protagonista, ya que
2. Corrige el aspecto general de tus fotos. titud es muy comprensible, ya que de- aprenders bsicamente a embelle-
Brillo y contraste, capas de ajuste, tono, exposicin y color. PC Today n 95 seamos que en el futuro nos recuerden cer los retratos de tus seres queridos
3. Tcnicas de reparacin de fotos (I). como bellas personas en el ms am- ; podrs eliminar arrugas y marcas
Reparar manchas y texturas, corregir polvo y rascaduras, eliminar el moir. PC Today n 96 plio sentido de la expresin. del paso del tiempo, en muy pocos
4. Tcnicas de reparacin de fotos (II). Es posible que muchas de las fotogra- pasos. Te transformars en un ciru-
Eliminar araazos rectos, borrar elementos no deseados, minimizar manchas. PC Today n 97 fas que nos han tomado a travs de jano plstico digital. Tambin podrs
5. Recreando fotos creativamente. los aos, no nos muestren muy agra- corregir el tpico problema de ojos
Fondos personalizados, bordes y marcos creativos, modificar personajes. PC Today n 98 ciados. Gracias a las fabulosas herra- rojos que ha estropeado tantas foto-
6. Embellecer y refinar retratos. mientas que ofrecen Adobe Photoshop grafas, y aprenders a usar efectos de
Eliminar defectos de la piel, enfoque suavizado, disimular el paso del tiempo, y Paint Shop Pro, muchos de estos pro- desenfoque e iluminacin para dar a
blemas pueden solucionarse casi mgi- tus retratos el toque de refinamiento
camente. No hace falta que escondas ni que har que se vuelvan inolvidables.
54 www.pctoday.es
99_54_61_Curso ok.indd 14 21/2/08 16:23:42

4
Paint Shop Pro
Corregir ojos rojos
Dirgete a la fotografa amplia-
da, y haz click con la varita en
1
la parte roja de los ojos, para Desde el men Archivo, elige
crear una seleccin; pulsa SHIFT en tu Abrir, o pulsa la combinacin
teclado y haz click ahora sobre el otro Ctrl + O y escoge la imagen con
el problema de ojos rojos. Haz click en
el botn Abrir.
ojo, para sumar las selecciones. A con-

tinuacin abre el men Imagen, selec-
ciona Ajustes y finalmente escoge Tono
/ Saturacin (tambin puedes pulsar el
Es casi imposible que nunca te haya De esta forma podrs atajo Ctrl + U).
2
sucedido lo siguiente: la fotografa que ver mejor la zona en Desde la Paleta de Herramien-
has tomado es preciosa, la composi- la que vas a trabajar y tas de Paint Shop Pro elige la
cin y la iluminacin son casi perfec- Herramienta Acercar; luego
5
tas, y todo parece estar fenomenal, Se ha abierto el cuadro de dilo-
salvo por un problema los protago- go Tono / Saturacin; en el apar-
nistas parecen estar endemoniados tado Editar, despliega el men
ya que sus ojos presentan un extrao apreciars los efectos correspondiente y escoge Rojos, para
color rojizo. del proceso a realizar. corregir selectivamente dicho canal.
Algunos programas de retoque fotogr- Haz click en la casilla de verificacin
fico ya incorporan herramientas que Ver, para previsualizar el resultado.
solucionan ste problema de forma haz click en la imagen, y sin soltar el
automtica con muy buenos resulta- botn, desplaza el ratn abarcando el
dos. Pero aqu aprenders a utilizar
tu sentido comn y hacerlo en forma
manual, para obtener resultados an
ms naturales.
La tcnica es muy sencilla y se basa
3
principalmente en restarle saturacin A continuacin debes seleccio-
al canal del color rojo, solamente en la nar slo el rea defectuosa de
zona de las pupilas, y mantener los va- los ojos. Escoge la herramienta rea de los ojos, para acercarte tanto
lores de brillo y contraste inalterables. Varita Mgica desde la Dirgete al apartado Saturacin y des- como puedas .
Manos a la obra. Paleta de Herramientas. plaza el regulador hacia la izquierda.
3
En la Barra de Propieda- Define un valor aproximado de 50, A continuacin debes seleccio-
Photoshop ya que logra buenos resultados. Deja nar el rea defectuosa de los
el resto de valores intactos, y cuando ojos. Escoge la Varita Mgica
1
Desde el men Archivo, elige el aspecto de desde la Paleta de Herramientas. En la
la opcin Abrir y escoge una des configura la Toleran- los ojos sea Paleta de Configuracin escoge Valor
imagen que contenga alguna cia con un valor de 35, y lo ms natu-
figura con el problema de ojos rojos. marca las casillas correspondientes a ral posible,
Haz click en el botn Abrir. Suavizado, Contiguo, y Todas las Capas. haz click en el botn OK.
6
Abre el men vista, y escoge RVA en Correspondencia, y escribe 35
Encajar en pantalla, para ver el como valor de Tolerancia; marca la ca-
Consejo resultado de tu obra con una silla Muestra Fusionada.
Shop Pro, la clave en este truco (como
en muchos otros) consiste en lograr
mayor distancia. Si el resultado te con-
una seleccin ajustada y precisa. Si
vence, abre el men Archivo y seleccio-
con la varita mgica no logras una se-
leccin correcta con el primer click,
na la opcin Guardar. De esta forma se
aplicarn los cambios en tu imagen de
2
sigue sumando reas de seleccin
Desde la Paleta de Herramien- con la herramienta que mejor mane- forma definitiva.
tas de Photoshop, normalmente jes (lazo, seleccin elptica, etctera).
situada a a la izquierda del rea Luego vara la saturacin del canal
de trabajo, elige la Herramienta Zoom. rojo, buscando que el ojo mantenga
Luego haz click en la imagen y, sin su brillo y textura, para que su aspec-
soltar el botn, desplaza el ratn abar- to sea absolutamente natural.
cando un rea que encierre los ojos.
N 99 55
99_54_61_Curso ok.indd 15 21/2/08 16:23:45

Curso
4 6
Dirgete a la fotografa amplia- Abre el me-
da, y haz click con la varita en n Ve r, y
la parte roja de los ojos, para escoge Ale-
5
crear una seleccin; pulsa SHIFT en tu Se ha abierto el cuadro de dilogo jar x 5, para ver el
teclado y haz click ahora sobre el otro Tinte / Saturacin / Luminosidad; resultado de tu obra con una mayor
ojo, para sumar las selecciones. A con- en el apartado Editar, despliega distancia. Si el resultado te conven-
tinuacin abre el men Colores, selec- el men y escoge Rojos, para corregir ce, abre el men
ciona Ajustar y finalmente escoge Tinte selectivamente dicho canal. Haz click Archivo y escoge
/ Saturacin / Luminosidad. en el icono del Ojo, para previsualizar Guardar (o pulsa
el resultado. Ve al apartado Saturacin la combinacin Ctrl + S), para apli-
y desplaza el regulador hacia abajo; un car los cambios en tu imagen.
valor aproximado de 60 logra buenos
resultados. Deja el resto de valores in-
tactos, y cuando el aspecto de los ojos
sea lo ms natural posible, haz click en
el botn Aceptar.
Resumiendo...
1 Ir al men Archivo 3 Escoger Abrir 3 Seleccionar imagen 3 Abrir 1 Ir al men Archivo 3 Escoger Abrir 3 Seleccionar imagen 3 Abrir
2 Ir a Paleta de Herramientas 3 Elegir Zoom 3 Click y arrastrar 3 Ampliar 2 Ir a Paleta de Herramientas 3 Elegir Acercar 3 Click y arrastrar 3
imagen Ampliar imagen
3 Ir a Paleta de Herramientas 3 Escoger Varita Mgica 3 Configurar 3 Ir a Paleta de Herramientas 3 Escoger Varita Mgica 3 Configurar
4 Click en zona defectuosa 3 Abrir men Ajustes 3 Escoger Tono / 4 Click en zona defectuosa 3 Abrir men Ajustar 3 Escoger Tinte /
Saturacin Saturacin / Luminosidad
5 Editar Cuadro de dilogo 3 Restar Saturacin 3 Previsualizar el resultado 5 Editar Cuadro de dilogo 3 Restar Saturacin 3 Previsualizar el resultado
3 Click en OK 3 Click en OK
6 Abrir men Vista 3 Encajar en Pantalla 3 Abrir men Archivo 3 Guardar 6 Abrir men Ver 3 Alejar x 5 3 Abrir men Archivo 3 Guardar
Eliminar defectos de la piel Photoshop

2
Ve a la Paleta de Herramientas
y selecciona el Tampn de Clo-
1
Desde el men Archivo haz nar; puedes hacerlo tambin
Nadie esta exento de tener pequeas rostro, para que puedan tener un as- click en Abrir. Escoge la foto pulsando la tecla S. Luego dirgete a
marcas en la piel: desde el acn juve- pecto perfecto. que deseas corregir de tu disco la Barra de Propieda-
nil hasta las arrugas de la vejez, nues- Tanto en Photoshop como en Paint duro o de cualquier otro dispositi- des, y configura un pin-
tra piel va registrando diversos cam- Shop Pro, la tcnica consiste en utilizar vo de almacenamiento. Dirgete a la cel suave de 15 pxeles,
bios que reflejan los acontecimientos el tampn de clonar, copiando infor-
a lo largo de nuestra vida. macin buena de la piel y aplicndo-
En este ejemplo veremos como quitar la sobre una capa vaca. El resultado
pequeas espinillas del rostro de una depender mucho de la calidad de la Modo Normal, Opacidad
adolescente. Muchas de ellas suelen imagen original, ya que no consiste en 50%, y marca Usar Todas
aparecer horribles en las fotos! De inventar piel, sino en copiarla de otro
esta manera podremos eliminar sus sitio donde sea ms perfecta. Vamos a Paleta Capas, y
espinillas y pequeas marcas en el hacer de cirujanos plsticos. pulsa el botn Crear una capa nue- las Capas; deja el resto de valores que
va. Luego haz doble click en el nom- queden intactos.
bre de la capa, y llmala Eliminar
3
Defectos. Desde la Paleta de Herramientas
de Photoshop elige la Herramien-
ta Zoom (el icono de la Lupa);
luego haz click en la
imagen, y sin soltar el
botn, desplaza el ratn

abarcando la zona de
las espinillas, para verlas ms en detalle.
Luego dirigete a la Paleta Capas, y haz
56 www.pctoday.es
99_54_61_Curso ok.indd 16 21/2/08 16:23:46

de las espinillas, para verlas ms en

Consejo detalle. A continuacin ve a la Paleta
Esta tcnica es similar a otras en las que

has aprendido a eliminar manchas de
humedad en fotos antiguas, o defectos
y arrugas del papel. La diferencia radi-
ca en elegir acertadamente las zonas
de piel sana, para que el retoque sea
imperceptible. La gran ventaja de rea-
lizar la tarea sobre una capa vaca, es
que luego puedes editarla independien-
temente, cambiando su opacidad, para
click en la capa de Eliminar Defectos papelera de la Paleta Capa y
que el resultado sea an ms perfecto.
ra activarla. volver a comenzar nuevamente. Cuan-
do las espinillas
4
Con la herramienta Tampn de hayan desapareci- be Eliminar Defectos como nombre
Clonar, haz click + Alt en zonas do, abre el men para la capa; deja el resto de valores
cercanas a las espinillas, para Capas y selecciona intactos, y haz click en Aceptar.
tomar muestras de piel sana con valo- Capas, y haz click en la capa Eliminar
2
Ve a la Paleta de Herra- Defectos para activarla.
mientas y selecciona el
4
Pincel de Copia. Luego Con la he-
Acoplar Imagen. Finalmente Guarda dirgete a la Barra de Propieda- rramienta
tu archivo pulsando Ctrl + S para con- des, y configura un pincel suave de 15 Pincel de
servar los cambios. Copia, haz click +
Shift en zonas cer-
Paint Shop Pro canas a las espi-
nillas, para tomar
1
Desde el men Archivo haz click muestras de piel sana con valores de
en Abrir y escoge la foto que brillo y color similares. Una vez toma-
deseas corregir de tu disco duda la muestra, haz click directamente
res de brillo y color similares. Una vez ro. Dirgete a la Paleta Capas, y pulsa sobre las espinillas, para ocultarlas
tomada la muestra, haz click directa- bajo la nueva piel. Repite este proce-
mente sobre las dimiento dos o tres veces, hasta que las
espinillas, para marcas sean imperceptibles .
ocultarlas bajo la el botn Crear una capa nueva. En el
5
nueva piel. Re- cuadro de dilogo que se abre, escri- Repite el paso 4 sobre cada
pite este procedi- una de las marcas que encuen-
miento dos o tres pxeles, Forma Redonda, Definicin 50 tres en la piel; si no ests con-
veces, hasta que y Opacidad 50; deja el resto de valores forme con el resultado. Cuando las
las marcas sean como vienen por defecto. espinillas hayan desaparecido, abre
imperceptibles.
3
Desde la Paleta de
5
Repite el paso anterior sobre Herramientas de
cada una de las marcas que Paint Shop Pro elige el men Capas, selecciona Fusionar,
encuentres en la piel; si no es- la Herramienta Acercar (el icono de y luego haz click en Fusionar Todo
ts conforme con el resultado, pue- la Lupa); luego haz click en la ima- (aplanar). Finalmente Guarda tu ar-
des borrar la capa Eliminar Defectos gen, y sin soltar el botn del ratn, chivo pulsando Ctrl + S para conser-
haciendo click en el icono de la pa- desplaza el ratn abarcando la zona var los cambios.
Resumiendo...
1 Abrir men Archivo 3 Abrir foto 3 Ir a Paleta Capas 3 Crear capa 3 1 Abrir men Archivo 3 Abrir foto 3 Ir a Paleta Capas 3 Crear capa 3
Nombrarla Eliminar defectos Nombrarla Eliminar defectos
2 Ir a Paleta de Herramientas 3 Click en Tampn de Clonar 3 Configurar 2 Ir a Paleta de Herramientas 3 Click en Pincel de copia 3 Configurar
3 Ir a Paleta de Herramientas 3 Elegir Zoom 3 Click y arrastrar para 3 Ir a Paleta de Herramientas 3 Elegir Acercar 3 Click y arrastrar para
ampliar defectos 3 Ir a Paleta Capas 3 Activar capa Eliminar defectos ampliar defectos 3 Ir a Paleta Capas 3 Activar capa Eliminar defectos
4 Click + Alt con Tampn de clonar 3 Tomar muestras de piel 3 Click y 4 Click + Shift con Pincel de copia 3 Tomar muestras de piel 3 Click y
pintar sobre espinillas 3 Repetir procedimiento pintar sobre espinillas 3 Repetir procedimiento
5 Borrar capa Eliminar defectos 3 Abrir men Capas 3 Acoplar Imagen 5 Borrar capa Eliminar defectos 3 Abrir men Capas 3 Fusionar todo 3
3 Guardar archivo Guardar archivo
N 99 57
99_54_61_Curso ok.indd 17 21/2/08 16:23:48

Curso
Efectos de enfoque suavizado suavizado que va desde

el color negro hasta el
blanco.
Este truco resulta tan sencillo como
sorprendente; consiste en desenfocar fondo y el negro como co-
solamente una parte de la imagen, y lor de frente o seleccina-
enfocar slo una zona, sobre la cual lo con el botn del ratn
deseamos centrar la atencin del es-
pectador. Podramos llamarla Tcnica
de enfoque selectivo.
en la seccin colores de la
barra de herramientas.
4 6
Dirgete a la Paleta de Herra- Abre el men Capas y seleccio-
mientas y escoge la Herramienta na la opcin Acoplar Imagen.
Degradado (puedes pulsar la Por ltimo, selecciona la op-
letra G de tu teclado). cin Guardar del men Archivo o pul-
(Captura 3010) En la Ba-
rra de Propiedades de la
sa la combinacin de teclas Ctrl + S

para aplicar los cambios a la imagen
que acabas de editar.
Herramienta, selecciona
Degradado Radial. Deja
el resto de valores por defecto.
2
Este efecto es muy utilizado en revistas A continuacin abre el men
de moda y belleza, donde la fotografa Filtro, escoge Desenfocar, y eli-
no solamente cumple una misin inge Desenfoque Gaussiano. En el
5
formativa, sino que tambin transmite cuadro de dilogo que se abre, escribe A continuacin haz click en el
una esttica glamorosa muy particular. 15 pxeles en el apartado Radio. Marca centro de atencin de la foto- Consejo
Si observas estas revistas detenidamen- la casilla de verificacin Ver para pre- grafa. En el caso del ejemplo
te, notars que sus fotografas son casi escogido seran los rostros del beb No tengas miedo en intentar varias
perfectas, los brillos en las modelos, la y su madre. Sin soltar el botn del ra- veces el efecto del degradado, ya que
coloracin de los vestidos y el tono en tn, arrastra la herramienta hasta la all est la clave de este truco. Prue-
general, transmiten un clima apacible y zona ms alejada de dicho centro. Si ba varias veces, vuelve atrs con Ctrl
confortable a la vez. el resultado del efecto no te convence, + Z, e intntalo una vez ms. Debes
Puedes aplicar este efecto sobre una pulsa Ctrl + Z o elije la opcin des- lograr que la atencin del espectador
fotografa que aprecies especialmente, hacer del men Edicin en la barra vaya directamente a la zona enfoca-
por los recuerdos que te transmite, pa- superior de da de la imagen; en cuanto a la zona
ra aplicarle un toque an ms refinado. la aplicacin. desenfocada, debe tener un equilibrio
Vuelve a inten- tal que no se vea demasiado borro-
Photoshop visualizar el efecto. No te asustes si tarlo, hasta que sa. Aljate de tu monitor y observa el
la imagen queda totalmente borro- haya un equili- resultado con cierta distancia, para
1
Desde el men Archivo haz sa, el efecto es correcto. Finalmen- brio entre la apreciar mejor el efecto global.
click en Abrir y escoge la fo- zona enfocada y
to a la que deseas aplicarle el desenfocada. En la Capa para desenfo-
enfoque selectivo. Dirgete a la Paleta car debe haberte quedado un crculo Paint Shop Pro
Capas, y desde el men asociado la
1
paleta escoge Duplicar Capa. En el Desde el men Archivo haz click
en la opcin Abrir y escoge la fo-
tografa a la que deseas aplicarle
el efecto de enfoque selectivo. Dirgete al
men Capas y selecciona
la herramienta Duplicar.
cuadro de dilogo que se abre, es-
cribe Capa para desenfocar, y en
Destino selecciona el mismo archivo
que ests utilizando. Luego haz doble
click en OK para duplicar la capa.
te pulsa OK para
2
aplicar el filtro. Dirgete a la Paleta de Herra-
mientas y pulsa en el icono
3
Abre el men Capa. Selecciona correspondiente a la de Selec-
la opcin Aadir mscara de cionar. En la Paleta de Configuracin,
capa y haz click en Descubrir escoge Crculo en el apartado Tipo de
todas. Pulsa la tecla D de tu teclado Seleccin y escribe el valor 30 en el
para escoger el blanco como color de apartado Progresivo. Esto sirve para
58 www.pctoday.es
99_54_61_Curso ok.indd 8 21/2/08 16:23:51

Dirgete al men Seleccionar y escoge

Invertir, o pulsa la combinacin de te-
clas Mays + Ctrl + I.
crear una seleccin circular de bor-
4
des suavizados. A continuacin abre el men
Efectos, elige Desenfoque y lue-
go haz click en Desenfoque de
Gauss. Se abrir un cuadro de dilogo, zona enfocada y desen-
y en el apartado Radio escribe un valor focada. Finalmente pul-
alto como 15; pulsa el icono del ojo pasa Aceptar para aplicar los cambios.
5
Abre el men Capas, selecciona
Fusionar, y haz click en Fusio-
nar Todo
3
Ahora busca el centro de aten- (aplanar).
cin de la fotografa (en este Finalmente Guarda tu archivo pulsando
caso los rostros del beb y su ra previsualizar el resultado. Si el resul- Ctrl + S para aplicar los cambios.
madre), haz click y sin soltar el botn tado del efecto no te convence, vuelve
del ratn, arrastra para crear una se- a intentarlo escribiendo otros valores,
leccin elptica de bordes suavizados. hasta que haya un equilibrio entre la
Resumiendo...
1 Desde el men Archivo 3 Abrir 3 Escoger foto 3 Abrir Paleta Capas 3 1 Desde el men Archivo 3 Abrir 3 Escoger foto 3 Abrir Paleta Capas 3
Duplicar Capa Duplicar
2 Abrir men Filtro 3 Desenfocar 3 Desenfoque Gaussiano de 15 pxeles 3 2 Ir a Paleta de Herramientas 3 Escoger el botn Seleccionar 3 Abrir
Previsualizar efecto 3 Pulsar OK para aceptar Paleta de Configuracin 3 Escoger la herramienta Crculo 3 Escribir 30
3 Abrir men Capa 3 Aadir mscara de Capa 3 Pulsar tecla D para en Progresivo
configurar negro y blanco como colores de frente y fondo. 3 Click + arrastrar para crear seleccin 3 Abrir men Seleccionar 3
4 Ir a Paleta de Herramientas 3 Escoger Degradado 3 Ir a Barra de Escoger invertir
Propiedades 3 Click en Degradado Radial 4 Abrir men Efectos 3 Elegir Desenfoque 3 Click en Desenfoque de Gauss
5 Click + arrastrar desde el centro de atencin 3 Intentarlo hasta lograr 3 Escribir 15 en cuadro de dilogo 3 Click en Aceptar
equilibrio 5 Abrir men Capas 3 Escoger Fusionar 3 Click en Fusionar Todo 3 Ctrl +
6 Men Capas 3 Click en Acoplar Imagen 3 Ctrl + S para aplicar cambios S para guardar los cambios
Como siempre, lo ms importante es Photoshop

Disimular el paso del tiempo que el resultado final del retoque sea
1
casi imperceptible y natural; de mane- Desde el men Archivo haz
Esta tcnica tambin es muy utilizada cer a las personas fotografiadas, qui- ra que en este ejercicio intentaremos click en Abrir y escoge el re-
en los medios escritos de comunica- tndoles algunas arrugas y suavizando suavizar las arrugas, y no eliminarlas trato en el cual deseas minimi-
cin, ya que se utiliza para rejuvene- marcas de la piel. totalmente; an la persona ms joven zar las arrugas. Dirgete a la Paleta
genera arrugas en su rostro con tan Capas, y desde el men asociado a
slo rerse o gesticular, de manera la paleta escoge Duplicar Capa. En el
que una cara sin una sola arruga es
algo imposible.
Aprende la tcnica que desarrollamos
a continuacin y luego aplcala en
forma combina-
da con las que
has aprendido
a lo largo del
curso. As con-
seguirs realizar
retoques digita-
les totalmente
imperceptibles.
N 99 59
99_54_61_Curso ok.indd 9 21/2/08 16:23:52

Prctico
cuadro de dilogo que se abre, escri-

be Minimizar arrugas, y en Destino
selecciona el mismo archivo que es-
ts utilizando. Luego haz doble click
en OK para duplicar la capa.
dad ++. Es importante que el grosor que el relieve no se note en exceso. Si
del pincel sea similar al grosor de las algunas arrugas son ms gruesas que
arrugas de la piel. otras, modifica las opciones del pin-
hacia adentro. Debes ir aclarando de cel que ests utilizando para que se
esta manera cada una de las arrugas, adapte totalmente al grosor de cada
para que el relieve no sea tan notorio.
Si algunas arrugas son ms gruesas
que otras, modifica tu pincel adaptn-
2
Ve a la Paleta de Herramientas y dolo al grosor de cada una de ellas.
escoge el modo de Sobreexpo- Repite el procedimiento hasta cubrir
ner. En la Barra de Propiedades todas las arrugas.
configura una Exposicin del 15%,
5
elige Rango de Medios Abre el men Capas y selec- una de ellas. Repite el procedimiento
Tonos, y escoge un Pincel ciona la opcin Acoplar Ima- hasta cubrir todas las arrugas.
con bordes suavizados de gen. Por ltimo, elije la opcin
10 pxeles. Es importante Guardar tu ar-
chivo en dis- Consejo
co o pulsa la
combinacin de teclas Ctrl + S para Cuando realices este retoque digital, ha-
que el grosor del pincel aplicar los cambios. zlo con la mayor paciencia posible, traba-
sea similar al grosor de las arrugas de jando individualmente sobre cada arruga.
3
la piel. Desde la Paleta de Herramientas Adapta el grosor de tu pincel a cada una
de Paint Shop Pro elige la He- de ellas, si no las pinceladas se notarn y
estropearn el efecto. Y ten presente este
rramienta Acercar (el icono de
consejo: busca siempre la naturalidad,
la Lupa); luego haz click en la imagen, no elimines las arrugas por completo ya
y sin soltar el botn, desplaza el ratn que el rostro parecera de plstico. Con
3
Desde la Paleta de Herramientas Paint Shop Pro tan solo suavizarlas, logrars que la per-
sona retratada tenga una apariencia ms
de Photoshop elige la Herra-
1
fresca y lozana.
mienta Zoom (el icono de la Lu- Desde el men Archivo haz click
pa); luego haz click en la imagen, y sin en Abrir y escoge el retrato en el
5
soltar el botn, desplaza el ratn abar- cual deseas minimizar las arru- Abre el men Capas, selecciona
cando la zona de las arrugas, para ver- gas. Dirgete al men Capas, y haz click abarcando la zona de las arrugas, para la opcin Fusionar y haz click
en Duplicar. Ahora ve a la Paleta Capas, verlas ms en detalle. Luego ve a la Pa- en la opcin Fusionar Todo.
haz doble click en Copia de Capa de leta Capas, y haz click en la capa Mini-
mizar Arrugas para activarla.
4
A continuacin debes realizar
el trabajo ms fino, con pa-
Fondo y renmbrala ciencia y dedicacin: sobre- De esta forma, se aplanarn las ca-
Minimizar arrugas, exponer la parte oscura de las arru- pas que formen la imagen y pasarn
desde el cuadro de dilogo. Deja el gas (el pliegue), desde afuera hacia a ser un archivo ms fcil de expor-
resto de variables intactas. adentro. Debes ir aclarando de esta tar a otras aplicaciones, adems de
manera cada una de las arrugas, para ocupar bastante menos espacio en el
disco. Sin embargo, una vez acoplada
la imagen, no ser posible modificar
los cambios que se corresponden a
las ms en detalle. Luego ve a la Paleta cada capa de una forma sencilla. Para
Capas, y haz click en la capa Minimizar evitarlo, puedes guardar dos versio-
Arrugas para activarla. nes de la imagen, una con todas las
capas en el formato original de Paint
Shop Pro (PSP) y otra ya acoplada en
cualquera de los tipos de archivo que
permite la aplicacin. Un formato es-
tndar que ofrece alta calidad y per-
mite el uso
de capas es
TIFF. Una vez
que hayas finalizado la operacin,
2
Dirgete a la Paleta de Herra- Guarda tu archivo de
mientas y escoge la correspon- trabajo pulsando Ctrl
4
A continuacin debes realizar diente a Retoque. En la Paleta + S para y se aplica-
el trabajo ms fino, con pacien- de Configuracin, elige Forma Re- rn los cambios rea-
cia y dedicacin: sobreexponer donda, Tamao 8, Opacidad 20, Paso lizados en la versin
la parte oscura de las arrugas, lo que 25 y Densidad 80. Despliega el men que tengas abierta en
corresponde al pliegue, desde afuera inferior para seleccionar Luminosi- ese momento.
60 www.pctoday.es
99_54_61_Curso ok.indd 10 21/2/08 16:23:54

Resumiendo...
1 Desde el men Archivo 3 Abrir 3 Escoger foto 3 Abrir Paleta Capas 3 1 Desde el men Archivo 3 Abrir 3 Escoger foto 3 Abrir Paleta Capas 3
Duplicar Capa 3 Renombrar Capa 3 Pulsar OK Duplicar Capa 3 Renombrar Capa 3 Pulsar OK
2 Ir a la Paleta de Herramientas 3 Click en Sobreexponer 3 Configurar 2 Ir a la Paleta de Herramientas 3 Click en Retoque 3 Configurar
Propiedades del pincel Propiedades del pincel
3 Ir a la Paleta de Herramientas 3 Elegir Zoom 3 Click y arrastrar para 3 Ir a la Paleta de Herramientas 3 Elegir Acercar 3 Click y arrastrar para
ampliar arrugas 3 Ir a Paleta Capas 3 Activar capa Minimizar Arrugas ampliar arrugas 3 Ir a Paleta Capas 3 Activar capa Minimizar Arrugas
4 Retocar cada arruga 3 Aclarar las zonas ms oscuras 3 Adaptar pincel 4 Retocar cada arruga 3 Aclarar las zonas ms oscuras 3 Adaptar pincel
al grosor de cada arruga al grosor de cada arruga
5 Abrir men Capas 3 Click en Acoplar Imagen 3 Ctrl + S para guardar 5 Abrir men Capas 3 Click en Fusionar 3 Fusionar todo 3 Ctrl + S para
los cambios guardar los cambios
es iluminar las partes ms destacadas ta que el resultado sea satisfactorio.

Mejorar los retratos con luz de la cara, como los ojos, la nariz y la
boca. Tambin puedes iluminar el pelo
Recuerda, intenta conseguir siempre
una gran naturalidad y utilizar la luz
y el contorno de la figura.
Enseguida notars que la foto se ha
realzado notablemente; sigue pintando
sutilmente, sin que lleguen a notarse
manchas o pinceladas en la piel.
Si utilizas una tableta digitalizadora con
para destacar las reas ms impor-

tantes de la fotografa pero de forma
que no haya un contraste excesivo
con lo que rodea a la zona retocada.
De otro modo, pueden aparecer ha-
los en torno a la figura.
5
Cuando ests satisfecho con el re-
Muchas veces sacamos fotografas que relleno de la capa de color gris. stas sultado, dirgete al men Capas y
no resultan muy malas pero tam- caractersticas se aplicarn para toda selecciona la opcin acoplar ima-
poco son lo suficientemente buenas. la superficie. gen. Vers que las capas que has creado
Un problema se han solidificado y convertido en una
muy comn un lpiz ptico, los resultados sern sla, que se corresponde con el fondo.
es el de la an mas agradables y naturales.
iluminacin,
2 4
que puede llegar a estropear bonitas A continuacin selecciona la he- Una vez que termines de pintar,
composiciones. Si el retrato que has rramienta Aergrafo del panel puedes variar la opacidad de la
tomado resulta un poco soso debido principal. Elige un pincel suave capa neutra para que la ilumi-
a una mala iluminacin, no todo est y grande, con una presin muy nacin sea mayor o menor, de forma Ahora, slo
perdido. Con Photoshop y Paint Shop leve. Determina los valores que que el resultado sea ms acorde con tienes que
Pro puedes solucionar este tipo de in- mejor se adapten a tu mtodo las tonalidades del rostro a tratar. Di- utilizar la funcin Guardar del men
convenientes de varias maneras; una de trabajo y no olvides ampliar la zona rgete a la ventana de capas y desliza Edicin, para que todo tu trabajo quede
de ellas es agregando una capa neutra a tratar, as ganars preci- la barra que marca la cantidad has- registrado.
a la imagen. El mtodo es muy sencillo sin. En la herramienta se-
y a la vez exige de ti algo de habilidad, lector de color, elige blanco
con lo que no te aburrirs. como color principal. Resumiendo...
1 3
Dirgete a la Paleta Capas o al Comienza a pintar sobre la capa 1 Paleta Capas 3 Crear capa neutra 3 Seleccionar Superponer 3
men de la barra superior de neutra y resalta las zonas que
la aplicacin y crea una nue- encuentres ms oscuras. No te Relleno al 50%.
va capa neutra. Selecciona el modo asustes, ya que las pinceladas sern ca- 2 Herramienta Aergrafo 3 Ampliar zona 3 Elegir color blanco.
Superponer en las opciones de la he- si imperceptibles. El color blanco so-
rramienta. Indica un relleno al 50% bre la capa neutra acta como una fina 3 Iluminar las partes ms destacadas de la cara.
en el campo correspondiente para el cortina que ilumina el rostro. Tu tarea 4 Variar la opacidad de la capa.
5 Men Capas 3 Acoplar 3 Guardar.
N 99 61
99_54_61_Curso ok.indd 11 21/2/08 16:23:56

Curso de Diseno Web PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Curso de Diseno Web PDF

Cargado por

Copyright:

Formatos disponibles

87_54_59_Curso 12/2/04 14:59 Pgina 14

Diseo de pginas web

Diseo web. Parte 1

cin de ser un tanto descuidado. Es me- cuerpo (<BODY>...</BODY >) don-

Principales etiquetas de formato de texto

Diseo web. Parte 1

pgina portada.htm a otra llamada

Diseo web. Parte 1

que se transfieren con las pgi-

Trabajar con Sausage Hot Dog

Diseo web. Parte 2

Diseo web. Parte 2

de los enlaces, en una sola ventana te-

carga de las pginas.

naranja. La mejor vi-

El color y las imgenes

Diseo web. Parte 3

mente de un navegador a otro y de un menor medida, y los segundos son el

disponemos para definir los colores

fundamental de estas pginas es ser

Diseo web. Parte 3

Manipulation Program), el ms cono-

El formato PNG es el que ms futuro Cmo instalar The GIMP

diente a las opciones de la herra- muchas diferencias por pulir.

Diseo web. Parte 3

Diseo web. Parte 4

comprender el uso de la misma. Al fi- lo mismo desarrollar una web para un

El quinto congreso sobre Interaccin se celebrar entre el 3 y 7 de mayo de

Si el trmino lo llevamos a cualquier tudia la Interaccin Persona-Orde-

usabilidad de los sitios de comercio do. Cuando digo sencillo, no significa

Diseo web. Parte 4

observando el trabajo que reali- La tipografa Ruptura de continuidad dentro

Diseo web. Parte 4

Estudio rpido de una web

opiniones y consejos de alguien na que aparece debajo del ttulo

Diseo web. Parte 5

del ratn. Para reducir esta dificultad, <tr>

2004</font></h4></td> rio (conocido como DCU). Todo el

Diseo web. Parte 5

Si seguimos estas recomendaciones Texto explicativo de una imagen in-

right"> Se comprenden mejor los problemas

Diseo web. Parte 5

Hay una particularidad para el uso efi-

Diseo web. Parte 6

Dadas las caractersticas de Inter- ractersticas ocupar menos que el

Conceptos bsicos de sonido

cin de 16 bits. Si quieres digitali- cada seccin de transmisin. Para

16 bits de resolucin estreo ocu- El derroche de imaginacin ya no est

Extraer pistas de un CD a otros formatos de audio

Diseo web. Parte 6

chas veces a los profesionales flac.sourceforge.net/ comparison.html.

Comandos HTML relacionados con el sonido (tabla 1) Podemos crear nuestro

Diseo web. Parte 6

yer: www.microsoft.com/windows/ 1,5 Mb/s y una resolucin de

Como solucin a los problemas de Parmetros asociados a OBJECT (tabla 5)

Diseo web. Parte 7

Resource Locator). El nico propsito be interpretar. Pero las verdaderas

Diseo web. Parte 7

Cdigos que enva el servidor al explorador

<HTML> Vamos a crear un ejemplo sencillo:

</style> mos consultar devedge.netscape.com/cen <TITLE>PC Today - MsgBox

ge.substring(x,0);document.ge Visual Basic Script, VBScript o VBS. ejemplo,vbInformation,PC

Diseo web. Parte 7