Diseñar Webs con Photoshop

GRACIAS A TODOS LOS LECTORES QUE CONF~AN EN LO QUE LES APORTARÁ EL LIBRO. GRACIAS POR EL APOYO RECIBIDO, MANSOUR.

INTRODUCCION

..........................................................................11

~ C Ó M OESTÁ ESTRUCTURADO EL LIBRO?................................13

Capitulo 1.

............

CONCEPTOS BÁSICOS EN LA COMUNICACI~NDE DATOS 17 COMLINICACIÓNDE DATOS CON TCPIIP.................................... 19 DIFERENCIAS ENTRE LAS REDES LAN. REDES MAN Y REDES WAN .................................................... 20 23 INTERNET E INTRANET.................................................................... PROTOCOLOS IMPLEMENTADOS EN TCPIIP................................ 26 PROTOCOLO DE TRANSFERENCIA DE HIPERTEXTOS HTTP....................................................................... 27 TERMINOLOGIA ................................................................................ 28 .Ansi................................................................................ 28 .Anonymous FTP..............................................................28 .Ansnet............................................................................. 28

Webs con Photoshop .ARP................................................................................ 28 .ARPA.............................................................................. 29 ARPANET....................................................................... 29 Assigned numbers............................................................. 29 .ATM................................................................................ 29 .Autonomous system.......................................................... 29 .Backbone network............................................................. 29 .Bastion host.................................................................... 30 .Bridge.............................................................................. 30 Class of adress................................................................ 30 Cliente-Setvidor............................................................... -30 .Domain............................................................................ 30 .Encapsulation.................................................................. 30 .Firewall............................................................................ 30 Flow control..................................................................... 31 .Fragmentation.................................................................. 31 .Hierarchical routing............................................................ 31 ICMP................................................................................ 31 Internet............................................................................. 31 .IP Datagram.................................................................... 32 .Packet.............................................................................. 32 . Protocol............................................................................ 32 PARA SABER MAS........................................................................... -32 a

e

e

e

?

Capítulo 2.

OPTlMlZAR LA IMAGEN PARA INTERNET..........................................33 LA IMAGEN DIGITAL...................................................................... -34 TAMAÑO DE IMAGEN Y RESOLUCIÓN EN DOCUMENTOS PARA LA WEB...................................................... 37 TAMAÑO DE ARCHIVO EN DOCUMENTOS PARA LA WEB............... 44 RAPIDEZ DE TRANSMISIÓN EN LA RED Y LA CALIDAD DE REPRESENTACI~N...............................................44

Capítulo 3.

FORMATOS Y COMPRESIÓN DE ARCHIVO ........................................49 LQUÉ FORMATO ELEGIR?............................................................. 50

Índice ARCHIVO GIF............................................................................... 50 .GIF89a............................................................................. 51 Elección de paleta y compresión GIF................................... 55 La opción Entrelazado ...................................................... 59 ARCHIVO JPEG........................................................................... 61 .Compresión JPEG y calidad de imagen............................... 62 -La opción Progresiva........................................................63 ARCHIVO PNG ............................................................................ 64 .Compresión sin pérdidas....................................................... 64 .La opción Adam7.............................................................. 82 ANÁLISIS GLOBAL.......................................................................... 83 a

e

Capitulo 4.

TRATAR IMÁGENES PARA LA WEB ....................................................85 REDUCIR EL TAMAÑO DEL ARCHIVO.......................................... 86 .Proyectos ......................................................................... -86 REDUCCIÓN DE COLORES........................................................... 92 LINOS CUANTOS E. IEMPLOS......................................................... 96 IMÁGENES DE GRAN TAMAÑO................................................... 100

Bapftulo 5.

PREPARAR FONDOS Y TEXTURAS ...................................................103 FONDOS CON COLOR SÓLIDO ................................................... 105 .Definir el atributo BGCOLOR para un fondo de color sólido .................................................... 107 FONDOS TEXTURADOS............................................................... 108 Fusionar los motivos definidos ................................................. 109 .Diseñar texturas para fondos ..................................................... 113 .Crear efecto de nubes.................................................. 113 Submenú Textura.......................................................... 114 .Otros filtros otras texturas............................................. 117 Realizar transformaciones ........................................................ 119 .Defiriir el atributo BACKGROUIVD para un fondo texturado............................................................ 120 .Proyectos........................................................................ 121 FONDOS CON COLOR SÓLIDO Y TEXTURA A LA PAR................. 125 e

a

Webs con Photoshop

8

.Definir la etiqueta BORDER para un fondo con tablas........................................................... 126 DEGRADADOS PARA FONDOS......................................................... 129 .Definir las etiquetas FRAMESET y FRAME para un fondo cortina................................................................ 132 FONDOS CONSTITUIDOS POR IMÁGENES .................................. 135 Imagemaps o vínculos como fondo......................................... 139 Definir las etiquetas FRAMESET y FRAME para un fondo múltiple............................................................... 141 e

Capitulo 6.

TRANSPARENCIAS EN IMÁGENES PARA LA WEB.........................145 APLICAR UN COLOR SÓLIDO EN LAS ZONAS TRANSPARENTES DE LA IMAGEN............................ 146 APLICAR UNA TEXTURA EN LAS ZONAS TRANSPARENTES DE LA IMAGEN............................ 150 Remodelar la tabla de colores .................................................. 155 ENMASCARAR LAS ZONAS TRANSPARENTES.............................160 TRAIVSPARENCIAS CON PNG......................................................... 163 UNOS CUANTOS EJEMPLOS....................................................... 164 a

a

Capitulo T

DISEÑAR MARCOS. BARRAS Y BOTONES.........................................165 DISENAR MARCOS........................................................................... 166 .Determinar la forma.................................................................. 166 .Rellenar y producir efectos en el marco ................................... 170 .Definir la etiqueta TABLE para producir marcos ................................................................ 204 UNOS CUANTOS EJEMPLOS....................................................... 221 DISENAR BARRAS............................................................................ 222 Dibujar la forma ........................................................................ 222 Rellenar y producir efectos en la barra ....................................225 .La etiqueta HR para incorporar barras horizontales................230 UNOS CUANTOS EJEMPLOS....................................................... 233 DISEÑAR BOTOhlES Y S~MBOLOSPARA LISTAS..........................234 .Determinar la forma.................................................................. 235 e

e

Índice .Rellenar y producir efectos en los botones o viñetas gráficas.............................................. 237 .La etiqueta UL para crear listas desordenadas....................... 251 La etiqueta IMG para añadir viñetas gráficas en las listas ....................................................... 251 La etiqueta IMG para agregar botones y la etiqueta A para que sean vínculos..................................... 259 PROYECTOS ....................................................................................... 268 UNOS CUANTOS EJEMPLOS........................................................ 270

Capitulo 8.

EFECTOS EN EL TEXTO .....................................................................271 ¿SUAVIZAMOS EL TEXTO? .............................................................. 273 COLOREARLO................................................................................. -276 EFECTOS ESPECIALES...................................................................... 281 .Técnicas de manipulación........................................................ 282 -Alterando el color...................................................................... 288 Técnicas de distorsión y transformación.................................. 291 Más sobre relieve e iluminación............................................... 296 MORFOLOG~ADEL TEXTO GRÁFICO EN HTML.............................. 299 EL TEXTO. ALGUNAS ETIQUETAS Y A-TRIBUTOS........................... 304 PROYECTOS ....................................................................................... 318 UNOS CUANTOS EJEMPLOS ........................................................ 320 a

a

capitulo 9. TODO SOBRE MAPAS DE IMAGEN ................................................. 321 DETERMINAR COORDENADAS ......................................................... 328 .Las etiquetas MAP y AREA para introducir las coordenadas................................................ 330 PROYECTOS ....................................................................................... 331 UNOS CUANTOS EJEMPLOS........................................................ 334

Capitulo . 10.

DISENANDO ANIMACIONES...............................................................335 PROCEDENCIA DE LAS ANIMACIONES.......................................... 336

10

Webs con Photoshop CONCEPTOS BÁSICOS.....................................................................337 PREPARANDO ANIMACIONES GIF COI1 PHOTOSHOP.................340 La etiqueta APPLET de Java para colocar GlFs animados en una página HTML..................343 UNOS CUANTOS EJEMPLOS ........................................................346

Apéndice.

INDICE ANALITICO .............................................................................. 347

La implantación del diseño de páginas Web en nuestros días se está onvirtiendo en algo habitual y cotidiano. Dado que la comunicación de información por red, ya sea a nivel comercial, didáctica, lucrativa, cultural o informativa, es hoy por hoy uno de los medios que más está proliferando. Es lógico, pues este medio de comunicación tiene la particularidad de almacenar un cúmulo casi infinito de información, pudiendo ser ésta tan amplia e inmediata como requiere nuestra sociedad. Esto hace que los códigos infracornunicativos gráficos de representación: códigos compositivos, códigos fotográficos, códigos cromáticos, códigos verbales y paralingüísticos; los códigos infracomunicativos antropológicos culturales e, incluso los códigos que hacen referencia a la conexión y al montaje sean extrapolados de los medios habituales donde han sido utilizados para incorporarlos en la elaboración y diseño de páginas Web. Si no fuese de este modo, lás páginas Web podrían convertirse en algo realmente aburrido y monótono y, todas las cualidades comunicativas que poseen, anteriormente mencionadas, no surtirían efecto. Pues, siempre es importante utilizar los códigos con los que se mueve una cultura para que el mensaje y la información sean transmitidos plenamente.

Webs con Photoshop A la hora de elaborar una página Web siempre habrán de tenerse en consideración los fines específicos de la misma, es decir, si es una página publicitaria, los requerimientos no serán, posiblemente los mismos que si es una página informativa y, como es lógico, el diseño utilizado para su confección puede tener pocos nexos en común. Ahora bien, lo que si tendrán en común será la herramienta o herramientas con las cuales han sido diseñados. En este caso el medio que vamos a utilizar para el diseño de páginas Web va a centrarse en el programa Photoshop sin olvidar el lenguaje HTML, el cual ha sido remodificado, para entre otras cosas, dar salida a páginas Web, bajo un criterio ciertamente profesional. Ahora bien, la confección de páginas Web puede diversificarse en infinidad de aspectos, por lo que, habremos de recumr a otros programas con fines específicos, como por ejemplo, la incorporación de hojas de cálculo en una página. Resultará más factible elaborarlas en un programa diseñado para tal fin y, a continuación, incorporar el resto de elementos que compongan la página. No obstante, en el capítulo correspondiente expecificaremos los tipos de etiquetas necesarias para incorporar estos elementos en una página.

?

Siguiendo los pasos del párrafo anterior añadiremos que cada vez es más habitual la incorporación de efectos especiales de sonido en las páginas Web. Si proviene del mundo multimedia no tendrá dificultades en incorporar este tipo de efectos en la Web y, con este fin haremos un breve inciso sobre este tipo de etiquetas para que pueda, si lo desea, incorporar sonidos a sus páginas o en su sitio Web. Esperamos que una vez haya finalizado la lectura completa del libro cree y programe sus mejores y más profesionales páginas Web mediante este indispensable programa para dicha tarea.

La ultima versión de Photoshop(4) está preparada para dar salida a documentos que han de ser incorporados a páginas Web. Pero ya no tan sólo esto, sino que además incorpora nuevas herramientas y actualiza otras tantas para conseguir mediante este potente programa desde las más simples imágenes a los más sofisticados diseños para la Web. De este modo, trataremos los aspectos más relevantes e importantes para la incorporación de dichos documentos a la Web. Como es lógico, no podemos explicar aspectos ajenos al programa que estamos tratando. Sin embargo, si que nos adentraremos en la comprensión casi necesaria de cómo se articula una página Web. Pero vayamos por partes, empezaremos por conocer cómo funciona la World Wide Web, el hardware y el software que se utiliza en Intemet, los protocolos empleados, centrándonos en el grupo de protocolos TCPíIP y HTTP, informar de los lenguajes que hacen posible colocar documentos en la Web y que sirvan de enlaces a otros documentos, etc. Seguiremos por conocer las características que contiene un documento que ha de ser incrustado en una página Web, al mismo tiempo que aprenderá a prepararlo y a discernir entre las diferentes posibilidades que se ofrecen, la más

14

Webs con Photoshop adecuada en cada caso según las características del proyecto en cuestión que ha de ser publicado en Internet. Es decir, la resoluciones con las que se trabaja en las diferentes plataformas, reducción de colores, el número de colores que puede contener, cuántos colores nos conviene incluir según el fin último del documento en la página, tipos de paletas que han de utilizarse o la armonización de la paleta en la totalidad de documentos a incluir en la página. Y en relación a los puntos que acabamos de enumerar son desarrollados en el libro aspectos sobre tipos de conversiones que han de realizarse a nivel de modo de color, conversión a color indexado (8 bits), documentos de 8 bits en escala de grises, imágenes de 7 bits, 6 bits, 5 bits, 4 bits, 3 bits, 2 bits y 1 bit. Siguiendo con tipos de conversiones nos centraremos en los tipos de formatos que son soportados en los navegadores tales como GIF Graphics Interchange Fonnat, el más popularizado; JPEG o JPG Joint Photographic Experts Group, más utilizado para la incorporación de fotografías en la Web o, el nuevo formato PNG Portable Network Graphics, orientado para la incrustación de gráficos. La parte central del libro desarrolla el proceso y técnicas de creación de los diferentes componentes de una página Web. Es decir, la elección y diseño de fondos, botones, marcos, la creación de efectos especiales, texturas, efectos tridimensionales o de iluminación, así como la selección y confección de tipografías específicas utilizadas como componente artístico, sin olvidar la vertiente comunicativa. Con el mismo fin desarrollaremos la confección y diseño de páginas webs creadas en su totalidad en Photoshop y analizaremos páginas de la Web que muestren la gran variedad y diversidad de diseños que pueden lograrse. Todo ello con proyectos continuos que iremos desarrollando capítulo tras capítulo. Dentro de este último bloque incluimos la elaboración de documentos para la creación de animaciones, haciendo hincapié en las nociones básicas de la morfología del montaje para la creación de secuencias, por lo que se lleva a cabo una breve introducción en animación básica y en técnicas de animación. Por otro lado, reseñaremos los formatos más adecuados para animaciones y la compresión idónea para una animación. Aunque existen una gran variedad de programas que permiten crear animaciones como pueden ser Director, Premiere, Virtual Reality, nos detendremos en la creación de GIFs Animados que es para lo que mejor está preparado Photoshop, además de ser los documentos GIF los más recurridos para crear animaciones en la Web. También comentaremos algunos de los programas de ensamblaje de reconocido uso para montar las imágenes.

¿CSmo está estructurado el libro? Por último, comentar que el libro desarrolla de un modo progresivo en complejidad y relacionándolo con los temas tratados, comentarios de cómo y con qué etiquetas y atributos insertar los gráficos creados en Photoshop, además da ideas para elaborar diseños específicos que produzcan en efectos más sofisticados y curiosos en nuestras páginas. En cada capítulo se crea una relación intuitiva y objetiva al mismo tiempo entre el documento diseñado y su equivalente en lenguaje HTML con el fin de colocarlo en la Web, proceso que puede comprobar con cualquier editor HTML profesional que utilice normalmente abriendo sus diseños y páginas en su navegador. Photoshop no cuenta con ningún menú o grupo de comandos que permitan crear documentos HTML, ya que no trabaja con este tipo de etiquetas. HTML HyperText Markup Language puede generarse con un simple procesador de textos convirtiendo el documento en formato ASCII Arnerican Standard Code for Inforrnation Interchange. Pero habremos de tener en consideración las características de nuestros proyectos y seleccionar el editor HTML más adecuado, como ya detallaremos en el capítulo correspondiente. Para que la comprensión sea completa aunque no exhaustiva explicaremos qué es HTML y qué es lo que puede realizar con este lenguaje para la creación de una página Web. Además detallaremos la sintaxis que ha de utilizarse para su elaboración, deteniéndonos en mayor medida en las etiquetas que más nos interesan, es decir, etiquetas para incluir imágenes, para la creación de marcos, para la creación de tablas, para la creación de mapas de imagen y etiquetas para la creación de enlaces, entre otros. sin embargo, también serán mencionadas otras etiquetas HTML que no tienen por qué utilizarse con documentos creados en Photoshop, pero que sí pueden ser de su interés para la creación de sus páginas webs o de su sitio Web. La programación de documentos HTML puede parecer a simple vista algo complicado para lo cual no nos sintamos preparados. Sin embargo, comprobará que es muy accesible y que simplemente se requiere paciencia y cierta experiencia que irá adquiriendo con el tiempo. Además, una vez haya confeccionado unos cuantos documentos podrá utilizarlos como plantillas para la elaboración de otros documentos variando ciertos aspectos de los mismos. Si ya ha trabajado en desarrollos de webs el libro le reportará un mayor conocimiento en la preparación de documentos en Photoshop para la Web, al mismo tiempo descubrirá nuevas maneras de diseñar páginas partiendo de un mayor conocimiento en ciertos usos específicos de etiquetas HTML empleadas inicialmente para otros fines, pero que aquí les descubriremos otros usos posibles.

La Web o la WorM Wiúe Web o Telaraña Global es un conjunto de protocolos que se articulan para crear un telaraña mcindial de información. De tal modo, que permite comunicar datos ordenados por grupos. Esta recopilación de datos ubicada en grandes ordenadores pertenecientes a entidades independientes facilitan la búsqueda de información de temas bien diversos, al mismo tiempo que permite comunicar información con ordenadores de otros ususarios. Este novedoso aspecto de intercomunicación tiene su origen en la CERN (Consejo E~iropeode Investigación Nuclear) que surgió bajo la necesidad de ciertos científicos de contrastar los datos de investigaciones relacionadas. Esta fantástica herramienta comunicativa tiene su origen en la tecnología ARPA (Agencia de Proyectos de Investigación Avanzada), la cual desarrolló el uso de redes para la comunicación de datos. Con el tiempo los protocolos utilizados para la transmisión de información en la red se han estandarizado en el llamado protocolo TCP/ZP. Esta necesidad de estandarización surge bajo la necesidad de articular la información en Internet que ha de transmitirse a multitud de ordenadores que trabajan con sistemas operativos diferentes. Así los protocolos de comunicaciones permiten especificar o entender la comunicación de datos, sin

Webs con Photoshop necesidad de conocer o depender de un conocimiento previo de una marca en particular de hardware de red. La independencia de este tipo de protocolos con respecto al hardware subyacente en el ordenador facilita la comunicación de datos entre ordenadores, además de agilizar el trabajo de los programadores evitando tener que crear softwares limitados o versiones especiales para mover y traducir datos entre ordenadores. Sin embargo, hay que añadir, que el uso de los protocolos TCP (Protocolo de Control de Transmisión) y ZP (Protocolo Internet) no está restringido a Internet, sino que es igualmente utilizado en redes locales LAN (Redes de Área Local) y redes internas o Intranet. En este tipo de redes internas también son publicadas páginas informativas, que nosotros denominamos páginas Web, por lo que será de interés tomarlas en consideración.

-

Los protocolos TCP y IP son los que articulan las reglas, mediante una serie de convenios, para que podamos comunicarnos en la Web. Éstos contienen los datos que hacen referencia a los formatos de los mensajes, detallan cómo ha de responder el ordenador cuando llega un mensaje, precisar cómo ha de actuar el ordenador cuando advierte un error u otras anomalías así como la sintonización de velocidades y la secuencialización. Es decir, los protocolos, cualquier tipo de protocolos, son un conjunto de reglas que gobiernan el intercambio de información entre dos entidades, que podemos estructurar y articular bajo una sintaxis, semántica y temporalización. Las entidades podemos identificarlas como los programas de aplicación utilizados por los usuarios, sistemas de gestión de bases de datos, programas para la transferencia de ficheros o gestores de correo electrónico, entre otros.

--

APLICACI~N8

TRANSPORTE

Protocolo de transporte

=nn1 Mensajes y árdenes para la transferencia n

n n n n n n n n n n n n n n

Protocolo de transporte TCP

u m m m m m m nm m m m m m m m m m m m n

APLICACIÓN

TRANSPORTE

Mensajes del servicio de comunicaciones

Protocolo de acceso a la red IP

ACCESO A LA RED F~SICO

RED DE COMUNICACIONES u.~mmmmmmmm~.mmmmm..I

ACCESO A LA RED

F~SICO

Comunicación de datos COMUNICACIÓN DE DATOS CON TCP/IP Observe el esquema de la página anterior. Representa la estructura o arquitectura de protocolos TCP/ZPsencilla que nos ayuda a comprender el proceso interno cuando procedemos a comunicarnos en una red. Unos ejemplos de Aplicación serían la transferencia de documentos o el correo electrónico. El módulo de la aplicación para la transferencia de archivos contiene la estructura que permite transmitir con seguridad una palabra clave, registros de ficheros u órdenes de ficheros; todo ello ejecutado mediante el protocolo de aplicación. Observe que este tipo de protocolo es utilizado por aplicaciones bien diversas, además de los dos ejemplos mencionados. Este motivo hace que el módulo haya de encontrarse separado del servicio de comunicaciones con el fin de que no se produzcan conflictos entre las diferentes aplicaciones que han de utilizarlo. El Transporte responde al servicio de comunicaciones que ha de asegurar que los ordenadores estén activos, al mismo tiempo de preparados para la transferencia de información. Por este motivo es el encargado de asegurar el envío de los archivos, siguiendo la pista de los datos que se intercambia en el proceso de transporte mediante el protocolo de transporte. En este caso viene definido por el grupo de protocolos TCP (Protocolode Control de Transmisión) y ZP (Protocolo Intemet). 2

El Acceso a la red está organizado por los protocolos de acceso a la red. Esta lógica de interface de red se encarga del intercambio de información entre su ordenador y la red en la cual esté conectado. El ordenador emisor es el que debe proporcionar a la red la dirección destino a la cual van dirigidos los datos que desea enviar. El software utilizado para el acceso a la red dependerá del tipo de red a la cual esté conectado, por ejemplo, redes de área local LAN y redes de área amplia WAN. En el mercado encontramos diversos estándares de software para el acceso a la red. Sin embargo, ha de observar que éstos softwares de acceso funcionan con independencia a la red a la cual esté usted conectado. Además, los sotfwares utilizados en la aplicación y en el transporte funcionan, deben funcionar, con independencia del software utilizado para el acceso a la red e independientemente a la red a la que el ordenador esté conectado. Cuando, como en nuestro caso, enviando información en Internet, los datos han de ser transmitidos en redes interconectadas, es decir, que los dos dispositivos, el de salida y el de llegada, estén conectados a redes diferentes, se

Webs con Photoshop hace necesario un protocolo transporte y de acceso a la red específico, en este caso el protocolo internet o ZP. Este protocolo se encarga de encaminar la información por las diversas redes y routers hasta el destino final. Los ruteadores o routers son dispositivos que conectan dos redes y cuya función prioritaria consiste en retransmitir, los datos enviados desde la aplicacion de origen, de una red a otra encaminando la información hasta llegar a la aplicación de destino. Por otro lado, es importante comprender que los datos transmitidos en Znternet o Zntranet han de estar sometidos a otro tipo de protocolos que aseguren el correcto intercambio de información, es decir, en el mismo orden y sin pérdida de información, dado que si no fuese de este modo los datos que pudiesen aparecer en la aplicación de destino prodrían estar completamente modificados y por lo tanto la información transmitida resultaría irreconocible. Con el fin de que esto no ocurra se somete, en nuestro caso, la información enviada al protocolo de control de transmisión TCP (protocolo de transporte). Éste, independientemente de la naturaleza de las aplicaciones de origen y destino, asegura que los datos se intercambien de forma segura.

7

El módulo Física representa el interface físico utilizado entre el dispositivo de salida, que podría ser por ejemplo nuestro ordenador y el medio de transmisión, que sería la red. Este módulo es el encargado de estructurar las características del medio de transmisión, la velocidad de transmisión de los datos o la naturaleza de las señales, entre otras cuestiones. Existen otro tipo de arquitecturas de comunicación de datos, como puede ser la seguida por el modelo OSZ (Sistema Abierto de Interconexión).Sin embargo, por no tener relación con el tema que deseamos no los trataremos.

DIFERENCIAS ENTRE LAS REDES LAN, REDES MAN Y REDES WAN Las redes locales LAN (Redes de Área Local) no suelen exceder distancias de unos 400 metros y acostumbran a utilizarse para difundir información en edificios de oficinas, campus, almacenes, etc. Las redes LAN normalmente son usadas y gestionadas por un único organismo. Hay que añadir que este tipo de redes están diseñadas para cubrir distancias cortas, esto hace que la velocidad en la

Comunicación de datos comunicación de datos sea mayor, operando a velocidades que van de diez rnillones de megabits por segundo a varios gigabits por segundo, aspecto a tener en consideración en la creación de páginas Web. Algunos ejemplos de redes LAN son la red Ethernet y la red FDDI. Existe una red intermedia entre las redes de área local LAN y las redes de gran alcance WAN. Son las denominadas MAN o Redes de Área Metropolitana. h e d e n alcanzar las distancias que abarquen un área metropolitana, incluyendo varios edificios ubicados en una misma ciudad. Las redes MAN pueden ser gestionadas por organismos, usuarios particulares y privados o pueden ser propiedad y estar gestionadas por organismos públicos. En este tipo de red las velocidades de transmisión de datos son igualmente altas, alcanzando velocidades que pueden oscilar de cientos de megabits a gigabits por segundo. Pudiendo ser utilizada como medio de interconexión entre redes de área local. Las redes LAN y MAN comparten las características de ser redes de difusión de paquetes (no contienen nodos de conmutación intermedios), donde cada estación está conectada a un medio de transmisión que es compartido por otras estaciones. Por lo que cuando se transmite información desde una estación la información es recibida y difundida al resto de estaciones conectadas.

Esquema simplificado de red de área local o metropolitana

1

SISTEMA DE TRANSMISI~N

1

,

Webs con Photoshop Por su parte las redes WAN abarcan distancias geográficas extensas, por lo que requieren utilizar rutas de acceso público y circuitos proporcionados por una entidad proveedora de servicios de telecomunicación. Las velocidades de transferencia de datos resultan significativamente más lentas. La transmisión de información en una WAN se realiza mediante una serie de dispositivos de conmutación interconectada. Los datos generados en cualquier dispositivo de salida serán encaminados a través de una ruta cruzando los nodos internos (se encargan de proporcionar el servicio de conmutación que transmitirá los datos de nodo a nodo) necesarios hasta llegar al dispositivo final.

Esquema simplificado de red de área ampli,

Y--

Nodo de conmutación

Precisamente con el fin de solventar este importante problema, durante los últimos veinticinco años se ha estado estudiando el método que permitiese reducir al máximo el tiempo de transmisión y el control de errores. Hasta el momento el modelo más eficaz es el Modo de Transferencia Asíncrono o ATM, el cual prodríamos decir, que surge de la ampliación de la conmutación de circuitos y de conmutación de paquetes. Dicho de otro modo, las redes que trabajan con conmutación de circuitos establecen el camino a través de los denominados nodos de la red que interconexionan dos estaciones. Por lo tanto, el camino de transferencia se crea mediante una secuencia de nodos que van conectando

Comunicación de datos estaciones. En cada nodo los datos son encaminados hasta la estación de salida u ordenador destino sin retención ni pérdida de tiempo. Cuando una red trabaja por conmutación de paquetes los datos se envían igualmente en secuencias a través de nodos. Sin embargo, en este caso los datos son retenidos en el nodo durante un breve espacio de tiempo y, a continuación, son enviados siguiendo algún camino hasta la estación destino. No obstante, este método de transferencia fue mejorado debido a que constantemente se sufrían errores en la transmisión de datos. El método seguido consistió en eliminar la información redundante en cada paquete enviado y el procesamiento asociado de la información lo que permitió un mayor control de errores durante el envío, así como unas mayores velocidades de transferencia. Este tipo de transmisión de datos se conoce con el nombre de Retransmisión de tramas (Frame Relay). La diferencia sustancial entre la Retransmisión por tramas y ATM consiste en que el primero usa paquetes de longitud variable denominados tramas, mientras que el segundo usa paquetes de longitud fija denominados celdas. Al trabajar con paquetes de longitud fija el procesamiento de la información se reduce sustancialmente.

INTERNET E INTRANET Como ya se ha dicho el uso de los protocolos TCP (Protocolo de Control de Transmisión) y ZP (Protocolo Internet) no está restringido a Internet, sino q%ees igualmente utilizado en redes locales y metropolitanas. Las redes de corto alcance que funcionan con el protocolo TCP/ZP son llamadas Intranets. Esto no quiere decir que todas las redes locales o metropolitanas han de ser necesariamente Intranets, sino que se denominan bajo este nombre las que utilizan este grupo de protocolos. Esto hace que las redes locales que transmiten información con este protocolo puedan estar conectadas a Intemet. En otras palabras una Intranet puede estar conectada a Internet. Aunque el origen de Intemet surge como necesidad de interconectar varias redes locales, lo que provoca que las diferencias entre un término y otro estén confusas, existen diferencias sustanciales entre uno y otro. La diferencia más relevante entre Internet e Intranet radica en que el primero es una red descentralizada y, que como ya hemos dicho emplea diferentes nodos para enviar la información desde el lugar de origen hasta el lugar de destino. Su estructura como ya se ha dicho asemeja a la forma de una gran tela de araña que comunica infinitos puntos de destino a través de infinitos nodos intermedios, por lo que la

24

Webs con Photoshop ruta que puedan seguir los datos transmitidos es imposible de determinar. En cambio, la topología de una Intranet es mucho más variada y va en función de las necesidades y la estructura de la empresa o institución que la utilice. Los modelos más comunes son el modelo BusCfig. a ) , el modeloÁrbol Cfig. b), el modelo Anillo Cfis. c) y el modelo Estrella (fig. d) que como bien indican sus nombres su topología se asemeja a la forma mencionada. Como es lógico las empresas que tienen implantada una Intranet disponen de unprotocolo TCP/IP restringido, instalando un firewall que limita el acceso a la red local a las páginas deseadas, a diferencia del que encontramos en Internet.

a) Modelo Bus

b) Modelo Arbol

c) Modelo Anillo

d) Modelo Estrella

Comunicación de datos Ahora veamos mediante un ejemplo gráfico un esquema que represente el esquema de una WAN y el acceso a Internet de un usuario cualquiera, la conexión a Internet de una red local y la conexión a Internet de una Intranet.

ESQUEMA MORFOLÓGICO DE INTERNET INCLUYENDO LOS DIVERSOS TIPOS DE USUSARIOS Y REDES QUE SE CONECTAN A LA RED DE REDES. conexión normal ..... .

routers

.................

conexión TCPnP

Usuario con conexión TCPnP

Nodo o router

Firewall filtro de acceso a usuarios

Red LAN con conexión TCPllP Red LAN sin conexión TCPllP

Webs con Photoshop

PROTOCOLOS IMPLEMENTIADQS Cuando trabajamos con los protocolos TCP/IP utilizamos otros protocolos para las aplicaciones en las cuales estemos trabajando. Lógicamente, podemos conectar con otras aplicaciones a través de otro protocolo de transporte que no sea TCP, como por ejemplo a través del protocolo de transporte conocido por UDP (Protocolo de datagrama de usuario) el cual permite comunicar de ordenador a ordenador mediante el protocolo simple de gestión de red o SNMP. Sin embargo, en este caso nos limitaremos a comentar los protocolos de transferencia vinculados al protocolo TCP, los cuales son necesarios para la comunicación de datos para aplicaciones específicas. Los más importantes y empleados, que tienen su origen y fueron diseñados como estándares militares, son SMTP (Protocolo Simple de Transferencia de correo), FTP (Protocolo de Transferencia de fiheros) y TELNET. Por otro lado, el que más nos interesa en nuestro caso es el Protocolo de Transferencia de hipertexto o HTTP que es la base de la World Wide Web o WWW y puede utilizarse en cualquier aplicación cliente-servidor que requiera del uso de hipertextos para la transacción de datos. 7

MINE

-

HlTP

BGP

FTP

SMTP TELNET

SNMP

I TCP

UDP

IP

ICMP

OSPF

I

I

Comunicación d e datos El envío de correo electrónico multimedia en Internet combina los protocolos SMTP (Protocolo Simple de Transferencia de correo) y MIME (Protocolo de correo Internet multiobjetivo). El primero proporciona un mecanismo para transferir mensajes entre ordenadores independientes. Se requiere de un editor o un programa de correo electrónico donde detallar los datos a enviar. Esto es debido a que no especifica la forma en que se crearon los mensajes. Los datos son transferidos a través de una conexión TCRSMTP desde el programa de correo electrónico del ordenador origen hasta el programa de correo electrónico del ordenador destino. El protocolo MIME surge por la necesidad de resolver ciertos errores que se dan con la utilización exclusiva delSMTP, como por ejemplo, el rechazo de mensajes de gran tamaño o rellenar líneas en un mensaje con el fin de conseguir una longitud igual para todas las líneas que componen el documento. Al mismo tiempo, facilita y proporciona formas normalizadas de tratar una gran variedad de representaciones de información en un entorno multimedia. El protocolo de transferencia de ficheros o FTP se utiliza para enviar ficheros de un ordenador a otro según las órdenes requeridas por el usuario. Estos ficheros pueden ser binarios, como de texto. El ususario, en primer lugar ha de transmitir un identificador y la contraseña requerida (la suya), para que la transferencia de datos pueda llevarse a cabo. Por lo que se realiza una primera conexión vía TCP para el envío de identificador, contraseña, fichero y especificaciones del mismo y, posteriormente es transferido el fichero.

PROTOCOLO DE TRANSFERENCIA DE HIPERTEXTOS HTTP El protocolo de transmisión de hipertextos o HTTP es el protocolo cliente1 servidor que define como han de ser transferidos los documentos de la Word Wide Web o WWW. Los datos enviados por el protocoloHTTP pueden tener una variada naturaleza; puede ser texto, imágenes, sonido, hipertexto y cualquier tipo de datos que sea imposible enviar vía Internet. Además hemos de tener en consideración que dependiendo de la naturaleza del emisor, es decir, del cliente, enviará la información solicitada exclusivamente en los formatos que sean soportados por el sistema que utilice el cliente. Pongamos un ejemplo, si su sistema no admite la transferencia y visualización de imágenes, el servidor, simplemente enviará los datos soportados por su sistema excluyendo, en este caso, toda la información en

27

Webs con Photoshop formato GIF o JPEG (gráficos o imágenes). Esto hace que el protocolo H7TP sea el más adecuado y más flexible en los formatos que puede tratar. El uso más común de este protocolo es la transmisión de información de un cliente web a un servidor web. Como es lógico, la diversa información solicitada a través de la red (en este caso una red WAN) puede estar localizada en páginas o documentos distribuidos por distintos servidores emplazados en cualquier lugar del mundo. La naturaleza de este protocolo es la más adecuada para este tipo de transferencia de datos, dado que es unprotocolo sin estados los datos son tratados independientemente. Es decir, una vez la información es recibida por el cliente ésta es cerrada, si el cliente vuelve de nuevo a demandar información de otra página, ésta será tratada independienteme a la anterior y será cerrada por el servidor una vez el cliente haya recibido la información solicitada. Esto quiere decir que el procesado de la información requerida se produce en nuestro ordenador y no en el servidor lo que acelera el tiempo de transmisión agilizando el proceso.

ANSI

7

Grupo que define los estándares de Estados Unidos para la industria del procesamiento de información. ANSI participa en la definición de los estándares de protocolos de red.

ANONYMOUS FTP (FTP anónimo) Sesión FTP que utiliza el nombre de identificación anónimo para acceder a archivos públicos. Un servidor que permite FTP anónimo por lo general acepta la clave de acceso guest (visitante).

ANSNET Red de área amplia que formaba la red de columna vertebral de Internet en 1995.

ARP Protocolo de resolución de dirección. Protocolo TCPIIP utilizado para asignar una dirección IP de alto nivel a una dirección de hardware físico de bajo nivel. ARP se utiliza a través de una sola red física y está limitada a redes que soportan difusión de hardware.

Comunicación de datos ARPA Agencia de proyectos avanzados perteneciente a una institución gubernamental que fundó la ARPANET y, después, la red global de Internet. El grupo detro de ARPA responsable de ARPANET fue la IPTO (Oficina de Información de Procesos Técnicos), llamada más tarde ISTO (Oficina de Información de Sistemas Tecnológicos). ARPA se conoció como DARPA por varios años.

ARPANET Red pionera de gran alcance fundada por ARPA (después de DARPA) y constituida por BBN. Sirvió de 1969 a 1990 como base para las primeras investigaciones de red y como columna vertebral de red durante el desarrollo de Internet. ARPANET consiste en nodos individuales conmutadores de paquetes conectados por líneas arrendadas.

ASSIGNED NUMBERS (números asignados) Documentos RFC que especifica, por lo general de forma numérica, los valores utilizados por los protocolos TCPIIP.

ATM Modo de transferencia asíncrono. Tecnología de red orientada a la conexión que utiliza pequeñas celdas de tamaño fijo en la capa de nivel inferior. W M tiene la ventaja potencial de ser capaz de soportar voz, vídeo y datos con una sola tecnología subyacente.

AUTONOMOUS SYSTEM (sistema autónomo)

.

Grupo de ruteadores y redes bajo una entidad administrativa que cooperan de cerca para ampliar la accesibilidad de la red y el ruteo, comunicándose entre sí mediante el protocolo de contrapuerta interior de su elección. Los ruteadores dentro de un sistema autónomo tienen un alto grado de confiabilidad. Antes de que dos sistemas autónomos se puedan comunicar, un ruteador en cada sistema envía información de accesibilidad de un ruteador a otro.

BACKBONE NETWORK (red de columna vertebral de la red) Cualquier red que forme la interconexión central para una red de redes. Una columna vertebral de red nacional es una WAN; una columna vertebral de red corporativa puede ser una LAN.

29

Webs con Photoshop BASTION HOST (anfitrión baluarte) Ordenador seguro que forma parte de un sistema de muro de seguridad y corre aplicaciones que se comunican con el exterior de una organización.

BRIDGE (puente) Ordenador que conecta dos o más redes y envían paquetes de datos entre ellas. Los puentes operan a nivel de red física. Los puentes difieren de los repetidores pues almacenan y envían paquetes completos, mientras que los repetidores envían todas las señales eléctricas. Los puentes también difieren de los ruteadores ya que se valen de direcciones físicas, mientras que los ruteadores utilizan direcciones IP.

CLASS OF ADRESS (clase de dirección) Categoría de una dirección IP. La clase de dirección determina la localización de la frontera entre el prefijo de red y el sufijo anfitrión.

CLIENTE-SERVIDOR Modelo de interacción en un sistema distribuido en el que un programa, en una localidad, envía una solicitud a otro programa en otra localidad y espera una respuesta. El programa solicitante se conoce como cliente, el programa que atiende la solicitud como servidor. Es común que se estructure primero el software cliente y después el servidor. 7

DOMAIN (dominio) Parte de una jerarquía de nombres. Sintácticamente, un nombre de dominio consiste en una secuencia de nombres (etiquetas) separadas por puntos.

ENCAPSULATION (encapsulación) Técnica utilizada por los protocolos estratificados por capas en la cual un protocolo de nivel inferior acepta un mensaje de un protocolo de nivel superior y lo coloca en la sección de datos de su trama de bajo nivel. La encapsulación implica que los datagramas que viajan a través de la red física cuentan con una secuencia de encabezados de los que el primero proviene de la trama y red física, el siguiente del Protocolo Internet (IP), el siguiente del protocolo de transporte, y así sucesivamente.

FIREWALL (muro de seguridad) Configuración de ruteadores y redes colocados entre la organización

Comunicación de datos interna de una red de redes y su conexión con redes de redes externas, con el fin de proporcionar seguridad.

FLOW CONTROL (control de flujo) Control de la razón de transferencia a la que introducen los anfitriones y los ruteadores paquetes de datos en una red de redes, por lo general para evitar congestionamientos.

FRAGMENTATION (fragmentación) Proceso de dividir un datagrama IP en pequeñas piezas cuando deben viajar a través de una red que no puede manejar el tamaño del datagrama; los campos en el emcabezamiento IP especifican si el datagrama es un fragmento y, de ser así, el desplazamiento del fragmento con respecto al datagrama original. El software IP en el receptor final debe reemsamblar los fragmentos para obtener el datagrama original.

HIERARCHICAL ROUTING (ruteo jerárquico) Ruteo que se basa en un esquema de direccionarniento jerárquico. La mayor parte del ruteo del TCPíIP se basa en una jerarquía de dos niveles en la que una dirección IP se divide una parte de red y otra parte de anfitrión. Los ruteadores utilizan sólo la parte de red hasta que los datagramas alcanzan un ruteador que los pueda entregar directamente. Las subredes introducen niveles adicionales de ruteo prárquico.

ICMP Protocolo de Control de Mensajes de Internet. Parte integral de protocolo de Internet (IP) que resuelve errores y controla los mensajes. Específicamente, los anfitriones y los ruteadores utilizan el ICMP para enviar reportes de problemas relacionados con datagramas que se devuelven a la fuente original que envía el datagrama. El ICMP también incluye la solicitudréplica de eco utilizada para probar si un destino es accesible y responde.

INTERNET Físicamente, una conexión de redes de conmutación de paquetes interconectadas por ruteadores, junto con los protocolos TCPíIP permite que la red funcione como una sola red virtual extensa. Cuando se escribe con mayúscula se refiere específicamente a la red global de Internet, conjunto de redes y ruteadores que abarcan 61 países y utiliza TCPíIP para formar una sola red virtual cooperativa.

Webs con Photoshop IP DATAGRAM (datagrama IP) Unidad básica de información que pasa a través de una red de redes TCPI IP. Una datagrama IP es a una red de redes lo que un paquete de hardware es a una red física. Contiene las direcciones de fuente y destino juntos, así como los datos.

PACKET (paquete) Se trata, en términos generales, de cualquier bloque pequeño de datos enviado a través de una red de conmutación de paquetes.

PROTOCOL (protocolo) Descripción formal de formatos de mensajes y reglas que dos o más máquinas deben seguir para intercambiar mensajes. Los protocolos pueden describir detalles de bajo nivel de las interfaces de ordenador a ordenador o del intercambio entre programas de aplicación. La mayor parte de los protocolos incluye descripciones intuitivas de las interacciones esperadas así como especificaciones más formales, utilizando modelos de máquinas de estado final.

PARA SABER MÁs Lo desarrollado en este capítulo se ha centrado en explicar los datos necesarios para comprender cómo se produce la comunicación de datos en una red sea cual sea las características de ésta. Sin embargo, la información aportada ha sido considerablemente reducida a las necesidades requeridas dado las características del libro. Por este motivo le invito a que consulte los libros que a continuación procedo a detallarle, ya que la información aportada por éstos está en mayor medida centrada en los temas que ha aquí se han tratado.

-SANCHEZ D. y CRESPO D.- Internet. Curso de iniciación. Ed. Inforbook's. Barcelona. -SANCHEZ D. y CRESPO D.- Irzternet en la empresa. G u h profesional. Ed. Inforbook's. Barcelona.

La imagen tratada para incorporarla en una página Web ha de cumplir ciertos requisitos. Ya sabemos lo que puede tardar en cargarse una imagen en el vysualizador de nuestro navegador. Esto es debido a que un documento GZF (Graphics Interchange F o m t ) , JPEG (Joint Photographic Experts Group) o PNG (Portable Network Graphics) es y suele ser de mayor tamaño que cualquier otro documento incorporado en una página Web. Como vemos, el sino que vive una página Web viene determinado por la importancia que tiene la incorporación de imágenes en una página, ya sabemos la gran información que puede contener una imagen, y el tiempo que puede tardar en cargarse la misma, cuya visualización puede llegar a ser el desespero del navegante que desea verla. Además del tamaño del documento existen otros aspectos que han de tenerse en consideración, como puede ser la compresión realizada en el archivo, la paleta seleccionada, incluso el diseño mismo de la página Web al igual que las imágenes y gráficos que la contienen, pero esto ya lo trataremos en sus capítulos respectivos. En este capítulo desarrollaremos todo lo relacionado a las características intrínsecas de una imagen digital, de qué está constituida, la resolución, el tamaño de imagen, la resolución de bits, etc. Y trataremos la relación de amor y odio existente entre estos conceptos y la transmisión de datos, en este caso imágenes para la Web con

Webs con Photoshop el fin de que seamos capaces de discernir el mejor tamaño de archivo, el mejor tamaño de imagen, la resolución más adecuada e incluso el mejor diseño en relación a las necesidades de rapidez de visualización que son requeridas en la red, sin que por ello tenga que quedar menguada la calidad de los gráficos, imágenes e, incluso la calidad del diseño. Todo ello lo conseguiremos combinando todos estos atributos en su justo punto de equilibrio.

Consejo

...

Es recomendable que antes de leer esta capítulo haya leído el capítulo anterior dado que lo aquí explicado está intimamente relacionado con las transferencia de datos en la red y el funcionamiento de la misma.

IMAGEN DIGITAL Es posible, sino más que probable que ya tenga conocimientos sobre las características de la imagen digital. Sin embargo, creemos necesario realizar un repaso a ciertos conceptos relacionados con las características que ésta posee. Photoshop, como cualquier otro programa de tratamiento digital de imágenes describe el plano como una reticula de puntos, a cada uno de los cuales se les denomina pikeles. Éstos asumen un valor tonal y se disponen a modo de mosaico definiendo áreas cromáticas: las imágenes. Esta concepción determina la manera de crear y representar la imagen.

Cadapíxel (abreviatura depicture element) viene determinado por laprofundiúad de píxeles o resolución de bits, sea cual sea el modo en que desee denominarlo. Es decir, el número de bits de información almacenados en cada píxel. La profundidad de píxeles determina cuánta información de color existe para cada píxel de archivo. Un píxel con una profundidad de bits de 1 tiene dos valores posibles: sí y no. Traducido a colores sería blanco y negro. Con una profundidad de 8 tiene de 28 a 256 valores posibles. Con una profundidad de 24 bits tiene de 224 a 16'7 millones de valores posibles.

Optimizar la imagen para Internet Este modo de representación se extiende, también, a los dispositivos físicos como el monitor, el escáner o el vídeo, por ello la calidad y la naturaleza de éstos medios físicos y lógicos determinarán la representación. Cuanto mayor sea el número de bits por píxel, mayores son las posibilidades de obtener los valores deseados. Aunque estos valores habrán de ser reducidos a una gama de 256 colores, como máximo, una vez haya de ser exportada la imagen a la red. La determinación del número irá en función de las características del documento en cuestión. Por ejemplo, si debemos exportar una fotografía habremos de considerar como prioritario que la imagen conserve la mayor cantidad de valores tonales posibles (256 colores) y que ocupe el menor tamaño (reduciremos el mismo comprimiendo el tamaño de archivo durante el proceso de conversión a la extensión JPEG, por ejemplo), mientras que si se trata de un gráfico o imagen caracterizada por amplias zonas de colores planos, no requerirá de un gran número de colores, por lo que podremos reducir la resolución de bits tanto como sea posible. Comprobamos lo importante que es adecuar la profundidad de pkeles en un documento que ha de ser exportado a Internet. Ya que es un factor deterrninante en el tamaño de archivo final y, por lo tanto, influirá sobre el mayor o menor tiempo que éste requerirá para ser descargado en el navegador. Aunque a esto hay que sumar lo congestionada que esté la red en el momento de ser Wsualizado. No obstante, si el documento va dirigido a una red LAN este problema quedará en gran medida reducido.

...

nota

No hemos de confundir los bits con los bytes. Un bit (de la contracción de la palabra inglesa binary unit, que quiere decir cifra binaria) es la unidad de información que puede tomar uno de los valores: O o l . En los microordenadores, los bits están agrupados de 8 en 8 para formar ~palabras~, también llamadas bytes u octetos. Los microprocesadores que utilizan «palabras»de 8, 16 o 32 bits son llamados microprocesadores de 8 bits, 16 bits y 32 bits respectivamente. Un byte es un grupo de 8 bits y representa un carácter, en este caso se le llama igualmente octeto.

35

36

Webs con Photoshop

hay que saber.. Photoshop funciona con mapa de bits o bitrnaps. Los bitrnaps son imágenes formadas por un número determinado de píxeles. Es decir, la imagen está compuesta por infinidad de cuadrículas rectangulares, cada una de las cuales con su valor tonal, de brillo, de color, de luminosidad, etc., son. en su agrupación, las que dan idea de una imagen visual. El número de píxeles por pulgada (ppi) determina la resolución de la imagen. A mayor número de píxeles

por pulgada mayor resolución posee la imagen y en consecuencia mayor calidad, pero, al mismo tiempo, mayor espacio ocupa en el disco duro. Aunque este aspecto no ha de preocuparnos en exceso dado que las resoluciones que se utilizan en red son estándares y responden a las resoluciones de los monitores (Macintosh la resolución es de 72 ppi con Windows la resolución es de 96 ppi). Sin embargo. es aconsejable que diseñe sus páginas Web con una resolución de 72 ppi con el fin de que todos los navegantes, sean de Mac o de PC, visualicen los gráficos adecuadamente.

Optimizar la imagen para Internet TAMAÑO DE IMAGEN Y RESOLUCIÓN E N DOCUMENTOS PARA LA WEB En este tipo de programas de mapa de bits el tamaño de la imagen y la resolución está íntimamente ligado al número de píxeles. Sabemos que el tamaño de una imagen describe sus dimensiones físicas y que su tamaño se determina enpheles, por lo tanto, su tamaño es fijo, lo cual nos permite saber aproximadamente las dimensiones de la imagen. La resolución es, como ya sabemos, la densidad de píxeles por pulgada que forma una imagen, por lo tanto, el espaciado de los píxeles afecta al tamaño de la imagen y los detalles de la misma. Aquí mostramos unos ejemplos ilustrativos de cómo varía el tamaño de la imagen cuando son modificados ciertos valores en el cuadro de diálogo Tamaño de imagen.

Figura 1. Ilustración, cuadro de dialogo Tamaño de imagen y escritorio de Photoshop.

La ilustración posee, según los valores determinados en Tamaño de la imagen unas Dimensiones de píxeles: 890 K; una Anchura: 425 p. y altura 714 p. Y una Resolución de 72 ppi. La Anchura es de 14'99 cm y la Altura es de 25'18 cm. Observe en que tamaño aparece visualizada la imagen en el escritorio de Photoshop.

Observe que si aumentamos o reducimos la resolución del documento en cuestión, los valores de las dimensiones de los píxeles varían. Esto hace que la imagen aparezca aumentada en el monitor, puesto que hemos aumentado sus

37

Webs con Photoshop

38

dimensiones de píxeles de la imagen y la resolución del monitor es invariable, esto hace que aparezca aumentada. Sin embargo, a nivel de impresión este aumento se relativiza al tamaño que ocupa el documento en el disco duro. Aspecto éste realmente importante y que debemos tener en consideración para documentos que vayamos a exportar a la Web. Para solventar en cierto modo este inconveniente podemos en algunas imágenes recurrir a modificar la resolución sin alterar las dimensiones de impresión. Esta variante produce un aumento en el documento de impresión, pero no modifica las dimensiones en píxeles del documento y, lo que es más importante no hace que varíe el tamaño de archivo o, dicho de otro modo, las dimensiones de píxeles del documento. Este último proceso puede resultar realmente interesante cuando tenemos documentos en los que la resolución de la imagen es inferior a los estándares utilizados en la Web, es decir 96 ppi (Windows) y 72 ppi (Macintosh), De lo dicho podemos deducir que tendremos que saber adecuar las dimensiones de los documentos para optimizar al máximo el tamaño de archivo, sin perder definición y detalle en la imagen y al mismo tiempo someterlo a las rigurosidades de tamaño impuestas por el monitor para una correcta presentación en el visualizador de nuestro navegador.

Tartbobmpranui

A LW.LF,,.

A

. %L*

.. 1.7: j

- 1. -1

1 9

m

&,mr w;mrrn

U yo)c

i 1

~

.

.=.

a m i i t a bmi

-

F

.

-

..

..=. . ."

.

:A

,

.

.

1

1 ,:;i.i lf-:

E-1,

.l'

.'. -1

\

.i;

-

-.

i

- -

Variando la Resolución de 72 ppi a 92 ppi manteniendo las proporciones no altera el tamaño de impresión tal como muestra la ilustración. Sin embargo, aparece modificado el tamaño de archivo que pasa a ser de 890 K a 1'42 M. Esto hace que Figura 2. el tamaño de visualización la Cuadro de diálogo Tamaño de imagen, escritorio de Photoshop escritorio de Photoshop va- e Imagen.

'

Optimizar la imagen para Internet

Figura 3. Imagen, cuadro de diálogo Tamaño de imagen y escritorio de Photoshop.

En este caso hemos variado l a resolución igualmente de 72 ppi a 92 ppi. En este caso hemos vinculado exclusivamente el cambio de resolución al tamaño de impresión. Esto hace que se no altere el tamaño de archivo, por lo que permanece en 890 k,pero si que modifique el tamaño de impresión. Observe como se mantiene el tamaño de visualización en el escritorio.

Es importante que el detalle de la imagen no quede menguado, puesto gue para incluir el documento con posterioridad a la Web deberá ser indexado, lo que provocará una reducción drástica de colores y, en consecuencia, una perdida del detalle. Este consejo es importante que lo tenga presente si ha de exportar fotografías más que gráficos o imágenes que contengan poca información ya que es en éstas donde se acentúa el efecto de pérdida del detalle. Como ya se ha indicado trabajando con imágenes para Internet no interesa tanto el tamaño de impresión como las dimensiones de píxeles del documento, aunque, como es lógico, uno dependerá del otro. Sin embargo, y lo que es realmente importante es que los documentos deben estar en consonancia con las resoluciones del monitor dado que es en éste donde se va a visualizar el documento y si posee unas dimensiones de píxeles o una resolución inadecuada a la a la resolución del monitor se pueden producir deformaciones inesperadas. Por este motivo es realmente importante que adecúe sus imágenes o gráficos a los estándares que hay en el mercado. El tamaño de visualización en monitores 12" y 14" es de 640 por 480 píxeles, de 800 por 600 píxeles para monitores de 15" y 17" y 1024 por 768 píxeles en monitores de 17"-21" como norma.

39

40

Webs con Photoshop Estos tamaños de visualización están relacionados con los estándares gráficos soportados por los monitores. Cada monitor acepta un rango determinado. Por ejemplo, un monitor Nec MultiSync 3V puede aceptar las siguientes rasgos gráficos: VGA 640 por 480 a 60,72 y 75 Hz; Super VGA 800 por 600 a 56,60 y 72 Hz; MAC 11 y Quadra 640 por 480 a 67 Hz; 8514/A y XGA a 1024 por 768 entrelado; XGA-2 a 1024 por 768 y 60 Hz y 1024 por 768 en no entrelazado a 60Hz. Hoy por hoy podemos elegir entre una amplia variedad. Como es lógico, cuanto mayor sea el rango que admita el monitor más resoluciones podemos visualizar en la pantalla. La selección de una resolución irá en función de las necesidades del momento. Las resoluciones de los monitores han de tenerse en consideración a la hora de diseñar una página Web. mies, no todo los navegantes verán la página tal como la vemos nosotros. Por este motivo, es de esencial importancia tener en cuenta las resoluciones en la cuales trabajamos. Por ejemplo, si su monitor está adaptado a unas resoluciones de 1024 por 768 píxeles su página Web vista por un navegante con un monitor adaptado a unas resoluciones de 640 por 480 píxeles será ampliada en tamaño, es decir aparece mucho más grande, por lo que parte de la información de la misma puede desaparecer del campo de visión. ). b c h m L&dn

-.X

&I

118

Earorlor A&

11

8 C

",-

Lu

- --

"-

sud^ Fa

M .l~hYw.

m "la

m

~ & i a rw w w

~9 r.-

mi w u c

ur

,

WWLUO

Visor de Microsoft l. Explorer, Figura 4m recuadro de previsualizaciónde resolución del monitor y Área de escritorio.

25 de Diciembre de 1997 8 34 P M

y&z&q!&-

b p k d e l día,

fEUCW f- 1

-

f

--

-

*

- .,

34"Tarifas

--

1

Notlclns

LT Jl

2.

-? .d. F. 2.

2

'1

La resolución seleccionada para el monitor es de 640 por 480 píxeles. Observe que cuando elegimos este tipo de resolución las imágenes son ampliadas en la pantalla. Para verla en su totalidad deberemos recurrir a mover los reguladores.

dd sscritw,n Menos

J

D R f ?

; j'

''

I

'.' .'; . Más

......U . : ,,............... . 640 por 480 píxdm

,

Optimizar la imagen para Internet Figura 5. Visor de Microsoft l. Explorer, recuadro de previsualizaciónde resolución del monitor y Área de escritorio.

] -

-

25 de Diciembre de 1997 8:28 P.M

Con una resolución de 800 por 600 píxeles las imágenes aparecen centradas y en su totalidad. Es el más idóneo para trabajar, pues nos sitúa entre los dos tipos de resolución estándares utilizados. Para verla en su totalidad no es necesario mover los reguladores.

-

Figura 6. Visor de Micro: Explorer, recuad previsualización clc ,=solución del monitor y Área de escritorio.

I-.~

*m-

.

Ve

Ir*.

up

7 L i

L-A. -

.P .

. .....

.

..

... .

A ,Sr,M

'J

,..,

..

,.,,

-).

.?S-

,.-. ,... y

ir--

.h.4

+

\

I

A,g, Memis

- '

,

Más

800 por 6m pixeles -

,:,:.

'-

íi'inri-r

--

E

: ; 1

':iq.i.r

d

~ ~ ~ t . b F '

l.' d r DiriiJlr

kl2._iA

lELlCLF IILFTM

.-

~

i

jm~

A c.-*= v> s ~ ~ a n b !sol l a agua ~ p ! n / ~mu s! a plaqap X a2 -gula# 01 Joplruas la !S010s ' d ~ O g J ~ ~ ! la JJD ! ~ Dsouialaqap ~D ua%~ur! ap un sa oJualunDopla !S i!npu! D ua%. DI ap JO~DZ!IDDOI la D D ! ~ U !

mn

D#DW

apuop

< , , ~ ( ) , , =3~ w3p~: ~ J a n b ! i aDI Dsn as saua%~w!~ ! n p u D! J D ~

w 8 1 t uanqos ~ 0 6 1 ~ .alueuodui! uo!:,ew~o~u! el ap oisal la owo:, 'a:,elua ap oixai owo:, ñ sauoloq ap e w ~ oua j uaBew! ap sedeui ap opow e ua:,a~edeawoH A slnol anb ahiasqo .ep -euo!:,e(a~ uo!:,ew~o)u! uaua!luo:, seu!Bpd se1 ap olsaJ la ua owo3 .soluaun:,op so~io e aDe/uaap ahi!s opeñe~qnsolxa) 13 .sauoueu ñ sope~op'salnze sol aJlua saJolo3 sol aluaue!~el!~oñeu asopua!ueda~'o!pu!oldual un ap aha!laJ un eJlsanw anb e!ge~60104 el tí ~ O ap H ose:, la sa a1s3 .saua6pw!se1 sepoi ua saunwo3 syw sa~olo:,sol uebuaiuo:, anb opua!3ey sepeieJi op!s uey sauaBpw! seiia!3 'SJ!VLap osnpu! a sj!q 8 ap aiuaw -alqeqoJd 'uesn/!pap opeure~lu03 e68j/9 opez!l!ln e4 as anb pep!lnBas u03 43ap sou -

,

.

mI

;*

...---,-

" -.?, ; ,,,

,

.,

1

anb A sa~olo:,ap oppnpaJ oJawnu un ehias -qo as spwape loqol6 lap uaBew! el uo:, apa:, -ns o u s ! u 01 'se!:,ualedsue~l ap uaJa!nbaJsau -abpu! ap ej~oñeuel anb e/( ' j l 9 sauo!Deur -!ue aiuawa~qeqo~d 1 0 ua6ew! ~ el ñ oqol6 la uos selsa 'sauo!:,ew!uesop ua3aJede led!:, -uyd eu!6pd el u3 'as~ez!lea~ uapand anb sop -egos so3!ioxa s a í e ! ~opuelouap soqol6 ua ua:,a~edeso:,e!s!pe~edsa~e6nlap sauabpw! se1 'esa~duiael ap od1lo6ol (a a:,a~edeaisa aJqos o:,uelq sa opuo) 13 .epal!p ñ elan3sa 'ell!:,uassa sñep!lo~ 01 u . 819 ap eu!6pd e l

Webs con Photoshop

IMÁGENES DE GRAN TAMAÑO En el primer ejemplo mostrado (fig. 25 y 30) el logotipo de la página principal ha sido fragmentado en tres partes, como ya se ha comentado. Est'o es posible mediante el lenguaje HTML. En muchas ocasiones comprobamos que una imagen sea ensamblada en la página Web y que aparezca descargada fraccionadamente. Normalmente, este proceso se lleva a cabo cuando los documentos ocupan altos tamaños de archivo o, como en el caso de la figura 25, además por tratarse parte de la imagen en un vínculo. El método que se utiliza para ensamblar fragmentos de imágenes y recomponerlas en la imagen completa consiste en utilizar las etiquetas que permiten crear tablas. En este caso, no interesa crear bordes ni separaciones entre las celdas que, en esta ocasión corresponden a fragmentos de imágenes a insertar. Es muy importante que recuerde que los valores que han de darse en la etiqueta han de ser de O, ya que si no fuese éste el valor los fragmentos de imagen no aparecerían perfectamente encajados.

-

..

Para realizar el proceso deberemos especificar en la etiqueta TABLE BORDER un tamaño de borde de valor O, quedará especificado como ), del mismo modo la caníidad de espacio entre las celdas deberá asumir un valor de O, el atributo quedará detallado del siguiente modo cTABLE CELLSPACING=O> y, por último, la cantidad de espacio entre el contenido de una celda y el borde tendrá un valor de O , y su atributo se especificará del siguiente modo .De este modo conseguimos que todas las partes queden unificadas sin apreciarse su fragmentación, siendo presentadas con mayor rapidez que si hubíesemos descargado la imagen completa.

-

.

-*.

.,

- *. -

,J

>:

-. ,-.

-

. "-,'

'.

-

--

m"

Figura 30. Visor de Microcoft lnternet Explorer.

Tratar imágenes para la Web Por último las características del documento aparecerán especificadas en los atributos respectivos a la imagen, anchura y altura de la misma, así como el documento de procedencia, como por ejemplo: . A esto podemos añadir el atributo ALT, para los usuarios que disponen de navegadores que no visualicen imágenes. Pondríamos en este ejemplo y después de último atributo añadido: ALT= «imagen de vestido a cuadros vichy catalogado como no 15»>

nota

...

Diseñe sus páginas con archivos reducidos, pues el tiempo estimado que un navegante resiste en la inevitable espera es de medio minuto.

...

a l g o sobre html

-

I I

Para aplicar un valor O a fragmentos de imágenes tratadas como tablas la etiqueta queda especificada del siguiente modo:

c TABLE BORDER=O CELLPADDING=O CELLSPACING=O>

nota... Las tablas además de ser un buen recurso para disminuir el tiempo de espera,tamaños de archivo altos o añadir mapas de imagen son utilizadas igualmente para aplicar ingeniosas animaciones GIF. Realmente pueden crearse animaciones y diseños muy interesantes.

,,

La creación de texturas, utilizar imágenes como mosaico o rellenar el fondo con colores sólidos resulta ser algo habitual en proyectos de páginas Web. El fondo es un elemento esencial en un proyecto, puede dar un aspecto realmente profesional al diseño o, todo lo contrario. Un fondo inadecuado provocará una mala visualización del texto, que se hará ilegible. El fondo es el elemento sobre el cual colocamos el resto de elementos que componen la página. Esto es importante recordarlo, ya que podemos hacer que resalten o que sean neutralizados por el mismo. De este modo debemos considerar en cada caso las características de la página y en consecuencia seleccionar el fondo más adecuado. Pero como ya indicábamos en el capítulo anterior incluir imágenes como fondo resulta ser una tarea algo compleja, además de aumentar el tiempo de presentación -relacionado con el ancho de banda y la velocidad de transferencia en la red- puede provocar una falta de legibilidad del texto, por lo que su diseño debe estar realmente estudiado. Lo que es más común es utilizar como fondo ciertas imágenes tratadas o texturas creadas e incorporarlas a modo de mosaico sin que se aprecie la subdivisión existente. Aunque lo más habitual es que no se busque un efecto de fragmentación del fondo a modo de azulejos, también puede

Webs c o n Photoshop

104

resultar interesante conseguir cierto ritmo visual. Con este fin provocaremos un desfase y una diferenciación acusada en los bordes de las imágenes, de este modo el efecto mosaico quedará acentuado. . ,.,. ; l.--_.*,-5-. - (3 > . ." . -~

.-

.,,., *."

b*.,~

:1

>X :i

.L. L .

-

-

8.

I

-

-

,,: ,.

10

- ,.. 3-

..*

I

.->

-

--

J

Hemos utilizado una imagen en escala de grises a modo de mosaico. Observamos que este gráfico como fondo dificulta la lectura de textos Sin embargo, con cuerpo mayor y una elección de color adecuado para la letra puede resultar interesante Las imágenes deberán ser incorporadas I de forma fraamentada Dara aue resul" te efectiva su presentacion.

Figura 32. Visor de Microsoft lnternet Explorer.

-

.

..

-

-

-

-

Figura 31. Visor de Microsoft lnternet Explorer.

....,. .

+

- . -. .

.

+

-

, Se ha creado un texto con va..* . , , rios filtros de Photoshop. A lo lar- +. . ' _,_ go de este capítulo se muestran .:; . . r ' diferentes técnicas para crear 4 . . C?I PI 1 1 1 c 1 D 1 1 F ]

,lrnq1 FXP

tan(

11,

ion(

sin

_sJ

1

x

z.3

4

5

6

a

1

2

3

-

O

ikl

A

iu

:

E

,drNr1

l - ! ~ NNN* 131i

E

También hay en el mercadopaletas de colorpara la web. Pueden resultar muy útiles porque facilitan todo el proceso contando con un cuadro espectral del cual podemos seleccionar el color que nos satisfaga y obtemer al instante el número hexadecimal de dicho color, pudiendo elegir una gama reducida y comprobar como queda cada uno de los colores sólidos como fondo de la página Web de un modo efectivo y rápido. Aquí mostramos un ejemplo de este tipo de software.

]

-

Preparar fondos y texturas Figura 36. Cuadro de diálogo Color y de Web color.

-

"S

-

-

-

,v...

..

. . . . . . .'. ,T'

--

'

S A L E S R SW~+ALEVE~.(TS

-

,

. --.-- - -.. - .-

O *

La página Bloomingdales ha sido confeccionada mediante páginas de marcos, presentado una .~ á a i n a de contenido en la aue el fondo es un mapa de imagen tal Y ~ ~ l - n laotw-nos destacado.

,: 2 4-3 . .- . ., . ...................

..+.

...T

>

,.-,:

Jcpenney no ha introducido un mapa de imagen como fondo. La página dividida en cuatro zonas bien diferenciadas es empleada para separar los aspectos que se tratan en la misma, de lo más genérico a lo más específico, así como un extenso número de vínculos que nos trasladan a otras páginas.

- 8

d

d

Webs con Photoshop

...

a l g o sobre html

Hay navegadores en el mercado que no son capaces de interpretar la etiqueta FRAMESET, esto quiere decir que no pueden visualizar paginas de marcos. Para este tipo de ususarios es recomendable darles algún tipo de información o vínculo que les muestre el contenido de la página, con este fin puede añadir las etiquetas NOFRAME y INOFRAME colocándolas del siguiente modo (donde cortina1 y cortina2 son el URL de los documentos htm:

fondos con textura c/HEAD> CBODY BACKGROUND =textura.gif> c/BODY> cIHTML>

Si el fondo es un color sólido escriba (donde 35B5CO responde al número hexadecimal correspondiente al color seleccionado y azul.jpg a la imagen seleccionado):

< HEAD>

fondos con textura CIMG SCR=azul.gif WIDTH=283 HEIGHT= 187> c/HTML>

Los atributos de anchura (wicith) y altura (height) de la imagen no es necesario que los incluya en estas circunstancias. Sin embargo, para las especificaciones de la página completa es aconsejabe incluirlas con el resto de atributos, pues permite que aparezca la imagen con mayor rapidez en el visor del navegador.

Transparencias en imágenes

,

53

Cuando se trata de texturas irregulares donde aparecen ciertas formas que se repiten, hemos de emplear estrategias específicas con el fin de encajarlas cuando sean montadas, ya que en cada diseño la resolución puede ser distinta. Figura 78. Visores del navegador Microsoft lnternet Explorer respectivamente. Observe la ilustración, ha sido colocada sin considerar distancias especificas, simplemente se ha determinado la ubicación: derecha e izquierda en cada una de las imágenes. Comprobamos como las texturas no coinciden y se percibe un cierto desfase entre la textura del fondo y la L I

r , . r ,

r

'

m

. c HEAD > < TITLE> fondos con textura

La ilustración inferior de la página anterior responde al siguiente esquema (donde VSPACE=óO y HSPACE=O son las distancias en pixeles entre la imagen y los márgenes horizontal y vertical): cHEAD> < TITLE> fondos con textura cIHEAD> clBODY> c/HTML>

,

Transparencias en imagenes

LEFT y RIGHT son utilizados para alinear imágenes a la izquierda y a la derecha respectivamente. Cuando añadimos este tipo de atributos el texto incorporado es colocado alrededor de la imagen.

...

Consejo

I

Aunque los atributos HSPACE (espacio horizontal) y VSPACE (espacio vertica1)son utilizados normalmente para que el texto o cualquier otro elemento incorporado no choque con la imagen, puede emplearlos para alinear la imagen con textura incorporada con respecto a la textura del fondo. Ya hemos comprobado en la página 153 que buen resultado nos ha dad6 y aunque la imagen aplicada en el fondo tiene las dimensiones de 100 píxeles de anchura por 75 píxeles de altura hemos debido añadir de espacio vertical 60 píxeles para que las texturas encajasen perfectamente. No obstante, este sistema impide colocar cualquier elemento dentro del espacio utilizado como margen, aspecto que debemos recordar.

Remodelar la tabla de colores Como indicábamos al principio de este apartado, las texturas suelen contener un número concreto de colores, dependiendo de las características de la página puede ser mayor o menor. Cuando la textura es añadida en las zonas transparentes de las imágenes incluidas no hemos de olvidar que todos los colores de

1

I

156

Webs con Photoshop la textura deben estar incluidos dentro de la paleta de la imagen, gráficos u objetos con transparencias, por lo que el proceso para la reducción de colores en la imagen es un tanto distinto. 1. Tenemos el documento que contiene la textura a modo indexado. En éste hemos reducido con anterioridad el número de colores, para saber con exactitud el número procedemos a visualizar la tabla de colores de dicho documento. Para ello pulsamos sobre el comando Tabla de colores del submenú Modo del menú Imagen. Tabla: -

1 A medida

,........... C17..

-

........

Cancelar

1

cargar..

1

Figura 79. Cuadro de diálogo Tabla de colores y documento.

I Guardar..

.

Comprobamos en la tabla de colores de la textura que está constituida por 32 colores. Para añadirlos a los de la imagen hemos de guardar la paleta y eliminar todos los negros añadidos.

El paso siguiente consiste en guardar la paleta correspondiente a la textura para añadirla con posterioridad a la paleta de cada una de las imágenes incluidas en la página Web. Como es lógico si deseamos que la imagen contenga el número máximo de colores de éstos, habremos de restar los colores que corresponden a la textura que añadiremos. Por ejemplo, si queremos que la imagen contenga 256 colores dentro de este grupo estarán incluidos los 32 colores que pertenecen a la textura.

,,

Transparencias en imágenes Figura 80. Cuadros de diálogo Tabla de colores y guardar respectivamente.

Cigaidai en

1 A pro~sctos

J .

al

6iidrdaf ramo

Lo guardados con la extensión que más nos convenga, en esta ocasión ACO. Cuando la carguemos en la paleta Muestras eliminaremos los negros sobrantes y la volveremos a guardar.

3. A continuación en la paleta Muestras sustituimos la paleta que aparece por defecto por la paleta guardada. Con este fin pulsamos el comando Reemplazar muestras del menú lateral.

Figura 81. Cuadro de diálogo Cargar y paletas Muestras respectivamente.

serve que para complet:ar los 256 colores an sido utilizados negros. Hemos reemplazado los colores con el fin de eliminar dichos negros y hacer que la paleta esté constituida exclusivamente por los 32 colores de la textu-

ra. Para eliminarlos coloque el puntero sobre el primero de los negros y pulse la tecla Ctrl (Win) Opción (Mac) y pulse el botón iz-

Tamaño de archivo

762 byles

* .X

158

Webs con Photoshop 4. La paleta tal como ha quedado la guardamos y cargamos la

correspondiente a la fotografía mediante el comando Cargar del menú lateral. Para crear la paleta de la imagen o imágenes hemos de realizar el mismo proceso, por lo que el documento ya ha de estar indexado siempre habiendo tenido en cuenta que a los colores de cada una de las imágenes hemos de sumar los colores de la textura.

Reemplazar muestras...

Guardar muestras...

~ o & e de ~

1 1

1 1

Y C ~ N O

Cuadro de diálogo Añadir

Recuerde que la paleta de la imagen incorporada debe ser la que contiene exclusivamente los colores de la imagen y no los de la imagen con la textura, pues la que acabamos de crear sumando los colores de sendos documentos será la que utilizaremos para reducir la imagen definitiva.

5. La paleta conjunta, que contiene los colores de la imagen y los de la textura, la guardamos siguiendo el proceso realizado. Será la que utilizaremos al convertir el documento que contiene ambos en GZF. De este modo conseguimos crear una paleta a medida que se ajusta a la adaptable en ambos casos y que no nos transformará en exceso la fotografía al tiempo que nos aseguramos que los colores de la textura aparezcan. A continuación abrimos el documento conjunto, el que contiene la imagen y la textura, y procedemos a indexarlo.

Transparencias en imágenes Para ello pulsamos el comando Color indexado del submenú Modo del menú Imagen. De la opción Paleta especificaremos la opción A medida cargando el archivo que nos interese, en este caso conjunta.

-.-

."- _ - - - .

s

.

.

A

_ -

Figura 80. - _ _--_-.-- _- _Cuadros de diálogo Color indexado, Ta?A bla de colores y Cargar y documentos.

--, S---

L

En el documento conjunto, en el que hemos cubierto las zonas transparentes con la textura que aparecerá como fondo, procedemos a indexarlo. Deseamos que contenga 256 colores por lo que la paleta conjunta contiene 224 colores de la fo-

que aparece en el cuadro de diálogo Ta bla de colores es la paleta definitiva.

mos incluir. Observe en la ilustración inferior como el resultado es Óptimo. Ambas partes aparecen sin haber sufrido alteraciones sustanciales.

<

- --

. --

-

.

,

59

160

Webs con Photoshop

...

Consejo

Cuando las imágenes contienen zonas transparentes y los colores de la textura de fondo no están contenidos en la paleta de dichas imágenes, siempre resultará más adecuado que la textura contenga un número reducido de colores ya que ambas paletas habrán de sumarse y es más importante no reducir la calidad de la fotografía aunque sea en detrimento de la textura.

Todos los procesos descritos en los apartados anteriores de cómo tratar las zonas transparentes en documentos GIF y sus paletas son igualmente válidos para cualquier tipo de elemento que debamos colocar en nuestras páginas Web.

1

? '

E N U S C A R A E LAS ZONAS TRANSPARENTES Otro método rápido y eficaz que nos permite borrar las zonas transparentes de un documento GIF consiste en cubrir dichas zonas con una máscara. De este modo podemos hacer que un fondo sólido o un fondo con texturas aparezca sobre la zona enmascarada. Sin embargo, siempre es aconsejable incorporar en el documento una porción de la textura o color, sobre todo si hemos incorporado difuminados, como por ejemplo una sombra, los cuales tienden a fusionar colores del fondo con los colores propios. En otras ocasiones puede aprovechar la facultad de variación de la opacidad en la máscara para producir algún tipo de efecto entre el fondo y el objeto gráfico en cuestión.

Transparencias en imágenes

61

En realidad este proceso puede ser claramente utilizado durante los procesos descritos en apartados anteriores. La particularidad de crear ciertas zonas enmascaradas consiste en producir una degradación entre la textura incluida en el documento gráfico que hemos de colocar sobre el fondo y éste, consiguiendo una fusión entre ambos más suave. No obstante, podemos utilizar una máscara que cubra la totalidad de las zonas transparentes de un documento aunque con toda probabilidad aparecerá un cierta tosquedad en los bordes como consecuencia del parche.

1. Al igual que en casos anteriores selecionamos la textura que colocaremos como fondo y la definimos como motivo mediante el comando Definir motivo. A continuación la clonamos en el documento para cubrir la zonas transparentes.

,,,, m

I

Cpita gopiar

Ctrhx Clrl+C

Naveqador

A-

m

Opciones de tampón

INormal

-

Pegar Pega dentro

I I

,

.

Opd "lad-A

O

Mayuc +Ctrl+'/

P.. iear

Turnar Purgar

Figura 81. Menú Edición, documentos PSD respectivamente y paleta Opciones de tapón.

\k

100%

n

h

I

En esta imagen era completamente necesario clonar la textura de fondo por presentar un grado de calado, por lo que existe una zona de transición gradual en la que datos de la textura y la imagen se solapan. Puede ser el mismo caso del texto en el que se ha aplicado una sombra.

2. El paso siguiente consiste en seleccionar la zona que hemos de enmascarar. Para que los bordes queden entre la zona enrnascarada y el resto de la imagen, tal y como se presenta en el documento superior, aplicarnos el filtro Desenfoque gaussiano.

Webs con Photoshop

162

De este modo logramos crear una transición entre la imagen y la zona enmascarada más suave y gradual.

-

1l

m

.

0

II

,,.l,,,,I

< T D ALIGN =CENTER> ITD>

I I

Al margen de la alineación de la etiqueta T D como ALlGN=CENTER hemos alineado la imagen en el centro definiéndola comoALIGN=MIDDLE tal y como corresponde. Del mismo modo se han introducido las dimensiones de la imagen como se requiere W I D T H = 160 y HEIGHT=24 l .

Diseñar marcos, barras y botones Figura 116. Visor de Microsoft lnternet Explorer.

m.r

,.- -

.

E-vr

* m

-.. PE --

I

: 7

r Hemos utilizado la tabla para enmarcar la fotografía. Dando un tamaño al marco de 40% con respecto a la horizontal de la página. El grosor determinado para el borde es de 15 píxeles, la distancia entre la fotografía y el borde es de 50 píxeles y el espacio entre celdas dado es de 5 píxeles. El color responde a un blanco.

... 4

,.*

%

.

+

-,r .r.mr

J

,.

2

--

-*

.

l 1

.* , ?.-

-

*-I*

-

PIP ; Y f O ~ N l l T marcos



La figura 1 18 inferior tiene como variante un valor de BORDER= 10 haciendo que se intensifique el efecto de marco sobre el texto gráfico.



211

Webs con Photoshop

212 .+...

-

.,. . -.; -- E. -.w,. (D-L^

A

.S

P.

En*

J

1

4-

r .l .

-

R

5.

d c?.,.

*u4-

: -,A, ,2. : r-.

"

m

7 -*

raI",QImli4 S71IIP!rYfirlMPWB

enmarcado los dos elementos . Hemos graficos mediante una tabla de dos las TR y cada una de éstas con una

&/?T,(:724y *mit . .*raww

fi-

f

.r

ÍIi

-

columna TDcentrando el contenido de las celdas. Su tamaño es del 40% El borde de 1 píxel. La distancia entre la fotografía y el borde es de 2 píxeles, el espacio entre celdas es de Ppíxeles. Como color de fondo el blanco.

-

En el segundo ejemplo muestra una variante. Lo más representativo es que en la fila inferior hemos incluido dos elementos en la columna colocando cada uno de éstos a ambos lados. Por lo demás, el tamaño vuelve a ser del 40%, el borde de 1 píxel, la distancia entre la fotografía y el borde pasa a ser de 20 píxeles y el espacio entre celdas de 10 píxeles. El blanco sigue siendo el color utilizado para cubrir el

Figura 119. Visores de Microsoft lnternet Explorer.

.. ,:

1

. . . .... ,, 3

.-&&T.

.F

4 ,%, .?- t,/-

.,--

I

WllSil l

.,,+

I

E

-

--. 7

I

w ST'PPrUr"lM1?IiFS

&!r:-

ICF4?fl1

I

+.

-

,

.

.F.. 2

>T:[tt 31

rL#&fpP7

-F! E- 1

fondo de la tabla Observe que en la ilustración superior hemos definido la alineación en la etiqueta TD, mientras que en la ilustración inferior se ha especificado dentro de los atributos de cada una de las imágenes incluidas. Esto es así porque en el segundo caso hemos colocado dos objetos en una misma celda. Compruébelo en la información incluida en la página siguiente.

Para definir la posición en horizontal utilizaremos el atributo ALlGN de los siguientes modos: izquierdaALlGN =LEFT; centro ALlGN =CENTER y derecha ALIGN=RlGHT. Para definir la posición en vertical emplearemos el atributo VALIGN de los siguientes modos: superior VALIGN=TOP; centro VALIGN=MIDDLE y inferior VALIGN=BOTTOM.

Diseñar marcos, barras y botones

...

a l g o sobre html

I

La figura 1 19 superior muestra la siguiente sintaxis: < HEAD > marcos





La figura 1 19 inferior muestra las siguientes variaciones.

,13

Webs con Photoshop

21 4 L..-,

"*+

En

-

y.

,-

b.

J

.

+,.

-

-; . 2

.

, A

3

- ,-1 . 4

2'

--m

'

J-

-

Figura 120. Visores de Microsoft lnternet Explorer.

Hemos enmarcado los dos elementos gráficos mediante una tabla de dos filas TR y cada una de éstas con dos columnas TD centrando el contenido. La incorporación de la segunda celda en sendas filas la hemos utilizado para - confeccionar un marco irregular. En este caso hemos utilizado un blanco " como color de fondo de la tabla.

'

En esta casión hemos colocado ,.. ,, las tablas vacías a la derecha por =: . lo que aparece el mayor grosor - i . . en este lado y variando la alineación de la imagen. Por lo demás en ambos ejemplos, el tamaño es del 40%, el borde de 1 píxel, la distancia entre la fotografía y el borde es de 20 píxeles y el espacio entre celdas de 10píxeles. El color de fondo de la tabla pasa a ser un beige. Observe que no hemos especificado la alineación de la imagen -

,. .. ,.,...

-

---.

. .2

.

u-

.. ,

,

r,

I

WlAJCPCEiTIIM'T/T'H?7N'u

6~7* -: + J J ~ :m, f3

T?-vdr

-

1

%?

.

marco en los dos ejemplos y el de moda1 en éste.

...

nota

Los valores por defecto de ALIGN y VALIGN son ALIGN=LEFT y VALIGN=MIDDLE. Esto hace que en los ejemplos mostrados no haya sido necesario definir las alineaciones, pues en el primer ejemplo y en sendas ilustraciones la imagen superior tenía estos valores. Para definir la posición en horizontal utilizaremos el atributo ALIGN y VALIGN para definir la posición en vertical.

.

Diseñar marcos, barras y botones

...

a l g o sobre html

La figura I Z O superior muestra la siguiente sintaxis:

< TITLE > marcos CTABLE WIDTH=40% ALIGN=CENTER BORDER= 1 CELLPADDING=20 CELLSPACING= 1O BGCOLOR=#FFFFFF> < TR > c/TD> clTD> La figura I Z O inferior muestra las siguientes variaciones.

215

Webs con Photoshop

216 ..-

Le

*. I e-

t.

.

m

,l

,S,.,

"

,

.S,,

-

Fe h , .

wrXb

,i B wau * ,

9

ri-

3

2

rrw Cii*

..

a Figura Visores de Microsoft 121.

--

1 1 I.r a~

J

-.

7 lnternet Explorer.

, , ,, --.r'..:,

.,,---7. .*,,A. < TlTLE>barras



Diseñar marcos, barras y botones

233

nota... Otros atributos posibles e indirectamente relacionados con HR son: CLEAR. utilizado cuando tenemos texto alrededor de una imagen y hemos de insertar otro texto debajo de la misma, situando el texto en el margen izquierdo, derecho, central o numérico e inmediatamente después de la imagen y CLASS, sirviendo para definir subclases en una lista de palabras.

UNOS CUANTOS E J E M P L O S Las páginas de CyberAntiqueMall son muy representativas de todo lo que estamos exponiendo, ya no sólo en este apartado sino en todo el capítulo. Básicamente el diseño general está marcado por unos elementos, estos son marcos, botones y barras elaboradas exquisitamente y separaciones y tablas creadas con HTML, además de otros elementos como vínculos. 4

Figura 137. Visor de Microsofi lnternet Explorer.

,.

+

*ni

L,

'

.

,t.7.

..

-,

-,J e,.-

i

L*

ri

l

LW z 1 8 ~ 1 w,,F,.~

CyberAntiqueMallmuestra en casi todas las páginas el mismo esquema de estilo. Elaborados marcos, barras y botones, seguramente diseñados en Photoshop y, por otro lado bordes y separaciones que cumplen funciones distintas y aparecen como elementos más esquemáticos y funcionales conse- ' - ' ' *' " " guidos con HTML. Sin duda todo bien estudiado, pues las páginas están inundadas de un aire de antiguedad refinada y al tiempo de una frescura proporcionada por la visualización de elementos más cercanos a la Web. a

-

6

,

e

Webs con Photoshop

234 ..

L._

. . .__ 2-.:.; --

-

:> 2.. : ?. - -T.

i .

--.

-'---

.-

0 ,-S

-.

Figura 138. Visores de Microsoft lnternet Explorer respectivamente.

Comprobamos haciendo un seguimiento que sentido tan marcado, tan icóníco tienen en estas páginas los marcos, los botones y barras disefiadas con esos dorados, esas texturas marmóreas, esos botones que parecen piedras preciosas, todo muy artesanal, muy elaborado, antiguo. Por otro lado, nos encontramos o con el sentido gramaticalde las líneas HR que adquieren un carácter exclusivamente de separación. S e ~ a r alos temas. las aalerías. los ilustración inferior derecha artistas.

I --

-

~a'

DISEÑAR BOTONES Y SÍMBOLOS PARA LISTAS En innumerables ocasiones habrá visto pequeñas formas geométricas que sirven para puntualizar los diferentes puntos de una lista, a modo de viñetas. Éstas pueden estar generadas con etiquetas HTML o pueden estar incrustadas como elementos gráficos que en algunas ocasiones pueden ser mapas de imagen acompañando a un vínculo y viceversa. Estas formas suelen ser muy sencillas un simple círculo, un cuadrado o un triángulo e incluso se les puede dar un cierto relieve e iluminación así como producir el efecto de una sombra. Muy cercanos a estos elementos se encuentran los botones que casi siempre suelen ser mapas de imagen y conducen a otra página vinculada. Del mismo modo que las llamadas viñetas

Diseñar marcos, barras y botones gráficas para listas los botones tienen formas sencillas que permiten incluir texto en su interior, que por lo general hace referencia al destino o al contenido de la página a la cual nos trasladan. En estas ocasiones la forma y las dimensiones suelen adecuarse al texto incluido en su interior y al diseño general de la página. En otras ocasiones puede adquirir formas determinadas como una flecha que nos indica el contenido que vamos a ver visualizado en otro documento gráfico cercano. Así comprobamos que los botones dan un mayor impulso a la creación de formas y diseños más sofisticados. Aquí mostraremos cómo producirlos.

Determinar la forma Los botones pueden tener formas diversas e incluso icónicas a modo de símbolos visuales que engloban información implícita. Esto hace que sus formas puedan ser muy irregulares aunque también pueden ser tan simples como un círculo. Para ambos casos, regulares e irregulares, botones o viñetas gráficas disponemos de herramientas que facilitan dibujar la forma. Todas las herramientas y comandos de selección generadores de formas sencillas facilitan la elaboración de formas sencillas de un modo rápido y eficaz aprovechando la posibilidad de especificación del tamaño. Si hemos de dibujar formas desiguales que perfilan objetos o símbolos elaborados disponemos de varias herramientaspara la creación de formas vectoriales que siempre podemos ir modificando y ajustando hasta dar con la forma que deseamos.

-

1. El primer paso consiste en crear un documento nuevo con unas dimensiones cercanas al objeto que hemos de dibujar, aunque con espacio suficiente para que el objeto respire. Siempre estamos a tiempo de cortar las zonas del documento prescindibles. Si alguna de las zonas ha de ser transparente activaremos en Contenido la opción Transparente.

;f,

, ,, , , ? , ,

,,

,,

1

Figura 139. Documento PSD. Hemos creado cuatro nuevos documentos viñeta gráfica, boton, botonl y boton2. En cada uno de ellos disetiaremos un elemento distinto teniendo cada uno unas dimensiones específicas, siendo éstas: 113por 113píxeles, 113por 113píxeles, 198 por 113 píxeles y 142 por 142 píxeles respectivamente. Todos ellos presentan el fondo transparente.

235

236

Webs con Photoshop 2. El siguiente paso consiste en crear un botón o «viñeta» con las herramientas de selección. Resulta muy apropiado cuando se tratan formas muy sencillas como un simple rectángulo o una elipse. En la mayoría de los casos es aconsejable introducir los datos de proporción de la barra, lo más idóneo es activar en la paleta de Opciones de la herramienta seleccionada en Estilo, la opción Proporción restringida o Tamañofijo. Aquí mostramos varios ejemplos.

.I.

1II)II

)i

I I I I I I I I I

+",,o,l,,,,l?,,,t

o-

, , , , l4, , , ,

'

-1nlx[

l,,,,

I

6

Figura 140. Documentos PSD respectivamente.

-

c------------

1

:

2 -

-.- - _ - .

/'

I 1

h

,

..

-

En el documentovilleta gráfica hemos determinado la forma de un circulo mediante la herramienta Elipse En la paleta Opciones de marco se ha selec-

cionado un tamaño fijo de 40 p o r 40 píxeles. En el documento b o t o n l destinado a contener texto en su interior hemos optado por una forma alargada. Para determinarla se ha dado igualmente un valor de tamaño fijo de 60 p o r 60 píxeles a la herramienta Elipse sumando dos círculos iguales. La zona interior ha sido cubierta sumando un rectángulo con el Marco. Nos hemos ayudado de la cuadrícula para ajustar las zonas sumadas con precisión. -lalxl Por su parte la forma de la figura boton ha sido conseguida O , , , I , , , , l?, , , I , , , , utilizando la herramienta Lazo I poligonal. Con ésta hemos dibujado un triángulo y a conti1 nuación hemos restado parte 2 del mismo con el Marco ayudándonos igualmente con la -=-t , cuadrícula. Por último, hemos querido diseñar un flecha de contornos curvilíneos. Para ello hemos empleado la Plumajunto con el resto de herramientas para la creación de trazados. Hemos ido forjando la forma de la flecha hasta conseguir la que deseábamos. Por último se ha convertido e l trazado en selección. En todos los casos hemos procedido a guardar las selecciones creadas. De este modo en cualquier momento podemos recurrir a éstas para utilizar los canales con el fin de producir un efecto en los mismos o bien activarlas para aplicar algún tipo de efecto dentro de la forma o exterior a la misma. ,

Diseñar marcos, barras y botones En el último ejemplo ha podido comprobar que crear una barra con las herramientas de trazado resulta muy adecuado cuando se tratan formas con acabados complejos. Recuerde que una vez dibujado el botón hemos de convertirlo en selección. Para ello pulsamos sobre el icono Convertir trazado en selección o sobre el comando Hacer selección del menú lateral de la paleta Trazados. Recuerde guardar la selección utilizando el comando Guardar selección del menú Selección.

Rellenar y producir efectos en botones y metas gráficas Estos elementos siguen unas pautas de creación en cierto modo muy restringidas, en gran medida por las dimensiones a las que están sometidos, sobre todo en lo referente a las viñetas gráficas. Los botones, en cambio, pueden realizarse siguiendo procesos más diversos y sofisticados, todo ello irá en función de las características de la forma del elemento en sí, sus dimensiones y el resto de componentes que conforman la página haciendo que aparezcan armonizados. Los ejemplos que aparecen en la página 234 son una buena muestra. Vemos como el botón ha sido elaborado exquisitamente, con la misma carga simbólica y visual, de ser algo valioso y bello como el resto de elementos gráficos incorporados. Aunque los valores connotativos pueden ser muy variados, es importante recordar la unificación que hemos de encomendar a todos los elementos de una misma página e incluso con el resto de páginas si es necesario.

nota... La gran parte de estos elementos son de formas irregulares por lo que contienen zonas transparentes que han de ser tratadas para que no aparezcan en color blanco en la Web. Todo lo referente a cómo tratar las zonas para fondos de color sólido o con texturas o cómo reducir los colores de dichos documentos viene extensamente detallado en el capítulo Transparencias en imágenes para la Web. Lo descrito habrá de tenerlo en consideración al elaborar cualquiera de los elementos descritos en este capítulo.

Webs con Photoshop

238

1. Para cubrir la selección de un botón o viñeta gráfica podemos hacer uso de cualquier herramienta de pintura. Mostramos algunos ejemplos representativos de los métodos seguidos para elaborar este tipo de elementos.

;

I ,

I

I . l . l l

1

Cobre Ciorno

-

Espectro Arco ir'¡ transparente

- Nuevo . _] -Clambiar nombre 1 -

Ajustar:

A

r

C-nr

Figura 141. Cuadro de diálogo Modificar deoradado y documentó~~~.

lransparrncia

~

En el documento viñeta gráfica queremos producir un efecto de volumen, para ello recurrimos a la herramienta Degradado. En el cuadro de diálogo introducimos los datos del color de inicio R: 69, V: 96 A: 130 y el color final R: 137, V: 186 A: 244 dando como resultado la imagen que muestra la ilustración de la derecha. Figura 142. I I . 11 1Submenú Modificar, cuadro de diálogo Modificar bordes y docuExpandir... Cancelar Contraer... mento.

1 -

_I

1

En botonZqueremos enriquecer la forma. Con este ? , , , fin hemos creado un marco en forma de flecha uti1 lizando el comando Bordes del submenú Modificar. Una anchura de 6 pixeles para el borde ha "' sido la más óptima para nuestras necesidades. Acto seguido hemos procedido a guardar también esta selección con el comando Guardar selección. Acto 1' seguido hemos cargado la selección original que 1: contiene la forma de la flecha y hemos cubierto su J superficie empleando el Bote de pinturacon el color R: 53, V: 179 A: 191. A continuación hemos cargado la selección del marco y hemos aplicado el color R: 68, V: 146 A: 159 con el Aerógrafo.

- I ~ I X (

,

1

n Al N'.:-------\-

- .-l,,

,

:)

-

Diseñar marcos, barras y botones Figura 143. Documento PSD.

.... ".]U

L) -

I

I I I I

-

, , ,,

C . . . -

f* I 7

-

Pegar Pegar dentro Boirsr

, #'+.

Con el Aerografocon1 seguimos una textura diferente en el marco. 4:

Cgrtar Copiar

pmq

..

.

.

Figura 144. Menú Edición y documentos, paleta Opciones de tampón, cuadro de dialogo Modificar bordes.

CIII+X CCI+C CtrI+V Mayús.+CliI+V

Rellenar.. !S

de tampói 10

ad:

Dpci6n: )~lutivoLalitieado) Purgar A

r

b

Con este botón de dirección queremos igualmente producir un efecto de marco. Aunque a diferencia del anterior en la zona interior incrustamos un fragmento de textura. Esta textura es la misma utilizada en otros elementos de la página. Para aplicarla seleccionamos la textura y pulsamos el comando Definir motivo a continuación cargamos la selección de la forma de la flecha y aplicamos con el Tampón la textura. El paso siguiente ha consistido en cargar la textura del marco ésta ha si con un grosor de 8 píxeles y, con el Bote hemos cubierto dicha superficie con un blanco, obteniendo lo que muestra la ilustración de la derecha.

1

r

.._

. _

239

Webs con Photoshop

240

-

- .-

Figura 145. Documentos PSD, cuadro de diálogo Modificar bordes y Texto.

1

*

.- - - - - - - - - - .

En botonl simplemente hemos aplicado

1 con el Bote el color R : 207, V: 195 A: 177 en la forma diseñada. Este elemento estará incluido junto con el anterior en la misma página Web. El color seleccionado está

lI

'

-- - - - - - - - - - - - - -

Y 5'

II

t]

1

-

en la textura del documento ante7incluido rior. En éste igualmente creamos un mar-

1

co de 8 píírles de grosor y aplicamos con el Bote y el Aerógrafo un blanco. Sólo nos falta incluir el texto, empleamos una

I ~

Aheac Eiiib

-

rita

r

flva

r IMM

rvab

~ ? A M ~ T Z ~ Z S

Mo%lrat.

IJ

F-mlte

R

3 d

C@j

-

O -

Tpm&

Textord cuerpo 20 en color blanco. Guardamos la selección del texto para posteriores aplicaciones una vez ubicado en la posición última tras ajustarlo con la cuadrícula y las reglas.

2:

r& fiada

lnvntir

.

C~II+A CirkrS Mwjs +Cirl*l

Gama de colnca .. ",","rwqMwU'

+""+' ,

-

, ,*, r(-

-2

+

I

1

rI, j;7.

4.-/,.fd-l,

,.;) L-72,; ,'aU '.u-

Diseñar marcos, barras y botones

Consejo.. Trabajar con canales aifa para aplicar un afecto, un color, una textura o modificar ciertas zonas resulta más aconsejable ya que disponernos de ellos en cualquier momento. Por este motivo, siempre que realice un cambio de tamaño o de forma en el botón o cualquier otro elemento recuerde guardar la nueva forma como una nueva selección o canal alfa, puede que lo necesite en alguna ocasión.

2 . Modificando selecciones podemos aplicar en zonas seleccionadas efectos con filtros, de este modo conseguimos una gran variedudde botones y viñetas partiendo de un mismo elemento. Veamos unas cuantas variaciones surgidas del documento Viñeta gráfica.

Cancelar L

(

'

Figura 146. Documentos PSD, cuadro de diálogo Modificar bordes. Los dos ejemplos mostrados muestran cómo aplicando un filtro (izda. (Molinete, dcha. Rizo) en ciertas zonas podemos modificar el aspecto de un elemento dándole mayor diseño y espectacularidad. Es perceptible elefecto que ha producido en el interior de la viñeta gráfica. Para ello simplemente hemos invertido la selección del marco mediante el comando Invertir.

-

.

a

.

-CIx

-

241

Webs con Photoshop

242

3. Para producir efectos texturados podemos recurrir a la aplicación de filtros en las máscaras o selecciones existentes o confeccionar máscaras o selecciones de la zona en la cual queremos producir una textura. Este proceso es igualmente válido para cualquier elemento de la página como puede ser un marco o una barra.

Figura 147. Cuadro de diálogo Cristal y documento PSD.

Upc~onss

Distorsionar

(20

suaviia

F

Ll

Tsxtliia.

mI-00r:

Escala

G

1

r

lnvsrtir textura

i

En la selección determinada mediante la aplicación del comando Bordes mostrada en la figura 146 nos hemos dispuesto a aplicar el filtro Cristal. El resultado es el que aquí se muestra. Para su obtención los valores determinados han sido una distorsión de 20, suavizado 1, aplicado en una escala del 200 % y la textura elegida ha sido lente pequeña.

.... b.

1"

2 1 c 8 1

1 1 1 " 1 1 1 1 ' 1 1 1

0,

jfl2 -

-

ion%

--e-'

!

les

I

Granulado A

Cantidad de luz

n Cantidad de claridad

a

111

figura 148. Cuadro de diálogo Luz difusa y documento PSD.

En la misma zona seleccionada ha sido aplicado el filtro Luz difusa. Los valores introducidos han sido granolado 1, Cantidad de luz 5 y una cantidad de claridad de 11. El resultado es el que muestra la ilustración superior, comprobamos que es completamente distinta al anterior dando un efecto final más sobrio.

Diseñar marcos, barras y botones El filtro Zigzag lo

1

en primer lugar en el marco seleccionado. En el segundocaso se ha invertido la selección aplicando el filtro en el interior de la viñeta gráfica dando a sendas imágenes los mismocvalores. Éstos son cantidad de ondas producidas 10, cantidad de crestas 5 y ondulaciones como estilo. Los resultados son obviamente distintos.

m-

Cantidad

113

-estas

a

Estilo: l~lrededordel centrol]

-

Figura 149. Cuadros de diálogo Zigzag y Encogc respectivamente y documentos PSC Para producir este efecto simplemente hemos aplicado el filtro ~ncogerdando como valor de cantidad -100. Conseguimos un suave efecto que podemos pot ciar posteriormente con otros efectos.

tansela

w + J1"%

J

1

243

Webs c o n Photoshop

244

El filtro Molinete10 hemos aplicado en primer lugar en el marco seleccionado. En la ilustración inferior hemos aplicado el filtro en la zona interior de la viñeta. Mediante el comando Invertirdel menú Selección se ha invertido la . . t.lD se~ecciónLos re- n i sultados son completamente distintos aun siendo el mismo filtro y los mismos parámetros para ambas. Ángulo: -999. =

,

12

1 ,,1

I I 8

-

3 ,

I

m m

II

-

"

Figura 150. Cuadros de diálogo Molinete y Esferizar respectivamente y documentos PSD. En este caso con el filtro Esferizar hemos conseguido transformar la forma exterior, optando por el modo horizontal y un valor de cantidad de -67. Conseguimos una deformación de formas suaves y equilibradas.

I

Cancelar

1

100% J

-

167

-~antidad

a

1

M o d ~ solo homontal

I(

1

Diseñar marcos, barras y botones Figura 151. Cuadros de diálogo Rizo y documentos PSD.

Opciones

C:atitidad Tarriaño:

. 1

El ultimo ejemplo muestra el ....;.[[ 0 documento viñeta gráfica tras aplicar el filtro Rizo. En esta ocasión ha sido en la zona interior, para ello hemos cargado la respectiva selección. Dando una cantidad de 999 y un tamaño pequeño conseguimos este suave efecto sobre la superficie

4. Ahora verifiquemos los resultados que podemos obtener aplicando el filtro Efectos de iluminación en el documento viñeta gráfica de la pBgina 238. Figura 152. A

Cuadro de diálogo Efectos de iluminación y documento PSD.

kmbicnis Newiwa 7 0 P0:ll~n

Aplicando un Gfecto de iluminación en la viñeta gráfica intensÍficamos la sensación de relieve producido con el degradado, aunque como podemos comprobar en la página siguiente es posible igualmente modificar su forma aplicando el filtro en un canal de textura ayudado por un acentuación del relieve.

245

246

Webs con Photoshop

Estas ilustraciones muestran, emm ' pezando de izquierda a derecha y ....i.14 I' -

rl .I

.

m

I,

Figura 153. Documentos PSD.

' de arriba abaio: Canal de textura:

rojoy altura: 100,Canal de textura: boton Transparencia y altura: 100, Canal de textura: canal alfa 5 y altura: 55 y Canal de textura: canal alfa 6 y altura: 55. Tanto en el caso anterior como en estos se han mantenido el resto de valores modificando las propiedades de la luz por el color R: 137, V: 186 y A: 244. Observe como es transfigurada la forma del elemento en cuestión variando el canal. Con lo realizado damos por finalizada la viñeta gráfica.

5 . El elemento flecha denominado boton2 visualizado en la página 239 ha de ser perfeccionado dando un último toque. Acentuaremos el contorno empleando el filtro Hallar bordes y, por último, aplicaremos el filtro Efectos de iluminación para dar un aspecto más sofisticado al elemento. -!SYD

....i. 14 , , , ,

1

--iniXf 1

(4

Figura 154. Submenú Estilizar y documentos PSD.

7

m

,,. "

Y

a

'

-lalx

m '

'

" " " I2" " " " 14" "

AzulGos... Bordes ilurriinados... Difusi6n...

Solarizar Trazar perfil... Vinto...

Activamos la selección del marco guardada con anterioridad y aplicamos el filtro Hallar bordes. De este modo conseguimos acentuar los mismos resaltándolos.

Diseñar marcos, barras y botones Figura 155. Cuadros de diálogo Cargar selección y Efectos de iluminación respectivamente y documentos PSD.

4

rS Hemos sumado la selección del marco a la selección #4. En la obtenida hemos aplicado un efecto de iluminación a modo de techo variando en propiedades de la luz el color a R: 68, V: 146 y A: 159 aplicando en el canal de textura flecha Transparencia, dando como resultado el que muestra la ilustración inferior izquierda. Estas dos ilustraciones dejan patente como pueden variar los resultados cambiando el tipo de luz utilizado. En la imagen de la izquierda se ha empleado una luz direccional, mientras que en la m imagen de la derecha se ha recurrido a un tipo de luz foca1 cambiando en sendos casos la posición del foco. Comprobamos las diferencias entre las tres.

,,,

248

Webs con Photoshop 5. Nos queda por tratar el elemento boton de la página 239 y el elemento botonl d e la página 240. Éstos serán tratados al mismo tiempo ya que pertenecen a la misma página Web. La página es sencilla con detalles puntuales y finos. Por este motivo sjmplemente aplicaremos un efecto de iluminación en sendos botones manteniendo los valores, el tipo de luz y el color de la misma. Figura 156.

y documento PSD. R Aciwar flqativa 17

Máxima

A

n

Ropiedades

.E7

Mate

1 Lwhe

Brillante

A

Malmial

Pilsy

58 Meialico

~ x p o s c i m ~LbO ~ ~

O

Canai de textwa: I ~ a p 1a ~ranspnencid

m

9:

Re'ri~l~al~~

l

R Ab~ndaiiciade blanco

En los dos elementos I en sus respectivas capas hemos aplicado el filtro con los valores especificados ( n la ilustración. Manteniendo el tipo de luz como focal y, en cada caso el canal de ct Hura ha correspondido a la transparencia de la capa a la cual pertenecía cada elemf ito, es decir, en el texto hemos aplicado el canal de textura correspondiente a la c: Da que incluía el texto. -.--:.O, Cl

-

,,

, , , I2

a

1 ,

l4

,,l

,

18,

~ ~ ~ ~ ~ ~ 1 4 , , , , , , , , 1 ~ , , , i , , , , l ? , , , ~ , , , , l

ri J

,

2 -

. , ,

- - .. .

l

*

..

..

. -.

/"

!

Observamos que los dos botones comparten una homogeneización que viene dada por las cualidades de color que ambos comparten. Se han mantenido dando los mismos efectos, conservando los mismos valores en cada cuadro de diálogo. Todo ello quedará patente cuando visualicemos la página en su conjunto.

Diseñar marcos, barras y botones

Figura 157. Documentos PSD.

Aquí mostramos unas variaciones. En la imagen central y derecha hemos aplicado el filtro Hallar bordes y seguidamente Efectos de iluminación, mientras que en la imagen de la izquierda hemos variado el canal de textura con respecto a la obtenida en la página anterior. En todos los casos se han mantenido el resto de valores.

6. Por último añadimos una sombra a los botones y viñetas gráfias. Para realizar este proceso duplicamos la capa -utilice

A

el sistema que más le satisfaga- o, bien creamos una capa nueva y la colocamos por debajo de ésta en la paleta Capas. Acto seguido cargamos la selección a través del comando Cargar selección del menú Selección. Una vez delimitada la zona la cubrimos de negro con la herramienta Cubo de pintura, a continuación, desactivamos la selección y aplicamos el filtro Desenfoque gaussiano introduciendo las coordenadas más acordes con las características del elemento y del proyecto en general. Sitúela en la ubicación deseada. Figura 158. Documentos PSD. En las dos sombras hemos aplicado un radio de desenfoque de 3,7 píxeles. En los botones que aparecen en la página siguiente hemos introducido el mismo valor aunque aplicado repetidas veces. A lo largo del libro todos los ejemplos han mostrado sombras creadas con negro. Lógicamente una sombra no tienen por qué ser siempre negra, pruebe con sombras de otros colores.

249

250

Webs con Photoshop

Documentos PSD respectivamente. Las sombras siempre dan un aire de realidad, de corporeidad a los objetos. Todos sabemos que cualquier objeto está intrínsecamente ligado a su propia sombra, por este motivo siempre resulta interesante añadir sombras a los elementos de una página Web. No obstante, también puede resultar inquietantemente llamativo un objeto que no posea sombra y, por ejemplo el resto de los elementos que sí la presenten.

...

Consejo

Aunque aquí no se ha mostrado podemos usar cualquier comando de ajuste de color, tono, etc. para aplicar efectos interesantes. Del mismo modo que podemos ir añadiendo nuevas selecciones o canales alfa para producir sutiles efectos de iluminación y relieve dando lugar a efectos más realistas y efectistas si es el caso. Le animo a realizar otras variaciones de producción de elementos para la página aprovechando otras herramientas aquí no mencionadas o utilizadas con fines especificas.

En uno de los dossrers rnclurdos en color mostramos unos cuantos ejemplos ilustrativos de elementos en los que se han aplicado diferentes tipos de filtros y texturas, aunque, en especial, mostramos distintos elementos conseguidos utilizando los comandos del submenú Ajustar, ya que en escala de grises este tipo de variaciones casi no son perceptibles.

Diseñar marcos, barras y botones La etiqueta UL para crear

listas desordenadas Generalmente las listas son configuradas mediante una puntualización numerada de cada uno de los apartados señalados. Aunque también encontramos listas no numeradas que en HTML se las denomina listas desordenadas. A diferencia de las listas ordenadas en este tipo cada elemento de la lista viene precedido por un punto gráfico o un triángulo semejantes, según sea el navegador. Pero igualmente podemos enriquecer enormemente nuestra página incluyendo imágenes que sustituyan las viñetas por viñetas gráficas consiguiendo que nuestra página adquiera un carácter más personal al tiempo que gana en diseño. Pero vayamos por partes. La etiqueta UL nos indica que vamos a trabajar con listas desordenadas. Cada elemento de la lista siempre va precedido por la etiqueta LI, el cual hace que aparezca un círculo, cuadrado o triángulo, como ya digimos, delante del texto o vínculo. Otra etiqueta posible de una lista es L H la cual es utilizada para incorporar cabecera en un listado. Siempre que deseemos colocar un titulo a una lista habremos de escribir antes de la etiquetacUL>.

-

a l g o sobre html.

I

..

Una lista desordenada o también lista con viñetas con cabecera seguiría la siguiente estructura:

Cabecera de la lista É s t esería el primer elemento de la lista Este otro el segundo elemento Y así sucesivamente

I

Si sustituimos la etiqueta por COL> nos aparecerá un número que sustituye el punto cuadrado o triángulo.

2n

Webs c o n Photoshop

m ..

2.

.

o,

."

,A#

8-

>

.-.,?

i1E:'At

7-

..Y..

.

".

.

-

-

w

*

"J

.

Figura 160. Visor de Microsoft 7 lnternet Explorer.

.

-+u-,--

.

F -.-.

.

'C?A

.

- A

--

qUIffiA

-...,*M.. ,.,, ,. .- .,.e, .9

rr i

T

,.

,.,mi

,.l.i,

l, .

a

...

A

Aquí tenemos un claro ejemplo de lo explicado en la página anterior. Como vemos en una lista desordenada o lista por viñetas aparece un elemento geométrico, en este caso un círculo, mientras que en las listas ordenadas aparece cada elemento precedido por el número correspondiente En los dos casos hemos incluido cabecera.

También podemos encontrarnos con listas con viñetas anidadas. Las listas anidadas son listas que contienen a su vez sublistas dentro de algún punto de la lista. En estos casos las diferencias visuales básicas que encontramos es un cierto deslizamiento de las sublistas y un cambio de forma de la viñeta que la acompaña. Para incluir una lista hemos de especificarlo mediante la etiqueta MENU, la cual es interpretada como otro elemento de apertura.

a l g o sobre html.

i .

..

U n a lista desordenada anidada y con cabecera sigue la siguiente sintaxis:

CABECERA

DE U N A LISTA DESORDENADA Primer elemento de la lista Segundo elemento de la lista Primer elemento del segundo elemento de la lista Término Definición del término Término Definición del término En ocasiones este tipo es combinado con los otros tipos de listas, en especial cuando se trata de listas desordenadas anidadas.

Las listas desordenadas pueden ir acompañadas de una serie de atributos posibles. Entre ellos el que debemos destacar en este apartado es TYPE, el cual facilita el cambio o selección del tipo de viñeta que deseemos visualizar. Si se trata de listas ordenadas (etiqueta OL) podemos sustituir el tipo de numeración. Dentro de las posibilidades existentes las más importantes son: DISC (disco),

Webs con Photoshop CIRCLE (círculo) y SQUARE (cuadrado), debiéndolo especificar del siguiente modo: , por ejemplo. Cuando se trata de listas ordenadas podemos usar igualmente el atributo VALUE con el que podemos indicar el valor de índice dentro d e la lista escribiéndolo del siguiente modo: cLI VALUE=30>. Este viene muy bien cuando tenemos que indicar el número siguiente de una lista separada por algún otro elemento intermedio, por ejemplo una imagen. Otro atributo a destacar es START el cual determina el valor de inicio para un elemento incluido en la lista.

a l g o sobre html.

..

La siguiente sintaxis muestra de que manera actúan los atributos TYPE

y VALUE en las listas (figura 162): CABECERA DE UNA LISTA DESORDENADA Primer elemento de la lista Segundo elemento de la lista Primer elemento del segundo elemento de la lista Tercer elemento de la lista

< LH>CABECERA DE UNA LISTA ORDENADA Primer elemento de la lista Segundo elemento de la lista Primer elemento del segundo elemento de la lista COL> Tercer elemento de la lista

Diseñar marcos, barras y botones Figura 162. Visor de Microsoft lnternet Explorer. Comprobamos mediante la ilustración y la muestra de la sintaxis que VALUE y TYPE cumplen funciones similares. En listas ordenadas también es posible introducir atributos de viñetas, en esta ocasión ha sido un cuadrado. Para que aparezca la línea debajo de la imagen hemos añadido en ALIGN el valor BASELINE.

La etiqueta IMG para añadir viñetas g~áfieas en las listas Para incluir viñetas personalizadas en un documento HTML tenemos que recurrir al uso de la etiqueta IMG e incluir la viñeta como un elemento gráfico más de la página. Este tipo sustituye la viñetas de las listas desordenadas o viñetas propias de algunos editores de HTML. Además en estos casos debemos tener presente que ya no trabajamos con los atributos y etiquetas propios de una lista, si no con los atributos de párrafos, tablas o allí donde quiera introducirlos. Lógicamente, trabajando con la etiqueta IMG debemos tener presente todas los atributos posibles con los que podemos movemos, es decir, atributos de alineación como son ALIGN o VALIGN para definir la posición en horizontal y vertical respectivamente, WIDTH y HEIGHT para especificar numéricamente la anchura y altura de la imagen o el tamaño en tanto por ciento, según se desee. También podemos determinar cuanto espacio, cuantos píxeles deseamos dejar entre la imagen y el texto mediante los atributos HSPACE y VSPACE que definen el espacio horizontal y el espacio vertical respectivamente. Por último, entre los atributos que nos interesan en este apartado encontramos SCR el cual nos define el URL de la imagen que hemos de insertar. Encontramos que para definir la posición en horizontal utilizaremos el atnbuto ALIGN de los siguientes modos: izquierda ALIGN=LEFT; centro

Webs con Photoshop ALIGN=CENTER y derecha ALIGN=RIGHT. Para determinar la posición en vertical emplearemos el atributo VALIGN de los siguientes modos: superior VALIGN=TOP; centro ALIGN=MIDDLE y inferior ALIGN=BOTTOM. Por otro lado, podemos especificar el tamaño de la imagen con su tamaño en píxeles en ancho y alto, incluso reduciendo sus valores a modo del ejemplo: WIDTH= 66 y HEGHT=40 o en tanto por ciento escribiéndose simplemente:

La siguiente sintaxis muestra de que manera podemos crear una lista con párrafos, mediante la etiqueta P (primera cabecera de figura 163 superior):

CABECERA DE UNA LISTACON VIÑETAS GRÁFICAS Primer elemento de la lista

I

Segundo elemento de la lista Primer elemento del segundo elemento de la lista Tercer elemento de la lista

Diseñar marcos, barras y botones

Las etiquetas nos sirve para crear sublistas, aunque su función habitual consiste en forzar un espacio en vertical del texto que se encuentra intercalado entre ambos. Observe que las etiquetas son utilizadas del mismo modo en el ejemplo de la lista superior, de este modo conseguimos desplazar en conjunto. Hemos extrapolado una etiqueta propia de la creación de listas en HTML.

Figura 163. Visores de Microsoft lnternet Explorer.

e,-t EA*

Iw

. ,-.

.l,"

a

.

.

2 4 -.-F

.j

ii

+ - 4 r.-

II

--.

P*d.

,

.: -

r*.

N

.l!,P.rj

iv.rmm*

*i

r.

ni,.

'"'""*"'-

+

Observe que la lista inferior no aparea hmrr + ~ mir:* iir.L cm.- -c UM. ce desplazada, eso se debe a que no .3-m,,-o,+hL* se han incluido las etiquetas en la sintaxis. Por lo demás, pre- .,V. ,,,,,, +, senta el mismo esquema que la lista ircA-Mnhl.a = hrt!-M.~..-A..=.-,+~L-. de la parte superior que aparece definida en la página anterior. La imagen myr;n=+--u*LL?. ha sido reducida hasta 15por 15 para encajarla con el cuerpo de la letra. En , . esta ocasión no hemos puesto énfasis en otros elementos y atributos referentes al texto por no creerlo conveniente. En la ilustración inferior se muestra otro ejemplo de listas en tablas. En esta tabla de ..>y n r >. >.:-.". up. ., r_._ .,,.,, dos celdas constituida por una :A, ,,?, :, . . ,A .,: m-,-. columna y dos filas es un claro ejemplo de cómo crear listas en m: una tabla. Observe como la lista • ':u.,,~ I mTnin-iiXIid. que vemos en la celda superior aparece más espaciada, esto se .)mri-**Li1i debe a que cuando usamos la ?hYd,'k*rn* & li3, F:t.~.*EmiidL15. etiqueta de párrafo P las separaciones son mayores que cuando utilizamos la etiqueta de retorno de carro BR. Elija la opción que más le satisfaga o que mejor se ,l.-a" < adapte a sus necesidades.

Y

,:.

p.+br,+!.

s.

F

D

~

*

~

~

~

.

-

A

..*K

4

258

Webs con Photoshop

...

a l g o sobre html

La figura 163 inferior muestra la siguiente sintaxis:

Primer elemento de la fila Segundo elemento de la fila Tercer elemento de la fila Primer elemento de la fila Segundo elemento de la fila Tercer elemento de la fila

Diseñar marcos, barras y botones

ota... La etiqueta es empleada generalmente para hacer un salto de carro, mientras que la etiqueta indica el comienzo de un párrafo.

nota... Si en una tabla ha de incorporar sublistas puede trabajar igualmente con las etiquetas c/BLOCKQUOTE> y como mostrábamos en el ejemplo anterior (páginas 256-257).

La etiqueta IMG para agregar botones y la etiqueta A para que sean vínculos La ubicación de un botón en una página puede extenderse a cualquier sitio, así que podemos encontrarlo en cualquier parte dentro de la sintaxis de un documento HTML. Generalmente los botones y en raras ocasiones las viñetas gráficas son vínculos internos que nos trasladan a otras páginas relacionadas o mapas de imagen. Estos últimos dan una mayor flexibilidad que los simples vínculos de imagen, ya que pesmiten una mayor organización de los vínculos aunque es más adecuado para gráficos más elaborados. En este apartado nos detendremos exclusivamente en mostrar cómo incorporar un botón como vínculo. Las imágenes como mapas serán tratadas con mayor profundidad en el capítulo 9. De por sí, los vínculos en forma de botón tienen la característica de ser de tamaño reducido, dado el tiempo de espera que requiere una imagen para que sea cargada es lo más recomendable y, por lo general, muestran una relación con la página a la cual nos traslada, ya sea porque adquiere la morfología de un símbolo

259

Webs con Photoshop concreto, de un logotipo o porque va acompañado de un texto que lo relaciona o el gráfico trae incorporado una palabra o frase que despeja de toda duda sobre donde nos dirigimos.

4

La etiquetaIMG consta de otros atributos, además de los mencionados en el apartado La etiqueta IMG para añadir viñetas gráficas en las listas, como son ISMAP el cual identifica el gráfico como un mapa de imagen activo, sobre éste podemos pulsar para que se ejecuten las acciones definidas. Debemos especificarlos como muestra el ejemplo: . También contamos con el atributo ALT de gran utilidad y que siempre es importante incluir pues facilita la visualización del texto sustitutivo de la imagen en browsers que no pueden visualizar gráficos. Si por ejemplo se trata de una imagen que representa un botón que sirve de enlace con otra página podemos incluir el siguiente texto en el atributo . Por otro lado y, aunque no lo mencionamos en la creación de marcos, en las imágenes podemos incluir marcos con HTML mediante el atributo BORDER, según el valor determinado será el grosor del borde: . Resulta ser un elemento muy útil cuando se trata de mapas de imagen. Cuando trabajamos con ISMAP, éste siempre nos aparece enmarcado a modo de signo que lo identifica como tal. Si trabajamos con gran cantidad de elementos gráficos resulta interesante emplear el atributo LOWSCR al tiempo que SCR. De este modo, siempre aparece primero una imagen de baja resolución que es a la que hace referencia LOWSCR y, a continuación, la imagen de alta resolución que es a la que hace referencia SCR. Al igual que éste último debemos indicar el URL de la imagen del mismo modo que el siguiente ejemplo: . Como ya se mencionó, generalmente los botones son vínculos. Éstos últimos pueden encontrarse a su vez en forma de texto, sin embargo aquí trataremos exclusivamente una imagen tratada como vínculo. En realidad la incorporación de botones en las páginas está intrínsecamente relacionado con la versatilidad que ofrece HTML, ya que mediante las anclas de hipertexto podemos unificar diferentes documentos HTML bajo una misma estructura común compartida, es decir, podemos articular distintas páginas Web vinculándolas mediante la etiqueta A haciendo que aparezcan como un sólo corpus. Aunque el elemento al cual nos traslade puede ser de los más diverso, por ejemplo una animación, un vídeo, un servidor o como ya hemos indicado otro documento. En definitiva, para que una imagen aparezca especificada como un vínculo y así sea entendida debe estar

Diseñar marcos, barras y botones

261

incrustada entre las etiquetas y . Inmediatamente después de la etiqueta A hemos de introducir la dirección del documento al que se hace referencia, para ello es necesario el atributo HREF donde debemos especificar el URL del documento al que accedemos al pulsar sobre el elemento gráfico. La sintaxis aparece como muestra el ejemplo: . La dirección de destino puede ser de lo más variada, puede remitirse a la ampliación de una fotografía, en tal caso la sintaxis presenta la siguiente estructura: . Si por ejemplo está en un servidor, hemos de especificar el tipo de servidor y las referencias parciales, es decir, indicar los directorios, los diferentes niveles en los que se encuentre englosado el documento en cuestión, por ejemplo: .

...

a l g o sobre html

I

Un vínculo en forma de texto presenta la siguiente sintaxis: < A HREF=URL> Aquí debemos escribir el texto que aparecerá como vínculo, el cual es el ancla Un vínculo en forma de imagen presenta la siguiente sintaxis:

Figura 164. Visor de Microsoít lnternet Explorer.

i

,>

Lrr

i,::.

[A,.

..I...*

Y-

,.

. . . +

,.-m

3

- .-.-

_1

. l r + , 7 M-;

;i_.ii,

c.

11 i_.r

. .. pJ;".'.,'-, . -.."+, ,

.?

Cuando acercamos el cursor a una imagen que es a su vez un vínculo, éste siempre nos muestra el nombre del mismo. En según que tipo de diseños resulta interesante remarcar que se trata de un vínculo, podríamos decir que es casi necesario cuando está incorporado en un texto a diferencia de si se trata de un botón independiente.

j

\':,

-;

.,

9 <

4

'J +-.

o

-.

>f .? .,.. - -.

m L -

'.. -

Webs con Photoshop

262

...

n l g o sobre html

I

La figura 164 presenta la siguiente sintaxis: < TITLE >imagen vinculo

Pulse sobre el vínculo < l M G SCR= boton2.gif ALT=botón W I D T H = 2 0 HEIGHT=2O ALIGN=MIDDLE BORDER=2> para trasladarnos a otrasáreas del sitio

3

A--

Observe que alrededor de la imagen aparece un marco. Por ser un elemento tan pequeño hemos querido resaltarlo. para ello hemos incluido el atributo BORDER=2 dando un grosor a éste de 2 pixeles. Aparece por defecto en azul.

L.*

Y

-

8.

-

c.,

h / ; :~ '?7&f ?

TP-A'flrl

-

E3

Figura 165. Visor de Microsoít lnternet Explorer.

*."

'

í

Vi

1.

t

r7##VU'

I

1

-

J a*-

En este ejemplo mostramos dos botones que son vínculos gráficos sobre los cuales hay que pulsar. Ambos casos no presentan un marco pues no es necesario pulsar para trasladarnos a la información que nos interesa y vienen explicitadas por las palabras incluidas en cada uno de los elementos gráficos.

Diseñar marcos, barras y botones

...

a l g o sobre html

La figura 165 presenta la siguiente sintaxis:

< HTML> < TITLE> imagen vinculo IMG SCR=marco.jpg WIDTH =425 HEIGHT= 142 ALIGN =CENTER VSPACE=20 HSPACE= 1 70> < TR>

Compruebe el valor de los atributos incluidos en IMG y HREF.

263

264

Webs con Photoshop

a l g o sobre html.

..

La figura 166 presenta lo siguiente sintaxis:

I

cHTML> < TITLE > imagen vinculo cIHEAD> c BODY BGCOLOR=#CFC3B 1 > < TR> cITR> c TR> < TD ALIGN=CENTER> c / T D > c/TR> < l M G SCR=boton 1 .jpeg ALT=listas WIDTH= 135 HEIGHT=54 BORDER=O> < l M G SCR=boton3.jpeg ALT=complementos WIDTH=268 HEIGHT=54 BORDER=O>

Disefiar marcos, barras y botones Figura 166. Visor de Microsoft lnternet Explorer.

j,j+41p t,l.l$ F , r , l ~ , $V,UI

i, I ~ I - ~ + , r .W , , .d

265

j

r n ~ o i l r snm n ~ WOIMII>PS '

E,

(j[#f-- T ln ~:t.~

irffa-l 3-r' fi

Los botones aparecen insertados como si se tratase de una barra de herramientas, manteniendo una cierta distancia entre ellos para que el diseño no se presentase en exceso monolítico. La página principal sirve exclusivamente como carta de presentación de la diseñadora, desde ésta nos trasladamos a las secciones que sean de nues- ,tro interés

ttr

-irr**y*n

1

L...4

,

-

Consejo..

+

Si ha de incluir un gran numero de botones resulta interesante componerlos de tal manera que aparezcan como una barra o caja de herramientas. Para ello deberá tener en consideración por lo menos la altura de los botones con el fin de que todos ellos coincidan. Aunque si presentan unas dimensiones de altura y anchura exactas podemos reducir la proporción de todos a la vez si lo creemos necesario.

Figura 167. Visor de Microsoft lnternet Explorer.

.ui

L.,

2.

.

I

í-".

u~

.',

4

&..

,.*

,

=M

IB

L..&

2-

2; re.

.,:.

a;

r

r

wsx--J

r

En esta página diseñada por marcos, ~ - l u a i i - ~ - - i los botones aparecen en la división de ,,i~llJ la izquierda mientras que la imagen central aparece en la división de la derecha. Este tipo de diseños en vertical, resulta interesante cuando todos los botones (los vínculos gráficos) son del mismo tamaño o con el mismo ancho en contraposición al ejemplo superior. ,

,

-

f'",

VI[>wn-wnnr e

,u, 'rv,*ñi

,, . , ::?i.TP

~.~M+VPI

-~ --

-..

F

-

-

266

Webs con Photoshop

a l g o sobre k m l .

..

La figura 167 presenta la siguiente sintaxis: imagen vinculo en documento por marcos CFRAME SCR=moda I.htm NAME=moda 1 >

Donde el documento moda 1 presenta la siguiente sintaxis:

< HTML> < TITLE > imagen vinculo



Diseñar marcos, barras y botones

...

a l g o sobre html Y el documento moda2:

imagen vinculo

En el documento principal se ha utilizado el atributo NAME el cual puede estar igualmente vinculado a la etiqueta A. Es el ancla desde el objeto, es decir, si modal.htm es el archivo que contiene el ancla, moda1 es el ancla NAME. En la mayoría de los casos puede omitirse pues su valor viene implícito. Otro atributo relacionado con la etiqueta A es TlTLE que incluye

267

268

Webs con Photoshop

PROYECT A lo largo de este extenso tema hemos ido mostrando como se diseñaban marcos, barras y botones; entre los numerosos ejemplos mostrados se han intercalado partes sustanciales de las páginas que estamos elaborando. Con el fin de redondear en cierto modo lo aquí explicado, nos detendremos en enseñar cómo hemos creado los botones que aparecen en las últimas ilustraciones. 1. De la barra diseñada que aparece en la página 229 hemos procedido a duplicar el documento mediante el comando Duplicar. A continuación, hemos reducido el tamaño del documento en sentido horizontal para convertirlo en un botón, para ello se ha pulsado el comando Tamaño de imagen. Este proceso ha sido repetido cuantas veces ha sido necesario.

Modo -

I

,

L

l

l

4

l1

Tamaño da imagen... Tamaño da lienzo...

Rot.ar lierizo

'pulgada

b

Histograma...

:

Mantener propación

A

IJ Yolver a mwtrar 13 imagen-

F

El tamaño de los distintos documentos duplicados se remite al texto que hemos de incluir. Aquí aparece el más pequeño que tiene una an1 I chura de 142 píxeles y una altura de 57 píxeles. El resto tiene una anchura de 268 píxeles y altura de 57 píxeles y anchura de 115 píxeles y altura de 57píxeles, tal como aparecen en esta página y en la siguiente. Figura 168. Menú Imagen, cuadro de diálogo Tamaño de imagen, documento y documento PSD.

Diseñar marcos, barras y botones

269

Figura 169. Documentos PSD. Antes, sin embargo, hemos realizado unas pruebas para comprobar cdmo queda el botón con varios tamaños de texto, que resultasen legibles y al mismo ño tiempo encajasen. ~ l ~ t a m a definitivo se ha basado en relacionarlo en una misma altura. es decir, 57píxeles relativizando el ancho de éstos.

2. El paso siguiente ha consistido en introducir el texto en otra capa en los respectivos documentos. Antes se ha elegido el color frontal deseado. Por último en el cuadro de diálogo Texto hemos determinado la fuente, el tamaño y el estilo. Para finalizar se ha aplicado en los documentos el filtro Relieve.

Mostrar

P Fuente

Figura 170. Cuadros de diálogo Texto y Relieve respectivamente y documento PSD.

En todos los documentos se ha elegido como Fuente: Dextor OutD, Tamafio:30 puntos, Estilo: Negrita. Por otro lado, en el cuadro de diálogo del filtro Relieve se ha determinado los siguientes valores: Ángulo: 43 grados, Altura: 7 píxeles y Cantidad: 140 %. Los resultados son los que se presentan.

l

Webs con Photoshop

270

m

.

.

1 .

i 1i1

1

' D

.

11'

,1

'

. m .

14

16

$

1

~

IE:

1

-!?=a!-.L-

4

Figura 171. Documentos PSD.

I

1

De este modo comprobamos aue una barra diseñada oode-i 1 k o s transformarla en botones y complementarla en una misma página. De todos los documentos se ha guardado una copia en formato JPEG mediante el comando Guardar una copia.

UNOS CUANTOS EJEMPLOS Estas dos ilustraciones muestran cómo y de qué manera son empleadas las viñetas gráficas o bullets y los botones para confeccionar una página Web.

*,*

-

--- . . .>-

c,+

-.

,. '* : * * -'-- 2 -7 . . . . . . ..."*. a

.

v.

.:

liii--

7..

Ir...

Cduniverse presenta un uso de botones y viñetas gráficas bien distinto a la ilustración inferior. Éste utiliza las viñeta~gráficas junto

C D UNIVERSE ."n.,,.

7"#*OSY~"%#'

Figura 172. Visores de Microsofi lnternet Explorer.

.",C'<

casos son a su vez barra de herramientas. Los ,...

/ "..-,, I"

1 1 ,

.,.,,h.,..

T.

N.

(7.1.

.

-

rpl

.-

:"qlun ~

q . ---. 3.191

L.

-,

m , ,

'

1

u--. --..a.

.

,

,

.,$

... .

II..

$..* *.nGii

-

,,

.

. texto grafico WIDHT= 100% SIZE= 15 ALIGN=CENTER CLEAR=LEFT> < P > < H I > < B > Somos el número uno en el mundo en viajes exóticos < / H I >

303

.A.

Webs con Photoshop

WIDHT=100% SIZE=IS ALIGN=CENTER CLEAR=LEFT> < 8 > Cornpruébelo navegando por las páginas de nuestra Web donde encontrará el lugar que tanto ha soñado

EL TEXTO, ALGUNAS ETIQUETAS Y ATRIBUTOS

4

En los ejemplos mostrados el texto gráfico aparece coordinado con el resto de objetos que configuran una página, entre ellos cadenas de texto. La morfología que adquiere éste cuando se trata desde htmi es bien distinta a cuando lo hacemos como un documento gráfico. Normalmente, es empleado para introducir gran cantidad de información, la cual sería casi imposible colocarla si debiésemos hacerlo mediante imágenes, de este modo amortizarnos el tiempo de ejecución en el browser. Diseñar Webs con un alto contenido de eficacia, armonía visual y que incluya todo lo necesario corre a cargo de una adecuada mezcla de los componentes. Si existen un gran número de páginas vinculadas lo más razonable es tratarlas con cadenas de texto que sean al mismo tiempo vínculos. Pueden llegar a ser muy vistosos si en su confección tenemos en cuenta el conjunto, de tal modo que no resulte aburrida y aparezca todo con claridad y, por otro lado, las imágenes colocadas sirvan en éste caso como contrapunto. Aunque las etiquetas y atributos relacionados son muy extensos y en este libro no tratamos dichos elementos, hacemos este breve inciso, pues lo creemos necesario, ya que no podemos obviar su importancia, no obstante, nos centraremos en la relación existente entre éstos y las imágenes cuando han de ser colocados paralelamente o cuando se tratan d e vínculos, también hacemos

Efectos en el texto una incursión por los estilos físicos y lógicos más importantes y otras opciones de interés para el lector. Su relación con listas será obviado por haber sido tratado en varios apartados en el capítulo 7 en lo que de relación con imágenes tenía. Determinar el tipo de letra y el estilo es lo que requiere de mayor importancia, pues ha de estar en consonancia, cuanto sea posible, con la tipografía elegida en el texto gráfico, si que existe. La etiqueta FONT hace referencia a ciertas características de la letra, cuando va acompañado del atributo FACE nos permite cambiar el tipo de letra que aparece por defecto presentando la siguiente sintaxis: dFONT>. Si lo que pretendemos es cambiar el tamaño que aparece por defecto se ha de añadir el atributo SIZE dando un valor numérico con signo positivo (o sin signo) o negativo según se quiera aumentar o disminuir respectivamente, su sintaxis es: d FONT>. Para cambiar el color del texto hemos de incluir el atributo COLOR especificándolo con números hexadecimales a modo del siguiente ejemplo: dFONT>. Otras etiquetas de relevancia son B la cual nos hace que la letra aparezca en negrita, su sintaxis es: a>. Si lo que pretendemos es que aparezca en cursiva hemos de incluir la etiqueta 1, su sintaxis es: . Para que la letra aparezca subrayada hemos de incorporar la etiqueta U, su sintaxis es: . Para colocar subíndice y supenndice se han de incluir las etiquetas SUB y SUP, respectivamente, sus sintaxis son: y dSUP>.

...

...

...

...

...

...

...

...

* Otro aspecto importante es conocer los atributos relativos a los bloques de texto, los más comunes son los párrafos y las cabeceras. Los primeros vienen representados por P. Ésta nos define un párrafo normal, su sintaxis es: d P> o , ya que por defecto cuando iniciamos un nuevo párrafo el anterior se da por finalizado. Las cabeceras nos facilitan el desarrollo en textos estratificados pues nos marcan los distintos niveles de acuerdo con el tamaño de la letra siendo H1 la cabecera mayor y reduciendo el tamaño a medida que aumentamos el número H1, H2, H3...Hn, su sintaxis es: d 1 > . Las cabeceras son muy útiles para introducir títulos y subtítulos o textos vistosos rápidamente. En sendos atributos se puede manipular la posición del texto mediante la etiqueta ALIGN (desde HTML 3.0), así para colocarlo a la derecha especificaremos O > o d 2 > , para situarlo a la izquierda será o d 2 > , si hemos de ubicarlos en el centro o y si queremos justificar el texto en un párrafo . . . O , esta última opción no es posible en cabeceras.

...

...

...

...

...

...

...

...

305

Webs con Photoshop Otro elemento a considerar es BR esencial para provocar saltos de línea. De vital importancia cuando se trata de textos de cuerpo mayor colocados con cierto sentido de diseño. Lo especificaremos del siguiente modo: &R>. Otro elemento importante para colocar los objetos en la página con cierto estilo es el atributo CLEAR, ya que facilita determinar en qué posición estará colocada la línea con respecto a otro elemento de la página, éste puede ser una fotografía, por ejemplo. Si especificamos: &R> indica que la siguiente línea comenzará tan pronto como el margen inferior derecho esté libre, &R> indica que la siguiente línea comenzará tan pronto como el margen inferior izquierdo esté libre y ...&R> indica que la siguiente línea comenzará tan pronto como ambos márgenes inferiores estén libres. Realmente es un elemento importante.

...

...

...

Cuando trabajamos con párrafos además del texto se pueden incluir otros objetos que en ocasiones pueden ser elementos IMG. Especificar la posición del texto con relación a la imagen dependerá de la inclinación y el tipo de diseño de página deseado. Lo que si es cierto es que para determinar la ubicación hemos de especificarlo mediante el atributo ALIGN de la etiqueta IMG, es decir, en la etiqueta P no, aunque así debiera parecer. La alineación del texto con respecto a un documento gráfico es muy variada, el tamaño de ambos puede diferir en gran medida, lo que da pie a la existencia de opciones diversas, aunque, como en el resto de opciones dependerá del browser y la versión HTML, pero pasemos a enumerarlas: TOP alinea la línea base del texto en la parte superior de la imagen, MIDDLE alinea la línea base del texto en la parte central de la imagen, BOTTOM o BASELINE alinean la línea base del texto en la parte inferior de la imagen, LEFT y RIGHT alinean la totalidad del texto a la izquierda o a la derecha de la imagen respectivamente si también hemos especificado en la alineación de la etiqueta P el mismo valor. Para controlar la posición en vertical puede utilizar:TEXTTOP para alinear el texto en la parte superior de la imagen, ABSMIDDLE para alinear el texto e n la parte central de la imagen. ABSBOTTOM alinea el texto en la parte inferior de la imagen. Si hemos de centrar una cadena de texto extensa, una fotografía, etc. Podemos emplear la etiqueta CENTER, su sintaxis es: . Puede resultar una herramienta de gran utilidad cuando deseamos centrar todos o gran parte de los elementos de una página ya que permite insertar tantos elementos como deseemos entre el elemento de inicio y el que da fin a este efecto. De este modo podemos centrar una imagen, un texto y una tabla colocándolas entre sendas etiquetas.

...

Efectos en el texto Figura 205. Visor de Microsofi lnternet Explorer.

. 3 3 a Q A A V aír'sii3 ,

W,-FMAL

m -E17

C A MB I O

8

307 m

DF TAMAÑO

H.vNX

' A ? FM"L W"LLA2?l<

Muestra un ejemplo visual de algunos zxrxwsb(blcreddm de las más importantes etiquetas de - , ; N ~ . n h ~ , w m estilo y de tipos de letra que permiten ~ . ~ : ~ - ~ v ~ . ~ ~ : . ~ c ' m > - ' * . ~ l metamorfosear el texto en la página. ~,:V,MA:.LFTRAMASOWWDE Las que aparecen por debajo de la Ií- mm ! : ~ Z G W L : ~ ~ U ~ T - ~ ~ ~ nea están tra~adoscon otras etiquetas, ,>,.,pU*l.I~dr,,7,,r" ..&Sj: -:, "r;p .. no detalladas que enfatizan los efectos , ,T A ,-,,. ,,,,,,:,. ,, producidos con las etiquetas superio- m ~ ~ ~ ~ ~ 3 ~ ~ m . 4 ~ - . 4 ~ ~ E ~ ~ . 4 ~ ~ : ~ ? ~ A ~ - . c ~ E ~ : z : ~ l ~ - ~ ,I>.w !--;.t?141i::?.lTA,t':::i:t I . ~ ~ v A PTVT.~ ~~w.F~ res. En la página siguiente se explican rm.:~ cada una de las etiquetas y el fin que tienen en el texto, aunque no todos los browsers admiten todas las aquí detalladas.

I

...

a l g o sobre html

I

La figura superior muestra la siguiente sintaxis: tipos de letra y estilos TEXTO NORMAL POR DEFECTO SIN ETIQUETAS TEXTO NORMAL CAMBIO DE FUENTE ARIAL TEXTO NORMAL< FONT SIZE= +2 > CAMBIO DE TAMAÑO TEXTO NORMAL< FONT COLOR=6FC2F7> CAMBIO DE COLOR TEXTO NORMAL EN NEGRILLA TEXTO NORMAL EN CURSIVA < P > < U>TEXTO NORMAL SUBRAYADO TEXTO NORMAL SUBÍNDICE TEXTO NORMAL SUPER&/acute;NDlCE

Webs con Photoshop

308

TEXTO NORMAL LETRA MÁS GRANDE c/BIG> TEXTO NORMAL LETRA MÁS PEQUENA TEXTO NORMAL LETRA ENFATIZADA EN CURlVAcIEM > TEXTO NORMAL LETRA ENFATIZADA EN NEGRlLLA TEXTO NORMAL LETRA PARA ENFATIZADA U N A CITA EN EL TEXTOcISTRONG> TEXTO NORMAL< VAR> LETRA PARA ENFATIZADA UNA VARIABLE EN EL TEXTO

La etiqueta BIG aumenta el tamaño de la letra con un valor por defecto al tiempo que la muestra en cursiva. SMALL, por el contrario disminuye el tamaño de la letra con un valor por defecto. La etiqueta STRONG hace que el texto aparezca en negrita. Las etiquetas EM. CITE y VAR enfatizan una frase en cursiva, son empleadas para subrayar un elemento, una cita o una variable intercalados entre el texto respectivamente.

1

-

.-a~-tña'3v-a~3a

A.

.

$(l.

*.

U*.3

-

i I i 2

". . . 3

.

- 1

O <

Y ,

hl i i - 1 rw-Lph* r - W i 4 . i w r m ,id.b4 niuri.iLrrurruid

*. ,_

7

-

>

,->

ilurr-l 1 r 4 i r r m - t - m r l i p n p h

>ASPA'

---

-

"

-7

*

T I

mlhi~llirn(irn.p$Pi

lrlPPM

rTm'xP

AL* -CEFTR~

ESTE ES EL TIPO DE CABECERA R'íAYOR ESTE ES EL 1 IPO DE CABECERA INMEDIATAMIENTE MEhOR cL

m.

.

c.,,mu

...,.m.

ci\BECBR*L7VTR*DA C A E E C ~ N I I T S l C A D && LA DWCHLA

c m r m J u s r m c n o a x LA L ~ ~ I I I F ~ U > \ ..L Los p´rrafos son cadenas de textos que tratan un tema o aspecto en común. Para cambiar de párrafo hemos de cerrar el anterior, si lo deseamos y a continuación especificar el siguiente párrafo. Este segundo p´rrafos que además. aparece justificado. Puede comprobar en el ejemplo de como ha sido escrita esta página como hemos añadido una nueva etiqueta P para iniciarlo. P´RRAFO CENTRADO P´RRAFO )USTIFICADO A LA DERECHA P´RRAFO JUSTIFICADO A LA IZQUIERDA ESTE ES EL TlPO DE CABECERA MAYOR ESTE ES EL TlPO DE CABECERA INMEDIATAMENTE MENOR ESTE ES EL TlPO DE CABECERA BASTANTE MENOR CABECERA CENTRADA CABECERA )USTIFICADA A LA DERECHA CABECERA JUSTIFICADA A LA IZQUIERDA Los saltos de Iínea permiten cambiar de I&kcute;nea cuando lo deseamos ahora es el segundo salto den t r o de este párrafo. También puede ser emplea do en cabeceras.

309

31o

Webs con Photoshop &,.,

.

+ ,--- +!. - - --

tb..

'0 ' ..-' *

;LIXLALLTA!.~FA~.A

3.

UUT-TL" A: :L:E.T,: : F .L.,

,.

-

.,dFigura 207. Visor de Microsofl lnternet Explorer. De arriba hacia abajo se han empleado las siguientes opciones de alineación en el atributo ALIGN, éstos son:TOP, MIDDLE, BOTTOM, RIGHT

~:iurrj.n?i~~~i.?>i

:Aí*m,*I.rrí

rhi-!x.,p

.

-

,

ZITT~,L-L~~S.,~a 2w31

~~l):;h[.: A

L&E~:II!F~LA

m=P;

a*

*

....,

ain

-

-

J

meras colocan la primera línea en la posición que presentan, pero el resto de líneas aparecen por debajo de la imagen. .

a l g o sobre html.

..

La figura de esta página muestra la siguiente estructura:

~

tipos de letra y estilos LĺNEA BASE ALINEADA EN LA PARTE SUPERIOR c I M G SCR=p4.jpg WIDTH= 13% HSPACE=3 ALlGN=MIDDLE>LĺNEA BASE ALINEADA EN EL CENTRO LĺNEA BASE ALINEADA EN LA PARTE INFERIOR LA TOTALIDAD DEL TEXTO ES ALINEADO A LA DERECHAPARALAMENTE A LA IMAGEN LA TOTALIDAD DEL TEXTO ES ALINEADO A LA IZQUIERDAPARALAMENTE A LA IMAGEN

Efectos en el texto

311

Otras etiquetas de interés son BASEFONTla cual determina el cuerpo del texto aunque ha de ir acompañado del atributo SlZE y especificar el aumento o la reducción con signo positivo o negativo, al igual que la etiqueta FON7; siendo su sintaxis: . Lógicamente una etiqueta invalida la otra por lo que no han de ponerse las dos nunca, pues realizan la misma función. Si queremos crear un efecto de parpadeo en el texto podemos hacerlo incluyendo la etiqueta BLINK.

Cuando cadenas de texto han de ser vínculos, éstas deberán ser circunscritas entre y d A > , de este modo será entendido como un ancla a otro documento htrnl. En estos casos los atributos y las etiquetas relacionadas que hacen referencia al tipo de carácter, la morfología del mismo, si se trata de un párrafo o si se trata de un tipo de cabecera, pueden ser incluidos. Veamos Tomo aparecen sintácticamente relacionados. Figura 208. Visor de Microsoft lnternet Explorer.

+-- -- a 3a 3-33 .-

:n

u

6-

-

,t8-s-n

-

CAh4BIO DE T.*IAÑo

Aquí hemos sekccionado Parte de 10s ",>. elementos mostrados en las dos ilus~:,~~~,,L~.T.,r~,7,,-,~,L~~~-.,F:..~., traciones anteriores. Vemos que todo !4 ~~,~t,,,r~TfiwAEiRTGnrua el texto aparece como vínculo en cada uno de los casos, incluso el que se enCU?A-F a:Eu.,::.Lk>;:acuentra en el párrafo relacionado con ,. .:.... -11 ?FA-,. : AT7-NCAI.I-! fotografías, esto es porque hemos en:. .- l A ?-=T.,, cerrado todo el bloque entre las etique,. .. . tas y . Aunque aquí no se muestra el proceso para insertar un vínculo dentro de una cadena de texto en un párrafo, es el mismo; simplemente la palabra en cuestión deberá estar entre las etiquetas mencionadas. En la página siguiente aparece la sintaxis de esta página donde se muestra como todos los elementos se relacionan. r;,,-L,L7,7L

,

-

p:-

S

A

:y

Webs con Photoshop

...

a l g o sobre html

La figura de la página anterior muestro la siguiente sintaxis: cHEAD> tipos de letra y estilos en vínculos TEXTO NORMALCFONT FACE=ARIAL> CAMBIO DE FUENTE ARIAL TEXTO NORMAL CAMBIO DE TAMAÑO TEXTO NORMAL EN NEGRILLA < l > TEXTO NORMAL EN CURSIVA TEXTO NORMAL LETRA MÁS PEQUENA TEXTO NORMALeEM > LETRA ENFATIZADA ENCURlVA TEXTO NORMAL LETRA ENFATIZADA EN NEGRILLA LÍNEA BASE ALINEADA EN EL CENTRO LA TOTALIDAD DEL TEX TO ES ALINEADO A LA DERECHAPARALAMENTE A LA IMAGEN

Efectos en el texto Figura 209. Visor de Microsoft lnternet Explorer.

, . c . c,un

i.

4.

L.%. -.

d ..

:.

O"-,

Aquí como en la mayoría de páginas de la Web conviven texto normal y texto gráfico en una agradable armonía. Cada uno de los cuales cumple su función específica. Observe que en este caso los vínculos secundarios y más numerosos aparecen en fomato de texto normal, mientras que el gráfico aparece para resaltar un tema concreto.

...

a l g o sobre html

La figura superior muestra la siguiente sintaxis: < HEAD> < TlTLE>80 a&ntilds;os de surrealismos

Siendo la estructura del documento cuadro2: < TlTLE >texto grafico LISTAS EXPONSORS EXPOSlCIÓN TEMPORAL

I

...así hasta completar los elementos de b lista.

Efectos en el texto Figura 210. visor de Microsofi lnternet Explorer.

-+.

m

- 3 3 3 3&'4'7BliY

La página por marcos está dividida en tres secciones debido a que deseábamos resaltar con un fondo las fotografías de los lugares al tiempo que' delimitarlo en un espacio que difiriese del resto de la información que aparece en las otras páginas de contenido. Aquí como en el caso anterior sendos tipos de texto conviven para proporcionar claridad informativa sin llegar a agotar visualmente al navegante por un exceso de contenido informativo.

I

S

- 1

--

-

&* 1jruii

5

F

-

--

-

.-

-

-

..

co!n rnr x . -- ---

...

a l g o sobre html

La figura superior muestra la siguiente sintaxis:

< TITLE >80 a&ntilds;os de surrealismos A

315

c/HEAD> CFRAMESET ROWS = 1 Ovo,90% BORDER= I > CFRAME SCR=logotipo.htm NAME =tour turistic>

Siendo la estructura del documento logotipo: cHJML> < JITLE>vinculos en formato texto y texto grafico cIHEAD > cBODY BGCOLOR=6FCZF7> < JR> < I M G SCR=rotulo.gif WlDTH =80%> cITD> cIBODY> cIHJML>

316

Webs con I?hotoshop

Siendo la sintaxis del documento listado: vinculos en formato texto y texto grafico < TD>

I

1

NUEVOS TOURS AMÉRICA DEL SUR < FONTCOLOR= FFFFFF> ISLAS DE LA POLlNESlA AMÉRICA CENTRAL < FONTCOLOR = FFFFFF> ASIA < CENTER>ÁFRICA < FONTCOLOR = FFFFFF> OFERTAS En todos los cosos hemos subrayado los elementos de texto.

Efectos en el texto

Y la estructura del documento viaje: en formato texto y texto grafico c/HEAD>

C TITLE >vinculas

cTD> CFONT SIZE= 5 COLOR=OF133 >Haiti cTABLE WIDTH= 10% ALIGN= LEFT BORDER= 1 CELLPADDING= 1 CELLSPACING=4 BGCOLOR=6FC2F7> < TR> < TD> Jamaica c/TR> c/TABLE> < H 1 > La semana ideal para todos < / H 1 > cTR> HOME < A HREF=/viajes/tour.html> TOUR

1

En todos los casos hemos subrayado los elementos de texto.

Webs con Photoshop

318

PROYECTOS A lo largo de este extenso tema se ha ido mostrando mediante numerosos ejemplos como producir interesantes efectos en la tipografía, aunque sin tratar ningún elemento perteneciente a una de las páginas. Veamos un breve resumen de cómo hemos diseñado uno de ellos. Documentos PSD. El rótulo está integrado en un documento que ha de contener una fotografía. El fondo de la página Web en 1 la que ha de incrustarse es de un azul claro por lo que antes de iniciar el proceso de tratamiento de la tipografía cubrimos con la herramienta Bote de pintura el fondo que responde a un R: 111, V: 194 y A: 247. A continuación hemos recortado la sección de una fotografía de interés, que previamente habíamos indexado, con la herramienta Marco dando un calado de 6 en su paleta opciones. De este modo conseguimos crear un efecto de suave degradación entre el fondo y la imagen. Para provocar un viraje rápido simplemente hemos seleccionado en la capa de la fotografía el modo de capa Luminosidad manteniendo el valor de opacidad de dicha capa y de la del fondo en 100%.

-m

-

i

-

l

.

m

i

.

-

m

i

,

.

-

-

~El siguiente paso ha~ con1

sistido en seleccionar el tipo de letra adecuado seleccionando STACCATO 222 B T para Tour v LITOGRA'PHIC LIGHT para TURISTIC, siendo I ambos de un cuerpo de 80 puntos. En el primero se ha seleccionado un color azul prusia mientras que en el segundo un verde hierba. Colocados en la posición más o menos definitiva.

a

t

hemos duplicado. En una de ellas hemos mantenido el color inicial y sin alterarla, a excepción de la opacidad que ha sido reducida al 50 %. En la capa inferior se han aplicado varios filtros consecutivamente. El primero de ellos Hallar bordes que contienen unos valores por defecto. En segundo lugar Relieve dando un ángulo de 55 grados, una

Efectos en el texto altura de 8 píxeles y una cantidad de relieve del 63 por ciento. En la otra capa se ha mantenido la opacidad al cien por cien pero se ha seleccionado el modo luminosidad dando como resultado el que aparece en la ilustración de la página anterior.

Figura 212. Documento PSD. En la capa de TOUR hemos aplicado en primer lugar el filtro Relieve dando como valores ángulo: 55 grados, altura: 8 y canti-

1

dad de relieve: 63 %. A continuación con el comando Gama de colores y el comando Guardar selección hemos creado canales alfa partiendo de cada una de las selecciones del texto que delimitan las zonas de las luces y las zonas de las sombras para intensificar dichos extremos mediante un ajuste de ambos empleando el comando Tono/saturación. El paso siguiente ha consistido en duplicar la capa, en la inferior se ha aplicado el filtro Efectos de iluminación seleccionando como estilo 2AMSPOT, la opción FOCO, como tipo de luz, una intensidad de 17,un foco de ancho de 91, un lustre mate de -67,plástico como material con un valor de -58, una exposición O y un ambiente positivo de 20. En propiedades hemos elegido el color del texto, es decir, el azul prusia, por último como canal de textura se ha seleccionado el canal de la capa del texto con una altura montañosa máxima. Estos valores han sido aplicado posteriormente en canal de textura de las sombras. En esta capa hemos seleccionado como modo de capa Luminosidad, mientras que en la capa superior duplicada en la cual no se ha aplicado este filtro se ha elegido el modo de capa Luz intensa manteniendo en ambas la opacidad a O. Por último en la capa fondo hemos seleccionado los extremos y la hemos convertido en canal alfa en el cual hemos aplicado el filtro Desenfoque gaussiano para una mayor integración con el fondo de la página Web.

Figura 213. Documento PSD y paleta Capas.

F Preservar lransparincla

I

319

Webs c o n Photoshop

320

UNOS CUANTOS EJEMPLOS En las muestras aquí presentadas comprobamos la gran variedad en diseños que se pueden obtener y como éstos son armonizados con el resto de los elementos al tiempo que con el diseño general que depende de las necesidades del proyecto, de lo que prepondere en él, es decir, lo informativo o el efecto visual a modo de anuncio publicitario. Nos encontramos con casos en que ambos valores aparecen en una misma página, mientras que en otras domina el valor informativo y de catalogación por encima de valor publicitario. ...-.

-

< I M G SCR=texto 1.gif ALT= Tour Turistic VSPACE =5 HSPACE =5 BORDER=O ISMAP> WIDHT=100% SIZE=15 ALIGN=CENTER CLEAR=LEFT> < P > Somos el número uno en el mundo en viajes exóticos < / I > < / H I > WIDHT= 100°h S/ZE= 15 ALIGN=CENJER CLEAR= LEFT> < I > Compruébelo navegando por las páginas de nuestra Web donde encontrará el lugar que tanto ha soñado

Cuando se han de determinar varias zonas activas en un mismo documento hemos de definir las distintas áreas mediante unas coordenadas demarcatorias de dichas zonas. Para realizar este proceso debemos recurrir a la

Todo sobre mapas de imagen 325 etiqueta MAP y la etiqueta AREA. La primera nos marca el inicio del documento que será entendido como un mapa al tiempo que especifica las distintas regiones en las que será delimitado, debe ir especificado del siguiente modo: . Éste puede ir acompañado del atributo NAME para indicar el nombre de un ancla en documentos de hipertexto aunque su uso es opcional. Lo recomendable es que haga referencia al URL en cuestión aunque no tiene por que ser así, éste no deberá ser repetido en ningún otro documento. Su sintaxis es: cMAP NAME=«titulo»>, donde tit~iloreferencía el URL del documento tratado como mapa de imagen. La etiqueta AREA debe ir acompañada de una serie de atributos que nos indican la forma que ha de tomar el mapa, las coordenadas exactas de dicha zona y la dirección o referencia de hipertexto del mapa. Así hemos de indicar en primer lugar la forma empleando el atributo SHAPE. Éste puede contener las siguientes opciones: DEFAULT para indicar una zona indefinida por lo que sus coordenadas serán indeterminadas, CIRCLE, para indicar áreas en forma de círculo, en este caso las coordenadas a definir son el centro y un punto del borde, RECT para definir un mapa en forma de rectángulo, las coordenadas que deben indicarse son las del vértice superior izquierdo y las del vértice inferior derecho y, por último, POLY para indicar que la forma es un polígono, en este caso es imprescindible indicar las coordenadas de cada uno de los vértices pudiendo contener hasta un total de 100. Cada una de las coordenadas han de ser precisadas en el atributo COORDS siguiendo la forma indicada en SHAPE por ejemplo: . Además hemos de incluir la referencia de hipertexto en el atributo HREF en cada una de las áreas detalladas, por ejemplo: .

I

La sintaxis de las distintas coordenadas según la forma del mapa de imagen son: CAREA SHAPE=CIRCLE COORDS= xl, y/, r HREF=URL> CAREA SHAPE=POLY COORDS= xl, y1 xn, yn HREF= URL>

...

326

Webs con Photoshop Por último hemos de indicar de algún modo cual es el documento que es tratado como un mapa en este caso habremos de añadir dentro de la etiqueta LMG el atributo U S E M A P y no como en el caso anterior I S M A P . A diferencia de éste, el browser no nos informa de las coordenadas exactas de la posición del cursor en cada momento aunque sí nos informa de la referencia de hipertexto del documento enlazado. Su sintaxis es la siguiente: (el símbolo # debe ir siempre antes del nombre, si no lo incluimos la imagen no será entendida como un mapa). Observe que en este caso ya no va acompañado de la etiqueta de enlace A, pues los vínculos vienen determinados entre las etiquetas y d M A P > .

...

a l g o sobre html

La sintaxis de un documento entendido como varios mapas de imagen sería la siguiente (en este caso estó dividido en tres zonas activas cada una de las cuales con una forma distinta): cMAP NAME=es aconsejable poner el nombre del mapa> CAREA SHAPE=RECT COORDS= xl, y/, x2, y2 HREF=URL> < A R U SHAPEePOLY COORDS= xl, y l...xn, yn HREF=URL>

nota...

l

Si ha incluido al mismo tiempo los atributos lSMAP y USEMAP. si el browser entiende la segunda etiqueta la primera quedará invalidada con todo lo que ello comporta.

Todo sobre mapas de imagen Figura 216. Visor de Microsoft lnternet Explorer.

- !.

327

-

E*. _.A

'

l. i fr..;.i

.

?-

.' -.

-*

-*.

.s.-.

,m.+

c-,,"m

,!

* -,

-mapas de imagen cIHEAD > < I M G SCR= titulo.gif USEMAP=#agenck HEIGH T = 170 WHIDTH=657 BORDER=3 > cIBODY >

Observe que el URL de cada área es distinto, es decir, cuando pulsamos con el cursor dentro de las coordenadas impuestas por la forma especificada nos trasladará al documento htm definido en el HREF, que en el polígono es agenchhtm y en el rectángulo es viaje.htm.

Webs con Photoshop

328

DETERMINAR COOFCDENADAS En páginas anteriores comentamos que la gran mayoría de programas para la creación de documentos HTML traen incorporados comandos o herramientas que facilitan el proceso para la determinación de las zonas activas. No obstante es importante saber qué método podemos emplear en caso de no disponer de este tipo de herramientas. Ya comentamos que una forma rápida consistía en crear un documento de prueba a modo de i d g e n e s activas para, de este modo, poder determinar las coordenadas que debemos especificar en el atributo COORDS una vez sea éste sea convertido a mapa de imagen. Pero veamos como hacerlo. Para que una imagen aparezca como activa debemos recurrir al atributo ISMAP (pág. 322). Éste, como ya indicábamos, nos permite visualizar en el browser la posición del cursor en cada momento, así que mediante éste podremos saber que coordenadas deseamos marcar como área activa. Una vez creada la página la cargamos en el browser y comenzamos a tomar nota de los puntos que delimiten la forma de la zona activa.

.-

te

..

-

e--i

L

m*

.

2 5

8

2

Figura 217. Visores de Microsoít lnternet Explorer.

2. c>L ;-, i 2. ,Y" 1.-..

Este documento viene especificado en la página del código fuente como una imagen activa, con las etiquetas y atributos de un vínculo y dentro de la etiqueta IMG el atributo ISMAP que lo identifica como un mapa. ~~í que una vez en el browser, nos aparecen indicados en ' todo momento las coordenadas de posición tr.

del cursor. Las que aparece en la ilustración superior son las primeras coordenadas que emplearemos para determinar el polígono que delimitarála zona, éstas son 17, 13. Las que marcan el vértice siguiente aparecen visualizadas en la ilustración inferior, éstas son 31, 105. En estos casos las coordenadas no tienen porque coincidir con los márgenes que impone el tamaño específico del documento.

:

t.-

.. --2 3-

Y -8 t... 7

--"--=-I

:f,,,l,,,

. -.-

i

Todo sobre mapas de imagen Figura 218. Visores de Microsoft lnternet Explorer.

3 2t * 'S*

--

m.

& ,A $2

--

Las coordenadas de los vértices siguientes son según las ilustraciones que aparecen de izquierda a derecha y de arriba a abajo: 136, 86, 192, 67, 145 y 11 respectivamente. Lógicamanteel vértice que cierra la figura es el primero, es decir, 17, 13. Nos cercioramos de que el proceso para la obtención de coordenadas no es nada complicado.

algosobre html...

I

La figura 2 15 de la página 323 mostraría el siguit.rire Lurriuiu tructura con respecto a la imagen titulo:

ue e>-

lo anterior... < TABLE > < TR> lo siguiente

...

329

Webs con Photoshop

330

Las etiquetas MAP y AREA para introducir coordenadas Una vez tenemos las coordenadas del área en cuestión hemos de introducirlas, para ello contamos con una serie de atributos y etiquetas. Las que circunscriben el total de áreas activas son eMAP> y d M A P > , entre las cuales hemos de incluir la etiqueta A R E A . Cada A R E A marca una zona activa dentro de la cual debemos precisar la forma. Las coordenadas exactas del área y el URL del documento vinculado mediante los atributos S H A D E , C O O R D S y HREF respectivamente, como indicamos en las páginas 324 y 325. A lo dicho hasta aquí hay que añadir que dentro de los atributos de IMG hemos de permutar I S M A P por el de U S E M A P con su respectivo nombre relativo a la imagen, que es lo más aconsejable tal y como se indica en la página 326. Pero ahora veamos cuales son los cambios sustanciales en la página del código fuente y en la página visualizada en el browser con respecto a la anterior.

...

a l g o sobre html

I

La figura 2 15 de la página 323 mostraría el siguiente cambio de sintaxis con respecto a la imagen titulo:

..

lo anterior. < TR> < TD ALlGN=CENTER> < I M G SCR=titulo.gif ALT=agencia HSPACE =5 VSPACE =5 USEMAP =#agencia > CMAP NAME =agencia > CAREA SHAPE =POLY COORDS= 1 7, 13, 3 1, 105, 136, 86, 192, 67, 145, 1 1 HREF=agenck.htm> c/TD> mapas de imagen < BODY BGCOLOR= #CFC3B 1 > < JR> < / J D >

cMAP NAME =barraherramientas> CAREA SHAPE=RECT COORDS= O, 1, 150, 57 HREF=file:///E/moda/list.htm >

CAREA SHAPE=RECT COORDS= 150, 1, 290, 57 HREF=file:l/lElmodalshop. htm > CAREA SHAPE=RECT COORDS= 290, 1, 566, 57 HREF=file:///E/moda/complements.htm> CAREA SHAPE=RECT COORDS= 566, 1, 788, 57 HREF=file:lllElmodalhomepage.htm > c/MAP>

333

Webs con Photochop UNOS CUANTOS ESEMPLOS El empleo de mapas de imagen y no de simples vínculos viene deterrninado por las características del diseño. En según que casos resulta más práctico el empleo de vínculos colocados aleatoriamente sobre la página, pero en según que otros casos la distribución tal y como la deseamos se hace casi imposible. Es entonces cuando resulta más práctico el uso de mapas de imagen donde la ubicación de los elementos ha sido determinada en su diseño desde Photoshop.

-

- - t . -

,,..--+

..L. J ....

L :..,-

G,-

.

T . .

,

-: .--;*-

,

--.-

.

-

-

-

,.. - .*".

,,,,. ..,, ,, - . -.- E & ~ z L - ".*,d

l..

.,.. *

..'

..