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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Sign up to vote on this title
UsefulNot useful