Curso

Diseño de páginas web
Guía del curso
1. Introducción al diseño web.
Planificar y organizar el sitio. Principales elementos de las páginas web. PC Today nº 87 PC Today nº 88

2. Herramientas para el diseño web.
Introducción 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 práctica, verás que no es tan complicado y podrás plasmar tu imaginación en páginas que puede ver todo el mundo.

3. El color y las imágenes.
Psicología del color, el color en la web. Imágenes: tipología y características. Mapas de imágenes. Herramientas para el tratamiento de las imágenes 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 diseño web. Cómo saber si una web es usable. PC Today nº 90

L

5. Accesibilidad.
¿Qué se entiende por accesibilidad? Deficiencias y políticas. El diseño inclusivo. Consejos para diseñar una web accesible. Evaluar la accesibilidad. PC Today nº 91

6. Tecnologías multimedia en la Red.
Música y sonido. Imagen animada y películas. Integración multimedia: Macromedia Flash y Action Script. PC Today nº 92

7. Programación.
Razones para conocer los principios de la programación. PC Today nº 93

a idea de realizar un sitio web propio es un propósito que suele pasársele 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 diseñador de tu propia web no tiene por qué ser una epopeya. Con una pequeña base de conocimientos y unas cuantas horas de práctica se puede llegar a hacer diseños 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 diseñar un sitio personal pequeño para mostrar tus aficiones en unas pocas páginas que crear el portal corporativo de una gran empresa que pretende vender sus productos a través de la Red. Diseñar y mantener nuestras páginas, 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. ¿Cuántas veces nos hemos encontrado en la Red con sitios que están a medio terminar? Esto no da una buena imagen de quien ha creado la página, da la sensa-

54

www.pctoday.es

Diseño web. Parte 1ª
ción 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 más importante es el título <TITLE>...</TITLE>, que, como su nombre indica, especifica el título de la página web. Es muy importante que no se nos olvide ponerlo, ya que este título 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 diseño. Diseñar va más allá de hacer una página bonita. Diseñar es organizar los contenidos que se van a mostrar en un sitio web de tal forma que el visitante: primero, encuentre la información que busca; y segundo, que el entorno donde reside esa información sea agradable y ayude a la comprensión del contenido. Para conseguir que tu sitio web esté estructurado debes, antes de hacer nada, saber cómo va a dividirse esa información para que le llegue al visitante de la mejor manera. Los cibernautas, en su gran mayoría, visitan páginas web por la información que encuentran en ella, no por su diseño. Por eso, cuanto más claro sea ese aspecto, mejor cumplirá su labor de vehículo 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 cómo va a estar estructurado el conjunto de páginas 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 cómo. Recomendamos tenerlo siempre

Selecciona “Todos los archivos” y Codificación ANSI para que cualquier programa pueda entenderlo y sea totalmente compatible con el estándar HTML.

mente dicho de las páginas. Una de las mejores formas de aprender a diseñar páginas web es ver cómo lo hacen los demás y decidir si lo que estamos viendo nos gusta o no. Lo que sí conviene recalcar es que debemos hacer uso de esta técnica para aprender, no para “copiar y pegar” el trabajo de otros diseñadores.

utilizar siempre minúsculas o mayúsculas, pero nunca mezcladas, por la misma razón anterior. Es preciso tener unos breves conocimientos del lenguaje HTML (Hiper Text Mark-up Language) para empezar a diseñar páginas. HTML es un lenguaje de marcas, es decir, que se añaden 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 presentación gráfica de los elementos que componen la página. La mayoría de las etiquetas de HTML se presenta en parejas: una que indica el modo de presentación y otra que lo finaliza, como puedes ver a continuación: <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 página web tiene dos partes: una cabecera (<HEAD>...</HEAD>) que es la que define el documento y un
Una página sin título resta identidad y, simplemente, queda mal.

Para empezar a crear páginas web no necesitamos de complicados editores de código HTML. Simplemente con la aplicación Bloc de Notas o cualquier otro editor de texto nos vale. Una vez que hayamos escrito nuestro código, en el cuadro de diálogo Guardar como, elegiremos “Todos los archivos” y codificación ANSI. A continuación, elegiremos un nombre para la página y luego añadiremos la extensión .htm o .html. Debemos saber que los nombres de página web no admiten algunos caracteres, como por ejemplo, la Eñe. Hay que limitarse a las letras utilizadas en inglés, números y guiones, tanto normales “-· como bajos “_”. Un mapa del sitio no deja de ser una vista esquemática Nuestro consejo es de cómo está organizada la información. que, a la hora de cerca al crear las páginas, sobre todo si guardar las páginas 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 fácil olvidarqueremos trasmitir con nuestro sitio y se y luego, a la hora de enlazar las pácómo lo vamos a hacer, pasamos a la ginas, podemos volvernos locos bussegunda fase, que es el diseño propia- cando el error. También es aconsejable
Algunas extensiones que debemos conocer
.html .htm .css .js .asp .php .swf Páginas escritas con Lenguaje de Marcas de Hipertexto. Archivo externo de definición de estilos (Hoja de Estilo en Cascada). Archivo externo con comandos de javascript. Página dinámica que se ejecuta en el servidor. Es propiedad de Microsoft. Página dinámica que se ejecuta en el servidor, como ocurre con los .asp, pero de código abierto y que cualquiera puede modificar. Archivo realizado con el programa Macromedia Flash.

Elementos de una página web básica
Aunque cada vez se utilicen más imágenes en las páginas web, el texto sigue siendo el mejor comunicador que podemos utilizar. Dentro de pocos años veremos cómo se consolida la llamada “Web Semántica”, es decir, una extensión de la Web actual en la que el contenido se separará definitivamente del continente. Aunque HTML no será el lenguaje que se utili-

v

Plantillas de diseño
Si crees que la originalidad no es lo tuyo o necesitas un lugar donde poder inspirarte para crear la estructura de tus páginas, puedes utilizar una plantilla o template de otros diseñadores, que las regalan o venden, dependiendo de su complejidad. • www.freewebtemplates.com • www.steves-templates.com • www.freelayouts.com • freesitetemplates.com Lo que los diseñadores envían cuando descargas sus plantillas es, aparte de las imágenes 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 animación Flash en .swf, también proporcionan el archivo .fla para que puedas abrirlo en tu equipo y modificarlo según tus preferencias. Estas plantillas simplifican la tarea de concebir el diseño de nuestra página, 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á más tiempo del que hubiéramos empleado en hacer una nueva desde cero. s

Nº 87

55

Curso
Código simple
En las páginas pequeñas, es muy fácil leer el código, pero, cuando vamos insertando imágenes, tablas, etc., se va complicando. Por eso, hemos de tomar unas pautas de trabajo, ya que si queremos modificar algo transcurridos unos días de la escritura de nuestro código, nos daremos cuenta de que no es tan sencillo como habíamos pensado. El primer consejo es utilizar comentarios para identificar las partes en que se divide la página, por ejemplo: <!— menu lateral —>. De este modo, cuando necesitemos modificar el menú, tardaremos menos en encontrarlo. También es recomendable insertar una nueva línea para cada nueva etiqueta HTML. Si escribiéramos todo el código seguido resultaría difícil de leer, por lo que es preferible insertar las etiquetas en diferentes líneas y, a ser posible, de forma tabulada. s Formato del párrafo <P>...</P> Sirve para delimitar la extensión de un párrafo. <BR> Salto de línea. <CENTER>...</CENTER> Permite centrar todo el texto del párrafo. <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 tamaño del tipo de letra. <B>...</B> Pone el texto en negrita. <SMALL>...</SMALL> Disminuye el tamaño del tipo de letra. <I>...</I> Representa el texto en cursiva o itálica. <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 tamaño y carácter. <ABBR>...</ABBR> Se usa para mostrar abreviaturas. <Hx>...</Hx> Si se sustituye x por un número del 1 al 6, se obtendrá distinta relevancia.

sobre fondo blanco. Las fuentes más cómodas de leer son las de tipo ‘sans-serif’, como la Arial o la Verdana, y su tamaño debería definirse de forma relativa (porcentajes), no absoluta (píxeles), para que los usuarios con cierta discapacidad visual o con una alta resolución de pantalla puedan aumentar (o disminuir) el tamaño de la fuente de la página desde su navegador. Las imágenes pueden comunicar mensajes de una manera que no es posible hacer por medio de palabras. Otra de las funciones de las imágenes es el sentido estético y decorativo. Sin embargo, en muchas ocasiones nos encontramos con páginas web repletas de imágenes que no cumplen ninguna de estas dos fun-

es a través del programa CGI, que será el que elabore el mensaje que nos llegará. La estructura de un formulario básico 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 acción, en este caso que los datos se envíen a la dirección indicada. METHOD=”POST” hace que los da-

zará en el futuro para este proyecto, sino XML y RDF, sí podemos hacer que nuestros textos estén insertos pulcramente dentro del código 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 búsquedas.

Si no sabes programar no te asustes. Resulta más sencillo de lo que parece a simple vista.
tos se procesen con el botón de envío. ENCTYPE=”TEXT/PLAIN” indica que los datos se envíen sin codificación. Los enlaces son la esencia de las páginas web. De una forma muy breve se podrían definir como aquellas líneas de programación que, aunque no sean visibles al usuario o navegante de una página web, permiten o facilitan al mismo con un mero click sobre determinado texto, imagen o icono, acceder a otra parte de la misma página web, a otra

ciones, con lo que distraen la atención de lo que se quiere comunicar y aumentan el tiempo de descarga. Quizá lo más difícil de las imágenes sea conseguirlas. Lo ideal sería que las fabricáramos nosotros mismos, mediante el escaneo de las fotografías que queramos insertar, obteniéndolas con una cámara digital o creándolas mediante editores. No debemos preocuparnos si no dominamos alguno de estos programas generadores de imágenes, ya que existen en Internet muchos lugares donde se ofrecen gratuitamente imágenes para fondos de páginas, separadores, gifs Es difícil leer un texto que no presenta algún tipo animados, rótulos, 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 más incómodo 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 párrafos. El an- grama CGI del servidor. La primera opcho de los párrafos no debería exceder ción es la más sencilla, ya que el navegade la mitad de la pantalla, y, preferible- dor generará automáticamente un menmente, conviene utilizar letras negras saje de correo electrónico. La otra forma

página del mismo sitio o incluso a otro sitio web distinto. Sin ellos, el concepto se vería reducido a una publicación de documentos de texto en Internet. La etiqueta básica de los enlaces es <a href=”direccion”>...</a> y, dependiendo de a dónde enlacen, podemos clasificarlos en varios tipos: • Hipervínculo dentro de la propia página: nos podemos mover de un lado a otro de la misma página con un simple click. Suele utilizarse con índices, pies de página 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 través de <a href=”#principio”>...</a> • Hipervínculo a una página del propio sitio web (página local): esto significa que el archivo de la página 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 gráficos
.gif Archivo de imagen suele ser pequeña y de colores muy definidos. .jpg Archivo de imagen empleado habitualmente para fotografías. .png Archivo de imagen parecido al .gif, pero de código abierto.

Se pueden apreciar las diferencias de legibilidad y calidad de los tonos continuos entre los dos formatos de imagen más utilizados, .gif y.jpg.

56

www.pctoday.es

Diseño web. Parte 1ª
página “portada.htm” a otra llamada “informacion.htm” que está en la carpeta “nosotros”. El hipervínculo sería: nosotros/informacion.htm. • Hipervínculo a otro sitio web (página externa): es un enlace a una página fuera de nuestro sitio. Cuando especificamos un enlace externo, debemos escribir la dirección completa de la página incluido http://www. • Hipervínculo a una dirección de correo electrónico: al pulsar en él, automáticamente se abre el programa de correo que tenga instalado el usuario para poder escribir a la dirección de correo que especifiquemos. Para ello, escribiremos mailto:nombre@dominio.com dentro de href. Un elemento muy importante a la hora de organizar la información y darle forma a la página son las tablas. El empleo de las tablas facilita la distribución de la información 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 códigos, ya que existen herramientas que permiten generar hojas de estilo de forma automática, como www.webexperto.com/herramientas/hojasdeestilo.php o www.webmastercuyo.com.ar/servicios/css.php.

web, mediante la asociación de un conjunto de propiedades de formato a los elementos del lenguaje HTML. Así, podemos separar la estructura de la página de los contenidos. El resultado final en pantalla es una mezcla entre las características predefinidas para cada comando HTML y la hoja de estilo. Lo mejor de esta técnica es que logramos una presentación 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 página o en el sitio web entero. <TD>Celda 2</TD> racterísticas determinadas, como el Existen tres formas ancho, alto, color, tipo de letra, aline- <!— rowspan=”2” indica que esta Este es el resultado de las líneas de código que presen- de aplicar estilos a las ación, 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 más sencilla: partes de la página estén 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 html”style=”color:red”>Enlace</a> Elementos de una <TD>Celda 5</TD> que son de poca relevancia dentro del generaría un enlace de color rojo, en vez </TR> contenido global de la página. página web intermedia de azul, que es el color predeterminado. A continuación, puedes ver un ejem- <TR> Las hojas de estilo permiten con- Una segunda forma consiste en definir el <!— colspan=”2” indica que esta trolar cómo se verán nuestras páginas estilo de todas las etiquetas de la página. plo de tabla: Si la hoja de estilo no se va a aplicar a Campos de formularios otros documentos, es más conveniente utilizar esta técnica para así tener la hoja <INPUT TYPE=”hidden” NAME=”xxx” VALUE=”yyy”> Campos ocultos, donde xxx es el nombre de la información introducida e de estilo y el contenido de la página en yyy la información en sí. un mismo lugar. Para hacerlo, incluiría<INPUT TYPE=”text” NAME=”xxx” VALUE=”yyy”> Cuadros de texto de una línea, donde xxx indica el nombre de la informos lo siguiente dentro de la cabecera: mación introducida e yyy indica si queremos que el formulario incluya <STYLE TYPE=”text/css”> a { coalguna información inicial. lor: red } </STYLE>. De este modo, <INPUT TYPE=”password” NAME=”xxx”> Cuadros de texto oculto, donde xxx es el nombre de la información introconseguiríamos que todos los enlaces de la página fueran rojos. Por último, el ducida. Ideal para contraseñas. tercer método 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 información introducida, y el número de filas y z el número de columnas. hacerlo mediante el bloc de notas, <SELECT NAME=”xxx”> Listas desplegables, donde xxx es el nombre de la información introguardarlo como .css y luego vincularlo <OPTION>yyy ducida e yyy el nombre de cada opción de la lista. Se pueden añadir a las páginas mediante la orden <LINK <OPTION>yyy muchos de tipo yyy, aunque es necesario establecer un límite de REL=StyleSheet HREF=”estilo.css” <OPTION>yyy acuerdo con el tamaño de la pantalla y la dificultad para manejarTYPE=”text/css”>. Para que todos los navegadores reco</SELECT > los, crece con su extensión. nozcan los comandos, recomendamos <INPUT TYPE=”radio” NAME=”xxx” VALUE=”yyy”> Botón de opción, donde xxx es el nombre de la información introducida e seguir las indicaciones del Consorcio yyy es el nombre de cada opción en concreto. Ideal para seleccionar una W3C y sus especificaciones para las opción entre varias. CSS, que puedes encontrar en Casilla de verificación, donde xxx es el nombre de la información 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 página. En realidad se trata de una página que contiene otras páginas. Son muy útiles cuando queremos que unas

Existen muchos programas gratuitos que nos ayudarán a crear y editar nuestras imágenes.

v

Nº 87

57

La segunda forma consiste en ingramación del lado del cliente. se pueden En el fondo. Por eso. basta con copiar y pegar el código navegador está instalado y discrimine.s 58 www. Incluso sin tener experiencia en ma Netscape Navigator utiliza la programación.ra Real Audio es un formato ampliamente distribuido y usado.dad y.la cabecera de la página y no llevan etipe. Para ello. no lo hace exactamente de la misma manera. aunque este número es muy variable Una vez más. incluir dentro de nuestras páginas son incluiremos el sonido en el parámelos scripts.src=”musica. como son los sonidos midi.cda (archivos de un CD de música) a este formato.tiene mucho sentido crear tu propia quiere del plug-in propio de Macrome. aunque. está ampliamente estandarizado. primero tenemos que elegir el incluir las dos. los distintos navegadores. coLa tecnología Flash de Macrome. capaz de reproducir sonido con fidelidad graduada. comprobaremos que que los buscadores leen estas etiquetas Los enlaces son los que marcan la diferencia entre la Red y los documentos de papel. En general. Es fácil obtener conversores de .tantes son las que indican la descripdad.compatibles entre sí. pero no sus valores.ca. uno puede decidir la calidad del sonido para así encontrar un equilibrio entre un archivo muy grande con alta fidelidad a uno muy pequeño de baja fidelidad. este lenguaje nos permite ejecutar instrucciones como respuesta a las acciones del usuario. bien como sonido de fondo. etiqueta <BGSOUND SRC=”musipensado para hacer las cosas rápida. Dado que ambas etiquetas son inSi lo que queremos es incluir so. Con un buen tutorial de la última ción (description) y las palabras versión y unas horas de práctica delan.mundojavascript. mientras que el programente. Podemos introducir el sonido de varias formas: bien activado por el usuario. Su estructura es la de demanda.diversos navegadores. mientras que otros requieren de plug-ins o programas asociados para reproducirse. La manera más El formulario más utilizado de toda la Web consta de un campo de entrada y un botón de envío. lo que permite crear páginas interactivas con progra.wav”>.pctoday.do. puedes inventarte tus propias etiNo debe asustarnos la gran cantidad de recursos que nos perquetas META.mo no se visualizan en el navegador y dia nos permite crear páginas mucho sólo las utilizan los buscadores y almás interactivas y entretenidas. las páginas web que incluyen sonidos los colocan en formato AIFF para las personas que tengan Macintosh y WAV para los usuarios de PC. Por un lado. como los vídeo estándar es 24 que se hallan en www.mp3 Popular formato que ofrece una calidad muy alta en archivos pequeños.com. tendremos que nido. la mejor manera de mos. observaremos que hay etiquetas <OBJECT> y <EMBED> para en los formatos digitales. ya que es un programa muy intuitivo. así como por una variable adicional que corresponde al número de cuadros que se exponen por segundo. es decir. como elementos en movimiento o que cambian de color. Uno de los mayores retos para los buscadores de Internet es encontrar la información que realmente están buscando los internautas. en Internet Explorer. ya te del ordenador. Algunos tipos de archivo de sonido . cluirlo como sonido de fondo. Para la gunas otras herramientas. Javascript es un lengua. su valor. Existen servidores de vídeo bajo queta de cierre.clave (keyword) del documento. podemos aprenderlo etiqueta <EMBED hidden=”true” con facilidad y utilizarlo en toda su po. .Curso permiten agregarlos directamente a las páginas.metainformación.au Es el formato nativo de las estaciones de trabajo Sun y similares. que utilizan un sistema que una declaración: nombre de la propiepermite la reproducción de vídeo di. Al ser el formato nativo de Windows. a continuación. El lenguaje HTML define la estructura de una etiqueta META. Usar Flash no es difícil.aiff Formato de sonido típico de Macintosh y estaciones de trabajo Silicon Graphics. un pequeño script que averigüe en qué insertarla en la página es muy sencillo. mite Flash. Algunos te capaz de interpretar <EMBED>. tampoco visualización de esta tecnología se re. aunque este formato permite variar la calidad del sonido para lograr archivos más pequeños. podemos incluir efectos especiales en nuestras páginas. o bien extractores desde un CD audio. Estos pro. se trata de un lenguaje de pro. Además. Otro elemento que podemos incluir HTML que genera automáticamente. Por el otro. cuando hatrar una música de fondo es mediante yamos creado nuestra película Flash.se visualizan pero que están integradas rio utilizar distintas etiquetas según el en la página web y la definen. . que se incluye en la mayoría tro propio uso. Las etinavegador: <OBJECT> para Internet quetas META se introducen dentro de Explorer y <EMBED> para Netsca. podemos crear películas o utilidades de En definitiva. sencilla es dejar al usuario la decisión Otro de los elementos que podemos de escucharlos o no. No existe ninguna regla acerca de la rectamente como si fuera la televisión. mas como agendas o calculadoras. Las dos etiquetas META más imporen los navegadores. tencia con sólo un poco de práctica.forma muy rápida. es necesa. . información que se puede o no incluir en las etiquetas META. en nuestras páginas es el vídeo. .una página HTML. Aunque el Explorer es formato de estos archivos. aunque obligaregramas se encargan de realizar acciones mos a que se abra una ventana indedentro del navegador de la página web. Para hacerlo. pendiente con los controles de sonies decir.incluir fondos sonoros utilizando la je de programación muy sencillo. La fidelidad de la imagen de vídeo se mide por los mismos parámetros de audio e imagen que la componen. como si fuera tos en lenguaje Javascript. Lo usual En Internet podemos encontrar multitud de scripts ya heen una película de chos y listos para utilizarlos en nuestras páginas. excepto para nuesdia Flash.wav Los archivos WAV son en general muy grandes. que no es sino una mezcla de sonido e imagen en un sólo archivo digital. unas informaciones que no Al igual que con el sonido.tro HREF de un enlace. Por ejemplo. pequeños programas escri.mid”> .mid Archivo de sonido muy básico. se han introducido las etiquetas META o metatags. El proEntre las acciones más habituales que blema es que se necesitan diversas facilita Javascript tenemos dos vertientes: etiquetas para hacerlo operativo en efectos e interactividad.es . pero requiere de nuestra creativi. cuadros por segundo. Es poco conocido fuera del ambiente UNIX. .

MPEG y qt.htm” /> <meta http-equiv=”expires” content= ”Tue. Se trata de mo los que puedes encontrar en s pequeños programas hechos en Java. que no usa caracteres cirílicos o árabes. que indica que la página se debe indexar.url= http://www. además. code la web son los applets. En el segundo caso. Sus valores son: index. necesitaremos que la página escuche la petición del visitante. tan.misitio.com/contenidos/metatags. vídeo y capacidades interactivas. Con esta etiqueta META informamos de la vigencia del documento. por un lado. <meta name=”generator” content=”Sausage Hot Dog” /> <meta HTTP-EQUIV=”content-type” CONTENT= ”text/html. qué precios tienen y cuándo van a estar libres. Si contiene fecha de expiración.Una de las desventajas de los applets es que. A esto le llamamos página dinámica. a nosotros mismos. Veamos un ejemplo.mezclan con todos los componentes de na HTML que informe de que hay una la página. expires=fecha_valor. Mediante esta etiqueta podemos enviar un archivo de información o cookie al navegador del usuario. televisión por cable. Este estándar lleva mucho más tiempo vigente que el MPEG. PCToday. que se ha multitud de applets gratuitos que poderealizado la reserva. Necesitaremos que el visitante sepa qué habitaciones tenemos. el navegador la conservará en el disco duro hasta dicha fecha y si no la borrará al terminar. por otro lado mandará a otra base de datos la información que nos ha pro. transmisión satelital directa y televisión de alta definición. follow pide que siga los hipervínculos que existan en la página y que indexe las páginas resultantes.appletcollection. y califican la página en función de lo que dicen.qt . Los applets son más difíciles de programar que los scripts y requieren unos conocimientos básicos o medios del lenguaje Java.html. interactúe con el resto de elementos que hay en el servidor si lo necesita y cree la página HTML que enviará al visitante que se la ha pedido. los applets son más lentos de procesar y de datos si hay habitaciones disponibles tienen un espacio muy delimitado en la para esa fecha. En una base de datos albergada en el servidor podemos especificar estos datos. noindex es justo lo contrario. s Los dos formatos de vídeo más conocidos. <meta http-equiv=”Set-Cookie” CONTENT=”nombre_ cookie=valor_cookie. ya que van a determinar la posición en la que aparecerá nuestra página en las búsquedas de los cibernautas. nofollow indica lo contrario. follow”> Nº 87 59 .htm. El formato MPEG es muy popular en PC compatibles. Sin embargo. mediante un formulario: quiero reservar una habitación del 1 al 5 de marzo. no se tenga de esa búsqueda. como por ejemplo www. dependiendo del lenguaje de programación que utilicemos.mucho grafico. charset=ISO-8859-1”/> <meta http-equiv=”refresh” content=”5” /> <meta http-equiv=”refresh” content=”5.mpg Empresas de tecnología de todo el mundo forman el Grupo de Expertos en Imágenes en Movimiento. el visitante que desee reservar una habitación introducirá sus datos personales en un formulario que se enviará a una página dinámica que.com/otra_pagina. tanto al visitante como sólo aparece un cuadro gris. etc. Ya no tendrá la extensión . llevaría a la página especificada. Ordena al navegador que no almacene la página en la caché del navegador. es decir. No hay que confundir Java con Javascript. porcionado y por último noti. . Para poder hacerlo. sino . creará una pági. animación.hasta que no se cargan por completo. en pantalla ficará. frente a frente. lo que puede resultar muy útil cuando se trata de páginas dinámicas cuyo contenido cambia frecuentemente. <meta name=”description” content=”Esta página es una prueba del curso de diseño web de PCToday”/> <meta name=”keywords” content=”curso. pues son lenguajes muy diferentes. En primer lugar el visitante nos dirá. Otras etiquetas Meta Elementos de una página web avanzada Hasta ahora hemos estado viendo páginas que almacenábamos en el servidor y que éste nos enviaba cuando nosotros se las pedíamos mediante la introducción de una dirección en la barra del navegador. Imaginemos que tenemos un hotel y queremos que desde nuestra página web se puedan reservar habitaciones. Con esta etiqueta podemos indicar al navegador que debe recargar la página una vez transcurrido el tiempo de segundos especificado. Una de las principales utilidades de las páginas dinámicas es interactuar con las bases de datos. notificará a la base de datos anterior que esa habitación queda ocupada.php. Otra forma de programación dentro mos incluir en nuestra página HTML.asp o . de modo que obligue al navegador a cargar las nuevas versiones de la página que hay en el servidor y en lugar de la almacenada. Su principal ventaja consiste en que dependen en menor medida del navegador e incluso son independientes del sistema operativo Podemos hacer la búsqueda tan completa como deseemos dentro de las bases de datos del ordenador donde se ejecudisponibles en la Red.es decir. Con ese resultado. Entonces esa petición se trasladará a la página dinámica que buscará en la base que se transfieren con las páginas web y que el navegador ejecuta en el espacio de la página.com.mov El formato QuickTime fue creado originalmente por Apple para su uso en los ordenadores Macintosh. Aquí significaría que es un documento texto-HTML y que usa un juego de carácteres ISO-8859-1. www. prueba” /> Puedes encontrar generadores automáticos de etiquetas META gratuitos en la Red. dedicado a crear este estándar para compact discs. un documento de texto plano. Indicamos el tipo de documento que es nuestra página: documento HTML. 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 página web. Con la respuesta que ob. diseño. Junta audio. path=/” /> <meta name=”robots” content=”noindex.página donde se ejecutan. Parte 1ª Principales tipos de archivo de vídeo .Diseño web. Pero supongamos que queremos que esa página muestre unos elementos u otros en función de lo que le pide el visitante. Hay que seleccionar con cuidado las palabras que vamos a utilizar dentro de estas dos etiquetas. En la Red puedes encontrar habitación disponible para esas fechas y que el importe es de 100 € por noche. Podemos dar instrucciones a los robots de los buscadores acerca de qué páginas pueden incluir en sus bases de datos y cuáles deben saltarse. por ejemplo.

Música y sonido. el rápido crecimiento de la Red y la necesidad de que los usuarios no técnicos también pudieran crear sus propias páginas. Principales elementos de las páginas web. Usabilidad.es . PC Today nº 87 PC Today nº 88 2. llevó a la aparición de programas que les ayuda en esa ardua tarea facilitándoles su diseño. Evaluar la accesibilidad. imágenes. El diseño inclusivo. Estos programas modernos y otros especialmente diseñados para el desarrollo web son las conocidas herramientas WYSIWYG (What you see is what you get: Lo que ves es lo que obtienes). Mapas de imágenes. que permiten generar páginas web directaEstas dos pestañas nos permiten alternar entre las distintas vistas que ofrece el programa. etc. Consejos para diseñar una web accesible. Elegir la herramienta más cara no tiene por qué significar diseñar mejor. Imagen animada y películas. Programación. C 3. PC Today nº 90 5. Herramientas para el diseño web. todo es cuestión de saber utilizar las aplicaciones de las que disponemos y aprovecharlas para dejar volar la creatividad. PC Today nº 89 4. Introducción al diseño web. hasta el editor de texto más sencillo puede ser la solución. Psicología del color. Cómo saber si una web es usable. donde podemos construir una página web. Sin embargo. Estas aplicaciones permiten una total interactividad gráfica con el usuario a través de una pantalla de diseño. sonidos. que es generado por el propio software. siguiendo las instrucciones del programa y prescindiendo del código. Planificar y organizar el sitio. ¿Qué se entiende por accesibilidad? Deficiencias y políticas. toda página web se compone de código y una serie de elementos (textos. El color y las imágenes. Trabajando con Sausage Hot Dog. mente publicables en la Red mediante el uso de aplicaciones indicadas para todo tipo de usuarios. Al principio todas las páginas web se construían introduciendo los comandos en un editor de textos.pctoday. 6. Imágenes: tipología y características. ¿Qué es la usabilidad y por qué se debe tener en cuenta? Qué hacer y no hacer en el diseño web. Integración multimedia: Macromedia Flash y Action Script.) insertados o enlazados dentro. Accesibilidad. Guía del curso 1.Curso Trabajar con Sausage Hot Dog En cualquier ordenador es posible crear una página web. PC Today nº 91 omo vimos en la entrega anterior. el color en la web. PC Today nº 92 Introducción a las herramientas La forma más fácil de crear una página web consiste en utilizar paquetes de programas como Microsoft Office. Tecnologías multimedia en la Red. como puede ser el Bloc de notas. Herramientas para el tratamiento de las imágenes y el color. Razones para conocer los principios de la programación. Introducción a las herramientas WYSIWYG. 7. The GIMP. PC Today nº 93 54 www.

formularios. Algunas de las utilidades que podemos encontrar en este editor son. barras de herramientas que dan acceso rápido a las funciones más importantes (creación de tablas. Podemos colocar las barras de forma flotante en medio de la página. vamos a trabajar en la vista de código. etc. HTML. Lo primero que tenemos que hacer cuando vamos a crear un sitio web es crear una carpeta donde alojar las páginas. colores. con la que podemos crear. que no respetaba el código que se introducía a mano en la pantalla de código.). Para ello. v Este programa admite archivos CSS. Una de sus principales características es la claridad del código que genera. Ten en cuenta que. PHP. aunque se denominen editores de comprensión y manipulación. Otra de las virtudes de este programa es que lleva integrado un administrador FTP. lamentablemente. Si hacemos click en cada una. Es una herramienta completa y fácil de utilizar. Un truco: al colocar el ratón encima de cada botón. pero pronto necesitaremos herramientas que nos hagan más ameno el trabajo. Verás que. organizar. Para que aparezca o no una barra en la pantalla. creación en modo de asistente o de asistente automático. es un editor muy completo. no los borres. al fin y al cabo. sin soltarlo. en cualquier caso. ya que contiene las principales en www. Por ejemplo. lo que permite subir y bajar archivos del servidor. No te preocupes si nunca has tenido contacto con HTML. Sólo se vende como parte del paquete Office. etc. con las que podemos acceder directamente a las funciones para dibujar y dar formato a los distintos elementos de la página. dentro del sitio aparecen otros. Es funciones. maciones e imágenes. Todas las barras de herramientas se pueden modificar y mover de un lado a otro de la pantalla. y botones de ayuda para cada opción.Diseño web. Parte 2ª También tenemos los editores HTML. pero que. como el resto del programa. resaltado en distintos colores y bien tabulado. Desde luego. es tremendamente intuitivo trabajar con Sausage Hot Dog. etc.com. PHP. pero no sustituirán el conveniente conocimiento de HTML. manteniéndolo pulsado. escojamos el software que escojamos. La barra de archivo muestra las funciones comunes con el resto de programas. como Flash o Fireworks para crear aniLos WYSIWYG más vendidos rivalizan en sencillez de uso versión tras versión.. Puedes descargarte una ideal para diseñadores principianversión de demostración gratuita tes. quizás con demasiadas opciones. lo que permite una fácil plegará un mensaje explicativo de su función. como pueden ser abrir. En cualquier caso.. etc. como puede ser Javascript. Dreamweaver Macromedia nos ofrece el programa más completo dentro de esta familia. sonidos. navegación. La vista de edición es la que utilizaremos habitualmente para crear las páginas. Para utilizarlos. si te decides a comprarlo. pero a cambio incluyen multitud de ayudas para facilitar la lectura y escritura del código. lo moveremos a la posición deseada. Para ello utiliza el comando File>Open Website. como Javascript. Se puede utilizar el bloc de notas para páginas muy sencillas. Las barras de herramientas que el programa muestra en pantalla pueden variar dependiendo de las que estén activadas. administrar y publicar páginas web muy completas. imprimir. No permiten la creación de la página en modo mienta avanzada de desarrollo de sitios web. 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 página que estamos creando en un navegador de Internet. veremos que justo debajo se despliega una serie de opciones relativas al botón. Para situarlas de nuevo en la parte supe- rior colocamos el cursor sobre la barra y. Sin embargo. También podemos personalizar las barras añadiendo o quitando botones. Dos WYSIWYG frente a frente FrontPage 2003 Se trata de un buen programa que ha subsanado muchas de las críticas que se le hacían en versiones anteriores. La vista preliminar visualiza el aspecto aproximado que tendrá la En la parte superior de la pantalla se muestra la barra de menús desde la que se accede a las principales funciones. Son archivos del sistema. Sin embargo. es necesario tener unos conceptos de programación de la web. Las utilidades del programa te ayudarán.macromedia. sus virtudes no se quedan ahí. por ejemplo. se pueden utilizar otros lenguajes. trabajarás normalmente en la página de código puro. las Hojas de estilo en cascada (CSS) o incluso lenguajes de programación de servidor. gráfico. ya que. Con el asistente automático podemos configurar de una forma muy intuitiva el nombre del sitio en nuestro ordenador. pero no tantas como para abrumar a los usuarios inexpertos. La siguiente barra incluye una recopilación de los distintos recursos que ofrece el programa: formato. imágenes. paneles de recursos. guardar. aparte de tus archivos. es necesario tener algunos conocimientos de HTML. aunque. inserción de imágenes. así como en el servidor. aunque puedas ir visualizando los resultados de lo que vayas haciendo en una pantalla del propio editor o en el navegador. cubre todas las necesidades que puedas tener para la creación de páginas web y otros elementos. Su potencia reside en cómo se complementa con otros programas de la misma empresa. unos programas que se encuentran a caballo entre los WYSIWYG y los editores de texto normales. puedes acoplar el módulo de español. etc. lo movemos a la posición deseada. Ten en cuenta que. la marcamos partiendo de View>Toolbars. colocamos el cursor sobre el extremo de la barra y. se nos despágina en los navegadores de Internet. Sausage Hot Dog Hot Dog es un editor de HTML y una herraAunque de un aspecto un poco hosco. lo que nos obliga a realizar un mayor desembolso. Esta vista muestra los códigos que el programa genera al construir la página. tablas. Javascript. Otra de las funciones que ofrece es la capacidad de crear y vincular otros lenguajes distintos a HTML. s Nº 88 55 . están en inglés. que abre el panel flotante de administración de sitios. Para pasar de una vista a otra pulsaremos en las pestañas que aparecen en la parte inferior derecha.

Si estás más acostumbrado a la primera forma.pctoday. pero no desde el panel de acceso rápido. Sin que no necesites muchos programas (W3C) para conocer la última versión embargo. sin olvidar que todos estos datos pueden definirse en una hoja de estilos . en la complejos que otros.org/MarkUp. texto. tiempo suficiente para aprender el funcionamiento de los editores HTML en general. El funcionamiento es similar al del formato de texto. bordes y fondos. se introducirá la dirección de Sausage en la página. A continuación.areas. Lo importante es caso. Al escribir un texto. las que y. (www.w3c. según vayas profundizando ni que éstos sean los mejores o más oficial del lenguaje. bien eligiendo una imagen o un color en el recuadro que nos lo indica. enlaces.com/ Tu situación personal y tus necesidamínimos de HTML para realizar arachnophilia). todos ellos mente los comandos. También podemos cambiar el fondo de la página. lada dentro de la página. podremos verlo al navegar por Internet justo en la parte superior izquierda de la pantalla. Si elegimos HTML.htm.softonic. puedes facilitan el trabajo gozarán de adquirirla por un precio más simpatías que las más razonable. para ajustar manualmente todos aquellos pequeños Hot Dog pone a nuestra disposición todos los componentes de un formulario al alcance de un click. des deciden por ti en muchos casos. Para este tutorial vamos Conviene resaltar que no por a utilizar la aplicación disponer de unas herramientas Hot Dog de la compañía u otras vamos a crear páginas Sausage. utilides complicaciones. Todo depende de Puedes utilizarla durante cómo se utilice cada una. bemos seleccionarlo con el ratón y hacer click en el botón de negrita. un enlace. La opción Save as (Guardar como) permite ponerle el nombre deseado y seleccionar el tipo de archivo. como los colores del fondo. unos más listado de editores y herramientas es. Estos datos puedes cambiarlos más adelante en Format>Document Properties. así como otros datos que suele contener la cabecera de las páginas web. sin siguiente dirección: herramientas fantásticas para la creaayudas visuales. Con él puedes ahorrarte mucho tiempo si necesitas incluir una imagen. ción de páginas web. comerciales de evaluación. Tras crear el sitio. sino que primero hacemos click en este botón. Es interesante poner un título descriptivo puesto que es la guía que muchos internautas siguen para reconocer una web. de pequeño tamaño. Si haces click en él. dirte por alguna ten en cuenta el Acehtml (freeware. sino shareware o demostraciones también de su precio. apariencia. etc. el asistente automático te lo pone aún más fácil. aunque te recomendamos acusencilla gracias a sus recursos. éste se distribuye de forma continua y forma un párrafo hasta que pulsamos Enter. completas que sean. es muy posible dir al World Wide Web Consortium dades.arachnoid. to adquirir una herramientas más adecuadas para mienta de estas características. No hay que confundir el nombre de la página con el nombre del fichero . s trarla en www.El Consorcio World Wide Web es el lugar de referencia poder disponer de las herrapara todos los diseñadores web. La opción Format>Document Information nos permite establecer el título de la página y las etiquetas meta.html).Curso Para ponerle el título a la página.com/products. conviene tener unos conocimientos Arachnophilia (www. que disponen de fondos e imágenes gratis para insertar en las páginas web. nos encontraremos con el panel de propiedades del documento. puedes utilizarla. Si estás habituado a trabajar con herramientas como Word. también puedes descargarte versiones gratuitas. Existen múltiples direcciones en Internet como Puedes probar Hot Dog gratis durante treinta días. se desplegará un menú con los distintos tipos de documentos que reconoce Hot Dog. más rápido y práctico escribir directade nuevo. des decantarte por una gratuita. sino desde el menú superior Format>Bold o pulsando Control+b.htm de la página.es . alineación.com) o aspecto económico. Si únicagenerar la herramienta. Para aplicar formato a un texto determinado. también El perrito verde es un huevo de Pascua dentro de este software.. una línea horizontal. ayudas y funciones de uso.com o www. aunque se le podrían añadir otros lenguajes.net/colorvivo/home. Las nuevas verdes encontrar en cualquiera de las aunque en sitios comerciales como siones suelen incluir muchos recursos herramientas es el resaltado en colowww. puenuestras necesidades. Del mismo modo que hemos modificado un texto convirtiéndolo en negrita. si te gusta. En el caso 56 www. pequeñas correcciones o incluso Si el presupuesto lo permite. mejores. color. el Consorcio W3C. y luego escribiremos el texto entre ambas. abre el panel y en el recuadro Título escribe el nombre deseado para la página. Dar cuerpo a la página Aunque usar HotDog es sencillo. Un ejemplo de la sencillez del programa se puede ver a la hora de insertar los enlaces o las tablas. no de- Cómo elegir la herramienta más adecuada En el mercado existen muchos editoUn buen sitio en el que encontrar un darás cuenta de que te resulta mucho res de HTML y WYSIWYG.org/WAI/group/AU/tools#HTM. evidentemente. te darás cuenta de que Hot Dog no funciona así. Puedes herramienta WYSIWYG. como Escojas el programa que escojas. y sin granRed. de tal forma que la elección res del código y la posibilidad de ir de una u otra no dependerá sólo de lo viendo los resultados a medida que se (en español). como XML o TCL-TK.com y ayudas. Puedes enconen el conocimiento del código. vamos a empezar con las páginas. si no tienes previs. detalles que Hot Dog no permite cambiar de forma automática.tucows.acehtml. Sausage pone a nuestra disposición otro panel para insertar elementos. Lo más útil que puewww. te caros del mercado. es recoNo es lo mismo un principiante que corregir algún error que haya podido mendable que adquieras alguna un profesional del diseño. es decir. que nos ayudará a configurar los datos básicos del mismo.encontrar multitud de tutoriales en la mente vas a diseñar una web persorá crear páginas de forma rápida y nal. En cualquier simples. aun30 días de forma gratuita que. Si haces click en el pequeño triángulo situado junto a la hoja en blanco.w3. listas de viñetas o incluso elementos multimedia incrustados. Antes de deciva creando la página. lo podemos transformar de tamaño.sausage . un comentario. que te permiti. Es importante ser ordenado y crear una carpeta para cada web y subcarpetas para los distintos apartados.css aparte y vincuwww. Ahora es cuando te vendrán bien los conocimientos de HTML. lo que generará dos etiquetas (<b> y </b>).

Cambia todos los datos a tu gusto y haz click en OK. gratis. Vamos a centrar y hacer más grande la palabra "Bienvenidos". Aparecerá una ventana donde podremos elegir si queremos que la lista contenga números o imágenes. en la vista de código como en la vista preliminar y. corrígela y actualízala. lo que nos mostrará una ventana flotante con diversos números. el idioma. Vamos ahora a resaltar la frase en negrita e itálica. dos y tres" con el ratón y elegimos el menú Insert. Hacemos click en File>Save As y Intenta no abusar de las transiciones. Por último. importante tener un menú siempre Recuerda utilizar hojas de estilo y visible con las grandes áreas. 6. s Al hacer click en cada línea. nos dirigimos al menú Format. Elegimos el sexto icono (empezando por la izquierda). las páginas web no son más que instrumentos para poner a las personas en contacto. con información caducada. Es recomendable seguir una pauta y guardar todos nuestros archivos bajo una misma extensión para no hacernos luego un lío a la hora de enlazarlos. aparecerá una ventana con el sitio web que has creado. la seleccionamos a continuación. etc. En primer lugar.Diseño web. El sitio en el que lo coloques. hacemos click en el primer botón y elegimos una imagen que tengamos almacenada en nuestro disco duro. Confecciona la interfaz. vamos a ver cómo queda.html. hay que grabar la página. negrita). centrar el texto debemos hacer click en el icono que hay justo al lado de H?. Tras construir una parte de la página. gar. donde decides los colores. En esta nas más distantes del sitio. elegiremos "circle". ya que nos presenta todas las opciones que pueden darse para cada campo del formulario. Esta frase está en negrita. Se trata de la parte creativa trauna página web y si aporta o te dicional. éste último en español. allí alojaremos la página. Por último. los tipos de fuente. dos y tres.). así como el tipo de imágenes que deseamos incluir. Analiza la información que tendrá un máximo de 3 pulsaciones del y procura tener muy claro los conratón. finalmente. dores. supervísala. Dentro de las etiquetas <body> </body> introduciremos el siguiente texto: Bienvenidos. Hay multitud de servidores que lo hacen gratis. Para ello. en este caso. Y ahora que tengo creada mi página. H1. En este cuadro de diálogo también podemos elegir el tamaño. Mantén la información viva. Con un doble click se abrirá un cuadro de diálogo. Te ayudará a no perderte. entre las dos pági5. seleccionamos "esta otra en itálica" y hacemos click en el icono marcado con una I (de "itálica"). la distribución 3. vamos a crear una lista de guiones. Hacemos click en File>Open Website. tenidos que quieres mostrar a tus dependerá de la siguiente fase. la alineación. los elementos más problemáticos del diseño web.htm o . en una sola ventana tenemos acceso a todas las variables que se pueden dar: la dirección. Para llevarlo a cabo. y esta otra en itálica. 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 código. En el menú Insert. En este caso. vamos a añadir dos elementos más complejos: una tabla y un v Nº 88 57 . Elegimos. es recomendable utilizar el asistente automático. Ahora que ya nos hemos familiarizado con los menús de formato e inserción. o círculos. etc. mientras creas las páginas. Traza el árbol de navegación. etc. color de texto. lo que abrirá una ventana del navegador predeterminado. para ver el administrador de sitios. Haz un diagrama o mapa del sitio y coniespana permite utilizar algunos comandos de PHP y sérvalo cerca ofrece bases de datos. etc. 7. ¿cómo hago para que los demás la puedan ver? Para ello necesitaremos alojarla en algún servidor que nos ofrezca espacio. ya que cansan y ralentizan la carga de las páginas. En primer lu- Un ejemplo práctico Ahora que hemos visto las principales funciones de Sausage Hot Dog. guardamos la página en el ordenador y pulsamos F9. tal forma que. 2. el índice de tabulación.iespana. Busca y estructura dichos contenidos. Esta es mi primera página web. Hay demasiadas páginas en Internet como para prestar atención a una que no dice nada nuevo. Además puedes subir los ficheros a través de un administrador FTP. Uno.geocities. Difunde o publica el sitio en Internet. seleccionamos "Esta frase está en negrita" y hacemos click en el icono marcado con una B (del inglés "bold". Aunque estés familiarizado con el lenguaje HTML. en la vista del navegador. Al fin y al cabo. aunque también la más agradecida. que es el formato que reconocen los navega- Una vez allí. Otras utilidades que puedes encontrar dentro de Sausage Hot Dog es un inspector de código accesible. Piensa en si merece la 4.es. contadores. vamos a introducir varios párrafos de texto y a resaltar determinadas palabras. Con el asistente automático. las opciones de accesibilidad. Ahora que está guardada. No hay nada más descorazonador que una página abandonada. Es de los distintos elementos. Es necesario recordar que hay que darle la extensión . siendo el 1 el de mayor tamaño y el 6 el de menor. Es la etapa más laboriosa. basta con abrir una cuenta gratuita para acceder al panel de control. vamos a ver los formularios. archivos. Así mismo. Veamos ahora cómo podemos introducir una imagen para dar un poco de vida a nuestra página. tanto Los 7 pasos para la gestación de una página web 1. Seleccionamos "Uno. Parte 2ª de los enlaces.com o www. la ventana o marco a la que se destina. hacemos click en H?. Para Lo que observes en la Vista previa no tiene por qué coincidir con lo que luego se mostrará en el navegador. En primer lugar. 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. vamos a utilizarlo para crear una sencilla página web. donde podrás administrar toda la información relativa a tu sitio dentro del servidor: estadísticas. creamos un sitio llamado "Pruebas" y lo guardamos dentro de "Mis documentos" en el ordenador. libros de visitas. que evalúa cada etiqueta y nos dice si nos sobra o falta alguna propiedad para personas con alguna discapacidad. como el pionero www. el de las rayas horizontales. de ser necesarios. Préstale atención y haz caso a los correos que te lleguen a través de ella. aporta algo. etc. identificado por líneas y puntos alineados de forma horizontal. de echarle un poco de imaginación. Y todo ello. te llevará a la etiqueta exacta. la tecla de acceso rápido. haya fase es donde utilizarás las herramientas WYSIWYG o los editores HTML que quieras utilizar. una descripción. visitantes. Antes que nada. así como la posibilidad de cambiar el orden de aparición. Marca las pautas del diseño gráfipena el esfuerzo que supone crear co. vamos a crear una web.

etc. A continuación. etc. los colores de fondo. la alineación. En esta sección podemos definir la alineación de y se debería ver así: Acordarnos de las personas con discapacidades es un deber moral de todos los diseñadores. Esto permitirá que la descarga de la información y la navegación a lo largo de los diferentes temas se haga más rápida para los visitantes del sitio web. el código que hemos generado y manipulado. su navegador la visualizará con la fuente por defecto (que suele ser Times New Roman en equipos Windows). basta con que hagas click y arrastres el puntero del ratón mientras mantienes pulsado el botón izquierdo del mismo. verás un icono de la imagen dentro de la ventana. bordes. para introducir los campos de texto respectivos. Por último. Por otro lado. • No uses tamaños de fuentes grandes para el texto. Aunque todos los navegadores admiten un único lenguaje HTML. aparecerá una ventana con multitud de campos que rellenar: el más importante es el que pide el nombre del archivo (Filename). existen algunas diferencias entre ellos. pero también podríamos incluir una tercera columna y situarlo allí. Podemos utilizarlas como herramienta de diseño. al principio y final de la página. Arial. En el menú Table utilizaremos el asistente automático. • En Internet. Este formulario nos permite enviar un correo electrónico a la cuenta que nosotros elijamos.Curso Insertar una imagen Veamos paso a paso cómo se inserta una imagen. Tampoco conviene utilizar imágenes gif animadas. tanto. haz click en el icono correspondiente del menú de inserción. En este ejemplo insertaremos un formulario llamado "mi_formulario" con dos cam- Es ahora cuando deben entrar en juego nuestros conocimientos de HTML. Entonces. Aproximadamente. y un botón de envío (Submit). <b><i>negrita e itálica correcta</i></b> y no <b><i>negrita e itálica correcta</b></i>. pos de texto: "nombre" y "apellidos". escribir todo en mayúsculas equivale a gritar. Courier o Verdana. si utilizas el rojo como color de fondo. Si haces click en la pestaña Accesibility. Internet Explorer o Netscape Navigator) o incluso sistemas operativos diferentes. Por lo naranja. y nuestro objetivo es entrelazarlos para dar formato visual. una posibilidad similar a la existente en programas como Word. los identificativos. te pedirá que introduzcas una dirección URL para la descripción de la imagen. A continuación. incluidos los enlaces de navegación locales. pero primero vamos a crear una nueva página para que quede más claro. Para insertar un formulario recomendamos utilizar el asistente automático. • Procura que los colores se combinen bien y que el texto sea legible. es decir. y obtendrá un resultado no deseado y generalmente poco agraciado. Advanced. los bordes. Recomendamos una codificación lo más ajustada a los estándares para que sea legible en todas o en la mayoría de las circunstancias. pero también para organizar la información. s 58 www. ya que pueden obtener una descripción detallada de lo que se muestra en un archivo separado y evitará ralentizar la carga de la página al ponerla en la etiqueta alt (ernativa). columnas. las diferentes celdas. formulario. vamos a crear una tabla de dos filas (rows) y dos columnas (columns) para albergar nuestro formulario. pero si quien este viendo la página no la tiene instalada. Por un lado. si va a llevar o no borde y a cuánta distancia de ella se tienen que colocar el resto de elementos de la página. Times New Roman. hacerlo. • Procura evitar los colores chillones como fondo de página. debería ser: El asistente nos brinda la posibilidad de escoger entre alguno de estos modelos prediseñados. podemos crear nuestras tablas de una forma mucho más rápida. no pongas el texto en Aquí introduciremos los datos más importantes. Procura que no superen los 10 o 12 puntos (tamaño 2 o 3) o Heading 4. por ejemplo. que nos evitará muchos quebraderos de cabeza a la hora de configurar las etiquetas HTML. s forma automática. • Si la información es muy extensa. la etiqueta <form></form> debe ser la que envuelva toda la tabla. Lo malo de esta opción es que hay que configurar las propiedades a mano. Sin embargo. Para crear la tabla. Guardamos y cerramos la que tenemos y creamos una nueva siguiendo los pasos anteriores. examina la tercera pestaña. Siempre puedes modificarlos según tus necesidades. que nos guiará paso a paso por las diferentes opciones que pueden configurar nuestra tabla: filas. Para evitarlo usa fuentes comunes o ampliamente extendidas como. s Tablas útiles Otro de los elementos de los que podemos hacer uso son las tablas. podremos elegir el ancho y alto. se desplegará una rejilla que servirá de base para elegir el número de filas y columnas deseadas. divídela en páginas separadas o incluye un enlace con un archivo diferente que contenga el texto en una sola página. Para añadir una tabla a nuestra página utilizaremos primero el asistente automático. colocaremos el botón de envío fuera de la tabla. Una de las primeras lecciones que debemos aprender de HTML es que las etiquetas deben estar anidadas entre sí. es decir. con la opción Quick Table (Tabla rápida). nuestra imagen. • Recuerda que no todo el mundo tiene las mismas fuentes instaladas en su equipo. En primer lugar. dentro de la ventana de código. ya que se trata de uno de los elementos más complicados de controlar. tenemos un formulario y una tabla. Algunos consejos • Una buena regla general para escribir páginas web es que su longitud no supere dos o tres pantallas de 640 x 480. puede que con la fuente Staccatto el texto quede fabuloso para ti. debemos saber que las etiquetas <tr> y </tr> delimitan las filas y <td></td>. La mejor visibilidad se obtiene con el negro sobre blanco. Búscalo en tu ordenador y acepta cuando lo hayas seleccionado.pctoday. Esto resultará muy útil para aquellas personas Es recomendable rellenar estos datos para ayudar al navegador. Al Las herramientas incluidas en el paquete nos ayudarán a mejorar nuestra web de forma muy sencilla. Dejemos un momento aparcado el formulario y centrémonos en la tabla. anchura y texto descriptivo alternativo se han rellenado de con discapacidad visual.es . ya que suelen irritar a todos los visitantes. Los usuarios ven las páginas con distintos exploradores web (por ejemplo. Utilizaremos la primera columna para presentar un mensaje al visitante y la segunda. ya que Hot Dog no es capaz de hacerlo a posteriori. • La página puede tener un aspecto en nuestra pantalla y otro muy diferente en las de los usuarios que la vean. Por ejemplo. y es aconsejable utilizar un tamaño mayor en los títulos o si quieres destacar alguna cosa. Por ejemplo. De este modo. Por último. Son visualmente agresivos y cansan. para reducir así la complejidad de este ejemplo. y observarás cómo los datos relativos a la altura.

Tecnologías multimedia en la Red. Trabajando con Sausage Hot Dog. Psicología del color. es decir rojo. lo normal es trabajar con millones de colores y con monitores de velocidad de actualización rápida y cualidades gráficas. el color en la web. que nos permite trabajar con millones de colores. Consejos para diseñar una web accesible. G=0. azul) la cantidad de cada uno de estos colores puede ir desde 0 (ausencia total) hasta 255 (máxima cantidad). Música y sonido. Evaluar la accesibilidad. El diseño inclusivo. Cómo saber si una web es usable. Herramientas para el tratamiento de las imágenes y el color. los navegadores. ¿Qué es la usabilidad y por qué se debe tener en cuenta? Qué hacer y no hacer en el diseño web. verde y azul. The GIMP. ¿cómo funciona este sistema? La luz blanca está compuesta por par- tes iguales de tres colores. los programas encargados de mostrarnos las páginas web. El color y las imágenes. Introducción a las herramientas WYSIWYG. PC Today nº 93 ace tan sólo unos pocos años la mayoría de los ordenadores de los que disponía el público en general funcionaban tan sólo con 256 colores. El sistema RGB indicará la cantidad de cada color entre 0 y 255 para así formar un nuevo color. B=255 daría blanco y que R=0. PC Today nº 87 PC Today nº 88 2. verde. es decir. Herramientas para el diseño web. Actualmente. no han evolucionado de la misma manera y. G=255. como consecuencia. aunque fuera decorativa. Usabilidad. PC Today nº 90 5. PC Today nº 91 6.pctoday. Imagen animada y películas. La imagen. Guía del curso 1. ya que muchas veces las páginas terminan siendo un collage poco cuidado. Blue. PC Today nº 92 7. debería cumplir alguna función. Ahora bien. indicando la cantidad de cada uno de los colores primarios. hay que saber cómo utilizarlos y mezclarlos. Introducción al diseño web. como el color. Planificar y organizar el sitio. En el sistema RGB (siglas en inglés de Red. pero usando números en base 16. Imágenes: tipología y características. Sin embargo. Ya sabemos que R=255. Principales elementos de las páginas web. Lamentablemente. ¿Qué significa esto? Pues que en lugar de 10 dí- 54 www. Green. ¿Cómo indicamos a la página el color que queremos? Utilizamos el sistema hexadecimal. La ausencia de los tres colores primarios da como resultado el negro. una mezcla en la que se encuentran la máxima cantidad posible de rojo. ¿Qué se entiende por accesibilidad? Deficiencias y políticas. H 3. Razones para conocer los principios de la programación. Mapas de imágenes. llamados primarios: rojo. PC Today nº 89 4. a veces demasiado recargadas de texto. ¿Y el hexadecimal? Funciona básicamente igual.Curso El color y las imágenes Las imágenes y los colores dan vida a nuestras páginas. El color blanco es pues. los millones de colores de los que se disponen para trabajar quedan reducidos drásticamente a la hora de crear páginas web. B=0 daría negro. Accesibilidad.es . verde y azul. Programación. Integración multimedia: Macromedia Flash y Action Script.

Indica la pureza del mismo. • Brillo: es la intensidad con más claridad u oscuridad en el color. Nº 89 55 . de alegría. Se trata de una propiedad importante. Los colores cali- Hay que tener en cuenta que. También podemos diseñar con toda la gama de 24 bits. Un color intenso. porciones de un mismo color con fuertes diferencias de brillo (contraste) definen porciones diferentes en el espacio. tendrá configurado su monitor con unas determinadas pro- Utilizar colores cálidos puede dar dinamismo a la página. calma. y los segundos son el azul. De este modo. La descripción clásica de los valores corresponde con: claro (cuando contiene cantidades de blanco). mezclándolos se obtienen los demás matices o colores. como el azul. s La paleta Reallysafe o colores realmente seguros. mientras que los colores fríos dan sensación de tranquilidad. en HTML el color blanco sería "#FFFF" y el negro "#0000". Existe también otra profundidad de color. verdes Tipos de colores Colores cálidos y fríos Una forma de dividir los colores es en cálidos y fríos. navegadores. • Saturación o intensidad: se refiere a la viveza o palidez de un color. mientras que un cambio gradual en el valor de un color (gradación) da sensación de contorno. dependiendo del sistema operativo en que trabajemos. A más bits. todo depende del público al que va destinada la página. los colores puros del espectro están completamente saturados. El brillo se puede definir como la cantidad de "oscuridad" que tiene un color. de distanciamiento. el propio sistema operativo se queda con 40 para su gestión interna. Si mezclamos un color. el verde. Entre estas propiedades cabe distinguir: • Matiz: es el estado puro del color. por ejemplo. pero entonces sólo apreciaran bien nuestras páginas los usuarios con sistemas de altas prestaciones. 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. Para 256 colores se precisan 8 bits. cian. es necesario mezclarlo con un gris de blanco y negro de su mismo valor. perderá su saturación a medida que se añada blanco y se convierta en celeste. el naranja y el púrpura en Los colores oscuros crean espacios íntimos. si queremos trabajar con una gama de colores compatible con todas las profundidades. sistemas y platafor- mas. son el amarillo. Por mucho que nos esforcemos en que los colores sean iguales para todos.Diseño web. Así. el violeta. y siempre deberemos tener en cuenta que los colores Existen más colores con nombre. 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). podemos trabajar dirigiéndonos al mayor número de usuarios posibles. El matiz se define como un atributo de color que nos permite distinguir el rojo del azul. es mezclarlo con su complementario. en concreto 216. se obtiene mayor número de variaciones de un color primario. el rojo. de seriedad. podemos combinar 6 tonos de rojo. el azul. etc. ya que cada usuario que vea nuestra web. Colores claros y oscuros Otra posible división de los colores es aquella que distingue entre colores claros o luminosos y oscuros. saturación. Volvamos a los 256 colores básicos de 8 bits. monitores distintos. Como consuelo. La profundidad de color marca la cantidad de bits de información de que disponemos para definir los colores derivados de los primarios. mientras que los luminosos dan sensación de apertura. ya que contribuye a crear sensaciones espaciales. pero sólo éstos se utilizados variarán ligeramostrarán en todos los navegadores. y el celeste. representa lo claro u oscuro que es un color respecto de su color patrón. madurez. pero como no hay más que diez números recurre a las seis primeras letras del abecedario: 0123456789ABCDEF. jovialidad. Visto lo anterior. con lo que disponemos de 216. 6 de azul y 6 de verde. Los mejores colores No existe una respuesta única para esta pregunta. lo que borrará cualquier posibilidad de que nuestros colores se vean de la misma manera en dos dos dan sensación de actividad. La intensidad de un color está determinada por su carácter de brillante o apagado. como ocurre con amarillos. Con el paso del tiempo se ha adoptado una lista de colores con un nombre representativo. de confianza y de amistad. lo que nos permitirá tener cubierto el rango de usuarios con sistemas de color de 8 bits y de 24 bits. Pero esta paleta no es en realidad tan segura. gitos utiliza 16. con el blanco. el verde. el rojo. Para desaturar un color sin que varíe su valor. y disponer así de millones de colores para trabajar. sólo podremos usar unos determinados colores. azules y negro. piedades de contraste. Por otro lado. de continuidad de un objeto en el espacio. Los claros inspiran limpieza. de dinamismo. y naranjas. También lo podemos identificar con un verde amarillento y un verde azulado. el verde y los dos últimos. medio (cuando contiene cantidades de gris) y oscuro (cuando contiene cantidades de negro). sino que los que usemos se muestran más rápido. la de 32 bits. la diferencia de los monitores nos desbaratará nuestra intención. Los oscuros inspiran seriedad.. luminosidad. los dos siguientes. Parte 3ª mente de un navegador a otro y de un sistema operativo a otro distinto. esto producirá también su neutralización. de tal forma que los nuevos navegadores los interpretan y los traducen internamente por su valor hexadecimal equivalente. es decir. y para ello podemos diseñar nuestras páginas usando bien la paleta de 216 colores. sin el blanco o negro agregados. menor medida. el azul verdoso. como es el caso de los tonos rojos. ambos distintos matices del mismo color. no sólo aumentará su valor sino que disminuirá su saturación. de éstos 256 colores. para indicar el color utilizamos seis valores: los dos primeros indican el rojo. utilizaremos distintas paletas de colores. Los tres colores primarios representan los tres matices primarios. se refiere a la cantidad de luz percibida. En cuanto a los primeros. Otra forma de desaturar. juventud. pero con ella no se consiguen más colores.

colía. infancia. calor. Es un color que influye sopeligro y si es muy suave. misterio. sugiere informalicer lo siguiente: • Rojo: transmite pasión. Está asociado con senticrecimiento. elegantes. plantas. fuerza. a quienes la navegación por nuestra página les resultará muy difícil si nos basamos únicamente en rojos y verdes. masculini- fundamental de estas páginas es ser leídas. Como norma general. que destaquen muy bien. para que se pudieran visualizar. de empresa o de instituciones: deben diseñarse de acuerdo con los colores identificativos de las mismas. moderno y denota alegría. podríamos establela naranja. sin altos contrastes de tono. comodi• Amarillo: comunica entusiasmo. salud. peligro. tilidad. dignidad. En las sitios educativos. Es un color dad de un mismo color. jugoso como tos colores. que puedan gustar a la mayoría. fuerza.. El rorizar datos a las personas. ligereza. Puede llamar la atención. 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 curación. mareo. en colores neutros. luz del sol. fríos. y si la tiene activada. Un aspecto a tener en cuenta es el contraste creado cuando sobre un color o una imagen de fondo colocamos otro color diferente. o si lo cambiamos por lo menos dejar los enlaces subrayados. a mumo los labios pintados de una mujer o fatiga más a la vista. con altos contrastes entre fondo y contenido.. blancos o púrpuras-rojos.. Se ha asociado siempre el pio. inocencia. dad como para que se pueda leer cómodamente. no es recomendable usar imágenes de fondo en las páginas web.pctoday. fermientos enérgicos y con la ex. dicen que este color ayuda a memo• Naranja: simboliza alegría. confianza. calor. carácter belicoso. ya que el objetivo Los colores alegres dominan las páginas juveniles y dirigidas a un público infantil. por lo calor. Debemos verlas con los ojos del posible visitante. y por lo tanto nuestras creaciones están en gran medida inspiradas por nuestra personalidad. Si no tiene activada la opción de imprimir los colores de fondo. No debemos olvidar a los usuarios afectados por el daltonismo. ritualidad. si el usuario quiere imprimir la página va a tener problemas por todos lados. porque causa una estidable. salvo que ésta sea de un color y to- 56 www. melanventud y suavidad. paque un entorno amarillo brillante • El negro: implica elegancia. Si es muy pálido. prima la limpieza y claridad de las páginas. ya que es el color que está acostumbra- primarios. dice que es el color más descansado aunque también la ira y enfado. dad en el trato. za. cuando se contempla un charco de mulación excesiva de los ojos. También puede expresar tristeza. y hay psicólogos que corresponden a la cultura occidental. • Páginas corporativas. estado de ánimo. ya que un diseñador es un creador. • Páginas exóticas y a la vez elegantes: se pueden obtener con fondo negro o con color muy oscuro y letras o motivos dorados. ra incitar a una acción o para marcar puede llegar a provocar una sensa• El blanco: está asociado a la purelos elementos más importantes de la ción de irritabilidad en las personas. así como de elegancia cuando no es muy oscuoptimista. Si es oscuro. etc. por lo que una lectura clara y cómoda es fundamental. por lo sangre. s cho cansa la vista. gastará el cartucho de tinta de la impresora.• Azul: implica verdad. • Verde: recuerda la naturalegre. • Páginas destinadas a un público adulto: deben diseñarse con colores serios. primavepara cada color y para cada intensifrescura e incluso frío. cielo. intensiza. con bajos contrastes entre fondo y conte- nido. cada color individual bre el apetito. agitación.. da sensación de espiSi es muy brillante. y esto también es importante en el caso de las imágenes de página. y llega a ser chas personas les parece desagradesencadenar asco. Siempre podemos recurrir en este caso al típico estándar de fondo blanco y letras negras o gris oscuro. de cada diseñador. o al revés. no verá nada en la impresión.. o bien con fondos oscuros y textos claros. • Páginas divulgativas. sin usar colores chillones que cansen la vista. Si la respuesta es afirmativa. No hay colores mejores o peores para crear páginas web. obteniendo de todas formas un mal resultado. todo depende del contexto y del conjunto. como colores secundarios o terciarios en tonos pastel o en una gama de grises. inocencia. Sin embargo. y a otras les sugiere pasión. peligro.Curso El color y las emociones Es bien sabido que las respuestas dad. hay que evitar los colores muy oscuros. Otro aspecto que debemos tener en cuenta es si queremos que el usuario pueda imprimir nuestras páginas. Es vibrante como la los anteriormente indicados. • Páginas orientadas a un público joven: pueden incluir colores vivos. podemos seguir unas pautas generales que nos orientarán: • Páginas destinadas a un público general: deben estar basadas en colores más bien neutros. limpieza. sanque le rodea. Los buenos contrastes se obtienen con fondos claros y textos oscuros. y por citar sólo unos cuanfrutas tropicales. Como consejo. Es el colores pueden expresar senticolor de la carne y del fuego mientos totalmente opuestos a del hogar.. juya que en otras culturas los ventud. hay que recordar que no es aconsejable su uso para amarillo a la intelectualidad y al penque estas emociones asociadas una página sobre recetas de cocina. sensualidad. o cuando situamos próximos en nuestra página dos o más colores distintos. en especial. exótico como las Así. calor. No olvidemos nunca que la misión principal de una página web es transmitir información. Da sensación ra. Sin embargo.No es casual que los coches deportivos utilicen frecuentemente el rojo.es . utilizar un fondo claro y letras oscuras. seducción. dinero. amistad y desentusiasmo. Por otro lado. samiento claro. pero cuando se emplea mu. dad. verano. do a ver la mayoría de los usuarios. siempre que no sean análogos. como manuales y artículos: debemos tener especial cuidado en que el texto destaque adecuadamente sobre el fondo. como aplastante. Es contradictorio.. abundancia. y estos ojos muchas veces no están en las mismas condiciones que los nuestros. taca mucho sobre el entorno sexo. y también con fondos fríos y textos cálidos. tristeza. o al revés. sugerir Normalmente. No podemos olvidar la accesibilidad que debemos dar a nuestras páginas. para las diferentes combinaciones de ro. ya que esto nos obligaría a dar colores claros a los textos. frescura. haciéndolo disminuir. alarma. Se citación apasionada o erótica. fuego. paemocionales varían enormemente dad. ciones y asociaciones de ideas proalimento azul en la naturaleza.. ya que es un color pasional. agua. delicadeza. jupágina. siempre debe destacar el texto sobre el fondo con la suficiente clari- mos obligados a seguir y. puede indicar colores que se pueden dar. Un entorno amarillo melleva asociado un conjunto de emoseguramente porque no hay ningún dio o pálido transmite comodidad. con la inclusión de pequeñas animaciones en Flash de tonos vistosos. Con este planteamiento. bosques. incluyendo siempre el logotipo de la empresa. puede inspirar sión. El color de los enlaces conviene que sea el azul estándar del navegador. mal. fuerza. incluso tirando a grises.

es decir. presenta la desventaja la transparencia. la forma en que se visualizan las ventanas de GIMP. todavía no se admite en todos los navegadores. s Nº 89 57 . dejamos el predetermina. mido. sión sin pérdida. no muy apagado y con poco contenido gráfico por unidad de pantalla. Una vez que hemos archivos en formato gif y tiff compriaceptado los términos de la licencia . la resolución del monitor. JPEG es el acrónimo de Joint Photographic Experts Group (Grupo Unido de Expertos de Fotografía). dejar todas las casillas sin seleccioDescomprimimos gtk+-versionnar.cl). el ajuspero no te prete de rendimienConfigura el programa de acuerdo ocupes.zip y lo ejecutamos haciendo necesita filtros extra para exportar doble click . A continuación. Es importante instalar los archi. por ejemplo. basándose en el hecho de que el ojo humano no es perfecto y no logra captar toda la información que se puede almacenar el una imagen de 24 bits. Ade.Diseño web. la resolución una resolución con las características del equipo. La organización W3C recomienda el uso del formato PNG (Portable Network Graphic) para cubrir ciertas lagunas que dejan los otros formatos. gen no tiene por qué ser cuadrada. Image GIF es el acrónimo de Graphic Image File Format (Archivo de Formato Gráfico de Imagen). aunque. El formato JPEG intenta eliminar la información que el ojo humano no es capaz de distinguir. 200 Mb de espacio libre en disco duro. 4. mucho más avanzada. ya que despistan mucho al usuario y enmascaran excesivamente el texto.024x768 ppp. los más extendidos en Internet son GIF y JPEG. Estos filtros se instalan por nos pide elegir una carpeta para insseparado. Asímismo. No funcionará con una configuración de 256 colores. cia. problemas. Recomendamos cionales. nuestras necesiel programa de dades. y le cuadro de diálogo Seleccionar asodecimos instalar. Fichero. nos indica que GIMP setup-1.zip. Se caracteriza Cómo instalar The GIMP Podemos descargar el programa ciaciones de archivo se nos pregunta desde www2. dejamos seleccionadas las dejar la predeterminada. Sin embargo.zip. • Preferencias: desde donde se pueden cambiar los valores correspondientes al número de niveles de deshacer. Aquí eleinstalación desgiremos la carplegará un peta donde guarmensaje de daremos los advertencia . resolución mínima de 800x600 ppp y color verdadero de 24 ó 32 bits.gif. Fue desarrollado para el intercambio de imágenes en Compuserve. el más conocido dentro del mundo del software de libre distribución dedicado al retoque fotográfico y la composición y creación de imágenes. opciones por defecto y por último. como es de reciente aparición. elegimos la Instalación típica. esta transparencia es que puede variar entre 2. Parte 3ª Manipulation Program). un formato de compre. • Abrir: nos permite seleccionar una imagen desde una carpeta para poder trabajar en ella. Aceptamos los términos Ahora que tenemos instalado el prode la licencia y seleccionamos el grama. por ejemplo.¿Que es GIMP? más. pueden ser 24 bits en imágenes de color o solamente 8 en fotografía en blanco y negro. se pueden crear imágenes animaGIMP es el Programa de Manipuladas. Se caracteriza por conseguir una mayor compresión que el formato GIF (alrededor del 10%) y.poder instalar el plug-in . • Diálogos: con las opciones que se muestran a conLa compatibilidad con LZW se encuentra separatinuación. En el Simplemente pulsamos en él. que contiene tres menús: El menú Fichero contiene los siguientes submenús: • Nuevo: despliega un cuadro de diálogo desde donde podemos escoger las medidas para una nueva imagen. aunque la patente ya ha prescrito en muchos países. del monitor y los de 800x600 el programa funciona sin plug-ins añadidos. aunque los autores aclaran que esta versión aún presenta pequeños fallos. de archivos . el portapapeles o por captura de pantalla. archivo . Cierra GIMP para Igualmente. ción de Imágenes GNU (GNU. Formatos gráficos Una misma imagen puede almacenarse en diferentes formatos.si/~sopjsimo/ qué tipos de archivos gráficos deseagimp. En Seleccionar tareas aditalar el programa. Una de las grandes diremos que soporta hasta 256 coloventajas de este formato es que permite res. Su objetivo es proporcionar un formato de compresión de imágenes sin pérdida adaptable a cualquier tipo de imagen. En el siguiente cuadro de diálogo primimos gimp-version-lzw-setup. al igual que éste. por eso se dice que posee un formato de compresión con pérdida. Se pueden apreciar las diferencias de legibilidad y calidad de los tonos continuos (www. Respecto a los colores. archivos. para más adelante realizar varios ejercicios prácticos. Una de las desven- Vamos a comenzar con la descripción de los menús y las herramientas.mos asociar a GIMP. que podecompresión se basa en el algoritmo mos hacer un degradado de transpaLZW. extensiones y ayuda. y los requisitos mínimos del sistema son los siguientes: Pentium I a 133 MHz. tajas de este formato es que no permite la transparencia ni la animación. PNG es el acrónimo de Portable Network Graphics (Gráficos de Red Portátiles).de que no permite la animación. da del programa por la vigencia de la patente. Funciona en todos las versiones de Windows. ya que permite 128 ó 256 de una paleta de 24 bits. vamos a acoplarle el módulo directorio donde lo queremos instalar. En un principio se desarrolló para el sistema operativo Linux. ya que los desarrolladores de software libre se están volcando en él. que la ima. Su que sea variable.arnes. descomprimimos el procedemos a la instalación. v El formato PNG es el que más futuro tiene. ejecutaresolución de mos el programa pantalla no para configurarlo tenga de acuerdo a 1.dispar. 32. Cuadro comparativo entre los dos principales formatos para web. es decir. los banners. Por contra. y hace ya algún tiempo que se encuentra disponible para Windows. Fue diseñado para la compresión de imágenes fotográficas. es decir. su compresión es sin pérdida y perPara las fotografías es mejor utilizar el formato JPG. desde Windows 95 hasta Windows XP. y descomdo. En caso de que nuestra Ahora que ya está instalado. 32 Mb de Ram. 8. así como los demás elementos de la página. Respecto al color. con to. Recomendamos vos en el orden que indicamos. sino que puede tener un recorte. etc.rencia. porque elimina información. • Adquirir: bien sea por escáner. mite la transparenpor el número de colores que utiliza. Cuando lo abrimos. sólo aparece la caja de herramientas. 16.

286.Consola de errores.291.76. en algún lugar debajo de la etiqueta IMG. canales y caminos . Para abrir una imagen.Gradientes. pero a diferencia de éste muestra una lista de todas las carpetas que contienen imágenes y que se Mapas de imágenes Supongamos que tenemos un mapa de Europa y queremos que.149.269. en donde se puede escoger un color para rellenar objetos (color de frente) desde las 39 paletas con que cuenta. . así la imagen) de cada uno de los puntos como otras opciones adicionales.ayudarán en esta tarea. .173. Despliega la ventana Índice del documento. Aquí podemos ver los valores RGB.212. Al hacer doble click en el icono Color de frente.139. señala las coordenadas mos una imagen de nuestro sitio web y del mapa (coords) e introduce el con las herramientas cuadrado o polígocomentario (alt="España y Portugal") y no. siendo el primero. Abre el cuadro de diálogo correspondiente a las opciones de la herramienta que se encuentra activa. Cómo abrir y guardar una imagen Entre los formatos más conocidos que se pueden abrir y guardar con GIMP se encuentran: BMP. momento en el cual se despliega el cuadro de diálogo Cargar imagen.157.253. Repetimos la operación Si ponemos el cursor encima de un área activa de la imagen.277. . Abre el cuadro de diálogo Selección de gradientes.274.182. éstas no se guardarán. pero define un polígono el área. cierra el programa y cualquier archivo que esté abierto. hacemos click en el menú Fichero y seleccionamos la opción Abrir.178. En caso de que no se hayan guardado los cambios de alguna imagen. edición y dibujo están en el centro. encuentran guardadas en nuestro ordenador.280. saje preguntando si realmente queremos salir.Curso con 56 patrones que se pueden usar para rellenar objetos. Muestra el dispositivo de entrada por ejemplo. Veamos el código necesario para hacer funcionar nuestro mapa: <map id="europa" name="europa"> 58 www. abri(shape="rect").27 gún enlace y la última cierra el mapa. Éste cuenta con setenta y ocho diseños que se pueden modificar para crear más. que permite escoger entre cualquiera de los colores que se encuentran en una imagen indexada (generalmente un gif) para pintar o rellenar nuevos objetos.1 Construir un mapa introduciendo a 71.237. 233. TGA. PNG.134. aunque aún le quedan muchas diferencias por pulir. cuando se tiene instalada una tableta digitalizadora. aparece una lista con los últimos cuatro archivos abiertos.264. .243. . 298. aparecerá una mano para indicar que se trata de un enlace. Es el último de los submenús y. el número hexadecimal del color o escoger uno nuevo. Abre el cuadro de diálogo Brochas para escoger entre una colección de 50 diseños y tamaños.Paleta. s Este menú es equivalente al tradicional "Archivo" en otros programas.pctoday. Este tipo de imágenes activas se denominan "Mapas de imágenes". el que se abrió más recientemente. patrones.Capas. También se puede llegar a este cuadro de diálogo haciendo doble click en la herramienta deseada.262.215.124. La tercera momento en que terminemos de definir línea es similar.243. creamos áreas activas.130.259.147.278. 4. ayudará a crear mapas de imágenes. similar al administrador de archivos. También se puede leer y guardar archivos de Adobe Photoshop. aunque si la imagen contiene capas.247. que lo componen. GIF.187. Despliega el cuadro de diálogo Selección de patrón.230.224. mano las coordenadas de cada uno de 220" href="italia_grecia" title="Italia los puntos que definen las áreas es muy y Grecia" /> engorroso. 249.Y donde se nos pedirá el nombre de la desde la esquina superior izquierda de página a la que queramos enlazar. • Salir. Podemos localizar la carpeta donde esté guardada la imagen mediante la barra de desplazamiento y. se abre el cuadro de diálogo Selección de color.Paleta indexada.222. Abre el cuadro de diálogo Paleta de color indexado. GIMP despliega un men- Las las herramientas de selección.Dispositivos de entrada.226. Debajo de Directorios se encuentran las unidades de disco y las carpetas. Podemos hacer click en Salir si no deseamos guardar los cambios o en Cancelar. Abre el cuadro de diálogo Paleta de colores. al pulsar sobre determinado país. Una vez que va correspondiente es un rectángulo hayamos instalado el programa.264.173.Opciones de herramienta. . .296" href="espana_portugal. aparecerá un cuadro de diálogo e indica las coordenadas (en pares X.boutell. MapEdit es una aplicación muy sencilla que nos 174. En el mismo el enlace al que se llamará.137. • Debajo del menú Diálogos.Índice de documentos.gif" <area shape= "rect"#España y Portugal coords= "1.268.Patrones. etc. hacemos doble click para visualizar las carpetas. .205 dice que el área de fondo no tiene nin.245.220. Se puede abrir cualquiera de ellas desde aquí.255. ref" alt="Europa" /> podemos utilizar el programa Mapedit </map> de la empresa Boutell para crear un Este código define el funcionamiento del mapa de imagen. Existen programas que nos <area shape="default" nohref="noh. También se puede llegar a este cuadro de diálogo deshaciendo doble click en el icono Brocha activa. 121. como ya habrás deducido.232. La primera línea incluye el nomuna copia de evaluación de este softwabre y la segunda indica que el área acti. Permite hacer cambios en los colores.291. También se puede llegar a este cuadro de diálogo haciendo doble click en el icono Gradiente activo. Por ejemplo.285.196.. Muestra un informe de los errores producidos en el transcurso de la sesión de trabajo.280.169.266. Para ver los colores de esta paleta.157. La cuarta línea nos 177.Estado de dispositivo.htm" title= "España y Portugal"/> <area shape= "poly"#Italia y Grecia coords= "121.130. se deberá tener abierta una imagen indexada. También se puede llegar a este cuadro de diálogo haciendo doble click en el icono Patrón activo. Cuenta GIMP es la alternativa gratuita a Adobe Photoshop. JPG. aparezca una página relacionada con ese país.re en www. Veamos el código: <img src="europa. brochas y gradientes cuando se tiene instalado algún dispositivo de entrada.200. .Brochas.237.es . colocando el cursor en la unidad raíz. para poder guardar el trabajo. TIFF. usemap="#europa" alt="Europa" /> Será el atributo usemap= "#europa" el que nos va a indicar que las instrucciones de este mapa están guardadas en otro sitio.277.147.189. Podemos descargar mapa. .269.com.

siempre puedes usar la opción Deshacer. arrástralo para cambiar el tamaño de la ventana. cuarta coparciales que estén lumna) se puede seen contacto y converleccionar con detalle tirlas en una sola. Mediante unos tiradores podemos determinar fácilmente el área que queremos recortar. a un valor mayor. mejores resultados. mantén presionanítida. que incluye la información y en el que también puedes hacer los ajustes necesarios mediante la introducción de valores en píxeles. para fijar la selección en su lugar. se. cortarla. ción. Para mover la selección a otro punto. La selección circular nos permite realizar selecciones elípticas o circulares de una imagen. Para realizar una un valor de 0. Para guardar una imagen en otro de los formatos disponibles. desde el el cuadro de diálogo relativo a las menú Editar. coloca el cursor fuera del área punteada y. Notarás que aparece el cuadro de diálogo Información de recorte y cambio de tamaño. debajo de Archivos. coloca el cursor de una imagen Una vez terminada la selección. Del lado derecho. selecciona Deshacer. podemos recortar. en la caja de herramientas. Ahora. Elige la extensión del archivo dependiendo de los colores y el tamaño. coloca el cursor en una esquina de la imagen. seleccionamos Fichero y luego Guardar como. Al soltar el botón. Si mantienes prePrueba ahora a corsionada la tecla de tar la imagen. Para ajustar la selección. presiona la tecla Z. Las herramientas de selección La selección rectangular nos permite seleccionar un área con esa forma en una imagen. tenemos que ajustar la barra deslizable Calidad y el tamaño en bytes y Kb. Ahora. primero tenemos que indexar la imagen. primero elige una zona de la imagen mediante cualquiera de las herramientas que has visto antes. arrastra la selección al punto deseado. Seleccionar regiones con curvas de Bézier es muy útil para elegir formas irregulares o con curvas. escribimos el nombre que le vamos a dar a la imagen incluyendo la extensión. La opción Suavizado tiene un efecto parecido al desenfoque. pero en la Vista previa. Vuelve a poner el cursor encima de la selección y. quierdo del ratón. tro en una esquina de la trozos de las selecimagen y mientras pulsas el botón izciones a una selección anterior. la selección se cierra automáticamente. arrástralo en diaTransformación gonal para formar una ventana. Si quisiéramos guardarla en formato jpg. o propiedades de la herramientan que mientras mantienes presionada la tecla Control. En el cuadro de diálogo Guardar imagen. Haz click en una de las esquinas y mantén pulsado el botón del ratón. Nº 89 59 . Se puede crear una vista previa de la imagen antes de abrirla si hacemos click en el archivo y luego otro en el botón Generar vista previa. Con ella puedes acotar regiones de colores similares. al mismo tiemestás utilizando.Diseño web. a continuación. A un valor alto. haz click. Parte 3ª en la carpeta correspondiente a la ubicación de la imagen. Si el área de una imagen ahora mantienes presionada la tecla Con. Para mover la ventana. uno de los métodos más sencillos de seleccionar objetos. mueve el cursor hacia cualquiera de las otras esquinas. mientras muestra una flecha en diagonal. es necesario hacer click en cualquier punto exterior de la selección actual. Para realizar esta selección haz click en el icono Selección rectangular ubicado en la barra de herramientas y luego. Probaremos con varios valores hasta que encuentres un punto adecuado. arrastra el cursor en diagonal para formar una ventana de selección. arrástralo hasta encuadrar la imagen. s desplazan alrededor de la imagen. Se requiere tener buen Recuerda que si te equivocas. Finalmente. haz click dentro de ésta.arrastras el cursor sobre la imagen.gif. aplicarle y cuando cambie de forma. la calidad de la imagen es mejor pero también su tamaño en Kb. suelta luego el botón del ratón para terminar la selección. Si haces doble click en cualquiera de un color o cualquiera de las muchas opciones que nos ofrece GIMP. podrás restar sondel programa. haz click dentro ésta da con líneas discontinuas que se para recortar la imagen. Para realizar una nueva selección. con el botón izquierdo del ratón presionado. Seleccionamos las opcio. Hacemos click en Aceptar para guardar la imagen. de esta manera. La forma de realizar la selección es exactamente igual a la selección rectangular. pulso para no desviarse demasiado al realizar dicha selección.de una imagen. deberíamos proceder de la misma manera.00 muestra la imagen selección circular. con el botón izquierdo del ratón. se formará una elipTrabajar con GIMP es similar a hacerlo con otro software. hacemos click en el botón Aceptar. Otra forma de seleccionar regiones continuas es mediante la herramienta llamada "varita mágica". debajo de Directorios. Lo mejor de esta herramienta es que permite modificar la selección mediante los puntos de control que forman las aristas. utiliza regiones dibumuestreo y Método DCT y así lograr jadas a mano. se desplegará Pulsa click sobre la imagen y. buscamos la carpeta en la cual vamos a guardar la imagen y en el cuadro de texto que se encuentra arriba del botón Aceptar. A un valor bajo. Haz click trol. Coloca el cursor y luego lo arrástralo. Para seleccionar formas irregulares nes Optimizar. los iconos de selección. podrás esta herramienta (sesumar selecciones gunda fila. Para cancelar la selección actual. la calidad es más pobre. Seleccionamos la imagen y aceptamos para abrirla. la imagen se da la tecla de mayúsculas mientras ve borrosa. Progresivo y dejamos los valores por defecto para Sub. coloca el cursor en uno de los cuadros de las esquinas y cuando cambie de forma y muestre cuatro flechas. en uno de los cuadros de las esquinas puedes moverla. bien sean contiguos o no. Para que GIMP pueda guardar las imágenes en formato . mover o rellenar con un color el área que queda dentro de la selec- Una buena manera de conocer el programa es ”trastear”con todas las opciones que nos ofrece. hacemos click con el botón derecho del ratón en cualquier parte de la imagen y en el menú que aparece. po. La forma de hacerlo es mantener presionado el botón del ratón mientras deslizas el cursor sobre el contorno que quieres seleccionar. buscamos la imagen que deseamos abrir. selecciona el icono que se encuentra en la segunda fila y segunda columna (cuatro flechas cruzadas). Con mayúsculas.Las herramientas de selección y realizar un recorte las más importantes dende la misma. Una vez que la selección haya quedaEl área seleccionada queda enmarcado a tu gusto.

hay que plantear el desarrollo de nuestra web de forma que básicamente sea rápida. www. aprendido. 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. Programación. Cómo saber si una web es usable. Imágenes: tipología y características. Psicología del color. Guía del curso 1. PC Today nº 89 4. Consejos para diseñar una web accesible. Evaluar la accesibilidad. The GIMP. coloquialmente podemos definir "usabilidad" como la facilidad de uso aplicable a cualquier sistema que interactúa con un usuario. Planificar y organizar el sitio. Herramientas para el diseño web. eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico". hay una parte muy importante que muchas veces se pasa por alto: la usabilidad.iso. La primera definición hace referencia a la necesidad de que exista un usuario para valorar si un producto es usable o no. PC Today nº 91 6. Trabajando con Sausage Hot Dog. cómoda y fácil de navegar. el color en la web. ¿Qué es la usabilidad y por qué se debe tener en cuenta? Qué hacer y no hacer en el diseño web. PC Today nº 90 5. • ISO/IEC 9241: "Usabilidad es la efectividad.pctoday. Accesibilidad. Tecnologías multimedia en la Red. Herramientas para el tratamiento de las imágenes y el color. Introducción a las herramientas WYSIWYG.Curso Usabilidad Hemos visto en las anteriores entregas todo lo relacionado con los elementos que podemos utilizar para crear nuestra web.org) dispone de dos: • ISO/IEC 9126: "La usabilidad se refiere a la capacidad de un software de ser comprendido. Efectivo es aquello que produce resultados rápidamente a costa de utilizar los recursos necesarios y eficiente es aquello que genera los mismos resultados con un mínimo de recursos. Integración multimedia: Macromedia Flash y Action Script. En la primera parte ya dimos algunas pautas que se deben seguir y antes de ponerse a trabajar hay que planificar. PC Today nº 87 PC Today nº 88 2. conviene indicar la diferencia. Música y sonido. PC Today nº 93 i acudimos a definiciones formales. La segunda hace referencia a cómo el usuario puede realizar un trabajo en un determinado escenario de forma efectiva. El color y las imágenes. Principales elementos de las páginas web. Mapas de imágenes. la Organización Internacional para la Estandarización (ISO. S 3. Para conseguir este objetivo. usado y ser atractivo para el usuario.es . Siempre que apa- recen las palabras efectivo y eficiente. Imagen animada y películas. en condiciones específicas de uso". Usabilidad. Razones para conocer los principios de la programación. El diseño inclusivo. PC Today nº 92 7. Pero no consiste sólo en encajar piezas. Introducción al diseño web. ¿Qué se entiende por accesibilidad? Deficiencias y políticas. Dejándonos de tecnicismos y normas (siempre necesarias).

• A quiénes va dirigida. Todos hemos tenido experiencia como usuarios en las miles de interfaces que existen. mos consultar los estándares de usabilidad. Muchas interfaces están diseñadas para trasladar herramientas del mundo real al virtual.). Siempre se ha pensado que era un terreno al que sólo se dedicaban los ingenieros e informáticos. Se perdieron más de 23 billones de euros debido a la falta de Interfaz Siempre que hablamos del término interfaz. sería bastante complicado sacar el carné de conducir si todos tuviéramos que comprender el funcionamiento interno del mismo. La mayoría de las personas sienten afinidad y familiaridad con una página web porque quieren.desarrolloweb. listas desplegables. Más conocida como IPO. Si tuviéramos que definir el término. una revista o un coche. etc. El propio concepto no permite unas reglas fijas para estas preguntas. un intermediario de la comunicación con la audiencia. www. Mientras los científicos se preocupan de cuantificar los comportamientos interactivos. s El quinto congreso sobre Interacción se celebrará entre el 3 y 7 de mayo de 2004 en la Universidad de Lleida. la mayoría de los diseñadores se conforman con que no existan restricciones en la comunicación. para aquéllos que queráis profundizar en este tema. Aquí pode- En Internet podemos encontrar mucha información acerca de la usabilidad. Aunque generalmente vienen unidos: IPO/HCI.ch. Hay muchos estudios que demuestran que los comportamientos de los usuarios con respecto a un sitio web determinan su usabilidad. Nº 90 53 . no existen unas "reglas" de usabilidad que se deban seguir para utilizar los elementos de una interfaz web. sería un desastre o ni siquiera lo podríamos poner en funcionamiento. cuadros de diálogo. Parte 4ª comprender el uso de la misma.Diseño web. tudia la Interacción Persona-Ordenador. Acompañado de un pedal de embrague (otro elemento de la interfaz).iso. Hay estudios que indican que la población que estuvo conectada a Internet en 2003 a nivel mundial ascendía a 450 millones de personas.com/manuales www. prescindir a la hora de crear una página web. ainda. se permite esta operación. Pues bien. esto indica que una interfaz es ante todo. Si el término lo llevamos a cualquier herramienta que usemos en nuestro PC.info puede ser uno de los más interesantes donde obtener información. sólo se piensa en los ordenadores.udl. pero la influencia y expansión de Internet han abierto un lugar creciente a los estudios sicológicos sobre sus contenidos y a la forma de actuar de sus "espectadores".ainda. Esto indica que no es simplemente un término del que se puede Procura ponerte en la piel de un usuario. necesitan o están de alguna forma relacionados con el contenido que se ofrece. ya sea una página web. Evidentemente. podríamos definirla como el intercambio de información entre personas y ordenadores.info griho. pero llevamos utilizando las interfaces desde la revolución industrial. la usabilidad y su estandarización vienen de una rama de Psicología Aplicada que es- www. ¿Quién no ve regularmente docenas de interfaces a la semana? En muchas ocasiones (como es el caso de los buscadores) repetimos la visita regularmente. en inglés HCI (HumanComputer Interaction o interacción entre máquina y persona).htm (Este último en inglés). Su objetivo es que este intercambio sea más productivo en aquellas tareas en las que cooperan humano y máquina. Aquí mostramos una serie de enlaces relacionados. Por deducción verás que el término se hace relativo. por ejemplo. es decir. Incluso dentro del mismo contexto. Algo tan sencillo como poner unas letras en el pomo de la palanca nos da una información esencial e indica las acciones necesarias para poder cambiar de velocidad. no es lo mismo desarrollar una web para un diseñador gráfico de 3D que para un diseñador de carteles de cine.es:8080/aipo www. Si a eso añadimos que si no fuese por la palan- Organización Internacional para la Estandarización. con una serie de adaptaciones que permite cambiar.usability. Dentro de los sitios web en castellano. A pesar de que existan estudios y especialidades en carreras universitarias. Podemos ver la importancia del diseño de una interfaz en algo tan cotidiano como un coche (cuya interfaz ha mejorado a lo largo de los años desde su invención). No es v ¿Qué el IPO? Este término es más conocido por sus siglas IPO. un lápiz por el ratón y el bloc de dibujo por la pantalla. Volviendo al concepto de la interfaz del coche. • Dónde se utiliza o en qué contexto. ca de marchas (elemento de la interfaz). Pues bien. una web puede ser más o menos usable dependiendo de una serie de cuestiones: • Para qué sirve la web (objetivo). habría que decir que una interfaz es una serie de elementos que nos permite manejar algo complejo de forma sencilla. Al final siempre es rentable emplear más tiempo en este punto.serco. Esto no significa que no haya una serie de principios que se debe seguir en cualquier diseño.com/trump/ resources/standards. enlaces. Interacción Persona-Ordenador Haciendo un poco de historia. si la interfaz de un coche no fuese clara. lo mismo desarrollar una web para un astrónomo que para un diseñador gráfico. tendríamos que preocuparnos de sincronizar el motor con la caja de cambios para poder ir marcha atrás. simplemente una interfaz es el conjunto de elementos que nos permite interaccionar con dicha herramienta (botones.

El usuario es quien va a medir realmente nuestro trabajo final (por lo general nosotros mismos.tres elementos. hace que sea comUna interfaz se compone de dos prensible para el usuario y permite partes: los elementos invisibles (lo resolver sus tareas (¿familiaridad?). menús. etc. • Mantenimiento perfectivo: mejoras que hay que realizar en la calidad del producto final (optimización de código. En materia de la usabilidad. Evidentemente. ¿A quién queremos atraer con nuestra interfaz? ¿Cómo. según su supone el 10%. mientras que el "look" es dad depende más de las convenciocómo se muestran los contenidos nes y estándares de la interfaz que dentro de ella (estructura. por muy estricto que haya sido nuestro trabajo de desarrollo. crecer y ampliar sus funcionalidades.Curso Para validar tus páginas web Tipo HTML CSS1 CSS2 URL Acción validator. podemos cuanto al "user model". Pues 100%. • 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 electrónico y casi la mitad de las transacciones no se llegaron a completar. Volvemos a repetirnos: cuanto más sencillo sea un diseño y más clara la información suministrada al usuario. no significa "sin calidad". s Como todo en esta vida. es muy difícil conseguir un diseño de página universal para todos los navegadores o dispositivos. sobre todo en la parte inicial del mismo. el el "feel" un 30% usuario sólo ve y el "user la punta del model" un 60%. Sólo podemos dar un consejo: prueba tus páginas sobre distintos navegadores. Esto es en función de los usuarios. Si añadimos que depende de nuestra interfaz web que ganemos dinero.w3c. cuándo y por qué usarán nuestros servicios? El tiempo final de desarrollo dependerá de la claridad de estos conceptos y de lo que queremos plasmar en nuestra web. Cuando digo sencillo. dad a la interfaz. será peor todavía. ya que la usabilimisma.org/Style/CSS/Test Tests para verificar hojas de estilo CSS1 jigsaw. pero lo que los cimienque se encuentos de un protra bajo el agua yecto web están se compone de basados en crear una estructura Dick Berry esuno de los expertos una interfaz funmultidimensio. quiere decir que la inter. tipografía. modificar trabajar con todas las posibilidades de un desarrollo web. podemos seguir la analogía que Dick Berry decir que es lo que le da funcionali(IBM) hace entre ésta y un iceberg. podemos trabajar directamente en un editor de texto o echar mano de las herramientas de diseño como El mercado de nuestra web El primer paso siempre es identificar el mercado que va a cubrir nuestro sitio web. utilizar herramientas de desarrollo evitará que necesitemos un conocimiento profundo del sistema operativo sobre el que trabajamos. 54 www. pero hay que aunar los cimos esto. Los expertos opinan Dentro de los expertos en esta enlaces. • Mantenimiento evolutivo: incor. el "look" bien. las páginas web deben evolucionar para adaptarse a nuevas tecnologías. que se denomina user model) y los Por importancia se podría establecer visibles (look & que dentro de un feel). pero podemos conseguir que su uso sea más agradable.más reconocidos por su trabajo socional para el bre interfaces hombre-ordenador. Para asegurarnos un mantenimiento con bajo coste de nuestro sitio web (tanto si lo hemos desarrollado nosotros. A la hora de trabajar. bases de datos. del visualizarlos en distintos navegadores. postulado.Hay herramientas como Macromedia Coldfusion permiten porar.). más fácil será aplicar cambios. acudir al consorcio internacional W3C. Aún así. visto en Internet: añadir en nuestra Home la línea típica que dice "Optimizada para XXXXXXX en 800x600". solucionar problemas de uso. Podemos encontrar herramientas de validación de código y. siempre es preferible acudir a lo sencillo para obtener un resultado rápi- Dentro del consorcio internacional W3C podemos utilizar herramientas para validar el código de nuestras páginas. pero es el peor consejo que se debe seguir. ampliaciones y mejoras.) Enfrentarnos a los cambios de un sitio web vendrá condicionado por la forma en la que se haya desarrollado. no hay un sitio web perfecto.pctoday.es . Quiere decir que la relación interfazusuario no estaba resuelta adecuadamente. cambio de sistema operativo. quizá debamos emplear más presupuesto en el desarrollo. que no siempre funcionan según las normas. Un presupuesto anual de mantenimiento debería ser al menos un 50% del coste inicial.w3. Si trabajamos directamente con código. etc.). Lo que influye de manera fundamental son las soluciones tecnológicas que vamos a emplear en nuestro desarrollo. faz es el "feel". iceberg (look & Podrás deducir feel). a no ser que nos dediquemos profesionalmente a ello). Desde mi punto de vista. como si hemos contratado a un profesional). ya que es la que se En esta entrega no vamos a entrar comunica con el usuario por sí en programación. habrá que evitar el uso de ciertos elementos de interfaz o hilar fino con las diferencias que surgirán al y eliminar partes para cubrir las nuevas necesidades del usuario.org/css-validador Verifica hojas de estilo CSS2 lenguaje que utilizamos y del navegador en el que se visualizará la página. colores.w3. Si traduindispensable. En esta evolución tenemos varios tipos de mantenimiento: • Mantenimiento correctivo: cambios que hay que realizar para corregir errores del software. etc. nal construida usuario.org Ayuda a convertir el código de las páginas a HTML válido www. La consecuencia de romper la familiaridad con el usuario es que nuestro sitio web no se visite. de su programación. Si la práctica o experiencia nos lo permite. donde obtendremos información de los estándares que debemos seguir en nuestros desarrollos. Sausage Hot Dog o Hot Metal Pro (que ya vimos en una entrega anterior). reestructuración del sistema. También está la opción más sencilla y que muchos hemos (nuevo hardware. etc. no podemos olvidar la cantidad de sistemas y navegadores existentes. do. principalmente. Mantenimiento de una web Evidentemente.

Todo lo hagamos en una página web repercute en el desarrollador y sobre todo en el usuario. Otra de las mejores páginas sobre usabilidad es www. ya que se utilizó más tiempo en introducir cambios que en escribir código. es más fácil deducir qué es lo apropiado o inapropiado en una interfaz. . ¿pero es tan importante y tiene tanto peso la usabilidad? Aunque sea para uso propio. es que está sobrecargada de información. Cuando decidimos crear una página web. Esta web recibe más de 17.. cofundador de N. Nielsen Group. Podríamos dar miles de consejos."Escenarios". Se utilizó una tipografía propietaria. Después de todo lo comentado. de este modo se evitan reacciones insospechadas de la interfaz. si una aplicación tiene aspecto de talonario. y no un simple mensaje o página con el error.com/tog. • Nuestra web debe proporcionar información de lo que suceda en las acciones (feedback). pios conseguiremos reducir los tiempos de desarrollo. • Conviene emplear técnicas como las de enfoque "persona" y creación de "escenarios" (www. Es fácil saber qué hará que el mantenimiento de una interfaz sea más o menos costoso. Lo más preocupante es que desde 1996 a 1999 se siguen cometiendo los mismos fallos. evitar tiempos de espera al usuario diseñando páginas ligeras.nngroup.html) explica los principios que son necesarios pa- • Aprendizaje: es necesario crear interfaces que no impliquen un largo proceso de aprendizaje. Consiste ni más ni menos que en restringir los perfiles de nuestros posibles usuarios.asktog.asktog. Nº 90 55 . Hemos hablado de principios. www.com) experto en usabilidad. a nadie se le ocurriría pensar que es para dibu- Si es tu trabajo profesional. com).html) a la hora de diseñar la estructura de nuestra web: . Tenemos que ser capaces de facilitar al usuario el alcance de sus objetivos con un mínimo esfuerzo y unos resultados máximos. siempre puedes contar con algún diseñador experimentado que te aconseje en los puntos clave.ainda. costes de mantenimiento. incluso rehacer todo el trabajo. Pensar y planificar ahorrará muchos quebraderos de cabeza. evitando los tecnicismos. Después de definir nuestro universo de usuarios. las páginas estaban saturadas de información. perteneciente a Nielsen Norman Group (Jakob Nielsen y Donald A.. Por ejemplo.useit.useit. se facilita su uso. Conocido por todos es la metáfora de la papelera de reciclaje: nadie pondría una canasta de baloncesto como icono para acciones de eliminación. sino que establecemos un posible universo de trabajo. Si llevamos a la práctica estos princi- v En www. Si un usuario entra en una web y no sabe por dónde empezar a leer. • Metáforas: deben existir similitud entre las funciones de la interfaz y los objetos de la vida real. tenemos que proporcionar opciones o soluciones. • Consistencia: las aplicaciones deben ser fáciles de comprender. En cierta ocasión la interfaz fue creada por una empresa de diseño con poca experiencia en interfaces informáticas. no de normas rígidas o reglas.com puedes ver consejos a seguir para diseñar una página web. contribuye a la comprensión de las funcionalidades de la página web.Diseño web. En definitiva. Aquí están resumidos: • Anticipación: debemos anticiparnos a las necesidades del usuario.com de Jacob Nielsen. no está mal que empleemos algún tiempo en estas cuestiones. Norman. • Reducción del tiempo de latencia: en lo posible. • Colores: hay que tener en cuenta la accesibilidad de un buen porcentaje de usuarios con problemas de distinción de colores (hemos dedicado toda una entrega a los colores). aumentaremos la calidad final del producto y crearemos una interfaz que nos asegurará muchas visitas. • Protección del trabajo: debemos asegurar que los usuarios no pierdan el trabajo por un error. Si se produce un error. • Legibilidad: al proporcionar contrastes en la interfaz. normalmente no se hace con propósitos generales y para todo el mundo. Bruce Tognazzini. realiza estadísticas anuales desde 1996 para informar de los 10 errores más frecuentes en el diseño web. es un experto en HCI. • Ley de Fitts: indica que el tiempo para alcanzar un objetivo mediante el ratón depende de la distancia y tamaño del objetivo (clicks de ratón para llegar a un punto o para realizar una tarea y éste debe ser mínimo). • Eficiencia: las páginas web deben ser productivas para el usuario. El mantenimiento tuvo un gran coste posterior. se abusó de los enlaces de texto en formato gráfico (GIF). se saltaron muchas reglas básicas del diseño de la interfaz. Evita la navegación inútil. no sólo para la propia web. Parte 4ª Además del coste económico está el coste humano. La única forma de definir un escenario es mediante entrevistas u Herramientas como Flash permiten resultados conjugables de tecnología. jar. En su página web (www.000 visitas mensuales. • Debemos evitar el trato hostil al usuario. • Autonomía: los usuarios tienen que sentir la familiaridad con el sitio web de forma que lo vean como un sitio finito y controlable. • Valores por defecto: de este modo se obtendrá una interfaz más ágil. tenemos que marcar los objetivos de nuestros visitantes para poder establecer el entorno de trabajo. La consecuencia positiva será la satisfacción de nuestros clientes. Se han dado casos bastante demostrativos de los problemas que puede ocasionar una interfaz de la página mal diseñada o con falta de rigor en su desarrollo. • Reversibilidad: una página web debe permitir anular las acciones que se realicen. • Al final eñ que manda es quien visita nuestra página.El enfoque "persona". Qué debemos hacer La inmediatez de crear una web puede hacernos caer en la tentación de pasar por alto los planteamientos que expondremos aquí. Jacob Nielsen (www. Si intentamos cubrir las necesidades de todos los usuarios estamos cometiendo un error. pero no hay que olvidar: • Seguir los principios de usabilidad. ra diseñar e implementar interfaces con éxito. La cantidad de errores que se comenten en el diseño web es mayor que las recomendaciones que se pueden dar. que serían imposibles de cumplir dada la diversificación de plataformas en las que se visualizaría una web. usabilidad y gráficos multimedia sofisticados.info/persona _escenarios. lo que indica la importancia y preocupación por crear una interfaz correcta. • Limitemos las acciones de nuestra página al objetivo de la misma.

el usuario pasará al siguiente punto en el orden de lectura que se muestra en la imagen de la derecha. sesiones expiradas. imprimir la página correctamente y guardarla en el disco duro (depende del navegador). Debemos tener muy claro para qué solicitamos la información y agrupar los datos que se van a validar. • Reduce el peso de tus páginas adaptándolas lo más posible al código HTML. Impiden conocer la estructura de la web. actualizaciones. hay que tener un poco ciones (algunos expertos indican como máximo siete). etc. • HTML tiene suficientes recursos para diseñar una web sofisticada. Divide la información en más páginas y no intentes aglutinar todo en una. aprovéchalos. Conviene evitar el uso de menús con rollover.) reducen la velocidad de conexión. Los botones han de tener formas. Será más intuitivo y el usuario los reconocerá. • Animaciones cíclicas inútiles: retrasan la visualización de la página y distraen la atención del usuario. • Evita que la información esté muy fragmentada. su última visita.pctoday. puerta.es . escalera. número. Los usuarios terminan gravitando por la página en busca de hipervínculos. sólo el 25% de los usuarios recuerdan el El enfoque persona nos ayudará a adaptar el diseño al banner visto en tipo de visitantes que vamos a tener. • Evita que la página de inicio sea para usuarios registraDel amarillo al rojo. Si son menús de coherencia. vídeos. • Textos deslizantes (efecto marquesina): la lectura de un texto que se desplaza es incómoda y limita la atención sobre la página. • Errores de código: otro de los problemas que no debemos dejar pasar en una web. • Cuando usemos combos deberían ser de selección única. de imágenes homoen cifras absolutas. Algunos autores no los recomiendan. yados de los enlaces. No abu• No es aconsejable quitar los subrases del color. Sus formas también influyen: es más fácil hacer click en un botón cuadrado que en uno redondo. calle. • La tipografía puede estar perfectamente limitada a la que te ofrece el sistema. que tenga la funcionalidad que espera. • No abuses de los gráficos. sonido. pero es necesario pensar en el usuario. der a ella. etc. indica que se dedica más atención. para así ayudar al usuario. • En los enlaces de texto. más rojo = más atención. • Por defecto es aconsejable utilizar los enlaces y botones del sistema. hay que indicar claramente el destino mediante la etiqueta TITLE. A veces es mejor un solo campo. búsquedas que no ofrecen resultados. • Los botones de la interfaz han de tener un tamaño proporcionado. procura que el formato sea siempre ños de las fuentes en porcentaje y no comprimido. • Cuando se usan las hojas de estilo (CSS). Simplemente.Curso observando el trabajo que realizan los usuarios a los que vamos a dar servicio. • Combinaciones ilegibles de texto y fondo. Si los usamos. El usuario no va a valorar desplegables. • Ruptura de continuidad dentro de una web: operaciones que obliguen al usuario a desviar su atención (descargar plug-ins. entre menos colores. sería conveniente reducirlos a un logotipo. Algo de lo que no gozan muchas de las webs que podemos encontrar en la Red: la posibilidad de elegir entre varios idiomas de visualización. ¿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 en cuenta: • Uso de marcos: en determinados navegadores no funcionan bien. es mejor especificar los tama. Qué errores no hay que cometer Lo primero: el tiempo es muy importante para todos nosotros. Qué hacer en la interfaz Después de un chequeo general de la web. géneas y de corta duración. páginas caducadas o trasladadas. lo aconsejable es que si nuestra web está a la última. que es donde se centra la atención. Si tu web no está enfocada a este fin.• Si incluyes vídeo en tu web. Aquí incluyo los banners. piso. El error típico de la dirección fragmentada (según para que uso): tipo de calle. Más dos o que cuesamarillo = menos atención. 56 www. y lo fundamental en Internet es ahorrar tiempo (sobre todo porque el coste de las comunicaciones en España sigue siendo caro). puedes permitirte ciertos lujos para hacer tu web más vistosa o con ciertos efectos que la hagan atractiva. • Es recomendable al 100% acogernos a los 216 colores estándar del siste- Las normas son flexibles . Esto puede parecer contradictorio cuando lo que se ve en Internet está lleno de imágenes.. colores y estar delimitados. • Uso de direcciones complejas: sobre todo cuando quieres aconsejar una página a un amigo. son más cómodos los que se abren al hacer click. La te dinero acceflecha indica el orden de lectura. • Los menús han de incluir pocas op- • Texto parpadeante: resta importancia visual al resto de los elementos de la página. tes de entrar en florituras. • Páginas con errores: enlaces rotos. más se comprime. pero todo en esta vida es relativo. Lo más seguro es que nuestro visitante se marche a otra de las cientos de webs que le ofrecen la misma información. Han de forma en cualquier navegador (colocumplir su función claramente anres seguros). en lo posible evitarema que se visualizarán de la misma mos los de autopromoción. • Usa páginas de tamaño fijo. valorará no se cierren si el usuario no quiere.

es. Este tipo de evaluaciones es complejo. tiempo de realización y análisis. pero que la mayoría de las veces no incluye criterios de usabilidad. Ayudar a reconocer. nales. se Sin hacer un repaso exhaustivo hace imposible volver a cargar la vemos lo siguiente: página.aol.Diseño web.com web. Uno de los mayores expertos mundiales en el estudio de En este tipo IPO/HCI es Jakob Nielsen. aunque sin mostrarlos dad de recursos. • Cuando se produce un error. discernir si una web es usable o no.com/tools/validator) que nos permite introducir una sentación es oscura. Nº 90 57 . diagnosticar y • Evaluación heurística por exsolucionar errores. • Banners pesados. ya que implica más preparación. sin entrar en detalle. usabilidad.info/ceguera_banners. 7. sólo para los desarrolladopero es peor enfrentarse a la factura res. Aquí tienes un enlace donde podrás encontrar muchas de estas herramienHay sitios web que nos permiten medir la velocidad de tas: www. s • Muchos enlaces están rotos. Visibilidad del estado del sistema. pero proporciona mucha información. Prevención de errores. 9. • Elementos de apariencia publicitaria: la "ceguera a los banners" (www. El tiempo empleado reseñamos una. que por sus caracpor una conexión de banda terísticas podemos considerar una ancha de 256Kbps a las siete de página web pésima: North Royalton la tarde para cargar la página Police (en Ohio).com/directorio/ /informacion. • Textos intermitentes. No obstante permite ahorrar trabajo posterior. buenos.desarrollo nuestra conexión.ainda. y en el conjunto genenas buenas y cuáles malas. Se registran el alizar por un usuario o por un rendimiento y la opinión de los misequipo multidisciplinar (incluyenmos en una reunión final donde se do los desarrolladores y expertos ponen en común estos datos. (cada experto trabaja por separado).com/ supera los 15 segundos. no sólo la coherencia. que obliga a permitido por la herramienta de desplazarse por toda ella en búschequeo online). Esrios para que exista un comportate tipo de evaluaciones se puede remiento espontáneo. de pruebas no se da ninguna pauta a los usuablecidos durante el diseño web. utilizar. • El texto en marquesina que aparece debajo del título • Después de utilizar un validador de la página no aporta nada. Es el método de menor coste y como mínimo se emplean tres evaluadores (según Nielsen de tres a cinco evaluadores es suficiente). Analizan página por página siguiendo una lista de criterios y redactan un informe posterior que ponen en común. sumen mucho tiempo y gran cantipaso a paso. NRPolice/nrpdhomepage. URL para validarla. 3. en usabilidad). • No hay una distribución de la información que permita en un solo vistazo saber qué contiene la págiUna web que incumple bastantes criterios de na y su objetivo.htm) hace que muchos usuarios ignoren contenidos de la página. Una empresa tarda de forma abierta a los usuarios fien decidirse a realizar estos tests. ma. podemos llegar a un resultado final y detectar hasta un 42% de problemas de diseño graves y un 32% de problemas menores. Consistencia y estándares. • Cambios de resolución del monitor: nadie cambia la resolución del monitor por una página.4. con• La apertura automática (Popups)de nuevas ventanas en el navegador disgusta a los usuarios. guir unas pautas de usabilidad son 5. web es usable Todos los consejos ofrecidos para se. Estética y diseño minimalista. de HTML • La fotografía utilizada como pre(www. exámenes o aproximaciones pa.tdatacenter. más de 68 errores (el máximo totalmente continua. Estos errores pueden provocar la huida automática de nuestro visitante. • Faltan demasiadas imágenes que el explorador ha sustituido por el icono de imagen no localizada. Por ejemplo testacceso. se rea• Simulación cognitiva: consiste liza una puesta en común de todos en la puesta en práctica 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. Parte 4ª Estudio rápido de una web Hay muchos ejemplos con los que • Hay demasiados espacios vacíos podemos ilustrar cuáles son págien la web. El trabajo de estos expertos en usabilidad se centra en la interpretación de las acciones realizadas por los usuarios y su propia navegación por el sitio web Antes de arriesgarte. members. queda de menús que orienten al Podríamos continuar. Reconocimiento sobre recuerdo. Emparejamiento entre el sistema y Cómo saber si una el mundo real.htmlhelp. bas. programacion/html/ criterios): consiste en utilizar prue. Flexibilidad y eficiencia de uso. • Logotipos: deben tener una resolución y peso adecuados incluso para las conexiones más lentas. • El fondo utilizado dificulta la visibilidad de los textos empleados. Control y libertad del usuario. cuenta con las opiniones y consejos de alguien experimentado en estos temas.html. complacencia de la marca o estructura empresarial. 2. Los diez criterios más conocidos son: 1. se obtuvieron • Toda la web es una única página.• Test con grupos de usuarios: ra llegar a una solución.validadores_html.html. sin conocer unos datos base exactos. Ayuda y documentación. pertos (también denominada por 10. De esta foreste tipo de pruebas son caras. Aquí ral “pesan”. pero lo más usuario sobre la localización de sencillo es que juzgues por ti mismo alguna información. Existe también una evaluación automática que se realiza con herramientas de validación. Se utilizan los escenarios estaque nos pueden hacer pasar los usuarios. Hay diversos métodos que se pueden 8. pero también hay que saber 6. • Basar la interfaz sólo en su aspecto estético. Finalmente.

Afectan principalmente a los elementos de textos. Integración multimedia: Macromedia Flash y Action Script. Este no va a ser un artículo crítico de la política del mundo sin barreras que puede estar haciendo el ministerio de trabajo y asuntos sociales. sigue estando “adaptado” mayormente a los que podemos disfrutar de gráficos y sonidos impactantes y. el mundo real siempre se ha basado en esos términos de forma literal y siempre que pensamos en algo accesible. Evaluar la accesibilidad. Bajo estas premisas. Guía del curso 1. donde no haya obstáculos y todos tengamos las mismas oportunidades. Consejos para diseñar una web accesible. Herramientas para el tratamiento de las imágenes y el color.w3. PC Today nº 89 4. Principales elementos de las páginas web. Accesibilidad. y accesible es aquello “que tiene acceso”. “de fácil acceso o trato” y “de fácil comprensión. Mapas de imágenes. inteligible”. Imagen animada y películas. Trabajando con Sausage Hot Dog. Tecnologías multimedia en la Red. Introducción a las herramientas WYSIWYG. gráficos y uso 52 www. Psicología del color. aun siendo más moldeable y maleable que la vida real. ¿Qué es la usabilidad y por qué se debe tener en cuenta? Qué hacer y no hacer en el diseño web. nos imaginamos grandes avenidas. ¿Qué se entiende por accesibilidad? Deficiencias y políticas. de información. Deficiencias que limitan el acceso a la Red Podemos distinguir distintas deficiencias y minusvalías que condicionan el uso de los sistemas informáticos: • Visuales. Música y sonido. Los menos nos acordamos de los que van en silla de ruedas. Introducción al diseño web. mucho aparcamiento y centros comerciales.org/People/Berners-Lee/) dice: “El poder de la Red está en su universalidad. Programación. inventor de la World Wide Web y presidente del W3C (www. ante todo.Curso Accesibilidad Siempre hemos oído hablar sobre “un mundo sin barreras”. Planificar y organizar el sitio. PC Today nº 91 6. Razones para conocer los principios de la programación. Todos sabemos y comprendemos las dificultades que entraña pasear por la calle a las personas con discapacidad. El color y las imágenes. aun siendo el mundo más maleable y moldeable. En el mundo virtual también existen dificultades y barreras. Vamos a pensar en ese mundo virtual que.es . PC Today nº 92 7. The GIMP. PC Today nº 90 5. PC Today nº 93 a Real Academia de la Lengua Española la define como “cualidad de accesible”. Imágenes: tipología y características. L 3.pctoday. Timothy John Berners-Lee. El diseño inclusivo. PC Today nº 87 PC Today nº 88 2. Usabilidad. El acceso para todos sin tener en cuenta sus discapacidades es un aspecto esencial”. los que tienen ciertas minusvalías… y ¿cómo no? de nuestro amigo al que le compramos de vez en cuando un cupón. Herramientas para el diseño web. el color en la web. Cómo saber si una web es usable.

por ejemplo. en ayuda para otros. con sonido y texto para la información contenida. ni rat&oacute. En cuanto al software. tra• “Estimular el intercambio de inforbajos. sino conocerlas para obtener mejores resultados. re.. Fundación SIDAR Una de las páginas más interesantes en este foro de diseñadores. Principalmente afectan al uso de elementos que requieren movimientos.w3. la fundación permite la particien Internet”. cer todo lo existente sobre accesibiliSus objetivos principales: dad a la Sociedad de la Información y • “Estimular el diseño accesible principalmente a Internet. se utilizan ampliadores de imagen. Y sobre todo.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&eacute. las administraciones deben hacer políticas de dos estos problemas y que en sus herramientas finales exista la flexibilidad y la configuración propia para cada caso. Una interfaz accesible para daltónicos. Para paliar estas deficiencias se utilizan sistemas de reconocimiento de voz y dispositivos que sustituyen al teclado o ratón. aprendizaje y comunicación. a su vez. Pensamos que la accesibilidad está ligada exclusivamente a personas con minusvalías. existe la necesidad de proporcionarles las mismas oportunidades de acceso a estos serviSeminario Iberoamericano sobre Discapacidad y Accios. tanto en el orden sistema. bli. lectores de pantalla. y más en Internet. Para estos usuarios deben utilizarse interfaces claras y sencillas (sobre todo usables).s de a&ntilde. En este sentido. obtención de recursos. Cualquier tenidos de la Red. Además de (Diseño para Todos) en la Red y proporcionar información sobre legisla presencia de la discapacidad lación. investien castellano que podemos encongadores y colaboradores. los expertos en desarrollo deben “ponerse las pilas” para diseñar aplicaciones que sean accesibles para todos. • Auditivas. como son el teclado y el ratón.s sofisticado del mundo. s Interfaz simple Aquí proponemos un ejemplo de código HTML de una página de noticias: Los elementos más cotidianos se convierten en ayuda para unos y en barreras para otros. herramientas y normas fundación que se centra en la de accesibilidad en Internet”. pieza. dispositivos con salida en Braille. etc.</p> <p>Bla. 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. Impiden o dificultan oír las señales de alerta o alarma y todos los elementos relacionados con el sonido. en habla En una sociedad mundial en donde hispana. una página web accesible para un invidente deberá tener una interfaz hablada. pantalla. pero una interfaz bien diseñada en cuanto usabilidad y accesibilidad.org/WAI). mación e investigación. Afectan a la comprensión.Diseño web. mejorará para el usuario tradicional. charset=iso8859-1"> </head> <body> <table width="78%" height="406" border="1"> v Todos tenemos derecho a la información sin barreras de ningún tipo. trar en Internet es la web de la funLo más interesante y que siempre se dación SIDAR – Acceso universal. • Motrices. si les añadimos las barreras informáticas (elementos de hardware o software) que crecen continuamente...n. Clientes diferentes requieren necesidades distintas. elemento. este contexto. muchas empresas apuestan por sus inventos y sustitutos de hardware. sobre la evolución de las más de 175 millones de usuarios están afectados por alguna discapacidad. agradece es que el idioma de comuSu principal cometido es dar a cononicación es el español. • Cognitivas y de lenguaje. Desde el punto de vista del hardwa<tr> <td height="30" colspan="2" bgcolor="#CCCCCC"> <h4><font color="#000000">Diario del PC. dispositivo técnico como en el ético y en el de o servicio que se pueda utilizar en la estilo. surge el foro DISTEC dentro de la directrices. No requiere teclado.. En este caso se usan sistemas de conversión de los archivos de audio a texto. Sobre cesibilidad en la Red. accesibilidad y fomentarla para dar un acceso igualitario a la información. Tecnología de la Rehabilitación (TR) • “Contribuir a la calidad de los cony en la Ayuda Técnica (AT). cualquier elemento por su diseño (incluso el más básico) se convierte en una barrera para algunos discapacitados y. etc. requiere que los colores rojo y verde no se empleen juntos. llegan a convertirse en una verdadera preocupación para los profesionales y sobre todo para las entidades gubernamentales. Para reducir esta dificultad. 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”. Nº 91 53 . A estas deficiencias. Todo es configurable a las necesidades del usuario. L&iacute.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&aacute. Crear aplicaciones accesibles para todos no implica renunciar a las nuevas tecnologías. por eso los diseñadores pueden anticiparse a to- <!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4..neas del d&iacute.01 Transitional//EN"> <html> <head> <title>Ejemplo de columna</title> <meta http-equiv="Content-Type" content="text/html. Parte 5ª del ratón. pación activa en sus actividades.

es. pero puede ser una de las miles que nos encontramos en Internet. vi.0).a romperse al a&ntilde.Curso Validación de una web Es aconsejable utilizar métodos de validación desde el principio del desarrollo de una web. táctil. ni rat&oacute. • Utiliza una herramienta de accesibi. ya que habría que detectar si un usuario está accediendo mediante un navegador convencional.. pero si lo realiza linealmente la interpretación será errónea. • Sitios con contraste de colores pobre. Si un invidente visita la página con un lector de pantalla. El proceso incluye varios pasos: <h1><font color="#003399">El mejor PC del • Definición de requerimientos. software mientas verifican todos los prode magnificación (MAGic 9. será más fácil corregirlos. . lecdor. Si puedes lador. Para fateclado.</p></td> </tr> <tr> <td bgcolor="#F4F4 F4"><img src="imagenbuena.es .pctoday. Algunos de los métodos de validación más importantes son los Ejemplo de una web accesible y con mucha que exponemos aquí: información: Ayuntamiento de Pinto accesible. <tr> <td bgcolor="#F4F4F4"> • Modelado del usuario.adir alguna imagen. patrones de conducta. • Tablas difíciles de interpretar cuando se alinean (el ejemplo). Cuando el lector está preparado para leer tablas lo hará perfectamente. contar con la ayuda de un editor • Utiliza distintos navegadores (e experimentado. • Ausencia de información alternativa para usuarios que no pueden acceder a los marcos o a scripts. se buscan alternativas para di• Ausencia de texto alternativo en los señar interfaces adaptables dinámipuntos sensibles de mapas de imagen. Son más fáciles de diseñar y cumplen mejor los objetivos de la accesibilidad. blo. s <td width="37%" valign="top" bgcolor="#F4F4F4"> <p>la noticia pero podr&iacute.Sonidos no cargados documentos.Sonidos y gráficos cargados • Invita a personas con discapaci. pero es más funcional para una interfaz hablada. • Verifica la sintaxis del lenguaje de • Presta atención a la ortografía y programación empleado y las gramática. que revise la claincluso antiguos) con: ridad del texto escrito. </body> ciones. Aunque la definición de requerimientos se hace <p>Por fin se encuentra en el merpensando en el usuario medio.adir alguna imagen. hay cado el ordenador m&aacute. cilitar el contexto global de estos gruTodo es configurable a las necesipos de usuarios. etc. Ante la dificultad de satisfacer las necesidades sual... la disposición es bastante escabrosa. L&iacute.• Diseño conceptual.01 Transitio- Muchas empresas apuestan por hardware que sustituya a dispositivos de entrada/salida tradicionales. limita<p>Bla. Quien utilice un sintehojas de estilo.s soque definir perfiles y así poder satisfafisticado del mundo. las necesidades del a&ntilde. rios. No requiere cer las necesidades de todos. te proporcionarán .browser. etc. hojas de estilo y lidad automática y una herraapplets no cargados mienta de validación del navega• Utiliza un navegador por voz. pero las barreras que ción-persona. Un código más efectivo sería: <!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.a: 25 de abril del rio (conocido como DCU).n. blemas de accesibilidad. pueden encontrar en las páginas web las personas con discapacidad física. Si detectamos los errores desde el principio.Marcos.os de espera se pone a la usuario medio. 54 www. bli. scripts. charset=iso8859-1"> </head> <body> <table width="55%" height="524" border="1"> <tr> <td bgcolor="#CCCCCC"> <h4><font color="#000000">Diario del PC..Sin ratón gran ayuda. Esto acarrea dificultades técnicas.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 tamaño cuatro veces más </table> grande que el normal. visualizador pequeño.</p> <p><img src="imagenbuena.</p> <p>Y en esta parte de la tabla se sigue la noticia pero podr&iacute. auditiva y cognitiva incluyen: de interacción de todos los usua• Imágenes sin texto alternativo.a romperse al a&ntilde. tizador de voz puede malinterpre• Utiliza un navegador sólo-texto tar el resultado de la lectura. etc. pantalla. La alternativa es intentar hacer páginas lo más lineales posible. • Uso incorrecto de los elementos estructurales en las páginas.</p> ticas comunes (información. El formato de la interfaz de este ejemplo podríamos encontrarlo en cualquier web de noticias. Diseño inclusivo Bajo este término subyace una metodología que se basa en el diseño de aplicaciones centrado en el usuaEl resultado no parece tan brillante. </html> Como en la usabilidad. el contexto de uso y venta </h2></td> los requerimientos técnicos para sa</tr> tisfacer estas necesidades. • Sonidos no subtitulados o imágenes no descritas. hay que establecer escenarios para aunar interacEs un ejemplo. camente a las necesidades de cada uno.neas del d&iacute..ayto-pinto. navegador de audio.Gráficos no cargados dad a revisar el resultado de los . En esta premisa se especifican los mercado</font></h1> objetivos del producto que se va a <h2>Despu&eacute. Asegúrate de que las herrator de pantallas (JAWS).. (por ejemplo Lynx • Revisa el documento para obtener http://lynx. y adaptar la forma y presentación de los contenidos conforme se suceden. Todo el 2004</font></h4></td> proceso de diseño asume la partici</tr> pación del usuario y de los expertos en <tr> <td bgcolor="#E2FBFE"> discapacidades. se buscan caracterísdades del usuario. nal//EN"> <html> <head> <title>Ejemplo de columna</title> <meta http-equiv="Content-Type" content="text/html.org) o un emuclaridad y simplicidad.s de desarrollar.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.).

s Nº 91 55 . El ejemplo que exponemos es la firma Irdata. • Prioridad 3. problemas motrices. es un buen ejemplo de una web diseñada para personas con una discapacidad intelectual.. Asegura al usuario el control sobre los cambios de los contenidos tempodependientes. Podemos encontrar muchas empresas que apuestan por una sociedad igualitaria mediante sus inventos. software de rehabilitación para personas con Todos los que nos dedicamos a la Sociedad de la Información debemos poner nuestro granito de arena. Asegura la accesibilidad directa de las interfaces incrustadas. podemos jactarnos de que la tecnología es digna de mención. Exponemos los puntos de verificación con Prioridad 1 que son los más importantes. En la segunno de acceso a página de inicio"> da llega un amigo que le invita al ciTexto explicativo de enlace <A HREF= ne"</NOSCRIPT> "paginainicio. 2. www.w3. 12.) o por situaciones que dificulten condiciones de acceso normal (centros de operación poco iluminados.Diseño web. El desarrollador debe satisfacerla. Utiliza soluciones provisionales. A su vez. 5. también conseguiremos que la web sea más accesible por otros dispositivos que navegan en Internet (móviles.gif" ALT="Enlace a la página de transmitida mediante colores también inicio"></A> esté disponible sin color (por contexPágina de texto explicativo ampliada to o marcadores). hay muchas páginas adaptadas. cada punto de verificación tiene asignado un nivel de prioridad: v I+D en España Aunque en España el I+D no se prodiga mucho. No te bases sólo en el color. Hay un error que no hay que cometer: hacer una web accesible. 8. <IMG SRC="estadístico. En cuanto al software. surge con la finalidad de facilitar a las personas con discapacidad intelectual el acceso a las nuevas tecnologías y al uso de Internet. Utiliza marcadores y hojas de estilo de forma apropiada. las recomendaciones y los ejemplos para los puntos de Prioridad 2 y 3 se pueden consultar en la página www. Puntos de verificación que el desarrollador tiene que satisfacer.org. habrá personas que encontrarán muchas dificultades para acceder a la información. Siguiendo estas recomendaciones. podría ver un texto parpadeante en lugar de este párrafo</APPLET> Texto para imágenes de efectos de texto <IMG SRC="WAI. Muchos colectivos necesitan formar parte de la “internetización”.atzegieskuetara.gif" ALT="Iniciativa de accesibilidad a la Red"> Uso del elemento NOSCRIPT para describir cualquier código incrustado <SCRIPT type="text/javascript">…código de un script que visualiza una tira cómica como consecuencia de un evento. • Nivel triple A: incluye las prioridades 1. Hardware para acceder al ordenador mediante los movimientos de cabeza. Existen catorce recomendaciones que se aconseja seguir: 1. cas. Para facilitar la referencia por otras organizaciones. Según los elementos que se vayan a utilizar en el diseño de nuestra interfaz. exploradores convencionales. presentación y estructura de los elementos. Ofrece alternativas equivalentes para el contenido visual y sonoro. Otro proyecto denominado NI4. • Prioridad 1. etc. WebTV. 9. Utiliza las tecnologías y pautas W3C.gif" LONG. entornos con mucho ruido.w3. Proporciona información de contexto y orientación. la especificación tiene tres niveles de adecuación y son: • Nivel A: incluye los puntos de verificación de la prioridad 1. algunas personas serán incapaces de acceder a la información.htm: • Elementos de interfaz en general: . Pautas para crear una web accesible Todo está muy bien. Texto alternativo a imágenes o animaTexto explicativo de una imagen incluida en un objeto <OBJECT data=" paginainicio. Cada recomendación incluye uno o dos puntos de verificación que describen cómo aplicar esa pauta a las características particulares de las páginas web. • Prioridad 2. 11.).htm"><IMG SRC="pagi. personaje mira ciones <IMG SRC="pagini. Diferentes usuarios necesitarán diferentes formas de presentación.org.por una ventana al vacío. el Estos iconos nos resultarán familiares a partir de ahora.Proporciona un texto equivalente para todos los elementos no textuales.Identifica claramente los cambios DESC="explica_gráfico.gif " type="image/gif" height=100 width=100>Aquí una pequeña descripción o enlace a una página explicativa</OBJECT> Texto explicativo para un applet <APPLET code="textoparpadeante. 6. agendas electróni- 7. 10.en el idioma original del texto del dofico estadístico en barras"> cumento y en cualquier texto equivalente El gran inconveniente del hardware adaptado es el coste: un ratón para tetrapléjicos puede salir por 745 euros. de lo contrario algunas personas hallarán dificultades para acceder a la información. pero también elementos de interacción adaptados.htm" ALT="Grá. si no. Identifica el idioma empleado. 14. etc. Para obtener más información.org/ WAI/WCAG1-Conformance. software que sustituye los clicks del ratón a través de una imagen. y sólo tendremos que añadir el código apropiado que suministra la dirección www. Proporciona mecanismos claros de navegación. Asegúrate de que los documentos son claros y simples. El desarrollador puede satisfacerla. 4. 13. Diseña para la independencia del dispositivo. estos son los criterios que se deben seguir basándonos en el nivel de prioridad de los puntos de verificación. Integración de personas con discapacidades cognitivas y de lenguaje.gif" ALT="Ico. 2 y 3. pero ¿cómo podemos poner en práctica la accesibilidad en nuestro diseño de páginas web? Lo primero que hay que tener claro es que las pautas establecidas por el consorcio W3C/WAI están pensadas para los desarrolladores de contenido y para los desarrolladores de herramientas. visita la página www. no implica que no sea atractiva. Asegúrate de que las páginas que incorporen nuevas tecnologías se transformen correctamente.ni4. class" width="128" height="32" alt="Applet de Java: texto que parpadea">Si utiliza un explorador con Java habilitado. 3. De lo contrario.</SCRIPT> < N O S CRIPT>En la primera secuencia..Asegúrate de que toda la información nainicio. etc. pero en concreto la del proyecto Atzegi.org/WAI/wcag-curric/ overchk. Parte 5ª Si seguimos estas recomendaciones podremos colocar unos logotipos que definen el nivel de adecuación de la página web. La solución implica separar contenidos. • Nivel doble A: incluye las prioridades 1 y 2. Crea tablas que se transformen correctamente. patrocinado por la Diputación de Guipúzcoa y de la Caja Kutxa. que dispone de varias soluciones para resolver el trabajo en el ordenador para personas con problemas motrices. El seguimiento.

html. w 3 . • Para las pruebas hay que disponer de los distintos navegadores y sus configuraciones. ponlas en práctica.gico es un acrónimo de Hojas de Estilo para la Revisión de la Accesibilitas de verificación online. crear una página accesible.c u r r i c / mmsoftwr.rramienta viene como consecuencia del lanzamiento de Edipo (Editor Personal ginal) inaccesible. El nombre de la hece tan a menudo como la página (ori. cesibilidad y usabilidad de una web durante su desarrollo. • Es la única forma en la que podemos revisar las adecuaciones de textos alternativos. Era necesaria la mientas de verificación automáti. colaboración con Emmanuelle Gutiésea accesible.existencia de una utilidad “hermana” ca.*. Si esto no es posible. Generalmente se utilizan herra.htm" title="Marco con la vista de contenidos"> </FRAMESET> <FRAME SRC="f4. Dentro de la página web www.Organiza el documento de forma que pueda leerse sin hojas de estilo. Los tres formatos o lenguajes que admiten una pista de audio descriptiva son: Quickti• Se comprenden mejor los problemas de la página. será necesario proporcionar un vínculo a otra página al. • Multimedia: .Titula cada marco para facilitar la identificación y navegación de los mismos. . se ternativos o programas que simulen puede ver el código.org/cover/iso 639a. applets u otros objetos de programación. La utilidad La mejor forma de verificar la ac. Si optamos por una revisión manual. me de Apple. El nombre mitolówww. <FRAMESET ROWS="20%.tawdis. Mediante la revisión automática obte.<SPAN lang="fr"> "Allons.pctoday. identifica las cabeceras de fila y columna: <TABLE border=1> <CAPTION>Ejemplo de una tabla de datos sencilla que identifica cabeceras y filas. Uso del elemento langMadre. evita provocar parpadeo en la pantalla. para traductores.En las tablas de datos.es .Si finalmente no puedes Herramienta de creación de hojas de estilo Edipo. Es decir.htm" title="Marco con la tabla de contenidos "> <FRAME SRC="f3.oasis-open.</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.htm" title="Marco de título y barra principal de navegación"> <FRAMESET COLS="20%. Podemos utilizar navegadores al. • Tablas: . información de los gráficos. excepto donde las zonas sensibles no puedan definirse con una forma geométrica. aunque el resultado positivo de las basada en la aplicación de hojas de esticomprobaciones no implica que una lo para facilitar la revisión de la accesibiweb sea accesible.sibilidades de nuestra hoja de estilo. utiliza marcadores para asociar las celdas de encabezamiento y las celdas de datos. veremos ventajas sobre la automática: 56 www. Los códigos de representación de los idiomas se encuentran en www.Asegúrate de que los equivalentes de un contenido dinámico se actualicen cuando cambia.mas. Madame plaisante!"</SPAN> .consta de una página con opciones y cesibilidad de una página web es si. diseñadores y desarrolladores. o descarsu funcionamiento. etc. proporciona información equivalente en una página alternativa accesible. Hera localiza los errores de las nemos un funcionamiento rápido y siste. . pero la interpretación de los re. tiene que ser posible leerlo. copiarlo y pegarlo en cualquier editor de texto.Curso right"> </FRAMESET> • Applets y scripts: .org/recur/aplica/index. proporciona una descripción sonora de la información importante de una presentación multimedia. Lo puedes encontrar en www.htm).Proporciona mapas de imagen controlados por el cliente en lugar de por el servidor. SMIL de W3C y SAMI de Microsoft (más información en w w w. • Las pruebas emulando ciertas características pueden ser difíciles de realizar si no se dispone de hardware especializado o si la formación del equipo de revisión no es la adecuada. • Exige el juicio personal del revisor. www.otra con el resultado visual de las mismular como lo haría un discapacita.unos puntos de control. etc. (leyendas).garlo como un fichero. • Permite comparar distintas soluciones mediante pruebas reales.Asegúrate de que las páginas siguen siendo utilizables cuando se desconecten o no se admitan los scripts. . creadas para ello e indica qué es lo Proporcionan un análisis global de la que hay que revisar con respecto a página. . de Opciones de estilo). La ventaja de utilizar las hojas de essultados es compleja y exige conocer los tilo es que facilita la revisión de la acprincipios básicos de accesibilidad.Hasta que las aplicaciones de usuario permitan controlarlo.Para toda presentación multimedia dependiente del tiempo (película o animación).Fundación Sidar.htm" title="Marco secundario de navegación y copy- TAW es una herramienta de verificación online de accesibilidad en castellano. o r g / WA I / w c a g . Una vez elegidas las opciones y podo.30%"> <FRAME SRC="f1.Para las tablas de datos que tienen dos o más niveles lógicos de cabeceras de fila o columna.net. títulos de marcos. pregunta que a dónde va.Hasta que las aplicaciones de usuario puedan leer automáticamente el texto equivalente de la banda visual. diseñada y Este es el resultado del código descrito con cabeceras de tabla.*. que implica falta de objetividad en algunos aspectos. ."> <FRAME SRC="f2. especialmente para la equivalente (o funcional) y se actuali.php.sidar. Dentro de la web lidad de un sitio web. • Marcos (frames): . • Imagen y mapas de imagen: . sincroniza alternativas equivalentes (subtítulos o descripciones) con la presentación.Utiliza el lenguaje apropiado más claro y simple para el contenido de una página web. </TR> </TABLE> .org/edipo/selector. Está diciendo. para la creación Evaluar la accesibilidad de hojas de estilo personales. ya que se actúa directamente con el diseño.Proporciona vínculos de texto redundantes con cada zona activa de un mapa de imagen del servidor. si un documento HTML se interpreta sin hoja de estilo asociada.dad.net hay diversas herramien.php podemos encontrar toda una serie de recursos dedicados a la accesibilidad: aplicaciones para usuarios de la Red.sidar. • Si no hay alternativas: .desarrollada por Carlos Benavídez en ternativa que use tecnologías W3C.tawdis. Pero también tiene sus problemas: • Es un proceso costoso y requiere tiempo. Por citar algún ejemplo de herramienta manual tenemos a Hera. tenga información rrez y Restrepo.páginas aplicando unas hojas de estilo mático (son los verificadores online).

En la Fundación Sidar se dan las claves para parametrizar los navegadores más utilizados: Internet Explorer. página de inicio se producen suficientes incumplimientos de las recomendaciones de accesibilidad. siempre hay una serie de principios e instrucciones para configurar cualquier navegador para usarlas correctamente. que a largo plazo sec508/508standards. información para todos En cuanto a la Unión los ciudadanos (artículo Europea. Satisla información del documento. s local público y debe cumplir ciertas del W3C (WAI) persigue la accesibili- Bobby permite seleccionar dentro de una gran lista de navegadores y sus versiones.sidar. y normalización. cuyo fin es política gubernamental conseguir que todos los ciuse ha orientado hacia la dadanos disfruten de la desregulación de las Sociedad de la Información. investigación e prestación de estos ser.htm. derechos de los discapacitados están los productos y servicios digitales En lo que respecta a España. por lo tanto las nes en el acceso a la diferencias son mínimas. ya que encuentra más fallos Herramienta de verificación de accesibilidad a través de las de accesibilidad que Bobby: hojas de estilo Hera.org/recur/usuar/nav/config. ya que es el único que interpreta adecuadamente algunas propiedades de la especificación CSS. De otra forma.opera. Amaya. quiere decir que no son unas premiEn el caso de Estados Unidos. uno o más grupos enguna dificultad para acceder a la contrarán dificultades en el acceso a información del documento. como para decir ción que no tienen alternativa de texto. por lo Miembros y de tener un presupuesto prohíbe la discriminación por discapa.Diseño web. www. obliga a las empresas proveededicado a accesibilidad y alfabetizacidad en los lugares públicos y obliga doras a seguir estos criterios de acce. que nos permite elegir la revisión a realizar: la Sección 508 americana o las recomendaciones de la WAI. Hemos hecho la prueba de un conocido portal como es Terra y el resultado ha sido bastante demostrativo. más de 164 líneas utilizan en el código colores para dar informa- Es importante recordar que no siempre la imagen vale más que mil palabras.información empleadas sean accesiAccesibilidad del W3C. sugiriendo la forma de conseguirlo. Nestcape. Mozilla. que de cumplir con estas normas y. s po automático y 69 de tipo manual”. www. ya que todos sas muy esperanzadoras a día de hoy. formación y organismos gubernamentales.htm).jsp.access-board. nidos por organismos federales y sus de la accesibilidad que la gran mayocuando el Departamento de Justicia intranets estén en conformidad con ría de las páginas web de las admide Estados Unidos dictaminó que las normas establecidas. bobby. que no se descarta en un futuro. Otra herramienta de revisión de accesibilidad que podemos utilizar vía online es Bobby.net) de revisión online el resultado de verificación es más sorprendente. • “[WAI] Un desarrollador de contenidos de páginas Web tiene que satisfacer este punto de verificación. establece una serie de estándares. vicios. Sólo en la que el sitio web es inaccesible para personas con discapacidades: 122 imágenes que no proporcionan texto alternativo (Prioridad 1).. Sólo tienes que probar los resultados por ti mismo con la web que más te guste. Mediante la herramienta Taw (www.sidar. sólo con el texto alternativo.watchfire.La Sección 508 norteamericana.org/hera.com/bobby/ html/en/index. 23 líneas de código que no especifican cabeceras para las tablas existentes. Parte 5ª Hay una particularidad para el uso eficaz de Hera: se aconseja el uso del navegador Opera (www. el plan de acción 20 de la Constitución e-Europe 2005 (comenzó en Española). Políticas de accesibilidad Partimos de la base que para reducir normas de accesibilidad. De cualquier manera. La aplicación de 2001. nistraciones públicas españolas no cualquier sitio web se considera como El grupo de iniciativa de accesibilidad son accesibles. Se han encontrado acceso a los documentos Web. bobby. Las requiere que todas las agencias fededifusión. Por el momento son de habrá incrementado la carácter no legislativo.com/bobby/ html/en/advanced. cipación de los afectados y de los Rehabilitation Act Amendments directrices. Esto cido su coste. Opera. aundisponibilidad de los servicios y redubles para personas con discapacidad. Se han encontrado 124 proble.watchfire.jsp. administraciones tienen la obligación rales de Estados Unidos obliguen y La Sección 508 es una extensión y/o de fomentar la accesibilidad universal aseguren que las tecnologías de la modificación de las Directrices de para asegurar la igualdad de condicio. la Sección 508 de la de trabajo esenciales: tecnología. www.El navegador Opera permite visualizar las páginas mas de tipo automático y sin imagen. Un desarrollador de • “[WAI] Problemas accesibilidad contenidos de páginas Web puede de tipo 2. los Tiene gran repercusión. herramientas. la Accessibility. se ha demostrado por estudios de consultoras dedicadas al análisis esta ley en Internet se hizo en 1996. Se 35 problemas de tipo automático y han encontrado 35 problemas de ti69 de tipo manual”. telecomunicaciones con Entre sus objetivos se el objetivo de incremenencuentran políticas de tar la competencia en la fomento. e investigación y desarrollo. De otra forma. Un desarrollador de consatisfacer este punto de verificatenidos de páginas Web debería sación. Satisfaciendo este punto de verificación es un requerimiento básico para que algunos grupos puedan usar estos documentos Web . de tipo 3. exige que los sitios web mante. • “[WAI] Problemas accesibilidad 248 de tipo manual”.gov/ innovación. a pesar protegidos por la Americans with adquiridos por la Administración han de formar parte de los Estados Disabilities Act (ADA) de 1990.tanto. dad a Internet mediante cinco áreas las “barreras” se requiere de la partiEn 1998.ceoe. Satisfaciendo este punto de verificación faciendo este punto de verificación mejorará la accesibilidad de los doeliminará importantes barreras de cumentos Web. Ya hemos dicho al principio que prácticamente son similares en las exigencias de diseño. Desde el 25 de junio de rar su accesibilidad. grupos de usuarios encontrarán alDe otra forma. uno o más grupos de usuarios encontrarán imposible acceder a la información del documento.ción digital (plan Info XXI www. 2002) incluye entre sus plaSin embargo en los paínes de acción el eses desarrollados. uno o más tisfacer este punto de verificación. y un largo etcétera.com). Nº 91 57 .es/webceoe/ceoe/cesi/p6_1 a la adaptación de éstos para asegusibilidad.taw dis.

la capacidad es incomparable. Razones para conocer los principios de la programación. Guía del curso 1. PC Today nº 87 PC Today nº 88 2. incluso. Introducción al diseño web. Programación. si nos ponemos. Cómo saber si una web es usable. Habrás oído hablar de la superproducción de cine El Señor de los Anillos. ver mediante una webcam la orquesta que lo interpreta. El color y las imágenes. Música y sonido. Tecnologías multimedia en la Red. Introducción a las herramientas WYSIWYG. rodando. Evidentemente. PC Today nº 90 5. Accesibilidad. The GIMP. por lo tanto. Los profesionales intentan que sus páginas web sean cada vez más sofisticadas. mediante un módem de 56 Kbps y. ¿Qué se entiende por accesibilidad? Deficiencias y políticas. PC Today nº 93 a mayoría de los usuarios de Internet poseemos un equipo multimedia con una razonable tarjeta de sonido. Mapas de imágenes.es . Consejos para diseñar una web accesible. Imágenes: tipología y características. Principales elementos de las páginas web.Curso Tecnologías multimedia La tecnología ya permite que la imagen y el sonido usados en situaciones imposibles y escenas espectaculares se trasladen a Internet. Para el usuario medio. El derroche de imaginación reside ahora en permitir que cualquier usuario vea esas imágenes y esos sonidos sin necesidad de estar a la última en hardware. condiciones indispensables para poder disfrutar de la información difundida en la Red. Mientras su director Peter Jackson se encontraba en Nueva Zelanda. El diseño inclusivo. por las tardes podía repasar la banda sonora en tiempo real con su compositor Howard Shore. una conexión de Internet puede realizarse. ¿Qué es la usabilidad y por qué se debe tener en cuenta? Qué hacer y no hacer en el diseño web. si disponemos de la suficiente capacidad económica. Evaluar la accesibilidad.pctoday. PC Today nº 89 4. de sonido y de todo aquello que las hagan atractivas a sus potenciales clientes. Imagen animada y películas. Herramientas para el tratamiento de las imágenes y el color. PC Today nº 92 7. Trabajando con Sausage Hot Dog. L 3. No queremos ocupar un artículo hablando de la trilogía. Integración multimedia: Macromedia Flash y Action Script. 54 www. Usabilidad. La particularidad es que el director de orquesta se encontraba a unos miles de kilómetros. en Inglaterra y la conexión se realizaba mediante satélite y fibra óptica. Planificar y organizar el sitio. Cada vez más se hace necesario (o recomendable) que los diseñadores dispongan también de conocimientos acerca del sonido y sus propiedades para adaptarlos a las limitaciones que aún existen en Internet. Herramientas para el diseño web. vídeo y conexión a la Red. Psicología del color. podremos llegar a incluir sistemas que transmitan desde nuestra página web música en tiempo casi real y. PC Today nº 91 6. llenas de color. el color en la web. sino de la capacidad que pueden proporcionar los medios tecnológicos.

• 75 Fábrica ruidosa. se de la misma manera. Esta vibración característica que nos produce un movimiento de hace determinar un sonivaivén que obliga a las do débil o uno fuerte. los 340 metros por segundo y en puede percibir un rango entre 20 y • 15 Susurro. la compresión sólo concentra los datos en menos espacio. • Compresión de vídeo psicovisual: similar al sonido. El caso más representativo es el disco de vinilo. la cuerda de un lios (dB). sonora. Todos los inventores de nuevos formatos ofrecen códecs (codificadoresdecodificadores) que permiten a nuestros reproductores interpretar los archivos de audio codificados. línea recta.iua. pero con menos datos que los archivos originales. ejemplo. Por ben y otras se reflejan. Cuando se repite • Amplitud: es la variación de la preTrasladando esta teoría a la música. estas vibraciones se convierten en una señal eléctrica que oscila en tensión. es cionada con nuestro oído necesario conocer algunos y se define como la conceptos de acústica. se desechan más datos. Otros suministran una utilidad propietaria que se encarga de reproducirlos. MPEG y otros formatos. Como regla. frecuencia es de 250 Hz. positiva o negativa. como consecuencia. ce un sonido puro. su senoidal y.000 ms = 1 s). Si en una película aparece un coche aparcado durante un minuto. de 440 Hz. se debe utilizar un formato con pérdidas sólo como paso final del trabajo que se realiza. moléculas del aire a moverNuestro oído abarca. según estudios estadístiComo consecuencia. es decir. Parte 6ª Dadas las características de Internet. si En el Panel de control>Dispositivos de sonido>Hardware. los datos del coche de un fotograma se almacenan y se vuelven a utilizar en los fotogramas siguientes (“redundancia de datos estadísticos”).000 Hz. Hay muchos métodos y estrategias para comprimir los archivos multimedia hasta un tamaño práctico. un archivo de estas ca- Para poder comprender • Intensidad: es una magciertas técnicas de sonido nitud directamente relaempleadas en Internet. Un oído normal • 30 Casa en el campo. vídeo una y otra vez sin perder calidad. con la diferencia de • Frecuencia: es el número de veces • 70 Calle con mucho tráfico. www. se denomina periódica y sión. es decir. Cada vez que se guarda un archivo de esta forma. La compresión psicoacústica y la psicovisual son tecnologías con pérdidas que consiguen archivos más pequeños. forma el amplificador de nuestro equipo en sonido a través de los altavoces.004 segundos oyente mezcladas.upf. el coche se repite en la misma posición en cada fotograma. Un CD lleva directamente grabados estos datos. Esta es la piano) vibra. según la intensidad de que a su vez empujan a la fuente sonora: otras moléculas contiguas y así suce. por lo que simplemente se necesita un reproductor que convierta esa señal digital en oscilaciones de tensión. disminuyendo hasta • 0 Umbral de audición.un sonido de 0. • 65 Conversación a un metro. se cos. surge la necesidad de estudiar técnicas que permitan reducir los costes de transmisión o almacenaje de gráficos y sonidos sin pérdida de calidad. Puede guardar puede comprimir los datos hasta que no le quede más remedio que desechar información. lista. El primer proceso que se requiere. en un estanque. la esa onda. Los más comunes: • Compresión de sonido psicoacústica: todas las formas de sonido comprimido utilizan algoritmos para desechar la información sonora que el cerebro ignora. es la conversión a formato digital. Cuando escuchamos sonidos grade duración.000 con el paso de los años y El período es inverso a la frecuencia. La propagación del sonido se realiza y se expresa en herzios (Hz) o • 40 Radio ligeramente alta. para que a través de los altavoces salga sonido (el mismo proceso de un conversor digital/analógico). producen unas zonas de Podemos establecer una Herramienta para analizar todos los elementos que forcompresión y de depresión man un sonido. hay que repetirlo 250 La vibración más simple tiene forma ves o agudos es lo que se denomiveces para completar 1s. Con la compresión de vídeo psicovisual. la representación analógica del sonido se produce como consecuencia de las variaciones de la señal eléctrica del reproductor. Es similar al efecto que en un ciclo. Esta oscilación es la que transracterísticas ocupará menos que el original y lo “oiremos” igual. que se repite un ciclo por segundo. a una velocidad constante cercana a ciclos por segundo. sivamente. Sólo El éxito de algunas páginas web reside en la riqueza de los gráficos y sonidos que muestran a los usuarios. aunque sea con el mismo formato. ciclo. aplicamos el algoritmo de descompresión el archivo será exactamente idéntico al original. • Compresión con pérdida: este tipo de técnicas desecha datos para obtener una cantidad de bits inferior. Por si queda alguna duda. • Compresión sin pérdida de datos: esta técnica conserva el 100 por 100 de los datos. en este modelo se descartan los datos que los ojos no necesitan. de 0 a 130 dB. y se expresa en segundos • 90 Martillo neumático. unas ondas se absor16. Es uno de los trucos matemáticos que utilizan WMV. 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. Está relacionada con nuestra mentos musicales tiene una frecuencia Los elementos que la forman son: sensación dinámica del sonido. que las ondas son esféricas. v Conceptos básicos de sonido Una representación muy básica de lo que sería una conversión de sistema analógico a digital. Si encuentran obstáculos 20. energía de la onda sonoEl sonido se produce cuanra por unidad de superfido una fuente sonora (por cie: se mide en decibeejemplo.• Período: es el tiempo que transcurre •120 Umbral del dolor. se genera cuando se tira una piedra o milisegundos (1. produna altura tonal. En el apartado digital. seleccionamos Codecs de audio para poder ver los codecs que se encuentran instalados. cuyos surcos hacen que se desplace una aguja. s Nº 92 55 . llegando al por el maltrato acústico. A efectos prácticos. de la onda nota “la” utilizada para afinar instrucada repetición.es/mtg/clam. el sonido se representa por una cuantización y el muestreo de una señal analógica (en los conversores analógico/digitales) en cifras que dividen la señal en función del tiempo y la resolución.Diseño web. en su camino.

Mediante F4 accedemos a la configuración avanzada.51 está disponible en la web cdexos. aplicados como enlace entre satélites. Los iconos de la derecha de la interfaz nos permiten realizar conversiones entre formatos. la extracción al formato comprimido será sobre el tipo de archivo configurado en F4>Codificador. el rango se extiende a 65.com/ theory.1 KHz) con 16 bits de resolución estéreo ocupan 775 Kb. Ambos tipos pueden contener información MIDI de hasta 6 canales. • LA. Si quieres digitalizar 3 minutos de música a un muestreo de 44. Para cada muestra se utilizan 8 bits de resolución a una velocidad de 64 Kb/s. Dentro del código abierto tenemos Audacity. De arriba abajo: CD a formato WAV.535 (2^16=65. Este formato introducido por las empresas Apple y Sun Microsystems tiene una versión comprimida denominada AIFC. lo único que falta es probar distintas configuraciones hasta dar con la que más nos agrade. Aquí exponemos la lista de los formatos más conocidos y los sitios donde se puede obtener información acerca de su funcionamiento. (Sample Editor). más grande será el archivo. etc.nue. Winamp. Leer información del CD en una Base de Datos remota (si se consultan los diversos servidores de Internet pueden obtenerse datos del artista. Después de instalarlo. es un reproductor gratuito que permite grabar nuestros archivos de sonido. K. Lo primero que hay que comprobar es que la aplicaratón podemos marcar/desmarcar las pistas. y se mide en bits.com. Linear Prediction Audio Codec. Al aplicar códecs podemos reducirlo aun más. pero vamos a detenernos en Codificador. • MLP. • AIFF (Audio Interface File Format). • MAC.Reeves en 1939. Es el formato desarrollado por Microsoft y empleado de forma generalizada en su sistema operativo Windows.winamp. 24 y 32 Kb/s. del CD) y Configuración. y a una resolu- El derroche de imaginación ya no está tan reñido con el coste y prestaciones de nuestra conexión a la Red. pausa.pctoday. El mismo archivo a 22 KHz. • APE.536). permite codificar canales telefónicos con velocidades de 16.cpt.1 KHz y a 16 bits de resolución. Evidentemente. • LPAC. Waveform Audio).es/software/mac/soun/ soundutil/sampleeditor1.876. El reproductor se llama CDex y su versión 1. teniendo en cuenta una frecuencia de muestreo de 8 KHz.hqx.rediris. Cuanta mayor sea la calidad del sonido. La lista es bastante amplia y abarca la mayoría de los formatos mencionados. software de Audio no comprimido • RIFF.com. la pantalla inicial es la típica de un reproductor de archivos multimedia con sus iconos de avance y retroceso de canción.100 muestras/s x 2 bytes/muestra (estéreo)= 15. cada sección de transmisión. tenemos 255 niveles posibles (2^8=256). tanto de compresión con pérdida como sin pérdida.Curso ción de 16 bits. o con Mayús y el ratón seleccionarlas todas (en la opción predeterminada se marcan todas). Requería de conversores analógico-digital y digital-analógico en Cada formato tiene sus algoritmos de trabajo para conseguir esa compresión. de ahí su amplia difusión. Se trata del antiguo formato de Monkey. reproducción. CD a formato comprimido.losslessaudio.html.monkeysaudio. Meridian Lossless Packaging. www. pero el resultado va perdiendo calidad. Cuatro segundos en calidad Compact Disc (44. su compresión es más efectiva que la utilizada en los compresores de tipo ZIP. Compresión de audio sin pérdida Son los formatos de audio denominados “lossless”. Al ser formatos específicos de audio. ocupará 3min x 60 s/min x 44.de/wer/ liebchen/lpac.sourceforge.03.Cattermole en 1962 propuso la ley A de codificación para PCM. • FLAC.sourceforge.net. Explicar los algoritmos de cada uno Extraer pistas de un CD a otros formatos de audio Vamos a explicar paso por paso cómo utilizar una aplicación gratuita que nos sirva de reproductor y que además nos permita extraer el audio de un CD en formato WAV o MP3. utilizado sobre DVD-A y de tecnología 56 www.tu-berlin. es el predecesor del nuevo formato MPEG4 Audio Lossless Coding (ALS): www.000 bytes (unos 16 Mb). 8 bits y en mono ocupan 140 Kb (calidad radio FM). Es el nuevo formato de la casa Monkey: www. Y ya está.es . Lossless Audio: www. Si se amplía a 16 bits. s podría suponer un libro completo.net. un CD se graba a 44. etc. Ahora seleccionamos las pistas que queremos extraer. Es decir.gz. Seleccionamos el tipo de extracción con los iconos que se encuentran a la derecha de la interfaz. que reducen los tamaños de los archivos y permiten que la decodificación sea idéntica al original. audacity. más conocido como WAV (WAVE. Su aplicación comercial era integrarlo en una red mixta de transmisión digital y centros analógicos de conmutación. Todas las pestañas son importantes. forma parte del formato Ogg de dominio público y es similar al MP3: flac. WAV a formato comprimido.net. edición de Wav y otros formatos. Si la resolución es de 8 bits. álbum. • PCM (Pulse Code Modulation): formato de audio creado para telefonía y patentado por A. el software gratuito que genera este formato está disponible en la web sun. Aquí podemos determinar el tipo de archivo comprimido al que queremos convertir las pistas del CD. Extraer un fragmento de CD.sourceforge. Con Control y el Formato comprimido a WAV. ción aparezca en español mediante Options>Select Language>Spanish. • ADPCM (Adaptative Diferencial PCM): posterior al anterior. Para los que tengan ordenadores Mac de Apple. La resolución hace referencia a la exactitud de las medidas de frecuencia. En los programas de codificación se puede definir la frecuencia de muestreo (Hz) y el número de bits por muestra.1 KHz.html. Free Lossless Audio Codec.

de/project/mpeg/audio. technical_literature. no se pensó originalmente para sonido pero por sus excelentes resultados a nivel de compresión se ha adaptado: www. una tarjeta que admite el protocolo y • WMA.html. llo.codingtechnologies. Al contrario que el resto de na comparativa.03.• OUT: es por donde un instrumento envía la información. Versión 2 del Audio Coding tral Band Replication: de los laboratorios Dolby: www. De tipos de audio que no se utilizan dentro hecho. Parte 6ª ma dentro de lorien.com.vqf. MPEG-4 AAC -hannover.com. III combinado con Spec• AC-2. bastante complicado. Out y Thru. etc. ción será similar al origiAdemás de los especificados. • MP2. El formato RK Audio. MPEG-1 Layer II: www. nunca idéntico. desde su finaliellos es necesario utilizar códigos de zación en 1997 es el nota musical. Este manda mato ECAM. • WavPack. media.tnt. que no es gratuito: www.dtsonline. En www. aún teniendo gran ficada en ciertos anchos repercusión como formatos de interde banda de ecualización cambio. y se crean estándar para MPEG2 y desarrolladores así verdaderas obras sin pentagrama. formato pensado para la compresión de archivos de sonido digital DAT: www.dolby.utilizados y conocidos por los músiproducción de audio calidad CD con tercambio de música en Internet: cos profesionales.wavpack.html. • SHN. MIDI es uno de los protocolos más combinado con Spectral Band • MP3. Formato de Dolby.sourceforge. • AAC+ o aacPlus. gra. instrumentos Coding.de/project/mpeg/ la misma calidad necesita un ratio audio.com/technology/ TwinVQ (Transform-domain Weigh. Formato Windows Media Au.htm. • SZIP.uni mucha información sobre estos compositores basados en muestras de sonido.de/project/mpeg/audio. Utilizado en renocido de los formatos dentro del in.com/ Para poder seleccionar el compreprotocolo en sus instrumentos elecgrabadores de Minidisc (MD): products/codecs/realaudio. Los conectores MIDI son de tres tidio de Microsoft: www.upm. se ha tardado tres años en desarrollar: www.com.php.html. También conocido como concretas que el instrumento intercomparison.• AC-3. los datos simEl trabajo que se realiza para las aplicaciones sin ánimo de lucro sobrepasa muplemente “pasan” y no son procesaPCM.iis. • SDDS.hace las veces de secuenciador). instrupor orden alfabético son: mentos.pdf (requiere Adobe pos: In.tu-berlin.compressconsult.de/forschung/ projekte/lossless/mpeg4als.html.dolby.org/ Denominados “lossy”. String Sort ZIP. los reproductores más conocido.html de la Universidad Politécnisultado de la descodificaca de Madrid. La mayoría de los formatos tienen plug-ins o complementos para uno de Encontrar buen software gratuito para desarrollar tecnologías Flash es. hay más nal. patrones y listas de reproduc• AAC. Existen otros formatos especializa.com/ welcome. audio. lorien. ted Interleave Vector Quantization): formatos.nue. MPEG-1/2 Layer III.ch/en/index.preta.tnt.nz/ index.ch/ trev_293-ribas.com. Dentro de este conjunto hay un “maestro” que lleva el control sobre el resto de “esclavos”. www. Sony Dynamic Digital Sound: trónicos.com/szip.nl/mpcworld. refiriéndonos al audiosound. www.aspx.es contiene informaNormalmente es una caja de ritmos o ción sobre formatos dedicados a la un secuenciador (o un PC dotado con voz humana y su reconocimiento.Wave Packer es un compresor de archivos de tipo WAV: www.upm. MPEG-1 Layer com/products/aacPlus.die.uni-hannover. cial: www.msoftware. Desde 1983 más de 300 compañías han adaptado este un ratio de bits de 64Kb (un MP3 de www.net/Products/ATRAC3.co. y podemos ver Acrobat para ver el documento). Esto implica que el ree. el más coReplication (SBR). Para componer melodías sobre Coding.htm. en la web flac.com/tech/highqual.microsoft.html. podemos profundizar en este techas veces a los profesionales flac. Shorten.es/indexlo. MPEG4: www.madtracker.sourceforge. serie de canales de información que inLos más conocidos y corporan muestras de sonido. • MP4. • WMA. • MPEG4 Audio Lossless Coding (ALS). directamente con www.html podemos ver una bueInc: www. formatos de audio: Winamp 5.vorbis.ebu.Diseño web.tnt. gustos y bolsidiante mensajes con instrucciones www. MPEG-1 Layer I: www.codingtechnologies.meridian-audio. propietaria. tos de audio que por sus algoritmos y mar en un papel lo que deseamos. más conocido como AC3: audio sin patente comertuito y que permite utilizar múltiples Hay software profesional para el tratamiento de la www.fraun Lospara profundizar de codecs ofrecen kits de desarrollo en sus formatos dentro del MSDN.net/ comparison. • MP3Pro.html.sdds. sor/decompresor más adecuado a www.net/ • DTS. Variantes del • THRU: es un puente.org encontraremos hofer. Digital Theatre System de la compañía Digital Theater Systems • VQF. Compresión de El símil es el funcionamiento entre • ECM. Versión 3 del Audio Coding de • Ogg Vorbis. Formato RealAudio: señal de audioMIDI virtuales.com/win aparatos dedicados al sonido: dows/windowsmedia/9series/codecs/ • IN: el instrumento recibe la información por este conector. Todos funcionan mediante una sonará con ruido. utilizado por Sony en sus www. Musepack. Básicamente funciona menuestras necesidades. Compresión de sonido en forwww.die.de/amm/ techinf/aac/index.htm. archivo de sonido para poder reducirtos están interconectados entre sí mediante un cableado específico para transportar el protocolo. Para obtener información técnica debemos acudir a la página www.sony.caper.realnetworks. dos en la estructura de audio para tratar la voz humana.winamp. • RKAU.com/tech/ac-3mult. Advanced Audio ción. sólo transporta mensajes. son los formaimpresora interpreta para poder plasempresas/solidyne. de 128 Kb): www. • MPC. v Nº 92 57 . Adaptive Transform Acoustic • RA.org. y para trabajar • ATRAC. codificación alteran el contenido del • MP1. todavía. WMA pertenecía al grupo de formatos con pérdida.edu/ mpeg4. duración. MPEG-4 AAC.heibrink. denominado formalmente MP+ o MPEGplus: www. combinaciones de ellos en multitud de También en www. impresora y ordenador. La versión 9 permite una codificación sin pérdida. una señal decodide las páginas web.htm. com/products/mp3pro.php.php.mit.etree. desarrollado por Sosonido con pérdida mensajes con instrucciones que la lidyne en los años 80: www.uniEn un equipo MIDI los instrumenhannover.com.ebu.

un segmento de datos de vídeo va seguido inmediatamente por otro de audio. etc. Hay que dejarlo muy claro. Además. al ejecutar una Balance valor entre -10. Por decirlo de alguna manera. Enviar por Internet cinco minutos de una tocata de Bach puede suponer 4 Kb de datos. bastante Comandos HTML relacionados con el sonido (tabla 2) limitada. es decir. poder componer la secuencia y.permite animación. Pues que nos podemos encontrar. pero hay multiple. tienes luces.mp3" target="_blank">Has. de gráficos en movimiento es quizá lo Después de toda esta parafernalia te que más nos engancha.que se reproducen consecutivamente.LE loop=TRUE volume=50 autos. vamos a dar los valores posi. Imagen animada sintetizadores. con “tal duración”.nes (con un editor de imágenes) y así emplea un PC o Mac que hace de maestro de ceremonia.. GIF87 y GIF89a. www. • AVI.htm. Si eres un sibarita. Conforme llegan los datos se va presentando en pantalla.ejemplo. Dentro de los formatos de vídeo MIDI incorpora un sistema de ción. que reproduzca “tal nota”. pero al no estar comprimido se necesita bastante espacio de almacenamiento. la visualización que aparecen. Acostumbrados a y algunos enlaces de las compañías las imágenes estáticas. preguntarás qué pinta todo esto como Dentro de los gráficos animados formato de audio en la Red.</a> chivos.Curso Comandos HTML relacionados con el sonido (tabla 1) Parámetro Src Hidden Controls Width Height Loop Volume Autostart Starttime Endtime Valores fuente de sonido true/false CONSOLE/SMALLCONSOLE/ PLAYBUTTON número de píxeles número de píxeles true/false/número valor de 1 a 100 true/false formato MM:SS formato MM:SS Descripción archivo que se va a reproducir ocultar/no ocultar la consola consola grande/consola pequeña/ botón de “play” únicamente anchura reservada para la consola altura para la consola repetición indefinida/al menos una vez/número de veces volumen de reproducción con/sin autoarranque inicio de reproducción en minutos/segundos fin de reproducción Podemos crear nuestro pequeño estudio MIDI gracias a innovaciones hardware como éstas de www. puedes co. Llevan la extensión .000 y 10. premeditado y guardado en editor de GIF. mientras que en la parte cliente un plug-in especial o el reproductor se encarga de ir recomponiendo los datos y visualizar el vídeo en pantalla. En este tipo de archivos los datos de audio Si es la primera vez que oyes hablar de secuenciadores. dos por el instrumento.dida con 8 bits de información por nectar un módulo sintetizador a tu cada píxel y admite un máximo de 256 tarjeta de audio/MIDI para que sea el intérprete de los mensajes. Como un enlace: en el escenario está perfectamente orposteriormente. Alcanza resoluciones de 320x240 píxeles y 30 fotogramas por segundo. En los conciertos. utilide sonido que interprete este proto. Parámetro Valores Descripción No es un protocolo pasivo.avi.ocupa un poco más. pero su carga Los conectores IN.000 y 0 0 es el valor máximo periférico conectado. Lo que va a suceder tos reproductores queramos a la vez. añadirle “reverberación”.jhepple. OUT y THRU son habituales en tras páginas web? progresiva permite detener la ejecucualquier instrumento que admita MIDI. La segunda de sonido en nues. es decir. fondos transpaferenciar cualquier rentes ni formato entrelazado (carga formato de archivo la imagen en varias fases).tratan de reducir el tamaño de los arinterno que cumple unas normas de norá. te recomendamos Posiblemente. puedes distribuir la información mediante 16 canales (del 0 al 15). hacer que un instrumento interprete los datos que van por uno o varios canales y ordenarle. y se visualizan directamente sobre Windows con el reproductor Windows Media Pla- 58 www. de vídeo y sonido. Audio Vídeo Interleave (Audio y Vídeo Intercalado) es un formato desarrollado por Microsoft. con MIDI sólo viajan datos. efectos y demás elementos. y vídeo se almacenan consecutivamente en capas. No se necesita ningún códec para Una herramienta gratuita para crear GIF animados de Microsoft. En resumen. no sonido.resa el contenido.es .org portante de una web. Para ello. La primera no ¿Cómo podemos re. <a href="archivos/UnaCanel disco duro.000 0 sería un sonido centrado en ambos altavoces pieza puede transmitir órdenes a otro Volume valor entre -10. un formato MIDI necesita que tu conocidos son los GIF.midi. se que crear la serie completa de imágePodemos repetir el código como tan. Internet es una escuela inmensa y hay miles de recursos de todo tipo para ampliar todo lo aprendido. unirlas con un ganizado. Hay dos varianla Red. etc. Este sería el código para poner un sonido de fondo (sólo 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 vídeo más conocidos y que permiten hacer streaming. Src ruta archivo de audio para reproducir (incluso URL) si tienes nociones de música y tienes Loop número veces que se va a repetir el audio algún teclado MIDI. visualizarlo. sea la parte más imque visites la página web www. tes. dispone de un servidor especial que se encarga de transmitir los datos del vídeo de modo secuencial. Puedes montar una verdade.com/gif_animator. menos que cualquier gráfico JPEG que puedas encontrar por colores por imagen. cajas de ritmo.también encontramos tecnologías que control de tiempo a través del reloj ta que no pulse el enlace no so. una técnica de distribución de vídeo en Internet que permite la transmisión en directo del contenido sin necesidad de descargarlo completamente para su visualización.prod keys. hoy en día los gen único e internamente se compone <EMBED src="tocataRE. Bajo este primer ción de la página cuando no nos inteParece limitado. mediante esos mensajes. los más bien. para sincronizar tart=FALSE> Ver tabla 1 Para crear un GIF animado. Formato creaPC incluya una tarjeta especializada o do y patentado por Compuserve. El instrumento se encarga de interpretar esos datos y el resultado sigue saliendo por sus conectores estéreo normales.za un sistema de compresión sin pércolo.mid" de una secuencia de imágenes estáticas instrumentos musicales electrónicos permiten interpretar hasta 64 notas de hidden=”false” controls=CONSO.com. Exponemos los formatos de cuantización internacionales.jos animados tradicionales. es como un múltiple en el que se enchufan varios aparatos a la electricidad. xores que permiten controlar más de bles de cada parámetro: El GIF animado es un archivo de ima1. width=192 height=70 El sistema es similar al de los dibupolifonía. ra orquesta con pocos instrumentos.000 canales. y permite una sincronización.pctoday.

realnetworks. número de píxeles anchura reservada para la consola.elisoft." type="application/x-oleobject"> <param name="filename" value="ejemplos/lavida. todas con una resolución de 16 bits).qt o .mov" type="video/quicktime" autostart="True" width="320" height="240"> Esta etiqueta la introdujo Netscape a pesar de que en la práctica no fun- Para los ficheros de tipo MOV. Nº 92 59 . • MPEG.. alineación en la página de la consola. Todos estos formatos de archivo tienen una forma de utilizarse en las páginas web similar a la del sonido.com.. un excelente sitio web relacionado con documentación técnica sobre códecs de audio y vídeo es www. ciona bien en sus navegadores.Diseño web. número de píxeles altura para la consola. “video/mpeg”. MPEG1 es un estándar para el CD audio/vídeo. identificador que debe ser único en la página. Ver tabla 4 <object width="110" h e i g h t = " 8 2 " classid="CLSID:22D6F312-B0F611D0-94AB-0080C74C7E95" codebase="http://activex.080 píxeles. MPEG utiliza la codificación de imágenes en formato JPEG. Las extensiones asociadas son . Un vídeo de 60 minutos a pantalla completa requiere 550 Mb de almacenamiento. Los archi- Juzga por ti mismo. <embed src="ejemplos/ mov1.cab#Version=6. procedentes del formato QuickTime.net. Posteriormente. Parte 6ª Comandos HTML relacionados con archivos GIF animados (tabla 3) Parámetro Src Dynsrc Loop Start Controls Loopdelay Width Height Descripción GIF animado que saldrá en la ventana de reproducción. Al intentar ver un vídeo con esta etiqueta suele salir el típico mensaje de necesidad de instalación de un plug-in especial.mpg. Formato creado por Intel permite alcanzar ratios de hasta 150:1 de compresión. con una codificación de 1. • MOV. /activex/controls/mplayer/en/nsmp 2inf. vos de este formato tienen la extensión .7. Los archivos de este formato son de menor tamaño que los AVI y permiten incluir interacción. después de Windows Media de Microsoft. “video/quicktime”. Actualmente se encuentra operativa la versión MPEG2 mejorada y se está perfeccionando la versión MPEG4 (difusión a través de Internet). repetición indefinida/al menos una vez. que utiliza entre 3 y 10 Mb/s para resoluciones que oscilan entre 352x480 y 1.mpeg o . tipo de archivo de vídeo que indica al navegador el programa o plug-in adecuado para la visualización (“video/avi”.mpg" loop="2"> Ver tabla 3 plug-in Quick Time.apple.com/es/quicktime/download. número milisegundos entre una y otra reproducción de vídeo. etc. Pluginspage URL Showcontrols 1/0 Showdisplay 1/0 Showstatusbar 1/0 Name nombre Volume Width Height Align valor de 0 a 100 número de píxeles número de píxeles top/bottom/center/ left/right/middle Real Player es uno de los reproductores más difundidos. en las versiones 4x de Netscape Navigator sólo se visualizan bien los ficheros AVI.gif" dynsrc="peliculas/boda. y se pueden visualizar con Microsoft Windows Media Player y Apple QuickTime. 32 KHz. para referenciar por lenguajes de script. ruta del vídeo localización del archivo (incluso una URL completa). Creado por Moving Pictures Expert Group (empleados de Sony y Apple unidos desde 1988). muestra o no la barra de información sobre el vídeo (Netscape 4x).microsoft. número/INFINITE número de veces que se debe visualizar y por defecto es 1.). muestra o no la barra de estado (Netscape 4x). utiliza las mismas frecuencias de muestreo que los CD o los DAT (44. La calidad obtenida con MPEG es la que se utiliza en los DVD.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> v Comandos HTML relacionados con archivos de vídeo MOV (tabla 4) Parámetro Src Loop Type Valores ruta del vídeo true/false tipo archivo Descripción localización del archivo (incluso una URL completa). Valores ruta imagen Netscape no acepta este modelo. MPEG2 es un estándar para transmisiones de vídeo de alta calidad a pantalla completa. muestra o no la barra de control de la consola de vídeo (Netscape 4x). fileopen/mouseover cuándo se reproduce el vídeo: al abrir la página o al pasar con el ratón sobre él. Formato desarrollado por Apple (inicialmente para el entorno Macintosh).4. • RTV.microsoft. La versión MPEG7 está recién desarrollada. El resultado es una cierta pérdida de calidad visual pero con una notable reducción en el tamaño del archivo. en caso de ser necesario un plug-in. A través de la ISO crean un formato de vídeo estándar para comprimir ficheros audio/vídeo en formato digital. todos los navegadores necesitan un plug-in que se puede instalar de manera automática. altura para la consola.5 Mb/s y una resolución de 352x240 píxeles. MPEG4 es un estándar para vídeo-telefonía sobre entornos GSM. requiere tener el reproductor QuickTime. Para referenciar nuestros archivos de imagen o vídeo tenemos las siguientes posibilidades: <img src= "imagen/ animado. aplica simplificaciones usando compresión de vídeo psicovisual. Tras descargar e instalar el Siempre hay algún amigo en Internet que puede aportarnos trucos para mejorar nuestra técnica. la página web donde se puede descargar.com/windows/ windowsmedia/intl/download/default. La tecnología es similar a la del MPEG. Requiere el reproductor Realplayer: www. anchura reservada para la consola. mientras que en las versiones 6x se visualizan también los ficheros MPEG. En cuanto al audio.com yer: www. por lo que sólo aparecerá el GIF animado en lugar del vídeo.920x1. Para descargar el reproductor QuickTime: www.mov.asp ?DispLang=es.1 KHz. CONSOLE/SMALLCONSOLE/ consola grande/consola pequeña/botón PLAYBUTTON “Play” únicamente. volumen de reproducción (Netscape Navigator). que permite conseguir una calidad próxima a la del DVD y una compresión considerablemente mayor.1112" standby="Cargando fichero. 48 KHz. El ratio alcanzado de resolución y reproducción es el mismo que el AVI.

Hay un proyecto de software gratuito en marcha. la organización W3C sugirió a partir del lenguaje HTML 4. De todos modos. en el fotograma deseado con el botón derecho de ratón seleccionamos Insert frame (40 fotogramas en el ejemplo).phtml#object o en www. visualizador de animaciones es Flash de Macromedia. En el fotograma 40 eliminamos lo que queda de texto para dar la sensación de que ha desaparecido por completo. Primero decidimos cuantos fotogramas o imágenes independien- nuestra animación. con gran. El tamaño reducido y la gran extensión del programa que permite su reproducción. Un buen contrincante del su entorno. Si no hemos utilizado el entorno de Flash. Opciones disponibles con PARAM (tabla 6) Parámetro Valores Descripción param name="filename" value="ruta_fichero" establece la ruta del archivo de vídeo. tes va a tener nuestra animación. parecen racon Flash no se puede “piratear” de zonables.macromedia. el código que se genera ads/listado. En intervalos de 5 fotogramas repetimos el paso anterior reduciendo cada vez más el texto de prueba.es . Movie. aparece en pantalla un mensaje dirigido al usuario mientras se carga el archivo. seleccione en el menú File>Export Los descodificadores de archivos Flash deben usarse con intención de aprender y no de robar código ajeno. Otra característica muy importante de este formato es la facilidad con que se pueden crear animaciones y películas para su posterior distribución en disco. gráficos de alta calidad. a continuación. con la que se podrían incluir archivos de vídeo (igual que para todo tipo de archivos incrustados).w3c. Por dar una tenida en www. anchura reservada para la consola. declara el tipo de archivo de vídeo.cgi?P1_ Prod_Version=ShockwaveFlash&Lang= Spanish lo obtendremos. param name="autostart" value="true/false" con/sin autoarranque La herramienta de transformación es de las más utilizadas en Flash.Flash parte de una tecnología que adquirió Macrojando de ser un simple media a partir del desarrollo de otra empresa. Es una desde 17 euros a 150 euros según las herramienta que te permite obtener características del software. Parámetros asociados a OBJECT (tabla 5) Parámetro Classid Codebase Type Width Height Align Autostart Standby Valores "identificador_objeto" "URL" tipo archivo número de píxeles número de píxeles top/bottom/center/left/ right/middle true/false "mensaje" Descripción fija el identificador CLSID de los controles ActiveX necesarios. se puede obtener información extra en webmaster. param name="showcontrols" value="1/0" muestra o no la barra de controles (Internet Explorer). Nos situamos en el primer fotograma y con la herramienta de texto seleccionamos el color de la letra y el tamaño que va a ocupar.com/downlo pincelada. Haremos una sencilla anicódigo HTML. en www. Esta etiqueta define un objeto o componente externo encargado de la reproducción del fichero de vídeo. reproducción de audio/vídeo y mos para ver cómo es esta tecnología y MIDI.lycos. en las producciones profesionales que llenan multitud de CDROMs promocionales. s Flash Una de las herramientas que está de.pctoday. sos se pueden “hacer” cosas. DHTML y de Javas. Sobre la línea de tiempo con el botón derecho de ratón.webexperto.mación para que veas que en pocos pacript. etc. pero a un precio desorbitado. Seleccionamos el fotograma 5 y deformamos el texto. altura para la consola. seleccionamos Create Motion Tween y nos situamos en el fotograma 1. formularios Macromedia permite usar el software interactivos. Si una película está creada con una versión más moderna de Flash Player que la instalada en el ordenador. donde se puede encontrar mucha información acerca del funcionamiento de Flash. en la dirección www.com/ shockwave/download/download.org. Si no es así. alineación en la página de la consola. que es la animación reproducible con Flash Player.php?subcat=10.openswf.Práctico Como solución a los problemas de compatibilidad entre las etiquetas anteriores y los diferentes navegadores web. Vamos a crear un texto que se va a deformar a lo largo del tiempo. Ver tabla 5 Para los parámetros pertenecientes al comando PARAM. basta con pulsar la tecla Intro del teclado numérico y se reproducirá la animación en nuestro espacio de trabajo. Además. de la lista obcarga para la conexión. Sus programas shareware. Pero se requieren conocimientos de programación avanzados. param name="showstatusbar" value="1/0" muestra o no la barra de estado (Internet Explorer). con/sin autoarranque.es/re ferences/html/ content. la herramienta dispondrá de algún reproductor. para ello. su condición multiplataforma lo hacen idóneo para todo tipo de sistemas informáticos.org. mediante un conjunto de etiquetas especiales PARAM. Para ver una prueba de 60 www. Otra característica destacada del programa. los Nada más abrir la aplicación aparece un escenario donde están casi todas las herramientas necesarias. Para profundizar sobre los parámetros y opciones disponibles. se incluye el programa reproductor Flash Player para que el usuario que carezca de conexión a Internet también pueda visualizar el contenido multimedia. Para guardar la animación en formato swf. la utilización de la etiqueta OBJECT. Internet Explorer es el único navegador que admite correctamente la etiqueta OBJECT. lo hacen apto para sistemas de almacenamiento portátiles de cualquier tipo. se parametrizan los valores que necesita para el correcto funcionamiento o para la configuración deseada. Sólo tendremos que hacer doble click sobre nuestra animación Flash y comenzará a reproducirse. que es el único que permite editar las películas creadas. así que los aprovechatos. Se crea una instancia del objeto. seleccionamos con el ratón la línea de tiempo de la primera capa y. param name="autosize" value="1/0" autoajusta o no el tamaño de la consola (Internet Explorer).producto de Macromedia permiten des posibilidades de inversión y baja un periodo de prueba. El software de Flash instala el plug-in para visualizar las películas Flash en nuestros navegadores y también el programa ejecutable de Flash Player. param name="showdisplay" value="1/0" muestra o no la barra de información sobre el vídeo (Internet Explorer). Seleccionamos la caja del texto y la opción de menú Modify>Transform>Free Transform. que en el caso de Internet Explorer es alguna clase de control perteneciente al tipo ActiveX. es la facilidad con que permite la actualización del software de reproducción de manera automática. éste intentará descargarla sin que el usuario deba preocuparse demasiado. Hasta la fecha. Si se tiene en cuenta que el precio de la herramienta de desarrollo estándar Flash MX 2004 es de casi 600 euros y el profesional de 840. URL del objeto o componente externo necesario para reproducir el archivo. conexión a bases de da. Los podemos encontrar una forma sencilla y eficaz. se declara su URL y las principales propiedades generales y.durante 30 días.0. Las posibilidades para exportar la película incluyen el formato AVI y QT. ver tabla 6. que como el posibilidades son infinitas.

Consejos para diseñar una web accesible. PC Today nº 93 rogramar nuestra página web no consiste sólo en abrir una herramienta de desarrollo del tipo Hot Metal Pro o similar y colocar texto e imágenes aquí y allá. que cualquiera podría crear una página web en un abrir y cerrar de ojos. Puede que el diseño no permita ciertas libertades en programación. ¿Qué es la usabilidad y por qué se debe tener en cuenta? Qué hacer y no hacer en el diseño web. cuando los visitantes la vean.Curso Programación El entorno de programación se ha convertido en algo tan sencillo. Evaluar la accesibilidad. Guía del curso 1. más rápido será el desarrollo.pctoday. Introducción al diseño web. que si el diseñador ya sabe cuáles son las limitaciones de una interfaz. accesibilidad y navegación. Planificar y organizar el sitio. génesis de 52 www. No hace falta decir que los factores fundamentales van a ser los presupuestos y el tiempo disponible. para trabajar “detrás de la cámara”. Trabajando con Sausage Hot Dog. Programación. PC Today nº 90 5. Mapas de imágenes. Introducción a las herramientas WYSIWYG. P 3. y viceversa. con la red ARPANET. Imágenes: tipología y características. PC Today nº 91 6. Usabilidad. El color y las imágenes.es . No hablamos de HTML ni de las hojas de estilo. PC Today nº 92 7. por nuestro sentido artístico. Música y sonido. el color en la web. Pero también se requiere que. profundicemos en algunos conocimientos. The GIMP. junto a esos textos y fotos que hemos mencionado. nos referimos al código realizado sobre un lenguaje de programación y que aumenta las posibilidades de la página web. Tecnologías multimedia en la Red. Razones para conocer los principios de la programación. PC Today nº 89 4. Accesibilidad. La parte más oscura del desarrollo es la programación en sí. PC Today nº 87 PC Today nº 88 2. ¿Cuál es su cometido? ¿Debería tener conocimientos de programación? Evidentemente. Hemos comentado la importancia que tiene y sobre todo su usabilidad. Principios de programación El origen militar de Internet. pero no está de más que el diseñador sepa de qué le hablan los programadores. Imagen animada y películas. dio paso a una serie de avances en los sistemas. Herramientas para el diseño web. El diseño inclusivo. exclusivamente. incluso para un proyecto doméstico. Cada uno tiene sus labores dentro de un proyecto. Integración multimedia: Macromedia Flash y Action Script. Uno de los conceptos más ambiguos del desarrollo es. Psicología del color. Cómo saber si una web es usable. lo primero que encontrarán es la interfaz. 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. Principales elementos de las páginas web. De ahí. Herramientas para el tratamiento de las imágenes y el color. precisamente. el diseñador web. ¿Qué se entiende por accesibilidad? Deficiencias y políticas.

se reconoce por su URL (Universal profundidad el funcionamiento de la red. el que solicita y el que sirve. una aplicación de red cumple dos sin necesidad de descargar documen. Open Systems Interconnection). Como todo lo que se encuentra en Internet.ceso servidor escucha en un puerto de ro internamente nuestro propio PC comunicaciones TCP (por defecto. Este modelo de red ha dado lugar al local (LAN – Local Area Network). que contiene el estado rativo se encargarían de realizar las de la operación y su posible resultado. las operaciones dependen de un protocolo: HTTP o Protocolo de Transferencia de Hipertexto.El modelo ISO/OSI utiliza capas para das al unirse centros universitarios y organizar una red en módulos funciohacerse pública la existencia de dicha nales bien definidos. El modelo cliente/servidor consiste en dividir una aplicación de red en dos lados.000 redes enlazadas en 130 países.html. Internacional Standards Organization). entre la impresora y el PC) y los encarga de mantener la comunicaservicios de impresión del sistema ope. Su creador. documento prefabricadas y las librerías del siste. La cuna de la World Wide Web fue el laboratorio europeo de física de partículas CERN. www. se puede experimentar el funciogran ordenador namiento del modelo cliente/servidor. Por ejemplo. funciones de servidor. el modelo cliente/servidor de mación entre los científicos del centro. Una aplicación servidor casi forma que el resto de los servicios cosiempre se inicia ella misma y luego munes de entornos en red: un propermanece latente.es. modelos ISO/OSI. la in.red en dos lados. fichero multimedia o aplicación ma hacen innecesario conocer en CGI. El sistema emplea un proceso servidor que accede a una base de datos distribuida y da respuesta a todas las empresas. en espera de otra aplicación cliente. con sede en Ginebra. Nº 93 53 . londinense e ingeniero de programación. la orientó como herramienta de trabajo para el intercambio de infor. v Programación de formateo Durante mucho tiempo los científicos e ingenieros se han centrado en la idea de desarrollar una base de datos universal. Esto nos evita tener que saber qué hace nuestro navegador a través de una página web cuando realiza una consulta en un servidor.blecida la conexión. De esta forma.cern.servidor y éste a su vez responde a las PANET. La especificación completa del protocolo HTTP 1/0 propuesta por su creador. El hecho de conectar dos o más orde.HTML. el protocolo TCP se plo. usaremos las mismas ideas que si programamos para una red local. El servidor responde con un mensaje similar. Tim Berners-Lee. en 1989. una base de datos distribuida proporciona a las compañías aéreas información sobre las reservas. En la web del laboratorio de física de partículas CERN. pero sólo desde hace poco han contado con los medios para crearla. Para comprender el concepto de programación en Internet.cita información o servicios del lado net en mayúsculas nació a partir de AR.de los clientes de la WWW. El objetivo principal era módulos o capas. se pueden obtener todos los detalles sobre el sistema y utilizarlos con entera libertad. es decir. se puede comprobar el origen real de la World Wide Web. admite los servicios de coconexión es el cliente y qué lado es el nexión TCP/IP y funciona de la misma servidor. Pe. y es la Red de Redes con más de solicitudes del cliente.ción y garantizar un intercambio de datos libre de errores. Hay una serie de diferencias que nos Desde el punto de vista de las comuniayudan a determinar qué lado de una caciones. las propias funciones an. cada objeto de la WWW.isoc.faqs. Como en el modelo de red y su división en capas. se encuentra recogida en el documento de referencia RFC 1945. hará las veces de cliente y solicitará la información a otro servidor. el modelo de programación divide el diseño de una aplicación en tareas del cliente y tareas del servidor. que da respuesta a las peticiones de miles de clientes.org/internet/history/cerf. El modelo OSI se derivó de un modelo propuesto por la Organización Internacional de Normas (ISO.bras. Conectar dos o más re.html. como este imaginamos un de Iberia. Parte 7ª diseño o los aspectos del sistema no están patentados. Entre 1977 y 1984 los profesionales de redes diseñaron un modelo de referencia para Interconexión de Sistemas Abiertos (OSI. El lado cliente solinet”.web. Los servidores de páginas web se suelen relacionar con grandes grupos de ordenadores.iberia. Los 80) y espera las solicitudes de conexión clientes serían los procesos que solici. el funciona como un cliente/servidor. Una vez estatan tareas de comunicación (por ejem. Dentro de este modelo se puede dar la siguiente situación: el cliente realiza una petición y si el servidor no puede satisfacer la respuesta.uso del mismo en la programación de nadores para que se comuniquen es redes: el modelo cliente/servidor. proporciona una funconstruir redes de área amplia (WAN – cionalidad específica o una serie de Wide Area Network) o redes de área servicios a la capa subyacente. www.org/rfcs/rfc1945. Siempre nos En cualquier servicio de compra por Internet. Cada uno de estos red en 1972. con la “i” en minúscula. un lugar y permitía su consulta desde cualquier punto. Todas las operaciones pueden adjuntar Generalmente en la programación un objeto o recurso sobre el que actúcliente/servidor.pendientes: solicita información y formación se encontraba localizada en responde a esas peticiones. Un cliente establece una conexión con un servidor y envía un mensaje con los datos de la solicitud.ch/public/ index.Diseño web. crear una red.Consiste en dividir una aplicación de des a nivel mundial forma una “inter. HTTP se basa en operaciones sencillas de solicitud/respuesta. lo que demuestra su influencia. Inter. En un sistema abierto el Se puede diseñar una aplicación que cumpla las dos funciones. En otras pala20. Muchas personas han considerado a la World Wide Web como el prototipo para crear esa base de datos. Tim Berners-Lee. protocolos y arquitecturas muy varia.shtml.funciones bien diferenciadas e indetos mediante FTP. public. En la literatura sobre redes casi siempre Para profundizar en el origen de las primeras redes de se hace mención a los ordenadores podemos encontrar buen material en www.

es . La sintaxis sería: http://anfitrión:puerto/ruta? objeto de búsqueda Si los programas omiten el puerto se opta por el 80. La arquitectura cliente/servidor puede desglosarse en capas.es/libro/HTTP. un servidor de aplicaciones y un servidor web. El único propósito de un URL es encapsular información que pueda utilizar un programa con el fin de localizar un objeto en Internet. Esta capa determina cómo se presentan los datos al usuario. 54 www. Este sería otro nivel. Esta capa asegura la entrega de los datos de forma correcta. • De presentación. Es la que transmite los datos a través del canal de comunicación de la red. Esta capa es la que los conduce al programa correcto. Dentro de las capas. crear una aplicación que interprete y despliegue de forma adecuada el contenido de un documento HTML es bastante complicado. Si vamos a almacenar datos que posteriormente se utilizarán para alimentar la web (una página de noticias. que es el predeterminado. pero en el nivel de capa de enlace y física son formatos completamente distintos. quizá haya que crear algún módulo especializado. Si además quieres comprender con algún ejemplo el funcionamiento de los comandos de este protocolo basado en solicitud/respuesta entre cliente y servidor. la tipología de la misma. • De aplicación. Un ejemplo sería aprovechar las capacidades de la red y utilizar varios ordenadores como centros de almacenamiento de datos. 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: • Física. en realidad hay dos programas que proceso se denomina registro. • De transporte. en la actualidad. Además. No obstante. de cómo queremos distribuir la información y sobre todo de cómo queremos repartir la carga de trabajo entre los servidores. Cuando se accede a una red. monitores y formatos de archivos. Para ejecutar una operación. en lugar de identificar un ordenador anfitrión. el URL no desempeña ninguna función. esta capa envía paquetes individuales de datos que contienen la dirección de destino y fuente para el enrutamiento. Las capas de red El diseño de nuestra web y su programación va a depender también de los niveles o las capas del mismo. Incluso. son relativamente sencillas. De ahí que nuestro reto sea utilizar bien las posibilidades que nos permita la aplicación que funcione como navegador. Desafortunadamente. son los que intercambian los datos. El esquema URL para HTTP sólo identifica recursos de Internet sobre los que se puede utilizar el Protocolo de Transferencia de Hipertexto.unican. la parte objeto de búsqueda no se utiliza. a pesar de estar referenciada en la sintaxis de esquema. Este dor. • De sesión. protocolos. aunque está totalmente en inglés. • De enlace (de datos). metodologías. Incluye varias rutinas de conversión de datos. en el nivel de capa de red los datos parecen idénticos. más fácil aún.w3c. para reducir el trabajo del servidor web (encargado de servir las páginas web a Internet). a efectos prácticos puede ver un URL como un tipo especial de dirección de red. El modelo ISO/OSI es el más estandarizado y se caracteriza por la conversión que se establece entre las capas que lo componen. Esta capa contiene funciones comunes que la red utiliza repetidamente durante las comunicaciones. podemos imaginar cuantos niveles queramos según el diseño de la arquitectura. Por ejemplo. Los documentos HTML contienen mucha información que un cliente Web de- be interpretar. generalmente en tramas de datos. Para aprovechar ciertas capacidades de la red. ¿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. por lo que puedes ignorarla. En Internet. Por ejemplo. Al contrario. realizadas con HTTP.w3. Cuando se diseña un sitio web y se dimensiona por número de visitas. Si salimos un poco de estas profundidades. un URL identifica un objeto específico de dicho equipo y el método de acceso para el objeto al que hace referencia. Este tipo de operaciones son mucho más simples que las operaciones de FTP (File Transfer Protocol). tenemos que distinguir aplicaciones que se ejecutan en la parte cliente y las que lo hacen en la parte servidor. URL y URI (Universal Resource Identifier). s La mejor fuente de información en cuanto a protocolos es www. La dirección en la que encontrarás todo lo referente al protocolo corresponde al consorcio internacional del W3C y que ya hemos mencionado en más de una ocasión: www.Curso Resource Locator). Es el sistema de entrega primario dentro de la red.pctoday. Hoy en día está bastante superado este tema por las grandes compañías de software especializado en comunicaciones. el programa sólo debe manejar una conexión TCP. Transforma los datos binarios puros en información inteligible para la capa de red. Generalmente es la parte servidor la que se divide en “n” niveles. determina las propiedades mecánicas y eléctricas de este canal. las redes en Internet no incluyen una capa de presentación estándar. Es la asignación. Permite buscar la mejor trayectoria entre el ordenador anfitrión y cualquier destino en la red. se incorpora un servidor de aplicaciones que se encarga de la ejecución de los programas internos y de preparar la información para el servidor web. Siempre varía en función de la seguridad establecida en nuestra red.htm.org. Por lo tanto. Cuando se establece la comunicación entre dos ordenadores a través de una red. si dos ordenadores del mismo tipo están • De red. Es decir. Para una arquitectura cliente/servidor de tres niveles tendríamos: un servidor de base de datos. uno en una red de tipo Ethernet y otro en una de tipo Token Ring. etc. En la capa de aplicación se incluyen todos los detalles relacionados con programas diseñados para usuarios de red. Además. sólo tiene que mantener esta conexión durante el transcurso de la transferencia del archivo. la capa física determina el tipo de cable que utilizará la red. por ejemplo). Una vez localizado el objeto. Este sería un nivel.org/Protocols. en la superficie de Internet siempre estará nuestro querido HTML. y son los programas de aplicación los que se encargan de las funciones de esta capa. etc. te recomendamos que consultes la página web cdec. Estas funciones incluyen la interfaz de red con impresoras. la capa de sesión negocia y establece las conexiones entre los procesos y las aplicaciones en diferentes anfitriones para cada sesión. Si creamos varias sesiones con un sistema. conectados en una intranet. Pero las verdaderas operaciones de red en la WWW. generalmente hay que identificarse y conectarse. Hay mucha bibliografía relacionada con la teoría de redes que abarca todas las cuestiones relacionadas con arquitectura.

. se codifica de esta forma para que el código fuente del archivo referenciado permanezca en el anonimato. el servidor se limita a responder a nuestra petición con un archivo que viaja por Internet. CSS y JavaScript han dado lugar a la tecnología denominada Dynamic HTML o DHTML. mundo”) //—>fin de ocultar </script> </body> </html> v provocará dos peticiones al servidor. Este nuevo objeto ya está disponible. 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. este lenguaje requiere el uso de un editor de texto. Este lenguaje ha sido la base para lograr la animación de las páginas web sin necesidad de estudiar herramientas difíciles o lenguajes que requieran mucho tiempo de aprendizaje. Principalmente. Microsoft no adaptó Internet Explorer hasta 1996 para interpretar JavaScript. además. que no es el editor de HTML. Como resultado. Con la opción Ver código fuente de un navegador se pueden ver los entresijos de una web. Cuando se ejecuta un comando “get” condicional. El servidor proporciona la nueva dirección URL en la variable Location de la respuesta. al ser un lenguaje interpretado.. Vamos a crear un ejemplo sencillo: <html> <head> <title>Primer Javascript</title> </head> <body> <h1>Típico ejemplo de…</h1> <script language=”javascript”> <!— de esta forma ocultamos el código JavaScript para los antiguos navegadores. En caso de tener suficiente capacidad. el servidor no tiene capacidad suficiente para llevar a cabo la petición del cliente.. Ante la posibilidad de realizar muchas operaciones sin necesidad de un servidor de aplicaciones. Está prohibido el acceso a este recurso. <HTML> <HEAD> <LINK REL=”stylesheet” TYPE=”text/css” HREF=”Mi_hoja_estilos. Se ha producido un error interno en el servidor y no puede continuar con el procesamiento. inventó un lenguaje de programación llamado Livescript. una para el documento HTML y otra para el documento CSS enlazado. El servidor está actualmente deshabilitado y no es capaz de atender el requerimiento. y simplemente estaba de moda en la Web. se ejecuta en el servidor. En el cliente Haciendo un poco de historia. pero no ha producido ningún resultado de interés. ha encontrado un error al acceder al recurso que había solicitado el cliente.6 de JavaScript. Esto no significa que sería mejor incluir todo directamente en el HTML y olvidarnos. </BODY> </HTML> o referenciando al archivo CSS mediante la etiqueta @IMPORT <HTML> <HEAD> <STYLE TYPE=”text/css”> @IMPORT URL(“Mi_hoja_estilos. El nuevo objeto no está disponible por el momento. que está actuando como proxy o pasarela. Como resultado. El cliente no debe modificar ninguna de las referencias a la dirección URL errónea. La petición tiene un error de sintaxis y el servidor no la entiende.htmlhelp.. Este ejemplo.. se ha creado un nuevo objeto cuyo URL de acceso se encuentra en el cuerpo de la respuesta. HTML. La dirección URL solicitada no existe. lo mismo que cualquier CGI.. El cliente no deberá modificar el documento que se muestra en este momento.com podemos encontrar muchos recursos que nos ayudarán a desarrollar páginas no dependientes del explorador. </BODY> </HTML> tructurar la información. Ya lo hemos mencionado anteriormente.Diseño web. Dadas sus características. que normalmente consiste en un nombre y una clave que el servidor verificará.css”> </HEAD> <BODY> . y el documento no ha sido modificado. Se ha aceptado la operación. El objeto al que se accede se ha movido a otro lugar de forma permanente. pero más sencillo. Operación realizada correctamente. Nº 93 55 . No es posible utilizar una clave para modificar la protección.write(“Hola. document.css”) </STYLE> </HEAD> <BODY> . Quien se lleva el trabajo es nuestro PC. Se le dio ese nombre porque en esos momentos Java era un lenguaje muy utilizado por los programadores. El campo WWW-Autenticate informa de los protocolos de autentificación aceptados para este recurso. se devuelve este código de estado. Java y JavaScript no tienen nada que ver. aunque tienen muchas cosas en común. los ingenieros de Netscape vieron que con un poco de preparación se podían adaptar los navegadores para interpretar este código. HTML/CSS. El objeto al que se accede se ha movido a otro lugar de forma temporal. por ejemplo. Parte 7ª Códigos que envía el servidor al explorador Código 200 201 202 Mensaje OK Created Accepted Descripción Operación realizada satisfactoriamente. • JavaScript servidor: menos conocido. El servidor. La petición requiere una autorización especial. Puede utilizarse en sistemas de edición de documentos. El servidor proporciona la nueva dirección URL en la variable Location de la respuesta. En una colaboración entre Netscape y Sun Microsystems se terminó la sintaxis del que sería rebautizado como JavaScript. siempre se ejecuta en la parte cliente. Algunos navegadores acceden automáticamente a la nueva dirección URL. ingeniero de Netscape. se ha creado un nuevo objeto cuyo URL de acceso se encuentra en el cuerpo de la respuesta.. Existen dos tipos de JavaScript: • JavaScript cliente: se desarrolla y aplica en el navegador del cliente. como todos los lenguajes orientados a objetos... el cliente puede actualizar la dirección URL incorrecta en la agenda de favoritos. es la única forma de llegar a comprender y dominar su sintaxis. Por su diseño interno. pero hoy en día no existen problemas para utilizar incluso la última versión 1. Algunos navegadores acceden automáticamente a la nueva dirección URL. en 1995 Brendan Eich. el navegador de nuestro PC recopila la página que ha solicitado al servidor y posteriormente interpreta las etiquetas y el contenido para visualizarla.. En el cuerpo de la respuesta se debe informar sobre la disponibilidad de la información. Operación realizada correctamente. simplemente es una forma de es- Dentro de www.

• La etiqueta de cierre del comentario HTML se antecede con las dos barras de comentario de JavaScript. por lo tanto.length.elguruprograma Document.netscape.pctoday. www. 56 www.ciones que funcionan sobre Windows: ciones. • Pero si la función se pude invocar desde cualquier punto de BODY. Tienen el mismo significado que la etiqueta <!— …. sensible a las mayúsculas. La desventaja es que . Lo aconsejable será seguir estas pautas: • Si la función es corta y actúa sobre un elemento del documento.ge tElementById(“id_texto0”).inn erHTML=message.com.i-=1. y nos permite manejar todos los elementos de la interfaz mediante estos lenguajes. y dentro del paréntesis de este comando se escribe entre comillas el texto que queremos que aparezca en pantalla. y uno de sus atributos es el lenguaje en que está escrito.color:red. • La etiqueta <script> … </script> permite al navegador reconocer que se inicia en este punto un script o programa a interpretar. JavaScript tiene la particularidad de ser CASE SENSITIVE.ecma-international. aplica un efecto de neón entre rojo. pero cuando se trata en detalle objetos Com.2 está debidamente descrito en el documento ECMA-262: www. Es document. MySQL es la más extendida. Ya sabes. No olvidemos que dado el origen de VBS. que ha pulsado <B> Aceptar</B>” heredado parte de las funcionalidades I = MsgBox (“Otro ejemplo” de este lenguaje.write(). La ventaja que tiene VBS es que permite ser Versión navegador 2 3 4 5 6 Netscape JavaScript 1. MsgBox “Esto es un Además de JavaScript. Arial”> script.internet. sino para los navegadores más modernos en los que el usuario ha decidido desactivar el intérprete JavaScript. recomenda<TITLE>PC Today .mundojava <FONT FACE=”Verdana. Write “<BR>Has servidores de automatización OLE y pulsado <B> Aceptar</B>” utilizar Java.substring(x.MsgBox” Visual Basic Script es un subconjunto Document. Este ejemplo. aparte de nuestro gusto. El texto tiene que ir necesariamente entre comillas. • Se ha añadido la etiqueta <!—.0). Veamos un ejemplo en el que se muestra cómo se pueden utiliLa base de datos es un eje fundamental para alimentar zar los cuadros de diánuestras páginas. }—> </style> <script language=”JavaScript” type=”text/javascript”> <!—var message=”Texto que se cambia en tres colores”.innerHTML=messa ge. function cambia_texto() { if(x<=message. La etiqueta <script></script> puede incluirse tanto entre las etiquetas <head></head> como dentro de <body></body>. la única diferencia es que uno es estándar para cualquier navegador y el otro es exclusivo de Internet Explorer.”PC Today de Microsoft y sus principales posibiliMsgBox”) dades son utilizar controles ActiveX.htm.0 JavaScript 1.es . se encarga de propagar la forma en que se deben usar las altas tecnologías.com. var x=0. cript. donde encontrarás ma<BASEFONT SIZE=3> nuales y guías sobre este tema. <SCRIPT LANGUAGE=”VBScript”> programacion.texto que cambia de color</title> <style type=”text/css”> <!—.MsgBox mos consultar devedge.net.i=message. www. }} setTimeout(“cambia_texto(). etc.Write “Hola.vbInformation. Para aquellos que están familiarizados con Visual Basic. mundo!” </script> </body> </html> pulsado <B>Cancelar</B>” End If </SCRIPT></FONT> </BODY></HTML> Se parecen bastante. Dentro del software libre y aprovelogo de mensajes tíchando el estándar SQL.com/cen </TITLE> tral/javascript.1 JavaScript 1. • Si se refiere a que hay que realizar alguna acción al cargar el documento.Write “<BR> Has de Microsoft Visual Basic.Write “<BR> Has plo de JavaScript sería así: <html> <head> <title>Mi primer Visual Basic Script</title> </head> <body> <h1>El típico ejemplo de…</h1> <script language=”VBScript”> Document.4 ajustándose a ECMA-335 (*) ECMA. verde y azul: <html> <head> <title>PC Today .org/ publications/standards/Ecma-262.innerHTML=messa ge.4 sin ajustarse a ECMA-335 (*) Internet Explorer No aceptado JavaScript 1. Si se transcribe el siguiente ejemplo en un documento HTML. los identificadores.”PC Visual Basic Script. por eso se añade language=”Javascript”. Today .ar o www. JavaScript 1. No sirve sólo para navegadores antiguos. 25).com.length) {document. hay que escribir el código cerca de ella.getElementById (“id_texto1”). font-weight:bold. Conjuntamente al W3C. Embeber el código dentro de un documento HTML no es difícil. i=message.Write “Un ejemplo con MsgBox” dor. Esto es necesario para que el navegador no se confunda e interprete erróneamente el cierre —>.}//—> </script> </head> <body onload=’cambia_texto()’ bgColor=’#EEEEEE’> <span class=’posicion’ id= ’id_texto0’ style=’z-index:1.3 ajustándose a ECMA-334 JavaScript 1. If I = vbOk then Document.2 sin ajustarse a ECMA-262 (*) JavaScript 1.substring(i. Algunas </HEAD> páginas en las que recopilar ejemplos y <BODY> más información son: www. es mejor ponerla en BODY. —> en HTML. javascript. en concreto.Curso • La doble barra inclinada // se utiliza en JavaScript para indicar comentarios que serán ignorados por el navegador. top:100.document. así se oculta el código JavaScript para los antiguos navegadores.”. también está ejemplo”. La decisión de dónde colocarla dependerá de varios factores. habrá que tener cuidado cuando se escriban las palabras reservadas.fontsize:20’></span> <span class=’posicion’ id= ’id_texto1’ style=’zindex:1.color:green. } else { if(i>=0) {document. etc.fontsize:20’></span> <span class=’posicion’ id= ’id_texto2’ style=’zindex:2. Por ejemplo. ActiveX. la European Computer Manufacturers Association. con Notepad podremos ver las posibilidades que nos otorga el control de ciertas características.3 sin ajustarse a ECMA-334 (*) JavaScript 1.0).0 JavaScript 1. Else La versión en VBS del primer ejemDocument.color: blue. • Dentro de este breve script tenemos una línea de comando que escribirá la frase en pantalla.vbQuestion + vbOkCancel + sólo lo pueden ejecutar navegadores vbDefaultButton2. VBScript o VBS.length. lo mejor será colocarla dentro de HEAD. • Para navegadores con el intérprete JavaScript habilitado. es muy fácil codificar script potentes para una página web.2 ajustándose a ECMA-262 JavaScript 1. se ejecutará el código tras leer una etiqueta de script.fontsize:20’></span></left> </body> </html> Esta página de error indica que hay una mala programación de la web que las origina.htmlweb. constantes y posibilidades <HTML><HEAD> que nos ofrece JavaScript. es un lenguaje bastante exclusivo para utilizarlo con software de la casa Microsoft.} else { x=0.com.getElementById (‘id_texto2’). picos de las aplicaPara profundizar más sobre las fun. vemos que el script de VBS es mucho más “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 código. x+=1.posicion {position:absolute.

Si guia25-1. mucho más potente a la hora de utilizar las características de un lenguaje de programación. sobre todo. que se obtienen a base de el formato solicitado. un standard para documentos estructurados.net. y una dirección de muchísimos recursos de VBScript es www. pero de extensión .0 ha dado servidor y se sirva lugar a XHTML 1. extensible. s se use dentro de entornos de aplica- Se pueden obtener programas ya hechos en páginas españolas. s Nº 93 57 .visualbasicscript. Dentro de las opciones que presentan los script que se ejecutan en el servidor.0 a XML 1. de ahí que sea extensición y luego aplicar transformaciones ble. www. Lo normal es que XML se utilice en el La reformulación de HTML 4. el servidor de páginas web es un componente más del sistema. HTML por ejemplo. Estos entornos publican docuadquiriendo gran auge como medio mentos XML que antes de enviarse al de comunicación entre distintas tec.htm. www. 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. cliente VBS.worldonline. mentos. En www. se indica mediante la etiqueta <%@ Language En el caso de Windows XP. La página web donde obtener información y poder descargar su intérprete es www.es/jlgranad/xhtml/xhtml1. la XML nació como subconjunto de transforma para servirlo al cliente en SGML.desarrolloweb.htm#toc.desarrolloweb. Es necesario tener encontrar en www. Al igual que el resto de los lenguajes de script vistos hasta ahora.0. = VBScript %> que vamos a utilizar Visual Basic Script en el servidor. es una manera de especificar que permite estructurar la informalenguajes. La gran diferencia de funcionamiento es que ASP se ejecuta en el servidor y el resultado lo envía al cliente. ordenador.com/ directorio/programacion/asp han realizado un gran trabajo de comparativas entre estos tipos de tecnologías de scripting.php. pero además puede conectarse a una base de datos para in- Frente a las posibilidades de Flash. convierte a XML y. o lenguaje de anotación sitos pertinentes. Structured Generalized Markup Language. Un buen tutorial sobre VBS lo podemos encontrar en www.net/manual/es/. • Windows 95/98 con El lenguaje JavaScript ofrece la posibilidad de crear PWS (Personal Web Server) aplicaciones sencillas y compatibles con cualquier instalado.programacion. com/asp/tutorial/vbscript. Para obtener transformaciones. XML no es sólo un lenLa característica esencial de XML es guaje. Al igual que VBScript.cliente sufrirán una serie de transfornologías es XML (eXtensible Markup maciones para adaptarse a los requiLanguage). para empezar.com/manuales/8 hay un buen tutorial sobre ASP y PWS. el lenguaje de script es muy manejable y.php.programacion. a continuación.net/ ciertas nociones de la parte servidor.org.asp (aunque lo que contenga sea código HTML). La versión homóloga de ASP en versión gratuita. el más difundido y eficiente es Apache.apache. tercambiar información.visualbasicscript. </head><body> ASP (Active Server Pages) es la tec<H1>Hoy es <%= now %></H1> nología de servidor desarrollada por </body></html> Microsoft. Documentación en castellano: otro tipo de doculeo.com. Al ser gratuito. Homóloga a su versión En la página www. Esto hace que XML información más detallada. Por lo tanto. • Windows 2000 Server con IIS. XML no es un lenpara su visualización. sino mación de una base de datos. La parte dedicada a información y manuales en español se encuentra en www. El resultado de esta página sería: Hoy es 5/10/2004 10:01:59 AM Existen bastantes variaciones entre VBScript y ASP. ha<html><head> brá que saber qué necesitamos para <title>PC Today</title> dar servicio a nuestros clientes.Diseño web. está basada en la programación de Visual Basic. Para poder ejecutar páginas ASP debemos disponer como mínimo de: • Windows XP PRO con IIS (Internet Information Server) instalado (es un componente del sistema operativo).com. es gratuito.compuayuda. la información autodescrita.mysql. no lo pases por alto. ASP se compone de páginas en formato ASCII. Dentro de los servidores web gratuitos. principalmente sobre Linux. Todo lo que queremos ejecutar en el servidor irá dentro de las etiquetas <% …… %>. su recomendación es utilizar como servidor web Apache 1. Una página ASP es como un documento HTML. también está PHP (PHP: Hypertext Preprocessor). sumamente complejo para poder servir documentos web. Un ejemplo de página ASP sería: alguna vez montamos nuestro propio negocio sin alojamientos contratados y <%@ Language = VBScript %> nuestro PC se convierte en servidor.net/xml. visita html. Recupera inforguaje para crear páginas web.3.x. Parte 7ª XML/XHTML Un lenguaje de marcas que está ción. y la base de datos MySQL.com. pero una de las más completas es www. permite el uso de componentes ActiveX.

En el curso también utilizaremos el programa Paint Shop Pro 7. PC Today nº 95 PC Today nº 96 3. Selección avanzada.pctoday. Objetos múltiples. Guía del curso 1.Curso Introducción al retoque fotográfico Las cámaras digitales ya son mayoría dentro del mercado de la fotografía y su compañero ideal es el ordenador. Modificación del color.es . Conceptos básicos. con las que podrás seguir y practicar los ejemplos de este curso. Opacidad. Eliminación de desperfectos. Dispones de una versión de evaluación de ambos programas en su página web. hasta que a finales de año esté disponible la versión 8. puede ofrecernos muchas posibilidades sin grandes desembolsos para poder corregir o añadir efectos a nuestras fotos. Trabajo avanzado con capas. a pesar de su precio. Filtros.com. www. Trabajo básico con capas. ofrece posibilidades casi infinitas y no para de evolucionar. gracias a la difusión de las cámaras digitales. sin embargo. Composición de escenas. Efectos especiales. En esta primera entrega. Introducción al retoque fotográfico. Canales y trazados. Adobe Photoshop y Paint Shop Pro. Extraer. PC Today nº 94 E 2. The GIMP. Trabajar de cara a la web.jasc. Texturas. Primer contacto con las herramientas de Photoshop 7 y Paint Shop Pro 7. Diseño de una interfaz. Diseño para Internet. PC Today nº 98 PC Today nº 99 6. El ordenador se ha adueñado de un hobby aparentemente caro y complicado de dominar que. Una buena cámara y un software potente pueden ofrecer resultados mucho más satisfactorios que si te limitas a apretar el botón y mostrar las fotos en el televisor. Selecciones sencillas. l mundo de la fotografía ha sufrido una transformación espectacular en sólo una década. y en www. Muchos profesionales y aficionados han optado por un programa que. Curvas de Bezier. 4.adobe. Selección avanzada.com.softonic.es. Edición fotográfica. Máscara rápida. Modos de color. PC Today nº 97 5. s 60 www. Trucos avanzados y filtros. puedes ver una descripción escueta de la barra de herramientas de ambos y algunas de las acciones básicas que serán muy importantes en las siguientes lecciones. Ésta es la última versión en castellano del mismo. Pronto sabrás cómo sacarles el máximo partido con los dos programas que te ayudamos a dominar en este nuevo curso. Composición avanzada. se ha conver- tido en todo un referente. Fotógrafos digitales. Adquisición de imágenes. www. Este título de Adobe. Photoshop.

Suaviza pequeñas zonas de la imagen para quitar desperfectos. Se utiliza para seleccionar un color que aparezca en cualquier lugar de la pantalla. subexponer y esponja. Selecciona zonas de una imagen que comparten color u otras características. horizontal. forma y transparencia. 15 Borrador. además del marco rectangular. Herramienta de dibujo natural. Ofrece otras herramientas para manejar los elementos de los trazados. 14 Sobreexponer. 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. para dividir las páginas en varias zonas. 18 Bote de pintura. vertical. 5 Mover. Permite dibujar con puntos y curvas fáciles de modificar en cualquier momento.Retoque fotográfico. Tampón de clonar y tampón 9 de motivo. Mueve la imagen o capa seleccionada dentro de la ventana principal. Se utiliza para crear trazados complejos y poder seleccionar elementos de una imagen de forma sencilla y precisa. Como se puede comprobar en sus paletas de herramientas. Photoshop 7 la y columna única. Crea forma de la y permite variar la 1 Flecha. Ofrece muchas opciones en su paleta de configuración asociada. Se emplean en la construcción de webs. Cambia un color de la imagen por otro que se seleccione. Dibuja formas sencillas. Ofrece varios estilos de escritorio donde se muestra una porción mayor o menor de la zona de diseño y las herramientas. Se utiliza para desplazar capas u objetos de una imagen. El borrador de fondos sirve para destacar elementos de una imagen y el mágico hace lo mismo pero de forma automática. 11 Pincel de copia. estilo y texturas. Dibuja. 4 Recortar. Sirven para crear diseños poligonales fáciles de modificar. círculos. Sirve para mover capas. 14 Eliminar rayaduras. Muchas tareas se pueden realizar con resultados similares en ambos casos. elipse. 19 Notas. borrador de fondos y borrador mágico. Permite introducir texto en las imágenes. La segunda lo contrario. Dibuja partículas con una separación variable y produce un efecto de spray. 8 Varita mágica. El primero pinta con el color de fondo. cambiar de tamaño y deformar de forma libre una capa o selección. a modo de tampón. 22 Zoom. 8 Pincel y lápiz. 22 Objeto vectorial. 2 Mover. La tercera se emplea para aumentar o disminuir la saturación del color. fi- ral. Las dos primeras acla- Paint Shop Pro 7 seleccionada dentro de la ventana. 12 Reemplazar color. Con ambos se deshacen operaciones. anotación sonora. 5 Recortar. Ir a ImageReady. 18 Rectángulo. Permite eliminar de la imagen la zona que queda fuera de la selección. 20 Cuentagotas. como botones de navegación. Si dejas el botón izquierdo pulsado. 17 Aerógrafo. Aumenta o disminuye la zona visible de una imagen. Tiene un efecto similar a la herramienta pincel pero quita zonas de la imagen en lugar de pintar. Además de recortar zonas a mano. Se usa para crear notas recordatorias. 20 Diseño. 23 Selector de color. Copia una zona de la imagen a otro lugar. Además de la selección a 7 Lazo. Permite mover la imagen v Nº 94 61 . 6 Sector y seleccionar sector. 7 Pincel corrector y parche. 11 Borrador. Lanza la apli26 cación de diseño para la Red ImageReady. 13 Retoque. edición estándar y 24 Modo derápida. los objetos prediseñados de una lista. 12 Degradado y bote de pintura. Permite elegir el color que se usará con cada herramienta de dibujo. elíptico. Con la tercera se simula la acción de arrastrar un dedo sobre pintura húmeda. Admite distintas opciones de tamaño. 16 Texto. Permite seleccionar zonas de una imagen. Paint Shop Pro 7 también dispone de una paleta flotante. Bloqueo. lazo Permite seleccionar magnético. Para completar la lista. La única diferencia consiste en el número de pasos necesarios en cada una de las aplicaciones. Desplaza zonas de la imagen para darle distintos efectos como difuminado o enfoque. entre capas y entre varios documentos. permite elegir otras formas. a mano alzada. tanto de texto como sonoras. La diferencia entre ellos consiste en que al utilizar el segundo se añaden a la zona modificada efectos propios de una pintura. Permite averiguar y utilizar un color al hacer click en una zona. polígono. poligonal y lazo 3 Lazo. enfocar y dedo. 2 Zoom.alzada. 17 Pluma. guías o marcas de selección de una imagen. 4 Varita mágica. La primera aplica un efecto de desenfoque a una zona. Acerca o aleja la imagen en función de si se usa con el botón izquierdo o derecho del ratón. Indica si se utilizan las características típicas de un pincel o las que se encuentran seleccionadas en el instante de dibujar. 10 Pincel. selección horizontal y vertical. 3 Deformar. hay algunas comunes en Photoshop 7 y Paint Shop Pro 7. 16 Sello de imágenes. 21 Formas. Es el lugar donde elegir el color que se aplicará a cada una de las herramientas de dibujo y el modo en que aparecerá. 21 Mano. que se puede colocar en cualquier lugar de la pantalla. La primera rellena una zona con un degradado de color. utilizar varias formas como flechas. Copia una zona de la imagen a otro lugar. 13 Desenfocar. 19 Texto. Copian una zona de la imagen en otra lugar para corregir desperfectos. como líneas rectas o flechas. El pincel se utiliza como herramienta de dibujo natu- 1 Marco rectangular. Si dejas el botón izquierdo pulsado. ofrece otras opciones de selección por capas. muestra de color y medición. Rellena zonas de la imagen y permite aplicar diferentes efectos de fusión. que acompaña a Photoshop. línea y forma personalizada. etc. zonas de una imagen. Selección de trazado y selec15 ción directa. La segunda sirve para colorear zonas. ofrece una versión mano inteligente y otra con manejadores. Medición mide la distancia entre dos puntos. Crea objetos poligonales y diseños más complicados. 25 Modos de pantalla. 10 Pincel de historia y pincel histórico. rectángulo redondeado. Selecciona una zona de la imagen que comparte un color similar. Para escribir texto en horizontal o vertical y para crear selecciones con forma de texto. muestra el lazo poligonal y el magnético. Permite altermáscara nar entre el escritorio de trabajo normal o uno con el que crear selecciones complejas con las herramientas de dibujo habituales. Se utilizan para seleccionar todo o parte de un trazado pero sin modificarlos. dedicada al control del color y con las siguientes zonas: Selector de color. 9 Gotero. Se utiliza para rotar. selecciones 6 Seleccionar.

no mostrará ningún color. un vídeo o la televisión para mostrar tus imágenes. en el que poder importar cualquier fotografía. selecciona la opción CMYK. ya que es la que más se acerca a la forma de trabajar de las impresoras. pulsa la techa Alt del teclado y sin soltarla. una imagen única o fondo. En la ventana que se abre a continuación. Consejo Aunque una imagen ofrezca una calidad muy buena en la pantalla y sea difícil apreciar los puntos que la forman. Selecciona un tamaño para el lienzo en la lista. en conjunto. Si vas a imprimirlas con buena calidad. 3 Pulsa con el botón derecho del ratón sobre la imagen y arrastra el puntero. Para crear un documento desde cero. hasta por lo menos 300 ppp. Al abrir una fotografía en Photoshop. ahora no es necesario tenerlo en cuenta.. pincha sobre cualquir lugar de la imagen. Escribe el nombre que tendrá el archivo de la imagen. se pueden elegir los parámetros del nuevo lienzo. introduce los datos en píxeles en las casillas de Anchura y Altura. aumenta la resolución que aparece en la casilla siguiente. Procura ver las fotografías en su tamaño real. Elige 300 ppp si vas a imprimir. una cámara de fotos digital. por ejemplo. 2 Para alejar en Paint Shop Pro 3 Botón derecho y arrastrar el puntero. dan la sensación de ser una imagen única.pctoday. Para ello. Lo que sí es posible. Aunque en la pantalla aparezca un tramado de cuadros. lo cual indica que están formadas por multitud de pequeños puntos o bits. es reducir la resolución de una imagen hasta que encaje en la pantalla del ordenador o en una página web. La vista se reducirá y podrás ver una zona más extensa de la misma. Así.. elige un ancho y alto de imagen que se ajuste a tus necesidades. a la hora de imprimirla. La resolución que aparece por defecto es 72 pí- xeles por pulgada. Selecciona Blanco en la lista desplegable y pulsa aceptar. Éste se transformará en una lupa con la que podrás pinchar sobre la imagen. para asegurarte antes de usar la impresora. Si lo haces con el botón izquierdo. que es equivalente a la que muestra un monitor de ordenador. La máxima resolución que se puede obtener sin perder detalle es la que tenga el original en su medio de origen. Pulsa en el icono de la herramienta zoom. pulsa en las flechas que hay junto a las casillas Ancho y alto o introduce la cantidad directamente en ellas. pulsa en las flechas situadas a la derecha de cada casilla. De esta forma. Cuanto mayor sea la cifra. más resolución y calidad podrá tener la imagen. Se refiere al número de puntos de la imagen o bits que caben dentro de la unidad de medida elegida. Puedes comprobarlo con la herramienta zoom de cualquiera de las aplicaciones. éstos no se consideran parte de la imagen y no se imprimirán. 2 Paint Shop Pro Consejo Una imagen no gana calidad si se aumenta su tamaño. los objetos o. Selecciona la opción nuevo. Selecciona el color blanco en la casilla Color de fondo de la zona Características de la imagen. El formato en que se guardará la imagen se aplicará en el momento de guardarla. Elige un lienzo a tu medida 1 Photoshop El lugar donde se colocan las imágenes de Photoshop se llama lienzo. En la venta que se abre a continuación. Si vas a imprimir la imagen. ésta se agrandará. tendrás un fondo blanco que destacará y te permitirá saber si los ele- 2 62 www. Éstos muestran un color cada uno y. simplemente. una vez dentro del programa. 2 Escribir el nombre 3 Seleccionar tamaño 3 Seleccionar el modo de color. se podrá ver en su totalidad sin necesidad de moverla. lo que realmente se abre es un lienzo donde la única imagen corresponde al fondo de la misma. Aquí es donde puedes colocar todas las imágenes que quieras y modificarlas a tu antojo. Sobre el lienzo se colocan las capas. la zona elegida aumentará de ta- Resumiendo. Elige 2 RGB si vas a utilizar el monitor. 1 Abrir menú Archivo 3 Seleccionar nuevo. maño. abre el menú Archivo de la barra superior de herramientas. La opción Color de fondo utilizará el color que se encuentre seleccionado en la barra de herramientas y Transparente. con las herramientas de zoom. como un tablero de ajedrez. 1 3 Resumiendo. 1 2 1 Para agrandar 3 Pulsar zoom 3 Pinchar en la imagen.es . con lo que hará más sencillo el trabajo con elementos transparentes. Selecciona el modo de color con la flecha de la siguiente casilla. hay que tener muy en cuenta el tamaño o la cantidad de píxeles que la forman. Si no aparece ninguno que se adapte a tus necesidades. 1 Elige la opción nuevo que se encuentra en el menú Archivo de la barra superior de herramientas. Para elegir otro tipo de medida. 3 Seleccionar fondo blanco. 3 Para alejar en Photoshop pulsar Alt y sobre la imagen. La última característica que debes elegir es el tipo de fondo que mostrará el documento.. Por defecto es 72 ppp (píxeles por pulgada). En Photoshop 7.Curso Imágenes de mapa de bits Las fotografías digitales se encuentran en un formato llamado bitmap o mapa de bits. Haz click con el botón derecho sobre la imagen y ésta se reducirá de tamaño en Paint Shop Pro..

*.. Suelta el botón del ratón y la selección aparecerá rodeada con una línea discontinua que parpadea.MSP) Paint Shop Pro – Imagen (*.TGA) Windows Clipboard (*.IFF) SGI (*. *. tón del ratón.PBM) Mapa de Bits Windows u OS/2 (*. *.CDR) Dibujo Ventura/GEM (*. Es recomendable elegir una cantidad alta de colores.RGB.CT) Truevision Targa (*. 4 Seleccionar agrandar 3 Cambiar resolución 3 Seleccionar Centrar imagen. El contenido del recuadro de la selección aparecerá dentro.SGI) Kodak Digital Camera (*.AI.JIF. puedes elegir una cantidad inferior de colores. Cambia las cifras que muestran la cantidad de píxeles que tiene el lienzo.PGL) Lotus Pic (*.JPEG) Compuserve Graphics Interchange (*.7 millones de colores. Las capas contienen los elementos que colocas dentro del lienzo.PSD) Portable Greymap (*.Retoque fotográfico. un recuadro blanco y otro con el contenido de la imagen.DCX) Zsoft Paintbrush (*. 1 Eligir la opción nuevo 3 Eligir ancho y alto de imagen. Selecciona las casillas Centrar la imagen horizontal y verticalmente.JPG. no tienes por qué estar disconforme con todos los elementos de la misma.PIC) Photoshop (*. Algunas son más precisas que otras.TIFF) Windows Enhanced Meta (*.RLE) Windows u OS/2 DIB (*.PNG) Portable Pixelmap (*.WPG) Zsoft Multipage Paintbrush (*. Accede al menú edición de la barra de herramientas superior.dxf) Compatible con JPEG y JFIF (*.CLP) Windows o Compuserve RLE (*. Varía las can- 4 Formatos admitidos por Paint Shop Pro 7 Amiga iff (*.EPS. La imagen que has elegido aparecerá en pantalla. *. En Photoshop 7. verás que hay dos iconos.PFR. 3 tidades de la zona inferior para elegir el lugar en que quedarán los gráficos que hubiera en tu lienzo. Si te fijas en la ventana de la derecha. *.LBM) Dibujo Corel Draw (*.KDC) Tagged Image File Format (*. 2 Seleccionar blanco como color de fondo 3 Elegir 16.BW. *. si no cambias las opciones. C:\Archivos de Programa\Adobe\Photoshop 7.PCT) MacPaint (*. desplaza el puntero hasta que el recipiente del ejemplo esté dentro del recuadro. dispones de varias herramientas de selección. En documentos Si la imagen se queda pequeña para tus necesidades. se crea una capa nueva de forma automática cada vez que utilizas el comando pegar algún conteni- 4 1 Photoshop Elige una imagen con la que desees practicar. antes de modificarlo.CUT) FlashPix (*. sólo aparecerá con un tamaño mayor. Selecciona la opción Abrir del menú Archivo y búscala en el disco duro.7 millones de colores. Resumiendo. Elige 16.FPX) GEM Paint (*.TIF.CMX) Deluxe Paint (*. incluso si vas a utilizar sólo unos pocos.HPG.BMP) Mapa de Bits WordPerfect (*.RGBA. dispones de una capa que es el fondo de color blanco y otra que contiene la imagen que acabas de pegar. *. Habrás creado un nuevo documento con las medidas exactas de la selección que has hecho.emf) Windows Meta (*. Dirígete al menú Archivo y crea un nuevo documento de la manera que explicamos al principio de la lección. Vamos a ver algunas que son comunes a ambas aplicaciones. Selecciona elementos de una imagen En una fotografía. *. Pulsa cerca de la esquina superior izquierda de la imagen y sin soltar el bo- 2 v Nº 94 63 . Pulsa aceptar cuando la hayas encontrado. Para seleccionar lo que realmente te disgusta o lo que más te interesa y modificarlo a tu gusto.0\Muestras\.TUB) PC Paint (*. 3 Pulsar Aceptar.GEM) Dr.DRW) Microsoft Paint (*. Selecciona la opción agrandar del menú Imagen que se encuentra en la barra de herramientas superior.DIB) WordPerfect Vector (*.jpg que está en la carpeta de muestras de Photoshop.WPG) Micrografx Draw (*.JLS. *.PCD) Lenguaje gráfico HP (*. Halo (*..RAW) Sun Raster Image (*. *. Parte 1ª mentos de tu lienzo han encajado correctamente con el fondo. Selecciona la opción Copiar.PCX) en blanco y negro o ilustraciones. Elige la opción Pegar del menú Edición de la barra de herramientas.IMG) Kodak Photo CD (*.CGM) Corel Clipart (*. Utiliza la herramienta zoom hasta que la imagen ocupe casi toda la pantalla.PPM) PostScript Encapsulado (*. 1 Pincha en la herramienta Marco rectangular de la barra de herramientas principal. Si no había nada en el lienzo.MAC) Mapa de bits Portátil (*.PS) Raw File Format (*. ya que siempre se puede reducir la cantidad de éstos en el último paso de la edición. *. ya que es la máxima profundidad de color que permite el programa. se situará en el centro del mismo.HGL. *. En este caso usaremos Pimientos. Si tienes una imagen en tu lienzo.PIC) Macintosh PICT (*.GIF) Computer Graphics Metafile (*. En este caso. todavía puedes ampliar o reducir el tamaño del lienzo.PSP.SCT. Pulsa Aceptar y tendrás un lienzo en blanco donde poder experimentar con las herramientas que ofrece el programa.PGM) Portable Network Graphics (*.WMF) Autodesk Drawing Interchange (*. *. Deja las opciones como aparecen en la pantalla de configuración y pulsa 3 aceptar.RAS) Tono contínuo SciTex (*. *. en la sección con el título Capas. pero es muy importante saber cuál se adapta mejor a cada situación y al tiempo disponible.

Curso
do. Otro método, mucho más rápido, de quedarte con una zona rectangular de la imagen y deshechar el resto, es la herramienta recortar. Selecciónala en la barra de herramientas, pulsa y arrastra en un punto inicial de la imagen, Suelta el botón y una vez que tengas dentro del rectángulo el área elegida, haz doble clik en el interior de la selección.

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

1

al punto de inicio, deja de apretar el botón y comprueba que la línea de selección se corresponde con el objeto que deseas. Una vez que has hecho la selección, siempre puedes añadir o quitar zonas al contorno que has dibujado. Incluso puedes crear agujeros y zonas independientes dentro de una imagen. Para poner

2

un ejemplo, vamos a eliminar el trozo de tallo y a añadir el tallo verde de la zona superior. Pulsa la tecla Alt y sin soltarla, comprueba que junto al puntero del ratón ha aparecido un símbolo 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, verás que hay una nueva línea discontinua dentro de la anterior. Ahora la selección comprende sólo la zona roja del tomate.

Pulsa cualquiera de las dos teclas de Mayúsculas que hay en el teclado. Sin soltarla, rodea el tallo verde que está encima del tomate. Suelta primero el botón del ratón y después la tecla mayúscula. El tallo ya forma parte de la selección.

3

Resumiendo...
1 Hacer zoom 3 Seleccionar lazo 3 Seguir contorno 3 Soltar botón. 2 Pulsar Alt 3 Rodear el tallo. click con el botón 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 Mayúsculas 3 Rodear el tallo 3 Soltar botón del ratón 3 Soltar
mayúsculas.

Uso de la máscara rápida
Photoshop
El modo máscara rápida que ofrece Photoshop permite utilizar las herramientas típicas del dibujo, como pinceles, para crear selecciones. Se trata de una forma rápida y sencilla de hacer que los bordes de las áreas seleccionadas sean más suaves o que ofrezcan un estilo más natural y perfecto. Crea una selección en Photoshop con cualquiera de las herramientas especiales de la barra principal y el método explicado en pasos anteriores. Selecciona el botón Máscara rápida 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 selección. Cualquier acción que realices con las herramientas de dibujo, hará que varíe la selección 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 selección, algo también muy útil y rápido. Pulsa el botón Editar modo estándar, que se encuentra junto al de Máscara rápida. Así volverás a la situación original con las áreas seleccionadas delimitadas por líneas discontínuas. Ahora, ajustaremos

que deseas seleccionar, lo haces con la que quieres eliminar. Para cambiar las propiedades de la imagen que indica la máscara, haz doble click en el botón máscara rápida y aparecerá una ventana de opciones. Elige ahí, el color que tendrán las áreas que quedarán en la zona de máscara, el de las seleccionadas y la transparencia. Pulsa Ok. un poco las selección, 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 método de trabajo es mucho más sencillo si en lugar de pintar la zona

1

Resumiendo...
1 Crear una selección 3 Seleccionar Máscara rápida. 2 Pulsar Editar modo estándar de la máscara rápida 3 Seleccionar
herramienta pincel 3 Elegir las opciones de la máscara rápida 3 Pintar las zonas que delimitan la selección.

2
64

www.pctoday.es

Curso

Selecciona más rápidamente
Photoshop
Una de las herramientas más avanzadas de Photoshop 7 es el filtro Extraer. Éste permite seleccionar perfiles y zonas de una imagen que, de otra forma, requerirían mucho trabajo y paciencia. Te mostramos cómo seleccionar el fondo de una imagen, para poder eliminarlo o sustituirlo por otro. Es aconsejable que elijas una fotografía que contenga una silueta bien definida, por ejemplo, la del águila que se encuentra entre las muestras de Photoshop, aguila.psd. Selecciona la opción 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 sección Opciones de herramienta, que se encuentra a la derecha de la ventana, elige el tamaño 15 de pincel. Con el botón izquierdo del ratón, pulsa y arrastra el cursor alrededor de la figura que deseas seleccionar, como muestra la

Atajos de teclado
La mayoría de las acciones que se realizan con el ratón, tanto en Photoshop como Paint Shop Pro, se pueden acelerar mediante el uso del teclado. La pulsación de algunas combinaciones de teclas, no sólo ahorran tiempo, sino que enriquecen los resultados, ya que permiten acciones más complejas. Algunas de las más utilizadas durante el curso són: Ctrl + N – Nuevo documento. Ctrl + O – Abrir documento. Ctrl + S – Guardar documento. Ctrl + C – Copiar. Ctrl + V – Pegar. Ctrl + X – Cortar. Mayus + Herramienta selección – Añadir a la selección. Alt + Herramienta selección – Restar a la selección. Ctrl + Z – Deshacer acción. s

2

1

combinación de teclas Ctrl+Z o elige Deshacer del menú Edición de la barra superior. Cuanto más estrecha y ajustada sea la línea trazada, más precisa será la operación y la selección saldrá mejor. También puedes activar la casilla resaltado suavizado para que la línea se ajuste sola. imagen. Si deseas que el color sea diferente y que se distinga mejor del fondo, cámbialo en la sección resaltar. Puedes dejar de hacer click en cualquier momento y retomar el trazado después, la nueva línea se añadirá 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

3

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 botón previsualizar. Pulsa el botón aceptar si estás de acuerdo y podrás 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 tamaño 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 gráJunto a desarrollos de granficos que acepta, incluye los des compañías de software, más habituales como PSD de también se pueden encontrar Photoshop, aunque éste sólo 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 código abierto y En cuanto a las caracterísque cualquiera puede modifiticas y herramientas de edicar con total libertad. ción, admite capas y canales Además, ofrece versiones, filalfa para trabajos avanzados. tros y complementos nuevos Todo esto, con unos requisicada pocos días. Otro punto The GIMP, www.gimp.org, utiliza ventanas flotantes tos que no exigen una a su favor es que no sólo se para mostrar todos los elementos del programa. máquina demasiado potente limita al sistema Windows o o moderna, a partir de edición en castellano y en otras lenMac, sino que está disponible también Windows 98 y 64 Mb de RAM. guas diferentes al omnipresente para Linux y otros sistemas operativos También puedes encontrar el prograinglés. Esto es fruto del trabajo de menos habituales. Es muy importante, miles de entusiastas que lo consideran ma en www.softonic.com, con una pequeña explicación de cómo descardestacar que al poco tiempo de lanel mejor software para la edición de garlo, totalmente en castellano. s zarse una nueva versión, 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 inalámbrico (*.WBMP, *.WBM) PDF genérico (*.PDF, *.PDP, *.AI) EPS genérico (*.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 además ambos poseen excelentes herramientas para el control de la imagen, con las cuales podrás mejorar notablemente el aspecto de tus fotografías digitales.

Guía del curso
1. Introducción al retoque fotográfico.
Primer contacto con las herramientas de Photoshop 7 y Paint Shop Pro 7. Conceptos básicos. Selecciones sencillas. Máscara rápida. Extraer. The GIMP. PC Today nº 94

L

2. Corrige el aspecto general de tus fotos.
Brillo y contraste, capas de ajuste, tono, exposición y color. PC Today nº 95

3. Técnicas de reparación de fotos (I).
Reparar manchas y texturas, corregir polvo y rascaduras, eliminar el moiré. PC Today nº 96

4. Técnicas de reparación de fotos (II).
Eliminar arañazos 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 mayoría de los usuarios que han probado alguna vez Photoshop o Paint Shop Pro, seguramente han jugueteado a intentar hacer montajes fotográficos (por ejemplo, reemplazar un personaje por otro, eliminar algún elemento no deseado, etc.). Son características espectaculares que hoy en día están 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 fotografías, tanto de las tomadas digitalmente como las escaneadas del papel.

La sutileza al iluminar una foto, puede crear un clima y una atmósfera muy particular; una composición sosa o sin interés, puede transformarse en una imagen hermosa, en un placer para la vista, con una correcta iluminación. La disposición de los elementos de una imagen también se puede modificar ligeramente, sin que se note, para corregir los efectos de la improvisación o la falta de tiempo cuando hiciste una foto. En este capítulo del curso de Fotografía Digital aprenderás 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

Retoque fotográfico. Parte 2ª

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 fotogafía. Son parámetros que afectan radicalmente a la calidad de cualquier imagen. Incluso pueden "salvar" algunas fotografías tomadas en malas condiciones, como interiores con escasa iluminación, 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 píxeles más claros y los más oscuros, se convierten a blanco y a negro, respectivamente; así mejora notablemente el aspecto de imágenes fotográficas.

Consejo
En Photoshop 7, los valores de brillo y contraste pueden funcionar de manera automática, con el uso de parámetros estandarizados. Para ello vé al menú Imagen, selecciona Ajustes y abre Niveles Automáticos (o pulsa el atajo de teclado Mayús.+Ctrl+L). Ten en cuenta que esta característica, al ser "estandarizada", funciona de manera similar sobre todas las imágenes, con lo que no siempre obtendrás unos resultados óptimos. Si no estás seguro de haber obtenido un buen resultado con Niveles Automáticos, mejor utiliza Brillo y Contraste manualmente, según tu propio criterio.

cación Previsualizar para ver cómo afectarán los cambios introducidos a la imagen final. Intenta que la imagen sea nítida, con un buen contraste, y que se observen los detalles con gran claridad.

4

Haz click en el botón Aceptar para que los cambios se apliquen a tu fotografía.

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 triángulos y eli-

3

con algo de tiempo y práctica conseguirás resultados cada vez mejores.

Photoshop

Paint Shop Pro
Desde el menú Archivo, selecciona Abrir. Luego elige una imagen, selecciónala, y haz click en el botón Abrir.

1
Existe un ejemplo muy sencillo de aplicación de brillo y contraste en la vida cotidiana: el control de iluminación del televisor. Ambos parámetros 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 práctico, es recomendable que utilices alguna foto que encuentres, en blanco y negro (escala de grises), o incluso alguna instantánea 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 más 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.

1

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. También 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 fotografía, de forma automática. Haz click en el botón 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 diálogo.

2

Accede al menú Colores de la barra de herramientas superior. Despliega las opciones que cuelgan de la sección Ajustar. Luego selecciona Luminosidad/Constraste (o pulsa la combinación de teclas Mayúsculas+B); se abrirá un cuadro de diálogo.

2

4

v

Resumiendo...
Photoshop
Una vez en la nueva ventana, desplaza ambos reguladores hacia la derecha, cada uno en forma independiente (también puedes teclear los valores); marca la casilla de verifi-

3

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 fotografía 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

De esta manera. Equilibrio de Color. res que hemos ingresado si el aspecto general no es satisfactorio. Mueve los reguladores hacia la derecha buscando la mayor nitidez posi- 3 Se abrirá la ventana Propiedades de capa. Más adelante aprenderás a utilizar las capas de ajuste combinadas con los modos de fusión. podemos eliminar cuando queramos la capa de ajuste.) mediante las capas de ajuste. moviendo el regulador (desplazando el regulador a la derecha. Los cambios se aplican sólo a la capa de ajuste y afectan a la capa subyacente. y no a la imagen “real”. sin preocuparnos por estropear el resto. elige Nueva capa de ajuste. sin necesidad de modificar sus píxeles constantemente. deja el Modo de Mezcla en Normal. Las capas de ajuste afectan a todas las capas ubicadas debajo. Cuando hayas conseguido que la imagen sea lo suficientemente nítida. y tilda Resumiendo. En la solapa General. Es posible mover los objetos que se encuentran en cada capa. 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.. Curvas. Photoshop 1 Abre el menú Capa. Cada una de esas capas es independiente. Este procedimiento es muy útil para comparar cómo era la imagen antes de los cambios. selecciona Nueva capa de ajuste y finalmente elige Brillo / Contraste. Al tener aislados los distintos elementos que componen una imagen. el resto de capas no se modifican. etc. Las capas de ajuste permiten modificar la información de color de los píxeles ubicados por debajo de ellas. los ajustes de brillo y contraste se reducirán y serán más leves. y elige Capas para observar la capa de ajuste que has creado. saturación.Curso Utilizar capas de ajuste Antes que nada: ¿Qué son las capas y cómo se utilizan? Las capas funcionan como si fueran hojas transparentes. • Capas de relleno: En éstas se pueden aplicar motivos. Abre el menú Ventana. Opacidad 100%. o bien modificar los valo- Paint Shop Pro 1 2 Ve al menú Capas. pero el resultado de este trabajo será distinto ya que lo aplicarás a una Capa de Ajuste. 3 4 2 • Capas vectoriales: Permiten crear trazados y formas vectoriales. Puedes modificar su opacidad.pctoday. 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. los cambios serán mas intensos. patrones o degradados. la casilla de verificación. modifica los parámetros de Luminosidad y Constraste moviendo los reguladores. de tal manera que si se trabaja sobre una de ellas. Intenta conseguir siempre una imagen nítida y pura. Aplicar variables simples como brillo y contraste (o algunas más complejas como niveles. Tras verificar los cambios pulsa el botón Aceptar. tono. • Capas de ajuste: Son las que más nos interesan para manipular fotografías digitalmente. Evita contrastar demasiado la imagen. Si la opacidad está por ejemplo al 50%. o cambiar el orden de apilado. Consejo Las capas de ajuste pueden modificar también otras variables.. Si haces click en el icono del ojo. Tono y Saturación. la capa de ajuste funciona como un "filtro". que pueden apilarse unas sobre otras. Lo que estaba abajo puede moverse arriba. pon un nombre a la capa. pulsa en Aceptar para aplicar los cambios a la fotografía. Se abrirá el mismo cuadro de diálogo de Brillo y Constraste que ya conoces. y minimiza el margen de error. moviendo el regulador que aparece en el sector derecho de la ventana. ya que puede pixelarse y perder sutileza. nos dan la posibilidad de experimentar con variaciones de tono y de color. y selecciona Luminosidad / Contraste. Tu misión siempre es conseguir una imagen que no sea borrosa. En otras palabras. En la solapa Ajuste del mismo cuadro de diálogo. en lugar de efectuar cada retoque por separado. y obtendrás cada vez más herramientas para retocar y corregir tus fotos digitales. Corrección selectiva. gozamos de una enorme libertad para retocarlos o reubicarlos. o viceversa. opacidad 100%). como Niveles. etcétera. Céntrate en la claridad de los detalles. algo súmamente útil ya que podemos corregir varias capas a la vez con un solo ajuste. Modifica la opacidad de la capa de ajuste. otorga un mayor control. y podrás ver la imagen sin los cambios que has aplicado.es . editar y modificarl el texto. momentáneamente oculta. y cómo ha quedado después de los cambios. ya que los cambios son aplicados sólo a la capa elegida. a través del cual podemos ver las capas inferiores. y moviéndolo hacia la izquierda los cambios serán más leves). En la Paleta Capas observa la capa de ajuste que has creado. En Photoshop y Paint Shop Pro puedes encontrar varios tipos de capas: • Capas de texto: Permiten escribir. la capa queda 4 Ir al menú Ventana 3 Elegir Capas 3 Observar Capa de Ajuste 5 Modificar opacidad de la capa buscando nitidez 4 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.

sin soltar el botón izquierdo del ratón. Observa los cambios en la fotografía. cogidas por los manejadores. para oscurecer las sombras. a medida que los vamos realizando. Pulsa Aceptar. Luego haz otro click en una zona superior de la misma diagonal. haz click en el punto de control que acabas de crear. A continuación Mueve ambas marcas en forma independiente (primero una. sombras y medios tonos. 2 Pulsa el icono que representa un ojo para ver cómo afectan los cambios a la imagen. En la línea diagonal (aparece por defecto) todos los pixeles tienen los mismos valores de entrada y salida. haz click en el punto de control y sin soltar el botón izquierdo desplázalo hacia abajo. para luego aplicarla en otra imagen. v Resumiendo. Previsualizar: muestra el resultado parcial del efecto de nuestros cambios. Suavizar: permite suavizar la curva creada. Ésta nos permite controlar cada una de las 256 sombras en forma independiente. En el cuadro de diálogo Dirígete al menú Colores y selecciona la opción Ajustar.. La herramienta Curvas puede ajustar la gama de tonos de una imagen. las sombras ahora son más oscuras. conseguirás que la línea recta se curve formando una S. los nuevos valores de luminosidad (de salida). 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 aún más 3 Observar cambios Curvas. de manera que la fotografía está más contrastada y tiene mejor definición. Parte 2ª El tono. 3 Entrada / Salida: permite ver los valores de entrada y de salida del punto de la curva. 1 1 Canal: con él puedes restringir Paint Shop Pro 1 Pulsa Ctrl y haz click simultáneamente en un área clara de la imagen que veas opaca. y escala de grises: muestrea los tres valores a partir de la imagen. 2 Gráfico de curva: el eje horizontal representa los valores de luminosidad originales (de entrada). Punto blanco. 2 la corrección de brillo y contraste a un canal determinado. 4 Modo Curva / Modo Mapa Arbitrario: con ellos puedes 5 6 7 8 9 cambiar entre los distintos modos de trabajo con curvas. y luego la otra). negro. agregando otra marca. las curvas y el contraste Photoshop y Paint Shop Pro cuentan con un arma aún más poderosa para modificar los ajustes de brillo y contraste de una imagen: la herramienta Curvas. ya que ésta trabaja solamente en tres variables. y las luces más claras. Muy útil en el modo Mapa Arbitrario.. Nuevamente añadirás otro punto de control al gráfico. para dejar una marca en ella. y sin soltar el botón izquierdo del ratón muévelo hacia arriba para aclarar las luces de la foto. Finalmente elige Curvas. Pulsa Ctrl y haz click click en un área oscura que necesites ens o m b r e c e r. despliega el submenú Ajustes y luego elige Curvas (o si prefieres pulsa el atajo de teclado Ctrl + M). Finalmente haz click en Aceptar cuando el equilibrio entre las lu- 4 ces y las sombras sea parejo.Retoque fotográfico. Esto añadirá automáticamente una marca (llamada punto de control) en el gráfico de Curvas. modificando cualquier punto de la escala tonal entre 0 y 255. En el cuadro de diálogo Curvas. luces. Cargar / Guardar: carga o guarda una configuración de curvas. Como resultado. Las sombras deben haberse oscurecido. y el vertical. El cuadro de diálogo curvas 4 Photoshop Abre el menú Imagen. Auto: el programa realiza los ajustes automáticamente. De esta manera se consigue un control aún mayor que con la herramienta Niveles. haz click en una zona inferior de la diagonal. Para mover las marcas debes hacer 3 3 Ctrl + click en zonas oscuras 3 Mover punto de control para oscurecer aún más 3 Observar cambios 3 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. consiguiendo una mejor nitidez y mayor contraste en la imagen. de manera que necesite mas iluminación. y las luces deben ser más claras. 3 Mover marcas para formar una S 4 Click en O j o para ver modificaciones 3 Aceptar Nº 95 57 .

en el apartado Opacidad. Busca y selecciona Subexponer Color. y selecciona el Bote de Pintura. También. Cuando halles el Gris 50% seleccionalo haciendo click. abre el menú desplegable Modo de Mezcla. Sin salir de la ventana actual. Paint Shop Pro En la paleta Capas. selecciona Color Frontal. para ello te dirígete al menú Selección y elige Todo (o la combinación de teclas Ctrl + A). la luz solar. para crear una nueva Capa. 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ú Edición 3 Rellenar capa con Gris 4 Cambiar Modo de Fusión 3 Subexponer Color la izquierda. Siempre es conveniente comenzar a trabajar con una fotografía bien expuesta. Incluso un negativo extremadamente sobreexpuesto o subexpuesto. se dice que está sobreexpuesta. Finalmente rellena la nueva capa con el color Gris 50% del siguiente modo: ve al menú Edición y selecciona Rellenar. sin embargo a veces el fotómetro puede fallar. y cuando es demasiado oscura está subexpuesta. mostrándote toda el área seleccionada. Selecciona toda la superficie del lienzo de la nueva capa.. 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 2 En la paleta Muestras. 2 4 Photoshop Ve al menú Capa. Busca y selecciona la opción Sombra.es . la exposición es el tiempo que debe permanecer a la luz una placa fotográfica o un papel sensible. para rellenar automática- mente la capa de color gris. Aunque la tecnología no suele hacer milagros. pueden dañar tus viejas fotografías en papel. Ahora haz click en cualquier punto de la imagen (recuerda que estás trabajando sobre la nueva capa que has creado). En el cuadro de diálogo Rellenar. selecciona Nueva Capa (te interesa ponerle un nombre para identificarla. selecciona el color Gris 50% haciendo click en la muestra. Ve a la Barra de Herramientas. La imagen ahora debe tener una correcta exposición (no debe estar demasiado iluminada. Esto oscurecerá la imagen de un modo muy pronunciado. escanea siempre el negativo. En la Paleta Colores. o el clima puede resultar adverso. abre el menú contextual. Ve a la paleta Capas.Curso Corregir y mejorar la exposición Más de una vez te debe haber sucedido que después de sacar una gran cantidad de fotos de momentos irrepetibles de tu vida. además de las impresiones fotográficas. Demasiada luz u oscuridad han arruinado tus fotos. ya sea con una cámara tradicional o con una digital. Puede que hayas tomado fotografías en condiciones forzadas. ni demasiado oscura). El resto de opciones no son importantes en este momento y las dejaremos como están. La imagen debe haber mejorado notablemente. varía su opacidad del 100% al 70% desplazando el regulador hacia 5 Resumiendo. de manera que quede impreso. Cuando recibe demasiada luz. o la humedad. ya que con él obtendrás mejores resultados (muchos escáneres actualmente cuentan con esta utilidad de serie). Como consecuencia. haz click en el icono de la esquina superior izquierda. y dispones además de su negativo. te has quedado decepcionado con el resultado. completa las modificaciones de la opacidad inroduciendo el número 70 en la casilla correspondiente. 1 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. como un contraluz. nómbrala por ejemplo “Capa para oscurecer”).. y un menú emergente te informará del valor de cada color.pctoday. y selecciona la capa que has creado haciendo click en su nombre: “Capa para oscurecer”. 3 3 En la misma ventana de Propiedades de la Capa. Unas líneas punteadas rodearán toda la superficie de la imagen. Nombra la nueva Capa como “Capa para oscurecer”. en el Modo de Fusión. Esto se debe a problemas en la exposición. los recuerdos imborrables de tu vida se desvanecen. estando equilibrados los tonos oscuros y los tonos claros. o bien que por alguna razón no se haya encendido el flash en el momento de la instantánea. 4 Consejo Si deseas mejorar alguna vieja foto impresa en papel. 1 Sin salir del mismo cuadro de diálogo. selecciona el Gris al 50%. el paso del tiempo. o tecleando los valores. Haz click en Aceptar para validar los cambios. Sitúa el puntero del ratón sobre las muestras. En fotografía tradicional. es posible mejorar o corregir muchos de estos problemas de exposición con las herramientas adecuadas. escribiéndolo en el mismo cuadro de diálogo. Por eso siempre es bueno conservar los negativos. siempre contendrá más información y detalles que la copia que hayas hecho en papel. las pilas de la cámara se agotan.

o bien la más iluminada. Existen básicamente dos tipos de color: el aditivo. observa los canales de color y selecciona el que se encuentre más saturado. crean el negro (com o muestra la imagen). Observa el resultado parcial en la fotografía que has modificado: de esta manera. hay que aumentar el amarillo (además de disminuir el azul.. La superior representa los tonos del original. el Histograma (el gráfico que muestra el cuadro de diálogo Niveles) se muestra muy cargado en la parte izquierda. Cuando los colores primarios se suman (de ahí el nombre de aditivo) crean el color blanco. y combinando los primarios sustractivos se obtienen los primarios aditivos. 3 Photoshop Crea una nueva capa de Niveles: para ello. Como la imagen está satura- Desplaza los reguladores hasta quitarle saturación al color. elige Nueva Capa de Ajuste. 1 Ve al menú Capas. • Colores aditivos: Se forman a partir de una fuente de luz. si en una imagen predomina demasiado el color azul. Cuando la corrección de una fotografía mediante el uso de Capas de Ajuste comienza a complicarse. 3 Resumiendo. sobre la zona potencial de blanco puro. y selecciona el apartado Niveles. por ejemplo. es importante que conozcas algunos fundamentos básicos de su mundo. se obtienen los colores primarios sustractivos. • Colores sustractivos: El color se determina por la absorción de la luz. Cuando la foto luzca colorida y brillante (los colores deben ser nítidos y bien diferenciados entre sí). Primero puedes hacerlo de forma drástica para ver el efecto y. claro está). los colores de tu monitor son aditivos ya que utilizan la luz como fuente. Cuando los colores secundarios (cian..Retoque fotográfico. etcétera) es un ejemplo de color sustractivo. Por ejemplo. La impresión de tinta sobre papel (revistas. y selecciona Niveles. accede al menú Capa. de manera que puedas comparar entre un resultado y otro. Recuerda que al trabajar solamente en una capa. Haz click en el icono que representa una flecha y un ojo para que a continuación se active la opción y que te 2 Consejo 2 Busca alguna zona de la foto que pudiera ser originalmente de blanco puro. 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 saturación 3 Aceptar Nº 95 59 . se añade tinta negra en el proceso de impresión. los colores se aclaran si desplazas el regulador hacia la izquierda. y el sustractivo. Coge la herramienta Cuentagotas Blanco (el tercero cuentagotas de la derecha. En el menú correspondiente a las capas. mientras que la inferior lo hace con los nuevos valores que hayas aplicado. y seguramente encontrarás alguna foto que haya salido muy oscura. elige Nueva Capa. y el siguiente Nivel de Salida. magenta y amarillo) se combinan. Si no has modificado la configuración por defecto del programa. haz click s en el botón Aceptar. lo mejor es volver a empezar. desliza el pequeño triángulo correspondiente al medio tono gris. seguramente podrás aplicar retoques y mejoras a tus fotografías con mucha más calidad. Debes observar detenidamente la gama de colores y utilizar el sentido común para decidir cuál elegir. Parte 2ª Optimizar el color Seguramente la mayoría de tus fotos (tanto en papel como digitales) son a todo color. verás que aparece la solapa correspondiente a la sección Ajuste. con algún color dominante. Observa la imagen en que la suma del rojo. 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. Recuerda que puedes ocultar y mostrar cualquier capa pulsando en el icono del Ojo (en Photoshop). no estás modificando los pixeles “reales” de la foto. El amarillo neutraliza al azul ya que éste es su opuesto. El resultado: ¡una imagen con menos azul y mucha más calidad! Rebusca entre tus álbumes familiares. habrás eliminado la dominante de color. Si comprendes profundamente los rudimentos del color y de la luz. con pequeños incrementos hacia la izquierda. Ten en cuenta que en el apartado Nivel de Entrada. o en el icono de Gafas (en Paint Shop Pro). agudizar la vista. con distintos niveles y variaciones cada una. y realizar paso a paso el siguiente ejemplo práctico para aprender a corregir tus fotos utilizando los Niveles: Paint Shop Pro muestra los cambios que se vayan produciendo mientras modificas los valores siguientes. Ahora es cuestión de observar detenidamente la imagen. con lo cual puedes eliminar la capa y crear una nueva. Si el resultado aún es una imagen algo oscura. en intervalos suaves para conse- 1 da de color. ¿Te preguntas para qué sirve este “trabalenguas”? Pues para algo importantísimo: comprender esta relación opuesta. periódicos. guir un efecto más acorde con tus intenciones. Por lo tanto. Mediante la combinación de los colores primarios aditivos. se aclara moviéndolo hacia la derecha. Otra alternativa es crear varias Capas de Ajustes. después. verde y azul dan por resultado el blanco. dentro del mismo cuadro de diálogo) y con dicha herramienta haz click en la fotografía. Pero para conseguir negros puros y sombras más intensas.

Máscara rápida. Introducción al retoque fotográfico. Reparar manchas y texturas. Pero es muy probable que tus viejas y más preciadas fotos (impresas en papel) estén dañadas por el paso del tiempo. PC Today nº 96 4. tampoco hay que olvidar que es posible que por diversas razones también las fotos tomadas con una cámara digital muestren defectos parecidos a los que aparecen en antiguas fotografías. Te mostraremos cómo solucionar los problemas de “limpieza” de cualquier foto que esté deteriorada. enfoque suavizado. Recreando fotos creativamente. tono. corregir polvo y rascaduras. decoloridas y llenas de polvo. mejorar los retratos con luz. Sin embargo es muy posible que las fotos estén sucias. Para el siguiente paso te servirás de tres herramientas: Adobe Photoshop. Brillo y contraste. modificar personajes. El primer paso para salvarlas es digitalizarlas. Técnicas de reparación de fotos (II). 58 www. con manchas de humedad. Extraer. Fondos personalizados. PC Today nº 98 6. A menudo suele ser un trabajo duro y fatigoso corregir este tipo de problemas en las viejas fotografías impresas en papel. PC Today nº 95 3. Técnicas de reparación de fotos (I). PC Today nº 94 P 2. Puedes salvarlas con tan sólo escanearlas y seguir los pasos que te mostramos. Sólo habrá que aislar el problema y actuar con la herramienta más adecuada para cada situación. PC Today nº 99 uede que guardes aún muchas fotos familiares. The GIMP. capas de ajuste. En ese caso el proceso de restauración es el mismo. Eliminar arañazos rectos. PC Today nº 97 5. Jasc Paint Shop Pro… y PC Today. exposición y color. Eliminar defectos de la piel.Curso Técnicas de reparación Las actuales cámaras digitales permiten tomar instantáneas. reemplazando los viejos negativos por pequeñas tarjetas de memoria. Selecciones sencillas. Conceptos básicos. borrar elementos no deseados. disimular el paso del tiempo. Guía del curso 1. Sin embargo. Corrige el aspecto general de tus fotos. abuelos y demás ancestros. Embellecer y refinar retratos. minimizar manchas. cientos de instantáneas de tus padres. Con la ayuda de un escáner es muy sencillo convertir esos frágiles trozos de papel o diapositivas en ficheros de nuestro ordenador. Finalmente. las posibilidades de los programas de retoque fotográfico hacen que este tipo de correcciones se pueda resolver en unos cuantos y sencillos pasos. bordes y marcos creativos.pctoday. Primer contacto con las herramientas de Photoshop 7 y Paint Shop Pro 7.es . eliminar el moiré.

Son herramientas Dirígete una vez más a la Barra de Herramientas y escoje la herramienta Tampón de Clonar. desplázalo de izquierda a zando para pintar. en Modo selecciona Normal. Puedes también ac- A continuación trabajarás en detalle. 5 derecha y de arriba abajo. árboles. etcétera) y reproducirlas en la zona donde sea conveniente. Tomarás muestras “sanas” de la imagen. Luego desde la Barra de Propiedades. Intenta elegir alguna foto vieja. etcétera. valores de brillo. aunque cada una posee algunas características que las diferencian entre sí. buscando zonas defectuosas. En cuanto al Pincel Corrector de Photoshop (incluído desde la versión 7). tejidos. realiza la siguiente configuración: despliega el menú Pincel y escoje un grosor 3 de 15 píxeles y bordes suavizados. luz y contraste. haciendo click con la lupa.) ceder a ella pulsando la letra Z. Te mostrará una miniatura de la fotografía por la que podrás desplazarte moviendo el rectángulo rojo. y haz click en el icono de la lupa (herramienta 2 v Photoshop Desde el menú Archivo. Luego escoge alguna fotografía manchada que hayas escaneado previamente. Sin embargo. en el menú desplegable elige Abrir. con éstas herramientas es posible tomar muestras de la imagen. la reconocerás enseguida ya que es el icono de la lupa. dirígete a la Paleta de Herramientas. y comienza a pintar sobre el área dañada. Haz click en Abrir. Ahora debes acercarte a la zona en donde se encuentra la mancha.Retoque fotográfico. Puedes utilizar estas técnicas para reparar detalles que no aparecen en la foto por otro tipo de problemas (mal encuadre. El funcionamiento de estas herramientas es similar. Abre el menú Ventana. para tomar una muestra de la imagen. Nos referimos al Pincel Corrector y el Tampón de Clonar (en Photoshop) y el Pincel de Copia (en Paint Shop Pro). amplía el área sobre la cual trabajarás. De este modo podemos copiar zonas de texturas (como cielos. cha o textura como marcas de dedos. o que tengas almacenada en tu disco duro. Para ello. Una vez abierta la imagen. algunas de ellas podrían ser clasificadas como “mágicas”. Luego suelta la tecla Alt. piel. utilizando el Navegador de Photoshop. y elige Navegador para que se abra la paleta. En el siguiente ejercicio aprenderás a eliminar una gran mancha utilizando algunas de las herramientas de clonación. Debes elegir zonas cercanas y similares (en cuanto a luz y textura) para que el retoque sea prácticamente impreceptible Desplázate por la imagen. y al soltar te habrás acercado al detalle como si hubieras colocado una lupa sobre esa zona. imprescindibles a la hora de retocar cualquier fotografía. Flujo 100%.. También puedes pulsar el atajo Ctrl + O para abir imágenes. 2 Desde la Barra de Herramientas de Photoshop (suele encontrarse a la izquierda del área de trabajo) elige la Herramienta Zoom. éste no solamente toma como fuente una muestra de la imagen. que tenga alguna man- 1 Acercar).. y pintar con ellas en un área distinta o incluso en otra imagen. Busca una zona de la foto en buen estado. Opacidad 100%. selecciona Abrir y escoje la imagen que hayas escaneado en tu disco duro. y desplazando sin soltar el Nº 96 59 . sino que además compara la textura. Amplía el área de la foto que vas a corregir. Photoshop te muestra dos cursores: el que estás utili- 4 Paint Shop Pro Abre el menú Archivo. y marca la opción Alineado. huellas. para trabajar en detalle: haz click con la lupa. A grandes rasgos. y una cruz que indica la zona de muestra. Mientras pintas. Se dibujará un recuadro delimitador. objetos en primer plano. y sin soltar el botón del ratón. ya que consiguen unos resultados increíblemente sorprendentes con una gran sencillez en su uso. Parte 3ª Reparar manchas y texturas Tanto Adobe Photoshop como Jasc Paint Shop Pro poseen una innumerable cantidad de herramientas para el retoque digital de fotografías. Con la Herramienta Tampón haz click mientras presionas la tecla Alt. o bien pulsar el icono de la carpeta abierta en la Barra 1 de Herramientas Estándar. y las reproducirás sobre las partes dañadas.

para trabajar con gran detalle. selecciona Nueva. Aunque muchas viejas fotos ya estan dañadas o sucias por el paso del tiemo. es conveniente que utilices pinceles pequeños y trazos cortos para clonar. para la parte superior del hombro. Tambien puedes pulsar el atajo de teclado Ma- 1 60 www. Debes tener bien claro algo muy importante para minimizar los problemas antes de tiempo: la limpieza de tu escáner. escoje una imagen que se encuentre en tu disco duro o CD.. En cualquier caso y dependiendo de la textura a corregir es posible que tengas que ajustar el grosor del pincel. 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 fotografía 3 Abrir 2 Herramienta Acercar 3 Hacer cl i c k y desplazar 3 Ampliar zona defectuosa 3 Tampón 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 Configuración 3 Definir parámetros del pincel 4 Click + Alt para tomar muestras válidas 3 Pintar sobre área dañada 5 Abrir Navegador 3 Desplazarse por la imagen 3 Seguir corrigiendo 4 Mayúsculas + Click para tomar muestras 3 Pintar zonas defectuosas 5 Paleta Configuración 3 Modificar grosor del pincel 3 Seguir corrigiendo Corregir polvo y rascaduras Existen muchas y muy variadas técnicas para eliminar el polvo y las manchas de las viejas fotos. de acuerdo al problema particular de cada foto. Haz click en Abrir. se han tomado muestras de la misma. así conseguirás copiar texturas de una manera más fiel. lueta del pincel que has configurado. Por ejemplo. Una miniatura te mostrará la si- Consejo Tanto en Photoshop como en Paint Shop Pro. Para limpiar tu escáner sigue los consejos del manual del fabricante. para re- 4 Para corregir la mancha sobre la chupa de cuero. para usarlas en forma combinada. Definición 70. ya que laz zonas son más intrincadas y poseen más detalle. y que posean tonos y texturas similares a los dañados.es . y Densidad 100. 2 Crea una nueva capa de la siguiente manera: dirígete al menú Capa. y del menú desplegable elige Capa. si mantienes limpio el cristal de tu escáner. utilizan- 5 Resumiendo. lo ideal es usar un paño limpio.Curso botón del ratón. Jamás utilices sustancias abrasivas como limpiacristales o alcohol. Recuerda que el polvo nunca se encuentra en los archivos digitales. se han utilizado como muestra partes “sanas” de la pared. sino que se ha depositado a lo largo del tiempo sobre los negativos o en las copias de papel. Opacidad 100. 3 A continuación elige la herramienta Pincel de Copia desde la Paleta de Herramientas. déjalas tal cual vienen por defecto. que no forme pelusas. Para ello pulsa mayúsculas mientras haces click en la zona elegida de la imagen. Una cifra cercana a 10 seguramente te servirá. producirlas tapando la mancha. Modifica el grosor del pincel desde la Paleta de Configuración. Paso 25. Si estás trabajando con una foto muy pequeña. y sobre todo horas y horas de práctica para lograr resultados óptimos. El resto de solapas de la Paleta de Configuración. como regla general. Al pasar el cursor corregirás los defectos. lo ideal es conocer la mayoría de ellas. o inclusive zonas con iluminación diferente.. Tamaño 20..pctoday. En la ventana que eparece. El trabajo de clonar y pintar con zonas clonadas requiere de mucha paciencia. completa con los siguientes parámetros: forma Redonda. te ahorarrás mucho tiempo en el posterior tratamiento digital que realices. Comienza a tomar muestras de zonas que no estén dañadas en la imagen. te permitirá trabajar con más detalle. y evitarás defectos como copiar zonas no deseadas. utilizándolo apenas humedecido con muy poco agua (nunca mojado). Photoshop En primer lugar abre el menú Archivo y selecciona la opción Abrir. En la Paleta de Configuración. do un pincel mucho mas fino. utiliza una cifra menor para el tamaño del pincel. lo cual producirá que el efecto del truco sea muy visible.

modifica los números y previsualiza el resultado. Luego te desplázate con el cursor sobre la parte ampliada de la foto. y haces click en el botón Abrir. ponle un nombre a la capa (por ejemplo “Corrección de paso 3). y elige la herramienta Zoom (puedes pulsar la tecla Z para seleccionarla).. Debes encontrar el equilibrio justo entre un desenfoque sutil y uno exagerado. así trabajarás con gran presición. y haz clicken el icono de la lupa (la herramienta se llama Acercar). Si las Consejo desenfoque será mayor. ya que la imagen podría quedar con unas salpicaduras de desenfoque. seleccionas Abrir (o pulsa la combinación Ctrl + O). sin que se note ningún tipo de retoque ni corrección. De esta manera aplicarás filtro fotográfico digital sobre el área que 4 marcas de polvo aún se ven. elige la herramienta Lazo. y desplazando sin soltar el botón del ratón. las variables cambian por lo cual deberás probar con el viejo método de “ensayo y error” hasta obtener un buen resultado. o desplazar el regulador). De esta manera podrás trabajar con mucha presición sobre las manchas. Tómate tiempo para aprender esta técnica. Procura no desenfocar demasiado las manchas. Eso que estás haciendo es realizar una selección. En el mismo cuadro de diálogo puedes ver un antes y un después de aplicar Quitar Polvo. vuelve a seleccionar la Herramienta Desenfocar (como en el 5 6 Hacer click sobre cada mancha 3 Pulsar más tiempo para desenfocar más 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 selección 4 Herramientas Foto 3 Seleccionar Quitar polvo 5 Tamaño de granos 3 3 Sensibilidad 5 3 Previsualizar 3 Aceptar Nº 96 61 . Dirígete al Cuadro de Herramientas. marca el apartado Acción Agresiva. ya que sólo requiere práctica y un buen ojo observador. haz click sobre el icono llamado Quitar Polvo. en Sensibilidad 5. haciendo click con la lupa. que se encuentra en la parte superior del área de trabajo. rodeando el área defectuosa de la foto. Photoshop 1 Archivo 3 Seleccionar Imagen 3 Abrir 2 Capa 3 Crear nueva Capa 3 Ponerle nombre 3 Aceptar 2 3 Seleccionar Herramienta Desenfocar 3 Configurar sus propiedades 4 Herramienta Zoom 3 Hacer cl i c k y desplazar 3 Ampliar área de corrección 5 Herramienta Desenfocar 3 Ir a Barra de Propiedades 3 Configurar tamaño de pincel Ahora debes configurar el tamaño del pincel. Intensidad 100% y activa Usar todas las capas. Acude al cuadro de herramientas. intentando que el área corregida sea lo más homogénea posible. deja todos los valores por defecto. Con la Herramienta Desenfocar seleccionada. Luego elige una imagen. y realiza una selección a mano alzada. haciendo click con la lupa. Procura adaptar el tamaño del pincel a cada mancha. 3 has seleccionado con la herramienta de lazo en el paso anterior. sin soltar el botón del ratón.. + Ctrl + N. 6 Manchas”). Realiza la tarea con paciencia. para que coincida aproximadamente con el tamaño de las manchas. Amplía el área de la foto que vas a corregir. en la Barra de Herramientas Foto. A continuación debes ampliar todo lo que puedas el área sobre la cual trabajarás. y así desaparecerán las manchas de polvo. Ahora es el momento de trabajar directamente sobre las manchas de polvo. Amplía el área de la foto que vas a corregir. ajusta las variables de la 5 3 En el cuadro de diálogo Quitar Polvo haz lo siguiente: en Tamaño de los granos (pixeles) escribe 3. A continuación. y pulsa OK. de manera que a continuación puedas trabajar solamente sobre dicha área. En el cuadro de diálogo que se abrirá. y en la Barra de Propiedades despliega el menú Pincel y define el grosor (puedes escribir el tamaño. y haz click sobre el icono del ojo para observar el resultado parcial. en lugar de las manchas de polvo. Cuanto más tiempo dejes pulsado el botón. haz click sin soltar el botón en cada mancha.Retoque fotográfico. y desplazando el cursor 4 Paint Shop Pro 1 Desde el menú Archivo. dirígete a la Paleta de Herramientas. pulsa Aceptar para aplicar los cambios. v Resumiendo. y selecciona la Herramienta Desenfocar (también puedes pulsar la tecla R). La clave es encontrar el punto justo del suavizado. Parte 3ª yús. Para ello. Cuando el resultado sea satisfactorio. mientras el resto de la foto queda intacto. la seleccionas. Ten en cuenta que de acuerdo a cada foto. Para ello. En la Barra de Propiedades. el En la Paleta de Herramientas. Si las manchas de polvo son muy visibles aún. herramienta de la siguiente forma: Modo Normal.

En cualquier revista (incluída la que tienes entre tus manos). en algunos casos). o pulsa la tecla F12. folleto. Escalar: 100%. 1 Coloca la fotografía impresa sobre el cristal de tu escáner. y abre Redimensionar. elige Ruido. 5 colores durante el proceso de impresión. En el cuadro de diálogo Máscara de Enfoque.Curso Elimina el efecto Moiré Si tienes alguna foto impresa (ya sea de una revista. Si tienes un escáner y quieres digitalizar alguna foto previamente impresa. Completa con los siguientes parámetros el cuadro de diálogo de tu escáner: Modo > Fotografía a color. y se llama “efecto moiré”. Marca las casillas de verificación de Restringir Proporciones. las imágenes se conforman de unos muy pequeños puntos. Completa el cuadro con el nombre de archivo que te apetezca. y selecciona Guardar Como. Deja intactos los demás valores. y finalmente selecciona Mediana. haz click en Aceptar. Finalmente. dependiendo del software que utilices (habitualmente. Escalar: 100%. modifica solamente los siguientes valores: Resolución: tipea 300 (pixeles por pulgada). esto empeora la calidad de la foto. En el cuadro de diálogo Tamaño de Imagen. Acepta pulsando el botón OK. y Remuestrear la Imagen. completa la variable Radio con el número 2. Umbral: 5 niveles. y selecciona Guardar para aplicar y conservar en un archivo los cambios que acabas de realizar en tu fotografía. Dirígete al menú Filtro. Completa el cuadro de diálogo tecleando 2 en el apartado Apertura de Filtro. el molesto efecto moiré. Se abrirá un cuadro de diálogo. y selecciona de la lista el Filtro Mediana. Conserva los ajustes por defecto del resto de variables. notarás que la imagen ha quedado cubierta por unos molestos patrones de color. Pónle el nombre que quieras a tu foto. Pue- 3 Vé al menú Efectos. periódico. este truco es para ti. para escanear debes ir al menú Archivo. etcétera) y deseas conservarla en formato digital. y en Tipo selecciona TIF. elige Ruido. Conserva los ajustes por defecto del resto de variables. vé al menú Archivo. y selecciona Tamaño de Imagen. RGB. Pulsa el icono del ojo para previsualizar el resultado. Vé al menú Imagen. 2 Una vez escaneada la imagen. Resolución / Entra- Importar). dirígete al menú Archivo y selecciona Guardar Como. des marcar la casilla Ver para previsualizar el resultado. Completa con los siguientes parámetros el cuadro de diálogo de tu escáner: Modo: Fotografía a color. Finalmente. el apartado Resolución. Con este filtro de enfoque. 3 Photoshop dad: 50%. y guárdala en formato TIF. finalmente habrás logrado eliminar (o reducir. y abre el menú Archivo. luego elige Importar. Deja como están el resto de los valores de la ventana. Debes hacer click en la casilla Tamaño real / de impresión. selecciona TWAIN y finalmente Adquirir para iniciar el proceso de digitalización. Radio: 3 pixeles. abre el menú Archivo. 62 www. y luego seleccionar 6 1 Dirígete al menú Imagen. elige Enfocar. debido a la separación de los cuatro Ahora abre el menú Filtro.pctoday. En el cuadro de diálogo llamado Mediana. tipeando el número 300. lleva a cabo los siguientes pasos. completa los siguientes valores: Canti- 2 Después de escanear la foto. 4 da> 718 dpi (pixeles por pulgada).es . RGB. Resolución / Entrada: 718 dpi (pixeles por pulgada). y selecciona finalmente Máscara de Enfoque. y solamente modificar 4 Paint Shop Pro Coloca la foto en tu escáner. Al escanear páginas impresas y abrirlas en la pantalla de tu ordenador. Inicia el proceso de digitalización.

y hará la textura del papel menos perceptible. elige Desenfocar. sólo debes completar el apartado Radio tecleando el número 2. Luego vé al menú Capa. Parte 3ª Consejo Aunque la técnica descripta en este paso a paso logra excelentes resultados. Esto difumi- 2 pincel de 70 pixeles. Vé a la Barra de Propiedades y configura un grosor de 3 senfoque aplicado en el paso anterior hará que la textura sea menos perceptible. deberás conformarte con mejorar y enfocar un poco la imagen. Diferencia: 5. Pero hoy. y selecciona Duplicar Capa. Photoshop 1 Colocar foto en el escáner 3 Configurar la digitalización 3 Escanear 2 Archivo 3 Guardar Como 3 Nombrar archivo 3 Filtro 3 Elegir Ruido. Photoshop Vé al menú Filtro.. Hay fotos que tienen una trama tan marcada. luego elige Acentuar. Utilízalo para mejorar aún mas tus resultados. ya que algunos incluyen la opción de “destramar” al digitaliza. A continuación te ofrecemos un truco para corregir el texturado del papel. y finalmente haz click en Descubrir todas. Mediana 3 Radio 2 3 Aceptar 4 Imagen 3 Tamaño de imagen 3 Completar 300 dpi 5 Filtro 3 Enfocar 3 Aplicar Máscara de Enfoque 3 Aceptar 6 Archivo 3 Guardar 6 Para finalizar tu trabajo con la imagen. Filtro Mediana 3 Tipear 2 3 Aceptar 4 Imagen 3 Redimensionar 3 Tipear 300 dpi 5 Efectos 3 Máscara de Desenfoque 3 Tipear valores 3 Aceptar 6 Archivo 3 Guardar A continuación haz click en el menú Efectos. estas fotos suelen resultar bastante problemáticas a la hora de escanear. El de- 1 Abre la foto escaneada (desde el menú Archivo. En el cuadro de diálogo. Resumiendo. desde el menú Archivo selecciona Guardar para así aplicar los cambios realizados y conservarlos en tu fotografía. A continuación. notarás que las zonas pintadas se oscurecen y enfocan.Retoque fotográfico. es un poco laborioso y lleva tiempo dominarlo. y las zonas importantes queden bien destacadas. Paint Shop Pro 1 Colocar foto en el escáner 3 Configurar la digitalización 3 Escanear 2 Archivo 3 Guardar como TIF 3 Nombrar archivo 3 Efectos 3 Elegir Ruido. La textura del papel proyecta sombras en la imagen que dificultan su visión y claridad. o elementos en primer plano). En el cuadro de diálogo. Si tu foto es muy pequeña. Para aplicar los cambios pulsa el botón OK. Una última sugerencia: mira detenidamente el software de tu escáner. seguramente en tu cajón encontrarás alguna foto de tu abuelo en un papel con esas características. las antiguas empresas de fotografía (florecientes en aquella época). en el siglo XXI. Debes “pintar” con el pincel las zonas más importantes de la foto (como los rasgos de la cara. Tu tarea a continuación es la más delicada. Al hacer click y mover el cursor sobre la foto. lamentablemente no es infalible ni milagrosa. deja Fondo Copia como nará un poco la imagen. 4 Abre el menú Capa. En el cuadro de diálogo. Cuando la foto no esté borrosa. completa con los siguientes valores: Radio: 3. 5 Reducir la textura del papel A principios del siglo XX. Luego pulsa sobre el botón OK. elige un pincel más fino. vé al menú Archivo y haz click en Guardar. En este momento el efecto moiré debería haber desaparecido. elige Añadir máscara de capa. comenzaron a ofrecer un tipo de papel texturado. Deja intactas las zonas secundarias como el fondo del retrato. y selecciona Máscara de desenfoque. No te desanimes con los primeros resultados y sigue practicando hasta devolver a tus viejas fotos el esplendor de hoy. v Nº 96 63 . eligiendo Abrir). y en Opacidad teclea 50%. Potencia: 50. muy original y avanzado para esos tiempos. y selecciona Desenfoque gaussiano. que difícilmente pueda suprimirse por completo.. Haz click en Aceptar para aplicar los cambios. En algunos casos. desde la Paleta de Herramientas elige el Pincel. nombre por defecto.

y completa con los siguientes datos: Forma: Redonda. selecciona Desenfoque y luego elige Desenfoque de Gauss.Práctico Paint Shop Pro Personalizar pinceles para retoque Aunque Photoshop y Paint Shop Pro ofrecen una enorme cantidad de pinceles y variantes de los mismos. Consejo Un truco interesante (al tiempo que divertido) a la hora de digitalizar fotos con papeles texturados: prueba inclinar las fotos en distintos ángulos.pctoday. en lugar de 2 escribe 1. 2 Dirígete al menú Efectos. Es divertido y estimulante crear pinceles personalizados con texturas. como rasgos (en el caso de un retrato). Tanto en Photoshop como Paint Shop Pro tienes la posibilidad de dar un nombre a cada pincel: aprovecha esta posibilidad dando a tus pinceles algún nombre descriptivo. Algo muy interesante y sorprendente. El azar también existe en el mundo digital… en la previsualización observas que la foto está demasiado borrosa. algo tremendamente útil en cualquier tarea de retoque fotográfico. Paso: 25. para corregir defectos en un rostro (arrugas. es utilizar las herramientas habituales de retoque (como el Tampón de Clonar) en conjunto con un pincel personalizado: puedes clonar la textura de una tela. y reproducirla en otro sitio agregándole un toque personal con la textura que has utilizado en tu pincel. y sin preocuparte por el resto que resultará algo difuminado. Por ejemplo. Densidad: 100. Definición: 0. en Modo de Retoque selecciona Oscurecer RVA. Desplaza el cursor sobre la fotografía. para que puedas localizarlo con mayor rapidez (por ejemplo “Pincel suave con textura de piel”) y optimizar tu trabajo. luego crear tus pinceles personalizados. para luego digitalizarlas. Tamaño: 32. en un paisaje). Finalmente. también es posible crear pinceles personalizados. s Resumiendo.. investiga y aprende a configurar sus variantes (¡son casi infinitas!) para explotar al máximo sus posibilidades en el retoque fotográfico. Marca el fichero que contiene la foto escaneada previamente. puedes crear un pincel a partir de una textura de piel. Opacidad: 40. Debido a que el escaner hace un barrido con su haz de luz. Puedes crear tantos pinceles como te apetezca. O tomar muestras de cielo o césped. Si muy grueso. o elementos en primer plano (por ejemplo. Y lo más importante. sobre el cristal del escáner. y elige el pincel Retoque (es el icono de la mano).. Aunque al principio los resultados serán algo imprevisible. En el cuadro de diálogo. s 4 con la práctica podrás controlar a fondo tus propios pinceles. 3 Vé a la Paleta de Herramientas. etcétera). En algún caso te sorprenderás ya que la textura se puede tornar casi imperceptible. y recuerda almacenarlos correctamente para su posterior utilización (en el caso de Photoshop puedes utiliza el Gestor de Ajustes Preestablecidos para organizarlos). seguramente 1 Abre el menú Archivo. y corregir fotos de paisajes. marcas de acné. Si observas que el pincel es muy fino o Ahora haz click y mueve el cursor sobre las zonas destacadas de la foto. A continuación vé a la Paleta de Configuración. cambia su valor desde el apartado Tamaño. probablemente ilumine de manera distinta de acuerdo a la inclinación del papel. buscando que sólo se destaquen los elementos primordiales. y recuerda que lo más importante al editar digitalmente una foto es que el resultado sea lo más natural posible. desde tu disco duro o cualquier otro soporte. Céntrate sobre todo en el La configuración de un pincel nos permitirá realizar retoques con mucha precisión. Cuando la foto quede equilibrada y la textura del papel se haya atenuado. tipo de bordes del pincel (nunca deben ser muy duros). vé al menú Archivo y selecciona Guardar. completa tecleando el número 2 en el apartado Radio.es . Hazlo con tranquilidad. 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 Añadir máscara 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 Configuración 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. luego selecciona la opción Abrir.

Guía del curso 1. como en instantáneas escaneadas. hasta grandes errores como objetos o elementos que entorpecen la armonía de la composición.pctoday. arañazos. Máscara rápida. Recreando fotos creativamente. tono. pero si no estuvieran allí. corregir polvo y rascaduras. Extraer. PC Today nº 96 4. bordes y marcos creativos. Fondos personalizados. o su mensaje sería mucho más claro. Técnicas de reparación de fotos (I). s 56 www. Eliminar defectos de la piel. enfoque suavizado. Ten siempre en tu mente lo más importante: en este curso. Corrige el aspecto general de tus fotos. Los programas Adobe Photoshop y Paint Shop Pro te dan las herramientas necesarias para que puedas corregir este tipo de errores. estos no son considerados como “errores”. Primer contacto con las herramientas de Photoshop 7 y Paint Shop Pro 7.Curso Técnicas de reparación II Tanto en fotografías tomadas digitalmente. PC Today nº 95 3. Conceptos básicos. Reparar manchas y texturas. Te enseñamos más trucos y secretos para manipular tus fotos digitalmente. zonas borrosas o desenfocadas. eliminar el moiré. puede haber desde pequeños defectos que empobrecen la imagen. Todos son problemas habituales tanto en la fotografía tradicional como en la digital. etcétera. verás trucos muy puntuales para resolver problemas concretos que presentan muchas fotografías. PC Today nº 97 5. PC Today nº 98 6. Eliminar arañazos rectos. borrar elementos no deseados. Pero agudizando un poco más la observación. Una vez que los aprendas. Con la práctica podrás conseguir resultados espectaculares en muy poco tiempo. capas de ajuste. The GIMP. Brillo y contraste. PC Today te enseña todas las claves y trucos en este curso. PC Today nº 99 a mayoría de la gente puede observar fotografías. probablemente la fotografía gozaría de una mayor belleza. PC Today nº 94 L 2. Técnicas de reparación de fotos (II). Introducción al retoque fotográfico. hay veces que en las fotos encontramos elementos que no aportan nada a la escena. modificar personajes. y descubrir errores y defectos a golpe de vista: manchas. exposición y color.es . minimizar manchas. Embellecer y refinar retratos. y a ti te corresponde poner creatividad e ingenio para combinar todas estas técnicas y obtener los mejores resultados. Selecciones sencillas. mejorar los retratos con luz. ojos rojos. y que además entorpecen la armonía de la composición. disimular el paso del tiempo. tu misión es combinar las técnicas que has aprendido.

Ahora acércate con el cursor lo más que puedas al arañazo. Luego escoge alguna fotografía rayada que hayas escaneado previamente. Allí radica la clave de este truco. debes escribir el Ancho 3 mientas Estándar. 4 Con la imagen que acabas de abrir en pantalla. se formará una selección que abarcará todo el ancho de la imagen. y recuerda: si no estás del todo conforme con tus resultado. y 2 Ahora debes “dibujar” con la herramienta Eliminar Rayaduras. sobre las rayas de la foto. para acceder a ella debes pul- 2 haz click en el icono que representa una lupa (herramienta Acercar). ya que así obtendrás la precisión necesaria para que el retoque sea perfecto. ya que éste es el grosor de la rayadura. También puedes pulsar el atajo Ctrl + O. combina ésta técnica con otras que has aprendido en el curso. amplía el área sobre la cual deseas trabajar a continuación. si no se utilizan con ingenio y creatividad. o bien pulsar el icono de la carpeta abierta en la Barra de Herra- 3 A continuación elige la herramienta Eliminar Rayaduras desde la Paleta de Herramientas (icono de espátula). dirígete a la Paleta de Herramientas. Photoshop Desde el menú Archivo. Para ello. 1 valor de 2 píxeles. cualquier mínimo rastro de polvo estropee la digitalización de la imagen. Nº 97 57 . Finalmente pulsa con cuidado la combinación de teclas Ctrl + Alt + Flecha Abajo. Sigue paso a paso el ejercicio para resolver este tipo de problemas. De nada valen las mejores herramientas. Esto duplicará los “píxeles sanos”. Paint Shop Pro 1 que crea una selección de tan sólo un píxel. También puede suceder que simplemente el negativo se encuentre rayado. y tendrá sólo un píxel de alto. es mejor que utilices las herramientas de este ejercicio (Marco Fila Única. Photoshop provee una herramienta sumamente útil (y muy poco utilizada): la herramienta Marco Columna Única. para moverte hacia arriba o Abre el menú Archivo. creando algunas finas líneas rectas. Ten paciencia e inténtalo varias veces. debes utilizar la herramienta Eliminar Rayaduras. para obtener resultados óptimos. Para eliminar arañazos rectos. debes usar las flechas del teclado para acercarte lo más posible al área dañada. hasta dar con el grosor de herramienta que más se ajuste a las rayaduras. que te permitirá corregir este tipo de defectos. elige Abrir y escoge la imagen que presente algún arañazo en forma de líneas más o menos rectas. y en el menú desplegable elige Abrir. y cubrirá los arañazos.Retoque fotográfico. y haz click en Abrir. 5 Consejo Tanto en Photoshop como en Paint Shop Pro. No escatimes en ampliar la imagen con el zoom todo lo que haga falta. En el ejemplo hemos utilizado un hacia abajo y localizarlos. Recuerda que al realizar la selección con Marco Fila Única. haz click en un extremo del defecto. y desplazando sin soltar el botón del ratón. y sin soltar el botón del ratón. Utiliza las teclas de flecha de tu teclado. Parte 4ª Eliminar arañazos rectos Es muy común que al escanear fotografías. dejándolos invisibles. En cuanto a Paint Shop Pro. continuación debes copiar “información sana” de los píxeles más cercanos al a las rayaduras. amplía la vista pulsando la combinación de teclas Ctrl + + para trabajar con precisión. tanto en forma vertical como horizontal. Si es necesario. de manera que el revelado presentará algún arañazo. 3 y 4 para corregir los demás arañazos. o que tengas guardada en tu disco duro. Haz click en Abrir. Repite los pasos 2. haciendo click con la lupa. y haz click. sar el icono de Marco Rectangular durante un segundo. y Eliminar Rayaduras) con un grosor similar al de las rayas. Abre el menú Archivo y elige Guardar para salvar los cambios. Amplía el área de la fotografía que vas a retocar. en cantidad de píxeles que quieres dar a la herramienta . así podrás trabajar con mayor precisión que con la vista general. desplázate gasta el otro extremo de la raya- 4 v Desde la Barra de Herramientas de Photoshop (la encuentras a la izquierda del área de trabajo) elige la Herramienta Marco Fila Única. En la Paleta de Configuración.

Observa la paleta Capas. Haz click en Abrir.. Vé al menú Filtro.pctoday. y activar la selección suavizada. de manera que ajusta sus píxeles para que su ancho sea igual al de las rayaduras. . y elige Desenfoque Gaussiano. 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 arañazo Paint Shop Pro 1 Ir al Menú Archivo 3 Escoger Abrir 3 Seleccionar fotografía 3 Abrir 2 Seleccionar Herramienta Acercar 3 Hacer click y desplazar 3 Ampliar zona defectuosa 3 Copiar información 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 Configuración 3 Grosor de 2 píxeles 4 Pulsar Ctrl + Alt + Flecha Abajo 3 Duplicar píxeles sanos 3 Cubrir arañazos 4 Click + desplazar ratón sobre rayaduras 3 Trazar línea bien recta 5 Corregir más arañazos 3 Ir al menú Archivo 3 Guardar cambios 5 Corregir más arañazos 3 Ir al menú Archivo 3 Guardar cambios Borrar elementos no deseados ratón. De ésta manera la selección que has creado ahora tiene sus bordes muy suavizados. Haz click en la imagen. “coge” la selección de píxeles sanos y muévelos. y verás en una nueva capa el trozo de píxeles sanos que acabas de crear. y sin soltar el botón del ratón. repite los pasos 2. Es muy probable que alguna vez hayas tomado una bella fotografía. y selecciona la Herramienta Lazo. desplaza la selección hacia una zona que no tenga obstáculos. en la que todo parece correcto… salvo por un objeto que estorba y distrae la atención. 3 y 4 . Pulsa la letra Q de tu teclado.es . selecciona Abrir y escoge la imagen de tu disco duro o CD. abre Desenfocar. En el ejemplo que damos a continuación. si es por medio de un escáner. tapando el elemento que deseas ocultar.. Ahora vé a la Paleta de Herramientas. y así embellecer la composición final. rodea el área donde se encuentra el elemento no deseado. Dirígete a la Paleta de Herramientas. Vé a la Paleta de Herramientas. y píxeles sanos para cubrir el objeto. Procura que la línea sea lo más recta posible. mejor resultado se apreciará. En el cuadro de diálogo. Finalmente vé al menú Archivo y elige Guardar para conservar los cambios realizados. con la mayor resolución. 5 Resumiendo. Photoshop 1 Abre el menú Archivo. Dicho elemento debe haber desaparecido. dibujando una selección libre a mano 5 Pulsa la combinación de teclas Ctrl + J para crear una nueva capa. lo que harás a continuación con Photoshop o Paint Shop Pro será cubrir los elementos no deseados. para activar el modo Máscara Rápida (la imagen protegida por la selección se pondrá de color rojo momentáneamente). A continuación rodea el objeto que deseas eliminar. distrayendo la atención del tema de la fotografía: la niña recibiendo su vela de cumpleaños para soplar.0. copiando la selección de píxeles sanos. También es importante que la imagen llegue con la mejor calidad al ordenador. Sin soltar el botón del 4 58 www. haz click en la selección. 3 icono de la lupa). Procura dejar algo de espacio alrededor del objeto. Ya que no podemos eliminar los objetos físicamente.Curso dura . completa con un valor de 3. alzada. podemos recurrir a las técnicas digitales para subsanar este tipo de problemas. Para corregir los demás arañazos. Ahora con la herramienta Lazo. Cuanto más tiempo dediques a este tipo de procesos. hay un globo que aparece por detrás de la cabeza de un personaje. y escoge Herramienta Mover. y selecciona la Herramienta Zoom (el 2 Pulsa nuevamente la letra Q de tu teclado para salir del modo Máscara Rápida. Aunque sería exagerado considerarlo un “error”. La herramienta Eliminar Rayaduras dibuja el contorno de su grosor.

y selecciona Copiar (o pulsa la combinación Ctrl + C). Intenta dejar algo de espacio alrededor del objeto. y haz click en Selección Flotante. Si algún pixel concreto presenta un color que resalta frente a los demás. y sin soltar el botón del ratón. rodea el área donde se encuentra el elemento no deseado. y selecciona la Herramienta Lazo. para ello. puedes usar la herramienta pincel para que pase desapercibido. 6 alzada. A continuación colócala sobre el área del objeto que deseas eliminar y sustituir por la selección correcta. y selecciona Acoplar Imagen. Un cuadro de diálogo te pedirá que confir- menú Seleccionar.. y ahora selecciona Pegar Como nueva Ya tienes lo que necesitas: una selección que ocupa la misma superficie que el área que deseas cubrir. seleccionas Abrir (o pulsa la combinación Ctrl + O). Parte 4ª Dirígete al menú Capa. y elige la opción Quitar Selección. y luego en el icono de la Papelera en la misma paleta. Arrastra. y selecciona la Herramienta Acercar (icono de la lupa). Pulsa nuevamente Ctrl + C para copiar los píxeles sanos de la pared con tu selección. Finalmente abre el menú Archivo y elige Guardar. lección. pero conserva- 4 Resumiendo. 1 3 Vé al menú Edición.Retoque fotográfico. dibujando una selección libre a mano selección (pulsa el atajo Ctrl + E) y coloca la selección en un área de la pared con píxeles sanos.. Vé al Finalmente abre el menú Archivo. 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 selección 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 selección 3 Pulsar Q para Máscara Rápida 3 Ir al menú Filtro 3 Aplicar Desenfoque Gaussiano 3 Ctrl + C para copiar selección 3 Ctrl + E para pegar selección 3 Colocar en píxeles sanos 4 Pulsar Q para salir de Máscara Rápida 3 Desplazar selección con el Lazo 4 Ir a Paleta Capas 3 Click en Selección Flotante 3 Click en Papelera para eliminar selección 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 píxeles sanos 3 Ctrl + E pega nueva selección 3 Colocar sobre el objeto 3 Quitar selección 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 . para finalmente superponerlos y ocultar el objeto no deseado. luego utilizar dicha selección para copiar píxeles sanos de la imagen (en este caso de una pared). a lo que respondes pulsando el botón Sí. la selección pegada. la iluminación 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. 2 Ahora en tu imagen debe aparecer el objeto que quieres eliminar por duplicado. Dirígete a la Paleta de Herramientas. Luego elige una imagen y selecciónala. y si hiciera falta de las herramientas de clonación para ocultar los bordes pegados. Dirígete a la Paleta de Herramien- mes si deseas eliminar la capa activa. rás la selección que has creado. A continuación rodea el objeto que deseas eliminar. con el mismo cursor y sin cambiar de herramienta. o repetir el proceso con selecciones del tamaño de un punto. Haz click en el botón Abrir. y luego la combinación Ctrl + E para pegar lo que has copiado como una nueva se- 5 tas. vé a la Paleta Capas. Ten en cuenta que. a continuación vas a eliminar el contenido de la imagen. Paint Shop Pro Desde el menú Archivo. para conservar los cambios. según el caso. De esta manera copias la selección al Portapapeles. Haz click en la imagen. 6 v Consejo El procedimiento que has realizado es muy sencillo: consiste en copiar el área del objeto que quieres eliminar. Abre nuevamente el menú Edición. para que desaparezcan los halos que aparecían alrededor de la zona que estás tratando de reparar. y selecciona Guardar para conservar los cambios.

desplaza para crear una selección de un tamaño parecido 2 Vé al menú Capa. Paint Shop Pro Vé al menú Archivo. utilizando el comando Pegar Dentro. En la Paleta de Consejo Recuerda que éste truco funciona de manera óptima cuando en la fotografía existen grandes zonas de imagen sana que puede reemplazar al trozo dañado o manchado. Abre el menú Edición y selecciona Copiar (o pulsa la combinación Ctrl + C) para copiar los píxeles sanos al portapapeles.Curso Minimizar las manchas El siguiente truco es muy útil en fotografías que poseen grandes superficies de un color y textura relativamente homogéneos. y escoge la Herramienta Marco Rectangular. y escoge la fotografía de tu disco duro o CD. debes manipular. para aplicar los cambios. Busca un área de la pared donde los píxeles sean sanos y parejos. pulsa la tecla Enter. Photoshop En el menú Archivo. haz click y sin soltar el botón del ratón. la técnica consiste en hallar y copiar píxeles útiles que remplacen el área dañada. El trozo sano anteriormente copiado ahora se ha pegado dentro del área de la mancha.pctoday. Realizando selecciones muy simples a mano alzada puedes obtener muy buenos resultados. elige Rectángulo en el apartado Tipo de Selección. Con la Herramienta Seleccionar. elige Abrir. Si tu fotografía contiene manchas en zonas que no están claramente despejadas. y escoge la opción Transformación Libre. haz click y sin soltar el botón del ratón. y escoge Guardar (o la combinación Ctrl + S). Como casi siempre. Cuando encaje correctamente. 1 3 al de la mancha. y escoge la Herramienta Seleccionar. También lo encontrarás muy útil para restaurar fotografías donde aparezcan grandes cielos. y escoge la fotografía de tu disco duro o CD. Ahora vé al menú Edición. Alrededor del trozo pegado aparecerán unos manejadores que 4 60 www. etc. 1 Busca un área de la pared donde los píxeles sean correctos. Y finalmente abre el menú Archivo. Configuración. elige Abrir. desplaza para crear 2 Dirígete al menú Edición y escoge Pegar Dentro (o la combinación Mayús + Ctrl + V). Vé al menú Edición y selecciona Copiar (o pulsa la combinación Ctrl + C) para copiar los píxeles sanos al portapapeles. una selección de un tamaño parecido al de la mancha. césped. y elige Acoplar Imagen.es . montañas. recurre a las herramientas de clonación combinadas con pinceles pequeños. en la cual una mancha de humedad ha dañado la zona de la pared. Con la Herramienta Marco Rectangular. sencillamente pegando el trozo de píxeles sanos en una nueva capa. 5 En la Paleta de Herramientas haz click en el icono del Lazo. En este caso hemos utilizado una vieja fotografía. Dirígete a la Paleta de Herramientas. A continuación dibuja una selección libre alrededor de la mancha que deseas corregir. para que la selección encaje perfectamente con la mancha. En éste caso recurrirás al auxilio de las capas. Dirígete a la Paleta de Herramientas.

en un cálido atardecer de verano. y marca las casillas de verificación de Suavizado y Contiguo. escoge Pegar. y escoge Promover a Capa. debes poner una Tolerancia mayor. 3 Dirígete al menú de Edición. y el tiempo no era bueno. 4 Ahora vé al menú Seleccionar. si la selección no cubre todo el cielo.. haz click sobre la fotografía. 4 Pulsar Mayús + 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 selección 3 Ir al menú Archivo 3 Guardar Remplazar el fondo Aunque el hombre del tiempo en la TV. Si la superficie de selección excede los límites del cielo. nosotros podemos contradecirlos… ¿que a qué nos referimos? Muy sencillo: si has tomado algunas fotografías en tu último fin de semana.. y no se vé interrumpida por cables. reduce el valor que hayas dado en el campo Tolerancia. y luego En la selección (o la combinación Mayús + Ctrl + L). v Nº 97 61 . del maravilloso mundo de Walt Disney. gracias a las herramientas digitales que tienes en tu ordenador. para modificar el color del cielo y así realzar la belleza de una fotografía. la gran ventaja es que el cielo ocupa un área contínua. En la Paleta de Herramientas elige Deformar. Alrededor del trozo pegado aparecerán unos manejadores y un recuadro que debes utilizar para manipular la forma de la selección. Por el contrario. elige Abrir. 1 2 Con la Herramienta Varita Mágica. Aparecerán unas líneas punteadas que marcarán el área que haya sido seleccionada. 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 Rectángulo 2 Buscar píxeles sanos 3 Crear selección 3 Pulsar Ctrl + C para copiar selección 2 Buscar píxeles sanos 3 Crear selección 3 Pulsar Ctrl + C para copiar selección 3 Ir a Paleta de Herramientas 3 Elegir Lazo 3 Crear selección rodeando la mancha 3 Ir a Paleta de Herramientas 3 Elegir Lazo 3 Crear selección rodeando la mancha 4 Ir al Menú Edición 3 Pegar Dentro 3 Ir al Menú Edición 3 Elegir Transformación Libre 3 Manipular la selección hasta encajar. Resumiendo. En la fotografía utilizada en este ejemplo. En la Barra de Propiedades escribe 50 en el apartado Tolerancia. para que ésta encaje perfectamente con la forma de la mancha. para aplicar los cambios realizados. Finalmente abre el menú Ar- 5 chivo y elige Guardar. y busca en tu ordenador la fotografía que vas a utilizar. Photoshop Vé al menú Archivo. Parte 4ª En la Paleta de Herramientas haz click en el icono de selección que contiene un Lazo. El trozo sano anteriormente copiado ahora se ha pegado dentro del área de la mancha. De esta manera es muy simple seleccionar el área a modificar con la varita mágica. y el Servicio Meteorológico cada día son más precisos. Para decirlo en otras palabras: puedes transformar un día frío y gris. A continuación dibuja una selección a mano alzada alrededor de la mancha que deseas corregir.Retoque fotográfico. En el siguiente práctico. o elementos que dificulten su selección. A continuación debes fijarte en la Paleta de Herramientas y escoger la Varita Mágica. utilizarás la varita mágica y el agregado de una capa. en cualquier punto de la zona del cielo que necesitas modificar. con Photoshop y Paint Shop Pro puedes corregirlo.

Si el resultado no te convence del todo. Luego vé a la Paleta de Herramientas. y finalmente selecciona Capa en el menú que se despliega (o pulsa la combinación Mayús + Ctrl + N en el teclado). elige la opción Nueva. Por último. En la Paleta de Configuración escribe 50 en el apartado Tolerancia. y modifica el porcentaje de Opacidad de la capa (cuanto mayor sea la opacidad. unas líneas punteadas marcarán el área que se ha Abre el menú Capa. guarda los cambios desde el menú Archivo. Debes completar con un nombre (por ejemplo “Nuevo Cielo”). haciendo click en Guardar. y le agrega simplemente un tono cálido. en cualquier punto del cielo que vas a modificar.. 1 Abre la Paleta Capas. pon Normal. y marca la casilla Muestra Fusionada. elige Oscurecer en el apartado Combinar. habrás rellenado el área del cielo con un color Naranja. Deja intactos el resto de valores. En el cuadro de diálogo. y haz click en el icono Crear una Capa. Dirígete a la Paleta Colores. y selecciona Acoplar Imagen. elige Color Frontal (el Naranja que ya habías seleccionado). en Progresivo escribe 1. haciendo click en el botón Guardar. en Modo de Mezcla 3 al menú Capas. y en Opacidad. en el cuadro de diálogo completa con los siguientes valo- seleccionado. y haz doble click en una muestra cualquiera. capa (por ejemplo. debes poner una cantidad superior en la Tolerancia.pctoday. Simplemente debes hacer click en el color elegido. completa con 100%. Si el resultado no te convence del todo. Por último. Photoshop 1 Ir al Menú Archivo 3 Abrir Fotografía 3 Ir a Paleta de Herramientas 3 Escoger Varita Mágica 3 Configurar Propiedades Paint Shop Pro 1 Ir al Menú Archivo 3 Abrir Fotografía 3 Ir a Paleta de Herramientas 3 Escoger Varita Mágica 3 Configurar Propiedades 2 Clickear con la Varita en la foto 3 Líneas punteadas marcan la selección 3 Mayús + Ctrl + N para crear Capa 3 Configurar Capa 3 O K 4 Ir a Paleta Muestras 3 Elegir Naranja 3 Ir al Menú Edición 3 Rellenar 3 OK 2 Clickear con la Varita en la foto 3 Líneas punteadas marcan la selección 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. y escoge Rellenar. Allí selecciona un color cálido como el naranja. y selecciona un color cálido como el Naranja Puro. en una capa de fusión Color que mantiene la textura y el brillo originales del cielo. reduce el valor de la Tolerancia. abre el menú y elige la opción Color. si la selección no cubre toda la zona del cielo. Después de pulsar Abrir. Finalmente abre el menú Capas. más intenso será el efecto aplicado). para crear una nueva capa. Se abrirá el cuadro de diálogo Propiedades de la Capa. abre la paleta Capas. En Modo de Fusión. para abrir el cuadro de diálogo Color.Práctico res: en Usar. por el contrario.. Finalmente vé 4 Paint Shop Pro Vé al menú Archivo. haz click sobre la fotografía. De esta manera. “Nuevo Cielo”). y en Opacidad escribe 80%. elige Fusionar y luego Fusionar Todo. selecciona Color. y en Opacidad escribe 80. y busca entre las carpetas de tu ordenador la fotografía que quieres utilizar.es . 5 Haz click con el Bote de Pintura en cualquier punto del cielo. elige Abrir. guarda los cambios desde el menú Archivo. más intenso será el efecto aplicado). s Resumiendo. y modifica el porcentaje de Opacidad de la capa (cuanto mayor sea la opacidad.. abre la paleta Capas. primero nombra la nueva 3 5 2 Paleta de Configuración. La capa se habrá llenado de Naranja y habrás obtenido el efecto buscado. Ahora abre la Paleta Muestras. Deja el resto de valores como han aparecido por defecto. En el apartado Modo. Si el área de selección excede los límites del cielo. Abre el menú Edición. A continuación pulsa OK. en Correspondencia elige Valor RVA. Pulsa OK para que se cree dicha capa. En la 4 Con la Herramienta Varita Mágica. dirígete a la Paleta de Herramientas y escoge la Varita Mágica. y selecciona el Bote de Pintura.

6. Introducción al retoque fotográfico. Embellecer y refinar retratos. eliminar el moiré. Máscara rápida. no sólo son excelentes herramientas que hacen verdaderos milagros con tus fotografías. Primer contacto con las herramientas de Photoshop 7 y Paint Shop Pro 7. Adobe Photoshop y Jasc Paint Shop Pro. bordes y marcos creativos.es . minimizar manchas. pero recuerda siempre lo más importante: no existe solamente un camino para obtener buenos resultados en fotografía digital. Brillo y contraste. Corrige el aspecto general de tus fotos. tono. y deseas “borrarlo literalmente” de tus fotografías? Con las herramientas digitales que tienes entre manos. PC Today nº 94 T 2. The GIMP. entretenimiento y placer. es que para llevarlos a cabo sólo necesitas un poco de práctica… ¡y te divertirás en grande! Es la combinación perfecta para realizar cualquier tarea creativa: trabajo. y luego arrepentirte… Con Photoshop y Paint Shop Pro puedes modificar el color de tu automóvil en tan solo cinco minutos… ¡y no necesitas llevarlo al taller! ¿Te has enfadado con un viejo amigo. borrar elementos no deseados. Eliminar arañazos rectos. corregir polvo y rascaduras. lo mejor es combinar distintas técnicas de un modo práctico y creativo. enfoque suavizado.Curso Los programas de retoque fotográfico que utilizas en este curso. Recreando fotos creativamente. agregar marcos de las formas más variadas. 5. Técnicas de reparación de fotos (II). sino que son una fuente inagotable de diversión: en esta entrega aprenderás unos trucos con los que te divertirás en grande. y lo mejor de todo. mejorar los retratos con luz. Técnicas de reparación de fotos (I). En este capítulo aprenderás algunos trucos para reparar fotos que se han roto. exposición y color. disimular el paso del tiempo. 52 www.pctoday. PC Today nº 95 Reparar manchas y texturas. capas de ajuste. Extraer. PC Today nº 96 4. Conceptos básicos. Retoques creativos Guía del curso 1. será una tarea muy sencilla quitar de tus recuerdos fotográficos a quien quieras olvidar… Adobe Photoshop y Paint Shop Pro son dos poderosas herramientas con las cuales puedes realizar trabajos mi- lagrosos con tus fotografías. PC Today nº 98 Eliminar defectos de la piel. 3. modificar personajes. PC Today nº 99 e apetecería pintar tu coche de otro color? Es algo demasiado caro para realizar. crear tus propios fondos personalizados y mucho más. PC Today nº 97 Fondos personalizados. Selecciones sencillas.

Un dato importante: pon especial cuidado al realizar la selección donde aplicarás la textura. has configurado al azul como color de frente. Parte 5ª Crear fondos personalizados Si has tomado una fotografía. y convertirlo en una máscara. bien pulsar el icono de la carpeta abierta en la Barra de Herramientas Estándar. Se abrirá un cuadro de diálogo. y marca la casilla de verificación Muestra Fusionada. Tolerancia. situado en la parte inferior derecha de la paleta. deben estar muy bien delimitados. completa los siguientes va- cualquier color azul oscuro.PSD). Ahora haz click en Abrir. Luego ve a la Paleta de Configuración. haz click en el botón Nubes. y haz click en el icono Crear una capa nueva. 6 3 Abre el menú Archivo. sin que esto afecte a la fotografía original. y haz click en Abrir. mientras haces click en el color blanco. Se abrirá un cuadro de diálogo. echa mano de otras herramientas. y estás a gusto con la figura principal. des eliminar el fondo de una manera muy sencilla. Presta atención a los bordes de la forma . Luego escoge alguna fotografía cuyo fondo deseas reemplazar. luego pulsa las teclas Ctrl + Mayús. De esta manera darás a tu fotografía otro aspecto.Retoque fotográfico. y lo aplicará en la totalidad de la nueva capa. Haz click en el apartado Capas de las Opciones de Guardado. Una vez que el resultado te agrade. Si la selección que ha creado la varita no abarca todo el fondo. 50. para agregar o quitar zonas de selección. escoge la opción Interpretar y. este truco es para ti: puelores: Tolerancia: 50. 3 A continuación. Ahora ve a la Paleta Muestras y haz click en 4 en el paso anterior. o ciones para personalizar el filtro. También puedes pulsar el atajo Ctrl + O. para ello. pero no con el fondo. Debes buscar que el fondo quede bien diferenciado de la figura. pulsa el botón Aceptar. y al blanco como color de fondo. donde encontrarás muchas op- 2 Photoshop Desde el menú Archivo de la barra superior de herramientas. Ahora abre el menú Filtro de la barra superior de herramientas. así previsualizas los resultados. escoge la Varita Mágica. Dicho filtro creará un efecto nombre al archivo y en Formato selecciona Photoshop (*. Nº 98 53 . y selecciona las casillas Suavizado. puedes utilizar las que son creadas en forma automática (como en este caso). seguramente más impactante que el original. Dirígete al menú Efectos. Consejo Tanto en Photoshop como en Paint Shop Pro. Finalmente haz click en el botón Guardar. ponle un 2 Desde la Barra de Herramientas de Photoshop (la encuentras a la izquierda del área de trabajo) elige la Herramienta Varita Mágica . abre Efectos de Textura. y más tarde experimentar aplicando tus propias variantes. y selecciona Guardar Como. ya que de esto depende que el resultado sea lo más realista posible. con el fondo intacto. pulsa la tecla Mayúsculas y sigue haciendo click simultáneamente en distintas zonas del fondo hasta que la selección lo abarque todo. También puedes realizar un trazado alrededor de la figura. y selecciona Azulejos. haz click en el icono del ojo. Progresivo. Si la selección que ha creado la varita no abarca todo el fondo. El fondo y la figura deben fundirse de un modo suave y natural. y en el desplegable elige Abrir . Contiguo. De ésta manera. El límite lo pone tu creatividad. pero prueba tus propias variantes. y completa con los siguientes valores: Correspondencia. en el futuro podrás acceder al archivo y 4 modificar la capa con el fondo personalizado. y reemplazarlo por una textura propia. finalmente. A continuación haz click con la varita en alguna zona del fondo donde el color sea parejo. Tanto Photoshop como Paint Shop Pro poseen herramientas para crear texturas de un modo muy simple. Puedes basarte en los parámetros de este ejemplo. De ésta manera. 1 Dirígete a la Paleta Capas. 1. de nubes que combina los colores azul y blanco que has seleccionado En la Paleta de Herramientas. Valor RVA. elige Abrir y escoge la imagen que desees utilizar para cambiar su fondo. como la máscara rápida en combinación con los pinceles. lo más importante en este truco es la perfección de la selección que debes crear para el fondo. haz click con la varita mágica en alguna zona del fondo donde el color sea homogéneo. 5 Paint Shop Pro 1 Abre menú Archivo. en la Barra de Propiedades. Escoge el camino que te otorgue mayor rapidez y precisión. Si utilizando la varita mágica no consigues que la selección se ajuste al fondo y a la figura. pulsa la tecla Mayúsculas y sigue haciendo click simultáneamente en distintas zonas del fondo hasta que la selección lo abarque todo. y Usar todas las capas.

o empezando desde el principio con el archivo original. a veces lleva a cabo tareas que en otras épocas hubieran sido inimaginables. pulsa la tecla Alt. y escoge la Varita Mágica. hacen falta bastantes horas de práctica. 5 y luego pulsa el botón Guardar. Photoshop 1 Ir al menú Archivo 3 Escoger Abrir 3 Seleccionar imagen 3 Abrir 2 Ir a Barra de Herramientas 3 Elegir Varita Mágica 3 Configurar Propiedades Paint Shop Pro 1 Abrir Menú Archivo 3 Escoger Abrir 3 Seleccionar fotografía 3 Abrir 2 Ir a Paleta de Herramientas 3 Elegir Varita Mágica 3 Configurar Propiedades 3 Click en el fondo 3 Pulsar Mayús. + Click hasta abarcar todo el fondo 4 Abrir menú Efectos 3 Efectos de Textura 3 Seleccionar Azulejos 3 Configurar cuadro de diálogo 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 selección 3 Menú Archivo 3 Guardar como 3 Elegir TIFF 3 Escribir nombre 3 Guardar Reconstruir y mejorar retratos Aunque no puede decirse que la informática haga verdaderos milagros. y nado solamente el trozo superior de la foto. de la siguiente manera: Tolerancia. configura sus parámetros desde la Barra de Propiedades. y has “cogido” ambos trozos de la foto. sin llegar a tocarse.. para que no se produzca pérdida de información pero el tamaño del archivo sea menor. + Click 3 Agregar zonas de selección 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 Mayús. 54 www. Photoshop Procura escanear la foto con los trozos colocados cerca uno del otro. por supuesto.pctoday. Puedes unir digitalmente dos trozos de una foto. Siempre te interesa guardar este tipo de imágenes en formato Tiff.es . y en el cuadro de diálogo escribe un nombre para el archivo. estamos hablando de técnicas digitales. ya que así puedes volver a esitarlas cuantas veces lo desees. Pulsa la combinación de teclas Ctrl + D para “soltar” la selección. como una selección flotante que podrás mover libremente.. Luego haz click con la varita en la zona negra que ha quedado por detrás de la foto. abre el menú Archivo. Resumiendo. y Usar todas las capas. En este momento has invertido la selección. Ve a la Paleta de Herramientas. escoge Guardar como. 3 Ahora abre el menú Selección. de entre las que se ofrecen a la hora de guardar. 1 pulsa la tecla Suprimir (o Retroceso) para borrar el fondo. una de ellas. Utiliza la compresión LZW. Ve a la Paleta de Herramientas. Relájate y experimenta todo lo posible sin temor a equivocarte. Contiguo. escoge Marco Rectangular. de manera de “restar” esta área de la selección. de más está decir que para que el trabajo sea perfecto. y no te desanimes si al principio no estás satisfecho con los resultados.Curso Ahora el fondo de la imagen se ha convertido en un motivo personalizado. Guarda el archivo en formato TIF con una buena resolución (300 dpi serán más que suficientes). Puedes dejar como fondo el color negro de la tapa del escáner. y para eso tienes en Photoshop y Paint Shop Pro a dos aliados extraordinarios. 20. para seleccionarla. Pero recuerda. y sin soltar el botón del ratón. y escoge Invertir (puedes pulsar la combinación Ctrl + I). es la de reconstruir una fotografía que se ha roto. sin perder calidad en el proceso. rodea toda la parte inferior de la 2 foto. en el apartado Tipo elige TIFF. en Suavizado. Finalmente. todas las cosas son difíciles antes de hacerse fáciles… ¿Verdad? Sigue paso a paso este ejercicio. ya que siempre podrás volver un paso atrás pulsando la combinazión Ctrl+Z. sin que se vean marcas ni huellas. Ahora tienes seleccio- marca las casillas de verificación.

Acércate con el ratón a la zona rota de la fotografía. y has “cogido” ambos trozos de la foto. Ve a la Paleta de Herramientas y escoge nuevamente la Herramienta S e l e c c i o n a r. Puedes dejar como fondo el color negro de la tapa del escáner. Es algo que requiere bastante tiempo y dedicación. Ve a la Paleta de Herramientas. 1 5 Ahora ve a la Paleta de Herramientas y escoge el Tampón de Clonar. para aplicar correcciones con más detalle. rodea toda la parte inferior de la foto. para corregir otros desperfectos en la foto como manchas y arañazos. edita sus parámetros desde la Paleta de Configuración.. abre el menú Archivo y elige Guardar para aplicar los cambios. Resumiendo. Progresivo. 3 Ahora abre el menú Seleccionar. y escoge la Varita Mágica. y escoge Invertir (puedes pulsar la combinación Mayús + Ctrl + I) Paint Shop Pro tijera. 2 6 Aprovecha que estás usando el Tampón de Clonar. Es algo que requiere bastante tiempo y dedicación. para corregir otros desperfectos en la foto como manchas y arañazos y de esta manera mejorar el aspecto general de la fotografía. Luego haz click con la varita en la zona negra que ha quedado por detrás de la foto. Guarda el archivo en formato TIF con una buena resolución (300 dpi serán más que suficientes). y marca Muestra Fusionada. puedes realizar el mismo procedimiento con otra herramienta de selección. allí es donde radica la clave del éxito en este tipo de retoques.Retoque fotográfico. Aprovecha que ya estás utilizando la herramienta Pincel de Copia. y Procura escanear la foto con los trozos colocados cerca uno del otro. Acércate con el ratón a la zona rota de la fotografía: haz click en el trozo y sin soltar el botón del ratón. 4 6 pintar sobre la “cicatriz” de la unión de ambos trozos de foto. RVA. Tolerancia. para seleccionarla. Ahora tienes seleccionado solamente el trozo superior de la foto. A continuación debes ir copiando información con píxeles sanos de la imagen (pulsando Alt + Click).. y sin soltar el botón del ratón. abre el menú Archivo y elige la opción Guardar para aplicar todos los cambios. para evitar que se note. pulsa la tecla Alt. y pulsa la tecla Suprimir para limpiar el fondo. hasta cubrirla totalmente. adaptándolo a cada zona estropeada. Una vez que hayas acabado. y verás que el cursor se transforma en una pequeña 4 la fotografía. de la siguiente manera: Correspondencia. modifica el tamaño del pincel con que trabajas. 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 Mágica 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 Mágica 3 Configurar Propiedades 3 Click en fondo negro 3 Suprimir el fondo 3 Abrir menú Selección 3 Escoger invertir 3 Ir a Paleta de Herramientas 3 Escoger Marco Rectangular 3 Alt + desplazar para restar selección 3 Menú Seleccionar 3 Escoger Invertir 3 Ir a Paleta de Herramientas 3 Escoger Seleccionar 3 Alt + desplazar para restar selección 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 Tampón de clonar 3 Alt + click para copiar píxeles sanos 3 Pintar sobre la unión 5 Paleta de Herramientas 3 Escoger Pincel de copia 3 Mayús + click para copiar píxeles sanos 3 Pintar sobre la unión 6 Corregir manchas y arañazos 3 Abrir menú Archivo 3 Guardar 6 Corregir manchas y arañazos 3 Menú Archivo 3 Guardar Nº 98 55 . de manera de “restar” esta área de la selección . como el lazo. y de esta manera mejorar el aspecto general de Ve a l a Paleta de Herramientas. Consejo Procura realizar la tarea de clonar píxeles sanos con la mayor dedicación posible. Si lo deseas. arrástralo literalmente hasta “pegarlo” al trozo inferior de la foto Ahora ve a la Paleta de Herramientas y escoge el Pincel de Copia. 20. escoge Seleccionar. Una vez que hayas acabado. pa- 5 ra evitar que se note. Parte 5ª Ve a la Paleta de Herramientas y escoge la Herramienta Mover. Cuando tengas algo más de práctica. A continuación debes ir copiando información con píxeles sanos de la imagen (pulsando Mayús + Click). y pintar sobre la “cicatriz” de la unión de ambos trozos de foto. hasta cubrirla totalmente. sin llegar a tocarse. arrástralo literalmente hasta “pegarlo” al trozo inferior de la foto. En este momento has invertido la selección. haz click en el trozo y sin soltar el botón del ratón. 1.

Saturación. Luego escribe 135 en la casilla Tinte. escoge Ajustar y finalmente abre la opción Tinte/Saturación/Luminosidad. -6 en 2 56 ve a la Paleta de Herramientas. 3 A continuación haz click con la varita en alguna zona del coche donde el color sea homogéneo. ponle un nuevo nombre al archivo. pero imagínate todos los casos en que también te podrá ser útil… ¡son casi infinitos! Abre el menú Selección. De esta manera el resultado es muy realista. en blanco y negro. y escoge la que representa la de Saturación. Comienza por buscar la foto de tu coche. y la modificación del tono y la saturación de una imagen. Si observas que la selección no abarca la totalidad del vehículo. completa la información con los siguientes valores: en Editar. En el cuadro de diálogo que aparezca. Cuando la selección sea correcta. y el cursor se transformará en un gotero. Paint Shop Pro guna. y Luminosidad. exactamente igual que aparecen por defecto. Luminosidad. y elige Gama de Colores. y no te has decidido por ningún color en particular… este truco es para ti. El cuadro de diálogo te mostrará una previsualización de la selección que 5 Photoshop 1 Comienza por buscar la foto de tu coche o de otro elemento habitual que tenga buena calidad. hasta que la selección lo abarque todo. selecciona la opción Maestro. dos. Saturación. escribiéndolo en la casilla de texto o desplazando la barra del cuadro de diálogo.es . Ten en cuenta que la Saturación agrega intensidad de color. +135. Pulsa el icono del ojo para previsualizar el resultado en la foto original. luego haz click con el gotero en una zona de color pleno del coche. Un valor cero deja intactas estas variables. 1 Ahora verás unos halos rodeando el área del coche que has seleccionado (el color dominante). puedes subir el nivel de tolerancia. elige Muestrea- 2 Abre el menú Imagen. Con herramientas tan sencillas como la selección por gama de colores. Dirígete al menú Archivo y selecciona la opción Abrir. Si la selección que ha creado la varita no abarca todo el color del coche. Marca la casilla de verificación Ver. En este una Varita Mágica. La ventaja de este método radica en que puedes modificar la coloración de cualquier objeto. y haz click en Guardar. pulsa en Abrir. dirigiéndote al menú Archivo y seleccionando Abrir. Cuando el color sea el elegido. elige Guardar la tecla Mayúsculas y sigue clickeando simultáneamente en distintas zonas del color del coche. Una vez que la hayas localizado en tu disco duro. textura o reflejos. pulsa el botón abrir. 4 Abre el menú Colores. Ahora puedes desplazar 4 los reguladores de Tono. selecciona Todos. En este caso hemos aplicado la técnica sobre la foto de un automóvil. selecciona Tinte del apartado Correspondencia.pctoday. En la Paleta de Configuración. Se abrirá un cuadro de diálogo. Escoge alguna en donde el color sea bastante nítido y no haya otros elementos que lo tapen de forma al- has creado. podrás obtener unos resultados impactantes en el retoque de tus fotografías. pulsa el botón OK. y –3 en Luminosidad. para previsualizar el resultado en la fotografía. Deja el apartado Colorear sin marcar. selecciona Ajustes y luego elige Tono / Saturación (o pulsa la combinación Ctrl + U).Curso Colorizar y entonar Si estás pensando en cambiar de coche. -3. www. y muy pocos podrán darse cuenta que la foto ha sido manipulada digitalmente. y la Luminosidad agrega Luz. Finalmente abre el menú Archivo. y escribe 40 como valor en el apartado Tolerancia. sin alterar otras variables como su brillo. nación de teclas Mayús+H. Deja el resto de valores intactos. En el apartado Editar. -6. pulsa el botón OK. Una vez que hayas localizado la foto en tu disco duro. En el apartado Seleccionar. También puedes pulsar la combi- 3 Como (o pulsa la combinación Mayús + Ctrl + S). pulsa caso los valores han sido: Tono.

Como consecuencia. elige Abrir y escoge una fotografía en la que puedas eliminar algún personaje. Para la Web. y marca la casilla de verificación Suavizado. Evita llegar a saturación que produzca colores “fluo”: intenta conservar el brillo y la textura de los colores originales. el tamaño del archivo será más liviano y se descargará más rápido desde Internet. Con Photoshop y Paint Shop Pro es muy sencillo eliminarlo de la composición. Pero si deseas enviar la imagen por correo electrónico o colocarla en una página web. conserva la versión original del archivo en formato Tiff o en el original del programa que estés utilizando. has eliminado a la persona y en su lugar queda un espacio en blanco. ya sea PSD de Photoshop o PSP de Paint Shop Pro. y más pronto que tarde estarás retocando fotos como un verdadero artista. en la Barra de Propiedades. agregar. 5 Como siempre. Opacidad: 100%. Seguramente al principio te costará un poco. escoge Consejo Las herramientas de Tono y Saturación son armas muy sutiles y extremadamente sensibles. también puedes pulsar la tecla Retroceso de tu teclado. De esta forma se conservará toda la información de capas y efectos que se hayan aplicado sin merma de calidad y con posibilidad de volver atrás sobre los cambios realizados. escribe 2 px en el apartado Calado. Resumiendo. pulsa la tecla Alt y haz click simultáneamente con el Dirígete a la Paleta de Herramientas. te divertirás en grande. ya que conservará más detalle que si utili- 6 zas métodos de compresión. selecciona el área donde se encuentra la persona que eliminarás. además de ser compatible con la mayoría de los navegadores de Internet. sobre la imagen. pero ahora escoge la Herramienta Lazo. y escoge la Herramienta Zoom (el icono de la lupa). en la zona que deseas copiar. De esta manera. Si te equivocas y la selección desaparece. Imagínate cómo se aprovechan los fotógrafos profesionales de estas herramientas: han capturado una instantánea perfecta e irrepetible de una celebridad mundial. Photoshop 1 Ir al menú Archivo 3 Elegir imagen 3 Abrir 2 Abrir menú Selección 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 Mágica 3 Configurar propiedades 3 Click con la varita en el coche 3 Seleccionarlo todo 4 Menú Colores 3 Ajustar 3 Tinte/Saturación 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 Saturación 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. elige Jpeg. de manera que el truco sea imperceptible y realista. Haz click en Guardar. Haz click en Abrir. nuevamente Guardar como y . puedes empezar nuevamente. y marca las casillas Alineado y Usar todas las capas. Flujo.en el aparatado Formato. elige la opción Guardar Como o pulsa la tecla F12. Finalmente abre el menú Archivo. Debes intentar que el blanco Nº 98 57 . Repite el mismo procedimiento tantas veces como sea necesario. quitar o modificar personas que aparecen en las fotografías. También es muy útil si deseas imprimir la imagen en cuestión. pero por detrás aparece un personaje anónimo que (sin querer) estropea la escena. Parte 5ª Cuando el color se haya transformado en el verde del ejemplo. tampón de clonar. Hoy en día.Retoque fotográfico. A continuación. y quedarán algunas marcas en la zona donde se encontraba el personaje eliminado. guardar como Jpeg. Has ampliado la vista de la zona que editarás. Aunque tú no seas un fotógrafo profesional. Pero recuerda que todo es cuestión de horas de prác- Photoshop Desde el menú Archivo. con la muestra que has tomado. puedes aprender el siguiente truco y comenzar a experimentar con tus propias fotografías. A continuación realiza con sumo cuidado una selección a mano Ahora abre el menú Edición.. Gif o PNG. Ahora haz click alzada alrededor del sujeto que vas a eliminar. 4 5 Tu tarea ahora consiste en ir clonando partes del fondo del paisaje. Ahora desde la Paleta de Herramientas elige el Tampón de Clonar.. En el cuadro de diálogo ponle un nuevo nombre al archivo para que no sustituya al original y puedas volver a éste en otra ocasión. y configura sus propiedades de la siguiente manera: Modo. sin dejar siquiera una huella. hasta cubrir toda la zona blanca. abre el menú Archivo. Normal. y elige Borrar. y sin soltar el botón del ratón. con los avances de la informática (y en particular del retoque digital de imágenes). procura dejar un margen suficiente para observar algo del entorno. 100%. pulsa el botón de Aceptar. es muy sencillo Modificar y eliminar personajes tica y experiencia. pintando sobre el área que ha quedado en blanco. comienzas a pintar en la zona blanca. Para ello. los resultados no sean excesivamente notorios ni artificiales. debes utilizarlas con cautela y buscar que al transformar colores. hazlo con paciencia y tranquilidad. 3 1 2 Nuevamente ve a la Paleta de Herramientas.

Haz click en el botón guardar. en la zona que deseas copiar. Definición. o pulsa la tecla F12.. Tu tarea ahora consiste en clonar partes del fondo del paisaje. Debes intentar que el blanco se fusione con el color del fondo. o lo que es lo mismo. Lo óptimo sería que el fondo fuera homogéneo. y haz click en Guardar. Si te equivocas y la selección desaparece. Pulsa la tecla Shift y haz click simultáneamente con la herramienta del Pincel de Copia. Tamaño. Opacidad. y practica… 3 Finalmente abre el menú Archivo. Procura dejar un margen suficiente para observar algo del entorno. una selección ajustada. Para ello tendrás que pintar sobre el área que ha quedado en blanco. selecciona la opción A mano alzada. Has creado un pincel redondo con los bordes suavizados. elige Guardar Como (o pulsa la combinación Ctrl + Mayús + S). puedes empezar de nuevo. también puedes pulsar la tecla Suprimir de tu teclado. que no elimine información que deseas conservar.Práctico se fusione con el fondo. Por otro lado. escoge la Herramienta Lazo. ya que será una referencia básica en el proceso que viene a continuación. ya que los defectos se disimulan muy fácilmente. ponle un nuevo nombre al archivo (para conservar el original intacto). Resumiendo. hazlo con paciencia y tranquilidad.. Es tan fácil como parece. hasta cubrir toda la zona del color elegido. en primer lugar. A continuación. donde se encuentra la persona que eliminarás. Dirígete a la Paleta de Herramientas. A continuación realiza con sumo cuidado una selección a mano alzada alrededor del sujeto que vas a eliminar. 4 necesario. y escoge Acercar (el icono de la lupa). con la muestra que has tomado. en la Paleta de Configuración. Ahora desde la Paleta de Herramientas elige el Pincel de Copia. Repite el mismo procedimiento tantas veces como sea click sobre la imagen. escribe un nuevo nombre para el archivo. Densidad. selecciona el área Ahora abre el menú Edición.. dife- 6 rente al de la imagen original. escribe 2 en el apartado Progresivo. has eliminado a la persona y en su lugar queda un espacio en blanco. Como consecuencia. inventarte lo que debería haber detrás del personaje eliminado. cielo y paisajes lejanos (como en este ejercicio) la tarea se simplifica. pero no es imprescindible porque con las herramientas adecuadas se puede inventar lo que falta. En la ventana que se abre. 100. Ahora haz Dirígete a la Paleta de Herramientas. has ampliado la vista de la zona que editarás. Y como siempre: practica. comienza a pintar en 5 la zona de color blanco. en la casilla Nombre. elige Abrir y escoge una fotografía en la que aparezca algún personaje que desees eliminar. de manera que el truco sea natural y no queden “cicatrices” del retoque . A continuación. y sin soltar el botón del ratón. y marca la casilla de verificación Antiarrugas. elige la opción Guardar Como. Cuando se trata de árboles.pctoday. de manera que el truco sea natural y no queden “cicatrices” del retoque. Paso. practica. 100. Redonda. 50. de tal forma que no se note en exceso. Finalmente abre el menú Archivo. Photoshop 1 Ir al menú Archivo 3 Elegir Abrir 3 Seleccionar fotografía 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 fotografía 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 selección a mano alzada 3 Ir a Paleta de Herramientas 3 Escoger Lazo 3 Configurar Propiedades 3 Realizar selección a mano alzada 4 Abrir Menú Edición 3 Borrar 3 Ir a Paleta de Herramientas 3 Elegir Tampón de Clonar 3 Configurar Propiedades 4 Abrir Menú Edición 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 + Mayúsculas 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.es . y configura sus propiedades de la siguiente manera: Forma. De esta forma. 6 1 2 Paint Shop Pro En el menú Archivo. el ingenio y buen ojo que hacen falta para escoger acertadamente las zonas ideales para clonar. Consejo Aquí hay dos factores muy importantes que determinarán la calidad del retoque digital. pero tendrás una versión retocada el mismo. 20. De esta forma podrás conservar el original intacto. haz click en Abrir. y elige Limpiar. de bordes suaves. 1.

el cual es un periférico dedicado expresamente al proceso de digitalizar imágenes. que ofrecerá algunos estilos predefinidos. y finalmente haz click en Guardar. Algunos modelos incluso pueden realizar el proceso con diapositivas. Pulsa el botón Previsualizar 2 Opaco. Se abrirá la ventana del software de tu escáner. traduce esa información a unos y ceros para que la entienda el ordenador y la vuelca a tu programa favorito de tratamiento de imágenes. Paint Shop Pro y Adobe Photoshop Apoya la foto que desees digitalizar sobre el vidrio de tu escáner o la bandeja de entrada del mismo. Podrás volver a editarlo en cualquier momento. Incluso los hay específicos para escanear objetos en tres dimensiones. habitualmente puedes configurarlos desde el software del escáner. escribe un nombre descriptivo para tu fotografía. planos. debes abrir el menú Imagen y luego escoger la opción Marcos. en formato TIFF. Luego baja la tapa del escáner si es necesario o procede a activar el botón de preparado si es un escáner de bandeja. Aplicar bordes y marcos creativos Algo muy interesante es la aplicación de marcos personalizados a las fotos.. el enfoque y la gama de colores. ya que ambos aprovechan el software que viene incluido con el escáner o el propio de Windows XP. ¡Eso es todo! Ya tienes tu foto en formato digital.. También puedes aplicarlos para colocar en un álbum de fotografías en la web. El límite lo pone tu creatividad. necesitarás un escáner. como en las viejas fotos de tus abuelos. Puedes aplicar los marcos para enviar tarjetas de felicitación a través del correo electrónico. Suelta el botón izquierdo del ratón que quede seleccionada el área que deseas adquirir. pero básicamente estos son los valores importantes: en Modo de Color escoge RGB. o en relieve. El proceso es muy similar en ambos programas. Consejo Los controladores de la mayoría de los escáneres traen de serie potentes funciones. escoge TWAIN y luego la opción Adquirir. te ahorrarás mucho tiempo en el tratamiento posterior de la fotografía. para conservar intacto el original. En cuanto a Photoshop. Para agregar marcos a tus fotos desde Photoshop. Puedes crear marcos rectangulares o elípticos. y sin soltar el botón arrastra hasta 1 para que el escáner haga un barrido y te muestre lo que has colocado sobre la bandeja. Luego pulsa el botón Digitalizar. Si aprendes a manejar a fondo estas funciones. ■ Configura los parámetros de exploración de la imagen. Una vez que finalice la exploración de la imagen. Coloca los bordes de la foto junto a cual- Abre el menú Archivo. A partir de allí. abarcar toda su superficie. se abrirá la fotografía en una nueva ventana de Photoshop o de Paint Shop Pro. no es todo tan sencillo ya que no posee una herramienta automatizada (como Paint Shop Pro) que lleve a cabo esta tarea. abrirá el Asistente de Enmarcado. En el apartado Formato escoge TIFF para que la imagen no pierda calidad. 1 Apoyar la foto en el escáner 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 parámetros de exploración 3 Seleccionar fotografía 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 . en un CD o en el propio disco duro del PC. El nombre de los apartados puede variar de acuerdo a cada software. con los que seguramente llegarás a resultados sorprendentes. en Entrada (o Resolución) escribe 300 dpi. Ya tienes tu fotografía en formato digital. aplicando los infinitos efectos de capa que encontrarás dentro Resumiendo. selecciona la opción Importar. transparencias y otros tipos de representaciones. primero debes ampliar el tamaño del lienzo para crear unos bordes blancos alrededor de la fotografía. Recuerda algo importante: siempre que apliques marcos personalizados a tus fotografías. hazlo en una nueva capa así preservas los píxeles “reales” de la foto. para que la foto quede correctamente alineada con la dirección de lectura. En Paint Shop Pro. lista para archivar o para retocar en la aplicación que has utilizado o en cualquier otra compatible con el formato en que la has guardado. algo que ya es habitual en casi la totalidad de los productos. puede que tengas muchas imágenes en papel que quieras almacenar junto a las primeras. además de las típicas fotografías o documentos en papel. Este dispositivo explora la información de tu fotografía con un haz de luz. lista para archivar o retocar con las herramientas de tu programa. Ahora coloca el puntero del ratón en un ángulo de la fotografía. Para hacerlo. en Original selecciona 3 + S. y en Escalar escoge el 100%. o imprimirlas para sorprender a tus familiares y seres queridos. Abre el menú archivo y escoge Guardar. elige un destino de tu disco duro. Éste ha de ser compatible con el estándar TWAIN. Luego puedes crear el marco en una nueva capa. Los bordes también pueden ser suavizados.Curso Escanear fotografías Aunque ya sólo utilices tu cámara digital. se del menú Capa. Y guarda el archivo con un nombre diferente. Pon la imagen hacia abajo para que el haz de luz pueda capturarla. y luego en Estilo de Capa. que puedes aprovechar al máximo antes de escanear: parámetros como el brillo y el contraste. o pulsa la combinación Ctrl 4 quier ángulo del escáner.

Conceptos básicos. el ser humano es el protagonista. 6. podrás eliminar arrugas y marcas del paso del tiempo. 3. También podrás corregir el típico problema de ojos rojos que ha estropeado tantas fotografías. mejorar los retratos con luz. corregir polvo y rascaduras. y aprenderás a usar efectos de desenfoque e iluminación para dar a tus retratos el toque de refinamiento que hará que se vuelvan inolvidables. Brillo y contraste. ya que deseamos que en el futuro nos recuerden como bellas personas… en el más amplio sentido de la expresión. Primer contacto con las herramientas de Photoshop 7 y Paint Shop Pro 7. 54 www.es . uién no se ha peinado o ha puesto una hermosa sonrisa. Es posible que muchas de las fotografías que nos han tomado a través de los años. Técnicas de reparación de fotos (II). lee atentamente los trucos que te enseñamos a continuación… ¡y tus nietos te recordarán como una hermosa persona! En este capítulo del curso. Técnicas de reparación de fotos (I). ante el disparo de una cámara fotográfica? Todo el mundo desea aparecer con su mejor rostro en cualquier fotografía. Extraer. eliminar el moiré. borrar elementos no deseados. no nos muestren muy agraciados. exposición y color. muchos de estos problemas pueden solucionarse casi mágicamente. el protagonista es el retrato. Máscara rápida. PC Today nº 98 Eliminar defectos de la piel. PC Today nº 99 rompas ninguna foto. en muy pocos pasos. enfoque suavizado. PC Today nº 95 Reparar manchas y texturas. disimular el paso del tiempo. Introducción al retoque fotográfico. modificar personajes. bordes y marcos creativos.pctoday. ya que aprenderás básicamente a embellecer los retratos de tus seres queridos . capas de ajuste. tono. PC Today nº 97 Fondos personalizados. No hace falta que escondas ni Q 2. minimizar manchas. Gracias a las fabulosas herramientas que ofrecen Adobe Photoshop y Paint Shop Pro. PC Today nº 94 En esta última entrega del curso de retoque fotográfico digital. The GIMP. PC Today nº 96 4. Te transformarás en un “cirujano plástico digital”.Curso Embellecer retratos Guía del curso 1. Esta actitud es muy comprensible. 5. Recreando fotos creativamente. Aquí te enseñamos los mejores trucos para que puedas embellecer y mejorar las fotografías de tus seres queridos y eliminar así las marcas del paso del paso del tiempo o corregir defectos de la piel. Corrige el aspecto general de tus fotos. Embellecer y refinar retratos. Selecciones sencillas. Eliminar arañazos rectos.

sigue sumando áreas de selección con la herramienta que mejor manejes (lazo. Haz click en el botón Abrir. A continuación debes seleccionar sólo el área defectuosa de los ojos. selecciona Ajustes y finalmente escoge Tono / Saturación (también puedes pulsar el atajo Ctrl + U). 6 Abre el menú vista. En la Barra de Propieda- 1 des configura la Tolerancia con un valor de 35. la composición y la iluminación son casi perfectas. Manos a la obra. para acercarte tanto como puedas . elige la Herramienta Zoom. desplaza el ratón abarcando el 3 Photoshop Desde el menú Archivo. salvo por un problema… los protagonistas parecen estar “endemoniados” ya que sus ojos presentan un extraño color rojizo. Nº 99 55 . para corregir selectivamente dicho canal. Contiguo. sin soltar el botón.Retoque fotográfico. Escoge la Varita Mágica desde la Paleta de Herramientas. A continuación abre el menú Imagen. 2 mayor distancia. para que su aspecto sea absolutamente natural. para previsualizar el resultado. apreciarás los efectos del proceso a realizar. De esta forma se aplicarán los cambios en tu imagen de forma definitiva. Haz click en el botón Abrir. y escoge Encajar en pantalla. En la Paleta de Configuración escoge Valor 3 Consejo Tanto en Photoshop como en Paint Shop Pro. y Todas las Capas. pulsa SHIFT en tu teclado y haz click ahora sobre el otro 4 Paint Shop Pro Desde el menú Archivo. o pulsa la combinación Ctrl + O y escoge la imagen con el problema de ojos rojos. y cuando el aspecto de los ojos sea lo más natural posible. y marca las casillas correspondientes a Suavizado. Deja el resto de valores intactos. y escribe 35 como valor de Tolerancia. para obtener resultados aún más naturales. luego haz click en la imagen. 5 2 Desde la Paleta de Herramientas de Paint Shop Pro elige la Herramienta Acercar. buscando que el ojo mantenga su brillo y textura. La técnica es muy sencilla y se basa principalmente en restarle saturación al canal del color rojo. en el apartado Editar. elige la opción Abrir y escoge una imagen que contenga alguna figura con el problema de ojos rojos. Haz click en la casilla de verificación Ver. normalmente situada a a la izquierda del área de trabajo. Algunos programas de retoque fotográfico ya incorporan herramientas que solucionan éste problema de forma automática con muy buenos resultados. solamente en la zona de las pupilas. y haz click con la varita en la parte roja de los ojos. haz click en el botón OK. etcétera). Dirígete al apartado Saturación y desplaza el regulador hacia la izquierda. y mantener los valores de brillo y contraste inalterables. elige Abrir. Pero aquí aprenderás a utilizar tu sentido común y hacerlo en forma manual. abre el menú Archivo y selecciona la opción Guardar. Define un valor aproximado de –50. ya que logra buenos resultados. para sumar las selecciones. área de los ojos. Desde la Paleta de Herramientas de Photoshop. para crear una selección. la clave en este truco (como en muchos otros) consiste en lograr una selección ajustada y precisa. 1 Es casi imposible que nunca te haya sucedido lo siguiente: la fotografía que has tomado es preciosa. Parte 6ª Corregir ojos rojos Dirígete a la fotografía ampliada. Escoge la herramienta Varita Mágica desde la Paleta de Herramientas. y todo parece estar fenomenal. desplaza el ratón abarcando un área que encierre los ojos. A continuación debes seleccionar el área defectuosa de los ojos. Si el resultado te convence. Luego haz click en la imagen y. marca la casilla Muestra Fusionada. Luego varía la saturación del canal rojo. selección elíptica. para ver el resultado de tu obra con una RVA en Correspondencia. De esta forma podrás ver mejor la zona en la que vas a trabajar y ojo. y sin soltar el botón. Si con la varita mágica no logras una selección correcta con el primer click. despliega el menú correspondiente y escoge Rojos. Se ha abierto el cuadro de diálogo Tono / Saturación.

Escoge la foto que deseas corregir de tu disco duro o de cualquier otro dispositivo de almacenamiento. para que puedan tener un aspecto perfecto. para aplicar los cambios en tu imagen. 6 Resumiendo. y haz click con la varita en la parte roja de los ojos. Ve al apartado Saturación y desplaza el regulador hacia abajo.. despliega el menú y escoge Rojos. Opacidad 50%. sino en copiarla de otro sitio donde sea más perfecta.. y marca Usar Todas Paleta Capas. para previsualizar el resultado. copiando información buena de la piel y aplicándola sobre una capa vacía. El resultado dependerá mucho de la calidad de la imagen original. pulsa SHIFT en tu teclado y haz click ahora sobre el otro ojo. puedes hacerlo también pulsando la tecla S. Photoshop Desde el menú Archivo haz click en Abrir. A continuación abre el menú Colores. Dirígete a la 1 Ve a la Paleta de Herramientas y selecciona el Tampón de Clonar. Si el resultado te convence. ¡Muchas de ellas suelen aparecer “horribles” en las fotos! De esta manera podremos eliminar sus espinillas y pequeñas marcas en el rostro. nuestra piel va registrando diversos cambios que reflejan los acontecimientos a lo largo de nuestra vida. para verlas más en detalle. 5 Abre el men ú Ve r. las Capas. desplaza el ratón abarcando la zona de las espinillas. y pulsa el botón Crear una capa nueva. un valor aproximado de –60 logra buenos resultados. Luego haz doble click en el nombre de la capa. Luego dirígete a la Barra de Propiedades. haz click en el botón Aceptar. 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 Mágica 3 Configurar Propiedades 3 Ir a Paleta de Herramientas 3 Escoger Varita Mágica 3 Configurar Propiedades 4 Click en zona defectuosa 3 Abrir menú Ajustes 3 Escoger Tono / Saturación 4 Click en zona defectuosa 3 Abrir menú Ajustar 3 Escoger Tinte / Saturación / Luminosidad 5 Editar Cuadro de diálogo 3 Restar Saturación 3 Previsualizar el resultado 3 Click en OK 5 Editar Cuadro de diálogo 3 Restar Saturación 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 pequeñas marcas en la piel: desde el acné juvenil hasta las arrugas de la vejez. luego haz click en la imagen. selecciona Ajustar y finalmente escoge Tinte / Saturación / Luminosidad.es . para ver el resultado de tu obra con una mayor distancia. para crear una selección. y cuando el aspecto de los ojos sea lo más natural posible.pctoday. y llámala “Eliminar Defectos. Deja el resto de valores intactos. Vamos a hacer de cirujanos plásticos. abre el menú Archivo y escoge Guardar (o pulsa la combinación Ctrl + S). En este ejemplo veremos como quitar pequeñas espinillas del rostro de una adolescente. Tanto en Photoshop como en Paint Shop Pro. y haz 56 www.Curso Dirígete a la fotografía ampliada. la técnica consiste en utilizar el tampón de clonar. ya que no consiste en inventar piel. y escoge Alejar x 5. en el apartado Editar. Haz click en el icono del Ojo. y configura un pincel suave de 15 píxeles. 3 Desde la Paleta de Herramientas de Photoshop elige la Herramienta Zoom (el icono de la Lupa). deja el resto de valores que queden intactos. para sumar las selecciones. para corregir selectivamente dicho canal. 4 Se ha abierto el cuadro de diálogo Tinte / Saturación / Luminosidad. Luego dirigete a la Paleta Capas. y sin soltar el botón. 2 Modo Normal.

A continuación ve a la Paleta click en la capa de Eliminar Defectos para activarla. haz click directamente sobre las espinillas. En el cuadro de diálogo que se abre. Cuando las espinillas hayan desaparecido. Finalmente Guarda tu archivo pulsando Ctrl + S para conservar los cambios. o defectos y arrugas del papel. 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 Tampón 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 Tampón 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 . para ocultarlas bajo la “nueva piel”. hasta que las marcas sean imperceptibles . si no estás conforme con el resultado. Repite este procedimiento dos o tres veces. Desde la Paleta de Herramientas de Paint Shop Pro elige la Herramienta Acercar (el icono de la Lupa).Retoque fotográfico. si no estás conforme con el resultado. de las espinillas. Con la herramienta Pincel de Copia. y haz click en Aceptar. Cuando las espinillas hayan desaparecido. 2 Capas. para tomar muestras de piel sana con valores de brillo y color similares. Repite el paso anterior sobre cada una de las marcas que encuentres en la piel. luego haz click en la imagen. cambiando su opacidad. para que el retoque sea imperceptible. La gran ventaja de realizar la tarea sobre una capa vacía. deja el resto de valores intactos. Parte 6ª Consejo Esta técnica es similar a otras en las que has aprendido a eliminar manchas de humedad en fotos antiguas. para que el resultado sea aún más perfecto. haz click + Alt en zonas cercanas a las espinillas. desplaza el ratón abarcando la zona 5 5 3 el menú Capas. Con la herramienta Tampón de Clonar. hasta que las marcas sean imperceptibles. y haz click en la capa Eliminar Defectos para activarla. para tomar muestras de piel sana con valo- 4 pelera de la Paleta Capa y volver a comenzar nuevamente. Forma Redonda. abre 4 Paint Shop Pro Desde el menú Archivo haz click en Abrir y escoge la foto que deseas corregir de tu disco duro. puedes borrar la capa Eliminar Defectos haciendo click en el icono de la pa- 1 el botón Crear una capa nueva. Resumiendo. Dirígete a la Paleta Capas. es que luego puedes editarla independientemente. Una vez tomada la muestra. deja el resto de valores como vienen por defecto. haz click directamente sobre las espinillas. y sin soltar el botón del ratón. Luego dirígete a la Barra de Propiedades. Finalmente Guarda tu archivo pulsando Ctrl + S para conservar los cambios. y pulsa res de brillo y color similares. Repite el paso 4 sobre cada una de las marcas que encuentres en la piel. Definición 50 y Opacidad 50. Ve a la Paleta de Herramientas y selecciona el Pincel de Copia. para verlas más en detalle. para ocultarlas bajo la “nueva piel”. La diferencia radica en elegir acertadamente las zonas de piel sana. y luego haz click en Fusionar Todo (aplanar). abre el menú Capas y selecciona be “Eliminar Defectos” como nombre para la capa. escripíxeles. haz click + Shift en zonas cercanas a las espinillas.. y configura un pincel suave de 15 Acoplar Imagen. Repite este procedimiento dos o tres veces.. Una vez tomada la muestra. selecciona Fusionar.

En el caso del ejemplo escogido serían los rostros del bebé y su madre. 4 Dirígete a la Paleta de Herramientas y escoge la Herramienta Degradado (puedes pulsar la letra G de tu teclado). hasta que haya un equilibrio entre la zona enfocada y desenfocada. la coloración de los vestidos y el tono en general. escoge Desenfocar. para apreciar mejor el efecto global. debe tener un equilibrio tal que no se vea demasiado borrosa. Aléjate de tu monitor y observa el resultado con cierta distancia. A continuación abre el menú Filtro. los brillos en las modelos. Este efecto es muy utilizado en revistas de moda y belleza. te pulsa OK para aplicar el filtro. Finalmen- A continuación haz click en el centro de atención de la fotografía.pctoday. y en Destino selecciona el mismo archivo que estás utilizando. escribe “Capa para desenfocar”. Podríamos llamarla “Técnica de enfoque selectivo. Deja el resto de valores por defecto. En la Capa para desenfocar debe haberte quedado un círculo 5 Consejo No tengas miedo en intentar varias veces el efecto del degradado. Puedes aplicar este efecto sobre una fotografía que aprecies especialmente. Abre el menú Capa. fondo y el negro como color de frente o selecciónalo con el botón del ratón suavizado que va desde el color negro hasta el blanco. arrastra la herramienta hasta la zona más alejada de dicho centro. Marca la casilla de verificación Ver para pre- sa la combinación de teclas Ctrl + S para aplicar los cambios a la imagen que acabas de editar. No te asustes si la imagen queda totalmente borrosa. 1 2 cuadro de diálogo que se abre. Vuelve a intentarlo. pulsa Ctrl + Z o elije la opción deshacer del menú Edición en la barra superior de la aplicación. por los recuerdos que te transmite. consiste en desenfocar solamente una parte de la imagen. Si observas estas revistas detenidamente.es . transmiten un clima apacible y confortable a la vez. y desde el menú asociado la paleta escoge Duplicar Capa. el efecto es correcto.Curso Efectos de enfoque suavizado Este truco resulta tan sencillo como sorprendente. selecciona la opción Guardar del menú Archivo o pul- 6 Herramienta. 2 Photoshop Desde el menú Archivo haz click en Abrir y escoge la foto a la que deseas aplicarle el enfoque selectivo. y elige Desenfoque Gaussiano. Por último. escribe 15 píxeles en el apartado Radio. (Captura 3010) En la Barra de Propiedades de la Abre el menú Capas y selecciona la opción Acoplar Imagen. Prueba varias veces. selecciona Degradado Radial. Dirígete al menú Capas y selecciona la herramienta Duplicar. para aplicarle un toque aún más refinado. ya que allí está la clave de este truco. en la sección colores de la barra de herramientas. notarás que sus fotografías son casi perfectas. En el 1 visualizar el efecto. Sin soltar el botón del ratón. Selecciona la opción Añadir máscara de capa y haz click en Descubrir todas. sobre la cual deseamos centrar la atención del espectador. e inténtalo una vez más. vuelve atrás con Ctrl + Z. En el cuadro de diálogo que se abre. y enfocar sólo una zona. en cuanto a la zona desenfocada. En la Paleta de Configuración. Dirígete a la Paleta Capas. Pulsa la tecla D de tu teclado para escoger el blanco como color de 3 Dirígete a la Paleta de Herramientas y pulsa en el icono correspondiente a la de Seleccionar. Paint Shop Pro Desde el menú Archivo haz click en la opción Abrir y escoge la fotografía a la que deseas aplicarle el efecto de enfoque selectivo. Esto sirve para 58 www. escoge Círculo en el apartado Tipo de Selección y escribe el valor 30 en el apartado Progresivo. donde la fotografía no solamente cumple una misión informativa. Si el resultado del efecto no te convence. Debes lograr que la atención del espectador vaya directamente a la zona enfocada de la imagen. sino que también transmite una estética glamorosa muy particular. Luego haz doble click en OK para duplicar la capa.

selecciona Fusionar. Dirígete a la Paleta Capas. hasta que haya un equilibrio entre la nar Todo (aplanar). de manera que en este ejercicio intentaremos suavizar las arrugas. Photoshop Desde el menú Archivo haz click en Abrir y escoge el retrato en el cual deseas minimizar las arrugas. Se abrirá un cuadro de diálogo. quitándoles algunas arrugas y suavizando marcas de la piel. arrastra para crear una selección elíptica de bordes suavizados. Si el resultado del efecto no te convence. o pulsa la combinación de teclas Mayús + Ctrl + I. Ahora busca el centro de atención de la fotografía (en este caso los rostros del bebé y su madre).. Photoshop 1 Desde el menú Archivo 3 Abrir 3 Escoger foto 3 Abrir Paleta Capas 3 Duplicar Capa Paint Shop Pro 1 Desde el menú Archivo 3 Abrir 3 Escoger foto 3 Abrir Paleta Capas 3 Duplicar 2 Abrir menú Filtro 3 Desenfocar 3 Desenfoque Gaussiano de 15 píxeles 3 Previsualizar efecto 3 Pulsar OK para aceptar 2 Ir a Paleta de Herramientas 3 Escoger el botón Seleccionar 3 Abrir Paleta de Configuración 3 Escoger la herramienta Círculo 3 Escribir 30 en Progresivo 3 Abrir menú Capa 3 Añadir máscara de Capa 3 Pulsar tecla D para configurar negro y blanco como colores de frente y fondo. ya que se utiliza para “rejuvenecer” a las personas fotografiadas. 3 Click + arrastrar para crear selección 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 diálogo 3 Click en Aceptar 5 Click + arrastrar desde el centro de atención 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 técnica también es muy utilizada en los medios escritos de comunicación. y no eliminarlas totalmente. y en el apartado Radio escribe un valor alto como 15. A continuación abre el menú Efectos. de manera que una cara sin una sola arruga es algo imposible. En el 1 Nº 99 59 . vuelve a intentarlo escribiendo otros valores. aún la persona más joven genera arrugas en su rostro con tan sólo reírse o gesticular.Retoque fotográfico. pulsa el icono del ojo pa- 4 zona enfocada y desenfocada. Aprende la técnica que desarrollamos a continuación y luego aplícala en forma combinada con las que has aprendido a lo largo del curso.. lo más importante es que el resultado final del retoque sea casi imperceptible y natural. Como siempre. haz click y sin soltar el botón del ratón. 3 ra previsualizar el resultado. crear una selección circular de bordes suavizados. Así conseguirás realizar retoques digitales totalmente imperceptibles. y haz click en Fusio- Resumiendo. Parte 6ª Dirígete al menú Seleccionar y escoge Invertir. y desde el menú asociado a la paleta escoge Duplicar Capa. 5 Abre el menú Capas. Finalmente pulsa Aceptar para aplicar los cambios. Finalmente Guarda tu archivo pulsando Ctrl + S para aplicar los cambios. elige Desenfoque y luego haz click en Desenfoque de Gauss.

trabajando individualmente sobre cada arruga. Repite el procedimiento hasta cubrir todas las arrugas. Para evitarlo. dad ++. y sin soltar el botón. Luego haz doble click en OK para duplicar la capa. Debes ir aclarando de esta manera cada una de las arrugas. y haz click en la capa Minimizar Arrugas para activarla.es . Luego ve a la Paleta Capas. Si algunas arrugas son más gruesas que otras. Opacidad 20. 3 Desde la Paleta de Herramientas de Photoshop elige la Herramienta Zoom (el icono de la Lupa). En la Barra de Propiedades configura una Exposición del 15%. haz doble click en “Copia de Capa de 1 abarcando la zona de las arrugas. Un formato estándar que ofrece alta calidad y permite el uso de capas es TIFF. para que el relieve no sea tan notorio. elige Rango de Medios Tonos. desde el cuadro de diálogo. además de ocupar bastante menos espacio en el disco. En la Paleta de Configuración.Práctico cuadro de diálogo que se abre. Debes ir aclarando de esta manera cada una de las arrugas. lo que corresponde al pliegue. modifica las opciones del pincel que estés utilizando para que se adapte totalmente al grosor de cada 5 que el grosor del pincel sea similar al grosor de las arrugas de la piel. Adapta el grosor de tu pincel a cada una de ellas. lograrás que la persona retratada tenga una apariencia más fresca y lozana. Abre el menú Capas y selecciona la opción Acoplar Imagen. luego haz click en la imagen. 4 las más en detalle. una vez acoplada la imagen. A continuación debes realizar el trabajo más fino. Dirígete al menú Capas. desde afuera 4 Dirígete a la Paleta de Herramientas y escoge la correspondiente a Retoque. 60 www. elije la opción Guardar tu archivo en disco o pulsa la combinación de teclas Ctrl + S para aplicar los cambios. Guarda tu archivo de trabajo pulsando Ctrl + S para y se aplicarán los cambios realizados en la versión que tengas abierta en ese momento. 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 aplicación. Por último. para verlas más en detalle. Tamaño 8. Si algunas arrugas son más gruesas que otras. Ahora ve a la Paleta Capas. Deja el resto de variables intactas. se aplanarán las capas que formen la imagen y pasarán a ser un archivo más fácil de exportar a otras aplicaciones. Es importante hacia adentro. desplaza el ratón una de ellas. desplaza el ratón abarcando la zona de las arrugas. Desde la Paleta de Herramientas de Paint Shop Pro elige la Herramienta Acercar (el icono de la Lupa). Paso 25 y Densidad 80. puedes guardar dos versiones de la imagen. escribe “Minimizar arrugas”. y haz click en Duplicar. y sin soltar el botón. elige Forma Redonda. selecciona la opción Fusionar y haz click en la opción Fusionar Todo. 2 Ve a la Paleta de Herramientas y escoge el modo de Sobreexponer. para ver- 3 Paint Shop Pro Desde el menú Archivo haz click en Abrir y escoge el retrato en el cual deseas minimizar las arrugas. y en Destino selecciona el mismo archivo que estás utilizando. Una vez que hayas finalizado la operación. para 5 Abre el menú Capas. y escoge un Pincel con bordes suavizados de 10 píxeles. A continuación debes realizar el trabajo más fino. si no las pinceladas se notarán y estropearán el efecto. Y ten presente este consejo: busca siempre la naturalidad. Con tan solo suavizarlas. modifica tu pincel adaptándolo al grosor de cada una de ellas. no elimines las arrugas por completo ya que el rostro parecería “de plástico”. y haz click en la capa Minimizar Arrugas para activarla. Consejo Cuando realices este retoque digital. Despliega el menú inferior para seleccionar Luminosi- 2 De esta forma. desde afuera hacia adentro. con paciencia y dedicación: sobreexponer la parte oscura de las arrugas (el pliegue). Repite el procedimiento hasta cubrir todas las arrugas. Fondo” y renómbrala “Minimizar arrugas”.pctoday. con paciencia y dedicación: sobreexponer la parte oscura de las arrugas. que el relieve no se note en exceso. luego haz click en la imagen. hazlo con la mayor paciencia posible. Es importante que el grosor del pincel sea similar al grosor de las arrugas de la piel. Luego ve a la Paleta Capas. no será posible modificar los cambios que se corresponden a cada capa de una forma sencilla. Sin embargo.

También puedes iluminar el pelo y el contorno de la figura. Tu tarea Cuando estés satisfecho con el resultado. 3 Iluminar las partes más destacadas de la cara. así ganarás precisión. Elige un pincel suave y grande.Retoque fotográfico. Si utilizas una tableta digitalizadora con ta que el resultado sea satisfactorio. Con Photoshop y Paint Shop Pro puedes solucionar este tipo de inconvenientes de varias maneras. 5 Menú Capas 3 Acoplar 3 Guardar. de forma que el resultado sea más acorde con las tonalidades del rostro a tratar. los resultados serán aún mas agradables y naturales. Verás que las capas que has creado se han solidificado y convertido en una sóla. con lo que no te aburrirás. Indica un relleno al 50% en el campo correspondiente para el relleno de la capa de color gris. En la herramienta selector de color. sólo tienes que utilizar la función Guardar del menú Edición. una de ellas es agregando una capa neutra a la imagen. Enseguida notarás que la foto se ha realzado notablemente. para que todo tu trabajo quede registrado. ya que las pinceladas serán casi imperceptibles. Un problema muy común es el de la iluminación. 1 Paleta Capas 3 Crear capa neutra 3 Seleccionar Superponer 3 Relleno al 50%. Parte 6ª Resumiendo. De otro modo. Photoshop 1 Desde el menú Archivo 3 Abrir 3 Escoger foto 3 Abrir Paleta Capas 3 Duplicar Capa 3 Renombrar Capa 3 Pulsar OK Paint Shop Pro 1 Desde el menú Archivo 3 Abrir 3 Escoger foto 3 Abrir Paleta Capas 3 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 más oscuras 3 Adaptar pincel al grosor de cada arruga 4 Retocar cada arruga 3 Aclarar las zonas más 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 más destacadas de la cara. El método es muy sencillo y a la vez exige de ti algo de habilidad. Selecciona el modo Superponer en las opciones de la herramienta.. no todo está perdido. puedes variar la opacidad de la capa neutra para que la iluminación sea mayor o menor. Determina los valores que mejor se adapten a tu método de trabajo y no olvides ampliar la zona a tratar. A continuación selecciona la herramienta Aerógrafo del panel principal. Muchas veces sacamos fotografías que no resultan muy malas… pero tampoco son lo suficientemente buenas. Éstas características se aplicarán para toda la superficie. 1 2 Herramienta Aerógrafo 3 Ampliar zona 3 Elegir color blanco. pueden aparecer halos en torno a la figura. Nº 99 61 . Dirígete a la ventana de capas y desliza la barra que marca la cantidad has- 4 Ahora. que puede llegar a estropear bonitas composiciones. con una presión muy leve. Si el retrato que has tomado resulta un poco soso debido a una mala iluminación. elige blanco como color principal. No te asustes. Recuerda. 5 2 3 Una vez que termines de pintar. El color blanco sobre la capa neutra actúa como una fina cortina que ilumina el rostro. como los ojos. la nariz y la boca. intenta conseguir siempre una gran naturalidad y utilizar la luz para destacar las áreas más importantes de la fotografía pero de forma que no haya un contraste excesivo con lo que rodea a la zona retocada. sigue pintando sutilmente... Comienza a pintar sobre la capa neutra y resalta las zonas que encuentres más oscuras. dirígete al menú Capas y selecciona la opción acoplar imagen. que se corresponde con el fondo.. sin que lleguen a notarse manchas o pinceladas en la piel. Resumiendo. Dirígete a la Paleta Capas o al menú de la barra superior de la aplicación y crea una nueva capa neutra. un lápiz óptico. 4 Variar la opacidad de la capa.