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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Sign up to vote on this title
UsefulNot useful