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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Resumiendo...
1 Abrir menú Archivo 3 Buscar imagen 3 Pulsar aceptar 3 Utilizar
zoom.

2 Pinchar en Marco rectangular 3 Seleccionar el área rectangular. 3 Copiar 3 Crear documento. 4 Pegar nueva capa.

2 Paint Shop Pro
Acerca la imagen con la herramienta zoom. Pincha en la herramienta lazo de la barra principal. El cursor se transformará en la herramienta que has seleccionado. Haz

1

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

2

un ejemplo, vamos a eliminar el trozo de tallo y a añadir el tallo verde de la zona superior. Pulsa la tecla Alt y sin soltarla, comprueba que junto al puntero del ratón ha aparecido un símbolo menos. Esto quiere decir que el contorno que definas con la herramienta se restará del que ya tengas seleccionado. Rodea el tallo del centro de la misma forma que lo has hecho con el tomate en el paso anterior. Cuando termines, verás que hay una nueva línea discontinua dentro de la anterior. Ahora la selección comprende sólo la zona roja del tomate.

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

3

Resumiendo...
1 Hacer zoom 3 Seleccionar lazo 3 Seguir contorno 3 Soltar botón. 2 Pulsar Alt 3 Rodear el tallo. click con el botón izquierdo e intenta seguir el contorno de una de las piezas que aparecen en la imagen sin levantar el dedo. Cuando hayas llegado 3 Pulsar Mayúsculas 3 Rodear el tallo 3 Soltar botón del ratón 3 Soltar
mayúsculas.

Uso de la máscara rápida
Photoshop
El modo máscara rápida que ofrece Photoshop permite utilizar las herramientas típicas del dibujo, como pinceles, para crear selecciones. Se trata de una forma rápida y sencilla de hacer que los bordes de las áreas seleccionadas sean más suaves o que ofrezcan un estilo más natural y perfecto. Crea una selección en Photoshop con cualquiera de las herramientas especiales de la barra principal y el método explicado en pasos anteriores. Selecciona el botón Máscara rápida que se encuentra en la zona inferior de la caja de herramientas principal. Comprueba que la zona seleccionada anteriormente, es la única que conserva los colores originales. El resto, muestra un tono rojizo, que indica que no está dentro de la selección. Cualquier acción que realices con las herramientas de dibujo, hará que varíe la selección actual. Un buen ejemplo es el pincel, que permite dibujar selecciones y aprovechar sus posibilidades de grosor, trasparencia o dureza. Con el borrador, se puede eliminar la selección, algo también muy útil y rápido. Pulsa el botón Editar modo estándar, que se encuentra junto al de Máscara rápida. Así volverás a la situación original con las áreas seleccionadas delimitadas por líneas discontínuas. Ahora, ajustaremos

que deseas seleccionar, lo haces con la que quieres eliminar. Para cambiar las propiedades de la imagen que indica la máscara, haz doble click en el botón máscara rápida y aparecerá una ventana de opciones. Elige ahí, el color que tendrán las áreas que quedarán en la zona de máscara, el de las seleccionadas y la transparencia. Pulsa Ok. un poco las selección, haz click en la herramienta pincel de la barra principal, y pinta el borde de la imagen hasta que toda la zona que deseas delimitar esté libre de color. El método de trabajo es mucho más sencillo si en lugar de pintar la zona

1

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

2
64

www.pctoday.es

Curso

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

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

2

1

combinación de teclas Ctrl+Z o elige Deshacer del menú Edición de la barra superior. Cuanto más estrecha y ajustada sea la línea trazada, más precisa será la operación y la selección saldrá mejor. También puedes activar la casilla resaltado suavizado para que la línea se ajuste sola. imagen. Si deseas que el color sea diferente y que se distinga mejor del fondo, cámbialo en la sección resaltar. Puedes dejar de hacer click en cualquier momento y retomar el trazado después, la nueva línea se añadirá a la anterior. Si te equivocas, utiliza la Selecciona la herramienta relleno en la columna de la izquierda, que está representada por un bote de pintura. Elige un color para el trazado y

3

para el fondo, que se diferencie bien del resto de colores de la imagen, con los botones Resaltar y Rellenar. Pincha en la zona que deseas conservar de la imagen y pulsa en el botón previsualizar. Pulsa el botón aceptar si estás de acuerdo y podrás ver la imagen libre del fondo y lista para continuar con la siguiente entrega del curso. s

Resumiendo...
1 Abrir imagen 3 Seleccionar filtro Extraer 3 Pulsar la tecla B. 2 Elegir tamaño pincel 15 3 Pulsar y arrastrar. 3 Seleccionar la herramienta relleno 3 Elegir colores 3 Pulsar en la
zona a conservar 3 Previsualizar 3 Aceptar.

The GIMP, la alternativa gratuita
Las herramientas que utilizaherramienta predilecta para remos durante el curso, no este tipo de trabajo. son las únicas disponibles. Respecto a los formatos gráJunto a desarrollos de granficos que acepta, incluye los des compañías de software, más habituales como PSD de también se pueden encontrar Photoshop, aunque éste sólo buenos programas gratuitos para adquirir datos. Es capaz como the GIMP, de crear animaciones en forwww.gimp.org. Es un programato MPEG y los habituales ma que no para de mejorar, GIF o PNG de cara a Internet. gracias a su código abierto y En cuanto a las caracterísque cualquiera puede modifiticas y herramientas de edicar con total libertad. ción, admite capas y canales Además, ofrece versiones, filalfa para trabajos avanzados. tros y complementos nuevos Todo esto, con unos requisicada pocos días. Otro punto The GIMP, www.gimp.org, utiliza ventanas flotantes tos que no exigen una a su favor es que no sólo se para mostrar todos los elementos del programa. máquina demasiado potente limita al sistema Windows o o moderna, a partir de edición en castellano y en otras lenMac, sino que está disponible también Windows 98 y 64 Mb de RAM. guas diferentes al omnipresente para Linux y otros sistemas operativos También puedes encontrar el prograinglés. Esto es fruto del trabajo de menos habituales. Es muy importante, miles de entusiastas que lo consideran ma en www.softonic.com, con una pequeña explicación de cómo descardestacar que al poco tiempo de lanel mejor software para la edición de garlo, totalmente en castellano. s zarse una nueva versión, aparece su imagen. Éstos lo han convertido en su

Formatos admitidos por Photoshop 7 Photoshop (*.PSD, PDD) Archivo PICT (*.PCT, *.PICT) BMP (*.BMP, *.RLE, *.DIB) Compuserve GIF (*.GIF) Photoshop Encasulated PostScript (*.EPS) Photoshop DCS 1.0 (*.EPS) Photoshop DCS 2.0 (*.EPS) Filmstrip (*.FLM) JPEG (*.JPG, *.JPEG, *.JPE) Mapa de bits inalámbrico (*.WBMP, *.WBM) PDF genérico (*.PDF, *.PDP, *.AI) EPS genérico (*.AI3, *.AI4, *.AI5, *.AI6, *. AI7, *. AI8, *. PS, *.EPS) PCX (*.PCX) Photoshop PDF (*.PDF, *.PDP) Retocar imagen de Acrobat (*.PDF, *.AI, *.PDP) Photo CD de Kodak (*.PCD) Pixar (*.PXR) PNG (*.PNG) RAW (*.RAW) Scitex (*.SCT) Targa (*.TGA, *.VDA, *.ICB, *.VST) TIFF (*.TIF)

Nº 94

65

Curso

Corrige tus fotos
Tanto Photoshop como Paint Shop Pro son poderosas aplicaciones que permiten realizar sorprendentes efectos visuales, pero además ambos poseen excelentes herramientas para el control de la imagen, con las cuales podrás mejorar notablemente el aspecto de tus fotografías digitales.

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

L

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

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

4. Técnicas de reparación de fotos (II).
Eliminar arañazos rectos, borrar elementos no deseados, minimizar manchas. PC Today nº 97

5. Recreando fotos creativamente.
Fondos personalizados, bordes y marcos creativos, modificar personajes. PC Today nº 98

6. Embellecer y refinar retratos.
Eliminar defectos de la piel, enfoque suavizado, disimular el paso del tiempo, mejorar los retratos con luz. PC Today nº 99

a mayoría de los usuarios que han probado alguna vez Photoshop o Paint Shop Pro, seguramente han jugueteado a intentar hacer montajes fotográficos (por ejemplo, reemplazar un personaje por otro, eliminar algún elemento no deseado, etc.). Son características espectaculares que hoy en día están al alcance de cualquier persona con un ordenador y un poco de habilidad. Pero muchos pasan por alto algunas funciones muy sencillas de ambos programas, con las cuales es posible mejorar notablemente el aspecto general de las fotografías, tanto de las tomadas digitalmente como las escaneadas del papel.

La sutileza al iluminar una foto, puede crear un clima y una atmósfera muy particular; una composición sosa o sin interés, puede transformarse en una imagen hermosa, en un placer para la vista, con una correcta iluminación. La disposición de los elementos de una imagen también se puede modificar ligeramente, sin que se note, para corregir los efectos de la improvisación o la falta de tiempo cuando hiciste una foto. En este capítulo del curso de Fotografía Digital aprenderás a utilizar estas sencillas herramientas, pero sobre todo a entrenar tu ojo y tu buen gusto para conseguir los mejores resultados en las fotos digitales. s

54

www.pctoday.es

Retoque fotográfico. Parte 2ª

Trabajar con brillo y contraste
Si ajustamos correctamente los niveles de brillo y contraste, podemos mejorar de un modo notable el nivel de detalle y nitidez de cualquier fotogafía. Son parámetros que afectan radicalmente a la calidad de cualquier imagen. Incluso pueden "salvar" algunas fotografías tomadas en malas condiciones, como interiores con escasa iluminación, o contraluces al aire libre. Antes de conocer su funcionamiento, es importante definir claramente qué significan: • Brillo: Es la luminosidad u oscuridad relativa al color, y se mide habitualmente mediante un porcentaje comprendido entre 0 (negro) y 100 (blanco). • Contraste: Es el ajuste de las luces y las sombras de la imagen. Los píxeles más claros y los más oscuros, se convierten a blanco y a negro, respectivamente; así mejora notablemente el aspecto de imágenes fotográficas.

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

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

4

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

Para modificar los valores de Luminosidad y Porcentaje de contraste, introduce la cantidad directamente en la casilla correspondiente, pulsa en las flechas hacia arriba o hacia abajo o despliega el menú representado por los triángulos y eli-

3

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

Photoshop

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

1
Existe un ejemplo muy sencillo de aplicación de brillo y contraste en la vida cotidiana: el control de iluminación del televisor. Ambos parámetros se ajustan en forma independiente, pero se aplican con la misma intensidad en toda la imagen. Los controles de brillo y contraste trabajan con cualquier modo de color, pero para el siguiente ejemplo práctico, es recomendable que utilices alguna foto que encuentres, en blanco y negro (escala de grises), o incluso alguna instantánea que consideres muy oscura, para comprender mejor su funcionamiento. En ambos casos, observa la imagen detenidamente, e intenta conseguir un equilibrio entre las zonas iluminadas y las más oscuras; los blancos no deben estar sobreexpuestos (exceso de luz), ni las zonas oscuras deben aparecer como grandes manchas totalmente negras. Lo ideal es conseguir el mayor nivel de detalle y "suavidad" posibles en la foto. Experimenta y entrena tu ojo,

En el menú Archivo, selecciona Abrir y escoje la imagen de tu disco duro o CD. Haz click en Abrir.

1

ge una de las cifras de la barra que aparecerá. Puedes ampliar o reducir el área que quieras visualizar para poder observar los detalles que tú prefieras. También puedes pulsar en la flecha que se encuentra a la izquierda del icono del ojo y, así, verificar los cambios que se produzcan en la fotografía, de forma automática. Haz click en el botón Aceptar de la zona inferior para aplicar las modificaciones que hayas elegido en el paso anterior.

Abre el cuadro Brillo y Contraste desde el menú Imagen, luego elige Ajustes y finalmente selecciona el apartado Brillo y Contraste. Se abrirá el cuadro de diálogo.

2

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

2

4

v

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

3

1 Abrir menú Archivo 3 Seleccionar imagen 2 Ir al Menú Imagen 3 Seleccionar Ajustes 3 Abrir Brillo y Contraste 3 Mover los dos reguladores hacia la derecha 3 Previsualizar 4 Click en Aceptar para aplicar los cambios

Paint Shop Pro
1 Elegir Ir al Menú Archivo 3 Escoger Abrir 3 Seleccionar fotografía 3
Abrir

2 Ir al Menú Colores 3 Escoger Ajustar 3 Luminosidad y Contraste 3 Aumentar la luminosidad haciendo click en las flechas 4 Click en Aceptar para aplicar los cambios

Nº 95

55

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Sign up to vote on this title
UsefulNot useful