Curso de Diseno Web

Curso
Diseo de pginas web

Gua del curso
1. Introduccin al diseo web.
Planificar y organizar el sitio. Principales elementos de las pginas web. PC Today n 87 PC Today n 88
2. Herramientas para el diseo web.

Introduccin a las herramientas WYSIWYG. Trabajando con Sausage Hot Dog.
Crear una web no es un reto imposible. Con unos pocos conocimientos y algunas horas de prctica, vers que no es tan complicado y podrs plasmar tu imaginacin en pginas que puede ver todo el mundo.
3. El color y las imgenes.

Psicologa del color, el color en la web. Imgenes: tipologa y caractersticas. Mapas de imgenes. Herramientas para el tratamiento de las imgenes y el color. The GIMP. PC Today n 89
4. Usabilidad.
Qu es la usabilidad y por qu se debe tener en cuenta? Qu hacer y no hacer en el diseo web. Cmo saber si una web es usable. PC Today n 90
5. Accesibilidad.
Qu se entiende por accesibilidad? Deficiencias y polticas. El diseo inclusivo. Consejos para disear una web accesible. Evaluar la accesibilidad. PC Today n 91
6. Tecnologas multimedia en la Red.

Msica y sonido. Imagen animada y pelculas. Integracin multimedia: Macromedia Flash y Action Script. PC Today n 92
7. Programacin.
Razones para conocer los principios de la programacin. PC Today n 93
a idea de realizar un sitio web propio es un propsito que suele pasrsele a muchos cibernautas por la cabeza. Sin embargo, debido a la aparente complejidad que conlleva hacerlo, muchas veces se queda en un simple proyecto. Con este curso queremos transmitir la idea de que convertirte en diseador de tu propia web no tiene por qu ser una epopeya. Con una pequea base de conocimientos y unas cuantas horas de prctica se puede llegar a hacer diseos muy interesantes. Lo primero que debemos tener muy claro cuando creamos un sitio web es saber qu y para qu lo estamos
creando. No es lo mismo disear un sitio personal pequeo para mostrar tus aficiones en unas pocas pginas que crear el portal corporativo de una gran empresa que pretende vender sus productos a travs de la Red. Disear y mantener nuestras pginas, aunque sean personales, es una tarea que requiere cierto tiempo. Por eso es importante centrar primero los temas de los que vamos a tratar y ver hasta qu punto vamos a ser capaces de llevarlos a cabo. Cuntas veces nos hemos encontrado en la Red con sitios que estn a medio terminar? Esto no da una buena imagen de quien ha creado la pgina, da la sensa-
54
www.pctoday.es
Diseo web. Parte 1

cin de ser un tanto descuidado. Es mejor tener poco contenido pero completo, que mucho y no poder abarcarlo todo. cuerpo (<BODY>...</BODY >) donde se muestran todos los elementos en la pantalla. De los elementos que componen la cabecera, el ms importante es el ttulo <TITLE>...</TITLE>, que, como su nombre indica, especifica el ttulo de la pgina web. Es muy importante que no se nos olvide ponerlo, ya que este ttulo aparecer en la barra de ventana identificando los contenidos de la ventana.
Planificar el sitio web

Lo segundo que debemos saber es qu es el diseo. Disear va ms all de hacer una pgina bonita. Disear es organizar los contenidos que se van a mostrar en un sitio web de tal forma que el visitante: primero, encuentre la informacin que busca; y segundo, que el entorno donde reside esa informacin sea agradable y ayude a la comprensin del contenido. Para conseguir que tu sitio web est estructurado debes, antes de hacer nada, saber cmo va a dividirse esa informacin para que le llegue al visitante de la mejor manera. Los cibernautas, en su gran mayora, visitan pginas web por la informacin que encuentran en ella, no por su diseo. Por eso, cuanto ms claro sea ese aspecto, mejor cumplir su labor de vehculo de contenidos. Una herramienta muy til a la hora de comenzar con el planteamiento son los mapas del sitio, que no es otra cosa que un diagrama donde se muestra cmo va a estar estructurado el conjunto de pginas y servicios. No tiene por qu ser exhaustivo y, si quieres, puedes hacerlo a mano. La idea es tener una referencia de qu es lo que vas a decir y cmo. Recomendamos tenerlo siempre
Selecciona Todos los archivos y Codificacin ANSI para que cualquier programa pueda entenderlo y sea totalmente compatible con el estndar HTML.
mente dicho de las pginas. Una de las mejores formas de aprender a disear pginas web es ver cmo lo hacen los dems y decidir si lo que estamos viendo nos gusta o no. Lo que s conviene recalcar es que debemos hacer uso de esta tcnica para aprender, no para copiar y pegar el trabajo de otros diseadores.
utilizar siempre minsculas o maysculas, pero nunca mezcladas, por la misma razn anterior. Es preciso tener unos breves conocimientos del lenguaje HTML (Hiper Text Mark-up Language) para empezar a disear pginas. HTML es un lenguaje de marcas, es decir, que se aaden una serie de marcas o etiquetas que definen
Si desde un principio tenemos claro qu es lo que queremos hacer, nos ahorraremos mucho tiempo.
la presentacin grfica de los elementos que componen la pgina. La mayora de las etiquetas de HTML se presenta en parejas: una que indica el modo de presentacin y otra que lo finaliza, como puedes ver a continuacin: <etiqueta> texto </etiqueta>. Todo el documento HTML debe estar contenido dentro de las marcas <HTML> y </HTML>, que son las que indican el principio y el fin del mismo. La pgina web tiene dos partes: una cabecera (<HEAD>...</HEAD>) que es la que define el documento y un
Una pgina sin ttulo resta identidad y, simplemente, queda mal.
Para empezar a crear pginas web no necesitamos de complicados editores de cdigo HTML. Simplemente con la aplicacin Bloc de Notas o cualquier otro editor de texto nos vale. Una vez que hayamos escrito nuestro cdigo, en el cuadro de dilogo Guardar como, elegiremos Todos los archivos y codificacin ANSI. A continuacin, elegiremos un nombre para la pgina y luego aadiremos la extensin .htm o .html. Debemos saber que los nombres de pgina web no admiten algunos caracteres, como por ejemplo, la Ee. Hay que limitarse a las letras utilizadas en ingls, nmeros y guiones, tanto normales - como bajos _. Un mapa del sitio no deja de ser una vista esquemtica Nuestro consejo es de cmo est organizada la informacin. que, a la hora de cerca al crear las pginas, sobre todo si guardar las pginas web que vayamos creando, usemos siempre una de estas el sitio contiene muchas. Cuando ya est claro qu es lo que dos extensiones, ya que es fcil olvidarqueremos trasmitir con nuestro sitio y se y luego, a la hora de enlazar las pcmo lo vamos a hacer, pasamos a la ginas, podemos volvernos locos bussegunda fase, que es el diseo propia- cando el error. Tambin es aconsejable
Algunas extensiones que debemos conocer
.html .htm .css .js .asp .php .swf Pginas escritas con Lenguaje de Marcas de Hipertexto. Archivo externo de definicin de estilos (Hoja de Estilo en Cascada). Archivo externo con comandos de javascript. Pgina dinmica que se ejecuta en el servidor. Es propiedad de Microsoft. Pgina dinmica que se ejecuta en el servidor, como ocurre con los .asp, pero de cdigo abierto y que cualquiera puede modificar. Archivo realizado con el programa Macromedia Flash.
Elementos de una pgina web bsica

Aunque cada vez se utilicen ms imgenes en las pginas web, el texto sigue siendo el mejor comunicador que podemos utilizar. Dentro de pocos aos veremos cmo se consolida la llamada Web Semntica, es decir, una extensin de la Web actual en la que el contenido se separar definitivamente del continente. Aunque HTML no ser el lenguaje que se utili-
Plantillas de diseo
Si crees que la originalidad no es lo tuyo o necesitas un lugar donde poder inspirarte para crear la estructura de tus pginas, puedes utilizar una plantilla o template de otros diseadores, que las regalan o venden, dependiendo de su complejidad. www.freewebtemplates.com www.steves-templates.com www.freelayouts.com freesitetemplates.com Lo que los diseadores envan cuando descargas sus plantillas es, aparte de las imgenes y otros archivos vinculados como pueden ser las hojas de estilo, los archivos fuente para generar los diversos elementos que se visualizan. Por ejemplo, si contiene una animacin Flash en .swf, tambin proporcionan el archivo .fla para que puedas abrirlo en tu equipo y modificarlo segn tus preferencias. Estas plantillas simplifican la tarea de concebir el diseo de nuestra pgina, pero es necesario trabajarlas para que se adapten a lo que necesitamos, por lo que, si no elegimos una que se acerque mucho a nuestra
Puedes escoger entre una gran variedad de modelos que puedes modificar a tu gusto.
idea, al final, nos llevar ms tiempo del que hubiramos empleado en hacer una nueva desde cero. s
N 87
55
Curso
Cdigo simple
En las pginas pequeas, es muy fcil leer el cdigo, pero, cuando vamos insertando imgenes, tablas, etc., se va complicando. Por eso, hemos de tomar unas pautas de trabajo, ya que si queremos modificar algo transcurridos unos das de la escritura de nuestro cdigo, nos daremos cuenta de que no es tan sencillo como habamos pensado. El primer consejo es utilizar comentarios para identificar las partes en que se divide la pgina, por ejemplo: <! menu lateral >. De este modo, cuando necesitemos modificar el men, tardaremos menos en encontrarlo. Tambin es recomendable insertar una nueva lnea para cada nueva etiqueta HTML. Si escribiramos todo el cdigo seguido resultara difcil de leer, por lo que es preferible insertar las etiquetas en diferentes lneas y, a ser posible, de forma tabulada. s Formato del prrafo <P>...</P> Sirve para delimitar la extensin de un prrafo. <BR> Salto de lnea. <CENTER>...</CENTER> Permite centrar todo el texto del prrafo. <BLOCKQUOTE>...</BLOCKQUOTE> Para citar un texto ajeno. <PRE>...</PRE> Representa el texto con un tipo de letra de paso fijo.
Principales etiquetas de formato de texto

Formato de texto <BIG>...</BIG> Incrementa el tamao del tipo de letra. <B>...</B> Pone el texto en negrita. <SMALL>...</SMALL> Disminuye el tamao del tipo de letra. <I>...</I> Representa el texto en cursiva o itlica. <U>...</U> Para subrayar un texto, independientemente del formato. Formato de frase <CITE>...</CITE> Se utiliza para citar un texto ajeno. <EM>...</EM> Para dar nfasis. <STRONG>...</STRONG> Resalta un texto cambiando el tamao y carcter. <ABBR>...</ABBR> Se usa para mostrar abreviaturas. <Hx>...</Hx> Si se sustituye x por un nmero del 1 al 6, se obtendr distinta relevancia.
sobre fondo blanco. Las fuentes ms cmodas de leer son las de tipo sans-serif, como la Arial o la Verdana, y su tamao debera definirse de forma relativa (porcentajes), no absoluta (pxeles), para que los usuarios con cierta discapacidad visual o con una alta resolucin de pantalla puedan aumentar (o disminuir) el tamao de la fuente de la pgina desde su navegador. Las imgenes pueden comunicar mensajes de una manera que no es posible hacer por medio de palabras. Otra de las funciones de las imgenes es el sentido esttico y decorativo. Sin embargo, en muchas ocasiones nos encontramos con pginas web repletas de imgenes que no cumplen ninguna de estas dos fun-
es a travs del programa CGI, que ser el que elabore el mensaje que nos llegar. La estructura de un formulario bsico es la siguiente: <FORM ACTION=mailto:correo _o_programa METHOD=POST ENCTYPE=TEXT/PLAIN> [Campos del formulario para introducir datos.] <INPUT TYPE=submit VALUE= Enviar> </FORM> Vamos a explicarlo: FORM abre y cierra el formulario. ACTION indica la accin, en este caso que los datos se enven a la direccin indicada. METHOD=POST hace que los da-
zar en el futuro para este proyecto, sino XML y RDF, s podemos hacer que nuestros textos estn insertos pulcramente dentro del cdigo HTML. Con ello conseguiremos que los buscadores nos agreguen correctamente a sus bases de datos y as, ganar posiciones cuando muestran los resultados de las bsquedas.
Si no sabes programar no te asustes. Resulta ms sencillo de lo que parece a simple vista.

tos se procesen con el botn de envo. ENCTYPE=TEXT/PLAIN indica que los datos se enven sin codificacin. Los enlaces son la esencia de las pginas web. De una forma muy breve se podran definir como aquellas lneas de programacin que, aunque no sean visibles al usuario o navegante de una pgina web, permiten o facilitan al mismo con un mero click sobre determinado texto, imagen o icono, acceder a otra parte de la misma pgina web, a otra
ciones, con lo que distraen la atencin de lo que se quiere comunicar y aumentan el tiempo de descarga. Quiz lo ms difcil de las imgenes sea conseguirlas. Lo ideal sera que las fabricramos nosotros mismos, mediante el escaneo de las fotografas que queramos insertar, obtenindolas con una cmara digital o crendolas mediante editores. No debemos preocuparnos si no dominamos alguno de estos programas generadores de imgenes, ya que existen en Internet muchos lugares donde se ofrecen gratuitamente imgenes para fondos de pginas, separadores, gifs Es difcil leer un texto que no presenta algn tipo animados, rtulos, barras, de divisiones o destacados. etc., como www.gifmania.com. Sin embargo, leer en la pantalla del Los formularios son la mejor maneordenador es mucho ms incmodo ra de que nuestros lectores se comunique leer sobre papel. Debido a esto, se quen con nosotros. Hay dos formas de recomienda tomar como norma general realizar o recibir un formulario: generael uso de textos concretos, breves y do por el navegador o mediante un proseparados en varios prrafos. El an- grama CGI del servidor. La primera opcho de los prrafos no debera exceder cin es la ms sencilla, ya que el navegade la mitad de la pantalla, y, preferible- dor generar automticamente un menmente, conviene utilizar letras negras saje de correo electrnico. La otra forma
pgina del mismo sitio o incluso a otro sitio web distinto. Sin ellos, el concepto se vera reducido a una publicacin de documentos de texto en Internet. La etiqueta bsica de los enlaces es <a href=direccion>...</a> y, dependiendo de a dnde enlacen, podemos clasificarlos en varios tipos: Hipervnculo dentro de la propia pgina: nos podemos mover de un lado a otro de la misma pgina con un simple click. Suele utilizarse con ndices, pies de pgina o para subir al principio de la misma si es muy larga. Para hacerlo, es necesario especificar unas anclas, mediante la etiqueta <a name=principio></a>, a la que nos referiremos luego a travs de <a href=#principio>...</a> Hipervnculo a una pgina del propio sitio web (pgina local): esto significa que el archivo de la pgina web a la que se refiere el enlace se encuentra en el mismo servidor que lo contiene, de modo que, para referirnos a ella, basta con escribir la ruta relativa. Por ejemplo, supongamos que tenemos un enlace desde nuestra
Formatos de grficos
.gif Archivo de imagen suele ser pequea y de colores muy definidos. .jpg Archivo de imagen empleado habitualmente para fotografas. .png Archivo de imagen parecido al .gif, pero de cdigo abierto.
Se pueden apreciar las diferencias de legibilidad y calidad de los tonos continuos entre los dos formatos de imagen ms utilizados, .gif y.jpg.
56
www.pctoday.es
Diseo web. Parte 1

pgina portada.htm a otra llamada informacion.htm que est en la carpeta nosotros. El hipervnculo sera: nosotros/informacion.htm. Hipervnculo a otro sitio web (pgina externa): es un enlace a una pgina fuera de nuestro sitio. Cuando especificamos un enlace externo, debemos escribir la direccin completa de la pgina incluido http://www. Hipervnculo a una direccin de correo electrnico: al pulsar en l, automticamente 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@dominio.com dentro de href. Un elemento muy importante a la hora de organizar la informacin y darle forma a la pgina son las tablas. El empleo de las tablas facilita la distribucin de la informacin con estabilidad, en los espacios y lugares de la pantalla que uno desea, sin riesgo de que se deforme. Como podemos imaginar, las tablas se dividen en columnas y filas, creando celdas, a las que podemos dar una serie de ca-
No te preocupes por aprender todos los cdigos, ya que existen herramientas que permiten generar hojas de estilo de forma automtica, como www.webexperto.com/herramientas/hojasdeestilo.php o www.webmastercuyo.com.ar/servicios/css.php.
web, mediante la asociacin de un conjunto de propiedades de formato a los elementos del lenguaje HTML. As, podemos separar la estructura de la pgina de los contenidos. El resultado final en pantalla es una mezcla entre las caractersticas predefinidas para cada comando HTML y la hoja de estilo. Lo mejor de esta tcnica es que logramos una presentacin muy uniforme, ya que basta con definir un estilo una nica vez para que ste se aplique a todos los elementos del mismo tipo que existan en una pgina o en el sitio web entero. <TD>Celda 2</TD> ractersticas determinadas, como el 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 > etiquetas HTML. La pritamos como ejemplo. <TD rowspan=2>Celda abusar de las tablas e introducir unas mera es la ms sencilla: partes de la pgina estn siempre visi- se trata de redefinir la propia etiqueta dentro de otras de forma recurrente, 3</TD> bles con un men de opciones situado a mediante el atributo STYLE. Por ejemplo pues los buscadores penalizan los </TR> un lado, mientras que las otras cambian. la etiqueta <a href=pagina. textos que se encuentran en textos ro- <TR> <TD>Celda 4</TD> deados por muchas tablas, creyendo htmlstyle=color:red>Enlace</a> Elementos de una <TD>Celda 5</TD> que son de poca relevancia dentro del generara un enlace de color rojo, en vez </TR> contenido global de la pgina. 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 <! colspan=2 indica que esta trolar cmo se vern nuestras pginas estilo de todas las etiquetas de la pgina. plo de tabla: Si la hoja de estilo no se va a aplicar a Campos de formularios otros documentos, es ms conveniente utilizar esta tcnica para as tener la hoja <INPUT TYPE=hidden NAME=xxx VALUE=yyy> Campos ocultos, donde xxx es el nombre de la informacin introducida e de estilo y el contenido de la pgina en yyy la informacin en s. 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 informos lo siguiente dentro de la cabecera: macin introducida e yyy indica si queremos que el formulario incluya <STYLE TYPE=text/css> a { coalguna 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 introconseguiramos que todos los enlaces de la pgina fueran rojos. Por ltimo, el ducida. Ideal para contraseas. tercer mtodo consiste en escribir los <TEXTAREA NAME=xxx ROWS=y COLS=z></TEXTAREA> Cuadros de texto con desplazamiento, donde xxx es el nombre de la estilos en un archivo externo. Podemos informacin introducida, y el nmero de filas y z el nmero de columnas. hacerlo mediante el bloc de notas, <SELECT NAME=xxx> Listas desplegables, donde xxx es el nombre de la informacin introguardarlo 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 manejarTYPE=text/css>. Para que todos los navegadores reco</SELECT > los, crece con su extensin. nozcan los comandos, recomendamos <INPUT TYPE=radio NAME=xxx VALUE=yyy> Botn de opcin, donde xxx es el nombre de la informacin introducida e seguir las indicaciones del Consorcio yyy es el nombre de cada opcin en concreto. Ideal para seleccionar una W3C y sus especificaciones para las opcin entre varias. CSS, que puedes encontrar en Casilla de verificacin, donde xxx es el nombre de la informacin introducida. <INPUT TYPE=checkbox NAME=xxx> www.w3.org/Style/CSS.
<TABLE BORDER=1> <TR> <! th indica que es una celda de cabecera > <TH>Cabecera 1</TH> <TH>Cabecera 2</TH> <TH>Cabecera 3</TH> </TR> <TR> <TD>Celda 1</TD>
celda se expande 2 filas > <TD colspan=2>Celda 6</TD> <TD>Celda 7</TD> </TR> </TABLE> Los marcos son otra forma de organizar la pgina. En realidad se trata de una pgina que contiene otras pginas. Son muy tiles cuando queremos que unas
Existen muchos programas gratuitos que nos ayudarn a crear y editar nuestras imgenes.
N 87
57
Curso
permiten agregarlos directamente a las pginas, como son los sonidos midi, mientras que otros requieren de plug-ins o programas asociados para reproducirse. Podemos introducir el sonido de varias formas: bien activado por el usuario, bien como sonido de fondo. La manera ms El formulario ms utilizado de toda la Web consta de un campo de entrada y un botn de envo. sencilla es dejar al usuario la decisin Otro de los elementos que podemos de escucharlos o no. Para hacerlo, incluir dentro de nuestras pginas son incluiremos el sonido en el parmelos scripts, pequeos programas escri- tro HREF de un enlace, como si fuera tos en lenguaje Javascript. Estos pro- una pgina HTML, aunque obligaregramas se encargan de realizar acciones mos a que se abra una ventana indedentro del navegador de la pgina web, pendiente con los controles de sonies decir, se trata de un lenguaje de pro- do. La segunda forma consiste en ingramacin del lado del cliente. cluirlo como sonido de fondo. El proEntre las acciones ms habituales que blema es que se necesitan diversas facilita Javascript tenemos dos vertientes: etiquetas para hacerlo operativo en efectos e interactividad. Por un lado, podemos incluir efectos especiales en nuestras pginas, como elementos en movimiento o que cambian de color. Por el otro, este lenguaje nos permite ejecutar instrucciones como respuesta a las acciones del usuario, lo que permite crear pginas interactivas con progra- diversos navegadores. Por ejemplo, mas como agendas o calculadoras. en Internet Explorer, se pueden En el fondo, Javascript es un lengua- incluir fondos sonoros utilizando la je de programacin muy sencillo, etiqueta <BGSOUND SRC=musipensado para hacer las cosas rpida- ca.mid> , mientras que el programente. Incluso sin tener experiencia en ma Netscape Navigator utiliza la programacin, podemos aprenderlo etiqueta <EMBED hidden=true con facilidad y utilizarlo en toda su po- src=musica.wav>. tencia con slo un poco de prctica. Dado que ambas etiquetas son inSi lo que queremos es incluir so- compatibles entre s, tendremos que nido, primero tenemos que elegir el incluir las dos. Aunque el Explorer es formato de estos archivos. Algunos te capaz de interpretar <EMBED>, no lo hace exactamente de la misma manera. podemos crear pelculas o utilidades de En definitiva, la mejor manera de mos- forma muy rpida. Adems, cuando hatrar una msica de fondo es mediante yamos creado nuestra pelcula Flash, un pequeo script que averige en qu insertarla en la pgina es muy sencillo; basta con copiar y pegar el cdigo navegador est instalado y discrimine. Otro elemento que podemos incluir HTML que genera automticamente. en nuestras pginas es el vdeo, que no es sino una mezcla de sonido e imagen en un slo archivo digital. La fidelidad de la imagen de vdeo se mide por los mismos parmetros de audio e imagen que la componen, as como por una variable adicional que corresponde al nmero de cuadros que se exponen por segundo. Lo usual En Internet podemos encontrar multitud de scripts ya heen una pelcula de chos y listos para utilizarlos en nuestras pginas, como los vdeo estndar es 24 que se hallan en www.mundojavascript.com. cuadros por segundo, aunque este nmero es muy variable Una vez ms, observaremos que hay etiquetas <OBJECT> y <EMBED> para en los formatos digitales. los distintos navegadores. Uno de los mayores retos para los buscadores de Internet es encontrar la informacin que realmente estn buscando los internautas. Para ello, se han introducido las etiquetas META o metatags, unas informaciones que no Al igual que con el sonido, es necesa- se visualizan pero que estn integradas rio utilizar distintas etiquetas segn el en la pgina web y la definen. Las etinavegador: <OBJECT> para Internet quetas META se introducen dentro de Explorer y <EMBED> para Netsca- la cabecera de la pgina y no llevan etipe. Existen servidores de vdeo bajo queta de cierre. Su estructura es la de demanda, que utilizan un sistema que una declaracin: nombre de la propiepermite la reproduccin de vdeo di- dad y, a continuacin, su valor. No existe ninguna regla acerca de la rectamente como si fuera la televisin. informacin que se puede o no incluir en las etiquetas META. El lenguaje HTML define la estructura de una etiqueta META, pero no sus valores. Por eso, puedes inventarte tus propias etiNo debe asustarnos la gran cantidad de recursos que nos perquetas META, mite Flash, ya que es un programa muy intuitivo. aunque, coLa tecnologa Flash de Macrome- mo no se visualizan en el navegador y dia nos permite crear pginas mucho slo las utilizan los buscadores y alms interactivas y entretenidas. Para la gunas otras herramientas, tampoco visualizacin de esta tecnologa se re- tiene mucho sentido crear tu propia quiere del plug-in propio de Macrome- metainformacin, excepto para nuesdia Flash, que se incluye en la mayora tro propio uso. Las dos etiquetas META ms imporen los navegadores. Usar Flash no es difcil, pero requiere de nuestra creativi- tantes son las que indican la descripdad. Con un buen tutorial de la ltima cin (description) y las palabras versin y unas horas de prctica delan- clave (keyword) del documento, ya te del ordenador, comprobaremos que que los buscadores leen estas etiquetas
Los enlaces son los que marcan la diferencia entre la Red y los documentos de papel.
Algunos tipos de archivo de sonido

.mid Archivo de sonido muy bsico. .ra Real Audio es un formato ampliamente distribuido y usado, capaz de reproducir sonido con fidelidad graduada, es decir, uno puede decidir la calidad del sonido para as encontrar un equilibrio entre un archivo muy grande con alta fidelidad a uno muy pequeo de baja fidelidad. .au Es el formato nativo de las estaciones de trabajo Sun y similares. Es poco conocido fuera del ambiente UNIX. .aiff Formato de sonido tpico de Macintosh y estaciones de trabajo Silicon Graphics. En general, las pginas web que incluyen sonidos los colocan en formato AIFF para las personas que tengan Macintosh y WAV para los usuarios de PC. .wav Los archivos WAV son en general muy grandes, aunque este formato permite variar la calidad del sonido para lograr archivos ms pequeos. Al ser el formato nativo de Windows, est ampliamente estandarizado. .mp3 Popular formato que ofrece una calidad muy alta en archivos pequeos. Es fcil obtener conversores de .cda (archivos de un CD de msica) a este formato, o bien extractores desde un CD audio.s
58
www.pctoday.es
Diseo web. Parte 1

Principales tipos de archivo de vdeo
.mpg Empresas de tecnologa de todo el mundo forman el Grupo de Expertos en Imgenes en Movimiento, dedicado a crear este estndar para compact discs, televisin por cable, transmisin satelital directa y televisin de alta definicin. El formato MPEG es muy popular en PC compatibles. .qt .mov El formato QuickTime fue creado originalmente por Apple para su uso en los ordenadores Macintosh. Junta audio, animacin, vdeo y capacidades interactivas. Este estndar lleva mucho ms tiempo vigente que el MPEG. s
Los dos formatos de vdeo ms conocidos, MPEG y qt, frente a frente.
y califican la pgina en funcin de lo que dicen. Hay que seleccionar con cuidado las palabras que vamos a utilizar dentro de estas dos etiquetas, ya que van a determinar la posicin en la que aparecer nuestra pgina en las bsquedas de los cibernautas. <meta name=description content=Esta pgina es una prueba del curso de diseo web de PCToday/> <meta name=keywords content=curso, diseo, PCToday, prueba /> Puedes encontrar generadores automticos de etiquetas META gratuitos en la Red, como por ejemplo www.mucho grafico.com/contenidos/metatags.html.
Imaginemos que tenemos un hotel y queremos que desde nuestra pgina web se puedan reservar habitaciones. Necesitaremos que el visitante sepa qu habitaciones tenemos, qu precios tienen y cundo van a estar libres. En una base de datos albergada en el servidor podemos especificar estos datos. En primer lugar el visitante nos dir, mediante un formulario: quiero reservar una habitacin del 1 al 5 de marzo. Entonces esa peticin se trasladar a la pgina dinmica que buscar en la base
que se transfieren con las pginas web y que el navegador ejecuta en el espacio de la pgina. No hay que confundir Java con Javascript, pues son lenguajes muy diferentes. Los applets son ms difciles de programar que los scripts y requieren unos conocimientos bsicos o medios del lenguaje Java. Su principal ventaja consiste en que dependen en menor medida del navegador e incluso son independientes del sistema operativo Podemos hacer la bsqueda tan completa como deseemos dentro de las bases de datos del ordenador donde se ejecudisponibles 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 introducir sus datos personales en un formulario que se enviar a una pgina dinmica que, por un lado, notificar a la base de datos anterior que esa habitacin queda ocupada, por otro lado mandar a otra base de datos la informacin que nos ha pro- Una de las desventajas de los applets es que, porcionado y por ltimo noti- hasta que no se cargan por completo, en pantalla ficar, tanto al visitante como slo aparece un cuadro gris. a nosotros mismos, que se ha multitud de applets gratuitos que poderealizado la reserva. Otra forma de programacin dentro mos incluir en nuestra pgina HTML, code la web son los applets. Se trata de mo los que puedes encontrar en s pequeos programas hechos en Java, www.appletcollection.com.
Otras etiquetas Meta
Elementos de una pgina web avanzada

Hasta ahora hemos estado viendo pginas que almacenbamos en el servidor y que ste nos enviaba cuando nosotros se las pedamos mediante la introduccin de una direccin en la barra del navegador. Pero supongamos que queremos que esa pgina muestre unos elementos u otros en funcin de lo que le pide el visitante. Para poder hacerlo, necesitaremos que la pgina escuche la peticin del visitante, interacte con el resto de elementos que hay en el servidor si lo necesita y cree la pgina HTML que enviar al visitante que se la ha pedido. A esto le llamamos pgina dinmica. Ya no tendr la extensin .htm, sino .asp o .php, dependiendo del lenguaje de programacin que utilicemos. Una de las principales utilidades de las pginas dinmicas es interactuar con las bases de datos. Veamos un ejemplo.
<meta name=generator content=Sausage Hot Dog /> <meta HTTP-EQUIV=content-type CONTENT= text/html; charset=ISO-8859-1/>
<meta http-equiv=refresh content=5 /> <meta http-equiv=refresh content=5;url= http://www.misitio.com/otra_pagina.htm /> <meta http-equiv=expires content= Tue, 04 Dec 2000 21:29:02 GMT> <meta http-equiv=pragma content=no-cache />
Informa acerca del editor que se ha utilizado para crear la pgina web. Indicamos el tipo de documento que es nuestra pgina: documento HTML, un documento de texto plano, etc. Aqu significara que es un documento texto-HTML y que usa un juego de carcteres ISO-8859-1,es decir, que no usa caracteres cirlicos o rabes, por ejemplo. Con esta etiqueta podemos indicar al navegador que debe recargar la pgina una vez transcurrido el tiempo de segundos especificado. En el segundo caso, adems, llevara a la pgina especificada. Con esta etiqueta META informamos de la vigencia del documento, de modo que obligue al navegador a cargar las nuevas versiones de la pgina que hay en el servidor y en lugar de la almacenada. Ordena al navegador que no almacene la pgina en la cach del navegador, lo que puede resultar muy til cuando se trata de pginas dinmicas cuyo contenido cambia frecuentemente. Mediante esta etiqueta podemos enviar un archivo de informacin o cookie al navegador del usuario. Si contiene fecha de expiracin, el navegador la conservar en el disco duro hasta dicha fecha y si no la borrar al terminar. Podemos dar instrucciones a los robots de los buscadores acerca de qu pginas pueden incluir en sus bases de datos y cules deben saltarse. Sus valores son: index, que indica que la pgina se debe indexar; noindex es justo lo contrario; follow pide que siga los hipervnculos que existan en la pgina y que indexe las pginas resultantes; nofollow indica lo contrario.
<meta http-equiv=Set-Cookie CONTENT=nombre_ cookie=valor_cookie; expires=fecha_valor; path=/ /> <meta name=robots content=noindex, follow>
N 87
59
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.
Gua del curso



4. Usabilidad.
5. Accesibilidad.
omo vimos en la entrega anterior, toda pgina web se compone de cdigo y una serie de elementos (textos, imgenes, sonidos, etc.) insertados o enlazados dentro. Al principio todas las pginas web se construan introduciendo los comandos en un editor de textos, como puede ser el Bloc de notas. Sin embargo, el rpido crecimiento de la Red y la necesidad de que los usuarios no tcnicos tambin pudieran crear sus propias pginas, llev a la aparicin de programas que les ayuda en esa ardua tarea facilitndoles su diseo.
mente publicables en la Red mediante el uso de aplicaciones indicadas para todo tipo de usuarios. Estos programas modernos y otros especialmente diseados para el desarrollo web son las conocidas herramientas WYSIWYG (What you see is what you get: Lo que ves es lo que obtienes). Estas aplicaciones permiten una total interactividad grfica con el usuario a travs de una pantalla de diseo, donde podemos construir una pgina web, siguiendo las instrucciones del programa y prescindiendo del cdigo, que es generado por el propio software.

Introduccin a las herramientas

La forma ms fcil de crear una pgina web consiste en utilizar paquetes de programas como Microsoft Office, que permiten generar pginas web directaEstas dos pestaas nos permiten alternar entre las distintas vistas que ofrece el programa.
7. Programacin.
54
www.pctoday.es
Diseo web. Parte 2

Tambin tenemos los editores HTML, unos programas que se encuentran a caballo entre los WYSIWYG y los editores de texto normales. No permiten la creacin de la pgina en modo mienta avanzada de desarrollo de sitios web. Una de sus principales caractersticas es la claridad del cdigo que genera, resaltado en distintos colores y bien tabulado, lo que permite una fcil plegar un mensaje explicativo de su funcin. La siguiente barra incluye una recopilacin de los distintos recursos que ofrece el programa: formato, 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 podemos acceder directamente a las funciones para dibujar y dar formato a los distintos elementos de la pgina. Para pasar de una vista a otra pulsaremos en las pestaas que aparecen en la parte inferior derecha. La vista de edicin es la que utilizaremos habitualmente para crear las pginas. Esta vista muestra los cdigos que el programa genera al construir la pgina. La vista preliminar visualiza el aspecto aproximado que tendr la
En la parte superior de la pantalla se muestra la barra de mens desde la que se accede a las principales funciones.
grfico, pero a cambio incluyen multitud de ayudas para facilitar la lectura y escritura del cdigo. Para utilizarlos, es necesario tener algunos conocimientos de HTML, ya que, al fin y al cabo, vamos a trabajar en la vista de cdigo. Lo mejor de estos programas es que se pueden ver los resultados de lo que vamos haciendo en una pantalla del editor o bien pedirle que nos abra la pgina que estamos creando en un navegador de Internet. Ten en cuenta que, aunque se denominen editores de
comprensin y manipulacin. Sin embargo, sus virtudes no se quedan ah. Otra de las funciones que ofrece es la capacidad de crear y vincular otros lenguajes distintos a HTML, como puede ser Javascript, las Hojas de estilo en cascada (CSS) o incluso lenguajes de programacin de servidor. Algunas de las utilidades que podemos encontrar en este editor son,
Vers que, aparte de tus archivos, dentro del sitio aparecen otros. Son archivos del sistema, no los borres.
Se puede utilizar el bloc de notas para pginas muy sencillas, pero pronto necesitaremos herramientas que nos hagan ms ameno el trabajo.
por ejemplo, barras de herramientas que dan acceso rpido a las funciones ms importantes (creacin de tablas, insercin de imgenes, etc.); paneles de recursos; creacin en modo de asistente o de asistente automtico; y botones de ayuda para cada opcin, aunque, lamentablemente, estn en ingls, como el resto del programa. Sin embargo, si te decides a comprarlo, puedes acoplar el mdulo de espaol. Las barras de herramientas que el programa muestra en pantalla pueden variar dependiendo de las que estn activadas. Para que aparezca o no una barra en la pantalla, la marcamos partiendo de View>Toolbars. La barra de archivo muestra las funciones comunes con el resto de programas, como pueden ser abrir, guardar, imprimir... Un truco: al colocar el ratn encima de cada botn, se nos despgina en los navegadores de Internet. Todas las barras de herramientas se pueden modificar y mover de un lado a otro de la pantalla. Para ello, colocamos el cursor sobre el extremo de la barra y, mantenindolo pulsado, lo movemos a la posicin deseada. Podemos colocar las barras de forma flotante en medio de la pgina. Para situarlas de nuevo en la parte supe-
rior colocamos el cursor sobre la barra y, sin soltarlo, lo moveremos a la posicin deseada. Tambin podemos personalizar las barras aadiendo o quitando botones. Lo primero que tenemos que hacer cuando vamos a crear un sitio web es crear una carpeta donde alojar las pginas, imgenes, sonidos, etc. Para ello utiliza el comando File>Open Website, que abre el panel flotante de administracin de sitios. Con el asistente automtico podemos configurar de una forma muy intuitiva el nombre del sitio en nuestro ordenador, as como en el servidor. Otra de las virtudes de este programa es que lleva integrado un administrador FTP, lo que permite subir y bajar archivos del servidor.
Este programa admite archivos CSS, Javascript, PHP, etc. Desde luego, es un editor muy completo.
Dos WYSIWYG frente a frente

FrontPage 2003 Se trata de un buen programa que ha subsanado muchas de las crticas que se le hacan en versiones anteriores. Por ejemplo, que no respetaba el cdigo que se introduca a mano en la pantalla de cdigo. Es una herramienta completa y fcil de utilizar, con la que podemos crear, organizar, administrar y publicar pginas web muy completas. Es funciones, pero no tantas como para abrumar a los usuarios inexpertos. Slo se vende como parte del paquete Office, lo que nos obliga a realizar un mayor desembolso.
HTML, se pueden utilizar otros lenguajes, como Javascript, PHP, etc. En cualquier caso, escojamos el software que escojamos, es necesario tener unos conceptos de programacin de la web. No te preocupes si nunca has tenido contacto con HTML. Ten en cuenta que, aunque puedas ir visualizando los resultados de lo que vayas haciendo en una pantalla del propio editor o en el navegador, trabajars normalmente en la pgina de cdigo puro. Las utilidades del programa te ayudarn, pero no sustituirn el conveniente conocimiento de HTML.
Sausage Hot Dog

Hot Dog es un editor de HTML y una herraAunque de un aspecto un poco hosco, es tremendamente intuitivo trabajar con Sausage Hot Dog.
Dreamweaver Macromedia nos ofrece el programa ms completo dentro de esta familia, quizs con demasiadas opciones, pero que, en cualquier caso, cubre todas las necesidades que puedas tener para la creacin de pginas web y otros elementos. Su potencia reside en cmo se complementa con otros programas de la misma empresa, como Flash o Fireworks para crear aniLos WYSIWYG ms vendidos rivalizan en sencillez de uso versin tras versin. maciones e imgenes. Puedes descargarte una ideal para diseadores principianversin de demostracin gratuita tes, ya que contiene las principales en www.macromedia.com. s
N 88
55
Curso
Para ponerle el ttulo a la pgina, abre el panel y en el recuadro Ttulo escribe el nombre deseado para la pgina. A continuacin, podremos verlo al navegar por Internet justo en la parte superior izquierda de la pantalla. Es interesante poner un ttulo descriptivo puesto que es la gua que muchos internautas siguen para reconocer una web. No hay que confundir el nombre de la pgina con el nombre del fichero .htm de la pgina. La opcin Save as (Guardar como) permite ponerle el nombre deseado y seleccionar el tipo de archivo. Es importante ser ordenado y crear una carpeta para cada web y subcarpetas para los distintos apartados. bemos seleccionarlo con el ratn y hacer click en el botn de negrita, sino que primero hacemos click en este botn, lo que generar dos etiquetas (<b> y </b>), y luego escribiremos el texto entre ambas. Si ests ms acostumbrado a la primera forma, tambin
El perrito verde es un huevo de Pascua dentro de este software. Si haces click en l, se introducir la direccin de Sausage en la pgina.
Tras crear el sitio, vamos a empezar con las pginas. Si haces click en el pequeo tringulo situado junto a la hoja en blanco, se desplegar un men con los distintos tipos de documentos que reconoce Hot Dog, aunque se le podran aadir otros lenguajes, como XML o TCL-TK.
lada dentro de la pgina. Estos datos puedes cambiarlos ms adelante en Format>Document Properties. Tambin podemos cambiar el fondo de la pgina, bien eligiendo una imagen o un color en el recuadro que nos lo indica. Existen mltiples direcciones en Internet como
Puedes probar Hot Dog gratis durante treinta das, tiempo suficiente para aprender el funcionamiento de los editores HTML en general.
Si elegimos HTML, nos encontraremos con el panel de propiedades del documento, que nos ayudar a configurar los datos bsicos del mismo, como los colores del fondo, texto, enlaces, etc., sin olvidar que todos estos datos pueden definirse en una hoja de estilos .css aparte y vincuwww.areas.net/colorvivo/home.htm, que disponen de fondos e imgenes gratis para insertar en las pginas web. La opcin Format>Document Information nos permite establecer el ttulo de la pgina y las etiquetas meta, as como otros datos que suele contener la cabecera de las pginas web.
Dar cuerpo a la pgina
Aunque usar HotDog es sencillo, el asistente automtico te lo pone an ms fcil.
Al escribir un texto, ste se distribuye de forma continua y forma un prrafo hasta que pulsamos Enter. Si ests habituado a trabajar con herramientas como Word, te dars cuenta de que Hot Dog no funciona as. Para aplicar formato a un texto determinado, no de-
Cmo elegir la herramienta ms adecuada

En el mercado existen muchos editoUn buen sitio en el que encontrar un dars cuenta de que te resulta mucho res de HTML y WYSIWYG, unos ms listado de editores y herramientas es, ms rpido y prctico escribir directade nuevo, el Consorcio W3C, en la complejos que otros, todos ellos mente los comandos, es decir, sin siguiente direccin: herramientas fantsticas para la creaayudas visuales. Lo ms til que puewww.w3.org/WAI/group/AU/tools#HTM, cin de pginas web. Las nuevas verdes encontrar en cualquiera de las aunque en sitios comerciales como siones suelen incluir muchos recursos herramientas es el resaltado en colowww.tucows.com o www.softonic.com y ayudas, de tal forma que la eleccin res del cdigo y la posibilidad de ir de una u otra no depender slo de lo viendo los resultados a medida que se (en espaol), tambin puedes descargarte versiones gratuitas, completas que sean, sino shareware o demostraciones tambin de su precio. comerciales de evaluacin. Para este tutorial vamos Conviene resaltar que no por a utilizar la aplicacin disponer de unas herramientas Hot Dog de la compaa u otras vamos a crear pginas Sausage. (www.sausage .com/products.html). mejores. Todo depende de Puedes utilizarla durante cmo se utilice cada una, aun30 das de forma gratuita que, evidentemente, las que y, si te gusta, puedes facilitan el trabajo gozarn de adquirirla por un precio ms simpatas que las ms razonable. En cualquier simples. Lo importante es caso, si no tienes previs- El Consorcio World Wide Web es el lugar de referencia poder disponer de las herrapara todos los diseadores web. to adquirir una herramientas ms adecuadas para mienta de estas caractersticas, puenuestras necesidades. Antes de deciva creando la pgina. des decantarte por una gratuita, como Escojas el programa que escojas, dirte por alguna ten en cuenta el Acehtml (freeware.acehtml.com) o aspecto econmico. conviene tener unos conocimientos Arachnophilia (www.arachnoid.com/ Tu situacin personal y tus necesidamnimos de HTML para realizar arachnophilia). des deciden por ti en muchos casos. pequeas correcciones o incluso Si el presupuesto lo permite, es recoNo es lo mismo un principiante que corregir algn error que haya podido mendable que adquieras alguna un profesional del diseo. Si nicagenerar la herramienta. Puedes herramienta WYSIWYG, que te permiti- encontrar multitud de tutoriales en la mente vas a disear una web persor crear pginas de forma rpida y nal, de pequeo tamao, y sin granRed, aunque te recomendamos acusencilla gracias a sus recursos, utilides complicaciones, es muy posible dir al World Wide Web Consortium dades, ayudas y funciones de uso. Sin que no necesites muchos programas (W3C) para conocer la ltima versin embargo, segn vayas profundizando ni que stos sean los mejores o ms oficial del lenguaje. Puedes enconen el conocimiento del cdigo, te caros del mercado. s trarla en www.w3c.org/MarkUp.
puedes utilizarla, pero no desde el panel de acceso rpido, sino desde el men superior Format>Bold o pulsando Control+b. Del mismo modo que hemos modificado un texto convirtindolo en negrita, lo podemos transformar de tamao, color, alineacin, apariencia, bordes y fondos. Ahora es cuando te vendrn bien los conocimientos de HTML, para ajustar manualmente todos aquellos pequeos
Hot Dog pone a nuestra disposicin todos los componentes de un formulario al alcance de un click.
detalles que Hot Dog no permite cambiar de forma automtica. Sausage pone a nuestra disposicin otro panel para insertar elementos. Con l puedes ahorrarte mucho tiempo si necesitas incluir una imagen, un enlace, un comentario, una lnea horizontal, listas de vietas o incluso elementos multimedia incrustados. El funcionamiento es similar al del formato de texto. Un ejemplo de la sencillez del programa se puede ver a la hora de insertar los enlaces o las tablas. En el caso
56
www.pctoday.es
Diseo web. Parte 2

de los enlaces, en una sola ventana tenemos acceso a todas las variables que se pueden dar: la direccin, una descripcin, la ventana o marco a la que se destina, el idioma, la tecla de acceso rpido, el ndice de tabulacin, etc. Por ltimo, vamos a ver los formularios, los elementos ms problemticos del diseo web. Aunque ests familiarizado con el lenguaje HTML, es recomendable utilizar el asistente automtico, ya que nos presenta todas las opciones que pueden darse para cada campo del formulario, as como la posibilidad de cambiar el orden de aparicin. Tras construir una parte de la pgina, vamos a ver cmo queda, tanto
Los 7 pasos para la gestacin de una pgina web

1. Analiza la informacin que tendr un mximo de 3 pulsaciones del y procura tener muy claro los conratn. El sitio en el que lo coloques, tenidos que quieres mostrar a tus depender de la siguiente fase. visitantes. Piensa en si merece la 4. Marca las pautas del diseo grfipena el esfuerzo que supone crear co. Se trata de la parte creativa trauna pgina web y si aporta o te dicional, donde decides los colores, aporta algo. Hay demasiadas pginas en Internet como para prestar atencin a una que no dice nada nuevo. 2. Busca y estructura dichos contenidos. Haz un diagrama o mapa del sitio y coniespana permite utilizar algunos comandos de PHP y srvalo cerca ofrece bases de datos. Adems puedes subir los ficheros a travs de un administrador FTP. Y todo ello, gratis. mientras creas las pginas. Te ayudar a no perderte. los tipos de fuente, la distribucin 3. Traza el rbol de navegacin. Es de los distintos elementos, etc. importante tener un men siempre Recuerda utilizar hojas de estilo y visible con las grandes reas, de echarle un poco de imaginacin. tal forma que, entre las dos pgi5. Confecciona la interfaz. En esta nas ms distantes del sitio, haya fase es donde utilizars las herramientas WYSIWYG o los editores HTML que quieras utilizar. Es la etapa ms laboriosa, aunque tambin la ms agradecida. 6. Difunde o publica el sitio en Internet. Y ahora que tengo creada mi pgina, cmo hago para que los dems la puedan ver? Para ello necesitaremos alojarla en algn servidor que nos ofrezca espacio. Hay multitud de servidores que lo hacen gratis, como el pionero www.geocities.com o www.iespana.es, ste ltimo en espaol. Para llevarlo a cabo, basta con abrir una cuenta gratuita para acceder al panel de control, donde podrs administrar toda la informacin relativa a tu sitio dentro del servidor: estadsticas, archivos, contadores, libros de visitas, etc. 7. Mantn la informacin viva, supervsala, corrgela y actualzala. No hay nada ms descorazonador que una pgina abandonada, con informacin caducada. Prstale atencin y haz caso a los correos que te lleguen a travs de ella. Al fin y al cabo, las pginas web no son ms que instrumentos para poner a las personas en contacto. s
Al hacer click en cada lnea, te llevar a la etiqueta exacta. Con un doble click se abrir un cuadro de dilogo.
en la vista de cdigo como en la vista preliminar y, finalmente, en la vista del navegador. En primer lugar, guardamos la pgina en el ordenador y pulsamos F9, lo que abrir una ventana del navegador predeterminado. Es momento de comparar los resultados arrojados por el navegador con lo que ofrece la vista preliminar de Hot Dog y realizar los ajustes precisos en el cdigo, de ser necesarios. Otras utilidades que puedes encontrar dentro de Sausage Hot Dog es un inspector de cdigo accesible, que evala cada etiqueta y nos dice si nos sobra o falta alguna propiedad para personas con alguna discapacidad.
aparecer una ventana con el sitio web que has creado; all alojaremos la pgina. Es necesario recordar que hay que darle la extensin .htm o .html, que es el formato que reconocen los navega-
Una vez all, hacemos click en H?, lo que nos mostrar una ventana flotante con diversos nmeros, siendo el 1 el de mayor tamao y el 6 el de menor. Elegimos, en este caso, H1. Para
Lo que observes en la Vista previa no tiene por qu coincidir con lo que luego se mostrar en el navegador.
dores. Es recomendable seguir una pauta y guardar todos nuestros archivos bajo una misma extensin para no hacernos luego un lo a la hora de enlazarlos. Ahora que est guardada, vamos a introducir varios prrafos de texto y a resaltar determinadas palabras. Dentro de las etiquetas <body> </body> introduciremos el siguiente texto: Bienvenidos. Esta es mi primera pgina web. Esta frase est en negrita; y esta otra en itlica. Uno, dos y tres. Vamos a centrar y hacer ms grande la palabra "Bienvenidos". Para ello, la seleccionamos a continuacin, nos dirigimos al men Format. centrar el texto debemos hacer click en el icono que hay justo al lado de H?, el de las rayas horizontales. Vamos ahora a resaltar la frase en negrita e itlica. En primer lu-
Un ejemplo prctico
Ahora que hemos visto las principales funciones de Sausage Hot Dog, vamos a utilizarlo para crear una sencilla pgina web. En primer lugar, vamos a crear una web. Hacemos click en File>Open Website, para ver el administrador de sitios. Con el asistente automtico, creamos un sitio llamado "Pruebas" y lo guardamos dentro de "Mis documentos" en el ordenador. Hacemos click en la hoja en blanco que se encuentra en la parte superior izquierda y aparecer una ventana donde configurar las propiedades del documento (color de fondo, color de texto, etc.). Cambia todos los datos a tu gusto y haz click en OK. Antes que nada, hay que grabar la pgina. Hacemos click en File>Save As y
Intenta no abusar de las transiciones, ya que cansan y ralentizan la carga de las pginas.
gar, seleccionamos "Esta frase est en negrita" y hacemos click en el icono marcado con una B (del ingls "bold", negrita). As mismo, seleccionamos "esta otra en itlica" y hacemos click en el icono marcado con una I (de "itlica"). Por ltimo, vamos a crear una lista de guiones. Seleccionamos "Uno, dos y tres" con el ratn y elegimos el men Insert. Elegimos el sexto icono (empezando por la izquierda), identificado por lneas y puntos alineados de forma horizontal. Aparecer una ventana donde podremos elegir si queremos que la lista contenga nmeros o imgenes, as como el tipo de imgenes que deseamos incluir. En este caso, elegiremos "circle", o crculos. Veamos ahora cmo podemos introducir una imagen para dar un poco de vida a nuestra pgina. En el men Insert, hacemos click en el primer botn y elegimos una imagen que tengamos almacenada en nuestro disco duro. En este cuadro de dilogo tambin podemos elegir el tamao, las opciones de accesibilidad, la alineacin, etc. Ahora que ya nos hemos familiarizado con los mens de formato e insercin, vamos a aadir dos elementos ms complejos: una tabla y un
N 88
57
Curso
Insertar una imagen
Veamos paso a paso cmo se inserta una imagen. En primer lugar, haz click en el icono correspondiente del men de insercin. A continuacin, aparecer una ventana con multitud de campos que rellenar: el ms importante es el que pide el nombre del archivo (Filename). Bscalo en tu ordenador y acepta cuando lo hayas seleccionado. Entonces, vers un icono de la imagen dentro de la ventana, y observars cmo los datos relativos a la altura, anchura y texto descriptivo alternativo se han rellenado de con discapacidad visual, ya que pueden obtener una descripcin detallada de lo que se muestra en un archivo separado y evitar ralentizar la carga de la pgina al ponerla en la etiqueta alt (ernativa). Por ltimo, examina la tercera pestaa, Advanced. En esta seccin podemos definir la alineacin de
y se debera ver as:
Acordarnos de las personas con discapacidades es un deber moral de todos los diseadores.
Algunos consejos
Una buena regla general para escribir pginas web es que su longitud no supere dos o tres pantallas de 640 x 480, incluidos los enlaces de navegacin locales, al principio y final de la pgina. Si la informacin es muy extensa, divdela en pginas separadas o incluye un enlace con un archivo diferente que contenga el texto en una sola pgina. Esto permitir que la descarga de la informacin y la navegacin a lo largo de los diferentes temas se haga ms rpida para los visitantes del sitio web. No uses tamaos de fuentes grandes para el texto. Procura que no superen los 10 o 12 puntos (tamao 2 o 3) o Heading 4, y es aconsejable utilizar un tamao mayor en los ttulos o si quieres destacar alguna cosa. Procura que los colores se combinen bien y que el texto sea legible. Por ejemplo, si utilizas el rojo como color de fondo, no pongas el texto en
Aqu introduciremos los datos ms importantes, es decir, los identificativos.
nuestra imagen, si va a llevar o no borde y a cunta distancia de ella se tienen que colocar el resto de elementos de la pgina. s
forma automtica. Siempre puedes modificarlos segn tus necesidades. Si haces click en la pestaa Accesibility, te pedir que introduzcas una direccin URL para la descripcin de la imagen. Esto resultar muy til para aquellas personas
Es recomendable rellenar estos datos para ayudar al navegador.
formulario; pero primero vamos a crear una nueva pgina para que quede ms claro. Guardamos y cerramos la que tenemos y creamos una nueva siguiendo los pasos anteriores. Para insertar un formulario recomendamos utilizar el asistente automtico, ya que se trata de uno de los elementos ms complicados de controlar. En este ejemplo insertaremos un formulario llamado "mi_formulario" con dos cam-
Es ahora cuando deben entrar en juego nuestros conocimientos de HTML. Por un lado, tenemos un formulario y una tabla, y nuestro objetivo es entrelazarlos para dar formato visual. Una de las primeras lecciones que debemos aprender de HTML es que las etiquetas deben estar anidadas entre s; es decir, <b><i>negrita e itlica correcta</i></b> y no <b><i>negrita e itlica correcta</b></i>. Por lo
naranja. La mejor visibilidad se obtiene con el negro sobre blanco. Procura evitar los colores chillones como fondo de pgina. Son visualmente agresivos y cansan. Tampoco conviene utilizar imgenes gif animadas, ya que suelen irritar a todos los visitantes. En Internet, escribir todo en maysculas equivale a gritar. Recuerda que no todo el mundo tiene las mismas fuentes instaladas en su equipo. Por ejemplo, puede que con la fuente Staccatto el texto quede fabuloso para ti, pero si quien este viendo la pgina no la tiene instalada, su navegador la visualizar con la fuente por defecto (que suele ser Times New Roman en equipos Windows), y obtendr un resultado no deseado y generalmente poco agraciado. Para evitarlo usa fuentes comunes o ampliamente extendidas como, por ejemplo, Arial, Times New Roman, Courier o Verdana. La pgina puede tener un aspecto en nuestra pantalla y otro muy diferente en las de los usuarios que la vean. Los usuarios ven las pginas con distintos exploradores web (por ejemplo, Internet Explorer o Netscape Navigator) o incluso sistemas operativos diferentes. Recomendamos una codificacin lo ms ajustada a los estndares para que sea legible en todas o en la mayora de las circunstancias. Aunque todos los navegadores admiten un nico lenguaje HTML, existen algunas diferencias entre ellos. s
Tablas tiles
Otro de los elementos de los que podemos hacer uso son las tablas. Podemos utilizarlas como herramienta de diseo, pero tambin para organizar la informacin. Para aadir una tabla a nuestra pgina utilizaremos primero el asistente automtico, que nos guiar paso a paso por las diferentes opciones que pueden configurar nuestra tabla: filas, columnas, bordes, etc. Sin embargo, podemos crear nuestras tablas de una forma mucho ms rpida, con la opcin Quick Table (Tabla rpida), una posibilidad similar a la existente en programas como Word. Para crear la tabla, basta con que hagas click y arrastres el puntero del ratn mientras mantienes pulsado el botn izquierdo del mismo. Al
Las herramientas incluidas en el paquete nos ayudarn a mejorar nuestra web de forma muy sencilla.
pos de texto: "nombre" y "apellidos", y un botn de envo (Submit). Este formulario nos permite enviar un correo electrnico a la cuenta que nosotros elijamos. Dejemos un momento aparcado el formulario y centrmonos en la tabla. A continuacin, vamos a crear una tabla de dos filas (rows) y dos columnas (columns) para albergar nuestro formulario. En el men Table utilizaremos el asistente automtico, que nos evitar muchos quebraderos de cabeza a la hora de configurar las etiquetas HTML. De este modo, podremos elegir el ancho y alto, la alineacin, los colores de fondo, los bordes, etc. tanto, la etiqueta <form></form> debe ser la que envuelva toda la tabla. Por otro lado, debemos saber que las etiquetas <tr> y </tr> delimitan las filas y <td></td>, las diferentes celdas. Utilizaremos la primera columna para presentar un mensaje al visitante y la segunda, para introducir los campos de texto respectivos. Por ltimo, colocaremos el botn de envo fuera de la tabla, para reducir as la complejidad de este ejemplo, pero tambin podramos incluir una tercera columna y situarlo all. Aproximadamente, el cdigo que hemos generado y manipulado, debera ser:
El asistente nos brinda la posibilidad de escoger entre alguno de estos modelos prediseados.
hacerlo, se desplegar una rejilla que servir de base para elegir el nmero de filas y columnas deseadas. Lo malo de esta opcin es que hay que configurar las propiedades a mano, dentro de la ventana de cdigo, ya que Hot Dog no es capaz de hacerlo a posteriori. s
58
www.pctoday.es
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.
Gua del curso



4. Usabilidad.
5. Accesibilidad.

7. Programacin.
ace tan slo unos pocos aos la mayora de los ordenadores de los que dispona el pblico en general funcionaban tan slo con 256 colores. Actualmente, lo normal es trabajar con millones de colores y con monitores de velocidad de actualizacin rpida y cualidades grficas. Lamentablemente, los navegadores, es decir, los programas encargados de mostrarnos las pginas web, no han evolucionado de la misma manera y, como consecuencia, los millones de colores de los que se disponen para trabajar quedan reducidos drsticamente a la hora de crear pginas web. Cmo indicamos a la pgina el color que queremos? Utilizamos el sistema hexadecimal, que nos permite trabajar con millones de colores. Ahora bien, cmo funciona este sistema? La luz blanca est compuesta por par-
tes iguales de tres colores, llamados primarios: rojo, verde y azul. El color blanco es pues, una mezcla en la que se encuentran la mxima cantidad posible de rojo, verde y azul. La ausencia de los tres colores primarios da como resultado el negro. En el sistema RGB (siglas en ingls de Red, Green, Blue, es decir rojo, verde, azul) la cantidad de cada uno de estos colores puede ir desde 0 (ausencia total) hasta 255 (mxima cantidad). El sistema RGB indicar la cantidad de cada color entre 0 y 255 para as formar un nuevo color. Ya sabemos que R=255, G=255, B=255 dara blanco y que R=0, G=0, B=0 dara negro. Y el hexadecimal? Funciona bsicamente igual, indicando la cantidad de cada uno de los colores primarios, pero usando nmeros en base 16. Qu significa esto? Pues que en lugar de 10 d-
54
www.pctoday.es
Diseo web. Parte 3

mente de un navegador a otro y de un sistema operativo a otro distinto. menor medida, y los segundos son el azul, el verde, el azul verdoso, el violeta, cian, y el celeste. Colores claros y oscuros Otra posible divisin de los colores es aquella que distingue entre colores claros o luminosos y oscuros. Los claros inspiran limpieza, juventud, jovialidad, como ocurre con amarillos, verdes
Tipos de colores
Colores clidos y fros Una forma de dividir los colores es en clidos y fros. Los colores cali-
Hay que tener en cuenta que, dependiendo del sistema operativo en que trabajemos, utilizaremos distintas paletas de colores.
gitos utiliza 16, pero como no hay ms que diez nmeros recurre a las seis primeras letras del abecedario: 0123456789ABCDEF. Por otro lado, para indicar el color utilizamos seis valores: los dos primeros indican el rojo, los dos siguientes, el verde y los dos ltimos, el azul. De este modo, en HTML el color blanco sera "#FFFF" y el negro "#0000". La profundidad de color marca la cantidad de bits de informacin de que disponemos para definir los colores derivados de los primarios. A ms bits, se obtiene mayor nmero de variaciones de un color primario. Para 256 colores se precisan 8 bits, para obtener miles de colores necesitamos 16 bits (color de alta densidad) y para obtener millones de colores hacen falta 24 bits (conocido como color verdadero). Existe tambin otra profundidad de color, la de 32 bits, pero con ella no se consiguen ms colores, sino que los que usemos se muestran ms rpido. Volvamos a los 256 colores bsicos de 8 bits; de stos 256 colores, el propio sistema operativo se queda con 40 para su gestin interna, con lo que disponemos de 216, podemos combinar 6 tonos de rojo, 6 de azul y 6 de verde. Con el paso del tiempo se ha adoptado una lista de colores con un nombre representativo, de tal forma que los nuevos navegadores los interpretan y los traducen internamente por su valor hexadecimal equivalente. Visto lo anterior, si queremos trabajar con una gama de colores compatible con todas las profundidades, navegadores, sistemas y platafor-
mas, slo podremos usar unos determinados colores, en concreto 216. Pero esta paleta no es en realidad tan segura, ya que cada usuario que vea nuestra web, tendr configurado su monitor con unas determinadas pro-
Utilizar colores clidos puede dar dinamismo a la pgina.
Por mucho que nos esforcemos en que los colores sean iguales para todos, la diferencia de los monitores nos desbaratar nuestra intencin.
piedades de contraste, saturacin, luminosidad, etc., lo que borrar cualquier posibilidad de que nuestros colores se vean de la misma manera en dos dos dan sensacin de actividad, de alegra, de dinamismo, de confianza y de amistad, mientras que los colores fros dan sensacin de tranquilidad, de seriedad, de distanciamiento. En cuanto a los primeros, son el amarillo, el rojo, el naranja y el prpura en
Los colores oscuros crean espacios ntimos, mientras que los luminosos dan sensacin de apertura.
y naranjas. Los oscuros inspiran seriedad, madurez, calma, como es el caso de los tonos rojos, azules y negro.
Los mejores colores

No existe una respuesta nica para esta pregunta, todo depende del pblico al que va destinada la pgina, de los colores corporativos que quiz estev
Propiedades de los colores

Todos los colores poseen una serie de propiedades que les hacen variar de aspecto y que definen su apariencia final. Entre estas propiedades cabe distinguir: Matiz: es el estado puro del color, sin el blanco o negro agregados. El matiz se define como un atributo de color que nos permite distinguir el rojo del azul. Tambin lo podemos identificar con un verde amarillento y un verde azulado, ambos distintos matices del mismo color, el verde. Los tres colores primarios representan los tres matices primarios; mezclndolos se obtienen los dems matices o colores. Saturacin o intensidad: se refiere a la viveza o palidez de un color. Indica la pureza del mismo; los colores puros del espectro estn completamente saturados. Si mezclamos un color, por ejemplo, el rojo, con el blanco, no slo aumentar su valor sino que disminuir su saturacin. Para desaturar un color sin que vare su valor, es necesario mezclarlo con un gris de blanco y negro de su mismo valor. Un color intenso, como el azul, perder su saturacin a medida que se aada blanco y se convierta en celeste. Otra forma de desaturar, es mezclarlo con su complementario; esto producir tambin su neutralizacin. La intensidad de un color est determinada por su carcter de brillante o apagado. Brillo: es la intensidad con ms claridad u oscuridad en el color; se refiere a la cantidad de luz percibida. El brillo se puede definir como la cantidad de "oscuridad" que tiene un color, es decir, representa lo claro u oscuro que es un color respecto de su color patrn. Se trata de una propiedad importante, ya que contribuye a crear sensaciones espaciales. As, porciones de un mismo color con fuertes diferencias de brillo (contraste) definen porciones diferentes en el espacio, mientras que un cambio gradual en el valor de un color (gradacin) da sensacin de contorno, de continuidad de un objeto en el espacio. La descripcin clsica de los valores corresponde con: claro (cuando contiene cantidades de blanco); medio (cuando contiene cantidades de gris) y oscuro (cuando contiene cantidades de negro). s
La paleta Reallysafe o colores realmente seguros.
monitores distintos. Como consuelo, podemos trabajar dirigindonos al mayor nmero de usuarios posibles, y para ello podemos disear nuestras pginas usando bien la paleta de 216 colores, lo que nos permitir tener cubierto el rango de usuarios con sistemas de color de 8 bits y de 24 bits. Tambin podemos disear con toda la gama de 24 bits, y disponer as de millones de colores para trabajar, pero entonces slo apreciaran bien nuestras pginas los usuarios con sistemas de altas prestaciones, y siempre deberemos tener en cuenta que los colores Existen ms colores con nombre, pero slo stos se utilizados variarn ligeramostrarn en todos los navegadores.
N 89
55
Curso
El color y las emociones
Es bien sabido que las respuestas dad, cielo, agua, sensualidad, comodi Amarillo: comunica entusiasmo, paemocionales varan enormemente dad... Si es muy plido, puede inspirar sin, fuerza, peligro, calor, primavepara cada color y para cada intensifrescura e incluso fro. Da sensacin ra, inocencia, infancia... Es un color dad de un mismo color, as como de elegancia cuando no es muy oscuoptimista, moderno y denota alegra. para las diferentes combinaciones de ro. Si es oscuro, da sensacin de espiSi es muy brillante, puede indicar colores que se pueden dar. ritualidad. Es un color que influye sopeligro y si es muy suave, sugerir Normalmente, cada color individual bre el apetito, hacindolo disminuir, delicadeza. Un entorno amarillo melleva asociado un conjunto de emoseguramente porque no hay ningn dio o plido transmite comodidad, ciones y asociaciones de ideas proalimento azul en la naturaleza, por lo calor. Se ha asociado siempre el pio. Sin embargo, hay que recordar que no es aconsejable su uso para amarillo a la intelectualidad y al penque estas emociones asociadas una pgina sobre recetas de cocina. samiento claro, y hay psiclogos que corresponden a la cultura occidental, Tambin puede expresar tristeza. dicen que este color ayuda a memo Naranja: simboliza alegra, juya que en otras culturas los ventud, calor, verano... Es el colores pueden expresar senticolor de la carne y del fuego mientos totalmente opuestos a del hogar. Es vibrante como la los anteriormente indicados. luz del sol, extico como las As, y por citar slo unos cuanfrutas tropicales, jugoso como tos colores, podramos establela naranja, sugiere informalicer lo siguiente: Rojo: transmite pasin, alarma, dad en el trato, amistad y desentusiasmo, agitacin, fuerza, taca mucho sobre el entorno sexo, peligro, calor, fuego, sanque le rodea. Verde: recuerda la naturalegre, carcter belicoso, intensiza, salud, dinero, frescura, dad... Est asociado con senticrecimiento, abundancia, fermientos enrgicos y con la ex- No es casual que los coches deportivos utilicen frecuentemente el rojo, ya que es un color pasional. tilidad, plantas, bosques. Se citacin apasionada o ertica, dice que es el color ms descansado aunque tambin la ira y enfado. El rorizar datos a las personas. Hay que para el ojo humano y que tiene poder jo puede ser atractivo y seductor cotener en cuenta que es el color que de curacin. Es contradictorio; a mumo los labios pintados de una mujer o fatiga ms a la vista, y llega a ser chas personas les parece desagradesencadenar asco, mareo, como aplastante, porque causa una estidable, y a otras les sugiere pasin. cuando se contempla un charco de mulacin excesiva de los ojos, por lo sangre. Puede llamar la atencin, paque un entorno amarillo brillante El negro: implica elegancia, seduccin, misterio, fuerza, mal. ra incitar a una accin o para marcar puede llegar a provocar una sensa El blanco: est asociado a la purelos elementos ms importantes de la cin de irritabilidad en las personas. za, inocencia, limpieza, ligereza, jupgina, pero cuando se emplea mu- Azul: implica verdad, dignidad, melanventud y suavidad. s cho cansa la vista. cola, tristeza, confianza, masculini-
fundamental de estas pginas es ser ledas. Como consejo, utilizar un fondo claro y letras oscuras, que destaquen muy bien. Pginas exticas y a la vez elegantes: se pueden obtener con fondo negro o con color muy oscuro y letras o motivos dorados, blancos o prpuras-rojos. Otro aspecto que debemos tener en cuenta es si queremos que el usuario pueda imprimir nuestras pginas. Si la respuesta es afirmativa, hay que evitar los colores muy oscuros, ya que esto nos obligara a dar colores claros a los textos, para que se pudieran visualizar. Con este planteamiento, si el usuario quiere imprimir la pgina va a tener problemas por todos lados. Si no tiene activada la opcin de imprimir los colores de fondo, no ver nada en la impresin, y si la tiene activada, gastar el cartucho de tinta de la impresora, obteniendo de todas formas un mal resultado. Un aspecto a tener en cuenta es el contraste creado cuando sobre un color o una imagen de fondo colocamos otro color diferente, o cuando situamos prximos en nuestra pgina dos o ms colores distintos. Como norma general, siempre debe destacar el texto sobre el fondo con la suficiente clari-
mos obligados a seguir y, en especial, de cada diseador, ya que un diseador es un creador, y por lo tanto nuestras creaciones estn en gran medida inspiradas por nuestra personalidad, estado de nimo, etc. Sin embargo, podemos seguir unas pautas generales que nos orientarn: Pginas destinadas a un pblico general: deben estar basadas en colores ms bien neutros, que puedan gustar a la mayora, como colores secundarios o terciarios en tonos pastel o en una gama de grises, con bajos contrastes entre fondo y conte-
nido. El color de los enlaces conviene que sea el azul estndar del navegador, o si lo cambiamos por lo menos dejar los enlaces subrayados, ya que es el color que est acostumbra-
primarios, con altos contrastes entre fondo y contenido, o bien con fondos oscuros y textos claros, con la inclusin de pequeas animaciones en Flash de tonos vistosos.
En las sitios educativos, prima la limpieza y claridad de las pginas.
No hay colores mejores o peores para crear pginas web, todo depende del contexto y del conjunto.
do a ver la mayora de los usuarios. Pginas orientadas a un pblico joven: pueden incluir colores vivos, Pginas destinadas a un pblico adulto: deben disearse con colores serios, elegantes, fros, sin altos contrastes de tono, en colores neutros, incluso tirando a grises. Siempre podemos recurrir en este caso al tpico estndar de fondo blanco y letras negras o gris oscuro. Pginas corporativas, de empresa o de instituciones: deben disearse de acuerdo con los colores identificativos de las mismas, incluyendo siempre el logotipo de la empresa. Pginas divulgativas, como manuales y artculos: debemos tener especial cuidado en que el texto destaque adecuadamente sobre el fondo, sin usar colores chillones que cansen la vista, ya que el objetivo
Los colores alegres dominan las pginas juveniles y dirigidas a un pblico infantil.
dad como para que se pueda leer cmodamente, y esto tambin es importante en el caso de las imgenes de pgina. No olvidemos nunca que la misin principal de una pgina web es transmitir informacin, por lo que una lectura clara y cmoda es fundamental. Los buenos contrastes se obtienen con fondos claros y textos oscuros, o al revs, y tambin con fondos fros y textos clidos, o al revs, siempre que no sean anlogos. No podemos olvidar la accesibilidad que debemos dar a nuestras pginas. Debemos verlas con los ojos del posible visitante, y estos ojos muchas veces no estn en las mismas condiciones que los nuestros. No debemos olvidar a los usuarios afectados por el daltonismo, a quienes la navegacin por nuestra pgina les resultar muy difcil si nos basamos nicamente en rojos y verdes. Por otro lado, no es recomendable usar imgenes de fondo en las pginas web, salvo que sta sea de un color y to-
56
www.pctoday.es
Diseo web. Parte 3

Manipulation Program), el ms conocido dentro del mundo del software de libre distribucin dedicado al retoque fotogrfico y la composicin y creacin de imgenes. En un principio se desarroll para el sistema operativo Linux, y hace ya algn tiempo que se encuentra disponible para Windows, aunque los autores aclaran que esta versin an presenta pequeos fallos. Funciona en todos las versiones de Windows, desde Windows 95 hasta Windows XP, y los requisitos mnimos del sistema son los siguientes: Pentium I a 133 MHz, 32 Mb de Ram, 200 Mb de espacio libre en disco duro, resolucin mnima de 800x600 ppp y color verdadero de 24 32 bits. No funcionar con una configuracin de 256 colores.
Fichero, extensiones y ayuda.
Cuadro comparativo entre los dos principales formatos para web. Se pueden apreciar las diferencias de legibilidad y calidad de los tonos continuos (www.dispar.cl).
no muy apagado y con poco contenido grfico por unidad de pantalla, ya que despistan mucho al usuario y enmascaran excesivamente el texto, as como los dems elementos de la pgina.
Formatos grficos
Una misma imagen puede almacenarse en diferentes formatos; los ms extendidos en Internet son GIF y JPEG. La organizacin W3C recomienda el uso del formato PNG (Portable Network Graphic) para cubrir ciertas lagunas que dejan los otros formatos, aunque, como es de reciente aparicin, todava no se admite en todos los navegadores.
JPEG es el acrnimo de Joint Photographic Experts Group (Grupo Unido de Expertos de Fotografa). Fue diseado para la compresin de imgenes fotogrficas, basndose en el hecho de que el ojo humano no es perfecto y no logra captar toda la informacin que se puede almacenar el una imagen de 24 bits. El formato JPEG intenta eliminar la informacin que el ojo humano no es capaz de distinguir, por eso se dice que posee un formato de compresin con prdida, porque elimina informacin. Respecto a los colores, pueden ser 24 bits en imgenes de color o solamente 8 en fotografa en blanco y negro. Una de las desven-
Vamos a comenzar con la descripcin de los mens y las herramientas, para ms adelante realizar varios ejercicios prcticos. Cuando lo abrimos, slo aparece la caja de herramientas, que contiene tres mens: El men Fichero contiene los siguientes submens: Nuevo: despliega un cuadro de dilogo desde donde podemos escoger las medidas para una nueva imagen. Abrir: nos permite seleccionar una imagen desde una carpeta para poder trabajar en ella. Adquirir: bien sea por escner, el portapapeles o por captura de pantalla. Preferencias: desde donde se pueden cambiar los valores correspondientes al nmero de niveles de deshacer, la resolucin del monitor, la forma en que se visualizan las ventanas de GIMP, etc. Dilogos: con las opciones que se muestran a conLa compatibilidad con LZW se encuentra separatinuacin. da del programa por la vigencia de la patente.
El formato PNG es el que ms futuro tiene, ya que los desarrolladores de software libre se estn volcando en l.
tajas de este formato es que no permite la transparencia ni la animacin. PNG es el acrnimo de Portable Network Graphics (Grficos de Red Porttiles). Su objetivo es proporcionar un formato de compresin de imgenes sin prdida adaptable a cualquier tipo de imagen. Se caracteriza por conseguir una mayor compresin que el formato GIF (alrededor del 10%) y, al igual que ste, su compresin es sin prdida y perPara las fotografas es mejor utilizar el formato JPG. mite la transparenpor el nmero de colores que utiliza, cia. Sin embargo, esta transparencia es que puede variar entre 2, 4, 8, 16, 32, mucho ms avanzada, ya que permite 128 256 de una paleta de 24 bits. Su que sea variable, es decir, que podecompresin se basa en el algoritmo mos hacer un degradado de transpaLZW, es decir, un formato de compre- rencia, por ejemplo. Respecto al color, sin sin prdida. Una de las grandes diremos que soporta hasta 256 coloventajas de este formato es que permite res. Por contra, presenta la desventaja la transparencia, es decir, que la ima- de que no permite la animacin. gen no tiene por qu ser cuadrada, sino que puede tener un recorte. Ade- Que es GIMP? ms, se pueden crear imgenes animaGIMP es el Programa de Manipuladas, por ejemplo, los banners. cin de Imgenes GNU (GNU, Image GIF es el acrnimo de Graphic Image File Format (Archivo de Formato Grfico de Imagen). Fue desarrollado para el intercambio de imgenes en Compuserve, aunque la patente ya ha prescrito en muchos pases. Se caracteriza
Cmo instalar The GIMP

Podemos descargar el programa ciaciones de archivo se nos pregunta desde www2.arnes.si/~sopjsimo/ qu tipos de archivos grficos deseagimp. Es importante instalar los archi- mos asociar a GIMP. Recomendamos vos en el orden que indicamos. dejar todas las casillas sin seleccioDescomprimimos gtk+-versionnar. Asmismo, nos indica que GIMP setup-1.zip y lo ejecutamos haciendo necesita filtros extra para exportar doble click . Una vez que hemos archivos en formato gif y tiff compriaceptado los trminos de la licencia , mido. Estos filtros se instalan por nos pide elegir una carpeta para insseparado. En Seleccionar tareas aditalar el programa. Recomendamos cionales, dejamos seleccionadas las dejar la predeterminada. opciones por defecto y por ltimo, A continuacin, descomprimimos el procedemos a la instalacin. archivo .zip. En caso de que nuestra Ahora que ya est instalado, ejecutaresolucin de mos el programa pantalla no para configurarlo tenga de acuerdo a 1.024x768 ppp, nuestras necesiel programa de dades. Aqu eleinstalacin desgiremos la carplegar un peta donde guarmensaje de daremos los advertencia , archivos, el ajuspero no te prete de rendimienConfigura el programa de acuerdo ocupes, con to, la resolucin una resolucin con las caractersticas del equipo. del monitor y los de 800x600 el programa funciona sin plug-ins aadidos. problemas. Aceptamos los trminos Ahora que tenemos instalado el prode la licencia y seleccionamos el grama, vamos a acoplarle el mdulo directorio donde lo queremos instalar. de archivos .gif. Cierra GIMP para Igualmente, dejamos el predetermina- poder instalar el plug-in , y descomdo. En el siguiente cuadro de dilogo primimos gimp-version-lzw-setup.zip. elegimos la Instalacin tpica. En el Simplemente pulsamos en l, y le cuadro de dilogo Seleccionar asodecimos instalar. s
N 89
57
Curso
con 56 patrones que se pueden usar para rellenar objetos. Tambin se puede llegar a este cuadro de dilogo haciendo doble click en el icono Patrn activo. - Gradientes. Abre el cuadro de dilogo Seleccin de gradientes. ste cuenta con setenta y ocho diseos que se pueden modificar para crear ms. Tambin se puede llegar a este cuadro de dilogo haciendo doble click en el icono Gradiente activo. - Paleta indexada. Abre el cuadro de dilogo Paleta de color indexado, que permite escoger entre cualquiera de los colores que se encuentran en una imagen indexada (generalmente un gif) para pintar o rellenar nuevos objetos. Para ver los colores de esta paleta, se deber tener abierta una imagen indexada. - Dispositivos de entrada. Muestra el dispositivo de entrada por ejemplo, cuando se tiene instalada una tableta digitalizadora. encuentran guardadas en nuestro ordenador. Se puede abrir cualquiera de ellas desde aqu. - Consola de errores. Muestra un informe de los errores producidos en el transcurso de la sesin de trabajo. Debajo del men Dilogos, aparece una lista con los ltimos cuatro archivos abiertos, siendo el primero, el que se abri ms recientemente. Salir. Es el ltimo de los submens y, como ya habrs deducido, cierra el programa y cualquier archivo que est abierto. En caso de que no se hayan guardado los cambios de alguna imagen, GIMP despliega un men-
Las las herramientas de seleccin, edicin y dibujo estn en el centro.
- Capas, canales y caminos - Opciones de herramienta. Abre el cuadro de dilogo correspondiente a las opciones de la herramienta que se encuentra activa. Tambin se puede llegar a este cuadro de dilogo haciendo doble click en la herramienta deseada. - Brochas. Abre el cuadro de dilogo Brochas para escoger entre una coleccin de 50 diseos y tamaos. Tambin se puede llegar a este cuadro de dilogo deshaciendo doble click en el icono Brocha activa. - Patrones. Despliega el cuadro de dilogo Seleccin de patrn. Cuenta
GIMP es la alternativa gratuita a Adobe Photoshop, aunque an le quedan muchas diferencias por pulir.
- Paleta. Abre el cuadro de dilogo Paleta de colores, en donde se puede escoger un color para rellenar objetos (color de frente) desde las 39 paletas con que cuenta. Al hacer doble click en el icono Color de frente, se abre el cuadro de dilogo Seleccin de color. Aqu podemos ver los valores RGB, el nmero hexadecimal del color o escoger uno nuevo. - Estado de dispositivo. Permite hacer cambios en los colores, patrones, brochas y gradientes cuando se tiene instalado algn dispositivo de entrada. - ndice de documentos. Despliega la ventana ndice del documento, similar al administrador de archivos, pero a diferencia de ste muestra una lista de todas las carpetas que contienen imgenes y que se
Mapas de imgenes
Supongamos que tenemos un mapa de Europa y queremos que, al pulsar sobre determinado pas, aparezca una pgina relacionada con ese pas. Este tipo de imgenes activas se denominan "Mapas de imgenes". Veamos el cdigo: <img src="europa.gif" <area shape= "rect"#Espaa y Portugal coords= "1,222,76,296" href="espana_portugal.htm" title= "Espaa y Portugal"/> <area shape= "poly"#Italia y Grecia coords= "121,230,134, 233,137,245,124,243, 121,278,130,277,130, 249,139,247,173,269, MapEdit es una aplicacin muy sencilla que nos 174,280,149,285,169, ayudar a crear mapas de imgenes. 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,274,212,291,226,291,224,280,237,27 gn enlace y la ltima cierra el mapa. 4,220,264,215,255,196,259,189,264,1 Construir un mapa introduciendo a 71,253,157,243,157,237,147,232,147, mano las coordenadas de cada uno de 220" href="italia_grecia" title="Italia los puntos que definen las reas es muy y Grecia" /> engorroso. Existen programas que nos <area shape="default" nohref="noh- ayudarn en esta tarea. Por ejemplo, ref" alt="Europa" /> podemos utilizar el programa Mapedit </map> de la empresa Boutell para crear un Este cdigo define el funcionamiento del mapa de imagen. Podemos descargar mapa. La primera lnea incluye el nomuna copia de evaluacin de este softwabre 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(shape="rect"), seala las coordenadas mos una imagen de nuestro sitio web y del mapa (coords) e introduce el con las herramientas cuadrado o polgocomentario (alt="Espaa y Portugal") y no, creamos reas activas. En el mismo el enlace al que se llamar. La tercera momento en que terminemos de definir lnea es similar, pero define un polgono el rea, aparecer un cuadro de dilogo e indica las coordenadas (en pares X,Y donde se nos pedir el nombre de la desde la esquina superior izquierda de pgina a la que queramos enlazar, as la imagen) de cada uno de los puntos como otras opciones adicionales. s
Este men es equivalente al tradicional "Archivo" en otros programas.
saje preguntando si realmente queremos salir. Podemos hacer click en Salir si no deseamos guardar los cambios o en Cancelar, para poder guardar el trabajo.
Cmo abrir y guardar una imagen

Entre los formatos ms conocidos que se pueden abrir y guardar con GIMP se encuentran: BMP, GIF, JPG, TGA, TIFF, PNG, etc., Tambin se puede leer y guardar archivos de Adobe Photoshop, aunque si la imagen contiene capas, stas no se guardarn. Para abrir una imagen, hacemos click en el men Fichero y seleccionamos la opcin Abrir, momento en el cual se despliega el cuadro de dilogo Cargar imagen. Debajo de Directorios se encuentran las unidades de disco y las carpetas. Podemos localizar la carpeta donde est guardada la imagen mediante la barra de desplazamiento y, colocando el cursor en la unidad raz, hacemos doble click para visualizar las carpetas. Repetimos la operacin
Si ponemos el cursor encima de un rea activa de la imagen, aparecer una mano para indicar que se trata de un enlace.
usemap="#europa" alt="Europa" /> Ser el atributo usemap= "#europa" el que nos va a indicar que las instrucciones de este mapa estn guardadas en otro sitio, en algn lugar debajo de la etiqueta IMG. Veamos el cdigo necesario para hacer funcionar nuestro mapa: <map id="europa" name="europa">
58
www.pctoday.es
Diseo web. Parte 3

en la carpeta correspondiente a la ubicacin de la imagen. Del lado derecho, debajo de Archivos, buscamos la imagen que deseamos abrir. Se puede crear una vista previa de la imagen antes de abrirla si hacemos click en el archivo y luego otro en el botn Generar vista previa. Seleccionamos la imagen y aceptamos para abrirla. Para guardar una imagen en otro de los formatos disponibles, hacemos click con el botn derecho del ratn en cualquier parte de la imagen y en el men que aparece, seleccionamos Fichero y luego Guardar como. En el cuadro de dilogo Guardar imagen, debajo de Directorios, buscamos la carpeta en la cual vamos a guardar la imagen y en el cuadro de texto que se encuentra arriba del botn Aceptar, escribimos el nombre que le vamos a dar a la imagen incluyendo la extensin. Ahora, hacemos click en el botn Aceptar. Para que GIMP pueda guardar las imgenes en formato .gif, primero tenemos que indexar la imagen. Si quisiramos guardarla en formato jpg, deberamos proceder de la misma manera, pero en la Vista previa, tenemos que ajustar la barra deslizable Calidad y el tamao en bytes y Kb. A un valor bajo, la calidad es ms pobre. A un valor alto, la calidad de la imagen es mejor pero tambin su tamao en Kb. Probaremos con varios valores hasta que encuentres un punto adecuado. La opcin Suavizado tiene un efecto parecido al desenfoque, pulso para no desviarse demasiado al realizar dicha seleccin. La forma de hacerlo es mantener presionado el botn del ratn mientras deslizas el cursor sobre el contorno que quieres seleccionar. Al soltar el botn, la seleccin se cierra automticamente. Para realizar una nueva seleccin, es necesario hacer click en cualquier punto exterior de la seleccin actual. Otra forma de seleccionar regiones continuas es mediante la herramienta llamada "varita mgica", uno de los mtodos ms sencillos de seleccionar objetos. Con ella puedes acotar regiones de colores similares, bien sean contiguos o no. Seleccionar regiones con curvas de Bzier es muy til para elegir formas irregulares o con curvas. Lo mejor de esta herramienta es que permite modificar la seleccin mediante los puntos de control que forman las aristas. Para cancelar la seleccin actual, coloca el cursor fuera del rea punteada y, a continuacin, haz click. Si haces doble click en cualquiera de un color o cualquiera de las muchas opciones que nos ofrece GIMP. Para mover la seleccin a otro punto, primero elige una zona de la imagen mediante cualquiera de las herramientas que has visto antes. Ahora, en la caja de herramientas, selecciona el icono que se encuentra en la segunda fila y segunda columna (cuatro flechas cruzadas). Vuelve a poner el cursor encima de la seleccin y, con el botn izquierdo del ratn presionado, arrastra la seleccin al punto deseado. Finalmente, para fijar la seleccin en su lugar, haz click dentro de sta.
Elige la extensin del archivo dependiendo de los colores y el tamao.
mejores resultados. Hacemos click en Aceptar para guardar la imagen.
Las herramientas de seleccin

La seleccin rectangular nos permite seleccionar un rea con esa forma en una imagen; de esta manera, podemos recortar, mover o rellenar con un color el rea que queda dentro de la selec-
Una buena manera de conocer el programa es trastearcon todas las opciones que nos ofrece.
Mediante unos tiradores podemos determinar fcilmente el rea que queremos recortar.
cin. Para realizar esta seleccin haz click en el icono Seleccin rectangular ubicado en la barra de herramientas y luego, coloca el cursor en una esquina de la imagen; con el botn izquierdo del ratn, arrastra el cursor en diagonal para formar una ventana de seleccin, suelta luego el botn del ratn para terminar la seleccin. Haz click en una de las esquinas y mantn pulsado el botn del ratn, mueve el cursor hacia cualquiera de las otras esquinas. La seleccin circular nos permite realizar selecciones elpticas o circulares de una imagen. La forma de realizar la seleccin es exactamente igual a la seleccin rectangular. Coloca el cursor y luego lo arrstralo, se formar una elipTrabajar con GIMP es similar a hacerlo con otro software. se. Para realizar una un valor de 0.00 muestra la imagen seleccin circular, mantn presionantida, a un valor mayor, la imagen se da la tecla de maysculas mientras ve borrosa. Seleccionamos las opcio- arrastras el cursor sobre la imagen. Para seleccionar formas irregulares nes Optimizar, Progresivo y dejamos los valores por defecto para Sub- de una imagen, utiliza regiones dibumuestreo y Mtodo DCT y as lograr jadas a mano. Se requiere tener buen
Recuerda que si te equivocas, siempre puedes usar la opcin Deshacer. los iconos de seleccin, se desplegar Pulsa click sobre la imagen y, desde el el cuadro de dilogo relativo a las men Editar, selecciona Deshacer, o propiedades de la herramientan que mientras mantienes presionada la tecla Control, al mismo tiemests utilizando. po, presiona la tecla Z. Si mantienes prePrueba ahora a corsionada la tecla de tar la imagen. Con maysculas, podrs esta herramienta (sesumar selecciones gunda fila, cuarta coparciales que estn lumna) se puede seen contacto y converleccionar con detalle tirlas en una sola. Si el rea de una imagen ahora mantienes presionada la tecla Con- Las herramientas de seleccin y realizar un recorte las ms importantes dende la misma. Haz click trol, podrs restar sondel programa. tro en una esquina de la trozos de las selecimagen y mientras pulsas el botn izciones a una seleccin anterior. quierdo del ratn, arrstralo en diaTransformacin gonal para formar una ventana. Para ajustar la seleccin, coloca el cursor de una imagen Una vez terminada la seleccin, en uno de los cuadros de las esquinas puedes moverla, cortarla, aplicarle y cuando cambie de forma, mientras muestra una flecha en diagonal, arrstralo para cambiar el tamao de la ventana. Para mover la ventana, coloca el cursor en uno de los cuadros de las esquinas y cuando cambie de forma y muestre cuatro flechas, arrstralo hasta encuadrar la imagen. Notars que aparece el cuadro de dilogo Informacin de recorte y cambio de tamao, que incluye la informacin y en el que tambin puedes hacer los ajustes necesarios mediante la introduccin de valores en pxeles. Una vez que la seleccin haya quedaEl rea seleccionada queda enmarcado a tu gusto, haz click dentro sta da con lneas discontinuas que se para recortar la imagen. s desplazan alrededor de la imagen.
N 89
59
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.
Gua del curso



4. Usabilidad.
5. Accesibilidad.

7. Programacin.
i acudimos a definiciones formales, la Organizacin Internacional para la Estandarizacin (ISO, www.iso.org) dispone de dos: ISO/IEC 9126: "La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones especficas de uso". ISO/IEC 9241: "Usabilidad es la efectividad, eficiencia y satisfaccin con la que un producto permite alcanzar objetivos especficos a usuarios especficos en un contexto de uso especfico". La primera definicin hace referencia a la necesidad de que exista un usuario para valorar si un producto es usable o no. La segunda hace referencia a cmo el usuario puede realizar un trabajo en un determinado escenario de forma efectiva. Siempre que apa-
recen las palabras efectivo y eficiente, conviene indicar la diferencia. Efectivo es aquello que produce resultados rpidamente a costa de utilizar los recursos necesarios y eficiente es aquello que genera los mismos resultados con un mnimo de recursos. Dejndonos de tecnicismos y normas (siempre necesarias), coloquialmente podemos definir "usabilidad" como la facilidad de uso aplicable a cualquier sistema que interacta con un usuario. Para conseguir este objetivo, hay que plantear el desarrollo de nuestra web de forma que bsicamente sea rpida, cmoda y fcil de navegar. En la primera parte ya dimos algunas pautas que se deben seguir y antes de ponerse a trabajar hay que planificar. Nos daremos cuenta de que la dura realidad es que el esfuerzo que se utiliza en crear una web se centra en ver y
52
www.pctoday.es
Diseo web. Parte 4

comprender el uso de la misma. Al final siempre es rentable emplear ms tiempo en este punto. lo mismo desarrollar una web para un astrnomo que para un diseador grfico. Incluso dentro del mismo contexto, no es lo mismo desarrollar una web para un diseador grfico de 3D que para un diseador de carteles de cine. Esto no significa que no haya una serie de principios que se debe seguir en cualquier diseo, ya sea una pgina web, una revista o un coche. Mientras los cientficos se preocupan de cuantificar los comportamientos interactivos, la mayora de los diseadores se conforman con que no existan restricciones en la comunicacin. Quin no ve regularmente docenas de interfaces a la semana? En muchas ocasiones (como es el caso de los buscadores) repetimos la visita regularmente. Pues bien, esto indica que una interfaz es ante todo, un intermediario de la comunicacin con la audiencia. Muchas interfaces estn diseadas para trasladar herramientas del mundo real al virtual. Evidentemente, con una serie de adaptaciones que permite cambiar, por ejemplo, un lpiz por el ratn y el bloc de dibujo por la pantalla. La mayora de las personas sienten afinidad y familiaridad con una pgina web porque quieren, necesitan o estn de alguna forma relacionados con el contenido que se ofrece. Hay estudios que indican que la poblacin que estuvo conectada a Internet en 2003 a nivel mundial ascenda a 450 millones de personas. Se perdieron ms de 23 billones de euros debido a la falta de
Interfaz
Siempre que hablamos del trmino interfaz, slo se piensa en los ordenadores, pero llevamos utilizando las interfaces desde la revolucin industrial. Podemos ver la importancia del diseo de una interfaz en algo tan cotidiano como un coche (cuya interfaz ha mejorado a lo largo de los aos desde su invencin). Pues bien, si la interfaz de un coche no fuese clara, sera un desastre o ni siquiera lo podramos poner en funcionamiento. Si tuviramos que definir el trmino, habra que decir que una interfaz es una serie de elementos que nos permite manejar algo complejo de forma sencilla. Volviendo al concepto de la interfaz del coche, sera bastante complicado sacar el carn de conducir si todos tuviramos que comprender el funcionamiento interno del mismo. Si a eso aadimos que si no fuese por la palan-
Organizacin Internacional para la Estandarizacin, mos consultar los estndares de usabilidad.
www.iso.ch. Aqu pode-
En Internet podemos encontrar mucha informacin acerca de la usabilidad. Esto indica que no es simplemente un trmino del que se puede
Procura ponerte en la piel de un usuario. Todos hemos tenido experiencia como usuarios en las miles de interfaces que existen.
ca de marchas (elemento de la interfaz), tendramos que preocuparnos de sincronizar el motor con la caja de cambios para poder ir marcha atrs. Algo tan sencillo como poner unas letras en el pomo de la palanca nos da una informacin esencial e indica las acciones necesarias para poder cambiar de velocidad. Acompaado de un pedal de embrague (otro elemento de la interfaz), se permite esta operacin. prescindir a la hora de crear una pgina web. Hay muchos estudios que demuestran que los comportamientos de los usuarios con respecto a un sitio web determinan su usabilidad.
A pesar de que existan estudios y especialidades en carreras universitarias, no existen unas "reglas" de usabilidad que se deban seguir para utilizar los elementos de una interfaz web. Por deduccin vers que el trmino se hace relativo, es decir, una web puede ser ms o menos usable dependiendo de una serie de cuestiones: Para qu sirve la web (objetivo). A quines va dirigida. Dnde se utiliza o en qu contexto. El propio concepto no permite unas reglas fijas para estas preguntas. No es
Qu el IPO?
Este trmino es ms conocido por sus siglas IPO, en ingls HCI (HumanComputer Interaction o interaccin entre mquina y persona). Aunque generalmente vienen unidos: IPO/HCI. Siempre se ha pensado que era un terreno al que slo se dedicaban los ingenieros e informticos, pero la influencia y expansin de Internet han abierto un lugar creciente a los estudios sicolgicos sobre sus contenidos y a la forma de actuar de sus "espectadores". Aqu mostramos una serie de enlaces relacionados, para aqullos que queris profundizar en este tema.
Interaccin Persona-Ordenador
Haciendo un poco de historia, la usabilidad y su estandarizacin vienen de una rama de Psicologa Aplicada que es-
www.ainda.info griho.udl.es:8080/aipo www.desarrolloweb.com/manuales www.usability.serco.com/trump/ resources/standards.htm

(Este ltimo en ingls). s
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 herramienta que usemos en nuestro PC, simplemente una interfaz es el conjunto de elementos que nos permite interaccionar con dicha herramienta (botones, enlaces, cuadros de dilogo, listas desplegables, etc.).
tudia la Interaccin Persona-Ordenador. Ms conocida como IPO, podramos definirla como el intercambio de informacin entre personas y ordenadores. Su objetivo es que este intercambio sea ms productivo en aquellas tareas en las que cooperan humano y mquina.
Dentro de los sitios web en castellano, ainda.info puede ser uno de los ms interesantes donde obtener informacin.
N 90
53
Curso
Para validar tus pginas web Tipo HTML CSS1 CSS2 URL Accin
validator.w3.org Ayuda a convertir el cdigo de las pginas a HTML vlido www.w3c.org/Style/CSS/Test Tests para verificar hojas de estilo CSS1 jigsaw.w3.org/css-validador Verifica hojas de estilo CSS2
lenguaje que utilizamos y del navegador en el que se visualizar la pgina. Si trabajamos directamente con cdigo, habr que evitar el uso de ciertos elementos de interfaz o hilar fino con las diferencias que surgirn al
y eliminar partes para cubrir las nuevas necesidades del usuario. Mantenimiento adaptativo: cambios y modificaciones que hay que introducir para que el producto se amolde al sistema en el que funciona
usabilidad de los sitios de comercio electrnico y casi la mitad de las transacciones no se llegaron a completar. Quiere decir que la relacin interfazusuario no estaba resuelta adecuadamente. La consecuencia de romper la familiaridad con el usuario es que nuestro sitio web no se visite. Si aadimos que depende de nuestra interfaz web que ganemos dinero, ser peor todava.
do. Cuando digo sencillo, no significa "sin calidad". Si la prctica o experiencia nos lo permite, podemos trabajar directamente en un editor de texto o echar mano de las herramientas de diseo como
El mercado de nuestra web

El primer paso siempre es identificar el mercado que va a cubrir nuestro sitio web. El usuario es quien va a medir realmente nuestro trabajo final (por lo general nosotros mismos, a no ser que nos dediquemos profesionalmente a ello). A quin queremos atraer con nuestra interfaz? Cmo, cundo y por qu usarn nuestros servicios? El tiempo final de desarrollo depender de la claridad de estos conceptos y de lo que queremos plasmar en nuestra web. Lo que influye de manera fundamental son las soluciones tecnolgicas que vamos a emplear en nuestro desarrollo. Desde mi punto de vista, siempre es preferible acudir a lo sencillo para obtener un resultado rpi-
Dentro del consorcio internacional W3C podemos utilizar herramientas para validar el cdigo de nuestras pginas.
A la hora de trabajar, no podemos olvidar la cantidad de sistemas y navegadores existentes.
Sausage Hot Dog o Hot Metal Pro (que ya vimos en una entrega anterior). Evidentemente, utilizar herramientas de desarrollo evitar que necesitemos un conocimiento profundo del sistema operativo sobre el que trabajamos, del
visualizarlos en distintos navegadores. Podemos encontrar herramientas de validacin de cdigo y, principalmente, acudir al consorcio internacional W3C, donde obtendremos informacin de los estndares que debemos seguir en nuestros desarrollos. An as, es muy difcil conseguir un diseo de pgina universal para todos los navegadores o dispositivos, que no siempre funcionan segn las normas. Slo podemos dar un consejo: prueba tus pginas sobre distintos navegadores. Tambin est la opcin ms sencilla y que muchos hemos
(nuevo hardware, cambio de sistema operativo, bases de datos, etc.). Mantenimiento perfectivo: mejoras que hay que realizar en la calidad del producto final (optimizacin de cdigo, reestructuracin del sistema, etc.) Enfrentarnos a los cambios de un sitio web vendr condicionado por la forma en la que se haya desarrollado. Volvemos a repetirnos: cuanto ms sencillo sea un diseo y ms clara la informacin suministrada al usuario, ms fcil ser aplicar cambios, ampliaciones y mejoras.
Los expertos opinan

Dentro de los expertos en esta enlaces, colores, tipografa, etc.). En materia de la usabilidad, podemos cuanto al "user model", podemos seguir la analoga que Dick Berry decir que es lo que le da funcionali(IBM) hace entre sta y un iceberg. dad a la interfaz, hace que sea comUna interfaz se compone de dos prensible para el usuario y permite partes: los elementos invisibles (lo resolver sus tareas (familiaridad?). que se denomina user model) y los Por importancia se podra establecer visibles (look & que dentro de un feel). Pues 100%, el "look" bien, segn su supone el 10%, postulado, el el "feel" un 30% usuario slo ve y el "user la punta del model" un 60%. iceberg (look & Podrs deducir feel), pero lo que los cimienque se encuentos de un protra bajo el agua yecto web estn se compone de basados en crear una estructura Dick Berry esuno de los expertos una interfaz funmultidimensio- ms reconocidos por su trabajo socional para el bre interfaces hombre-ordenador. nal construida usuario. Esto es en funcin de los usuarios. Si traduindispensable, pero hay que aunar los cimos esto, quiere decir que la inter- tres elementos. faz es el "feel", ya que es la que se En esta entrega no vamos a entrar comunica con el usuario por s en programacin, ya que la usabilimisma, mientras que el "look" es dad depende ms de las convenciocmo se muestran los contenidos nes y estndares de la interfaz que dentro de ella (estructura, mens, de su programacin. s
Como todo en esta vida, no hay un sitio web perfecto, pero podemos conseguir que su uso sea ms agradable.
visto en Internet: aadir en nuestra Home la lnea tpica que dice "Optimizada para XXXXXXX en 800x600", pero es el peor consejo que se debe seguir. Para asegurarnos un mantenimiento con bajo coste de nuestro sitio web (tanto si lo hemos desarrollado nosotros, como si hemos contratado a un profesional), quiz debamos emplear ms presupuesto en el desarrollo, sobre todo en la parte inicial del mismo. Un presupuesto anual de mantenimiento debera ser al menos un 50% del coste inicial.
Mantenimiento de una web
Evidentemente, por muy estricto que haya sido nuestro trabajo de desarrollo, las pginas web deben evolucionar para adaptarse a nuevas tecnologas, crecer y ampliar sus funcionalidades, solucionar problemas de uso, etc. En esta evolucin tenemos varios tipos de mantenimiento: Mantenimiento correctivo: cambios que hay que realizar para corregir errores del software. Mantenimiento evolutivo: incor- Hay herramientas como Macromedia Coldfusion permiten porar, modificar trabajar con todas las posibilidades de un desarrollo web.
54
www.pctoday.es
Diseo web. Parte 4

Adems del coste econmico est el coste humano. Todo lo hagamos en una pgina web repercute en el desarrollador y sobre todo en el usuario. Es fcil saber qu har que el mantenimiento de una interfaz sea ms o menos costoso. Se han dado casos bastante demostrativos de los problemas que puede ocasionar una interfaz de la pgina mal diseada o con falta de rigor en su desarrollo. En cierta ocasin la interfaz fue creada por una empresa de diseo con poca experiencia en interfaces informticas. Se utiliz una tipografa propietaria, se abus de los enlaces de texto en formato grfico (GIF), las pginas estaban saturadas de informacin... En definitiva, se saltaron muchas reglas bsicas del diseo de la interfaz. El mantenimiento tuvo un gran coste posterior, ya que se utiliz ms tiempo en introducir cambios que en escribir cdigo. pios conseguiremos reducir los tiempos de desarrollo, costes de mantenimiento, aumentaremos la calidad final del producto y crearemos una interfaz que nos asegurar muchas visitas. La consecuencia positiva ser la satisfaccin de nuestros clientes. Podramos dar miles de consejos, pero no hay que olvidar: Seguir los principios de usabilidad. Al final e que manda es quien visita nuestra pgina. Tenemos que ser capaces de facilitar al usuario el alcance de sus objetivos con un mnimo esfuerzo y unos resultados mximos. Debemos evitar el trato hostil al usuario. Si se produce un error, tenemos que proporcionar opciones o soluciones, y no un simple mensaje o pgina con el error. Limitemos las acciones de nuestra pgina al objetivo de la misma. Si un usuario entra en una web y no sabe por dnde empezar a leer, es que est sobrecargada de informacin. Nuestra web debe proporcionar informacin de lo que suceda en las acciones (feedback), contribuye a la comprensin de las funcionalidades de la pgina web. Conviene emplear tcnicas como las de enfoque "persona" y creacin de "escenarios" (www.ainda.info/persona _escenarios.html) a la hora de disear la estructura de nuestra web: - El enfoque "persona". Consiste ni ms ni menos que en restringir los perfiles de nuestros posibles usuarios. Cuando decidimos crear una pgina web, normalmente no se hace con propsitos generales y para todo el mundo, sino que establecemos un posible universo de trabajo. Si intentamos cubrir las necesidades de todos los usuarios estamos cometiendo un error. - "Escenarios". Despus de definir nuestro universo de usuarios, tenemos que marcar los objetivos de nuestros visitantes para poder establecer el entorno de trabajo. La nica forma de definir un escenario es mediante entrevistas u
Herramientas como Flash permiten resultados conjugables de tecnologa, usabilidad y grficos multimedia sofisticados.
Hemos hablado de principios, no de normas rgidas o reglas, que seran imposibles de cumplir dada la diversificacin de plataformas en las que se visualizara una web. Bruce Tognazzini, perteneciente a Nielsen Norman Group (Jakob Nielsen y Donald A. Norman, www.nngroup. com), es un experto en HCI. En su pgina web (www.asktog.com/tog.html) explica los principios que son necesarios pa-
Aprendizaje: es necesario crear interfaces que no impliquen un largo proceso de aprendizaje. Valores por defecto: de este modo se obtendr una interfaz ms gil. Metforas: deben existir similitud entre las funciones de la interfaz y los objetos de la vida real, evitando los tecnicismos. Por ejemplo, si una aplicacin tiene aspecto de talonario, a nadie se le ocurrira pensar que es para dibu-
Si es tu trabajo profesional, siempre puedes contar con algn diseador experimentado que te aconseje en los puntos clave.
Otra de las mejores pginas sobre usabilidad es www.useit.com de Jacob Nielsen, cofundador de N. Nielsen Group.
Despus de todo lo comentado, es ms fcil deducir qu es lo apropiado o inapropiado en una interfaz. La cantidad de errores que se comenten en el diseo web es mayor que las recomendaciones que se pueden dar. Jacob Nielsen (www.useit.com) experto en usabilidad, realiza estadsticas anuales desde 1996 para informar de los 10 errores ms frecuentes en el diseo web. Lo ms preocupante es que desde 1996 a 1999 se siguen cometiendo los mismos fallos. Esta web recibe ms de 17.000 visitas mensuales, lo que indica la importancia y preocupacin por crear una interfaz correcta.
Qu debemos hacer
La inmediatez de crear una web puede hacernos caer en la tentacin de pasar por alto los planteamientos que expondremos aqu, pero es tan importante y tiene tanto peso la usabilidad? Aunque sea para uso propio, no est mal que empleemos algn tiempo en estas cuestiones. Pensar y planificar ahorrar muchos quebraderos de cabeza, incluso rehacer todo el trabajo.
ra disear e implementar interfaces con xito. Aqu estn resumidos: Anticipacin: debemos anticiparnos a las necesidades del usuario. Evita la navegacin intil. Autonoma: los usuarios tienen que sentir la familiaridad con el sitio web de forma que lo vean como un sitio finito y controlable. Colores: hay que tener en cuenta la accesibilidad de un buen porcentaje de usuarios con problemas de distincin de colores (hemos dedicado toda una entrega a los colores). Consistencia: las aplicaciones deben ser fciles de comprender, de este modo se evitan reacciones insospechadas de la interfaz. Ley de Fitts: indica que el tiempo para alcanzar un objetivo mediante el ratn depende de la distancia y tamao del objetivo (clicks de ratn para llegar a un punto o para realizar una tarea y ste debe ser mnimo). Reversibilidad: una pgina web debe permitir anular las acciones que se realicen. Reduccin del tiempo de latencia: en lo posible, evitar tiempos de espera al usuario diseando pginas ligeras.
jar. Conocido por todos es la metfora de la papelera de reciclaje: nadie pondra una canasta de baloncesto como icono para acciones de eliminacin. Eficiencia: las pginas web deben ser productivas para el usuario, no slo para la propia web. Proteccin del trabajo: debemos asegurar que los usuarios no pierdan el trabajo por un error. Legibilidad: al proporcionar contrastes en la interfaz, se facilita su uso. Si llevamos a la prctica estos princi-
En
www.asktog.com puedes ver consejos a seguir para disear una pgina web.
N 90
55
Curso
observando el trabajo que realizan los usuarios a los que vamos a dar servicio. La tipografa puede estar perfectamente limitada a la que te ofrece el sistema. HTML tiene suficientes recursos para disear una web sofisticada, aprovchalos. Usa pginas de tamao fijo. Evita que la pgina de inicio sea para usuarios registraDel amarillo al rojo, indica que se dedica ms atencin. Ms dos o que cuesamarillo = menos atencin, ms rojo = ms atencin. La te dinero acceflecha indica el orden de lectura. der a ella. Simplemente, hay que tener un poco ciones (algunos expertos indican como mximo siete). Si son mens de coherencia. El usuario no va a valorar desplegables, lo aconsejable es que si nuestra web est a la ltima, valorar no se cierren si el usuario no quiere. que tenga la funcionalidad que espera. Ruptura de continuidad dentro de una web: operaciones que obliguen al usuario a desviar su atencin (descargar plug-ins, vdeos, actualizaciones, etc.) reducen la velocidad de conexin. Pginas con errores: enlaces rotos, pginas caducadas o trasladadas, bsquedas que no ofrecen resultados, sesiones expiradas. Lo ms seguro es que nuestro visitante se marche a otra de las cientos de webs que le ofrecen la misma informacin. Errores de cdigo: otro de los problemas que no debemos dejar pasar en una web. Uso de direcciones complejas: sobre todo cuando quieres aconsejar una pgina a un amigo.
Qu hacer en la interfaz
Despus de un chequeo general de la web, el usuario pasar al siguiente punto en el orden de lectura que se muestra en la imagen de la derecha. Los usuarios terminan gravitando por la pgina en busca de hipervnculos, que es donde se centra la atencin. Qu hacer para que nuestra interfaz tenga criterios de usabilidad? Veamos: Los formularios han de ser simples y a ser posible con pocos campos. Debemos tener muy claro para qu solicitamos la informacin y agrupar los datos que se van a validar. Evita que la informacin est muy fragmentada. El error tpico de la direccin fragmentada (segn para que uso): tipo de calle, calle, nmero, escalera, piso, puerta. A veces es mejor un solo campo. Cuando usemos combos deberan ser de seleccin nica. Algunos autores no los recomiendan, pero todo en esta vida es relativo. Por defecto es aconsejable utilizar los enlaces y botones del sistema. Ser ms intuitivo y el usuario los reconocer. Los botones de la interfaz han de tener un tamao proporcionado. Sus formas tambin influyen: es ms fcil hacer click en un botn cuadrado que en uno redondo. En los enlaces de texto, hay que indicar claramente el destino mediante la etiqueta TITLE. Es recomendable al 100% acogernos a los 216 colores estndar del siste-
Las normas son flexibles , puedes permitirte ciertos lujos para hacer tu web ms vistosa o con ciertos efectos que la hagan atractiva.
Qu errores no hay que cometer
Lo primero: el tiempo es muy importante para todos nosotros, y lo fundamental en Internet es ahorrar tiempo (sobre todo porque el coste de las comunicaciones en Espaa sigue siendo caro). Debemos tener en cuenta: Uso de marcos: en determinados navegadores no funcionan bien. Impiden conocer la estructura de la web, imprimir la pgina correctamente y guardarla en el disco duro (depende del navegador).
Los botones han de tener formas, colores y estar delimitados, para as ayudar al usuario.
Conviene evitar el uso de mens con rollover, son ms cmodos los que se abren al hacer click. Reduce el peso de tus pginas adaptndolas lo ms posible al cdigo HTML. Divide la informacin en ms pginas y no intentes aglutinar todo en una. No abuses de los grficos. Si tu web no est enfocada a este fin, sera conveniente reducirlos a un logotipo. Esto puede parecer contradictorio cuando lo que se ve en Internet est lleno de imgenes, sonido, etc., pero es necesario pensar en el usuario. Aqu incluyo los banners, slo el 25% de los usuarios recuerdan el El enfoque persona nos ayudar a adaptar el diseo al banner visto en tipo de visitantes que vamos a tener. su ltima visita. Si los usamos, en lo posible evitarema que se visualizarn de la misma mos los de autopromocin. Han de forma en cualquier navegador (colocumplir su funcin claramente anres seguros). tes de entrar en florituras. Cuando se usan las hojas de estilo (CSS), es mejor especificar los tama- Si incluyes vdeo en tu web, procura que el formato sea siempre os de las fuentes en porcentaje y no comprimido, de imgenes homoen cifras absolutas. gneas y de corta duracin. No abu No es aconsejable quitar los subrases del color; entre menos colores, yados de los enlaces. ms se comprime. Los mens han de incluir pocas op-
Texto parpadeante: resta importancia visual al resto de los elementos de la pgina. Textos deslizantes (efecto marquesina): la lectura de un texto que se desplaza es incmoda y limita la atencin sobre la pgina. Combinaciones ilegibles de texto y fondo. Animaciones cclicas intiles: retrasan la visualizacin de la pgina y distraen la atencin del usuario.
Algo de lo que no gozan muchas de las webs que podemos encontrar en la Red: la posibilidad de elegir entre varios idiomas de visualizacin.
56
www.pctoday.es
Diseo web. Parte 4

Estudio rpido de una web
Hay muchos ejemplos con los que Hay demasiados espacios vacos podemos ilustrar cules son pgien la web, y en el conjunto genenas buenas y cules malas. Aqu ral pesan. El tiempo empleado reseamos una, que por sus caracpor 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 Police (en Ohio), members.aol.com/ supera los 15 segundos. NRPolice/nrpdhomepage.html. Cuando se produce un error, se Sin hacer un repaso exhaustivo hace imposible volver a cargar la vemos lo siguiente: pgina. El fondo utilizado dificulta la visibilidad de los textos empleados. Faltan demasiadas imgenes que el explorador ha sustituido por el icono de imagen no localizada. No hay una distribucin de la informacin que permita en un solo vistazo saber qu contiene la pgiUna web que incumple bastantes criterios de na y su objetivo. usabilidad. El texto en marquesina que aparece debajo del ttulo Despus de utilizar un validador de la pgina no aporta nada. de HTML La fotografa utilizada como pre(www.htmlhelp.com/tools/validator) que nos permite introducir una sentacin es oscura. URL para validarla, se obtuvieron Toda la web es una nica pgina, ms de 68 errores (el mximo totalmente continua, que obliga a permitido por la herramienta de desplazarse por toda ella en bschequeo online). queda de mens que orienten al Podramos continuar, pero lo ms usuario sobre la localizacin de sencillo es que juzgues por ti mismo alguna informacin. sin entrar en detalle. s Muchos enlaces estn rotos.
Estos errores pueden provocar la huida automtica de nuestro visitante.
Textos intermitentes. Banners pesados. Elementos de apariencia publicitaria: la "ceguera a los banners" (www.ainda.info/ceguera_banners.htm) hace que muchos usuarios ignoren contenidos de la pgina. Cambios de resolucin del monitor: nadie cambia la resolucin del monitor por una pgina. Logotipos: deben tener una resolucin y peso adecuados incluso para las conexiones ms lentas.
ma, sin conocer unos datos base exactos, podemos llegar a un resultado final y detectar hasta un 42% de problemas de diseo graves y un 32% de problemas menores. Es el mtodo de menor coste y como mnimo se emplean tres evaluadores (segn Nielsen de tres a cinco evaluadores es suficiente). El trabajo de estos expertos en usabilidad se centra en la interpretacin de las acciones realizadas por los usuarios y su propia navegacin por el sitio web
Antes de arriesgarte, cuenta con las opiniones y consejos de alguien experimentado en estos temas.
(cada experto trabaja por separado). Analizan pgina por pgina siguiendo una lista de criterios y redactan un informe posterior que ponen en comn. Los diez criterios ms conocidos son: 1. Visibilidad del estado del sistema. 2. Emparejamiento entre el sistema y Cmo saber si una el mundo real. 3. Control y libertad del usuario. web es usable Todos los consejos ofrecidos para se- 4. Consistencia y estndares. guir unas pautas de usabilidad son 5. Prevencin de errores. buenos, pero tambin hay que saber 6. Reconocimiento sobre recuerdo. discernir si una web es usable o no. 7. Flexibilidad y eficiencia de uso. Hay diversos mtodos que se pueden 8. Esttica y diseo minimalista. utilizar, no slo la coherencia. 9. Ayudar a reconocer, diagnosticar y Evaluacin heurstica por exsolucionar errores. pertos (tambin denominada por 10. Ayuda y documentacin. Existe tambin una evaluacin automtica que se realiza con herramientas de validacin, pero que la mayora de las veces no incluye criterios de usabilidad. No obstante permite ahorrar trabajo posterior. Aqu tienes un enlace donde podrs encontrar muchas de estas herramienHay sitios web que nos permiten medir la velocidad de tas: www.desarrollo nuestra conexin. Por ejemplo testacceso.es.tdatacenter.com web.com/directorio/ /informacion.html. programacion/html/ criterios): consiste en utilizar prue- validadores_html. bas, exmenes o aproximaciones pa- Test con grupos de usuarios: ra llegar a una solucin. De esta foreste tipo de pruebas son caras, con La apertura automtica (Popups)de nuevas ventanas en el navegador disgusta a los usuarios. Basar la interfaz slo en su aspecto esttico, complacencia de la marca o estructura empresarial.
sumen mucho tiempo y gran cantipaso a paso, aunque sin mostrarlos dad de recursos. Una empresa tarda de forma abierta a los usuarios fien decidirse a realizar estos tests, nales, slo para los desarrolladopero es peor enfrentarse a la factura res. Se utilizan los escenarios estaque nos pueden hacer pasar los usuarios. Este tipo de evaluaciones es complejo, ya que implica ms preparacin, tiempo de realizacin y anlisis, pero proporciona mucha informacin. Uno de los mayores expertos mundiales en el estudio de En este tipo IPO/HCI es Jakob Nielsen. de pruebas no se da ninguna pauta a los usuablecidos durante el diseo web. Esrios para que exista un comportate tipo de evaluaciones se puede remiento espontneo. Se registran el alizar por un usuario o por un rendimiento y la opinin de los misequipo multidisciplinar (incluyenmos en una reunin final donde se do los desarrolladores y expertos ponen en comn estos datos. en usabilidad). Finalmente, se rea Simulacin cognitiva: consiste liza una puesta en comn de todos en la puesta en prctica de forma los problemas encontrados y plasdetallada de todos los procesos mados en un formulario establecis existentes en un sitio web seguidos do para este fin.
N 90
57
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.
Gua del curso



4. Usabilidad.
5. Accesibilidad.

7. Programacin.
a Real Academia de la Lengua Espaola la define como cualidad de accesible, y accesible es aquello que tiene acceso, de fcil acceso o trato y de fcil comprensin, inteligible. Bajo estas premisas, el mundo real siempre se ha basado en esos trminos de forma literal y siempre que pensamos en algo accesible, nos imaginamos grandes avenidas, mucho aparcamiento y centros comerciales. Los menos nos acordamos de los que van en silla de ruedas, los que tienen ciertas minusvalas y cmo no? de nuestro amigo al que le compramos de vez en cuando un cupn. Todos sabemos y comprendemos las dificultades que entraa pasear por la calle a las personas con discapacidad. Este no va a ser un artculo crtico de la poltica del mundo sin barreras que puede estar haciendo el ministerio de
trabajo y asuntos sociales. Vamos a pensar en ese mundo virtual que, aun siendo el mundo ms maleable y moldeable, sigue estando adaptado mayormente a los que podemos disfrutar de grficos y sonidos impactantes y, ante todo, de informacin. Timothy John Berners-Lee, inventor de la World Wide Web y presidente del W3C (www.w3.org/People/Berners-Lee/) dice: El poder de la Red est en su universalidad. El acceso para todos sin tener en cuenta sus discapacidades es un aspecto esencial.
Deficiencias que limitan el acceso a la Red

Podemos distinguir distintas deficiencias y minusvalas que condicionan el uso de los sistemas informticos: Visuales. Afectan principalmente a los elementos de textos, grficos y uso
52
www.pctoday.es
Diseo web. Parte 5

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

re, cualquier elemento por su diseo (incluso el ms bsico) se convierte en una barrera para algunos discapacitados y, a su vez, en ayuda para otros. En este sentido, muchas empresas apuestan por sus inventos y sustitutos de hardware. En cuanto al software, los expertos en desarrollo deben ponerse las pilas para disear aplicaciones que sean accesibles para todos. Y sobre todo, las administraciones deben hacer polticas de dos estos problemas y que en sus herramientas finales exista la flexibilidad y la configuracin propia para cada caso. Pensamos que la accesibilidad est ligada exclusivamente a personas con minusvalas, pero una interfaz bien diseada en cuanto usabilidad y accesibilidad, mejorar para el usuario tradicional.
Fundacin SIDAR
Una de las pginas ms interesantes en este foro de diseadores, investien castellano que podemos encongadores y colaboradores. trar en Internet es la web de la funLo ms interesante y que siempre se dacin SIDAR Acceso universal. agradece es que el idioma de comuSu principal cometido es dar a cononicacin es el espaol. cer todo lo existente sobre accesibiliSus objetivos principales: dad a la Sociedad de la Informacin y Estimular el diseo accesible principalmente a Internet. Adems de (Diseo para Todos) en la Red y proporcionar informacin sobre legisla presencia de la discapacidad lacin, la fundacin permite la particien Internet. pacin activa en sus actividades, tra Estimular el intercambio de inforbajos, obtencin de recursos, etc. macin e investigacin, en habla En una sociedad mundial en donde hispana, sobre la evolucin de las ms de 175 millones de usuarios estn afectados por alguna discapacidad, existe la necesidad de proporcionarles las mismas oportunidades de acceso a estos serviSeminario Iberoamericano sobre Discapacidad y Accios. 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 cony 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 discapacitados estar bien acogido necesidades especiales. s
Interfaz simple
Aqu proponemos un ejemplo de cdigo HTML de una pgina de noticias:
Los elementos ms cotidianos se convierten en ayuda para unos y en barreras para otros.
N 91
53
Curso
Validacin de una web
Es aconsejable utilizar mtodos de validacin desde el principio del desarrollo de una web. Si detectamos los errores desde el principio, ser ms fcil corregirlos. Algunos de los mtodos de validacin ms importantes son los Ejemplo de una web accesible y con mucha que exponemos aqu: informacin: Ayuntamiento de Pinto accesible.ayto-pinto.es. Utiliza una herramienta de accesibi- Marcos, scripts, hojas de estilo y lidad automtica y una herraapplets no cargados mienta de validacin del navega Utiliza un navegador por voz, lecdor. Asegrate de que las herrator de pantallas (JAWS), software mientas verifican todos los prode magnificacin (MAGic 9.0), blemas de accesibilidad. visualizador pequeo, etc. Verifica la sintaxis del lenguaje de Presta atencin a la ortografa y programacin empleado y las gramtica. Quien utilice un sintehojas de estilo. tizador de voz puede malinterpre Utiliza un navegador slo-texto tar el resultado de la lectura. (por ejemplo Lynx Revisa el documento para obtener http://lynx.browser.org) o un emuclaridad y simplicidad. Si puedes lador. contar con la ayuda de un editor Utiliza distintos navegadores (e experimentado, que revise la claincluso antiguos) con: ridad del texto escrito. - Sonidos y grficos cargados Invita a personas con discapaci- Grficos no cargados dad a revisar el resultado de los - Sonidos no cargados documentos, te proporcionarn - Sin ratn gran ayuda. s
<td width="37%" valign="top" bgcolor="#F4F4F4"> <p>la noticia pero podría romperse al añadir alguna imagen.</p> <p><img src="imagenbuena.gif" w i d t h = " 1 9 2 " height="220"></p></td> </tr> </table> </body> </html> El resultado como interfaz no es muy profesional, pero puede ser una de las miles que nos encontramos en Internet. Si un invidente visita la pgina con un lector de pantalla, la disposicin es bastante escabrosa. Cuando el lector est preparado para leer tablas lo har perfectamente, pero si lo realiza linealmente la interpretacin ser errnea.
La alternativa es intentar hacer pginas lo ms lineales posible. Son ms fciles de disear y cumplen mejor los objetivos de la accesibilidad. Un cdigo ms efectivo sera: <!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitio-
Muchas empresas apuestan por hardware que sustituya a dispositivos de entrada/salida tradicionales.
nal//EN"> <html> <head> <title>Ejemplo de columna</title> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1"> </head> <body> <table width="55%" height="524" border="1"> <tr> <td bgcolor="#CCCCCC"> <h4><font color="#000000">Diario del PC. Líneas del día: 25 de abril del
rio (conocido como DCU). Todo el 2004</font></h4></td> proceso de diseo asume la partici</tr> pacin del usuario y de los expertos en <tr> <td bgcolor="#E2FBFE"> discapacidades. El proceso incluye varios pasos: <h1><font color="#003399">El mejor PC del Definicin de requerimientos. En esta premisa se especifican los mercado</font></h1> objetivos del producto que se va a <h2>Después de desarrollar, las necesidades del años de espera se pone a la usuario medio, el contexto de uso y venta </h2></td> los requerimientos tcnicos para sa</tr> tisfacer estas necesidades. <tr> <td bgcolor="#F4F4F4"> Modelado del usuario. Aunque la definicin de requerimientos se hace <p>Por fin se encuentra en el merpensando en el usuario medio, hay cado el ordenador más soque definir perfiles y as poder satisfafisticado del mundo. No requiere cer las necesidades de todos. Para fateclado, pantalla, ni ratón. cilitar el contexto global de estos gruTodo es configurable a las necesipos de usuarios, se buscan caractersdades del usuario.</p> ticas comunes (informacin, limita<p>Bla, bli, blo......</p> <p>Y en esta parte de la tabla se sigue la noticia pero podría romperse al añadir alguna imagen.</p></td> </tr> <tr> <td bgcolor="#F4F4 F4"><img src="imagenbuena.gif" alt="Imagen del nuevo superordenador" w i d t h = " 1 9 2 " height="220"></td> Por 155 euros podemos obtener un teclado cu</tr> yas letras tienen un tamao cuatro veces ms </table> grande que el normal. </body> ciones, patrones de conducta, etc.). </html> Como en la usabilidad, hay que establecer escenarios para aunar interacEs un ejemplo, pero las barreras que cin-persona. pueden encontrar en las pginas web las personas con discapacidad fsica, vi- Diseo conceptual. Ante la dificultad de satisfacer las necesidades sual, auditiva y cognitiva incluyen: de interaccin de todos los usua Imgenes sin texto alternativo. rios, se buscan alternativas para di Ausencia de texto alternativo en los sear interfaces adaptables dinmipuntos sensibles de mapas de imagen. camente a las necesidades de cada uno. Esto acarrea dificultades tcnicas, ya que habra que detectar si un usuario est accediendo mediante un navegador convencional, navegador de audio, tctil, etc., y adaptar la forma y presentacin de los contenidos conforme se suceden. Uso incorrecto de los elementos estructurales en las pginas. Sonidos no subtitulados o imgenes no descritas. Ausencia de informacin alternativa para usuarios que no pueden acceder a los marcos o a scripts. Tablas difciles de interpretar cuando se alinean (el ejemplo). Sitios con contraste de colores pobre.
Diseo inclusivo
Bajo este trmino subyace una metodologa que se basa en el diseo de aplicaciones centrado en el usuaEl resultado no parece tan brillante, pero es ms funcional para una interfaz hablada.
El formato de la interfaz de este ejemplo podramos encontrarlo en cualquier web de noticias.
54
www.pctoday.es
Diseo web. Parte 5

Si seguimos estas recomendaciones podremos colocar unos logotipos que definen el nivel de adecuacin de la pgina web, y slo tendremos que aadir el cdigo apropiado que suministra la direccin www.w3.org/ WAI/WCAG1-Conformance. Segn los elementos que se vayan a utilizar en el diseo de nuestra interfaz, estos son los criterios que se deben seguir basndonos en el nivel de prioridad de los puntos de verificacin. Exponemos los puntos de verificacin con Prioridad 1 que son los ms importantes. El seguimiento, las recomendaciones y los ejemplos para los puntos de Prioridad 2 y 3 se pueden consultar en la pgina www.w3.org/WAI/wcag-curric/ overchk.htm: Elementos de interfaz en general: - Proporciona un texto equivalente para todos los elementos no textuales. Texto alternativo a imgenes o animaTexto explicativo de una imagen incluida en un objeto <OBJECT data=" paginainicio.gif " type="image/gif" height=100 width=100>Aqu una pequea descripcin o enlace a una pgina explicativa</OBJECT> Texto explicativo para un applet <APPLET code="textoparpadeante. class" width="128" height="32" alt="Applet de Java: texto que parpadea">Si utiliza un explorador con Java habilitado, podra ver un texto parpadeante en lugar de este prrafo</APPLET> Texto para imgenes de efectos de texto <IMG SRC="WAI.gif" ALT="Iniciativa de accesibilidad a la Red"> Uso del elemento NOSCRIPT para describir cualquier cdigo incrustado <SCRIPT type="text/javascript">cdigo de un script que visualiza una tira cmica como consecuencia de un evento...</SCRIPT> < N O S CRIPT>En la primera secuencia, el Estos iconos nos resultarn familiares a partir de ahora. personaje mira ciones <IMG SRC="pagini.gif" ALT="Ico- por una ventana al vaco. En la segunno de acceso a pgina de inicio"> da llega un amigo que le invita al ciTexto explicativo de enlace <A HREF= ne"</NOSCRIPT> "paginainicio.htm"><IMG SRC="pagi- Asegrate de que toda la informacin nainicio.gif" ALT="Enlace a la pgina de transmitida mediante colores tambin inicio"></A> est disponible sin color (por contexPgina de texto explicativo ampliada to o marcadores). <IMG SRC="estadstico.gif" LONG- Identifica claramente los cambios DESC="explica_grfico.htm" ALT="Gr- en el idioma original del texto del dofico estadstico en barras"> cumento y en cualquier texto equivalente
El gran inconveniente del hardware adaptado es el coste: un ratn para tetrapljicos puede salir por 745 euros.
La solucin implica separar contenidos, presentacin y estructura de los elementos. Diferentes usuarios necesitarn diferentes formas de presentacin, pero tambin elementos de interaccin adaptados.
Pautas para crear una web accesible

Todo est muy bien, pero cmo podemos poner en prctica la accesibilidad en nuestro diseo de pginas web? Lo primero que hay que tener claro es que las pautas establecidas por el consorcio W3C/WAI estn pensadas para los desarrolladores de contenido y para los desarrolladores de herramientas. Siguiendo estas recomendaciones, tambin conseguiremos que la web sea ms accesible por otros dispositivos que navegan en Internet (mviles, agendas electrni-
7. Asegura al usuario el control sobre los cambios de los contenidos tempodependientes. 8. Asegura la accesibilidad directa de las interfaces incrustadas. 9. Disea para la independencia del dispositivo. 10. Utiliza soluciones provisionales. 11. Utiliza las tecnologas y pautas W3C. 12. Proporciona informacin de contexto y orientacin. 13. Proporciona mecanismos claros de navegacin. 14. Asegrate de que los documentos son claros y simples. Cada recomendacin incluye uno o dos puntos de verificacin que describen cmo aplicar esa pauta a las caractersticas particulares de las pginas web. A su vez, cada punto de verificacin tiene asignado un nivel de prioridad:
I+D en Espaa
Aunque en Espaa el I+D no se prodiga mucho, podemos jactarnos de que la tecnologa es digna de mencin. Podemos encontrar muchas empresas que apuestan por una sociedad igualitaria mediante sus inventos. El ejemplo que exponemos es la firma Irdata, que dispone de varias soluciones para resolver el trabajo en el ordenador para personas con problemas motrices. Hardware para acceder al ordenador mediante los movimientos de cabeza, software que sustituye los clicks del ratn a travs de una imagen, software de rehabilitacin para personas con
Todos los que nos dedicamos a la Sociedad de la Informacin debemos poner nuestro granito de arena.
cas, exploradores convencionales, WebTV, etc.) o por situaciones que dificulten condiciones de acceso normal (centros de operacin poco iluminados, entornos con mucho ruido, etc.). Hay un error que no hay que cometer: hacer una web accesible, no implica que no sea atractiva. Existen catorce recomendaciones que se aconseja seguir: 1. Ofrece alternativas equivalentes para el contenido visual y sonoro. 2. No te bases slo en el color. 3. Utiliza marcadores y hojas de estilo de forma apropiada. 4. Identifica el idioma empleado. 5. Crea tablas que se transformen correctamente. 6. Asegrate de que las pginas que incorporen nuevas tecnologas se transformen correctamente. Prioridad 1. Puntos de verificacin que el desarrollador tiene que satisfacer. De lo contrario, algunas personas sern incapaces de acceder a la informacin. Prioridad 2. El desarrollador debe satisfacerla; si no, habr personas que encontrarn muchas dificultades para acceder a la informacin. Prioridad 3. El desarrollador puede satisfacerla, de lo contrario algunas personas hallarn dificultades para acceder a la informacin. Para facilitar la referencia por otras organizaciones, la especificacin tiene tres niveles de adecuacin y son: Nivel A: incluye los puntos de verificacin de la prioridad 1. Nivel doble A: incluye las prioridades 1 y 2. Nivel triple A: incluye las prioridades 1, 2 y 3.
Integracin de personas con discapacidades cognitivas y de lenguaje, www.atzegieskuetara.org.
Muchos colectivos necesitan formar parte de la internetizacin.
problemas motrices, etc. En cuanto al software, hay muchas pginas adaptadas, pero en concreto la del proyecto Atzegi, patrocinado por la Diputacin de Guipzcoa y de la Caja Kutxa, es un buen ejemplo de una web diseada para personas con una discapacidad intelectual. Otro proyecto denominado NI4, surge con la finalidad de facilitar a las personas con discapacidad intelectual el acceso a las nuevas tecnologas y al uso de Internet. Para obtener ms informacin, visita la pgina www.ni4.org. s
N 91
55
Curso
right"> </FRAMESET> Applets y scripts: - Asegrate de que las pginas siguen siendo utilizables cuando se desconecten o no se admitan los scripts, applets u otros objetos de programacin. Si esto no es posible, proporciona informacin equivalente en una pgina alternativa accesible. Multimedia: - Hasta que las aplicaciones de usuario puedan leer automticamente el texto equivalente de la banda visual, proporciona una descripcin sonora de la informacin importante de una presentacin multimedia. Los tres formatos o lenguajes que admiten una pista de audio descriptiva son: Quickti Se comprenden mejor los problemas de la pgina, ya que se acta directamente con el diseo. Permite comparar distintas soluciones mediante pruebas reales. Es la nica forma en la que podemos revisar las adecuaciones de textos alternativos, ttulos de marcos, informacin de los grficos, etc. Pero tambin tiene sus problemas: Es un proceso costoso y requiere tiempo. Para las pruebas hay que disponer de los distintos navegadores y sus configuraciones. Exige el juicio personal del revisor, que implica falta de objetividad en algunos aspectos. Las pruebas emulando ciertas caractersticas pueden ser difciles de realizar si no se dispone de hardware especializado o si la formacin del equipo de revisin no es la adecuada. Dentro de la pgina web www.sidar.org/recur/aplica/index.php podemos encontrar toda una serie de recursos dedicados a la accesibilidad: aplicaciones para usuarios de la Red, diseadores y desarrolladores, para traductores, etc. Por citar algn ejemplo de herramienta manual tenemos a Hera, diseada y
Este es el resultado del cdigo descrito con cabeceras de tabla.
(leyendas). Los cdigos de representacin de los idiomas se encuentran en www.oasis-open.org/cover/iso 639a.html. Uso del elemento langMadre, pregunta que a dnde va. Est diciendo,<SPAN lang="fr"> "Allons, Madame plaisante!"</SPAN> - Organiza el documento de forma que pueda leerse sin hojas de estilo. Es decir, si un documento HTML se interpreta sin hoja de estilo asociada, tiene que ser posible leerlo. - Asegrate de que los equivalentes de un contenido dinmico se actualicen cuando cambia. - Hasta que las aplicaciones de usuario permitan controlarlo, evita provocar parpadeo en la pantalla. - Utiliza el lenguaje apropiado ms claro y simple para el contenido de una pgina web. Imagen y mapas de imagen: - Proporciona vnculos de texto redundantes con cada zona activa de un mapa de imagen del servidor. - Proporciona mapas de imagen controlados por el cliente en lugar de por el servidor, excepto donde las zonas sensibles no puedan definirse con una forma geomtrica. Tablas: - En las tablas de datos, identifica las cabeceras de fila y columna: <TABLE border=1> <CAPTION>Ejemplo de una tabla de datos sencilla que identifica cabeceras y filas.</CAPTION> <TR> <TD></TD> <TH>Cabecera de columna 1 </TH> <TH>Cabecera de columna 2
</TH> </TR> <TR> <TH>Cabecera de fila 1</TH> <TD>C1F1</TD> <TD>C1F2</TD> </TR> <TR> <TH>Cabecera de fila 2</TH> <TD>C2F1</TD> <TD>C2F2</TD>
No son tantas normas que permiten que una web sea accesible, ponlas en prctica.
</TR> </TABLE> - Para las tablas de datos que tienen dos o ms niveles lgicos de cabeceras de fila o columna, utiliza marcadores para asociar las celdas de encabezamiento y las celdas de datos. Marcos (frames): - Titula cada marco para facilitar la identificacin y navegacin de los mismos. <FRAMESET ROWS="20%,*,30%"> <FRAME SRC="f1.htm" title="Marco de ttulo y barra principal de navegacin"> <FRAMESET COLS="20%,*,"> <FRAME SRC="f2.htm" title="Marco con la tabla de contenidos "> <FRAME SRC="f3.htm" title="Marco con la vista de contenidos"> </FRAMESET> <FRAME SRC="f4.htm" title="Marco secundario de navegacin y copy-
TAW es una herramienta de verificacin online de accesibilidad en castellano. Lo puedes encontrar en www.tawdis.net.
me de Apple, SMIL de W3C y SAMI de Microsoft (ms informacin en w w w. w 3 . o r g / WA I / w c a g - c u r r i c / mmsoftwr.htm). - Para toda presentacin multimedia dependiente del tiempo (pelcula o animacin), sincroniza alternativas equivalentes (subttulos o descripciones) con la presentacin. Si no hay alternativas: - Si finalmente no puedes Herramienta de creacin de hojas de estilo Edipo, crear una pgina accesible, www.sidar.org/edipo/selector.php. ser necesario proporcionar un vnculo a otra pgina al- desarrollada por Carlos Benavdez en ternativa que use tecnologas W3C, colaboracin con Emmanuelle Gutisea accesible, tenga informacin rrez y Restrepo, especialmente para la equivalente (o funcional) y se actuali- Fundacin Sidar. El nombre de la hece tan a menudo como la pgina (ori- rramienta viene como consecuencia del lanzamiento de Edipo (Editor Personal ginal) inaccesible. de Opciones de estilo), para la creacin Evaluar la accesibilidad de hojas de estilo personales. La utilidad La mejor forma de verificar la ac- consta de una pgina con opciones y cesibilidad de una pgina web es si- otra con el resultado visual de las mismular como lo hara un discapacita- mas. Una vez elegidas las opciones y podo. Podemos utilizar navegadores al- sibilidades de nuestra hoja de estilo, se ternativos o programas que simulen puede ver el cdigo, copiarlo y pegarlo en cualquier editor de texto, o descarsu funcionamiento. 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 esticomprobaciones no implica que una lo para facilitar la revisin de la accesibiweb sea accesible. Dentro de la web lidad de un sitio web. El nombre mitolwww.tawdis.net hay diversas herramien- gico es un acrnimo de Hojas de Estilo para la Revisin de la Accesibilitas de verificacin online. 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. La ventaja de utilizar las hojas de essultados es compleja y exige conocer los tilo es que facilita la revisin de la acprincipios bsicos de accesibilidad. Si optamos por una revisin manual, cesibilidad y usabilidad de una web durante su desarrollo. veremos ventajas sobre la automtica:
56
www.pctoday.es
Diseo web. Parte 5

Hay una particularidad para el uso eficaz de Hera: se aconseja el uso del navegador Opera (www.opera.com), ya que es el nico que interpreta adecuadamente algunas propiedades de la especificacin CSS. De cualquier manera, siempre hay una serie de principios e instrucciones para configurar cualquier navegador para usarlas correctamente. En la Fundacin Sidar se dan las claves para parametrizar los navegadores ms utilizados: Internet Explorer,
Polticas de accesibilidad
Partimos de la base que para reducir normas de accesibilidad. dad a Internet mediante cinco reas las barreras se requiere de la partiEn 1998, la Seccin 508 de la de trabajo esenciales: tecnologa, cipacin de los afectados y de los Rehabilitation Act Amendments directrices, herramientas, formacin y organismos gubernamentales. Las requiere que todas las agencias fededifusin, e investigacin y desarrollo. administraciones tienen la obligacin rales de Estados Unidos obliguen y La Seccin 508 es una extensin y/o de fomentar la accesibilidad universal aseguren que las tecnologas de la modificacin de las Directrices de para asegurar la igualdad de condicio- informacin empleadas sean accesiAccesibilidad del W3C, por lo tanto las nes en el acceso a la diferencias son mnimas. 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 plaSin embargo en los panes de accin el eses desarrollados, la Accessibility, cuyo fin es poltica gubernamental conseguir que todos los ciuse ha orientado hacia la dadanos disfruten de la desregulacin de las Sociedad de la Informacin. telecomunicaciones con Entre sus objetivos se el objetivo de incremenencuentran 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, aundisponibilidad de los servicios y redubles 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 premiEn 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 protegidos por la Americans with adquiridos por la Administracin han de formar parte de los Estados Disabilities Act (ADA) de 1990, que de cumplir con estas normas y, por lo Miembros y de tener un presupuesto prohbe la discriminacin por discapa- tanto, obliga a las empresas proveededicado a accesibilidad y alfabetizacidad en los lugares pblicos y obliga doras a seguir estos criterios de acce- cin digital (plan Info XXI www.ceoe.es/webceoe/ceoe/cesi/p6_1 a la adaptacin de stos para asegusibilidad. Desde el 25 de junio de rar su accesibilidad. La aplicacin de 2001, exige que los sitios web mante- .htm), se ha demostrado por estudios de consultoras dedicadas al anlisis esta ley en Internet se hizo en 1996, nidos por organismos federales y sus de la accesibilidad que la gran mayocuando el Departamento de Justicia intranets estn en conformidad con ra de las pginas web de las admide Estados Unidos dictamin que las normas establecidas. nistraciones pblicas espaolas no cualquier sitio web se considera como El grupo de iniciativa de accesibilidad son accesibles. s local pblico y debe cumplir ciertas del W3C (WAI) persigue la accesibili-
Bobby permite seleccionar dentro de una gran lista de navegadores y sus versiones, bobby.watchfire.com/bobby/ html/en/advanced.jsp.
Nestcape, Mozilla, Opera, Amaya, www.sidar.org/recur/usuar/nav/config. Otra herramienta de revisin de accesibilidad que podemos utilizar va online es Bobby, bobby.watchfire.com/bobby/ html/en/index.jsp, que nos permite elegir la revisin a realizar: la Seccin 508 americana o las recomendaciones de la WAI. Ya hemos dicho al principio que prcticamente son similares en las exigencias de diseo. Hemos hecho la prueba de un conocido portal como es Terra y el resultado ha sido bastante demostrativo. Slo en la
que el sitio web es inaccesible para personas con discapacidades: 122 imgenes que no proporcionan texto alternativo (Prioridad 1), ms de 164 lneas utilizan en el cdigo colores para dar informa-
Es importante recordar que no siempre la imagen vale ms que mil palabras.

pgina de inicio se producen suficientes incumplimientos de las recomendaciones de accesibilidad, como para decir cin que no tienen alternativa de texto, 23 lneas de cdigo que no especifican cabeceras para las tablas existentes, y un largo etctera. Slo tienes que probar los resultados por ti mismo con la web que ms te guste. Mediante la herramienta Taw (www.taw dis.net) de revisin online el resultado de verificacin es ms sorprendente, ya que encuentra ms fallos Herramienta de verificacin de accesibilidad a travs de las de accesibilidad que Bobby: hojas de estilo Hera, www.sidar.org/hera.
[WAI] Un desarrollador de contenidos de pginas Web tiene que satisfacer este punto de verificacin. De otra forma, uno o ms grupos de usuarios encontrarn imposible acceder a la informacin del documento. Satisfaciendo este punto de verificacin es un requerimiento bsico para que algunos grupos puedan usar estos documentos Web . Se han encontrado 124 proble- El navegador Opera permite visualizar las pginas mas de tipo automtico y sin imagen, slo con el texto alternativo. [WAI] Problemas accesibilidad 248 de tipo manual. de tipo 3. Un desarrollador de [WAI] Problemas accesibilidad contenidos de pginas Web puede de tipo 2. Un desarrollador de consatisfacer este punto de verificatenidos de pginas Web debera sacin. De otra forma, uno o ms tisfacer este punto de verificacin. grupos de usuarios encontrarn alDe otra forma, uno o ms grupos enguna dificultad para acceder a la contrarn dificultades en el acceso a informacin del documento. Satisla informacin del documento. Satisfaciendo este punto de verificacin faciendo este punto de verificacin mejorar la accesibilidad de los doeliminar importantes barreras de cumentos Web. Se han encontrado acceso a los documentos Web. Se 35 problemas de tipo automtico y han encontrado 35 problemas de ti69 de tipo manual. s po automtico y 69 de tipo manual.
N 91
57
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.
Gua del curso



4. Usabilidad.
5. Accesibilidad.

7. Programacin.
a mayora de los usuarios de Internet poseemos un equipo multimedia con una razonable tarjeta de sonido, vdeo y conexin a la Red, condiciones indispensables para poder disfrutar de la informacin difundida en la Red. Los profesionales intentan que sus pginas web sean cada vez ms sofisticadas, llenas de color, de sonido y de todo aquello que las hagan atractivas a sus potenciales clientes. Cada vez ms se hace necesario (o recomendable) que los diseadores dispongan tambin de conocimientos acerca del sonido y sus propiedades para adaptarlos a las limitaciones que an existen en Internet. Evidentemente, si disponemos de la suficiente capacidad econmica, podremos llegar a incluir sistemas que transmitan desde nuestra pgina web
msica en tiempo casi real y, si nos ponemos, ver mediante una webcam la orquesta que lo interpreta. Habrs odo hablar de la superproduccin de cine El Seor de los Anillos. No queremos ocupar un artculo hablando de la triloga, sino de la capacidad que pueden proporcionar los medios tecnolgicos. Mientras su director Peter Jackson se encontraba en Nueva Zelanda, rodando, por las tardes poda repasar la banda sonora en tiempo real con su compositor Howard Shore. La particularidad es que el director de orquesta se encontraba a unos miles de kilmetros, en Inglaterra y la conexin se realizaba mediante satlite y fibra ptica. Para el usuario medio, una conexin de Internet puede realizarse, incluso, mediante un mdem de 56 Kbps y, por lo tanto, la capacidad es incomparable.
54
www.pctoday.es
Diseo web. Parte 6

Dadas las caractersticas de Internet, surge la necesidad de estudiar tcnicas que permitan reducir los costes de transmisin o almacenaje de grficos y sonidos sin prdida de calidad. El primer proceso que se requiere, es la conversin a formato digital. Con el audio tenemos otra posibilidad: que viajen los datos como un archivo de comandos y que la tarjeta de sonido de nuestro cliente los interprete. Por si queda alguna duda, la representacin analgica del sonido se produce como consecuencia de las variaciones de la seal elctrica del reproductor. El caso ms representativo es el disco de vinilo, cuyos surcos hacen que se desplace una aguja; estas vibraciones se convierten en una seal elctrica que oscila en tensin. Esta oscilacin es la que transractersticas ocupar menos que el original y lo oiremos igual. Compresin de vdeo psicovisual: similar al sonido, en este modelo se descartan los datos que los ojos no necesitan. Si en una pelcula aparece un coche aparcado durante un minuto, el coche se repite en la misma posicin en cada fotograma. Con la compresin de vdeo psicovisual, los datos del coche de un fotograma se almacenan y se vuelven a utilizar en los fotogramas siguientes (redundancia de datos estadsticos). Es uno de los trucos matemticos que utilizan WMV, MPEG y otros formatos. Compresin sin prdida de datos: esta tcnica conserva el 100 por 100 de los datos, es decir, si
En el Panel de control>Dispositivos de sonido>Hardware, seleccionamos Codecs de audio para poder ver los codecs que se encuentran instalados.
vdeo una y otra vez sin perder calidad, la compresin slo concentra los datos en menos espacio. Slo
El xito de algunas pginas web reside en la riqueza de los grficos y sonidos que muestran a los usuarios.
aplicamos el algoritmo de descompresin el archivo ser exactamente idntico al original. Puede guardar puede comprimir los datos hasta que no le quede ms remedio que desechar informacin.
Compresin con prdida: este tipo de tcnicas desecha datos para obtener una cantidad de bits inferior. La compresin psicoacstica y la psicovisual son tecnologas con prdidas que consiguen archivos ms pequeos, pero con menos datos que los archivos originales. Cada vez que se guarda un archivo de esta forma, se desechan ms datos, aunque sea con el mismo formato. Como regla, se debe utilizar un formato con prdidas slo como paso final del trabajo que se realiza.
Conceptos bsicos de sonido

Una representacin muy bsica de lo que sera una conversin de sistema analgico a digital.
forma el amplificador de nuestro equipo en sonido a travs de los altavoces. En el apartado digital, el sonido se representa por una cuantizacin y el muestreo de una seal analgica (en los conversores analgico/digitales) en cifras que dividen la seal en funcin del tiempo y la resolucin. Un CD lleva directamente grabados estos datos, por lo que simplemente se necesita un reproductor que convierta esa seal digital en oscilaciones de tensin, para que a travs de los altavoces salga sonido (el mismo proceso de un conversor digital/analgico). Todos los inventores de nuevos formatos ofrecen cdecs (codificadoresdecodificadores) que permiten a nuestros reproductores interpretar los archivos de audio codificados. Otros suministran una utilidad propietaria que se encarga de reproducirlos. Hay muchos mtodos y estrategias para comprimir los archivos multimedia hasta un tamao prctico. Los ms comunes: Compresin de sonido psicoacstica: todas las formas de sonido comprimido utilizan algoritmos para desechar la informacin sonora que el cerebro ignora. A efectos prcticos, un archivo de estas ca-
Para poder comprender Intensidad: es una magciertas tcnicas de sonido nitud directamente relaempleadas en Internet, es cionada con nuestro odo necesario conocer algunos y se define como la conceptos de acstica. energa de la onda sonoEl sonido se produce cuanra por unidad de superfido una fuente sonora (por cie: se mide en decibeejemplo, la cuerda de un lios (dB). Esta es la piano) vibra. Esta vibracin caracterstica que nos produce un movimiento de hace determinar un sonivaivn que obliga a las do dbil o uno fuerte. molculas del aire a moverNuestro odo abarca, se de la misma manera. segn estudios estadstiComo consecuencia, se cos, de 0 a 130 dB. producen unas zonas de Podemos establecer una Herramienta para analizar todos los elementos que forcompresin y de depresin man un sonido, www.iua.upf.es/mtg/clam. lista, segn la intensidad de que a su vez empujan a la fuente sonora: otras molculas contiguas y as suce- Perodo: es el tiempo que transcurre 120 Umbral del dolor. sivamente. Es similar al efecto que en un ciclo, y se expresa en segundos 90 Martillo neumtico. se genera cuando se tira una piedra o milisegundos (1.000 ms = 1 s). 75 Fbrica ruidosa. en un estanque, con la diferencia de Frecuencia: es el nmero de veces 70 Calle con mucho trfico. que las ondas son esfricas. que se repite un ciclo por segundo, 65 Conversacin a un metro. La propagacin del sonido se realiza y se expresa en herzios (Hz) o 40 Radio ligeramente alta. a una velocidad constante cercana a ciclos por segundo. Un odo normal 30 Casa en el campo. los 340 metros por segundo y en puede percibir un rango entre 20 y 15 Susurro. lnea recta. Si encuentran obstculos 20.000 Hz, disminuyendo hasta 0 Umbral de audicin. en su camino, unas ondas se absor16.000 con el paso de los aos y El perodo es inverso a la frecuencia. Por ben y otras se reflejan, llegando al por el maltrato acstico. ejemplo,un sonido de 0,004 segundos oyente mezcladas. Cuando escuchamos sonidos grade duracin, hay que repetirlo 250 La vibracin ms simple tiene forma ves o agudos es lo que se denomiveces para completar 1s, es decir, su senoidal y, como consecuencia, produna altura tonal. frecuencia es de 250 Hz. ce un sonido puro. Cuando se repite Amplitud: es la variacin de la preTrasladando esta teora a la msica, la esa onda, se denomina peridica y sin, positiva o negativa, de la onda nota la utilizada para afinar instrucada repeticin, ciclo. sonora. Est relacionada con nuestra mentos musicales tiene una frecuencia Los elementos que la forman son: sensacin dinmica del sonido. de 440 Hz. s
N 92
55
Curso
cin de 16 bits. Si quieres digitalizar 3 minutos de msica a un muestreo de 44,1 KHz y a 16 bits de resolucin, ocupar 3min x 60 s/min x 44.100 muestras/s x 2 bytes/muestra (estreo)= 15.876.000 bytes (unos 16 Mb). AIFF (Audio Interface File Format). Este formato introducido por las empresas Apple y Sun Microsystems tiene una versin comprimida denominada AIFC. Ambos tipos pueden contener informacin MIDI de hasta 6 canales. Para los que tengan ordenadores Mac de Apple, el software gratuito que genera este formato est disponible en la web sun.rediris.es/software/mac/soun/ soundutil/sampleeditor1.03.cpt.hqx.gz. (Sample Editor). cada seccin de transmisin. Para cada muestra se utilizan 8 bits de resolucin a una velocidad de 64 Kb/s, teniendo en cuenta una frecuencia de muestreo de 8 KHz. ADPCM (Adaptative Diferencial PCM): posterior al anterior, permite codificar canales telefnicos con velocidades de 16, 24 y 32 Kb/s; aplicados como enlace entre satlites.
Compresin de audio sin prdida

Son los formatos de audio denominados lossless, que reducen los tamaos de los archivos y permiten que la decodificacin sea idntica al original. Al ser formatos especficos de audio, su compresin es ms efectiva que la utilizada en los compresores de tipo ZIP.
Dentro del cdigo abierto tenemos Audacity, edicin de Wav y otros formatos.
audacity.sourceforge.net, software de
Audio no comprimido
RIFF, ms conocido como WAV (WAVE, Waveform Audio). Es el formato desarrollado por Microsoft y empleado de forma generalizada en su sistema operativo Windows, de ah su amplia difusin. En los programas de codificacin se puede definir la frecuencia de muestreo (Hz) y el nmero de bits por muestra. Cuanta mayor sea la calidad del sonido, ms grande ser el archivo. Cuatro segundos en calidad Compact Disc (44,1 KHz) con
16 bits de resolucin estreo ocupan 775 Kb. El mismo archivo a 22 KHz, 8 bits y en mono ocupan 140 Kb (calidad radio FM). Al aplicar cdecs podemos reducirlo aun ms, pero el resultado va perdiendo calidad. La resolucin hace referencia a la exactitud de las medidas de frecuencia, y se mide en bits. Si la resolucin es de 8 bits, tenemos 255 niveles posibles (2^8=256). Si se ampla a 16 bits, el rango se extiende a 65.535 (2^16=65.536). Es decir, un CD se graba a 44,1 KHz. y a una resolu-
El derroche de imaginacin ya no est tan reido con el coste y prestaciones de nuestra conexin a la Red.
PCM (Pulse Code Modulation): formato de audio creado para telefona y patentado por A.Reeves en 1939. K.Cattermole en 1962 propuso la ley A de codificacin para PCM. Su aplicacin comercial era integrarlo en una red mixta de transmisin digital y centros analgicos de conmutacin. Requera de conversores analgico-digital y digital-analgico en Cada formato tiene sus algoritmos de trabajo para conseguir esa compresin. Aqu exponemos la lista de los formatos ms conocidos y los sitios donde se puede obtener informacin acerca de su funcionamiento. Explicar los algoritmos de cada uno
Extraer pistas de un CD a otros formatos de audio

Vamos a explicar paso por paso cmo utilizar una aplicacin gratuita que nos sirva de reproductor y que adems nos permita extraer el audio de un CD en formato WAV o MP3. El reproductor se llama CDex y su versin 1.51 est disponible en la web cdexos.sourceforge.net. Despus de instalarlo, la pantalla inicial es la tpica de un reproductor de archivos multimedia con sus iconos de avance y retroceso de cancin, reproduccin, pausa, etc. Lo primero que hay que comprobar es que la aplicaratn podemos marcar/desmarcar las pistas, o con Mays y el ratn seleccionarlas todas (en la opcin predeterminada se marcan todas). Seleccionamos el tipo de extraccin con los iconos que se encuentran a la derecha de la interfaz. De arriba abajo: CD a formato WAV, CD a formato comprimido, Extraer un fragmento de CD, WAV a formato comprimido,
Winamp, www.winamp.com, es un reproductor gratuito que permite grabar nuestros archivos de sonido.
cin aparezca en espaol mediante Options>Select Language>Spanish. Mediante F4 accedemos a la configuracin avanzada. Todas las pestaas son importantes, pero vamos a
detenernos en Codificador. Aqu podemos determinar el tipo de archivo comprimido al que queremos convertir las pistas del CD. La lista es bastante amplia y abarca la mayora de los formatos mencionados, tanto de compresin con prdida como sin prdida. Los iconos de la derecha de la interfaz nos permiten realizar conversiones entre formatos. Evidentemente, la extraccin al formato comprimido ser sobre el tipo de archivo configurado en F4>Codificador. Ahora seleccionamos las pistas que queremos extraer. Con Control y el
Formato comprimido a WAV, Leer informacin del CD en una Base de Datos remota (si se consultan los diversos servidores de Internet pueden obtenerse datos del artista, lbum, etc. del CD) y Configuracin. Y ya est, lo nico que falta es probar distintas configuraciones hasta dar con la que ms nos agrade. s
podra suponer un libro completo. APE. Es el nuevo formato de la casa Monkey: www.monkeysaudio.com/ theory.html. FLAC. Free Lossless Audio Codec, forma parte del formato Ogg de dominio pblico y es similar al MP3: flac.sourceforge.net. LA. Lossless Audio: www.losslessaudio.com. LPAC. Linear Prediction Audio Codec, es el predecesor del nuevo formato MPEG4 Audio Lossless Coding (ALS): www.nue.tu-berlin.de/wer/ liebchen/lpac.html. MAC. Se trata del antiguo formato de Monkey. MLP. Meridian Lossless Packaging, utilizado sobre DVD-A y de tecnologa
56
www.pctoday.es
Diseo web. Parte 6

ma dentro de lorien.die.upm.es/indexlo. Esto implica que el ree.html de la Universidad Politcnisultado de la descodificaca de Madrid. cin ser similar al origiAdems de los especificados, hay ms nal, nunca idntico. De tipos de audio que no se utilizan dentro hecho, una seal decodide las pginas web, an teniendo gran ficada en ciertos anchos repercusin como formatos de interde banda de ecualizacin cambio. Todos funcionan mediante una sonar con ruido. serie de canales de informacin que inLos ms conocidos y corporan muestras de sonido, instrupor orden alfabtico son: mentos, patrones y listas de reproduc AAC. Advanced Audio cin. Para componer melodas sobre Coding, desde su finaliellos es necesario utilizar cdigos de zacin en 1997 es el nota musical, duracin, etc. y se crean estndar para MPEG2 y desarrolladores as verdaderas obras sin pentagrama. MPEG4: www.iis.fraun Lospara profundizar de codecs ofrecen kits de desarrollo en sus formatos dentro del MSDN. En www.madtracker.org encontraremos hofer.de/amm/ techinf/aac/index.html. MP2. MPEG-1 Layer II: www.tnt.uni mucha informacin sobre estos compositores basados en muestras de sonido. AAC+ o aacPlus. MPEG-4 AAC -hannover.de/project/mpeg/audio. MIDI es uno de los protocolos ms combinado con Spectral Band MP3. MPEG-1/2 Layer III, el ms coReplication (SBR). Utilizado en renocido de los formatos dentro del in- utilizados y conocidos por los msiproduccin de audio calidad CD con tercambio de msica en Internet: cos profesionales. Desde 1983 ms de 300 compaas han adaptado este un ratio de bits de 64Kb (un MP3 de www.tnt.uni-hannover.de/project/mpeg/ la misma calidad necesita un ratio audio. de 128 Kb): www.codingtechnologies. MP3Pro. MPEG-1 Layer com/products/aacPlus.htm. III combinado con Spec AC-2. Versin 2 del Audio Coding tral Band Replication: de los laboratorios Dolby: www.codingtechnologies. www.dolby.com/tech/highqual.html. com/products/mp3pro.htm. MP4. MPEG-4 AAC, refirindonos al audiosound. media.mit.edu/ mpeg4. MPC. Musepack, denominado formalmente MP+ o MPEGplus: www.heibrink.nl/mpcworld. los reproductores ms conocido, gra- AC-3. Versin 3 del Audio Coding de Ogg Vorbis. Formato de Dolby, ms conocido como AC3: audio sin patente comertuito y que permite utilizar mltiples Hay software profesional para el tratamiento de la www.dolby.com/tech/ac-3mult.html. cial: www.vorbis.com. formatos de audio: Winamp 5.03, y para trabajar ATRAC. Adaptive Transform Acoustic RA. Formato RealAudio: seal de audioMIDI virtuales. directamente con www.winamp.com. instrumentos Coding, utilizado por Sony en sus www.realnetworks.com/ Para poder seleccionar el compreprotocolo en sus instrumentos elecgrabadores de Minidisc (MD): products/codecs/realaudio.html. sor/decompresor ms adecuado a www.sony.net/Products/ATRAC3. SDDS. Sony Dynamic Digital Sound: trnicos. Bsicamente funciona menuestras necesidades, gustos y bolsidiante mensajes con instrucciones www.sdds.com. llo, en la web flac.sourceforge.net/ DTS. Digital Theatre System de la compaa Digital Theater Systems VQF. Tambin conocido como concretas que el instrumento intercomparison.html podemos ver una bueInc: www.dtsonline.com/technology/ TwinVQ (Transform-domain Weigh- preta. Al contrario que el resto de na comparativa. technical_literature.php. ted Interleave Vector Quantization): formatos, slo transporta mensajes. Compresin de El smil es el funcionamiento entre ECM. Compresin de sonido en forwww.vqf.com. impresora y ordenador. Este manda mato ECAM, desarrollado por Sosonido con prdida mensajes con instrucciones que la lidyne en los aos 80: www.caper.org/ Denominados lossy, son los formaimpresora interpreta para poder plasempresas/solidyne.htm. tos de audio que por sus algoritmos y mar en un papel lo que deseamos. codificacin alteran el contenido del MP1. MPEG-1 Layer I: www.tnt.uniEn un equipo MIDI los instrumenhannover.de/project/mpeg/audio. archivo de sonido para poder reducirtos estn interconectados entre s mediante un cableado especfico para transportar el protocolo. Dentro de este conjunto hay un maestro que lleva el control sobre el resto de esclavos. lorien.die.upm.es contiene informaNormalmente 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). Los conectores MIDI son de tres tidio de Microsoft: www.ebu.ch/ 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 informacin por este conector. audio.aspx. Existen otros formatos especializa- OUT: es por donde un instrumento enva la informacin. dos en la estructura de audio para tratar la voz humana. Variantes del THRU: es un puente, los datos simEl trabajo que se realiza para las aplicaciones sin nimo de lucro sobrepasa muplemente pasan y no son procesaPCM, podemos profundizar en este techas veces a los profesionales flac.sourceforge.net/ comparison.html. propietaria, se ha tardado tres aos en desarrollar: www.meridian-audio.com/ welcome.htm. MPEG4 Audio Lossless Coding (ALS). www.nue.tu-berlin.de/forschung/ projekte/lossless/mpeg4als.html. RKAU. El formato RK Audio, que no es gratuito: www.msoftware.co.nz/ index.php. SHN. Shorten, formato pensado para la compresin de archivos de sonido digital DAT: www.etree.org. SZIP. String Sort ZIP, no se pens originalmente para sonido pero por sus excelentes resultados a nivel de compresin se ha adaptado: www.compressconsult.com/szip. WavPack.Wave Packer es un compresor de archivos de tipo WAV: www.wavpack.com. WMA. La versin 9 permite una codificacin sin prdida. WMA perteneca al grupo de formatos con prdida. Para obtener informacin tcnica debemos acudir a la pgina www.ebu.ch/en/index.php. La mayora de los formatos tienen plug-ins o complementos para uno de
Encontrar buen software gratuito para desarrollar tecnologas Flash es, todava, bastante complicado.
N 92
57
Curso
Comandos HTML relacionados con el sonido (tabla 1) Parmetro Src Hidden Controls Width Height Loop Volume Autostart Starttime Endtime Valores fuente de sonido true/false CONSOLE/SMALLCONSOLE/ PLAYBUTTON nmero de pxeles nmero de pxeles true/false/nmero valor de 1 a 100 true/false formato MM:SS formato MM:SS Descripcin archivo que se va a reproducir ocultar/no ocultar la consola consola grande/consola pequea/ botn de play nicamente anchura reservada para la consola altura para la consola repeticin indefinida/al menos una vez/nmero de veces volumen de reproduccin con/sin autoarranque inicio de reproduccin en minutos/segundos fin de reproduccin
Podemos crear nuestro pequeo estudio MIDI gracias a innovaciones hardware como stas de www.prod keys.com.
Este sera el cdigo para poner un sonido de fondo (slo Internet Explorer): < b g s o u n d src="ruta_archivo" loop="l" balance="0" volume="0">Este suena una vez</bgsound> Ver tabla 2 vdeo ms conocidos y que permiten hacer streaming, una tcnica de distribucin de vdeo en Internet que permite la transmisin en directo del contenido sin necesidad de descargarlo completamente para su visualizacin. Conforme llegan los datos se va presentando en pantalla. Para ello, dispone de un servidor especial que se encarga de transmitir los datos del vdeo de modo secuencial, mientras que en la parte cliente un plug-in especial o el reproductor se encarga de ir recomponiendo los datos y visualizar el vdeo en pantalla. AVI. Audio Vdeo Interleave (Audio y Vdeo Intercalado) es un formato desarrollado por Microsoft. En este tipo de archivos los datos de audio
Si es la primera vez que oyes hablar de secuenciadores, cajas de ritmo, Imagen animada sintetizadores, etc., te recomendamos Posiblemente, sea la parte ms imque visites la pgina web www.midi.org portante de una web. Acostumbrados a y algunos enlaces de las compaas las imgenes estticas, la visualizacin que aparecen. de grficos en movimiento es quiz lo Despus de toda esta parafernalia te que ms nos engancha. preguntars qu pinta todo esto como Dentro de los grficos animados formato de audio en la Red. Pues que nos podemos encontrar, los ms bien, un formato MIDI necesita que tu conocidos son los GIF. Formato creaPC incluya una tarjeta especializada o do y patentado por Compuserve, utilide sonido que interprete este proto- za un sistema de compresin sin prcolo. Si eres un sibarita, puedes co- dida con 8 bits de informacin por nectar un mdulo sintetizador a tu cada pxel y admite un mximo de 256 tarjeta de audio/MIDI para que sea el intrprete de los mensajes. Enviar por Internet cinco minutos de una tocata de Bach puede suponer 4 Kb de datos, menos que cualquier grfico JPEG que puedas encontrar por colores por imagen. Hay dos varianla Red. tes, GIF87 y GIF89a. La primera no Cmo podemos re- permite animacin, fondos transpaferenciar cualquier rentes ni formato entrelazado (carga formato de archivo la imagen en varias fases). La segunda de sonido en nues- ocupa un poco ms, pero su carga Los conectores IN, OUT y THRU son habituales en tras pginas web? progresiva permite detener la ejecucualquier instrumento que admita MIDI. Bajo este primer cin de la pgina cuando no nos inteParece 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 ima1.000 canales. Adems, hoy en da los gen nico e internamente se compone <EMBED src="tocataRE.mid" de una secuencia de imgenes estticas instrumentos musicales electrnicos permiten interpretar hasta 64 notas de hidden=false controls=CONSO- que se reproducen consecutivamente. width=192 height=70 El sistema es similar al de los dibupolifona. Puedes montar una verdade- LE loop=TRUE volume=50 autos- jos animados tradicionales. ra orquesta con pocos instrumentos. 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 imgePodemos repetir el cdigo como tan- nes (con un editor de imgenes) y as emplea un PC o Mac que hace de maestro de ceremonia. Lo que va a suceder tos reproductores queramos a la vez. poder componer la secuencia y, Como un enlace: en el escenario est perfectamente orposteriormente, unirlas con un ganizado, premeditado y guardado en editor de GIF. <a href="archivos/UnaCanel disco duro. Dentro de los formatos de vdeo MIDI incorpora un sistema de cin.mp3" target="_blank">Has- tambin encontramos tecnologas que control de tiempo a travs del reloj ta que no pulse el enlace no so- tratan de reducir el tamao de los arinterno que cumple unas normas de nor.</a> chivos. Exponemos los formatos de cuantizacin internacionales, y permite una sincronizacin, bastante Comandos HTML relacionados con el sonido (tabla 2) limitada, de vdeo y sonido. Parmetro Valores Descripcin No es un protocolo pasivo, es decir, Src ruta archivo de audio para reproducir (incluso URL) si tienes nociones de msica y tienes Loop nmero veces que se va a repetir el audio algn teclado MIDI, al ejecutar una Balance valor entre -10.000 y 10.000 0 sera un sonido centrado en ambos altavoces pieza puede transmitir rdenes a otro Volume valor entre -10.000 y 0 0 es el valor mximo perifrico conectado. dos por el instrumento. Por decirlo de alguna manera, es como un mltiple en el que se enchufan varios aparatos a la electricidad. Hay que dejarlo muy claro, con MIDI slo viajan datos, no sonido. El instrumento se encarga de interpretar esos datos y el resultado sigue saliendo por sus conectores estreo normales. En resumen, puedes distribuir la informacin mediante 16 canales (del 0 al 15), hacer que un instrumento interprete los datos que van por uno o varios canales y ordenarle, mediante esos mensajes, que reproduzca tal nota, con tal duracin, aadirle reverberacin, etc.
Internet es una escuela inmensa y hay miles de recursos de todo tipo para ampliar todo lo aprendido.
y vdeo se almacenan consecutivamente en capas, es decir, un segmento de datos de vdeo va seguido inmediatamente por otro de audio. No se necesita ningn cdec para
Una herramienta gratuita para crear GIF animados de Microsoft, www.jhepple.com/gif_animator.htm.
visualizarlo, pero al no estar comprimido se necesita bastante espacio de almacenamiento. Alcanza resoluciones de 320x240 pxeles y 30 fotogramas por segundo. Llevan la extensin .avi, y se visualizan directamente sobre Windows con el reproductor Windows Media Pla-
58
www.pctoday.es
Diseo web. Parte 6

Comandos HTML relacionados con archivos GIF animados (tabla 3) Parmetro Src Dynsrc Loop Start Controls Loopdelay Width Height Descripcin GIF animado que saldr en la ventana de reproduccin. ruta del vdeo localizacin del archivo (incluso una URL completa). nmero/INFINITE nmero de veces que se debe visualizar y por defecto es 1. fileopen/mouseover cundo se reproduce el vdeo: al abrir la pgina o al pasar con el ratn sobre l. CONSOLE/SMALLCONSOLE/ consola grande/consola pequea/botn PLAYBUTTON Play nicamente. nmero milisegundos entre una y otra reproduccin de vdeo. nmero de pxeles anchura reservada para la consola. nmero de pxeles altura para la consola. Valores ruta imagen
Netscape no acepta este modelo, por lo que slo aparecer el GIF animado en lugar del vdeo. <embed src="ejemplos/ mov1.mov" type="video/quicktime" autostart="True" width="320" height="240"> Esta etiqueta la introdujo Netscape a pesar de que en la prctica no fun-
Para los ficheros de tipo MOV, procedentes del formato QuickTime, todos los navegadores necesitan un plug-in que se puede instalar de manera automtica. Ver tabla 4 <object width="110" h e i g h t = " 8 2 " classid="CLSID:22D6F312-B0F611D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com
yer: www.microsoft.com/windows/ windowsmedia/intl/download/default.asp ?DispLang=es. MOV. Formato desarrollado por Apple (inicialmente para el entorno Macintosh), requiere tener el reproductor QuickTime. Los archivos de este formato son de menor tamao que los AVI y permiten incluir interaccin. El ratio alcanzado de resolucin y reproduccin es el mismo que el AVI. Las extensiones asociadas son .qt o .mov. Para descargar el reproductor QuickTime: www.apple.com/es/quicktime/download. MPEG. Creado por Moving Pictures Expert Group (empleados de Sony y Apple unidos desde 1988). A travs de la ISO crean un formato de vdeo estndar para comprimir ficheros audio/vdeo en formato digital. El resultado es una cierta prdida de calidad visual pero con una notable reduccin en el tamao del archivo. Actualmente se encuentra operativa la versin MPEG2 mejorada y se est perfeccionando la versin MPEG4 (difusin a travs de Internet), que permite conseguir una calidad prxima a la del DVD y una compresin considerablemente mayor. La versin MPEG7 est recin desarrollada. MPEG1 es un estndar para el CD audio/vdeo, con una codificacin de
1,5 Mb/s y una resolucin de 352x240 pxeles. MPEG2 es un estndar para transmisiones de vdeo de alta calidad a pantalla completa, que utiliza entre 3 y 10 Mb/s para resoluciones que oscilan entre 352x480 y 1.920x1.080 pxeles. MPEG4 es un estndar para vdeo-telefona sobre entornos GSM. MPEG utiliza la codificacin de imgenes en formato JPEG. Posteriormente, aplica simplificaciones usando compresin de vdeo psicovisual. En cuanto al audio, utiliza las mismas frecuencias de muestreo que los CD o los DAT (44,1 KHz, 48 KHz, 32 KHz, todas con una resolucin de 16 bits). La calidad obtenida con MPEG es la que se utiliza en los DVD. Los archi-
Juzga por ti mismo, un excelente sitio web relacionado con documentacin tcnica sobre cdecs de audio y vdeo es www.elisoft.net.
ciona bien en sus navegadores. Al intentar ver un vdeo con esta etiqueta suele salir el tpico mensaje de necesidad de instalacin de un plug-in especial. Tras descargar e instalar el
Siempre hay algn amigo en Internet que puede aportarnos trucos para mejorar nuestra tcnica.
vos de este formato tienen la extensin .mpeg o .mpg, y se pueden visualizar con Microsoft Windows Media Player y Apple QuickTime. RTV. Formato creado por Intel permite alcanzar ratios de hasta 150:1 de compresin. La tecnologa es similar a la del MPEG. Un vdeo de 60 minutos a pantalla completa requiere 550 Mb de almacenamiento. Requiere el reproductor Realplayer: www.realnetworks.com. Todos estos formatos de archivo tienen una forma de utilizarse en las pginas web similar a la del sonido. Para referenciar nuestros archivos de imagen o vdeo tenemos las siguientes posibilidades: <img src= "imagen/ animado.gif" dynsrc="peliculas/boda.mpg" loop="2"> Ver tabla 3 plug-in Quick Time, en las versiones 4x de Netscape Navigator slo se visualizan bien los ficheros AVI, mientras que en las versiones 6x se visualizan tambin los ficheros MPEG.
/activex/controls/mplayer/en/nsmp 2inf.cab#Version=6,4,7,1112" standby="Cargando fichero..." type="application/x-oleobject"> <param name="filename" value="ejemplos/lavida.avi"> <param name="showcontrols" value="0"> <param name="showdisplay" value="0"> <param name="showstatusbar" value="0"> <param name="autosize" value="0"> <param name="autostart" value="1"> </object>
Comandos HTML relacionados con archivos de vdeo MOV (tabla 4) Parmetro Src Loop Type Valores ruta del vdeo true/false tipo archivo Descripcin localizacin del archivo (incluso una URL completa). repeticin indefinida/al menos una vez. tipo de archivo de vdeo que indica al navegador el programa o plug-in adecuado para la visualizacin (video/avi, video/quicktime, video/mpeg, etc.). en caso de ser necesario un plug-in, la pgina web donde se puede descargar. muestra o no la barra de control de la consola de vdeo (Netscape 4x). muestra o no la barra de informacin sobre el vdeo (Netscape 4x). muestra o no la barra de estado (Netscape 4x). identificador que debe ser nico en la pgina, para referenciar por lenguajes de script. volumen de reproduccin (Netscape Navigator). anchura reservada para la consola. altura para la consola. alineacin en la pgina de la consola.
Pluginspage
URL
Showcontrols 1/0 Showdisplay 1/0
Showstatusbar 1/0 Name nombre Volume Width Height Align valor de 0 a 100 nmero de pxeles nmero de pxeles top/bottom/center/ left/right/middle
Real Player es uno de los reproductores ms difundidos, despus de Windows Media de Microsoft.
N 92
59
Prctico
Como solucin a los problemas de compatibilidad entre las etiquetas anteriores y los diferentes navegadores web, la organizacin W3C sugiri a partir del lenguaje HTML 4.0. la utilizacin de la etiqueta OBJECT, con la que se podran incluir archivos de vdeo (igual que para todo tipo de archivos incrustados). Hasta la fecha, Internet Explorer es el nico navegador que admite correctamente la etiqueta OBJECT. Esta etiqueta define un objeto o componente externo encargado de la reproduccin del fichero de vdeo, que en el caso de Internet Explorer es alguna clase de control perteneciente al tipo ActiveX. Se crea una instancia del objeto, se declara su URL y las principales propiedades generales y, mediante un conjunto de etiquetas especiales PARAM, se parametrizan los valores que necesita para el correcto funcionamiento o para la configuracin deseada. Ver tabla 5 Para los parmetros pertenecientes al comando PARAM, ver tabla 6. Para profundizar sobre los parmetros y opciones disponibles, se puede obtener informacin extra en webmaster.lycos.es/re ferences/html/ content.phtml#object o en www.w3c.org.
Parmetros asociados a OBJECT (tabla 5) Parmetro Classid Codebase Type Width Height Align Autostart Standby Valores "identificador_objeto" "URL" tipo archivo nmero de pxeles nmero de pxeles top/bottom/center/left/ right/middle true/false "mensaje" Descripcin fija el identificador CLSID de los controles ActiveX necesarios. URL del objeto o componente externo necesario para reproducir el archivo. declara el tipo de archivo de vdeo. anchura reservada para la consola. altura para la consola. alineacin en la pgina de la consola. con/sin autoarranque. aparece en pantalla un mensaje dirigido al usuario mientras se carga el archivo.
Las posibilidades para exportar la pelcula incluyen el formato AVI y QT.
Hay un proyecto de software gratuito en marcha, donde se puede encontrar mucha informacin acerca del funcionamiento de Flash, en www.openswf.org. Pero se requieren conocimientos de programacin avanzados. Si se tiene en cuenta que el precio de la herramienta de desarrollo estndar Flash MX 2004 es de casi 600 euros y el profesional de 840, los
Nada ms abrir la aplicacin aparece un escenario donde estn casi todas las herramientas necesarias. Primero decidimos cuantos fotogramas o imgenes independien-
nuestra animacin, basta con pulsar la tecla Intro del teclado numrico y se reproducir la animacin en nuestro espacio de trabajo. Para guardar la animacin en formato swf, que es el nico que permite editar las pelculas creadas, seleccione en el men File>Export
Los descodificadores de archivos Flash deben usarse con intencin de aprender y no de robar cdigo ajeno.
tes va a tener nuestra animacin; para ello, seleccionamos con el ratn la lnea de tiempo de la primera capa y, a continuacin, en el fotograma deseado con el botn derecho de ratn seleccionamos Insert frame (40 fotogramas en el ejemplo). Vamos a crear un texto que se va a deformar a lo largo del tiempo. Nos situamos en el primer fotograma y con la herramienta de texto seleccionamos el color de la letra y el tamao que va a ocupar. Sobre la lnea de tiempo con el botn derecho de ratn, seleccionamos Create Motion Tween y nos situamos en el fotograma 1. Seleccionamos la caja del texto y la opcin de men Modify>Transform>Free Transform. Seleccionamos el fotograma 5 y deformamos el texto. Movie, que es la animacin reproducible con Flash Player. El software de Flash instala el plug-in para visualizar las pelculas Flash en nuestros navegadores y tambin el programa ejecutable de Flash Player. Slo tendremos que hacer doble click sobre nuestra animacin Flash y comenzar a reproducirse. Si no hemos utilizado el entorno de Flash, la herramienta dispondr de algn reproductor. Si no es as, en la direccin www.macromedia.com/ shockwave/download/download.cgi?P1_ Prod_Version=ShockwaveFlash&Lang= Spanish lo obtendremos. Otra caracterstica muy importante de este formato es la facilidad con que se pueden crear animaciones y pelculas para su posterior distribucin en disco. El tamao reducido y la gran extensin del programa que permite su reproduccin, lo hacen apto para sistemas de almacenamiento porttiles de cualquier tipo. De todos modos, en las producciones profesionales que llenan multitud de CDROMs promocionales, se incluye el programa reproductor Flash Player para que el usuario que carezca de conexin a Internet tambin pueda visualizar el contenido multimedia. Otra caracterstica destacada del programa, es la facilidad con que permite la actualizacin del software de reproduccin de manera automtica. Si una pelcula est creada con una versin ms moderna de Flash Player que la instalada en el ordenador, ste intentar descargarla sin que el usuario deba preocuparse demasiado. Adems, su condicin multiplataforma lo hacen idneo para todo tipo de sistemas informticos. s
Flash
Una de las herramientas que est de- Flash parte de una tecnologa que adquiri Macrojando de ser un simple media a partir del desarrollo de otra empresa. visualizador de animaciones es Flash de Macromedia. Sus programas shareware, que como el posibilidades son infinitas, con gran- producto de Macromedia permiten des posibilidades de inversin y baja un periodo de prueba, de la lista obcarga para la conexin. Por dar una tenida en www.webexperto.com/downlo pincelada, el cdigo que se genera ads/listado.php?subcat=10, parecen racon Flash no se puede piratear de zonables. Los podemos encontrar una forma sencilla y eficaz. Es una desde 17 euros a 150 euros segn las herramienta que te permite obtener caractersticas del software. grficos de alta calidad, formularios Macromedia permite usar el software interactivos, conexin a bases de da- durante 30 das, as que los aprovechatos, reproduccin de audio/vdeo y mos para ver cmo es esta tecnologa y MIDI, etc. Un buen contrincante del su entorno. Haremos una sencilla anicdigo HTML, DHTML y de Javas- macin para que veas que en pocos pacript, pero a un precio desorbitado. sos se pueden hacer cosas.
Opciones disponibles con PARAM (tabla 6) Parmetro Valores Descripcin param name="filename" value="ruta_fichero" establece la ruta del archivo de vdeo. param name="showcontrols" value="1/0" muestra o no la barra de controles (Internet Explorer). param name="showdisplay" value="1/0" muestra o no la barra de informacin sobre el vdeo (Internet Explorer). param name="showstatusbar" value="1/0" muestra o no la barra de estado (Internet Explorer). param name="autosize" value="1/0" autoajusta o no el tamao de la consola (Internet Explorer). param name="autostart" value="true/false" con/sin autoarranque
La herramienta de transformacin es de las ms utilizadas en Flash.
En intervalos de 5 fotogramas repetimos el paso anterior reduciendo cada vez ms el texto de prueba. En el fotograma 40 eliminamos lo que queda de texto para dar la sensacin de que ha desaparecido por completo. Para ver una prueba de
60
www.pctoday.es
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.
Gua del curso



4. Usabilidad.
5. Accesibilidad.

7. Programacin.
rogramar nuestra pgina web no consiste slo en abrir una herramienta de desarrollo del tipo Hot Metal Pro o similar y colocar texto e imgenes aqu y all. Hemos visto a lo largo de las entregas anteriores que hay que conocer bien el medio en el que vamos a trabajar y no dejarnos llevar, exclusivamente, por nuestro sentido artstico. Uno de los conceptos ms ambiguos del desarrollo es, precisamente, el diseador web. Cul es su cometido? Debera tener conocimientos de programacin? Evidentemente, cuando los visitantes la vean, lo primero que encontrarn es la interfaz, junto a esos textos y fotos que hemos mencionado. Hemos comentado la importancia que tiene y sobre todo su usabilidad, accesibilidad y navegacin. Cada uno tiene sus labores dentro de un proyecto, pero no est de
ms que el diseador sepa de qu le hablan los programadores. Puede que el diseo no permita ciertas libertades en programacin, y viceversa. De ah, que si el diseador ya sabe cules son las limitaciones de una interfaz, ms rpido ser el desarrollo. No hace falta decir que los factores fundamentales van a ser los presupuestos y el tiempo disponible, incluso para un proyecto domstico. La parte ms oscura del desarrollo es la programacin en s. No hablamos de HTML ni de las hojas de estilo, nos referimos al cdigo realizado sobre un lenguaje de programacin y que aumenta las posibilidades de la pgina web.
Principios de programacin
El origen militar de Internet, con la red ARPANET, dio paso a una serie de avances en los sistemas, gnesis de
52
www.pctoday.es
Diseo web. Parte 7

diseo o los aspectos del sistema no estn patentados, es decir, se pueden obtener todos los detalles sobre el sistema y utilizarlos con entera libertad. El modelo OSI se deriv de un modelo propuesto por la Organizacin Internacional de Normas (ISO, Internacional Standards Organization). En la literatura sobre redes casi siempre Para profundizar en el origen de las primeras redes de se hace mencin a los ordenadores podemos encontrar buen material en www.isoc.org/internet/history/cerf.shtml. modelos ISO/OSI, lo que demuestra su influencia. protocolos y arquitecturas muy varia- El modelo ISO/OSI utiliza capas para das al unirse centros universitarios y organizar una red en mdulos funciohacerse pblica la existencia de dicha nales bien definidos. Cada uno de estos red en 1972. El objetivo principal era mdulos o capas, proporciona una funconstruir redes de rea amplia (WAN cionalidad especfica o una serie de Wide Area Network) o redes de rea servicios a la capa subyacente. Este modelo de red ha dado lugar al local (LAN Local Area Network). El hecho de conectar dos o ms orde- uso del mismo en la programacin de nadores para que se comuniquen es redes: el modelo cliente/servidor. crear una red. Conectar dos o ms re- Consiste en dividir una aplicacin de des a nivel mundial forma una inter- red en dos lados. El lado cliente solinet, con la i en minscula. Inter- cita informacin o servicios del lado net en maysculas naci a partir de AR- servidor y ste a su vez responde a las PANET, y es la Red de Redes con ms de solicitudes del cliente. En otras pala20.000 redes enlazadas en 130 pases. La cuna de la World Wide Web fue el laboratorio europeo de fsica de partculas CERN, con sede en Ginebra, en 1989. Su creador, Tim Berners-Lee, londinense e ingeniero de programacin, la orient como herramienta de trabajo para el intercambio de infor- bras, el modelo cliente/servidor de macin entre los cientficos del centro, una aplicacin de red cumple dos sin necesidad de descargar documen- funciones bien diferenciadas e indetos mediante FTP. De esta forma, la in- pendientes: solicita informacin y formacin se encontraba localizada en responde a esas peticiones. Hay una serie de diferencias que nos Desde el punto de vista de las comuniayudan a determinar qu lado de una caciones, admite los servicios de coconexin es el cliente y qu lado es el nexin TCP/IP y funciona de la misma servidor. Una aplicacin servidor casi forma que el resto de los servicios cosiempre se inicia ella misma y luego munes de entornos en red: un propermanece latente, en espera de otra aplicacin cliente. Por ejemplo, una base de datos distribuida proporciona a las compaas areas informacin sobre las reservas. El sistema emplea un proceso servidor que accede a una base de datos distribuida y da respuesta a todas las empresas. Siempre nos En cualquier servicio de compra por Internet, como este imaginamos un de Iberia, www.iberia.es, se puede experimentar el funciogran ordenador namiento del modelo cliente/servidor. que da respuesta a las peticiones de miles de clientes. Pe- ceso servidor escucha en un puerto de ro internamente nuestro propio PC comunicaciones TCP (por defecto, el funciona como un cliente/servidor. Los 80) y espera las solicitudes de conexin clientes seran los procesos que solici- de los clientes de la WWW. Una vez estatan tareas de comunicacin (por ejem- blecida la conexin, el protocolo TCP se plo, entre la impresora y el PC) y los encarga de mantener la comunicaservicios de impresin del sistema ope- cin y garantizar un intercambio de datos libre de errores. HTTP se basa en operaciones sencillas de solicitud/respuesta. Un cliente establece una conexin con un servidor y enva un mensaje con los datos de la solicitud. El servidor responde con un mensaje similar, que contiene el estado rativo se encargaran de realizar las de la operacin y su posible resultado. funciones de servidor. Todas las operaciones pueden adjuntar Generalmente en la programacin un objeto o recurso sobre el que actcliente/servidor, las propias funciones an; cada objeto de la WWW, documento 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.
El modelo cliente/servidor consiste en dividir una aplicacin de red en dos lados, el que solicita y el que sirve.
Programacin de formateo
Durante mucho tiempo los cientficos e ingenieros se han centrado en la idea de desarrollar una base de datos universal, pero slo desde hace poco han contado con los medios para crearla. Muchas personas han considerado a la World Wide Web como el prototipo para crear esa base de datos. Como todo lo que se encuentra en Internet, las operaciones dependen de un protocolo: HTTP o Protocolo de Transferencia de Hipertexto. La especificacin completa del protocolo HTTP 1/0 propuesta por su creador, Tim Berners-Lee, se encuentra recogida en el documento de referencia RFC 1945, www.faqs.org/rfcs/rfc1945.html.
En la web del laboratorio de fsica de partculas CERN, public.web.cern.ch/public/ index.html, se puede comprobar el origen real de la World Wide Web.
un lugar y permita su consulta desde cualquier punto. Para comprender el concepto de programacin en Internet, usaremos las mismas ideas que si programamos para una red local. Entre 1977 y 1984 los profesionales de redes disearon un modelo de referencia para Interconexin de Sistemas Abiertos (OSI, Open Systems Interconnection). En un sistema abierto el
Se puede disear una aplicacin que cumpla las dos funciones. Dentro de este modelo se puede dar la siguiente situacin: el cliente realiza una peticin y si el servidor no puede satisfacer la respuesta, har las veces de cliente y solicitar la informacin a otro servidor. Como en el modelo de red y su divisin en capas, el modelo de programacin divide el diseo de una aplicacin en tareas del cliente y tareas del servidor.
Los servidores de pginas web se suelen relacionar con grandes grupos de ordenadores.
N 93
53
Curso
Resource Locator). El nico propsito de un URL es encapsular informacin que pueda utilizar un programa con el fin de localizar un objeto en Internet. Una vez localizado el objeto, el URL no desempea ninguna funcin. Es decir, a efectos prcticos puede ver un URL como un tipo especial de direccin de red. No obstante, en lugar de identificar un ordenador anfitrin, un URL identifica un objeto especfico de dicho equipo y el mtodo de acceso para el objeto al que hace referencia. El esquema URL para HTTP slo identifica recursos de Internet sobre los que se puede utilizar el Protocolo de Transferencia de Hipertexto. La sintaxis sera: http://anfitrin:puerto/ruta? objeto de bsqueda Si los programas omiten el puerto se opta por el 80, que es el predeterminado. Adems, en la actualidad, a pesar de estar referenciada en la sintaxis de esquema, la parte objeto de bsqueda no se utiliza, por lo que puedes ignorarla.
La arquitectura cliente/servidor puede desglosarse en capas. Generalmente es la parte servidor la que se divide en n niveles.
La direccin en la que encontrars todo lo referente al protocolo corresponde al consorcio internacional del W3C y que ya hemos mencionado en ms de una ocasin: www.w3.org/Protocols. Si adems quieres comprender con algn ejemplo el funcionamiento de los comandos de este protocolo basado en
solicitud/respuesta entre cliente y servidor, te recomendamos que consultes la pgina web cdec.unican.es/libro/HTTP.htm. Si salimos un poco de estas profundidades, en la superficie de Internet siempre estar nuestro querido HTML. Los documentos HTML contienen mucha informacin que un cliente Web de-
be interpretar. Pero las verdaderas operaciones de red en la WWW, realizadas con HTTP, URL y URI (Universal Resource Identifier), son relativamente sencillas. Este tipo de operaciones son mucho ms simples que las operaciones de FTP (File Transfer Protocol). Para ejecutar una operacin, el programa slo debe manejar una conexin TCP. Incluso, ms fcil an, slo tiene que mantener esta conexin durante el transcurso de la transferencia del archivo. Al contrario, crear una aplicacin que interprete y despliegue de forma adecuada el contenido de un documento HTML es bastante complicado. Hoy en da est bastante superado este tema por las grandes compaas de software especializado en comunicaciones. De ah que nuestro reto sea utilizar bien las posibilidades que nos permita la aplicacin que funcione como navegador.
Las capas de red

El diseo de nuestra web y su programacin va a depender tambin de los niveles o las capas del mismo. Qu queremos decir con esto? Dentro de la arquitectura cliente/servidor podemos establecer niveles que van a estar determinados por los componentes de la arquitectura. Si vamos a almacenar datos que posteriormente se utilizarn para alimentar la web (una pgina de noticias, por ejemplo), necesitaremos un gestor de base de datos en nuestro servi-
Las capas de una red

El modelo ISO/OSI se divide en estas capas funcionales: Fsica. Es la que transmite los datos a travs del canal de comunicacin de la red. Adems, determina las propiedades mecnicas y elctricas de este canal. Por ejemplo, la capa fsica determina el tipo de cable que utilizar la red, la tipologa de la misma, etc. De enlace (de datos). Transforma los datos binarios puros en informacin inteligible para la capa de red, generalmente en tramas de datos. Por ejemplo, si dos ordenadores del mismo tipo estn De red. Es el sistema de entrega primario dentro de la red. En Internet, esta capa enva paquetes individuales de datos que contienen la direccin de destino y fuente para el enrutamiento. Permite buscar la mejor trayectoria entre el ordenador anfitrin y cualquier destino en la red. Esta capa asegura la entrega de los datos de forma correcta. De transporte. Cuando se establece la comunicacin entre dos ordenadores a travs de una red, en realidad hay dos programas que proceso se denomina registro. Si creamos varias sesiones con un sistema, la capa de sesin negocia y establece las conexiones entre los procesos y las aplicaciones en diferentes anfitriones para cada sesin. Es la asignacin. De presentacin. Esta capa contiene funciones comunes que la red utiliza repetidamente durante las comunicaciones. Estas funciones incluyen la interfaz de red con impresoras, monitores y formatos de archivos. Esta capa determina cmo se presentan los datos al usuario. Incluye varias rutinas de conversin de datos. Desafortunadamente, las redes en Internet no incluyen una capa de presentacin estndar, y son los programas de aplicacin los que se encargan de las funciones de esta capa. De aplicacin. En la capa de aplicacin se incluyen todos los detalles relacionados con programas diseados para usuarios de red. Para aprovechar ciertas capacidades de la red, quiz haya que crear algn mdulo especializado. Un ejemplo sera aprovechar las capacidades de la red y utilizar varios ordenadores como centros de almacenamiento de datos. Hay mucha bibliografa relacionada con la teora de redes que abarca todas las cuestiones relacionadas con arquitectura, protocolos, metodologas, etc. s
La mejor fuente de informacin en cuanto a protocolos es www.w3c.org, aunque est totalmente en ingls.
El modelo ISO/OSI es el ms estandarizado y se caracteriza por la conversin que se establece entre las capas que lo componen.
conectados en una intranet, uno en una red de tipo Ethernet y otro en una de tipo Token Ring, en el nivel de capa de red los datos parecen idnticos, pero en el nivel de capa de enlace y fsica son formatos completamente distintos.
son los que intercambian los datos. Esta capa es la que los conduce al programa correcto. De sesin. Cuando se accede a una red, generalmente hay que identificarse y conectarse. Este
dor. Este sera un nivel. Cuando se disea un sitio web y se dimensiona por nmero de visitas, para reducir el trabajo del servidor web (encargado de servir las pginas web a Internet), se incorpora un servidor de aplicaciones que se encarga de la ejecucin de los programas internos y de preparar la informacin para el servidor web. Este sera otro nivel. Para una arquitectura cliente/servidor de tres niveles tendramos: un servidor de base de datos, un servidor de aplicaciones y un servidor web. Dentro de las capas, podemos imaginar cuantos niveles queramos segn el diseo de la arquitectura. Siempre vara en funcin de la seguridad establecida en nuestra red, de cmo queremos distribuir la informacin y sobre todo de cmo queremos repartir la carga de trabajo entre los servidores. Por lo tanto, tenemos que distinguir aplicaciones que se ejecutan en la parte cliente y las que lo hacen en la parte servidor.
54
www.pctoday.es
Diseo web. Parte 7

Cdigos que enva el servidor al explorador
Cdigo 200 201 202 Mensaje OK Created Accepted Descripcin Operacin realizada satisfactoriamente. 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. 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. 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. 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. 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. Cuando se ejecuta un comando get condicional, y el documento no ha sido modificado, se devuelve este cdigo de estado. La peticin tiene un error de sintaxis y el servidor no la entiende. 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. Est prohibido el acceso a este recurso. No es posible utilizar una clave para modificar la proteccin. La direccin URL solicitada no existe. Se ha producido un error interno en el servidor y no puede continuar con el procesamiento. Por su diseo interno, el servidor no tiene capacidad suficiente para llevar a cabo la peticin del cliente. El servidor, que est actuando como proxy o pasarela, ha encontrado un error al acceder al recurso que haba solicitado el cliente. El servidor est actualmente deshabilitado y no es capaz de atender el requerimiento.
204 301
No Content Moved Permanently
302
Moved Temporarily
304 400 401 403 404 500 501 502 503
Not Modified Bad Request Unauthorized Forbidden Not Found Internal Server Error Not Implemented Bad Gateway Service Unavailable
En concreto, HTML/CSS, al ser un lenguaje interpretado, siempre se ejecuta en la parte cliente. Ya lo hemos mencionado anteriormente, el navegador de nuestro PC recopila la pgina que ha solicitado al servidor y posteriormente interpreta las etiquetas y el contenido para visualizarla. Quien se lleva el trabajo es nuestro PC, el servidor se limita a responder a nuestra peticin con un archivo que viaja por Internet. Este ejemplo,
<HTML> <HEAD> <LINK REL=stylesheet TYPE=text/css HREF=Mi_hoja_estilos.css> </HEAD> <BODY> ...... </BODY> </HTML> o referenciando al archivo CSS mediante la etiqueta @IMPORT <HTML> <HEAD> <STYLE TYPE=text/css> @IMPORT URL(Mi_hoja_estilos.css) </STYLE> </HEAD> <BODY> ...... </BODY> </HTML>
tructurar la informacin. Principalmente, se codifica de esta forma para que el cdigo fuente del archivo referenciado permanezca en el anonimato.
En el cliente
Haciendo un poco de historia, en 1995 Brendan Eich, ingeniero de Netscape, invent un lenguaje de programacin llamado Livescript. Ante la posibilidad de realizar muchas operaciones sin necesidad de un servidor de aplicaciones, los ingenieros de Netscape vieron que con un poco de preparacin se podan adaptar los navegadores para interpretar este cdigo. En una colaboracin entre Netscape y Sun Microsystems se termin la sintaxis del que sera rebautizado como JavaScript. Se le dio ese nombre porque en esos momentos Java era un lenguaje muy
utilizado por los programadores, y simplemente estaba de moda en la Web. Java y JavaScript no tienen nada que ver, aunque tienen muchas cosas en comn, como todos los lenguajes orientados a objetos. Microsoft no adapt Internet Explorer hasta 1996 para interpretar JavaScript, pero hoy en da no existen problemas para utilizar incluso la ltima versin 1.6 de JavaScript. Este lenguaje ha sido la base para lograr la animacin de las pginas web sin necesidad de estudiar herramientas difciles o lenguajes que requieran mucho tiempo de aprendizaje. HTML, CSS y JavaScript han dado lugar a la tecnologa denominada Dynamic HTML o DHTML. Dadas sus caractersticas, este lenguaje requiere el uso de un editor de texto, que no es el editor de HTML;
Con la opcin Ver cdigo fuente de un navegador se pueden ver los entresijos de una web.
adems, es la nica forma de llegar a comprender y dominar su sintaxis. Existen dos tipos de JavaScript: JavaScript cliente: se desarrolla y aplica en el navegador del cliente. JavaScript servidor: menos conocido, se ejecuta en el servidor, lo mismo que cualquier CGI, pero ms sencillo. Vamos a crear un ejemplo sencillo:
<html> <head> <title>Primer Javascript</title> </head> <body> <h1>Tpico ejemplo de</h1> <script language=javascript> <! de esta forma ocultamos el cdigo JavaScript para los antiguos navegadores. document.write(Hola, mundo) //>fin de ocultar </script> </body> </html>
provocar dos peticiones al servidor, una para el documento HTML y otra para el documento CSS enlazado. Esto no significa que sera mejor incluir todo directamente en el HTML y olvidarnos, simplemente es una forma de es-
Dentro de www.htmlhelp.com podemos encontrar muchos recursos que nos ayudarn a desarrollar pginas no dependientes del explorador.
N 93
55
Curso
La doble barra inclinada // se utiliza en JavaScript para indicar comentarios que sern ignorados por el navegador. Tienen el mismo significado que la etiqueta <! . > en HTML. La etiqueta <script> </script> permite al navegador reconocer que se inicia en este punto un script o programa a interpretar, y uno de sus atributos es el lenguaje en que est escrito, por eso se aade language=Javascript. Se ha aadido la etiqueta <!, as se oculta el cdigo JavaScript para los antiguos navegadores. No sirve slo para navegadores antiguos, sino para los navegadores ms modernos en los que el usuario ha decidido desactivar el intrprete JavaScript. Si se refiere a que hay que realizar alguna accin al cargar el documento, es mejor ponerla en BODY. Pero si la funcin se pude invocar desde cualquier punto de BODY, lo mejor ser colocarla dentro de HEAD. Si se transcribe el siguiente ejemplo en un documento HTML, con Notepad podremos ver las posibilidades que nos otorga el control de ciertas caractersticas. Este ejemplo, en concreto, aplica un efecto de nen entre rojo, verde y azul:
<html> <head> <title>PC Today - texto que cambia de color</title> <style type=text/css> <!.posicion {position:absolute; top:100; font-weight:bold; }> </style> <script language=JavaScript type=text/javascript> <!var message=Texto que se cambia en tres colores; var x=0,i=message.length; function cambia_texto() { if(x<=message.length) {document.getElementById (id_texto1).innerHTML=messa ge.substring(x,0);document.ge tElementById(id_texto0).inn erHTML=message; x+=1; } else { if(i>=0) {document.getElementById (id_texto2).innerHTML=messa ge.substring(i,0);i-=1;} else { x=0; i=message.length; }} setTimeout(cambia_texto();, 25);}//> </script> </head> <body onload=cambia_texto() bgColor=#EEEEEE> <span class=posicion id= id_texto0 style=z-index:1;color:red;fontsize:20></span> <span class=posicion id= id_texto1 style=zindex:1;color:green;fontsize:20></span> <span class=posicion id= id_texto2 style=zindex:2;color: blue;fontsize:20></span></left> </body> </html>
Esta pgina de error indica que hay una mala programacin de la web que las origina.
Para navegadores con el intrprete JavaScript habilitado, se ejecutar el cdigo tras leer una etiqueta de script. La etiqueta de cierre del comentario HTML se antecede con las dos barras de comentario de JavaScript. Esto es necesario para que el navegador no se confunda e interprete errneamente el cierre >. Dentro de este breve script tenemos una lnea de comando que escribir la frase en pantalla. Es document.write(), y dentro del parntesis de este comando se escribe entre comillas el texto que queremos que aparezca en pantalla. El texto tiene que ir necesariamente entre comillas. JavaScript tiene la particularidad de ser CASE SENSITIVE, sensible a las maysculas; por lo tanto, habr que tener cuidado cuando se escriban las palabras reservadas, los identificadores, etc. La etiqueta <script></script> puede incluirse tanto entre las etiquetas <head></head> como dentro de <body></body>. La decisin de dnde colocarla depender de varios factores, aparte de nuestro gusto. Lo aconsejable ser seguir estas pautas: Si la funcin es corta y acta sobre un elemento del documento, hay que escribir el cdigo cerca de ella.
cript. Para aquellos que estn familiarizados con Visual Basic, es muy fcil codificar script potentes para una pgina web. No olvidemos que dado el origen de VBS, es un lenguaje bastante exclusivo para utilizarlo con software de la casa Microsoft. Veamos un ejemplo en el que se muestra cmo se pueden utiliLa base de datos es un eje fundamental para alimentar zar los cuadros de dinuestras pginas. Dentro del software libre y aprovelogo de mensajes tchando el estndar SQL, MySQL es la ms extendida. picos de las aplicaPara profundizar ms sobre las funciones que funcionan sobre Windows: ciones, constantes y posibilidades <HTML><HEAD> que nos ofrece JavaScript, recomenda<TITLE>PC Today - MsgBox mos consultar devedge.netscape.com/cen </TITLE> tral/javascript, donde encontrars ma<BASEFONT SIZE=3> nuales y guas sobre este tema. Algunas </HEAD> pginas en las que recopilar ejemplos y <BODY> ms informacin son: www.mundojava <FONT FACE=Verdana, Arial> script.com, javascript.internet.com, www. <SCRIPT LANGUAGE=VBScript> programacion.com, www.elguruprograma Document.Write Un ejemplo con MsgBox dor.com.ar o www.htmlweb.net. MsgBox Esto es un Adems de JavaScript, tambin est ejemplo,vbInformation,PC Visual Basic Script, VBScript o VBS. Today - MsgBox Visual Basic Script es un subconjunto Document.Write <BR> Has de Microsoft Visual Basic, que ha pulsado <B> Aceptar</B> heredado parte de las funcionalidades I = MsgBox (Otro ejemplo de este lenguaje. La desventaja es que ,vbQuestion + vbOkCancel + slo lo pueden ejecutar navegadores vbDefaultButton2,PC Today de Microsoft y sus principales posibiliMsgBox) dades son utilizar controles ActiveX, If I = vbOk then Document. Write <BR>Has servidores de automatizacin OLE y pulsado <B> Aceptar</B> utilizar Java. Else La versin en VBS del primer ejemDocument.Write <BR> Has plo de JavaScript sera as:
<html> <head> <title>Mi primer Visual Basic Script</title> </head> <body> <h1>El tpico ejemplo de</h1> <script language=VBScript> Document.Write Hola, mundo! </script> </body> </html> pulsado <B>Cancelar</B> End If </SCRIPT></FONT> </BODY></HTML>
Se parecen bastante, pero cuando se trata en detalle objetos Com, ActiveX, etc. vemos que el script de VBS es mucho ms denso que el de JavaSLas versiones de JavaScript
Los nicos requisitos necesarios para utilizar ambos lenguajes de scripting es tener un navegador y un editor de texto que nos permita crear nuestro cdigo. Embeber el cdigo dentro de un documento HTML no es difcil, y nos permite manejar todos los elementos de la interfaz mediante estos lenguajes. Ya sabes, la nica diferencia es que uno es estndar para cualquier navegador y el otro es exclusivo de Internet Explorer. La ventaja que tiene VBS es que permite ser
Versin navegador 2 3 4 5 6
Netscape JavaScript 1.0 JavaScript 1.1 JavaScript 1.2 sin ajustarse a ECMA-262 (*) JavaScript 1.3 sin ajustarse a ECMA-334 (*) JavaScript 1.4 sin ajustarse a ECMA-335 (*)
Internet Explorer No aceptado JavaScript 1.0 JavaScript 1.2 ajustndose a ECMA-262 JavaScript 1.3 ajustndose a ECMA-334 JavaScript 1.4 ajustndose a ECMA-335
(*) ECMA. Conjuntamente al W3C, la European Computer Manufacturers Association, se encarga de propagar la forma en que se deben usar las altas tecnologas. Por ejemplo, JavaScript 1.2 est debidamente descrito en el documento ECMA-262: www.ecma-international.org/ publications/standards/Ecma-262.htm.
56
www.pctoday.es
Diseo web. Parte 7

XML/XHTML
Un lenguaje de marcas que est cin. Estos entornos publican docuadquiriendo gran auge como medio mentos XML que antes de enviarse al de comunicacin entre distintas tec- cliente sufrirn una serie de transfornologas es XML (eXtensible Markup maciones para adaptarse a los requiLanguage), o lenguaje de anotacin sitos pertinentes. extensible. XML no es slo un lenLa caracterstica esencial de XML es guaje, es una manera de especificar que permite estructurar la informalenguajes, de ah que sea extensicin y luego aplicar transformaciones ble. Por lo tanto, XML no es un lenpara su visualizacin. Recupera inforguaje 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 standard para documentos estructurados, sumamente complejo para poder servir documentos web. Lo normal es que XML se utilice en el La reformulacin de HTML 4.0 a XML 1.0 ha dado servidor y se sirva lugar a XHTML 1.0. Documentacin en castellano: otro tipo de doculeo.worldonline.es/jlgranad/xhtml/xhtml1.htm#toc. mentos, HTML por ejemplo, que se obtienen a base de el formato solicitado. Para obtener transformaciones. Esto hace que XML informacin ms detallada, visita html.programacion.net/xml. s se use dentro de entornos de aplica-
Se pueden obtener programas ya hechos en pginas espaolas, pero una de las ms completas es www.visualbasicscript.com.
mucho ms potente a la hora de utilizar las caractersticas de un lenguaje de programacin. Un buen tutorial sobre VBS lo podemos encontrar en www.programacion. com/asp/tutorial/vbscript, y una direccin de muchsimos recursos de VBScript es www.visualbasicscript.com.
cliente VBS, est basada en la programacin de Visual Basic. Al igual que el resto de los lenguajes de script vistos hasta ahora, ASP se compone de pginas en formato ASCII. Al igual que VBScript, permite el uso de componentes ActiveX, pero adems puede conectarse a una base de datos para in-
Frente a las posibilidades de Flash, el lenguaje de script es muy manejable y, sobre todo, es gratuito.
tercambiar informacin. La gran diferencia de funcionamiento es que ASP se ejecuta en el servidor y el resultado lo enva al cliente. Una pgina ASP es como un documento HTML, pero de extensin .asp (aunque lo que contenga sea cdigo HTML). Para poder ejecutar pginas ASP debemos disponer como mnimo de: Windows XP PRO con IIS (Internet Information Server) instalado (es un componente del sistema operativo). Windows 2000 Server con IIS. Windows 95/98 con El lenguaje JavaScript ofrece la posibilidad de crear PWS (Personal Web Server) aplicaciones sencillas y compatibles con cualquier instalado. ordenador. Un buen tutorial para montar nuestro servidor web desde En el servidor Hemos comentado la parte que se cero con Windows XP PRO se puede ejecuta en el cliente. Es necesario tener encontrar en www.compuayuda.net/ ciertas nociones de la parte servidor. Si guia25-1.htm. Un ejemplo de pgina ASP sera: alguna vez montamos nuestro propio negocio sin alojamientos contratados y <%@ Language = VBScript %> nuestro PC se convierte en servidor, ha<html><head> br que saber qu necesitamos para <title>PC Today</title> dar servicio a nuestros clientes. </head><body> ASP (Active Server Pages) es la tec<H1>Hoy es <%= now %></H1> nologa de servidor desarrollada por </body></html> Microsoft. Homloga a su versin En la pgina www.desarrolloweb.com/ directorio/programacion/asp han realizado un gran trabajo de comparativas entre estos tipos de tecnologas de scripting, no lo pases por alto.
Dentro de los servidores web gratuitos, el ms difundido y eficiente es Apache, principalmente sobre Linux.
El resultado de esta pgina sera: Hoy es 5/10/2004 10:01:59 AM Existen bastantes variaciones entre VBScript y ASP; para empezar, se indica mediante la etiqueta <%@ Language
En el caso de Windows XP, el servidor de pginas web es un componente ms del sistema.
= VBScript %> que vamos a utilizar Visual Basic Script en el servidor. Todo lo que queremos ejecutar en el servidor ir dentro de las etiquetas <% %>. En www.desarrolloweb.com/manuales/8 hay un buen tutorial sobre ASP y PWS. Dentro de las opciones que presentan los script que se ejecutan en el servidor, tambin est PHP (PHP: Hypertext Preprocessor). La versin homloga de ASP en versin gratuita. La pgina web donde obtener informacin y poder descargar su intrprete es www.php.net. La parte dedicada a informacin y manuales en espaol se encuentra en www.php.net/manual/es/. Al ser gratuito, su recomendacin es utilizar como servidor web Apache 1.3.x, www.apache.org, y la base de datos MySQL, www.mysql.com. s
N 93
57
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.
Gua del curso

1. Introduccin al retoque fotogrfico.
Primer contacto con las herramientas de Photoshop 7 y Paint Shop Pro 7. Conceptos bsicos. Selecciones sencillas. Mscara rpida. Extraer. The GIMP. PC Today n 94
2. Seleccin avanzada.
Seleccin avanzada. Curvas de Bezier. Opacidad. Trabajo bsico con capas. PC Today n 95 PC Today n 96
3. Objetos mltiples.
Trabajo avanzado con capas. Modos de color. Canales y trazados.
4. Fotgrafos digitales.
Adquisicin de imgenes. Edicin fotogrfica. Modificacin del color. Eliminacin de desperfectos. Composicin de escenas. PC Today n 97
5. Diseo para Internet.

Trabajar de cara a la web. Diseo de una interfaz. PC Today n 98 PC Today n 99
6. Trucos avanzados y filtros.

Composicin avanzada. Efectos especiales. Filtros. Texturas.
l mundo de la fotografa ha sufrido una transformacin espectacular en slo una dcada, gracias a la difusin de las cmaras digitales. El ordenador se ha adueado de un hobby aparentemente caro y complicado de dominar que, sin embargo, puede ofrecernos muchas posibilidades sin grandes desembolsos para poder corregir o aadir efectos a nuestras fotos. Una buena cmara y un software potente pueden ofrecer resultados mucho ms satisfactorios que si te limitas a apretar el botn y mostrar las fotos en el televisor. Muchos profesionales y aficionados han optado por un programa que, a pesar de su precio, se ha conver-
tido en todo un referente, Photoshop. Este ttulo de Adobe, www.adobe.es, ofrece posibilidades casi infinitas y no para de evolucionar. En el curso tambin utilizaremos el programa Paint Shop Pro 7, www.jasc.com. sta es la ltima versin en castellano del mismo, hasta que a finales de ao est disponible la versin 8. Dispones de una versin de evaluacin de ambos programas en su pgina web, y en www.softonic.com, con las que podrs seguir y practicar los ejemplos de este curso. En esta primera entrega, puedes ver una descripcin escueta de la barra de herramientas de ambos y algunas de las acciones bsicas que sern muy importantes en las siguientes lecciones. s
60
www.pctoday.es
Retoque fotogrfico. Parte 1

Paleta de herramientas
Adobe Photoshop 7 Paint shop Pro 7
1 2 1 3 5 7 9 11 13 15 17 19 21 23 2 4 6 8 10 12 14 16 18 20 22 15 16 17 18 24 25 26 19 20 21 22 11 12 13 14 9 10 5 6 7 8 3 4
ran u oscurecen zonas de la imagen. La tercera se emplea para aumentar o disminuir la saturacin del color. Seleccin de trazado y selec15 cin directa. Se utilizan para seleccionar todo o parte de un trazado pero sin modificarlos. 16 Texto, horizontal, vertical, seleccin horizontal y vertical. Para escribir texto en horizontal o vertical y para crear selecciones con forma de texto. 17 Pluma. Se utiliza para crear trazados complejos y poder seleccionar elementos de una imagen de forma sencilla y precisa. Ofrece otras herramientas para manejar los elementos de los trazados. 18 Rectngulo, rectngulo redondeado, elipse, polgono, lnea y forma personalizada. Sirven para crear diseos poligonales fciles de modificar. 19 Notas, anotacin sonora. Se usa para crear notas recordatorias, tanto de texto como sonoras. 20 Cuentagotas, muestra de color y medicin. Permite averiguar y utilizar un color al hacer click en una zona. Medicin mide la distancia entre dos puntos. 21 Mano. Mueve la imagen o capa seleccionada dentro de la ventana principal. 22 Zoom. Aumenta o disminuye la zona visible de una imagen. 23 Selector de color. Permite elegir el color que se usar con cada herramienta de dibujo. edicin estndar y 24 Modo derpida. Permite altermscara nar entre el escritorio de trabajo normal o uno con el que crear selecciones complejas con las herramientas de dibujo habituales. 25 Modos de pantalla. Ofrece varios estilos de escritorio donde se muestra una porcin mayor o menor de la zona de diseo y las herramientas. Ir a ImageReady. Lanza la apli26 cacin de diseo para la Red ImageReady, que acompaa a Photoshop. utilizar varias formas como flechas, crculos, etc. Adems de la seleccin a 7 Lazo.alzada, ofrece una versin mano inteligente y otra con manejadores. 8 Varita mgica. Selecciona zonas de una imagen que comparten color u otras caractersticas. 9 Gotero. Se utiliza para seleccionar un color que aparezca en cualquier lugar de la pantalla. 10 Pincel. Herramienta de dibujo natural, a mano alzada. 11 Pincel de copia. Copia una zona de la imagen a otro lugar. Ofrece muchas opciones en su paleta de configuracin asociada. 12 Reemplazar color. Cambia un color de la imagen por otro que se seleccione. 13 Retoque. Desplaza zonas de la imagen para darle distintos efectos como difuminado o enfoque. 14 Eliminar rayaduras. Suaviza pequeas zonas de la imagen para quitar desperfectos. 15 Borrador. Tiene un efecto similar a la herramienta pincel pero quita zonas de la imagen en lugar de pintar. 16 Sello de imgenes. Dibuja, a modo de tampn, los objetos prediseados de una lista. 17 Aergrafo. Dibuja partculas con una separacin variable y produce un efecto de spray. 18 Bote de pintura. Rellena zonas de la imagen y permite aplicar diferentes efectos de fusin. 19 Texto. Permite introducir texto en las imgenes. 20 Diseo. Dibuja formas sencillas, como lneas rectas o flechas. 21 Formas. Crea objetos poligonales y diseos ms complicados, como botones de navegacin. 22 Objeto vectorial. Permite dibujar con puntos y curvas fciles de modificar en cualquier momento. Como se puede comprobar en sus paletas de herramientas, hay algunas comunes en Photoshop 7 y Paint Shop Pro 7. Muchas tareas se pueden realizar con resultados similares en ambos casos. La nica diferencia consiste en el nmero de pasos necesarios en cada una de las aplicaciones. Para completar la lista, Paint Shop Pro 7 tambin dispone de una paleta flotante, que se puede colocar en cualquier lugar de la pantalla, dedicada al control del color y con las siguientes zonas: Selector de color, estilo y texturas. Es el lugar donde elegir el color que se aplicar a cada una de las herramientas de dibujo y el modo en que aparecer. Bloqueo. Indica si se utilizan las caractersticas tpicas de un pincel o las que se encuentran seleccionadas en el instante de dibujar.
Photoshop 7
la y columna nica. Permite seleccionar zonas de una imagen. Si dejas el botn izquierdo pulsado, permite elegir otras formas, adems del marco rectangular. 2 Mover. Se utiliza para desplazar capas u objetos de una imagen. poligonal y lazo 3 Lazo, lazo Permite seleccionar magntico. zonas de una imagen. Si dejas el botn izquierdo pulsado, muestra el lazo poligonal y el magntico. 4 Varita mgica. Selecciona una zona de la imagen que comparte un color similar. 5 Recortar. Permite eliminar de la imagen la zona que queda fuera de la seleccin. 6 Sector y seleccionar sector. Se emplean en la construccin de webs, para dividir las pginas en varias zonas. 7 Pincel corrector y parche. Copian una zona de la imagen en otra lugar para corregir desperfectos. 8 Pincel y lpiz. El pincel se utiliza como herramienta de dibujo natu-
1 Marco rectangular, elptico, fi-
ral. Admite distintas opciones de tamao, forma y transparencia. Tampn de clonar y tampn 9 de motivo. Copia una zona de la imagen a otro lugar, entre capas y entre varios documentos. 10 Pincel de historia y pincel histrico. Con ambos se deshacen operaciones. La diferencia entre ellos consiste en que al utilizar el segundo se aaden a la zona modificada efectos propios de una pintura. 11 Borrador, borrador de fondos y borrador mgico. El primero pinta con el color de fondo. El borrador de fondos sirve para destacar elementos de una imagen y el mgico hace lo mismo pero de forma automtica. 12 Degradado y bote de pintura. La primera rellena una zona con un degradado de color. La segunda sirve para colorear zonas. 13 Desenfocar, enfocar y dedo. La primera aplica un efecto de desenfoque a una zona. La segunda lo contrario. Con la tercera se simula la accin de arrastrar un dedo sobre pintura hmeda. 14 Sobreexponer, subexponer y esponja. Las dos primeras acla-
Paint Shop Pro 7

seleccionada dentro de la ventana. 2 Zoom. Acerca o aleja la imagen en funcin de si se usa con el botn izquierdo o derecho del ratn. 3 Deformar. Se utiliza para rotar, cambiar de tamao y deformar de forma libre una capa o seleccin. 4 Recortar. Adems de recortar zonas a mano, ofrece otras opciones de seleccin por capas. 5 Mover. Sirve para mover capas, guas o marcas de seleccin de una imagen. selecciones 6 Seleccionar. Crea forma de la y permite variar la
1 Flecha. Permite mover la imagen
N 94
61
Curso
Imgenes de mapa de bits

Las fotografas digitales se encuentran en un formato llamado bitmap o mapa de bits, lo cual indica que estn formadas por multitud de pequeos puntos o bits. stos muestran un color cada uno y, en conjunto, dan la sensacin de ser una imagen nica. Puedes comprobarlo con la herramienta zoom de cualquiera de las aplicaciones. Pulsa en el icono de la herramienta zoom. ste se transformar en una lupa con la que podrs pinchar sobre la imagen. Si lo haces con el botn izquierdo, sta se agrandar.
mao. Haz click con el botn derecho sobre la imagen y sta se reducir de tamao en Paint Shop Pro. En Photoshop 7, pulsa la techa Alt del teclado y sin soltarla, pincha sobre cualquir lugar de la imagen. La vista se reducir y podrs ver una zona ms extensa de la misma.
Consejo
Aunque una imagen ofrezca una calidad muy buena en la pantalla y sea difcil apreciar los puntos que la forman, 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 las herramientas de zoom, para asegurarte antes de usar la impresora.
3
Pulsa con el botn derecho del ratn sobre la imagen y arrastra el puntero, la zona elegida aumentar de ta-
Resumiendo...
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. 3 Para alejar en Photoshop pulsar Alt y sobre la imagen.
Elige un lienzo a tu medida

1 Photoshop
El lugar donde se colocan las imgenes de Photoshop se llama lienzo. Aqu es donde puedes colocar todas las imgenes que quieras y modificarlas a tu antojo. Sobre el lienzo se colocan las capas, los objetos o, simplemente, una imagen nica o fondo. Al abrir una fotografa en Photoshop, lo que realmente se abre es un lienzo donde la nica imagen corresponde al fondo de la misma. Para crear un documento desde cero, en el que poder importar cualquier fotografa, abre el men Archivo de la barra superior de herramientas. Selecciona la opcin nuevo. En la ventana que se abre a continuacin, se pueden elegir los parmetros del nuevo lienzo. Escribe el nombre que tendr el archivo de la imagen. El formato en que se guardar la imagen se aplicar en el momento de guardarla, ahora no es necesario tenerlo en cuenta. Selecciona un tamao para el lienzo en la lista. Si no aparece ninguno que se adapte a tus necesidades, introduce los datos en pxeles en las casillas de Anchura y Altura. Para elegir otro tipo de medida, pulsa en las flechas situadas a la derecha de cada casilla. Si vas a imprimir la imagen, aumenta la resolucin que aparece en la casilla siguiente, hasta por lo menos 300 ppp. Por defecto es 72 ppp (pxeles por pulgada), que es equivalente a la que muestra un monitor de ordenador. Selecciona el modo de color con la flecha de la siguiente casilla. Elige
RGB si vas a utilizar el monitor, un vdeo o la televisin para mostrar tus imgenes. Si vas a imprimirlas con buena calidad, selecciona la opcin CMYK, ya que es la que ms se acerca a la forma de trabajar de las impresoras. La ltima caracterstica que debes elegir es el tipo de fondo que mostrar el documento. Selecciona Blanco en la lista desplegable y pulsa aceptar. La opcin Color
de fondo utilizar el color que se encuentre seleccionado en la barra de herramientas y Transparente, no mostrar ningn color, con lo que har ms sencillo el trabajo con elementos transparentes. Aunque en la pantalla aparezca un tramado de cuadros, como un tablero de ajedrez, stos no se consideran parte de la imagen y no se imprimirn.
Resumiendo...
1 Abrir men Archivo 3 Seleccionar nuevo. 2 Escribir el nombre 3 Seleccionar tamao 3 Seleccionar el modo de
color.
3 Seleccionar fondo blanco.
2 Paint Shop Pro
Consejo
Una imagen no gana calidad si se aumenta su tamao, una vez dentro del programa. 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 que s es posible, es reducir la resolucin de una imagen hasta que encaje en la pantalla del ordenador o en una pgina web. De esta forma, se podr ver en su totalidad sin necesidad de moverla.
Elige la opcin nuevo que se encuentra en el men Archivo de la barra superior de herramientas. En la venta que se abre a continuacin, elige un ancho y alto de imagen que se ajuste a tus necesidades. Para ello, pulsa en las flechas que hay junto a las casillas Ancho y alto o introduce la cantidad directamente en ellas. La resolucin que aparece por defecto es 72 p-
xeles por pulgada. Se refiere al nmero de puntos de la imagen o bits que caben dentro de la unidad de medida elegida. Cuanto mayor sea la cifra, ms resolucin y calidad podr tener la imagen. Elige 300 ppp si vas a imprimir.
Selecciona el color blanco en la casilla Color de fondo de la zona Caractersticas de la imagen. As, tendrs un fondo blanco que destacar y te permitir saber si los ele-
62
www.pctoday.es

mentos de tu lienzo han encajado correctamente con el fondo. Elige 16.7 millones de colores, ya que es la mxima profundidad de color que permite el programa. En documentos Si la imagen se queda pequea para tus necesidades, todava puedes ampliar o reducir el tamao del lienzo. Selecciona la opcin agrandar del men Imagen que se encuentra en la barra de herramientas superior. Cambia las cifras que muestran la cantidad de pxeles que tiene el lienzo. Selecciona las casillas Centrar la imagen horizontal y verticalmente. Si tienes una imagen en tu lienzo, se situar en el centro del mismo. Vara las can-
Formatos admitidos por Paint Shop Pro 7 Amiga iff (*.IFF) SGI (*.RGB, *.BW, *.RGBA, *.SGI) Kodak Digital Camera (*.KDC) Tagged Image File Format (*.TIF, *.TIFF) Windows Enhanced Meta (*.emf) Windows Meta (*.WMF) Autodesk Drawing Interchange (*.dxf) Compatible con JPEG y JFIF (*.JPG, *.JIF, *.JPEG) Compuserve Graphics Interchange (*.GIF) Computer Graphics Metafile (*.CGM) Corel Clipart (*.CMX) Deluxe Paint (*.LBM) Dibujo Corel Draw (*.CDR) Dibujo Ventura/GEM (*.GEM) Dr. Halo (*.CUT) FlashPix (*.FPX) GEM Paint (*.IMG) Kodak Photo CD (*.PCD) Lenguaje grfico HP (*.HGL, *.HPG, *.PGL) Lotus Pic (*.PIC) Macintosh PICT (*.PCT) MacPaint (*.MAC) Mapa de bits Porttil (*.PBM) Mapa de Bits Windows u OS/2 (*.BMP) Mapa de Bits WordPerfect (*.WPG) Micrografx Draw (*.DRW) Microsoft Paint (*.MSP) Paint Shop Pro Imagen (*.PSP, *.JLS, *.PFR, *.TUB) PC Paint (*.PIC) Photoshop (*.PSD) Portable Greymap (*.PGM) Portable Network Graphics (*.PNG) Portable Pixelmap (*.PPM) PostScript Encapsulado (*.EPS, *.AI, *.PS) Raw File Format (*.RAW) Sun Raster Image (*.RAS) Tono contnuo SciTex (*.SCT, *.CT) Truevision Targa (*.TGA) Windows Clipboard (*.CLP) Windows o Compuserve RLE (*.RLE) Windows u OS/2 DIB (*.DIB) WordPerfect Vector (*.WPG) Zsoft Multipage Paintbrush (*.DCX) Zsoft Paintbrush (*.PCX)
en blanco y negro o ilustraciones, puedes elegir una cantidad inferior de colores. Es recomendable elegir una cantidad alta de colores, incluso si vas a utilizar slo unos pocos, ya que siempre se puede reducir la cantidad de stos en el ltimo paso de la edicin. Pulsa Aceptar y tendrs un lienzo en blanco donde poder experimentar con las herramientas que ofrece el programa.
tidades de la zona inferior para elegir el lugar en que quedarn los grficos que hubiera en tu lienzo, antes de modificarlo. Si no haba nada en el lienzo, slo aparecer con un tamao mayor.
Resumiendo...
1 Eligir la opcin nuevo 3 Eligir ancho y alto de imagen. 2 Seleccionar blanco como color de fondo 3 Elegir 16.7 millones de
colores.
3 Pulsar Aceptar. 4 Seleccionar agrandar 3 Cambiar resolucin 3 Seleccionar Centrar

imagen.
Selecciona elementos de una imagen

En una fotografa, no tienes por qu estar disconforme con todos los elementos de la misma. Para seleccionar lo que realmente te disgusta o lo que ms te interesa y modificarlo a tu gusto, dispones de varias herramientas de seleccin. Algunas son ms precisas que otras, pero es muy importante saber cul se adapta mejor a cada situacin y al tiempo disponible. Vamos a ver algunas que son comunes a ambas aplicaciones. La imagen que has elegido aparecer en pantalla. Utiliza la herramienta zoom hasta que la imagen ocupe casi toda la pantalla.
tn del ratn, desplaza el puntero hasta que el recipiente del ejemplo est dentro del recuadro. Suelta el botn del ratn y la seleccin aparecer rodeada con una lnea discontinua que parpadea. Accede al men edicin de la barra de herramientas superior. Selecciona la opcin Copiar. Dirgete al men Archivo y crea un nuevo documento de la manera que explicamos al principio de la leccin. Deja las opciones como aparecen en la pantalla de configuracin y pulsa
aceptar. Habrs creado un nuevo documento con las medidas exactas de la seleccin que has hecho. Elige la opcin Pegar del men Edicin de la barra de herramientas. El contenido del recuadro de la seleccin aparecer dentro. Si te fijas en la ventana de la derecha, en la seccin con el ttulo Capas, vers que hay dos iconos; un recuadro blanco y otro con el contenido de la imagen. Las capas contienen los elementos que colocas dentro del lienzo. En este caso, dispones de una capa que es el fondo de color blanco y otra que contiene la imagen que acabas de pegar. En Photoshop 7, si no cambias las opciones, se crea una capa nueva de forma automtica cada vez que utilizas el comando pegar algn conteni-
1 Photoshop
Elige una imagen con la que desees practicar. En este caso usaremos Pimientos.jpg que est en la carpeta de muestras de Photoshop, C:\Archivos de Programa\Adobe\Photoshop 7.0\Muestras\. Selecciona la opcin Abrir del men Archivo y bscala en el disco duro. Pulsa aceptar cuando la hayas encontrado.
Pincha en la herramienta Marco rectangular de la barra de herramientas principal. Pulsa cerca de la esquina superior izquierda de la imagen y sin soltar el bo-
N 94
63
Curso
do. Otro mtodo, mucho ms rpido, de quedarte con una zona rectangular de la imagen y deshechar el resto, es la herramienta recortar. Seleccinala en la barra de herramientas, pulsa y arrastra en un punto inicial de la imagen, Suelta el botn y una vez que tengas dentro del rectngulo el rea elegida, haz doble clik en el interior de la seleccin.
Resumiendo...
1 Abrir men Archivo 3 Buscar imagen 3 Pulsar aceptar 3 Utilizar
zoom.
2 Pinchar en Marco rectangular 3 Seleccionar el rea rectangular. 3 Copiar 3 Crear documento. 4 Pegar nueva capa.
2 Paint Shop Pro

Acerca la imagen con la herramienta zoom. Pincha en la herramienta lazo de la barra principal. El cursor se transformar en la herramienta que has seleccionado. Haz
al punto de inicio, deja de apretar el botn y comprueba que la lnea de seleccin se corresponde con el objeto que deseas. Una vez que has hecho la seleccin, siempre puedes aadir o quitar zonas al contorno que has dibujado. Incluso puedes crear agujeros y zonas independientes dentro de una imagen. Para poner
un ejemplo, vamos a eliminar el trozo de tallo y a aadir el tallo verde de la zona superior. Pulsa la tecla Alt y sin soltarla, comprueba que junto al puntero del ratn ha aparecido un smbolo menos. Esto quiere decir que el contorno que definas con la herramienta se restar del que ya tengas seleccionado. Rodea el tallo del centro de la misma forma que lo has hecho con el tomate en el paso anterior. Cuando termines, vers que hay una nueva lnea discontinua dentro de la anterior. Ahora la seleccin comprende slo la zona roja del tomate.
Pulsa cualquiera de las dos teclas de Maysculas que hay en el teclado. Sin soltarla, rodea el tallo verde que est encima del tomate. Suelta primero el botn del ratn y despus la tecla mayscula. El tallo ya forma parte de la seleccin.
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 seguir el contorno de una de las piezas que aparecen en la imagen sin levantar el dedo. Cuando hayas llegado 3 Pulsar Maysculas 3 Rodear el tallo 3 Soltar botn del ratn 3 Soltar
maysculas.
Uso de la mscara rpida

Photoshop
El modo mscara rpida que ofrece Photoshop permite utilizar las herramientas tpicas del dibujo, como pinceles, para crear selecciones. Se trata de una forma rpida y sencilla de hacer que los bordes de las reas seleccionadas sean ms suaves o que ofrezcan un estilo ms natural y perfecto. Crea una seleccin en Photoshop con cualquiera de las herramientas especiales de la barra principal y el mtodo explicado en pasos anteriores. Selecciona el botn Mscara rpida que se encuentra en la zona inferior de la caja de herramientas principal. Comprueba que la zona seleccionada anteriormente, es la nica que conserva los colores originales. El resto, muestra un tono rojizo, que indica que no est dentro de la seleccin. Cualquier accin que realices con las herramientas de dibujo, har que vare la seleccin actual. Un buen ejemplo es el pincel, que permite dibujar selecciones y aprovechar sus posibilidades de grosor, trasparencia o dureza. Con el borrador, se puede eliminar la seleccin, algo tambin muy til y rpido. Pulsa el botn Editar modo estndar, que se encuentra junto al de Mscara rpida. As volvers a la situacin original con las reas seleccionadas delimitadas por lneas discontnuas. Ahora, ajustaremos
que deseas seleccionar, lo haces con la que quieres eliminar. Para cambiar las propiedades de la imagen que indica la mscara, haz doble click en el botn mscara rpida y aparecer una ventana de opciones. Elige ah, el color que tendrn las reas que quedarn en la zona de mscara, el de las seleccionadas y la transparencia. Pulsa Ok. un poco las seleccin, haz click en la herramienta pincel de la barra principal, y pinta el borde de la imagen hasta que toda la zona que deseas delimitar est libre de color. El mtodo de trabajo es mucho ms sencillo si en lugar de pintar la zona
Resumiendo...
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 Pintar las zonas que delimitan la seleccin.
2
64
www.pctoday.es
Curso
Selecciona ms rpidamente
Photoshop
Una de las herramientas ms avanzadas de Photoshop 7 es el filtro Extraer. ste permite seleccionar perfiles y zonas de una imagen que, de otra forma, requeriran mucho trabajo y paciencia. Te mostramos cmo seleccionar el fondo de una imagen, para poder eliminarlo o sustituirlo por otro. Es aconsejable que elijas una fotografa que contenga una silueta bien definida, por ejemplo, la del guila que se encuentra entre las muestras de Photoshop, aguila.psd. Selecciona la opcin Extraer del men Filtro que se encuentra en la barra de herramientas superior. Pulsa en la herramienta Resaltador de bordes que se encuentra en la barra de la izquierda, o la tecla B del teclado, para activarla. En la seccin Opciones de herramienta, que se encuentra a la derecha de la ventana, elige el tamao 15 de pincel. Con el botn izquierdo del ratn, pulsa y arrastra el cursor alrededor de la figura que deseas seleccionar, como muestra la
Atajos de teclado
La mayora de las acciones que se realizan con el ratn, tanto en Photoshop como Paint Shop Pro, se pueden acelerar mediante el uso del teclado. La pulsacin de algunas combinaciones de teclas, no slo ahorran tiempo, sino que enriquecen los resultados, ya que permiten acciones ms complejas. Algunas de las ms utilizadas durante el curso sn: Ctrl + N Nuevo documento. Ctrl + O Abrir documento. Ctrl + S Guardar documento. Ctrl + C Copiar. Ctrl + V Pegar. Ctrl + X Cortar. Mayus + Herramienta seleccin Aadir a la seleccin. Alt + Herramienta seleccin Restar a la seleccin. Ctrl + Z Deshacer accin. s
combinacin de teclas Ctrl+Z o elige Deshacer del men Edicin de la barra superior. Cuanto ms estrecha y ajustada sea la lnea trazada, ms precisa ser la operacin y la seleccin saldr mejor. Tambin puedes activar la casilla resaltado suavizado para que la lnea se ajuste sola. imagen. Si deseas que el color sea diferente y que se distinga mejor del fondo, cmbialo en la seccin resaltar. Puedes dejar de hacer click en cualquier momento y retomar el trazado despus, la nueva lnea se aadir a la anterior. Si te equivocas, utiliza la Selecciona la herramienta relleno en la columna de la izquierda, que est representada por un bote de pintura. Elige un color para el trazado y
para el fondo, que se diferencie bien del resto de colores de la imagen, con los botones Resaltar y Rellenar. Pincha en la zona que deseas conservar de la imagen y pulsa en el botn previsualizar. Pulsa el botn aceptar si ests de acuerdo y podrs ver la imagen libre del fondo y lista para continuar con la siguiente entrega del curso. s
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.
The GIMP, la alternativa gratuita

Las herramientas que utilizaherramienta predilecta para remos durante el curso, no este tipo de trabajo. son las nicas disponibles. Respecto a los formatos grJunto a desarrollos de granficos que acepta, incluye los des compaas de software, ms habituales como PSD de tambin se pueden encontrar Photoshop, aunque ste slo buenos programas gratuitos para adquirir datos. Es capaz como the GIMP, de crear animaciones en forwww.gimp.org. Es un programato MPEG y los habituales ma que no para de mejorar, GIF o PNG de cara a Internet. gracias a su cdigo abierto y En cuanto a las caractersque cualquiera puede modifiticas y herramientas de edicar con total libertad. cin, admite capas y canales Adems, ofrece versiones, filalfa para trabajos avanzados. tros y complementos nuevos Todo esto, con unos requisicada pocos das. Otro punto The GIMP, www.gimp.org, utiliza ventanas flotantes tos que no exigen una a su favor es que no slo se para mostrar todos los elementos del programa. mquina demasiado potente limita al sistema Windows o o moderna, a partir de edicin en castellano y en otras lenMac, sino que est disponible tambin Windows 98 y 64 Mb de RAM. guas diferentes al omnipresente para Linux y otros sistemas operativos Tambin puedes encontrar el prograingls. Esto es fruto del trabajo de menos habituales. Es muy importante, miles de entusiastas que lo consideran ma en www.softonic.com, con una pequea explicacin de cmo descardestacar que al poco tiempo de lanel mejor software para la edicin de garlo, totalmente en castellano. s zarse una nueva versin, aparece su imagen. stos lo han convertido en su
Formatos admitidos por Photoshop 7 Photoshop (*.PSD, PDD) Archivo PICT (*.PCT, *.PICT) BMP (*.BMP, *.RLE, *.DIB) Compuserve GIF (*.GIF) Photoshop Encasulated PostScript (*.EPS) Photoshop DCS 1.0 (*.EPS) Photoshop DCS 2.0 (*.EPS) Filmstrip (*.FLM) JPEG (*.JPG, *.JPEG, *.JPE) Mapa de bits inalmbrico (*.WBMP, *.WBM) PDF genrico (*.PDF, *.PDP, *.AI) EPS genrico (*.AI3, *.AI4, *.AI5, *.AI6, *. AI7, *. AI8, *. PS, *.EPS) PCX (*.PCX) Photoshop PDF (*.PDF, *.PDP) Retocar imagen de Acrobat (*.PDF, *.AI, *.PDP) Photo CD de Kodak (*.PCD) Pixar (*.PXR) PNG (*.PNG) RAW (*.RAW) Scitex (*.SCT) Targa (*.TGA, *.VDA, *.ICB, *.VST) TIFF (*.TIF)
N 94
65
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.
Gua del curso

2. Corrige el aspecto general de tus fotos.

Brillo y contraste, capas de ajuste, tono, exposicin y color. PC Today n 95
3. Tcnicas de reparacin de fotos (I).

Reparar manchas y texturas, corregir polvo y rascaduras, eliminar el moir. PC Today n 96
4. Tcnicas de reparacin de fotos (II).

Eliminar araazos rectos, borrar elementos no deseados, minimizar manchas. PC Today n 97
5. Recreando fotos creativamente.

Fondos personalizados, bordes y marcos creativos, modificar personajes. PC Today n 98
6. Embellecer y refinar retratos.

Eliminar defectos de la piel, enfoque suavizado, disimular el paso del tiempo, mejorar los retratos con luz. PC Today n 99
a mayora de los usuarios que han probado alguna vez Photoshop o Paint Shop Pro, seguramente han jugueteado a intentar hacer montajes fotogrficos (por ejemplo, reemplazar un personaje por otro, eliminar algn elemento no deseado, etc.). Son caractersticas espectaculares que hoy en da estn al alcance de cualquier persona con un ordenador y un poco de habilidad. Pero muchos pasan por alto algunas funciones muy sencillas de ambos programas, con las cuales es posible mejorar notablemente el aspecto general de las fotografas, tanto de las tomadas digitalmente como las escaneadas del papel.
La sutileza al iluminar una foto, puede crear un clima y una atmsfera muy particular; una composicin sosa o sin inters, puede transformarse en una imagen hermosa, en un placer para la vista, con una correcta iluminacin. La disposicin de los elementos de una imagen tambin se puede modificar ligeramente, sin que se note, para corregir los efectos de la improvisacin o la falta de tiempo cuando hiciste una foto. En este captulo del curso de Fotografa Digital aprenders a utilizar estas sencillas herramientas, pero sobre todo a entrenar tu ojo y tu buen gusto para conseguir los mejores resultados en las fotos digitales. s
54
www.pctoday.es
Trabajar con brillo y contraste

Si ajustamos correctamente los niveles de brillo y contraste, podemos mejorar de un modo notable el nivel de detalle y nitidez de cualquier fotogafa. Son parmetros que afectan radicalmente a la calidad de cualquier imagen. Incluso pueden "salvar" algunas fotografas tomadas en malas condiciones, como interiores con escasa iluminacin, o contraluces al aire libre. Antes de conocer su funcionamiento, es importante definir claramente qu significan: Brillo: Es la luminosidad u oscuridad relativa al color, y se mide habitualmente mediante un porcentaje comprendido entre 0 (negro) y 100 (blanco). Contraste: Es el ajuste de las luces y las sombras de la imagen. Los pxeles ms claros y los ms oscuros, se convierten a blanco y a negro, respectivamente; as mejora notablemente el aspecto de imgenes fotogrficas.
Consejo
En Photoshop 7, los valores de brillo y contraste pueden funcionar de manera automtica, con el uso de parmetros estandarizados. Para ello v al men Imagen, selecciona Ajustes y abre Niveles Automticos (o pulsa el atajo de teclado Mays.+Ctrl+L). Ten en cuenta que esta caracterstica, al ser "estandarizada", funciona de manera similar sobre todas las imgenes, con lo que no siempre obtendrs unos resultados ptimos. Si no ests seguro de haber obtenido un buen resultado con Niveles Automticos, mejor utiliza Brillo y Contraste manualmente, segn tu propio criterio.
cacin Previsualizar para ver cmo afectarn los cambios introducidos a la imagen final. Intenta que la imagen sea ntida, con un buen contraste, y que se observen los detalles con gran claridad.
Haz click en el botn Aceptar para que los cambios se apliquen a tu fotografa.
Para modificar los valores de Luminosidad y Porcentaje de contraste, introduce la cantidad directamente en la casilla correspondiente, pulsa en las flechas hacia arriba o hacia abajo o despliega el men representado por los tringulos y eli-
con algo de tiempo y prctica conseguirs resultados cada vez mejores.
Photoshop
Paint Shop Pro

Desde el men Archivo, selecciona Abrir. Luego elige una imagen, seleccinala, y haz click en el botn Abrir.
1
Existe un ejemplo muy sencillo de aplicacin de brillo y contraste en la vida cotidiana: el control de iluminacin del televisor. Ambos parmetros se ajustan en forma independiente, pero se aplican con la misma intensidad en toda la imagen. Los controles de brillo y contraste trabajan con cualquier modo de color, pero para el siguiente ejemplo prctico, es recomendable que utilices alguna foto que encuentres, en blanco y negro (escala de grises), o incluso alguna instantnea que consideres muy oscura, para comprender mejor su funcionamiento. En ambos casos, observa la imagen detenidamente, e intenta conseguir un equilibrio entre las zonas iluminadas y las ms oscuras; los blancos no deben estar sobreexpuestos (exceso de luz), ni las zonas oscuras deben aparecer como grandes manchas totalmente negras. Lo ideal es conseguir el mayor nivel de detalle y "suavidad" posibles en la foto. Experimenta y entrena tu ojo,
En el men Archivo, selecciona Abrir y escoje la imagen de tu disco duro o CD. Haz click en 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 izquierda del icono del ojo y, as, verificar los cambios que se produzcan en la fotografa, de forma automtica. Haz click en el botn Aceptar de la zona inferior para aplicar las modificaciones que hayas elegido en el paso anterior.
Abre el cuadro Brillo y Contraste desde el men Imagen, luego elige Ajustes y finalmente selecciona el apartado Brillo y Contraste. Se abrir el cuadro de dilogo.
Accede al men Colores de la barra de herramientas superior. Despliega las opciones que cuelgan de la seccin Ajustar. Luego selecciona Luminosidad/Constraste (o pulsa la combinacin de teclas Maysculas+B); se abrir un cuadro de dilogo.
Resumiendo...
Photoshop
Una vez en la nueva ventana, desplaza ambos reguladores hacia la derecha, cada uno en forma independiente (tambin puedes teclear los valores); marca la casilla de verifi-
1 Abrir men Archivo 3 Seleccionar imagen 2 Ir al Men Imagen 3 Seleccionar Ajustes 3 Abrir Brillo y Contraste 3 Mover los dos reguladores hacia la derecha 3 Previsualizar 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
Curso
Utilizar capas de ajuste

Antes que nada: Qu son las capas y cmo se utilizan? Las capas funcionan como si fueran hojas transparentes, que pueden apilarse unas sobre otras. Cada una de esas capas es independiente, de tal manera que si se trabaja sobre una de ellas, el resto de capas no se modifican. Es posible mover los objetos que se encuentran en cada capa, o cambiar el orden de apilado. Lo que estaba abajo puede moverse arriba, o viceversa. Al tener aislados los distintos elementos que componen una imagen, gozamos de una enorme libertad para retocarlos o reubicarlos, sin preocuparnos por estropear el resto. En Photoshop y Paint Shop Pro puedes encontrar varios tipos de capas: Capas de texto: Permiten escribir, editar y modificarl el texto. res que hemos ingresado si el aspecto general no es satisfactorio.
Photoshop
Abre el men Capa, selecciona Nueva capa de ajuste y finalmente elige Brillo / Contraste.
momentneamente oculta, y podrs ver la imagen sin los cambios que has aplicado. Este procedimiento es muy til para comparar cmo era la imagen antes de los cambios, y cmo ha quedado despus de los cambios. Modifica la opacidad de la capa de ajuste, moviendo el regulador (desplazando el regulador a la derecha, los cambios sern mas intensos, y movindolo hacia la izquierda los cambios sern ms leves). Intenta conseguir siempre una imagen ntida y pura.
Consejo
Las capas de ajuste pueden modificar tambin otras variables, como Niveles, Tono y Saturacin, Equilibrio de Color, Curvas, Correccin selectiva, etctera. Ms adelante aprenders a utilizar las capas de ajuste combinadas con los modos de fusin, y obtendrs cada vez ms herramientas para retocar y corregir tus fotos digitales.
5
Ponle un nombre a la nueva capa (por ejemplo Brillo Nuevo) y deja el resto de valores exactamente igual que como aparecen por defecto (modo normal, opacidad 100%).
la casilla de verificacin. En la solapa Ajuste del mismo cuadro de dilogo, modifica los parmetros de Luminosidad y Constraste moviendo los reguladores. Tu misin siempre es conseguir una imagen que no sea borrosa. Cntrate en la claridad de los detalles.
3 4
2
Capas vectoriales: Permiten crear trazados y formas vectoriales. Capas de relleno: En stas se pueden aplicar motivos, patrones o degradados. Capas de ajuste: Son las que ms nos interesan para manipular fotografas digitalmente. Las capas de ajuste permiten modificar la informacin de color de los pxeles ubicados por debajo de ellas; nos dan la posibilidad de experimentar con variaciones de tono y de color, sin necesidad de modificar sus pxeles constantemente. Los cambios se aplican slo a la capa de ajuste y afectan a la capa subyacente. En otras palabras, la capa de ajuste funciona como un "filtro", a travs del cual podemos ver las capas inferiores. Las capas de ajuste afectan a todas las capas ubicadas debajo; algo smamente til ya que podemos corregir varias capas a la vez con un solo ajuste, en lugar de efectuar cada retoque por separado. Aplicar variables simples como brillo y contraste (o algunas ms complejas como niveles, tono, saturacin, etc.) mediante las capas de ajuste, otorga un mayor control, y minimiza el margen de error, ya que los cambios son aplicados slo a la capa elegida, y no a la imagen real. De esta manera, podemos eliminar cuando queramos la capa de ajuste, o bien modificar los valo-
Paint Shop Pro
1 2
Ve al men Capas, elige Nueva capa de ajuste, y selecciona Luminosidad / Contraste.
Cuando hayas conseguido que la imagen sea lo suficientemente ntida, pulsa en Aceptar para aplicar los cambios a la fotografa. En la Paleta Capas observa la capa de ajuste que has creado. Puedes modificar su opacidad, moviendo el regulador que aparece en el sector derecho de la ventana. Si la opacidad est por ejemplo al 50%, los ajustes de brillo y contraste se reducirn y sern ms leves. Evita contrastar demasiado la imagen, ya que puede pixelarse y perder sutileza.
Se abrir el mismo cuadro de dilogo de Brillo y Constraste que ya conoces, pero el resultado de este trabajo ser distinto ya que lo aplicars a una Capa de Ajuste. Mueve los reguladores hacia la derecha buscando la mayor nitidez posi-
Se abrir la ventana Propiedades de capa. En la solapa General, pon un nombre a la capa, deja el Modo de Mezcla en Normal, Opacidad 100%, y tilda
Resumiendo...
Photoshop
1 Ir al Men Capa 3 Nueva Capa de Ajuste 3 Elegir Brillo y Contraste 2 Nombrar la nueva Capa 3 Dejar valores por defecto 3 Aceptar 3 Mover reguladores hacia la derecha 3 Verificar cambios 3 Aceptar
ble en la imagen. Tras verificar los cambios pulsa el botn Aceptar. Abre el men Ventana, y elige Capas para observar la capa de ajuste que has creado. Si haces click en el icono del ojo, la capa queda
4 Ir al men Ventana 3 Elegir Capas 3 Observar Capa de Ajuste 5 Modificar opacidad de la capa buscando nitidez
Paint Shop Pro

1 Ir al Men Capas 3 Nueva Capa de Ajuste 3 Luminosidad/Contraste 2 Nombrar Capa 3 Opacidad 100% 3 Aumentar Luminosidad 3 Click en Aceptar 4 Ir a la Paleta Capas 3 Reducir la opacidad de la Capa
56
www.pctoday.es
El tono, las curvas y el contraste

Photoshop y Paint Shop Pro cuentan con un arma an ms poderosa para modificar los ajustes de brillo y contraste de una imagen: la herramienta Curvas. sta nos permite controlar cada una de las 256 sombras en forma independiente. La herramienta Curvas puede ajustar la gama de tonos de una imagen, modificando cualquier punto de la escala tonal 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, luces, sombras y medios tonos. haz click en el punto de control y sin soltar el botn izquierdo desplzalo hacia abajo, para oscurecer las sombras. Pulsa Aceptar. Como resultado, las sombras ahora son ms oscuras, y las luces ms claras, de manera que la fotografa est ms contrastada y tiene mejor definicin.
El cuadro de dilogo curvas
Photoshop
Abre el men Imagen, despliega el submen Ajustes y luego elige Curvas (o si prefieres pulsa el atajo de teclado Ctrl + M).
1 Canal: con l puedes restringir
Paint Shop Pro
1
Pulsa Ctrl y haz click simultneamente en un rea clara de la imagen que veas opaca, de manera que necesite mas iluminacin. Esto aadir automticamente una marca (llamada punto de control) en el grfico de Curvas. En el cuadro de dilogo
Dirgete al men Colores y selecciona la opcin Ajustar. Finalmente elige Curvas.
la correccin de brillo y contraste a un canal determinado. 2 Grfico de curva: el eje horizontal representa los valores de luminosidad originales (de entrada), y el vertical, los nuevos valores de luminosidad (de salida). En la lnea diagonal (aparece por defecto) todos los pixeles tienen los mismos valores de entrada y salida. 3 Entrada / Salida: permite ver los valores de entrada y de salida del punto de la curva. 4 Modo Curva / Modo Mapa Arbitrario: con ellos puedes
7 8
cambiar entre los distintos modos de trabajo con curvas. Cargar / Guardar: carga o guarda una configuracin de curvas, para luego aplicarla en otra imagen. Suavizar: permite suavizar la curva creada. Muy til en el modo Mapa Arbitrario. Auto: el programa realiza los ajustes automticamente. Previsualizar: muestra el resultado parcial del efecto de nuestros cambios, a medida que los vamos realizando. Punto blanco, negro, y escala de grises: muestrea los tres valores a partir de la imagen.
En el cuadro de dilogo Curvas, haz click en una zona inferior de la diagonal, para dejar una marca en ella. Luego haz otro click en una zona superior de la misma diagonal, agregando otra marca.
Pulsa el icono que representa un ojo para ver cmo afectan los cambios a la imagen. Finalmente haz click en Aceptar cuando el equilibrio entre las lu-
ces y las sombras sea parejo. Las sombras deben haberse oscurecido, y las luces deben ser ms claras, consiguiendo una mejor nitidez y mayor contraste en la imagen.
Resumiendo...
Photoshop
1 Ir al Men Imagen 3 Seleccionar Ajustes 3 Abrir Curvas 2 Hacer Ctrl + click en zonas claras 3 Mover punto de control para
aclarar an ms 3 Observar cambios
Curvas, haz click en el punto de control que acabas de crear, y sin soltar el botn izquierdo del ratn muvelo hacia arriba para aclarar las luces de la foto. Observa los cambios en la fotografa. Pulsa Ctrl y haz click click en un rea oscura que necesites ens o m b r e c e r. Nuevamente aadirs otro punto de control al grfico. A continuacin
Mueve ambas marcas en forma independiente (primero una, y luego la otra), conseguirs que la lnea recta se curve formando una S. Para mover las marcas debes hacer
3 Ctrl + click en zonas oscuras 3 Mover punto de control para oscurecer an ms 3 Observar cambios
4 Click en Aceptar para aplicar los cambios
Paint Shop Pro

1 Ir al Men Colores 3 Seleccionar Ajustar 3 Abrir Curvas 2 Click dos veces la diagonal 3 Dejar dos marcas click en ellas y luego arrastrarlas, cogidas por los manejadores, sin soltar el botn izquierdo del ratn. 3 Mover marcas para formar una S 4 Click en O j o para ver modificaciones 3 Aceptar
N 95
57
Curso
Corregir y mejorar la exposicin

Ms de una vez te debe haber sucedido que despus de sacar una gran cantidad de fotos de momentos irrepetibles de tu vida, ya sea con una cmara tradicional o con una digital, te has quedado decepcionado con el resultado. Demasiada luz u oscuridad han arruinado tus fotos. Esto se debe a problemas en la exposicin. En fotografa tradicional, la exposicin es el tiempo que debe permanecer a la luz una placa fotogrfica o un papel sensible, de manera que quede impreso. Cuando recibe demasiada luz, se dice que est sobreexpuesta, y cuando es demasiado oscura est subexpuesta. Puede que hayas tomado fotografas en condiciones forzadas, como un contraluz, o bien que por alguna razn no se haya encendido el flash en el momento de la instantnea. Tambin, el paso del tiempo, la luz solar, o la humedad, pueden daar tus viejas fotografas en papel. Siempre es conveniente comenzar a trabajar con una fotografa bien expuesta, sin embargo a veces el fotmetro puede fallar, las pilas de la cmara se agotan, o el clima puede resultar adverso. Como consecuencia, los recuerdos imborrables de tu vida se desvanecen. Aunque la tecnologa no suele hacer milagros, es posible mejorar o corregir muchos de estos problemas de exposicin con las herramientas adecuadas. Selecciona toda la superficie del lienzo de la nueva capa; para ello te dirgete al men Seleccin y elige Todo (o la combinacin de teclas Ctrl + A). Unas lneas punteadas rodearn toda la superficie de la imagen, mostrndote toda el rea seleccionada. Finalmente rellena la nueva capa con el color Gris 50% del siguiente modo: ve al men Edicin y selecciona Rellenar. En el cuadro de dilogo Rellenar, selecciona Color Frontal.
3
En la misma ventana de Propiedades de la Capa, abre el men desplegable Modo de Mezcla. Busca y selecciona la opcin Sombra. Sin salir de la ventana actual, en el apartado Opacidad, completa las modificaciones de la opacidad inroduciendo el nmero 70 en la casilla correspondiente. El resto de opciones no son importantes en este momento y las dejaremos como estn. Haz click en Aceptar para validar los cambios.
En la Paleta Colores, selecciona el color Gris 50% haciendo click en la muestra.
Photoshop
Ve al men Capa, selecciona Nueva Capa (te interesa ponerle un nombre para identificarla, nmbrala por ejemplo Capa para oscurecer).
Sin salir del mismo cuadro de dilogo, en el Modo de Fusin, abre el men contextual. Busca y selecciona Subexponer Color. Esto oscurecer la imagen de un modo muy pronunciado.
Consejo
Si deseas mejorar alguna vieja foto impresa en papel, y dispones adems de su negativo, escanea siempre el negativo, ya que con l obtendrs mejores resultados (muchos escneres actualmente cuentan con esta utilidad de serie). Incluso un negativo extremadamente sobreexpuesto o subexpuesto, siempre contendr ms informacin y detalles que la copia que hayas hecho en papel. Por eso siempre es bueno conservar los negativos, adems de las impresiones fotogrficas.
Ve a la Barra de Herramientas, y selecciona el Bote de Pintura. Ahora haz click en cualquier punto de la imagen (recuerda que ests trabajando sobre la nueva capa que has creado), para rellenar automtica-
mente la capa de color gris. La imagen debe haber mejorado notablemente, estando equilibrados los tonos oscuros y los tonos claros.
Ve a la paleta Capas, y selecciona la capa que has creado haciendo click en su nombre: Capa para oscurecer, vara su opacidad del 100% al 70% desplazando el regulador hacia
Resumiendo...
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 imagen ahora debe tener una correcta exposicin (no debe estar demasiado iluminada, ni demasiado oscura). 5 Ir a Paleta Capas 3 Seleccionar Capa 3 Reducir Opacidad al 70%
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
En la paleta Muestras, selecciona el Gris al 50%. Sita el puntero del ratn sobre las muestras, y un men emergente te informar del valor de cada color. Cuando halles el Gris 50% seleccionalo haciendo click.
Paint Shop Pro

En la paleta Capas, haz click en el icono de la esquina superior izquierda, para crear una nueva Capa. Nombra la nueva Capa como Capa para oscurecer, escribindolo en el mismo cuadro de dilogo.
3 Ir a Paleta Colores 3 Seleccionar Gris 50% 4 Seleccionar Bote de Pintura 3 Click en la imagen 3 Rellenar la capa
con gris
58
www.pctoday.es
Optimizar el color
Seguramente la mayora de tus fotos (tanto en papel como digitales) son a todo color. Por lo tanto, es importante que conozcas algunos fundamentos bsicos de su mundo. Si comprendes profundamente los rudimentos del color y de la luz, seguramente podrs aplicar retoques y mejoras a tus fotografas con mucha ms calidad. Existen bsicamente dos tipos de color: el aditivo, y el sustractivo. Colores aditivos: Se forman a partir de una fuente de luz; por ejemplo, los colores de tu monitor son aditivos ya que utilizan la luz como fuente. Cuando los colores primarios se suman (de ah el nombre de aditivo) crean el color blanco. Observa la imagen en que la suma del rojo, verde y azul dan por resultado el blanco. Colores sustractivos: El color se determina por la absorcin de la luz. Cuando los colores secundarios (cian, magenta y amarillo) se combinan, crean el negro (com o muestra la imagen). La impresin de tinta sobre papel (revistas, peridicos, etctera) es un ejemplo de color sustractivo. Pero para conseguir negros puros y sombras ms intensas, se aade tinta negra en el proceso de impresin. Mediante la combinacin de los colores primarios aditivos, se obtienen los colores primarios sustractivos, y combinando los primarios sustractivos se obtienen los primarios aditivos. Te preguntas para qu sirve este trabalenguas? Pues para algo importantsimo: comprender esta relacin opuesta. Por ejemplo, si en una imagen predomina demasiado el color azul, hay que aumentar el amarillo (adems de disminuir el azul, claro est). El amarillo neutraliza al azul ya que ste es su opuesto. El resultado: una imagen con menos azul y mucha ms calidad! Rebusca entre tus lbumes familiares, y seguramente encontrars alguna foto que haya salido muy oscura, con algn color dominante. Ahora es cuestin de observar detenidamente la imagen, agudizar la vista, y realizar paso a paso el siguiente ejemplo prctico para aprender a corregir tus fotos utilizando los Niveles:
Paint Shop Pro
muestra los cambios que se vayan produciendo mientras modificas los valores siguientes.
Ve al men Capas, elige Nueva Capa de Ajuste, y selecciona el apartado Niveles.
Photoshop
Crea una nueva capa de Niveles: para ello, accede al men Capa, elige Nueva Capa, y selecciona Niveles. Como la imagen est satura-
Desplaza los reguladores hasta quitarle saturacin al color. Primero puedes hacerlo de forma drstica para ver el efecto y, despus, en intervalos suaves para conse-
da de color, el Histograma (el grfico que muestra el cuadro de dilogo Niveles) se muestra muy cargado en la parte izquierda.
Si no has modificado la configuracin por defecto del programa, vers que aparece la solapa correspondiente a la seccin Ajuste. En el men correspondiente a las capas, observa los canales de color y selecciona el que se encuentre ms saturado. Haz click en el icono que representa una flecha y un ojo para que a continuacin se active la opcin y que te
Consejo
Busca alguna zona de la foto que pudiera ser originalmente de blanco puro, o bien la ms iluminada. Debes observar detenidamente la gama de colores y utilizar el sentido comn para decidir cul elegir. Coge la herramienta Cuentagotas Blanco (el tercero cuentagotas de la derecha, dentro del mismo cuadro de dilogo) y con dicha herramienta haz click en la fotografa, sobre la zona potencial de blanco puro. Observa el resultado parcial en la fotografa que has modificado: de esta manera, habrs eliminado la dominante de color. Si el resultado an es una imagen algo oscura, desliza el pequeo tringulo correspondiente al medio tono gris, con pequeos incrementos hacia la izquierda.
Cuando la correccin de una fotografa mediante el uso de Capas de Ajuste comienza a complicarse, lo mejor es volver a empezar. Recuerda que al trabajar solamente en una capa, no ests modificando los pixeles reales de la foto, con lo cual puedes eliminar la capa y crear una nueva. Otra alternativa es crear varias Capas de Ajustes, con distintos niveles y variaciones cada una, de manera que puedas comparar entre un resultado y otro. Recuerda que puedes ocultar y mostrar cualquier capa pulsando en el icono del Ojo (en Photoshop), o en el icono de Gafas (en Paint Shop Pro).
guir un efecto ms acorde con tus intenciones. Ten en cuenta que en el apartado Nivel de Entrada, los colores se aclaran si desplazas el regulador hacia la izquierda, y el siguiente Nivel de Salida, se aclara movindolo hacia la derecha. Las barras de colores que se encuentran en la zona inferior de la pantalla sirven para mostrar las modificaciones que se producen en la zona seleccionada. La superior representa los tonos del original, mientras que la inferior lo hace con los nuevos valores que hayas aplicado. Cuando la foto luzca colorida y brillante (los colores deben ser ntidos y bien diferenciados entre s), haz click s en el botn Aceptar.
Resumiendo...
Photoshop
1 Ir al Men Capa 3 Crear nueva Capa de Niveles 3 Ver Histograma 2 Buscar zona blanca 3 Hacer click con cuentagotas blanco 3 Dominante de color eliminada 3 Aclarar los semitonos
Paint Shop Pro

1 Men Capas 3 Nueva Capa de Ajuste 3 Elegir Niveles 2 Elegir canal saturado 3 Click en ojo para ver cambios 3 Mover reguladores para quitar saturacin 3 Aceptar
N 95
59
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.
Gua del curso






uede que guardes an muchas fotos familiares, cientos de instantneas de tus padres, abuelos y dems ancestros. Sin embargo es muy posible que las fotos estn sucias, con manchas de humedad, decoloridas y llenas de polvo. El primer paso para salvarlas es digitalizarlas. Con la ayuda de un escner es muy sencillo convertir esos frgiles trozos de papel o diapositivas en ficheros de nuestro ordenador. Para el siguiente paso te servirs de tres herramientas: Adobe Photoshop, Jasc Paint Shop Pro y PC Today. Te mostraremos cmo solucionar los problemas de limpieza de cualquier foto que est deteriorada.
A menudo suele ser un trabajo duro y fatigoso corregir este tipo de problemas en las viejas fotografas impresas en papel. Sin embargo, las posibilidades de los programas de retoque fotogrfico hacen que este tipo de correcciones se pueda resolver en unos cuantos y sencillos pasos. Slo habr que aislar el problema y actuar con la herramienta ms adecuada para cada situacin. Finalmente, tampoco hay que olvidar que es posible que por diversas razones tambin las fotos tomadas con una cmara digital muestren defectos parecidos a los que aparecen en antiguas fotografas. En ese caso el proceso de restauracin es el mismo.
58
www.pctoday.es
Reparar manchas y texturas

Tanto Adobe Photoshop como Jasc Paint Shop Pro poseen una innumerable cantidad de herramientas para el retoque digital de fotografas. Sin embargo, algunas de ellas podran ser clasificadas como mgicas, ya que consiguen unos resultados increblemente sorprendentes con una gran sencillez en su uso. Nos referimos al Pincel Corrector y el Tampn de Clonar (en Photoshop) y el Pincel de Copia (en Paint Shop Pro). El funcionamiento de estas herramientas es similar, aunque cada una posee algunas caractersticas que las diferencian entre s. A grandes rasgos, con stas herramientas es posible tomar muestras de la imagen, y pintar con ellas en un rea distinta o incluso en otra imagen. De este modo podemos copiar zonas de texturas (como cielos, rboles, tejidos, piel, etctera) y reproducirlas en la zona donde sea conveniente. Son herramientas
Dirgete una vez ms a la Barra de Herramientas y escoje la herramienta Tampn de Clonar. Luego desde la Barra de Propiedades, realiza la siguiente configuracin: despliega el men Pincel y escoje un grosor
de 15 pxeles y bordes suavizados; en Modo selecciona Normal, Opacidad 100%, Flujo 100%, y marca la opcin Alineado. cha o textura como marcas de dedos, huellas, etctera.
Desde la Barra de Herramientas de Photoshop (suele encontrarse a la izquierda del rea de trabajo) elige la Herramienta Zoom, la reconocers enseguida ya que es el icono de la lupa. Puedes tambin ac-
A continuacin trabajars en detalle. Tomars muestras sanas de la imagen, y las reproducirs sobre las partes daadas. Busca una zona de la foto en buen estado. Con la Herramienta Tampn haz click mientras presionas la tecla Alt, para tomar una muestra de la imagen. Luego suelta la tecla Alt, y comienza a pintar sobre el rea daada. Mientras pintas, Photoshop te muestra dos cursores: el que ests utili-
Paint Shop Pro

Abre el men Archivo, en el men desplegable elige Abrir. Tambin puedes pulsar el atajo Ctrl + O para abir imgenes, o bien pulsar el icono de la carpeta abierta en la Barra
de Herramientas Estndar. Luego escoge alguna fotografa manchada que hayas escaneado previamente, o que tengas almacenada en tu disco duro.
imprescindibles a la hora de retocar cualquier fotografa. En cuanto al Pincel Corrector de Photoshop (includo desde la versin 7), ste no solamente toma como fuente una muestra de la imagen, sino que adems compara la textura, valores de brillo, luz y contraste. En el siguiente ejercicio aprenders a eliminar una gran mancha utilizando algunas de las herramientas de clonacin. Puedes utilizar estas tcnicas para reparar detalles que no aparecen en la foto por otro tipo de problemas (mal encuadre, objetos en primer plano...)
ceder a ella pulsando la letra Z. Ahora debes acercarte a la zona en donde se encuentra la mancha, para trabajar en detalle: haz click con la lupa, y sin soltar el botn del ratn, desplzalo de izquierda a
zando para pintar, y una cruz que indica la zona de muestra. Debes elegir zonas cercanas y similares (en cuanto a luz y textura) para que el retoque sea prcticamente impreceptible Desplzate por la imagen, buscando zonas defectuosas, utilizando el Navegador de Photoshop. Abre el men Ventana, y elige Navegador para que se abra la paleta. Te mostrar una miniatura de la fotografa por la que podrs desplazarte moviendo el rectngulo rojo.
5
derecha y de arriba abajo. Se dibujar un recuadro delimitador, y al soltar te habrs acercado al detalle como si hubieras colocado una lupa sobre esa zona.
Una vez abierta la imagen, ampla el rea sobre la cual trabajars. Para ello, dirgete a la Paleta de Herramientas, y haz click en el icono de la lupa (herramienta
Photoshop
Desde el men Archivo, selecciona Abrir y escoje la imagen que hayas escaneado en tu disco duro. Haz click en Abrir. Intenta elegir alguna foto vieja, que tenga alguna man-
Acercar). Ampla el rea de la foto que vas a corregir, haciendo click con la lupa, y desplazando sin soltar el
N 96
59
Curso
botn del ratn, para trabajar con gran detalle. producirlas tapando la mancha. Al pasar el cursor corregirs los defectos.. do un pincel mucho mas fino, ya que laz zonas son ms intrincadas y poseen ms detalle. Modifica el grosor del pincel desde la Paleta de Configuracin. Una cifra cercana a 10 seguramente te servir. En cualquier caso y dependiendo de la textura a corregir es posible que tengas que ajustar el grosor del pincel.
A continuacin elige la herramienta Pincel de Copia desde la Paleta de Herramientas. En la Paleta de Configuracin, completa con los siguientes parmetros: forma Redonda, Tamao 20, Definicin 70, Opacidad 100, Paso 25, y Densidad 100. Una miniatura te mostrar la si-
Consejo
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 defectos como copiar zonas no deseadas, o inclusive zonas con iluminacin diferente, lo cual producir que el efecto del truco sea muy visible. El trabajo de clonar y pintar con zonas clonadas requiere de mucha paciencia, y sobre todo horas y horas de prctica para lograr resultados ptimos.
lueta del pincel que has configurado. Si ests trabajando con una foto muy pequea, utiliza una cifra menor para el tamao del pincel, te permitir trabajar con ms detalle. El resto de solapas de la Paleta de Configuracin, djalas tal cual vienen por defecto.
Comienza a tomar muestras de zonas que no estn daadas en la imagen, y que posean tonos y texturas similares a los daados. Para ello pulsa maysculas mientras haces click en la zona elegida de la imagen. Por ejemplo, para la parte superior del hombro, se han utilizado como muestra partes sanas de la pared, para re-
Para corregir la mancha sobre la chupa de cuero, se han tomado muestras de la misma, utilizan-
Resumiendo...
Photoshop
1 Archivo 3 Abrir 3 Seleccionar imagen 3 Abrir 2 Herrramienta Zoom 3 Hacer click y desplazar el cursor3 Ampliar zona
defectuosa
Paint Shop Pro

1 Men Archivo 3 Abrir 3 Seleccionar fotografa 3 Abrir 2 Herramienta Acercar 3 Hacer cl i c k y desplazar 3 Ampliar zona
defectuosa
3 Tampn de Clonar imagen 3 Ir a Barra de Propiedades 3 Configurar

Ta m p n
3 Ir a Paleta de Herramientas 3 Elegir Pincel de Copia 3 Ir a

Configuracin 3 Definir parmetros del pincel
4 Click + Alt para tomar muestras vlidas 3 Pintar sobre rea daada 5 Abrir Navegador 3 Desplazarse por la imagen 3 Seguir corrigiendo
4 Maysculas + Click para tomar muestras 3 Pintar zonas defectuosas 5 Paleta Configuracin 3 Modificar grosor del pincel 3 Seguir corrigiendo
Corregir polvo y rascaduras

Existen muchas y muy variadas tcnicas para eliminar el polvo y las manchas de las viejas fotos; lo ideal es conocer la mayora de ellas, para usarlas en forma combinada, de acuerdo al problema particular de cada foto. Debes tener bien claro algo muy importante para minimizar los problemas antes de tiempo: la limpieza de tu escner. Aunque muchas viejas fotos ya estan daadas o sucias por el paso del tiemo, si mantienes limpio el cristal de
tu escner, te ahorarrs mucho tiempo en el posterior tratamiento digital que realices. Recuerda que el polvo nunca se encuentra en los archivos digitales, sino que se ha depositado a lo largo del tiempo sobre los negativos o en las copias de papel. Para limpiar tu escner sigue los consejos del manual del fabricante; como regla general, lo ideal es usar un pao limpio, que no forme pelusas, utilizndolo apenas humedecido con muy poco agua (nunca mojado). Jams utilices sustancias abrasivas como limpiacristales o alcohol.
Photoshop
En primer lugar abre el men Archivo 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.
Crea una nueva capa de la siguiente manera: dirgete al men Capa, selecciona Nueva, y del men desplegable elige Capa. Tambien puedes pulsar el atajo de teclado Ma-
1
60
www.pctoday.es

ys. + Ctrl + N. En el cuadro de dilogo que se abrir, ponle un nombre a la capa (por ejemplo Correccin de paso 3), y en la Barra de Propiedades despliega el men Pincel y define el grosor (puedes escribir el tamao, o desplazar el regulador). Ahora es el momento de trabajar directamente sobre las manchas de polvo. Con la Herramienta Desenfocar seleccionada, haz click sin soltar el botn en cada mancha. Cuanto ms tiempo dejes pulsado el botn, el En la Paleta de Herramientas, elige la herramienta Lazo. Luego te desplzate con el cursor sobre la parte ampliada de la foto, y realiza una seleccin a mano alzada, rodeando el rea defectuosa de la foto. Eso que ests haciendo es realizar una seleccin, de manera que a continuacin puedas trabajar solamente sobre dicha rea, mientras el resto de la foto queda intacto.
has seleccionado con la herramienta de lazo en el paso anterior.
Manchas), deja todos los valores por defecto, y pulsa OK. Acude al cuadro de herramientas, y selecciona la Herramienta Desenfocar (tambin puedes pulsar la tecla R). En la Barra de Propiedades, que se encuentra en la parte superior del rea de trabajo, ajusta las variables de la
En el cuadro de dilogo Quitar Polvo haz lo siguiente: en Tamao de los granos (pixeles) escribe 3, en Sensibilidad 5, y haz click sobre el icono del ojo para observar el resultado parcial. Si las manchas de polvo son muy visibles an, marca el apartado Accin Agresiva. En el mismo cuadro de dilogo puedes ver un antes y un despus de aplicar Quitar Polvo. Si las
Consejo
desenfoque ser mayor, y as desaparecern las manchas de polvo. Realiza la tarea con paciencia, intentando que el rea corregida sea lo ms homognea posible.
Debes encontrar el equilibrio justo entre un desenfoque sutil y uno exagerado. Procura no desenfocar demasiado las manchas, ya que la imagen podra quedar con unas salpicaduras de desenfoque, 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 para aprender esta tcnica, ya que slo requiere prctica y un buen ojo observador.
herramienta de la siguiente forma: Modo Normal, Intensidad 100% y activa Usar todas las capas.
Dirgete al Cuadro de Herramientas, y elige la herramienta Zoom (puedes pulsar la tecla Z para seleccionarla). Ampla el rea de la foto que vas a corregir, haciendo click con la lupa, y desplazando el cursor
Paint Shop Pro
Desde el men Archivo, seleccionas Abrir (o pulsa la combinacin Ctrl + O). Luego elige una imagen, la seleccionas, y haces click en el botn Abrir.
A continuacin, en la Barra de Herramientas Foto, haz click sobre el icono llamado Quitar Polvo. De esta manera aplicars filtro fotogrfico digital sobre el rea que
marcas de polvo an se ven, modifica los nmeros y previsualiza el resultado. Cuando el resultado sea satisfactorio, pulsa Aceptar para aplicar los cambios. Procura adaptar el tamao del pincel a cada mancha. Ten en cuenta que de acuerdo a cada foto, las variables cambian por lo cual debers probar con el viejo mtodo de ensayo y error hasta obtener un buen resultado.
Resumiendo...
sin soltar el botn del ratn. De esta manera podrs trabajar con mucha presicin sobre las manchas. A continuacin debes ampliar todo lo que puedas el rea sobre la cual trabajars. Para ello, dirgete a la Paleta de Herramientas, y haz clicken el icono de la lupa (la herramienta se llama Acercar). Ampla el rea de la foto que vas a corregir, haciendo click con la lupa, y desplazando sin soltar el botn del ratn, as trabajars con gran presicin.
Photoshop
1 Archivo 3 Seleccionar Imagen 3 Abrir 2 Capa 3 Crear nueva Capa 3 Ponerle nombre 3 Aceptar
3 Seleccionar Herramienta Desenfocar 3 Configurar sus propiedades 4 Herramienta Zoom 3 Hacer cl i c k y desplazar 3 Ampliar rea de
correccin
5 Herramienta Desenfocar 3 Ir a Barra de Propiedades 3

Configurar tamao de pincel
Ahora debes configurar el tamao del pincel, para que coincida aproximadamente con el tamao de las manchas. Para ello, vuelve a seleccionar la Herramienta Desenfocar (como en el
6 Hacer click sobre cada mancha 3 Pulsar ms tiempo para desenfocar ms
Paint Shop Pro

1 Archivo 3 Seleccionar Imagen 3 Abrir 2 Paleta de Herramientas 3 Seleccionar Lupa 3 Acercar imagen 3 Paleta de Herramientas 3 Seleccionar Lazo 3 Realizar seleccin 4 Herramientas Foto 3 Seleccionar Quitar polvo 5 Tamao de granos 3 3 Sensibilidad 5 3 Previsualizar 3 Aceptar
N 96
61
Curso
Elimina el efecto Moir

Si tienes alguna foto impresa (ya sea de una revista, peridico, folleto, etctera) y deseas conservarla en formato digital, este truco es para ti. En cualquier revista (includa la que tienes entre tus manos), las imgenes se conforman de unos muy pequeos puntos, debido a la separacin de los cuatro Ahora abre el men Filtro, elige Enfocar, y selecciona finalmente Mscara de Enfoque. En el cuadro de dilogo Mscara de Enfoque, completa los siguientes valores: Canti-
Despus de escanear la foto, dirgete al men Archivo y selecciona Guardar Como, o pulsa la tecla F12. Completa el cuadro con el nombre de archivo que te apetezca, y en Tipo selecciona TIF.
5
colores durante el proceso de impresin. Al escanear pginas impresas y abrirlas en la pantalla de tu ordenador, notars que la imagen ha quedado cubierta por unos molestos patrones de color; esto empeora la calidad de la foto, y se llama efecto moir. Si tienes un escner y quieres digitalizar alguna foto previamente impresa, lleva a cabo los siguientes pasos. Dirgete al men Filtro, elige Ruido, y finalmente selecciona Mediana. En el cuadro de dilogo llamado Mediana, completa la variable Radio con el nmero 2. Pue-
V al men Efectos, elige Ruido, 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. Finalmente, haz click en Aceptar.
Photoshop
dad: 50%, Radio: 3 pixeles, Umbral: 5 niveles. Con este filtro de enfoque, finalmente habrs logrado eliminar (o reducir, en algunos casos), el molesto efecto moir. des marcar la casilla Ver para previsualizar el resultado. Acepta pulsando el botn OK. Finalmente, abre el men Archivo, y selecciona Guardar para aplicar y conservar en un archivo los cambios que acabas de realizar en tu fotografa.
Coloca la fotografa impresa sobre el cristal de tu escner. Inicia el proceso de digitalizacin, dependiendo del software que utilices (habitualmente, para escanear debes ir al men Archivo, y luego seleccionar
6 1
Dirgete al men Imagen, y abre Redimensionar. Se abrir un cuadro de dilogo. Debes hacer click en la casilla Tamao real / de impresin, y solamente modificar
Paint Shop Pro

Coloca la foto en tu escner, y abre el men Archivo, luego elige Importar, selecciona TWAIN y finalmente Adquirir para iniciar el proceso de digitalizacin. Completa con los siguientes parmetros el cuadro de dilogo de tu escner: Modo > Fotografa a color, RGB. Resolucin / Entra-
Importar). Completa con los siguientes parmetros el cuadro de dilogo de tu escner: Modo: Fotografa a color, RGB. Resolucin / Entrada: 718 dpi (pixeles por pulgada). Escalar: 100%. Conserva los ajustes por defecto del resto de variables.
Una vez escaneada la imagen, v al men Archivo, y selecciona Guardar Como. Pnle el nombre que quieras a tu foto, y gurdala en formato TIF.
V al men Imagen, y selecciona Tamao de Imagen. En el cuadro de dilogo Tamao de Imagen, modifica solamente los siguientes valores: Resolucin: tipea 300 (pixeles por pulgada). Marca las casillas de verificacin de Restringir Proporciones, y Remuestrear la Imagen. Deja intactos los dems valores.
da> 718 dpi (pixeles por pulgada). Escalar: 100%. Conserva los ajustes por defecto del resto de variables.
el apartado Resolucin, tipeando el nmero 300. Deja como estn el resto de los valores de la ventana.
62
www.pctoday.es

Consejo
Aunque la tcnica descripta en este paso a paso logra excelentes resultados, lamentablemente no es infalible ni milagrosa. Hay fotos que tienen una trama tan marcada, que difcilmente pueda suprimirse por completo. En algunos casos, debers conformarte con mejorar y enfocar un poco la imagen. Una ltima sugerencia: mira detenidamente el software de tu escner, ya que algunos incluyen la opcin de destramar al digitaliza. Utilzalo para mejorar an mas tus resultados.
Resumiendo...
Photoshop
1 Colocar foto en el escner 3 Configurar la digitalizacin 3 Escanear 2 Archivo 3 Guardar Como 3 Nombrar archivo 3 Filtro 3 Elegir Ruido, Mediana 3 Radio 2 3 Aceptar 4 Imagen 3 Tamao de imagen 3 Completar 300 dpi 5 Filtro 3 Enfocar 3 Aplicar Mscara de Enfoque 3 Aceptar 6 Archivo 3 Guardar
Para finalizar tu trabajo con la imagen, desde el men Archivo selecciona Guardar para as aplicar los cambios realizados y conservarlos en tu fotografa.
Paint Shop Pro

1 Colocar foto en el escner 3 Configurar la digitalizacin 3 Escanear 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 5 Efectos 3 Mscara de Desenfoque 3 Tipear valores 3 Aceptar 6 Archivo 3 Guardar
A continuacin haz click en el men Efectos, luego elige Acentuar, y selecciona Mscara de desenfoque. En el cuadro de dilogo, completa con los siguientes valores: Radio: 3, Potencia: 50, Diferencia: 5. Haz click en Aceptar para aplicar los cambios. En este momento el efecto moir debera haber desaparecido.
Reducir la textura del papel

A principios del siglo XX, las antiguas empresas de fotografa (florecientes en aquella poca), comenzaron a ofrecer un tipo de papel texturado, muy original y avanzado para esos tiempos; seguramente en tu cajn encontrars alguna foto de tu abuelo en un papel con esas caractersticas. Pero hoy, en el siglo XXI, estas fotos suelen resultar bastante problemticas a la hora de escanear. La textura del papel proyecta sombras en la imagen que dificultan su visin y claridad. A continuacin te ofrecemos un truco para corregir el texturado del papel; es un poco laborioso y lleva tiempo dominarlo. No te desanimes con los primeros resultados y sigue practicando hasta devolver a tus viejas fotos el esplendor de hoy.
Photoshop
V al men Filtro, elige Desenfocar, y selecciona Desenfoque gaussiano. En el cuadro de dilogo, slo debes completar el apartado Radio tecleando el nmero 2. Esto difumi-
pincel de 70 pixeles, y en Opacidad teclea 50%. Si tu foto es muy pequea, elige un pincel ms fino. Tu tarea a continuacin es la ms delicada. Debes pintar con el pincel las zonas ms importantes de la foto (como los rasgos de la cara, o elementos en primer plano). Al hacer click y mover el cursor sobre la foto, notars que las zonas pintadas se oscurecen y enfocan. Deja intactas las zonas secundarias como el fondo del retrato. El de-
Abre la foto escaneada (desde el men Archivo, eligiendo Abrir). Luego v al men Capa, y selecciona Duplicar Capa. En el cuadro de dilogo, deja Fondo Copia como nar un poco la imagen, y har la textura del papel menos perceptible. Para aplicar los cambios pulsa el botn OK. nombre por defecto. Luego pulsa sobre el botn OK.
Abre el men Capa, elige Aadir mscara de capa, y finalmente haz click en Descubrir todas. A continuacin, desde la Paleta de Herramientas elige el Pincel. V a la Barra de Propiedades y configura un grosor de
senfoque aplicado en el paso anterior har que la textura sea menos perceptible. Cuando la foto no est borrosa, y las zonas importantes queden bien destacadas, v al men Archivo y haz click en Guardar.
N 96
63
Prctico
Paint Shop Pro Personalizar pinceles para retoque
Aunque Photoshop y Paint Shop Pro ofrecen una enorme cantidad de pinceles y variantes de los mismos, tambin es posible crear pinceles personalizados; algo tremendamente til en cualquier tarea de retoque fotogrfico. Por ejemplo, puedes crear un pincel a partir de una textura de piel, para corregir defectos en un rostro (arrugas, marcas de acn, etctera). O tomar muestras de cielo o csped, luego crear tus pinceles personalizados, y corregir fotos de paisajes. Algo muy interesante y sorprendente, es utilizar las herramientas habituales de retoque (como el Tampn de Clonar) en conjunto con un pincel personalizado: puedes clonar la textura de una tela, y reproducirla en otro sitio agregndole un toque personal con la textura que has utilizado en tu pincel. Aunque al principio los resultados sern algo imprevisible, seguramente
Abre el men Archivo, luego selecciona la opcin Abrir. Marca el fichero que contiene la foto escaneada previamente, desde tu disco duro o cualquier otro soporte.
Dirgete al men Efectos, selecciona Desenfoque y luego elige Desenfoque de Gauss. En el cuadro de dilogo, completa tecleando el nmero 2 en el apartado Radio. Si
muy grueso, cambia su valor desde el apartado Tamao.
Consejo
Un truco interesante (al tiempo que divertido) a la hora de digitalizar fotos con papeles texturados: prueba inclinar las fotos en distintos ngulos, sobre el cristal del escner, para luego digitalizarlas. Debido a que el escaner hace un barrido con su haz de luz, probablemente ilumine de manera distinta de acuerdo a la inclinacin del papel. En algn caso te sorprenders ya que la textura se puede tornar casi imperceptible. El azar tambin existe en el mundo digital
en la previsualizacin observas que la foto est demasiado borrosa, en lugar de 2 escribe 1.
V a la Paleta de Herramientas, y elige el pincel Retoque (es el icono de la mano). A continuacin v a la Paleta de Configuracin, y completa con los siguientes datos: Forma: Redonda. Tamao: 32. Definicin: 0. Opacidad: 40. Paso: 25. Densidad: 100. Y lo ms importante, en Modo de Retoque selecciona Oscurecer RVA. Desplaza el cursor sobre la fotografa. Si observas que el pincel es muy fino o
Ahora haz click y mueve el cursor sobre las zonas destacadas de la foto, como rasgos (en el caso de un retrato), o elementos en primer plano (por ejemplo, en un paisaje). Hazlo con tranquilidad, buscando que slo se destaquen los elementos primordiales, y sin preocuparte por el resto que resultar algo difuminado. Cuando la foto quede equilibrada y la textura del papel se haya atenuado, v al men Archivo y selecciona Guardar. s
con la prctica podrs controlar a fondo tus propios pinceles. Es divertido y estimulante crear pinceles personalizados con texturas. Puedes crear tantos pinceles como te apetezca, y recuerda almacenarlos correctamente para su posterior utilizacin (en el caso de Photoshop puedes utiliza el Gestor de Ajustes Preestablecidos para organizarlos). Tanto en Photoshop como Paint Shop Pro tienes la posibilidad de dar un nombre a cada pincel: aprovecha esta posibilidad dando a tus pinceles algn nombre descriptivo, para que puedas localizarlo con mayor rapidez (por ejemplo Pincel suave con textura de piel) y optimizar tu trabajo. Finalmente, investiga y aprende a configurar sus variantes (son casi infinitas!) para explotar al mximo sus posibilidades en el retoque fotogrfico. Cntrate sobre todo en el
La configuracin de un pincel nos permitir realizar retoques con mucha precisin.
tipo de bordes del pincel (nunca deben ser muy duros), y recuerda que lo ms importante al editar digitalmente una foto es que el resultado sea lo ms natural posible. s
Resumiendo...
Photoshop
1 Abrir archivo 3 Ir al men Capa 3 Duplicar Capa 3 O K 2 Filtro 3 Elegir Desenfoque Gaussiano 3 Tipear 2 3 O K 3 Capa 3 Aadir mscara de capa 3 Click en Pincel 3 Configurar
propiedades
Paint Shop Pro

1 Archivo 3 Elegir foto 3 Abrir 2 Click en men Efectos 3 Desenfoque de Gauss 3 Escribir 2 en el campo
de cantidad
3 Elegir Pincel de Retoque 3 Paleta Configuracin 3 Configurar pincel 4 Pintar zonas destacadas 3 Enfocar reas 3 Men Archivo 3 Guardar
4 Pintar zonas destacadas 3 Enfocar reas 3 Archivo 3 Guardar
64
www.pctoday.es
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.
Gua del curso






a mayora de la gente puede observar fotografas, y descubrir errores y defectos a golpe de vista: manchas, araazos, zonas borrosas o desenfocadas, ojos rojos, etctera. Todos son problemas habituales tanto en la fotografa tradicional como en la digital. Pero agudizando un poco ms la observacin, hay veces que en las fotos encontramos elementos que no aportan nada a la escena, y que adems entorpecen la armona de la composicin; estos no son considerados como errores, pero si no estuvieran all, probablemente la fotografa gozara de una mayor belleza, o su mensaje sera mucho ms claro.
Los programas Adobe Photoshop y Paint Shop Pro te dan las herramientas necesarias para que puedas corregir este tipo de errores. PC Today te ensea todas las claves y trucos en este curso, y a ti te corresponde poner creatividad e ingenio para combinar todas estas tcnicas y obtener los mejores resultados. Ten siempre en tu mente lo ms importante: en este curso, vers trucos muy puntuales para resolver problemas concretos que presentan muchas fotografas. Una vez que los aprendas, tu misin es combinar las tcnicas que has aprendido. Con la prctica podrs conseguir resultados espectaculares en muy poco tiempo. s
56
www.pctoday.es
Eliminar araazos rectos

Es muy comn que al escanear fotografas, cualquier mnimo rastro de polvo estropee la digitalizacin de la imagen, creando algunas finas lneas rectas, tanto en forma vertical como horizontal. Tambin puede suceder que simplemente el negativo se encuentre rayado, de manera que el revelado presentar algn araazo. Para eliminar araazos rectos, Photoshop provee una herramienta sumamente til (y muy poco utilizada): la herramienta Marco Columna nica, sar el icono de Marco Rectangular durante un segundo. Ahora acrcate con el cursor lo ms que puedas al araazo, y haz click; se formar una seleccin que abarcar todo el ancho de la imagen, y tendr slo un pxel de alto.
Repite los pasos 2, 3 y 4 para corregir los dems araazos. Recuerda que al realizar la seleccin con Marco Fila nica, debes usar las flechas del teclado para acercarte lo ms posible al rea daada.
Consejo
Tanto en Photoshop como en Paint Shop Pro, es mejor que utilices las herramientas de este ejercicio (Marco Fila nica, y Eliminar Rayaduras) con un grosor similar al de las rayas, para obtener resultados ptimos. All radica la clave de este truco. Ten paciencia e intntalo varias veces, hasta dar con el grosor de herramienta que ms se ajuste a las rayaduras. No escatimes en ampliar la imagen con el zoom todo lo que haga falta, ya que as obtendrs la precisin necesaria para que el retoque sea perfecto.
Abre el men Archivo y elige Guardar para salvar los cambios.
Paint Shop Pro
1
que crea una seleccin de tan slo un pxel, que te permitir corregir este tipo de defectos. En cuanto a Paint Shop Pro, debes utilizar la herramienta Eliminar Rayaduras. Sigue paso a paso el ejercicio para resolver este tipo de problemas, y recuerda: si no ests del todo conforme con tus resultado, combina sta tcnica con otras que has aprendido en el curso. De nada valen las mejores herramientas, si no se utilizan con ingenio y creatividad. continuacin debes copiar informacin sana de los pxeles ms cercanos al a las rayaduras. Utiliza las teclas de flecha de tu teclado, para moverte hacia arriba o
Abre el men Archivo, y en el 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-
A continuacin elige la herramienta Eliminar Rayaduras desde la Paleta de Herramientas (icono de esptula). En la Paleta de Configuracin, debes escribir el Ancho
3
mientas Estndar. Luego escoge alguna fotografa rayada que hayas escaneado previamente, o que tengas guardada en tu disco duro, y haz click en Abrir.
en cantidad de pxeles que quieres dar a la herramienta . En el ejemplo hemos utilizado un hacia abajo y localizarlos. Si es necesario, ampla la vista pulsando la combinacin de teclas Ctrl + + para trabajar con precisin.
Photoshop
Desde el men Archivo, elige Abrir y escoge la imagen que presente algn araazo en forma de lneas ms o menos rectas. Haz click en Abrir.
valor de 2 pxeles, ya que ste es el grosor de la rayadura. Finalmente pulsa con cuidado la combinacin de teclas Ctrl + Alt + Flecha Abajo. Esto duplicar los pxeles sanos, y cubrir los araazos, dejndolos invisibles.
Con la imagen que acabas de abrir en pantalla, ampla el rea sobre la cual deseas trabajar a continuacin. Para ello, dirgete a la Paleta de Herramientas, y
Ahora debes dibujar con la herramienta Eliminar Rayaduras, sobre las rayas de la foto; haz click en un extremo del defecto, y sin soltar el botn del ratn, desplzate gasta el otro extremo de la raya-
Desde la Barra de Herramientas de Photoshop (la encuentras a la izquierda del rea de trabajo) elige la Herramienta Marco Fila nica; para acceder a ella debes pul-
haz click en el icono que representa una lupa (herramienta Acercar). Ampla el rea de la fotografa que vas a retocar, haciendo click con la lupa, y desplazando sin soltar el botn del ratn, as podrs trabajar con mayor precisin que con la vista general.
N 97
57
Curso
dura . Procura que la lnea sea lo ms recta posible. Para corregir los dems araazos, repite los pasos 2, 3 y 4 . La herramienta Eliminar Rayaduras dibuja el contorno de su grosor, de manera que ajusta sus pxeles para que su ancho sea igual al de las rayaduras. Finalmente v al men Archivo y elige Guardar para conservar los cambios realizados. Cuanto ms tiempo dediques a este tipo de procesos, mejor resultado se apreciar. Tambin es importante que la imagen llegue con la mejor calidad al ordenador, si es por medio de un escner, con la mayor resolucin.
Resumiendo...
Photoshop
1 Ir al men Archivo 3 Abrir 3 Seleccionar imagen 3 Abrir 2 Ir a Barra de Herramientas 3 Elegir Marco Fila nica 3 Click en el
araazo
Paint Shop Pro

1 Ir al Men Archivo 3 Escoger Abrir 3 Seleccionar fotografa 3 Abrir 2 Seleccionar Herramienta Acercar 3 Hacer click y desplazar 3 Ampliar
zona defectuosa
3 Copiar informacin sana 3 Mover con las flechas del tecl a d o 3

Ampliar vista
3 Ir a Paleta de Herramientas 3 Elegir Eliminar Rayaduras 3 Ir a

Configuracin 3 Grosor de 2 pxeles
4 Pulsar Ctrl + Alt + Flecha Abajo 3 Duplicar pxeles sanos 3 Cubrir

araazos
4 Click + desplazar ratn sobre rayaduras 3 Trazar lnea bien recta 5 Corregir ms araazos 3 Ir al men Archivo 3 Guardar cambios
5 Corregir ms araazos 3 Ir al men Archivo 3 Guardar cambios
Borrar elementos no deseados
ratn, desplaza la seleccin hacia una zona que no tenga obstculos, y pxeles sanos para cubrir el objeto.
alzada. Procura dejar algo de espacio alrededor del objeto. Es muy probable que alguna vez hayas tomado una bella fotografa, en la que todo parece correcto salvo por un objeto que estorba y distrae la atencin. Aunque sera exagerado considerarlo un error, podemos recurrir a las tcnicas digitales para subsanar este tipo de problemas, y as embellecer la composicin final. Ya que no podemos eliminar los objetos fsicamente, lo que hars a continuacin con Photoshop o Paint Shop Pro ser cubrir los elementos no deseados. En el ejemplo que damos a continuacin, hay un globo que aparece por detrs de la cabeza de un personaje, distrayendo la atencin del tema de la fotografa: la nia recibiendo su vela de cumpleaos para soplar. Pulsa la letra Q de tu teclado, para activar el modo Mscara Rpida (la imagen protegida por la seleccin se pondr de color rojo momentneamente). V al men Filtro, abre Desenfocar, y elige Desenfoque Gaussiano. En el cuadro de dilogo, completa con un valor de 3,0. De sta manera la seleccin que has creado ahora tiene sus bordes muy suavizados.
3
icono de la lupa). Haz click en la imagen, y sin soltar el botn del ratn, rodea el rea donde se encuentra el elemento no deseado. Dirgete a la Paleta de Herramientas, y selecciona la Herramienta Lazo. A continuacin rodea el objeto que deseas eliminar, dibujando una seleccin libre a mano
Pulsa la combinacin de teclas Ctrl + J para crear una nueva capa, copiando la seleccin de pxeles sanos. Observa la paleta Capas, y vers en una nueva capa el trozo de pxeles sanos que acabas de crear. Ahora v a la Paleta de Herramientas, y escoge Herramienta Mover; coge la seleccin de pxeles sanos y muvelos, tapando el elemento que deseas ocultar. . Dicho elemento debe haber desaparecido.
Photoshop
Abre el men Archivo, selecciona Abrir y escoge la imagen de tu disco duro o CD. Haz click en Abrir. V a la Paleta de Herramientas, y selecciona la Herramienta Zoom (el
Pulsa nuevamente la letra Q de tu teclado para salir del modo Mscara Rpida, y activar la seleccin suavizada. Ahora con la herramienta Lazo, haz click en la seleccin. Sin soltar el botn del
58
www.pctoday.es

Dirgete al men Capa, y selecciona Acoplar Imagen. Finalmente abre el men Archivo y elige Guardar, para conservar los cambios.
alzada. Intenta dejar algo de espacio alrededor del objeto.
rs la seleccin que has creado; para 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 cuadro de dilogo te pedir que confir-
men Seleccionar, y elige la opcin Quitar Seleccin, para que desaparezcan los halos que aparecan alrededor de la zona que ests tratando de reparar.
Paint Shop Pro

Desde el men Archivo, seleccionas Abrir (o pulsa la combinacin Ctrl + O). Luego elige una imagen y seleccinala. Haz click en el botn Abrir. Dirgete a la Paleta de Herramien-
mes si deseas eliminar la capa activa, a lo que respondes pulsando el botn S.
V al men Edicin, y selecciona Copiar (o pulsa la combinacin Ctrl + C). De esta manera copias la seleccin al Portapapeles. Abre nuevamente el men Edicin, y ahora selecciona Pegar Como nueva
Ya tienes lo que necesitas: una seleccin que ocupa la misma superficie que el rea que deseas cubrir. Pulsa nuevamente Ctrl + 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-
tas, y selecciona la Herramienta Acercar (icono de la lupa). Haz click en la imagen, y sin soltar el botn del ratn, rodea el rea donde se encuentra el elemento no deseado. Dirgete a la Paleta de Herramientas, y selecciona la Herramienta Lazo. A continuacin rodea el objeto que deseas eliminar, dibujando una seleccin libre a mano
seleccin (pulsa el atajo Ctrl + E) y coloca la seleccin en un rea de la pared con pxeles sanos. leccin. Arrastra, con el mismo cursor y sin cambiar de herramienta, la seleccin pegada. A continuacin colcala sobre el rea del objeto que deseas eliminar y sustituir por la seleccin correcta. V al
Finalmente abre el men Archivo, y selecciona Guardar para conservar los cambios. Si algn pixel concreto presenta un color que resalta frente a los dems, puedes usar la herramienta pincel para que pase desapercibido, o repetir el proceso con selecciones del tamao de un punto.
Consejo
El procedimiento que has realizado es muy sencillo: consiste en copiar el rea del objeto que quieres eliminar, luego utilizar dicha seleccin para copiar pxeles sanos de la imagen (en este caso de una pared), para finalmente superponerlos y ocultar el objeto no deseado. Ten en cuenta que, segn el caso, la iluminacin del rea copiada no coincide exactamente con la zona donde la has pegado: echa mano de las herramientas de brillo y contraste para ajustar las luces, y si hiciera falta de las herramientas de clonacin para ocultar los bordes pegados.
Ahora en tu imagen debe aparecer el objeto que quieres eliminar por duplicado; a continuacin vas a eliminar el contenido de la imagen, pero conserva-
Resumiendo...
Photoshop
1 Ir al Men Archivo 3 Seleccionar Imagen 3 Abrir 2 Ir a Paleta de Herramientas 3 Elegir Lazo 3 Rodear el objeto con
seleccin
Paint Shop Pro

1 Ir al Men Archivo 3 Seleccionar Imagen 3 Abrir 2 Ir a Paleta de Herramientas 3 Elegir Lazo 3 Rodear el objeto con seleccin
3 Pulsar Q para Mscara Rpida 3 Ir al men Filtro 3 Aplicar Desenfoque

Gaussiano
3 Ctrl + C para copiar seleccin 3 Ctrl + E para pegar seleccin 3

Colocar en pxeles sanos
4 Pulsar Q para salir de Mscara Rpida 3 Desplazar seleccin con el

Lazo
4 Ir a Paleta Capas 3 Click en Seleccin Flotante 3 Click en Papelera

para eliminar seleccin
5 Ctrl + J crea nueva capa 3 Ir a Paleta de Herramientas 3 Elegir Mover

3 Tapar el objeto no deseado
5 Ctrl + C copia pxeles sanos 3 Ctrl + E pega nueva seleccin 3 Colocar

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
Curso
Minimizar las manchas
El siguiente truco es muy til en fotografas que poseen grandes superficies de un color y textura relativamente homogneos. En este caso hemos utilizado una vieja fotografa, en la cual una mancha de humedad ha daado la zona de la pared. Tambin lo encontrars muy til para restaurar fotografas donde aparezcan grandes cielos, csped, montaas, etc. Como casi siempre, la tcnica consiste en hallar y copiar pxeles tiles que remplacen el rea daada. En ste caso recurrirs al auxilio de las capas, utilizando el comando Pegar Dentro.
una seleccin de un tamao parecido al de la mancha. Abre el men Edicin y selecciona Copiar (o pulsa la combinacin Ctrl + C) para copiar los pxeles sanos al portapapeles.
debes manipular, para que la seleccin encaje perfectamente con la mancha. Cuando encaje correctamente, pulsa la tecla Enter.
Configuracin, elige Rectngulo en el apartado Tipo de Seleccin. Busca un rea de la pared donde los pxeles sean sanos y parejos. Con la Herramienta Seleccionar, haz click y sin soltar el botn del ratn, desplaza para crear una seleccin de un tamao parecido
2
V al men Capa, y elige Acoplar Imagen. Y finalmente abre el men Archivo, y escoge Guardar (o la combinacin Ctrl + S), para aplicar los cambios.
Photoshop
En el men Archivo, elige Abrir, y escoge la fotografa de tu disco duro o CD. Dirgete a la Paleta de Herramientas, y escoge la Herramienta Marco Rectangular.
5
En la Paleta de Herramientas haz click en el icono del Lazo. A continuacin dibuja una seleccin libre alrededor de la mancha que deseas corregir.
al de la mancha. V al men Edicin y selecciona Copiar (o pulsa la combinacin Ctrl + C) para copiar los pxeles sanos al portapapeles.
Paint Shop Pro

V al men Archivo, elige Abrir, y escoge la fotografa de tu disco duro o CD. Dirgete a la Paleta de Herramientas, y escoge la Herramienta Seleccionar. En la Paleta de
Consejo
Recuerda que ste truco funciona de manera ptima cuando en la fotografa existen grandes zonas de imagen sana que puede reemplazar al trozo daado o manchado. Realizando selecciones muy simples a mano alzada puedes obtener muy buenos resultados, sencillamente pegando el trozo de pxeles sanos en una nueva capa. Si tu fotografa contiene manchas en zonas que no estn claramente despejadas, recurre a las herramientas de clonacin combinadas con pinceles pequeos.
1
Busca un rea de la pared donde los pxeles sean correctos. Con la Herramienta Marco Rectangular, haz click y sin soltar el botn del ratn, desplaza para crear
Dirgete al men Edicin y escoge Pegar Dentro (o la combinacin Mays + Ctrl + V). El trozo sano anteriormente copiado ahora se ha pegado dentro del rea de la mancha. Ahora v al men Edicin, y escoge la opcin Transformacin Libre. Alrededor del trozo pegado aparecern unos manejadores que
60
www.pctoday.es

En la Paleta de Herramientas haz click en el icono de seleccin que contiene un Lazo. A continuacin dibuja una seleccin a mano alzada alrededor de la mancha que deseas corregir.
Dirgete al men de Edicin, escoge Pegar, y luego En la seleccin (o la combinacin Mays + Ctrl + L). El trozo sano anteriormente copiado ahora se ha pegado dentro del rea de la mancha.
Ahora v al men Seleccionar, y escoge Promover a Capa.
En la Paleta de Herramientas elige Deformar. Alrededor del trozo pegado aparecern unos manejadores y un recuadro que debes utilizar para manipular la forma de la seleccin, para que sta encaje perfectamente con la forma de la mancha. Finalmente abre el men Ar-
chivo y elige Guardar, para aplicar los cambios realizados.
Resumiendo...
Photoshop
1 Ir al Men Archivo 3 Abrir Foto 3 Ir a Paleta de Herramientas 3 Escoger
Marco Rectangular
Paint Shop Pro

1 Ir al Men Archivo 3 Abrir Foto 3 Ir a Paleta de Herramientas 3 Elegir
Rectngulo
2 Buscar pxeles sanos 3 Crear seleccin 3 Pulsar Ctrl + C para copiar

seleccin
2 Buscar pxeles sanos 3 Crear seleccin 3 Pulsar Ctrl + C para copiar

seleccin
3 Ir a Paleta de Herramientas 3 Elegir Lazo 3 Crear seleccin rodeando la

mancha
3 Ir a Paleta de Herramientas 3 Elegir Lazo 3 Crear seleccin rodeando la

mancha
4 Ir al Men Edicin 3 Pegar Dentro 3 Ir al Men Edicin 3 Elegir

Transformacin Libre 3 Manipular la seleccin hasta encajar.
4 Pulsar Mays + Ctrl + L para pegar dentro 3 Ir al Men Seleccionar 3

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
Aunque el hombre del tiempo en la TV, y el Servicio Meteorolgico cada da son ms precisos, nosotros podemos contradecirlos que a qu nos referimos? Muy sencillo: si has tomado algunas fotografas en tu ltimo fin de semana, y el tiempo no era bueno, con Photoshop y Paint Shop Pro puedes corregirlo. Para decirlo en otras palabras: puedes transformar un da fro y gris, en un clido atardecer de verano, gracias a las herramientas digitales que tienes en tu ordenador. En el siguiente prctico, utilizars la varita mgica y el agregado de una capa, para modificar el color del cielo y as realzar la belleza de una fotografa. En la fotografa utilizada en este ejemplo, del maravilloso mundo de Walt Disney, la gran ventaja es que el cielo ocupa un rea contnua, y no se v interrumpida por cables, o elementos que dificulten su seleccin. De esta manera es muy simple seleccionar el rea a modificar con la varita mgica.
Photoshop
V al men Archivo, elige Abrir, y busca en tu ordenador la fotografa que vas a utilizar. A continuacin debes fijarte en la Paleta de Herramientas y escoger la Varita Mgica. En la Barra de Propiedades escribe 50 en el apartado Tolerancia, y marca las casillas de verificacin de Suavizado y Contiguo.
Con la Herramienta Varita Mgica, haz click sobre la fotografa, en cualquier punto de la zona del cielo que necesitas modificar. Aparecern unas lneas punteadas 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 contrario, si la seleccin no cubre todo el cielo, debes poner una Tolerancia mayor.
N 97
61
Prctico
res: en Usar, elige Color Frontal (el Naranja que ya habas seleccionado). En Modo de Fusin, pon Normal, y en Opacidad, completa con 100%. A continuacin pulsa OK. De esta manera, habrs rellenado el rea del cielo con un color Naranja, en una capa de fusin Color que mantiene la textura y el brillo originales del cielo, y le agrega simplemente un tono clido. Si el resultado no te convence del todo, abre la paleta Capas, y modifica el porcentaje de Opacidad de la capa (cuanto mayor sea la opacidad, ms intenso ser el efecto aplicado). Finalmente abre el men Capas, y selecciona Acoplar Imagen. Por ltimo, guarda los cambios desde el men Archivo, haciendo click en Guardar. selecciona Color, y en Opacidad escribe 80. Deja el resto de valores como han aparecido por defecto. Dirgete a la Paleta Colores, y haz doble click en una muestra cualquiera, para abrir el cuadro de dilogo Color. All selecciona un color clido como el naranja. Luego v a la Paleta de Herramientas, y selecciona el Bote de Pintura. En la
4
Con la Herramienta Varita Mgica, haz click sobre la fotografa, en cualquier punto del cielo que vas a modificar; unas lneas punteadas marcarn el rea que se ha
Abre el men Capa, elige la opcin Nueva, y finalmente selecciona Capa en el men que se despliega (o pulsa la combinacin Mays + Ctrl + N en el teclado), para crear una nueva capa. En el cuadro de dilogo, primero nombra la nueva
Paleta de Configuracin, elige Oscurecer en el apartado Combinar. Deja intactos el resto de valores.
capa (por ejemplo, Nuevo Cielo). En el apartado Modo, abre el men y elige la opcin Color, y en Opacidad escribe 80%. Pulsa OK para que se cree dicha capa. Ahora abre la Paleta Muestras, y selecciona un color clido como el Naranja Puro;. Simplemente debes hacer click en el color elegido. Abre el men Edicin, y escoge Rellenar; en el cuadro de dilogo completa con los siguientes valo-
seleccionado. Si el rea de seleccin excede los lmites del cielo, reduce el valor de la Tolerancia; por el contrario, si la seleccin no cubre toda la zona del cielo, debes poner una cantidad superior en la Tolerancia.
Haz click con el Bote de Pintura en cualquier punto del cielo. La capa se habr llenado de Naranja y habrs obtenido el efecto buscado. Si el resultado no te convence del todo, abre la paleta Capas, y modifica el porcentaje de Opacidad de la capa (cuanto mayor sea la opacidad, ms intenso ser el efecto aplicado). Finalmente v
Paint Shop Pro

V al men Archivo, elige Abrir, y busca entre las carpetas de tu ordenador la fotografa que quieres utilizar. Despus de pulsar Abrir, dirgete a la Paleta de Herramientas y escoge la Varita Mgica. En la Paleta de Configuracin escribe 50 en el apartado Tolerancia, en Correspondencia elige Valor RVA, en Progresivo escribe 1, y marca la casilla Muestra Fusionada.
Abre la Paleta Capas, y haz click en el icono Crear una Capa. Se abrir el cuadro de dilogo Propiedades de la Capa. Debes completar 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, haciendo click en el botn Guardar. s
Resumiendo...
Photoshop
1 Ir al Men Archivo 3 Abrir Fotografa 3 Ir a Paleta de Herramientas 3
Escoger Varita Mgica 3 Configurar Propiedades
Paint Shop Pro

1 Ir al Men Archivo 3 Abrir Fotografa 3 Ir a Paleta de Herramientas 3
Escoger Varita Mgica 3 Configurar Propiedades
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 4 Ir a Paleta Muestras 3 Elegir Naranja 3 Ir al Men Edicin 3 Rellenar 3
OK
2 Clickear con la Varita en la foto 3 Lneas punteadas marcan la seleccin 3 Ir a Paleta Capas 3 Click en Crear Capa 3 Configurar Propiedades de
Capa
4 Ir a Paleta Colores 3 Elegir Naranja 3 Ir a Paleta de Herramientas 3

Escoger Bote de Pintura 3 Configurar Propiedades
5 Si el resultado no es ptimo ir a Paleta Capas 3 Variar la opacidad 3 Ir al

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
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.
Retoques creativos
Gua del curso


Brillo y contraste, capas de ajuste, tono, exposicin y color.
PC Today n 95
4. Tcnicas de reparacin de fotos (II). 5. Recreando fotos creativamente. 6. Embellecer y refinar retratos.
Eliminar araazos rectos, borrar elementos no deseados, minimizar manchas. PC Today n 97 Fondos personalizados, bordes y marcos creativos, modificar personajes. PC Today n 98
e apetecera pintar tu coche de otro color? Es algo demasiado caro para realizar, y luego arrepentirte Con Photoshop y Paint Shop Pro puedes modificar el color de tu automvil en tan solo cinco minutos y no necesitas llevarlo al taller! Te has enfadado con un viejo amigo, y deseas borrarlo literalmente de tus fotografas? Con las herramientas digitales que tienes entre manos, ser una tarea muy sencilla quitar de tus recuerdos fotogrficos a quien quieras olvidar Adobe Photoshop y Paint Shop Pro son dos poderosas herramientas con las cuales puedes realizar trabajos mi-
lagrosos con tus fotografas; y lo mejor de todo, es que para llevarlos a cabo slo necesitas un poco de prctica y te divertirs en grande! Es la combinacin perfecta para realizar cualquier tarea creativa: trabajo, entretenimiento y placer. En este captulo aprenders algunos trucos para reparar fotos que se han roto, agregar marcos de las formas ms variadas, crear tus propios fondos personalizados y mucho ms; pero recuerda siempre lo ms importante: no existe solamente un camino para obtener buenos resultados en fotografa digital; lo mejor es combinar distintas tcnicas de un modo prctico y creativo.
52
www.pctoday.es
Crear fondos personalizados

Si has tomado una fotografa, y ests a gusto con la figura principal, pero no con el fondo, este truco es para ti: puelores: Tolerancia: 50, y selecciona las casillas Suavizado, Contiguo, y Usar todas las capas.
Consejo
Tanto en Photoshop como en Paint Shop Pro, lo ms importante en este truco es la perfeccin de la seleccin que debes crear para el fondo. Si utilizando la varita mgica no consigues que la seleccin se ajuste al fondo y a la figura, echa mano de otras herramientas, como la mscara rpida en combinacin 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.
bien pulsar el icono de la carpeta abierta en la Barra de Herramientas Estndar.
des eliminar el fondo de una manera muy sencilla, y reemplazarlo por una textura propia. De esta manera dars a tu fotografa otro aspecto, seguramente ms impactante que el original. Tanto Photoshop como Paint Shop Pro poseen herramientas para crear texturas de un modo muy simple; puedes utilizar las que son creadas en forma automtica (como en este caso), y ms tarde experimentar aplicando tus propias variantes. El lmite lo pone tu creatividad. Un dato importante: pon especial cuidado al realizar la seleccin donde aplicars la textura, ya que de esto depende que el resultado sea lo ms realista posible. El fondo y la figura deben fundirse de un modo suave y natural.
A continuacin, haz click con la varita mgica en alguna zona del fondo donde el color sea homogneo. Si la seleccin que ha creado la varita no abarca todo el fondo, pulsa la tecla Maysculas y sigue haciendo click simultneamente en distintas zonas del fondo hasta que la seleccin lo abarque todo.
Luego escoge alguna fotografa cuyo fondo deseas reemplazar, y haz click en Abrir. de nubes que combina los colores azul y blanco que has seleccionado En la Paleta de Herramientas, escoge la Varita Mgica. Luego ve a la Paleta de Configuracin, y completa con los siguientes valores: Correspondencia, Valor RVA. Tolerancia, 50. Progresivo, 1, y marca la casilla de verificacin Muestra Fusionada. A continuacin haz click con la varita en alguna zona del fondo donde el color sea parejo. Si la seleccin que ha creado la varita no abarca todo el fondo, pulsa la tecla Maysculas y sigue haciendo click simultneamente en distintas zonas del fondo hasta que la seleccin lo abarque todo. Dirgete al men Efectos, abre Efectos de Textura, y selecciona Azulejos. Se abrir un cuadro de dilogo, donde encontrars muchas op-
Photoshop
Desde el men Archivo de la barra superior de herramientas, elige Abrir y escoge la imagen que desees utilizar para cambiar su fondo. Ahora haz click en Abrir.
Dirgete a la Paleta Capas, y haz click en el icono Crear una capa nueva, situado en la parte inferior derecha de la paleta. Ahora ve a la Paleta Muestras y haz click en
en el paso anterior, y lo aplicar en la totalidad de la nueva capa.
Abre el men Archivo, y selecciona Guardar Como. Se abrir un cuadro de dilogo; ponle un
Desde la Barra de Herramientas de Photoshop (la encuentras a la izquierda del rea de trabajo) elige la Herramienta Varita Mgica ; en la Barra de Propiedades, completa los siguientes va-
cualquier color azul oscuro; luego pulsa las teclas Ctrl + Mays. mientras haces click en el color blanco. De sta manera, has configurado al azul como color de frente, y al blanco como color de fondo. Ahora abre el men Filtro de la barra superior de herramientas, escoge la opcin Interpretar y, finalmente, haz click en el botn Nubes. Dicho filtro crear un efecto
nombre al archivo y en Formato selecciona Photoshop (*.PSD). Haz click en el apartado Capas de las Opciones de Guardado. Finalmente haz click en el botn Guardar. De sta manera, en el futuro podrs acceder al archivo y
modificar la capa con el fondo personalizado, sin que esto afecte a la fotografa original, con el fondo intacto.
Paint Shop Pro
Abre men Archivo, y en el desplegable elige Abrir . Tambin puedes pulsar el atajo Ctrl + O, o
ciones para personalizar el filtro. Puedes basarte en los parmetros de este ejemplo, pero prueba tus propias variantes; para ello, haz click en el icono del ojo, as previsualizas los resultados. Debes buscar que el fondo quede bien diferenciado de la figura. Presta atencin a los bordes de la forma , deben estar muy bien delimitados. Una vez que el resultado te agrade, pulsa el botn Aceptar.
N 98
53
Curso
Ahora el fondo de la imagen se ha convertido en un motivo personalizado. Pulsa la combinacin de teclas Ctrl + D para soltar la seleccin. Finalmente, abre el men Archivo, escoge Guardar como, y en el cuadro de dilogo escribe un nombre para el archivo; en el apartado Tipo elige TIFF,
y luego pulsa el botn Guardar. Siempre te interesa guardar este tipo de imgenes en formato Tiff, ya que as puedes volver a esitarlas cuantas veces lo desees, sin perder calidad en el proceso. Utiliza la compresin LZW, de entre las que se ofrecen a la hora de guardar, para que no se produzca prdida de informacin pero el tamao del archivo sea menor.
Resumiendo...
Photoshop
1 Ir al men Archivo 3 Escoger Abrir 3 Seleccionar imagen 3 Abrir 2 Ir a Barra de Herramientas 3 Elegir Varita Mgica 3 Configurar
Propiedades
Paint Shop Pro

1 Abrir Men Archivo 3 Escoger Abrir 3 Seleccionar fotografa 3 Abrir 2 Ir a Paleta de Herramientas 3 Elegir Varita Mgica 3 Configurar
Propiedades
3 Click en el fondo 3 Pulsar Mays. + Click 3 Agregar zonas de seleccin 4 Ir a Paleta Capas 3 Crear Capa 3 Ir a Paleta Muestras 3 Seleccionar
azul para el frente 3 Seleccionar Blanco para el fondo
3 Click con la varita en el fondo 3 Pulsar Mays. + Click hasta abarcar

todo el fondo
4 Abrir men Efectos 3 Efectos de Textura 3 Seleccionar Azulejos 3

Configurar cuadro de dilogo 3 Aceptar
5 Ir al men Filtro 3 Escoger Interpretar 3 Click en Nubes 6 Ir al men Archivo 3 Guardar Como 3 Nombrar el archivo 3 Formato
PSD 3 Click en Capas 3 Guardar
5 Pulsar Ctrl + D para soltar seleccin 3 Men Archivo 3 Guardar como 3

Elegir TIFF 3 Escribir nombre 3 Guardar
Reconstruir y mejorar retratos

Aunque no puede decirse que la informtica haga verdaderos milagros, a veces lleva a cabo tareas que en otras pocas hubieran sido inimaginables; una de ellas, es la de reconstruir una fotografa que se ha roto; por supuesto, estamos hablando de tcnicas digitales, y para eso tienes en Photoshop y Paint Shop Pro a dos aliados extraordinarios. Puedes unir digitalmente dos trozos de una foto, sin que se vean marcas ni huellas; de ms est decir que para que el trabajo sea perfecto, hacen falta bastantes horas de prctica. Pero recuerda, todas las cosas son difciles antes de hacerse fciles Verdad? Sigue paso a paso este ejercicio, y no te desanimes si al principio no ests satisfecho con los resultados. Reljate y experimenta todo lo posible sin temor a equivocarte, ya que siempre podrs volver un paso atrs pulsando la combinazin Ctrl+Z, o empezando desde el principio con el archivo original.
Photoshop
Procura escanear la foto con los trozos colocados cerca uno del otro, sin llegar a tocarse. Puedes dejar como fondo el color negro de la tapa del escner. Guarda el archivo en formato TIF con una buena resolucin (300 dpi sern ms que suficientes). Ve a la Paleta de Herramientas, y escoge la Varita Mgica; configura sus parmetros desde la Barra de Propiedades, de la siguiente manera: Tolerancia, 20; en Suavizado, Contiguo, y Usar todas las capas,
pulsa la tecla Suprimir (o Retroceso) para borrar el fondo.
Ahora abre el men Seleccin, y escoge Invertir (puedes pulsar la combinacin Ctrl + I).
En este momento has invertido la seleccin, y has cogido ambos trozos de la foto. Ve a la Paleta de Herramientas, escoge Marco Rectangular; pulsa la tecla Alt, y sin soltar el botn del ratn, rodea toda la parte inferior de la
foto, de manera de restar esta rea de la seleccin. Ahora tienes seleccio-
marca las casillas de verificacin. Luego haz click con la varita en la zona negra que ha quedado por detrs de la foto, para seleccionarla; y
nado solamente el trozo superior de la foto, como una seleccin flotante que podrs mover libremente.
54
www.pctoday.es

Ve a la Paleta de Herramientas y escoge la Herramienta Mover. Acrcate con el ratn a la zona rota de la fotografa, y vers que el cursor se transforma en una pequea
la fotografa. Una vez que hayas acabado, abre el men Archivo y elige Guardar para aplicar los cambios.
Ahora abre el men Seleccionar, y escoge Invertir (puedes pulsar la combinacin Mays + Ctrl + I)
Paint Shop Pro

tijera; haz click en el trozo y sin soltar el botn del ratn, arrstralo literalmente hasta pegarlo al trozo inferior de la foto.
Ahora ve a la Paleta de Herramientas y escoge el Tampn de Clonar. A continuacin debes ir copiando informacin con pxeles sanos de la imagen (pulsando Alt + Click), y
Procura escanear la foto con los trozos colocados cerca uno del otro, sin llegar a tocarse. Puedes dejar como fondo el color negro de la tapa del escner. Guarda el archivo en formato TIF con una buena resolucin (300 dpi sern ms que suficientes).
En este momento has invertido la seleccin, y has cogido ambos trozos de la foto. Ve a la Paleta de Herramientas, escoge Seleccionar; pulsa la tecla Alt, y sin soltar el botn del ratn, rodea toda la parte inferior de la foto, de manera de restar esta rea de la seleccin . Ahora tienes seleccionado solamente el trozo superior de la foto. Si lo deseas, puedes realizar el mismo procedimiento con otra herramienta de seleccin, como el lazo. Ve a la Paleta de Herramientas y escoge nuevamente la Herramienta S e l e c c i o n a r. Acrcate con el ratn a la zona rota de la fotografa: haz click en el trozo y sin soltar el botn del ratn, arrstralo literalmente hasta pegarlo al trozo inferior de la foto
Ahora ve a la Paleta de Herramientas y escoge el Pincel de Copia. A continuacin debes ir copiando informacin con pxeles sanos de la imagen (pulsando Mays + Click), y pintar sobre la cicatriz de la unin de ambos trozos de foto, pa-
ra evitar que se note, hasta cubrirla totalmente. Es algo que requiere bastante tiempo y dedicacin. Aprovecha que ya ests utilizando la herramienta Pincel de Copia, para corregir otros desperfectos en la foto como manchas y araazos y de esta manera mejorar el aspecto general de la fotografa. Una vez que hayas acabado, abre el men Archivo y elige la opcin Guardar para aplicar todos los cambios.
pintar sobre la cicatriz de la unin de ambos trozos de foto, para evitar que se note, hasta cubrirla totalmente. Es algo que requiere bastante tiempo y dedicacin.
Aprovecha que ests usando el Tampn de Clonar, para corregir otros desperfectos en la foto como manchas y araazos, y de esta manera mejorar el aspecto general de
Ve a l a Paleta de Herramientas, y escoge la Varita Mgica; edita sus parmetros desde la Paleta de Configuracin, de la siguiente manera: Correspondencia, RVA. Tolerancia, 20. Progresivo, 1, y marca Muestra Fusionada. Luego haz click con la varita en la zona negra que ha quedado por detrs de la foto, para seleccionarla; y pulsa la tecla Suprimir para limpiar el fondo.
Consejo
Procura realizar la tarea de clonar pxeles sanos con la mayor dedicacin posible; all es donde radica la clave del xito en este tipo de retoques. Cuando tengas algo ms de prctica, modifica el tamao del pincel con que trabajas, adaptndolo a cada zona estropeada, para aplicar correcciones con ms detalle.
Resumiendo...
Photoshop
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
Propiedades 3 Click en fondo negro 3 Suprimir el fondo
Paint Shop Pro

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 Configurar
Propiedades 3 Click en fondo negro 3 Suprimir el fondo
3 Abrir men Seleccin 3 Escoger invertir 3 Ir a Paleta de Herramientas

3 Escoger Marco Rectangular 3 Alt + desplazar para restar seleccin
3 Men Seleccionar 3 Escoger Invertir 3 Ir a Paleta de Herramientas 3

Escoger Seleccionar 3 Alt + desplazar para restar seleccin
4 Ir a Paleta de Herramientas 3 Escoger Mover 3 Click en trozo roto 3

Mover y pegar hacia abajo
4 Paleta de Herramientas 3 Seleccionar 3 Seleccionar el trozo a reparar

3 Mover y pegar hacia abajo
5 Ir a Paleta de Herramientas 3 Escoger Tampn de clonar 3 Alt + click

para copiar pxeles sanos 3 Pintar sobre la unin
5 Paleta de Herramientas 3 Escoger Pincel de copia 3 Mays + click

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
Curso
Colorizar y entonar
Si ests pensando en cambiar de coche, y no te has decidido por ningn color en particular este truco es para ti. Con herramientas tan sencillas como la seleccin por gama de colores, y la modificacin del tono y la saturacin de una imagen, podrs obtener unos resultados impactantes en el retoque de tus fotografas. En este caso hemos aplicado la tcnica sobre la foto de un automvil, pero imagnate todos los casos en que tambin te podr ser til son casi infinitos!
Abre el men Seleccin, y elige Gama de Colores. Se abrir un cuadro de dilogo, y el cursor se transformar en un gotero. En el apartado Seleccionar, elige Muestrea-
Abre el men Imagen, selecciona Ajustes y luego elige Tono / Saturacin (o pulsa la combinacin Ctrl + U). En el apartado Editar, selecciona Todos. Ahora puedes desplazar
los reguladores de Tono, Saturacin, y Luminosidad. Marca la casilla de verificacin Ver, para previsualizar el resultado en la fotografa. En este
una Varita Mgica. En la Paleta de Configuracin, selecciona Tinte del apartado Correspondencia, y escribe 40 como valor en el apartado Tolerancia. Deja el resto de valores intactos, exactamente igual que aparecen por defecto.
A continuacin haz click con la varita en alguna zona del 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. La ventaja de este mtodo radica en que puedes modificar la coloracin de cualquier objeto, sin alterar otras variables como su brillo, textura o reflejos. De esta manera el resultado es muy realista, y muy pocos podrn darse cuenta que la foto ha sido manipulada digitalmente. dos; luego haz click con el gotero en una zona de color pleno del coche. El cuadro de dilogo te mostrar una previsualizacin de la seleccin que
Photoshop
Comienza por buscar la foto de tu coche o de otro elemento habitual que tenga buena calidad. Escoge alguna en donde el color sea bastante ntido y no haya otros elementos que lo tapen de forma al-
has creado, en blanco y negro. Si observas que la seleccin no abarca la totalidad del vehculo, puedes subir el nivel de tolerancia, escribindolo en la casilla de texto o desplazando la barra del cuadro de dilogo. Cuando la seleccin sea correcta, pulsa el botn OK.
Ten en cuenta que la Saturacin agrega intensidad de color, y la Luminosidad agrega Luz. Un valor cero deja intactas estas variables. Cuando el color sea el elegido, pulsa el botn OK. Finalmente abre el men Archivo, elige Guardar
la tecla Maysculas y sigue clickeando simultneamente en distintas zonas del color del coche, hasta que la seleccin lo abarque todo.
Abre el men Colores, escoge Ajustar y finalmente abre la opcin Tinte/Saturacin/Luminosidad. Tambin puedes pulsar la combi-
Como (o pulsa la combinacin Mays + Ctrl + S); ponle un nuevo nombre al archivo, y haz click en Guardar.
Paint Shop Pro
guna. Dirgete al men Archivo y selecciona la opcin Abrir. Una vez que hayas localizado la foto en tu disco duro, pulsa el botn abrir.
Ahora vers unos halos rodeando el rea del coche que has seleccionado (el color dominante).
Comienza por buscar la foto de tu coche, dirigindote al men Archivo y seleccionando Abrir. Una vez que la hayas localizado en tu disco duro, pulsa en Abrir.
nacin de teclas Mays+H. En el cuadro de dilogo que aparezca, completa la informacin con los siguientes valores: en Editar, selecciona la opcin Maestro. Deja el apartado Colorear sin marcar. Luego escribe 135 en la casilla Tinte, -6 en
2
56
ve a la Paleta de Herramientas, y escoge la que representa
la de Saturacin, y 3 en Luminosidad. Pulsa el icono del ojo para previsualizar el resultado en la foto original.
www.pctoday.es

Cuando el color se haya transformado en el verde del ejemplo, pulsa el botn de Aceptar. Finalmente abre el men Archivo, elige la opcin Guardar Como o pulsa la tecla F12. En el cuadro de dilogo ponle un nuevo nombre al archivo para que no sustituya al original y puedas volver a ste en otra ocasin. Haz click en Guardar.
Como siempre, conserva la versin original del archivo en formato Tiff o en el original del programa que ests utilizando, ya sea PSD de Photoshop o PSP de Paint Shop Pro. De esta forma se conservar toda la informacin de capas y efectos que se hayan aplicado sin merma de calidad y con posibilidad de volver atrs sobre los cambios realizados. Tambin es muy til si deseas imprimir la imagen en cuestin, ya que conservar ms detalle que si utili-
zas mtodos de compresin. Pero si deseas enviar la imagen por correo electrnico o colocarla en una pgina web, abre el men Archivo, escoge
Consejo
Las herramientas de Tono y Saturacin son armas muy sutiles y extremadamente sensibles; debes utilizarlas con cautela y buscar que al transformar colores, los resultados no sean excesivamente notorios ni artificiales. Evita llegar a saturacin que produzca colores fluo: intenta conservar el brillo y la textura de los colores originales, de manera que el truco sea imperceptible y realista.
nuevamente Guardar como y ,en el aparatado Formato, elige Jpeg, Gif o PNG. De esta manera, el tamao del archivo ser ms liviano y se descargar ms rpido desde Internet, adems de ser compatible con la mayora de los navegadores de Internet.
Resumiendo...
Photoshop
1 Ir al men Archivo 3 Elegir imagen 3 Abrir 2 Abrir men Seleccin 3 Elegir Gama de Colores 3 Tomar muestra de
color
Paint Shop Pro

1 Ir al men Archivo 3 Elegir imagen 3 Abrir 2 Paleta de Herramienta 3 Elegir Varita Mgica 3 Configurar propiedades 3 Click con la varita en el coche 3 Seleccionarlo todo 4 Men Colores 3 Ajustar 3 Tinte/Saturacin 3 Editar valores 5 Aceptar cuando el color sea ptimo 3 Abrir men Archivo 3 Guardar
como 3 Nombrar archivo 3 Guardar
3 Aumentar Nivel de Tolerancia 3 Pulsar OK 4 Abrir men Imagen 3 Elegir Ajustes 3 Tono y Saturacin 3 Editar valores 5 Pulsar OK cuando el color sea ptimo 3 Abrir men Archivo 3 Guardar
como 3 Nombrar archivo 3 Guardar
6 Conservar el original en Tiff. Para la Web, guardar como Jpeg.
Hoy en da, con los avances de la informtica (y en particular del retoque digital de imgenes), es muy sencillo
Modificar y eliminar personajes
tica y experiencia, y ms pronto que tarde estars retocando fotos como un verdadero artista.
sobre la imagen, y sin soltar el botn del ratn, selecciona el rea donde se encuentra la persona que eliminars; procura dejar un margen suficiente para observar algo del entorno. Has ampliado la vista de la zona que editars.
agregar, quitar o modificar personas que aparecen en las fotografas. Imagnate cmo se aprovechan los fotgrafos profesionales de estas herramientas: han capturado una instantnea perfecta e irrepetible de una celebridad mundial, pero por detrs aparece un personaje annimo que (sin querer) estropea la escena. Con Photoshop y Paint Shop Pro es muy sencillo eliminarlo de la composicin, sin dejar siquiera una huella. Aunque t no seas un fotgrafo profesional, puedes aprender el siguiente truco y comenzar a experimentar con tus propias fotografas, te divertirs en grande. Seguramente al principio te costar un poco, y quedarn algunas marcas en la zona donde se encontraba el personaje eliminado. Pero recuerda que todo es cuestin de horas de prc-
Photoshop
Desde el men Archivo, elige Abrir y escoge una fotografa en la que puedas eliminar algn personaje. Haz click en Abrir.
1 2
Nuevamente ve a la Paleta de Herramientas, pero ahora escoge la Herramienta Lazo; en la Barra de Propiedades, escribe 2 px en el apartado Calado, y marca la casilla de verificacin Suavizado. A continuacin realiza con sumo cuidado una seleccin a mano
Ahora abre el men Edicin, y elige Borrar; tambin puedes pulsar la tecla Retroceso de tu teclado. Como consecuencia, has eliminado a la persona y en su lugar queda un espacio en blanco. Ahora desde la Paleta de Herramientas elige el Tampn de Clonar, y configura sus propiedades de la siguiente manera: Modo, Normal. Opacidad: 100%. Flujo, 100%, y marca las casillas Alineado y Usar todas las capas.
Tu tarea ahora consiste en ir clonando partes del fondo del paisaje, pintando sobre el rea que ha quedado en blanco. Para ello, pulsa la tecla Alt y haz click simultneamente con el
Dirgete a la Paleta de Herramientas, y escoge la Herramienta Zoom (el icono de la lupa). Ahora haz click
alzada alrededor del sujeto que vas a eliminar; hazlo con paciencia y tranquilidad. Si te equivocas y la seleccin desaparece, puedes empezar nuevamente.
tampn de clonar, en la zona que deseas copiar. A continuacin, comienzas a pintar en la zona blanca, con la muestra que has tomado. Repite el mismo procedimiento tantas veces como sea necesario, hasta cubrir toda la zona blanca. Debes intentar que el blanco
N 98
57
Prctico
se fusione con el fondo, de manera que el truco sea natural y no queden cicatrices del retoque. donde se encuentra la persona que eliminars. Procura dejar un margen suficiente para observar algo del entorno, ya que ser una referencia bsica en el proceso que viene a continuacin. De esta forma, has ampliado la vista de la zona que editars.
Consejo
Aqu hay dos factores muy importantes que determinarn la calidad del retoque digital; en primer lugar, una seleccin ajustada, de bordes suaves, que no elimine informacin que deseas conservar. Por otro lado, el ingenio y buen ojo que hacen falta para escoger acertadamente las zonas ideales para clonar. Cuando se trata de rboles, cielo y paisajes lejanos (como en este ejercicio) la tarea se simplifica, ya que los defectos se disimulan muy fcilmente. Y como siempre: practica, practica, y practica
3
Finalmente abre el men Archivo, elige Guardar Como (o pulsa la combinacin Ctrl + Mays + S); ponle un nuevo nombre al archivo (para conservar el original intacto), y haz click en Guardar.
6 1 2
Paint Shop Pro

En el men Archivo, elige Abrir y escoge una fotografa en la que aparezca algn personaje que desees eliminar. Lo ptimo sera que el
fondo fuera homogneo, pero no es imprescindible porque con las herramientas adecuadas se puede inventar lo que falta. A continuacin, haz click en Abrir. Dirgete a la Paleta de Herramientas, y escoge Acercar (el icono de la lupa). Ahora haz
Dirgete a la Paleta de Herramientas, escoge la Herramienta Lazo; en la Paleta de Configuracin, selecciona la opcin A mano alzada, escribe 2 en el apartado Progresivo, y marca la casilla de verificacin Antiarrugas. A continuacin realiza con sumo cuidado una seleccin a mano alzada alrededor del sujeto que vas a eliminar; hazlo con paciencia y tranquilidad. Si te equivocas y la seleccin desaparece, puedes empezar de nuevo.
Paso, 1; Densidad, 100. Has creado un pincel redondo con los bordes suavizados. Tu tarea ahora consiste en clonar partes del fondo del paisaje, o lo que es lo mismo, inventarte lo que debera haber detrs del personaje eliminado. Para ello tendrs que pintar sobre el rea que ha quedado en blanco., de tal forma que no se note en exceso. Es tan fcil como parece. Pulsa la tecla Shift y haz click simultneamente con la herramienta del Pincel de Copia, en la zona que deseas copiar. A continuacin, comienza a pintar en
la zona de color blanco, con la muestra que has tomado. Repite el mismo procedimiento tantas veces como sea
click sobre la imagen, y sin soltar el botn del ratn, selecciona el rea
Ahora abre el men Edicin, y elige Limpiar; tambin puedes pulsar la tecla Suprimir de tu teclado. Como consecuencia, has eliminado a la persona y en su lugar queda un espacio en blanco. Ahora desde la Paleta de Herramientas elige el Pincel de Copia, y configura sus propiedades de la siguiente manera: Forma, Redonda; Tamao, 20. Definicin, 50; Opacidad, 100;
necesario, hasta cubrir toda la zona del color elegido. Debes intentar que el blanco se fusione con el color del fondo, de manera que el truco sea natural y no queden cicatrices del retoque . Finalmente abre el men Archivo, elige la opcin Guardar Como, o pulsa la tecla F12. En la ventana que se abre, escribe un nuevo nombre para el archivo, dife-
rente al de la imagen original, en la casilla Nombre. De esta forma podrs conservar el original intacto, pero tendrs una versin retocada el mismo. Haz click en el botn guardar.
Resumiendo...
Photoshop
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
Ampliar imagen
Paint Shop Pro

1 Ir al men Archivo 3 Elegir Abrir 3 Seleccionar fotografa 3 Abrir 2 Abrir Paleta de Herramientas 3 Escoger Acercar 3 Click y desplazar 3
Ampliar imagen
3 Ir a Paleta de Herramientas 3 Escoger Lazo 3 Configurar Propiedades 3

Realizar seleccin a mano alzada
3 Ir a Paleta de Herramientas 3 Escoger Lazo 3 Configurar Propiedades 3

Realizar seleccin a mano alzada
4 Abrir Men Edicin 3 Borrar 3 Ir a Paleta de Herramientas 3 Elegir

Tampn de Clonar 3 Configurar Propiedades
4 Abrir Men Edicin 3 Borrar 3 Ir a Paleta de Herramientas 3 Elegir

Pincel de copia 3 Configurar Propiedades
5 Click + Alt para tomar muestras 3 Pintar clonando hasta cubrir las
zonas blancas
5 Click + Maysculas para tomar muestras 3 Pintar clonando hasta cubrir

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
Curso
Escanear fotografas
Aunque ya slo utilices tu cmara digital, puede que tengas muchas imgenes en papel que quieras almacenar junto a las primeras, en un CD o en el propio disco duro del PC. Para hacerlo, necesitars un escner, el cual es un perifrico dedicado expresamente al proceso de digitalizar imgenes. Este dispositivo explora la informacin de tu fotografa con un haz de luz, traduce esa informacin a unos y ceros para que la entienda el ordenador y la vuelca a tu programa favorito de tratamiento de imgenes. Eso es todo! Ya tienes tu foto en formato digital, lista para archivar o retocar con las herramientas de tu programa. Algunos modelos incluso pueden realizar el proceso con diapositivas, transparencias y otros tipos de representaciones, adems de las tpicas fotografas o documentos en papel. Incluso los hay especficos para escanear objetos en tres dimensiones. El proceso es muy similar en ambos programas, ya que ambos aprovechan el software que viene incluido con el escner o el propio de Windows XP. ste ha de ser compatible con el estndar TWAIN, algo que ya es habitual en casi la totalidad de los productos.
Paint Shop Pro y Adobe Photoshop

Apoya la foto que desees digitalizar sobre el vidrio de tu escner o la bandeja de entrada del mismo. Pon la imagen hacia abajo para que el haz de luz pueda capturarla. Coloca los bordes de la foto junto a cual-
Abre el men Archivo, selecciona la opcin Importar, escoge TWAIN y luego la opcin Adquirir. Se abrir la ventana del software de tu escner. Pulsa el botn Previsualizar
Opaco, en Entrada (o Resolucin) escribe 300 dpi, y en Escalar escoge el 100%. Ahora coloca el puntero del ratn en un ngulo de la fotografa, y sin soltar el botn arrastra hasta
para que el escner haga un barrido y te muestre lo que has colocado sobre la bandeja.
abarcar toda su superficie. Suelta el botn izquierdo del ratn que quede seleccionada el rea que deseas adquirir. Luego pulsa el botn Digitalizar.
Una vez que finalice la exploracin de la imagen, se abrir la fotografa en una nueva ventana de Photoshop o de Paint Shop Pro. Abre el men archivo y escoge Guardar, o pulsa la combinacin Ctrl
quier ngulo del escner, para que la foto quede correctamente alineada con la direccin de lectura. Luego baja la tapa del escner si es necesario o procede a activar el botn de preparado si es un escner de bandeja.
Aplicar bordes y marcos creativos

Algo muy interesante es la aplicacin de marcos personalizados a las fotos. En Paint Shop Pro, debes abrir el men Imagen y luego escoger la opcin Marcos. A partir de all, se del men Capa, y luego en Estilo de Capa. Puedes crear marcos rectangulares o elpticos; planos, o en relieve. Los bordes tambin pueden ser suavizados, como en las viejas fotos de tus abuelos. El lmite lo pone tu creatividad. Puedes aplicar los marcos para enviar tarjetas de felicitacin a travs del correo electrnico, o imprimirlas para sorprender a tus familiares y seres queridos. Tambin puedes aplicarlos para colocar en un lbum de fotografas en la web. Recuerda algo importante: siempre que apliques marcos personalizados a tus fotografas, hazlo en una nueva capa as preservas los pxeles reales de la foto. Y guarda el archivo con un nombre diferente, en formato TIFF, para conservar intacto el original. Podrs volver a editarlo en cualquier momento.
Configura los parmetros de exploracin de la imagen. El nombre de los apartados puede variar de acuerdo a cada software, pero bsicamente estos son los valores importantes: en Modo de Color escoge RGB, en Original selecciona
+ S. En el apartado Formato escoge TIFF para que la imagen no pierda calidad, escribe un nombre descriptivo para tu fotografa, elige un destino de tu disco duro, y finalmente haz click en Guardar. Ya tienes tu fotografa en formato digital, lista para archivar o para retocar en la aplicacin que has utilizado o en cualquier otra compatible con el formato en que la has guardado.
Consejo
Los controladores de la mayora de los escneres traen de serie potentes funciones, que puedes aprovechar al mximo antes de escanear: parmetros como el brillo y el contraste, el enfoque y la gama de colores, habitualmente puedes configurarlos desde el software del escner. Si aprendes a manejar a fondo estas funciones, te ahorrars mucho tiempo en el tratamiento posterior de la fotografa.
abrir el Asistente de Enmarcado, que ofrecer algunos estilos predefinidos, con los que seguramente llegars a resultados sorprendentes. En cuanto a Photoshop, no es todo tan sencillo ya que no posee una herramienta automatizada (como Paint Shop Pro) que lleve a cabo esta tarea. Para agregar marcos a tus fotos desde Photoshop, primero debes ampliar el tamao del lienzo para crear unos bordes blancos alrededor de la fotografa. Luego puedes crear el marco en una nueva capa, aplicando los infinitos efectos de capa que encontrars dentro
Resumiendo...
1 Apoyar la foto en el escner 3 Ajustarla a un ngulo 3 Bajar la tapa 2 Abrir men Archivo 3 Elegir Importar 3 Elegir TWAIN 3 Click en
Adquirir 3 Se abre ventana del controlador 3 Click en Previsualizar
3 Configurar parmetros de exploracin 3 Seleccionar fotografa 3

Click en Digitalizar
4 Se abre la foto 3 Abrir men Archivo 3 Escoger Guardar 3 Formato

TIFF 3 Nombrar foto 3 Click en Guardar
N 98
59
Curso
Embellecer retratos
Gua del curso
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.
uin no se ha peinado o ha puesto una hermosa sonrisa, ante el disparo de una cmara fotogrfica? Todo el mundo desea aparecer con su mejor rostro en cualquier fotografa. Esta actitud es muy comprensible, ya que deseamos que en el futuro nos recuerden como bellas personas en el ms amplio sentido de la expresin. Es posible que muchas de las fotografas que nos han tomado a travs de los aos, no nos muestren muy agraciados. Gracias a las fabulosas herramientas que ofrecen Adobe Photoshop y Paint Shop Pro, muchos de estos problemas pueden solucionarse casi mgicamente. No hace falta que escondas ni

Brillo y contraste, capas de ajuste, tono, exposicin y color.
PC Today n 95
4. Tcnicas de reparacin de fotos (II). 5. Recreando fotos creativamente. 6. Embellecer y refinar retratos.
Eliminar araazos rectos, borrar elementos no deseados, minimizar manchas. PC Today n 97 Fondos personalizados, bordes y marcos creativos, modificar personajes. PC Today n 98
rompas ninguna foto; lee atentamente los trucos que te enseamos a continuacin y tus nietos te recordarn como una hermosa persona! En este captulo del curso, el ser humano es el protagonista, ya que aprenders bsicamente a embellecer los retratos de tus seres queridos ; podrs eliminar arrugas y marcas del paso del tiempo, en muy pocos pasos. Te transformars en un cirujano plstico digital. Tambin podrs corregir el tpico problema de ojos rojos que ha estropeado tantas fotografas, y aprenders a usar efectos de desenfoque e iluminacin para dar a tus retratos el toque de refinamiento que har que se vuelvan inolvidables.
54
www.pctoday.es
Corregir ojos rojos
Dirgete a la fotografa ampliada, y haz click con la varita en la parte roja de los ojos, para crear una seleccin; pulsa SHIFT en tu teclado y haz click ahora sobre el otro
Paint Shop Pro

Desde el men Archivo, elige Abrir, o pulsa la combinacin Ctrl + O y escoge la imagen con el problema de ojos rojos. Haz click en el botn Abrir.
Es casi imposible que nunca te haya sucedido lo siguiente: la fotografa que has tomado es preciosa, la composicin y la iluminacin son casi perfectas, y todo parece estar fenomenal, salvo por un problema los protagonistas parecen estar endemoniados ya que sus ojos presentan un extrao color rojizo. Algunos programas de retoque fotogrfico ya incorporan herramientas que solucionan ste problema de forma automtica con muy buenos resultados. 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 principalmente en restarle saturacin al canal del color rojo, solamente en la zona de las pupilas, y mantener los valores de brillo y contraste inalterables. Manos a la obra.
De esta forma podrs ver mejor la zona en la que vas a trabajar y
ojo, para sumar las selecciones. A continuacin abre el men Imagen, selecciona Ajustes y finalmente escoge Tono / Saturacin (tambin puedes pulsar el atajo Ctrl + U).
apreciars los efectos del proceso a realizar.
Se ha abierto el cuadro de dilogo Tono / Saturacin; en el apartado Editar, despliega el men correspondiente y escoge Rojos, para corregir selectivamente dicho canal. Haz click en la casilla de verificacin Ver, para previsualizar el resultado.
Desde la Paleta de Herramientas de Paint Shop Pro elige la Herramienta Acercar; luego
haz click en la imagen, y sin soltar el botn, desplaza el ratn abarcando el
Photoshop
Desde el men Archivo, elige la opcin Abrir y escoge una imagen que contenga alguna figura con el problema de ojos rojos. Haz click en el botn Abrir.
A continuacin debes seleccionar slo el rea defectuosa de los ojos. Escoge la herramienta Varita Mgica desde la Paleta de Herramientas. En la Barra de Propieda-
des configura la Tolerancia con un valor de 35, y marca las casillas correspondientes a Suavizado, Contiguo, y Todas las Capas.
Dirgete al apartado Saturacin y desplaza el regulador hacia la izquierda. Define un valor aproximado de 50, ya que logra buenos resultados. Deja el resto de valores intactos, y cuando el aspecto de los ojos sea lo ms natural posible, haz click en el botn OK.
rea de los ojos, para acercarte tanto como puedas . A continuacin debes seleccionar el rea defectuosa de los ojos. Escoge la Varita Mgica desde la Paleta de Herramientas. En la Paleta de Configuracin escoge Valor
Consejo
Tanto en Photoshop como en Paint Shop Pro, la clave en este truco (como en muchos otros) consiste en lograr una seleccin ajustada y precisa. Si con la varita mgica no logras una seleccin correcta con el primer click, sigue sumando reas de seleccin con la herramienta que mejor manejes (lazo, seleccin elptica, etctera). Luego vara la saturacin del canal rojo, buscando que el ojo mantenga su brillo y textura, para que su aspecto sea absolutamente natural.
Abre el men vista, y escoge Encajar en pantalla, para ver el resultado de tu obra con una
RVA en Correspondencia, y escribe 35 como valor de Tolerancia; marca la casilla Muestra Fusionada.
Desde la Paleta de Herramientas de Photoshop, normalmente situada a a la izquierda del rea de trabajo, elige la Herramienta Zoom. Luego haz click en la imagen y, sin soltar el botn, desplaza el ratn abarcando un rea que encierre los ojos.
mayor distancia. Si el resultado te convence, abre el men Archivo y selecciona la opcin Guardar. De esta forma se aplicarn los cambios en tu imagen de forma definitiva.
N 99
55
Curso
Dirgete a la fotografa ampliada, y haz click con la varita en la parte roja de los ojos, para crear una seleccin; pulsa SHIFT en tu teclado y haz click ahora sobre el otro ojo, para sumar las selecciones. A continuacin abre el men Colores, selecciona Ajustar y finalmente escoge Tinte / Saturacin / Luminosidad.
Se ha abierto el cuadro de dilogo Tinte / Saturacin / Luminosidad; en el apartado Editar, despliega el men y escoge Rojos, para corregir selectivamente dicho canal. Haz click en el icono del Ojo, para previsualizar el resultado. Ve al apartado Saturacin y desplaza el regulador hacia abajo; un valor aproximado de 60 logra buenos resultados. Deja el resto de valores intactos, y cuando el aspecto de los ojos sea lo ms natural posible, haz click en el botn Aceptar.
Abre el men Ve r, y escoge Alejar x 5, para ver el resultado de tu obra con una mayor distancia. Si el resultado te convence, abre el men Archivo y escoge Guardar (o pulsa la combinacin Ctrl + S), para aplicar los cambios en tu imagen.
Resumiendo...
Photoshop
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
imagen
Paint Shop Pro

1 Ir al men Archivo 3 Escoger Abrir 3 Seleccionar imagen 3 Abrir 2 Ir a Paleta de Herramientas 3 Elegir Acercar 3 Click y arrastrar 3
Ampliar imagen
3 Ir a Paleta de Herramientas 3 Escoger Varita Mgica 3 Configurar

Propiedades
3 Ir a Paleta de Herramientas 3 Escoger Varita Mgica 3 Configurar

Propiedades
4 Click en zona defectuosa 3 Abrir men Ajustes 3 Escoger Tono /

Saturacin
4 Click en zona defectuosa 3 Abrir men Ajustar 3 Escoger Tinte /

Saturacin / Luminosidad
5 Editar Cuadro de dilogo 3 Restar Saturacin 3 Previsualizar el resultado

3 Click en OK
5 Editar Cuadro de dilogo 3 Restar Saturacin 3 Previsualizar el resultado

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

Nadie esta exento de tener pequeas marcas en la piel: desde el acn juvenil hasta las arrugas de la vejez, nuestra piel va registrando diversos cambios que reflejan los acontecimientos a lo largo de nuestra vida. En este ejemplo veremos como quitar pequeas espinillas del rostro de una adolescente. Muchas de ellas suelen aparecer horribles en las fotos! De esta manera podremos eliminar sus espinillas y pequeas marcas en el rostro, para que puedan tener un aspecto perfecto. Tanto en Photoshop como en Paint Shop Pro, la tcnica consiste en utilizar el tampn de clonar, copiando informacin buena de la piel y aplicndola sobre una capa vaca. El resultado depender mucho de la calidad de la imagen original, ya que no consiste en inventar piel, sino en copiarla de otro sitio donde sea ms perfecta. Vamos a hacer de cirujanos plsticos.
Photoshop
Desde el men Archivo haz click en Abrir. Escoge la foto que deseas corregir de tu disco duro o de cualquier otro dispositivo de almacenamiento. Dirgete a la
Ve a la Paleta de Herramientas y selecciona el Tampn de Clonar; puedes hacerlo tambin pulsando la tecla S. Luego dirgete a la Barra de Propiedades, y configura un pincel suave de 15 pxeles,
Modo Normal, Opacidad 50%, y marca Usar Todas Paleta Capas, y pulsa el botn Crear una capa nueva. Luego haz doble click en el nombre de la capa, y llmala Eliminar Defectos. las Capas; deja el resto de valores que queden intactos.
Desde la Paleta de Herramientas de Photoshop elige la Herramienta 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

Consejo
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 radica en elegir acertadamente las zonas de piel sana, para que el retoque sea imperceptible. La gran ventaja de realizar la tarea sobre una capa vaca, es que luego puedes editarla independientemente, cambiando su opacidad, para que el resultado sea an ms perfecto.
de las espinillas, para verlas ms en detalle. A continuacin ve a la Paleta
click en la capa de Eliminar Defectos para activarla. Con la herramienta Tampn de Clonar, haz click + Alt en zonas cercanas a las espinillas, para tomar muestras de piel sana con valo-
pelera de la Paleta Capa y volver a comenzar nuevamente. Cuando las espinillas hayan desaparecido, abre el men Capas y selecciona
be Eliminar Defectos como nombre para la capa; deja el resto de valores intactos, y haz click en Aceptar. Ve a la Paleta de Herramientas y selecciona el Pincel de Copia. Luego dirgete a la Barra de Propiedades, y configura un pincel suave de 15
Acoplar Imagen. Finalmente Guarda tu archivo pulsando Ctrl + S para conservar los cambios.
Capas, y haz click en la capa Eliminar Defectos para activarla. Con la herramienta Pincel de Copia, haz click + Shift en zonas cercanas a las espinillas, para tomar muestras de piel sana con valores de brillo y color similares. Una vez tomada la muestra, haz click directamente sobre las espinillas, para ocultarlas bajo la nueva piel. Repite este procedimiento dos o tres veces, hasta que las marcas sean imperceptibles . Repite el paso 4 sobre cada una de las marcas que encuentres en la piel; si no ests conforme con el resultado. Cuando las espinillas hayan desaparecido, abre
Paint Shop Pro

Desde el men Archivo haz click en Abrir y escoge la foto que deseas corregir de tu disco duro. Dirgete a la Paleta Capas, y pulsa
res de brillo y color similares. Una vez tomada la muestra, haz click directamente sobre las espinillas, para ocultarlas bajo la nueva piel. Repite este procedimiento dos o tres veces, hasta que las marcas sean imperceptibles. Repite el paso anterior sobre cada una de las marcas que encuentres en la piel; si no ests conforme con el resultado, puedes borrar la capa Eliminar Defectos haciendo click en el icono de la pa-
el botn Crear una capa nueva. En el cuadro de dilogo que se abre, escripxeles, Forma Redonda, Definicin 50 y Opacidad 50; deja el resto de valores como vienen por defecto. Desde la Paleta de Herramientas de Paint Shop Pro elige la Herramienta Acercar (el icono de la Lupa); luego haz click en la imagen, y sin soltar el botn del ratn, desplaza el ratn abarcando la zona
el men Capas, selecciona Fusionar, y luego haz click en Fusionar Todo (aplanar). Finalmente Guarda tu archivo pulsando Ctrl + S para conservar los cambios.
Resumiendo...
Photoshop
1 Abrir men Archivo 3 Abrir foto 3 Ir a Paleta Capas 3 Crear capa 3
Nombrarla Eliminar defectos
Paint Shop Pro

1 Abrir men Archivo 3 Abrir foto 3 Ir a Paleta Capas 3 Crear capa 3
Nombrarla Eliminar defectos
2 Ir a Paleta de Herramientas 3 Click en Tampn de Clonar 3 Configurar

Propiedades
2 Ir a Paleta de Herramientas 3 Click en Pincel de copia 3 Configurar

Propiedades
3 Ir a Paleta de Herramientas 3 Elegir Zoom 3 Click y arrastrar para

ampliar defectos 3 Ir a Paleta Capas 3 Activar capa Eliminar defectos
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
4 Click + Alt con Tampn de clonar 3 Tomar muestras de piel 3 Click y

pintar sobre espinillas 3 Repetir procedimiento
4 Click + Shift con Pincel de copia 3 Tomar muestras de piel 3 Click y

pintar sobre espinillas 3 Repetir procedimiento
5 Borrar capa Eliminar defectos 3 Abrir men Capas 3 Acoplar Imagen

3 Guardar archivo
5 Borrar capa Eliminar defectos 3 Abrir men Capas 3 Fusionar todo 3

Guardar archivo
N 99
57
Curso
Efectos de enfoque suavizado

Este truco resulta tan sencillo como sorprendente; consiste en desenfocar solamente una parte de la imagen, y enfocar slo una zona, sobre la cual deseamos centrar la atencin del espectador. Podramos llamarla Tcnica de enfoque selectivo. fondo y el negro como color de frente o seleccinalo con el botn del ratn
suavizado que va desde el color negro hasta el blanco.
en la seccin colores de la barra de herramientas.
Dirgete a la Paleta de Herramientas y escoge la Herramienta Degradado (puedes pulsar la letra G de tu teclado). (Captura 3010) En la Barra de Propiedades de la
Abre el men Capas y selecciona la opcin Acoplar Imagen. Por ltimo, selecciona la opcin Guardar del men Archivo o pul-
Herramienta, selecciona Degradado Radial. Deja el resto de valores por defecto. Este efecto es muy utilizado en revistas de moda y belleza, donde la fotografa no solamente cumple una misin informativa, sino que tambin transmite una esttica glamorosa muy particular. Si observas estas revistas detenidamente, notars que sus fotografas son casi perfectas, los brillos en las modelos, la coloracin de los vestidos y el tono en general, transmiten un clima apacible y confortable a la vez. Puedes aplicar este efecto sobre una fotografa que aprecies especialmente, por los recuerdos que te transmite, para aplicarle un toque an ms refinado. A continuacin abre el men Filtro, escoge Desenfocar, y elige Desenfoque Gaussiano. En el cuadro de dilogo que se abre, escribe 15 pxeles en el apartado Radio. Marca la casilla de verificacin Ver para pre-
sa la combinacin de teclas Ctrl + S para aplicar los cambios a la imagen que acabas de editar.
Photoshop
Desde el men Archivo haz click en Abrir y escoge la foto a la que deseas aplicarle el enfoque selectivo. Dirgete a la Paleta Capas, y desde el men asociado la paleta escoge Duplicar Capa. En el
visualizar el efecto. No te asustes si la imagen queda totalmente borrosa, el efecto es correcto. Finalmen-
A continuacin haz click en el centro de atencin de la fotografa. En el caso del ejemplo escogido seran los rostros del beb y su madre. Sin soltar el botn del ratn, arrastra la herramienta hasta la zona ms alejada de dicho centro. Si el resultado del efecto no te convence, pulsa Ctrl + Z o elije la opcin deshacer del men Edicin en la barra superior de la aplicacin. Vuelve a intentarlo, hasta que haya un equilibrio entre la zona enfocada y desenfocada. En la Capa para desenfocar debe haberte quedado un crculo
Consejo
No tengas miedo en intentar varias veces el efecto del degradado, ya que all est la clave de este truco. Prueba varias veces, vuelve atrs con Ctrl + Z, e intntalo una vez ms. Debes lograr que la atencin del espectador vaya directamente a la zona enfocada de la imagen; en cuanto a la zona desenfocada, debe tener un equilibrio tal que no se vea demasiado borrosa. Aljate de tu monitor y observa el resultado con cierta distancia, para apreciar mejor el efecto global.
Paint Shop Pro

Desde el men Archivo haz click en la opcin Abrir y escoge la fotografa a la que deseas aplicarle el efecto de enfoque selectivo. Dirgete al men Capas y selecciona la herramienta Duplicar.
1 2
cuadro de dilogo que se abre, escribe 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 aplicar el filtro. Abre el men Capa. Selecciona la opcin Aadir mscara de capa y haz click en Descubrir todas. Pulsa la tecla D de tu teclado para escoger el blanco como color de
Dirgete a la Paleta de Herramientas y pulsa en el icono correspondiente a la de Seleccionar. En la Paleta de Configuracin, escoge Crculo en el apartado Tipo de Seleccin y escribe el valor 30 en el apartado Progresivo. Esto sirve para
58
www.pctoday.es

Dirgete al men Seleccionar y escoge Invertir, o pulsa la combinacin de teclas Mays + Ctrl + I. crear una seleccin circular de bordes suavizados.
A continuacin abre el men Efectos, elige Desenfoque y luego haz click en Desenfoque de Gauss. Se abrir un cuadro de dilogo, y en el apartado Radio escribe un valor alto como 15; pulsa el icono del ojo pa-
zona enfocada y desenfocada. Finalmente pulsa Aceptar para aplicar los cambios.
Ahora busca el centro de atencin de la fotografa (en este caso los rostros del beb y su madre), haz click y sin soltar el botn del ratn, arrastra para crear una seleccin elptica de bordes suavizados.
ra previsualizar el resultado. Si el resultado del efecto no te convence, vuelve a intentarlo escribiendo otros valores, hasta que haya un equilibrio entre la
nar Todo (aplanar). Finalmente Guarda tu archivo pulsando Ctrl + S para aplicar los cambios.
Abre el men Capas, selecciona Fusionar, y haz click en Fusio-
Resumiendo...
Photoshop
1 Desde el men Archivo 3 Abrir 3 Escoger foto 3 Abrir Paleta Capas 3
Duplicar Capa
Paint Shop Pro

Duplicar
2 Abrir men Filtro 3 Desenfocar 3 Desenfoque Gaussiano de 15 pxeles 3

Previsualizar efecto 3 Pulsar OK para aceptar
2 Ir a Paleta de Herramientas 3 Escoger el botn Seleccionar 3 Abrir

Paleta de Configuracin 3 Escoger la herramienta Crculo 3 Escribir 30 en Progresivo
3 Abrir men Capa 3 Aadir mscara de Capa 3 Pulsar tecla D para

configurar negro y blanco como colores de frente y fondo.
3 Click + arrastrar para crear seleccin 3 Abrir men Seleccionar 3

Escoger invertir
4 Ir a Paleta de Herramientas 3 Escoger Degradado 3 Ir a Barra de

Propiedades 3 Click en Degradado Radial
4 Abrir men Efectos 3 Elegir Desenfoque 3 Click en Desenfoque de Gauss

3 Escribir 15 en cuadro de dilogo 3 Click en Aceptar
5 Click + arrastrar desde el centro de atencin 3 Intentarlo hasta lograr

equilibrio
5 Abrir men Capas 3 Escoger Fusionar 3 Click en Fusionar Todo 3 Ctrl +

S para guardar los cambios
6 Men Capas 3 Click en Acoplar Imagen 3 Ctrl + S para aplicar cambios
Disimular el paso del tiempo

Esta tcnica tambin es muy utilizada en los medios escritos de comunicacin, ya que se utiliza para rejuvenecer a las personas fotografiadas, quitndoles algunas arrugas y suavizando marcas de la piel.
Como siempre, lo ms importante es que el resultado final del retoque sea casi imperceptible y natural; de manera que en este ejercicio intentaremos suavizar las arrugas, y no eliminarlas totalmente; an la persona ms joven genera arrugas en su rostro con tan slo rerse o gesticular, de manera que una cara sin una sola arruga es algo imposible. Aprende la tcnica que desarrollamos a continuacin y luego aplcala en forma combinada con las que has aprendido a lo largo del curso. As conseguirs realizar retoques digitales totalmente imperceptibles.
Photoshop
Desde el men Archivo haz click en Abrir y escoge el retrato en el cual deseas minimizar las arrugas. Dirgete a la Paleta Capas, y desde el men asociado a la paleta escoge Duplicar Capa. En el
N 99
59
Prctico
cuadro de dilogo que se abre, escribe Minimizar arrugas, y en Destino selecciona el mismo archivo que ests utilizando. Luego haz doble click en OK para duplicar la capa.
Ve a la Paleta de Herramientas y escoge el modo de Sobreexponer. En la Barra de Propiedades configura una Exposicin del 15%, elige Rango de Medios Tonos, y escoge un Pincel con bordes suavizados de 10 pxeles. Es importante
hacia adentro. Debes ir aclarando de esta manera cada una de las arrugas, para que el relieve no sea tan notorio. Si algunas arrugas son ms gruesas que otras, modifica tu pincel adaptndolo al grosor de cada una de ellas. Repite el procedimiento hasta cubrir todas las arrugas.
dad ++. Es importante que el grosor del pincel sea similar al grosor de las arrugas de la piel.
que el relieve no se note en exceso. Si algunas arrugas son ms gruesas que otras, modifica las opciones del pincel que ests utilizando para que se adapte totalmente al grosor de cada
que el grosor del pincel sea similar al grosor de las arrugas de la piel.
Abre el men Capas y selecciona la opcin Acoplar Imagen. Por ltimo, elije la opcin Guardar tu archivo en disco o pulsa la combinacin de teclas Ctrl + S para aplicar los cambios. Desde la Paleta de Herramientas de Paint Shop Pro elige la Herramienta Acercar (el icono de la Lupa); luego haz click en la imagen, y sin soltar el botn, desplaza el ratn
una de ellas. Repite el procedimiento hasta cubrir todas las arrugas.
Consejo
Cuando realices este retoque digital, hazlo con la mayor paciencia posible, trabajando individualmente sobre cada arruga. Adapta el grosor de tu pincel a cada una de ellas, si no las pinceladas se notarn y estropearn el efecto. Y ten presente este consejo: busca siempre la naturalidad, no elimines las arrugas por completo ya que el rostro parecera de plstico. Con tan solo suavizarlas, logrars que la persona retratada tenga una apariencia ms fresca y lozana.
Desde la Paleta de Herramientas de Photoshop elige la Herramienta 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 arrugas, para ver-
Paint Shop Pro

Desde el men Archivo haz click en Abrir y escoge el retrato en el cual deseas minimizar las arrugas. Dirgete al men Capas, y haz click en Duplicar. Ahora ve a la Paleta Capas, haz doble click en Copia de Capa de
abarcando la zona de las arrugas, para verlas ms en detalle. Luego ve a la Paleta Capas, y haz click en la capa Minimizar Arrugas para activarla. A continuacin debes realizar el trabajo ms fino, con paciencia y dedicacin: sobreexponer la parte oscura de las arrugas (el pliegue), desde afuera hacia adentro. Debes ir aclarando de esta manera cada una de las arrugas, para
Abre el men Capas, selecciona la opcin Fusionar y haz click en la opcin Fusionar Todo.
Fondo y renmbrala Minimizar arrugas, desde el cuadro de dilogo. Deja el resto de variables intactas.
las ms en detalle. Luego ve a la Paleta Capas, y haz click en la capa Minimizar Arrugas para activarla.
A continuacin debes realizar el trabajo ms fino, con paciencia y dedicacin: sobreexponer la parte oscura de las arrugas, lo que corresponde al pliegue, desde afuera
Dirgete a la Paleta de Herramientas y escoge la correspondiente a Retoque. En la Paleta de Configuracin, elige Forma Redonda, Tamao 8, Opacidad 20, Paso 25 y Densidad 80. Despliega el men inferior para seleccionar Luminosi-
De esta forma, se aplanarn las capas que formen la imagen y pasarn a ser un archivo ms fcil de exportar a otras aplicaciones, adems de ocupar bastante menos espacio en el disco. Sin embargo, una vez acoplada la imagen, no ser posible modificar los cambios que se corresponden a cada capa de una forma sencilla. Para evitarlo, puedes guardar dos versiones 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 estndar que ofrece alta calidad y permite el uso de capas es TIFF. Una vez que hayas finalizado la operacin, Guarda tu archivo de trabajo pulsando Ctrl + S para y se aplicarn los cambios realizados en la versin que tengas abierta en ese momento.
60
www.pctoday.es

Resumiendo...
Photoshop
Duplicar Capa 3 Renombrar Capa 3 Pulsar OK
Paint Shop Pro

Duplicar Capa 3 Renombrar Capa 3 Pulsar OK
2 Ir a la Paleta de Herramientas 3 Click en Sobreexponer 3 Configurar

Propiedades del pincel
2 Ir a la Paleta de Herramientas 3 Click en Retoque 3 Configurar

Propiedades del pincel
3 Ir a la Paleta de Herramientas 3 Elegir Zoom 3 Click y arrastrar para

ampliar arrugas 3 Ir a Paleta Capas 3 Activar capa Minimizar Arrugas
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
4 Retocar cada arruga 3 Aclarar las zonas ms oscuras 3 Adaptar pincel

al grosor de cada arruga
4 Retocar cada arruga 3 Aclarar las zonas ms oscuras 3 Adaptar pincel

al grosor de cada arruga
5 Abrir men Capas 3 Click en Acoplar Imagen 3 Ctrl + S para guardar

los cambios
5 Abrir men Capas 3 Click en Fusionar 3 Fusionar todo 3 Ctrl + S para

guardar los cambios
Mejorar los retratos con luz
es iluminar las partes ms destacadas de la cara, como los ojos, la nariz y la boca. Tambin puedes iluminar el pelo 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
ta que el resultado sea satisfactorio. Recuerda, intenta conseguir siempre una gran naturalidad y utilizar la luz
para destacar las reas ms importantes 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 halos en torno a la figura. Muchas veces sacamos fotografas que no resultan muy malas pero tampoco son lo suficientemente buenas. Un problema muy comn es el de la iluminacin, que puede llegar a estropear bonitas composiciones. Si el retrato que has tomado resulta un poco soso debido a una mala iluminacin, no todo est perdido. Con Photoshop y Paint Shop Pro puedes solucionar este tipo de inconvenientes de varias maneras; una de ellas es agregando una capa neutra a la imagen. El mtodo es muy sencillo y a la vez exige de ti algo de habilidad, con lo que no te aburrirs. Dirgete a la Paleta Capas o al men de la barra superior de la aplicacin y crea una nueva capa neutra. Selecciona el modo Superponer en las opciones de la herramienta. Indica un relleno al 50% en el campo correspondiente para el relleno de la capa de color gris. stas caractersticas se aplicarn para toda la superficie. un lpiz ptico, los resultados sern an mas agradables y naturales. A continuacin selecciona la herramienta Aergrafo del panel principal. Elige un pincel suave y grande, con una presin muy leve. Determina los valores que mejor se adapten a tu mtodo de trabajo y no olvides ampliar la zona a tratar, as ganars precisin. En la herramienta selector de color, elige blanco como color principal. Comienza a pintar sobre la capa neutra y resalta las zonas que encuentres ms oscuras. No te asustes, ya que las pinceladas sern casi imperceptibles. El color blanco sobre la capa neutra acta como una fina cortina que ilumina el rostro. Tu tarea Cuando ests satisfecho con el resultado, dirgete al men Capas y selecciona la opcin acoplar imagen. Vers que las capas que has creado se han solidificado y convertido en una sla, que se corresponde con el fondo.
2 3
Una vez que termines de pintar, puedes variar la opacidad de la capa neutra para que la iluminacin sea mayor o menor, de forma que el resultado sea ms acorde con las tonalidades del rostro a tratar. Dirgete a la ventana de capas y desliza la barra que marca la cantidad has-
Ahora, slo tienes que utilizar la funcin Guardar del men Edicin, para que todo tu trabajo quede registrado.
Resumiendo...
1 Paleta Capas 3 Crear capa neutra 3 Seleccionar Superponer 3
Relleno al 50%.
2 Herramienta Aergrafo 3 Ampliar zona 3 Elegir color blanco. 3 Iluminar las partes ms destacadas de la cara. 4 Variar la opacidad de la capa. 5 Men Capas 3 Acoplar 3 Guardar.
N 99
61

Curso de Diseno Web

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Curso de Diseno Web

Uploaded by

Copyright:

Available Formats

Curso

Diseo de pginas web

2. Herramientas para el diseo web.

3. El color y las imgenes.

6. Tecnologas multimedia en la Red.

Diseo web. Parte 1

Planificar el sitio web

Elementos de una pgina web bsica

Principales etiquetas de formato de texto

Si no sabes programar no te asustes. Resulta ms sencillo de lo que parece a simple vista.

Diseo web. Parte 1

Algunos tipos de archivo de sonido

Diseo web. Parte 1

Los dos formatos de vdeo ms conocidos, MPEG y qt, frente a frente.

Elementos de una pgina web avanzada

Trabajar con Sausage Hot Dog

Gua del curso

2. Herramientas para el diseo web.

3. El color y las imgenes.

6. Tecnologas multimedia en la Red.

Introduccin a las herramientas

Diseo web. Parte 2

Dos WYSIWYG frente a frente

Sausage Hot Dog

Dar cuerpo a la pgina

Aunque usar HotDog es sencillo, el asistente automtico te lo pone an ms fcil.

Cmo elegir la herramienta ms adecuada

Diseo web. Parte 2

Los 7 pasos para la gestacin de una pgina web

y se debera ver as:

Aqu introduciremos los datos ms importantes, es decir, los identificativos.

Es recomendable rellenar estos datos para ayudar al navegador.

El color y las imgenes

Gua del curso

2. Herramientas para el diseo web.

3. El color y las imgenes.

6. Tecnologas multimedia en la Red.

Diseo web. Parte 3

Utilizar colores clidos puede dar dinamismo a la pgina.

Los mejores colores

Propiedades de los colores

La paleta Reallysafe o colores realmente seguros.

Diseo web. Parte 3

Fichero, extensiones y ayuda.

Cmo instalar The GIMP

Las las herramientas de seleccin, edicin y dibujo estn en el centro.

Este men es equivalente al tradicional "Archivo" en otros programas.

Cmo abrir y guardar una imagen

Diseo web. Parte 3

Elige la extensin del archivo dependiendo de los colores y el tamao.

mejores resultados. Hacemos click en Aceptar para guardar la imagen.

Las herramientas de seleccin

Gua del curso

2. Herramientas para el diseo web.

3. El color y las imgenes.

6. Tecnologas multimedia en la Red.

Diseo web. Parte 4

Organizacin Internacional para la Estandarizacin, mos consultar los estndares de usabilidad.

www.iso.ch. Aqu pode-

www.ainda.info griho.udl.es:8080/aipo www.desarrolloweb.com/manuales www.usability.serco.com/trump/ resources/standards.htm

El mercado de nuestra web

A la hora de trabajar, no podemos olvidar la cantidad de sistemas y navegadores existentes.

Los expertos opinan

Mantenimiento de una web