P. 1
Curso de Diseno Web

Curso de Diseno Web

|Views: 133|Likes:
Publicado portoniohualpa

More info:

Published by: toniohualpa on Jan 18, 2012
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

05/02/2015

pdf

text

original

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Existen catorce recomendaciones que se aconseja seguir: 1. exploradores convencionales. No te bases sólo en el color. algunas personas serán incapaces de acceder a la información. 10. estos son los criterios que se deben seguir basándonos en el nivel de prioridad de los puntos de verificación. personaje mira ciones <IMG SRC="pagini.htm" ALT="Grá. El seguimiento. Exponemos los puntos de verificación con Prioridad 1 que son los más importantes. la especificación tiene tres niveles de adecuación y son: • Nivel A: incluye los puntos de verificación de la prioridad 1.org/ WAI/WCAG1-Conformance. Hay un error que no hay que cometer: hacer una web accesible.). 11. agendas electróni- 7. 8. de lo contrario algunas personas hallarán dificultades para acceder a la información. En cuanto al software. Asegura al usuario el control sobre los cambios de los contenidos tempodependientes. 4.atzegieskuetara. Para facilitar la referencia por otras organizaciones. etc. class" width="128" height="32" alt="Applet de Java: texto que parpadea">Si utiliza un explorador con Java habilitado. • Prioridad 2. • Prioridad 3. y sólo tendremos que añadir el código apropiado que suministra la dirección www.por una ventana al vacío. Utiliza soluciones provisionales. etc. hay muchas páginas adaptadas.w3. surge con la finalidad de facilitar a las personas con discapacidad intelectual el acceso a las nuevas tecnologías y al uso de Internet. Ofrece alternativas equivalentes para el contenido visual y sonoro. el Estos iconos nos resultarán familiares a partir de ahora.Diseño web.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). Asegúrate de que las páginas que incorporen nuevas tecnologías se transformen correctamente. 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. Muchos colectivos necesitan formar parte de la “internetización”.ni4. 3.htm"><IMG SRC="pagi. 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. s Nº 91 55 .</SCRIPT> < N O S CRIPT>En la primera secuencia.org. De lo contrario. no implica que no sea atractiva.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. 13.) o por situaciones que dificulten condiciones de acceso normal (centros de operación poco iluminados.org.. Parte 5ª Si seguimos estas recomendaciones podremos colocar unos logotipos que definen el nivel de adecuación de la página web..Proporciona un texto equivalente para todos los elementos no textuales. <IMG SRC="estadístico. 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. podemos jactarnos de que la tecnología es digna de mención. 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. problemas motrices. patrocinado por la Diputación de Guipúzcoa y de la Caja Kutxa. WebTV. Según los elementos que se vayan a utilizar en el diseño de nuestra interfaz. Utiliza marcadores y hojas de estilo de forma apropiada. Proporciona mecanismos claros de navegación.Asegúrate de que toda la información nainicio. La solución implica separar contenidos. 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. Proporciona información de contexto y orientación. 14. Pautas para crear una web accesible Todo está muy bien.org/WAI/wcag-curric/ overchk.gif" ALT="Ico.w3.htm: • Elementos de interfaz en general: . presentación y estructura de los elementos. A su vez. Hardware para acceder al ordenador mediante los movimientos de cabeza. 2. Otro proyecto denominado NI4. cas.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. Podemos encontrar muchas empresas que apuestan por una sociedad igualitaria mediante sus inventos. 2 y 3. Utiliza las tecnologías y pautas W3C. Asegúrate de que los documentos son claros y simples. 9. Puntos de verificación que el desarrollador tiene que satisfacer. Crea tablas que se transformen correctamente. El desarrollador puede satisfacerla. es un buen ejemplo de una web diseñada para personas con una discapacidad intelectual. pero en concreto la del proyecto Atzegi. pero también elementos de interacción adaptados. • Nivel doble A: incluye las prioridades 1 y 2. que dispone de varias soluciones para resolver el trabajo en el ordenador para personas con problemas motrices. Asegura la accesibilidad directa de las interfaces incrustadas. etc. Diseña para la independencia del dispositivo. habrá personas que encontrarán muchas dificultades para acceder a la información. podría ver un texto parpadeante en lugar de este párrafo</APPLET> Texto para imágenes de efectos de texto <IMG SRC="WAI. • Prioridad 1. Identifica el idioma empleado.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. • Nivel triple A: incluye las prioridades 1.Identifica claramente los cambios DESC="explica_gráfico. 5. 12. las recomendaciones y los ejemplos para los puntos de Prioridad 2 y 3 se pueden consultar en la página www.gif" LONG. Texto alternativo a imágenes o animaTexto explicativo de una imagen incluida en un objeto <OBJECT data=" paginainicio. El desarrollador debe satisfacerla. www. Integración de personas con discapacidades cognitivas y de lenguaje. también conseguiremos que la web sea más accesible por otros dispositivos que navegan en Internet (móviles. Para obtener más información. entornos con mucho ruido. Siguiendo estas recomendaciones. si no. visita la página www. El ejemplo que exponemos es la firma Irdata. 6. software que sustituye los clicks del ratón a través de una imagen. Diferentes usuarios necesitarán diferentes formas de presentación.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

haz click y sin soltar el botón del ratón.. y desde el menú asociado a la paleta escoge Duplicar Capa. A continuación abre el menú Efectos.. quitándoles algunas arrugas y suavizando marcas de la piel. de manera que en este ejercicio intentaremos suavizar las arrugas. y no eliminarlas totalmente. 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. Photoshop Desde el menú Archivo haz click en Abrir y escoge el retrato en el cual deseas minimizar las arrugas. 3 ra previsualizar el resultado. arrastra para crear una selección elíptica de bordes suavizados. Finalmente Guarda tu archivo pulsando Ctrl + S para aplicar los cambios. aún la persona más joven genera arrugas en su rostro con tan sólo reírse o gesticular. Ahora busca el centro de atención de la fotografía (en este caso los rostros del bebé y su madre). o pulsa la combinación de teclas Mayús + Ctrl + I. vuelve a intentarlo escribiendo otros valores. hasta que haya un equilibrio entre la nar Todo (aplanar). crear una selección circular de bordes suavizados. Finalmente pulsa Aceptar para aplicar los cambios. y en el apartado Radio escribe un valor alto como 15. ya que se utiliza para “rejuvenecer” a las personas fotografiadas. Parte 6ª Dirígete al menú Seleccionar y escoge Invertir.Retoque fotográfico. pulsa el icono del ojo pa- 4 zona enfocada y desenfocada. 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. Como siempre. de manera que una cara sin una sola arruga es algo imposible. elige Desenfoque y luego haz click en Desenfoque de Gauss. 5 Abre el menú Capas. En el 1 Nº 99 59 . Se abrirá un cuadro de diálogo. Dirígete a la Paleta Capas. Si el resultado del efecto no te convence. lo más importante es que el resultado final del retoque sea casi imperceptible y natural. 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 haz click en Fusio- Resumiendo. Así conseguirás realizar retoques digitales totalmente imperceptibles. selecciona Fusionar.

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

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

You're Reading a Free Preview

Descarga
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->