Un completo curso de diseño gráfico, ilustración, diseño web y tipografía.

Maquetación gráfica

En otros artículos de esta serie ya hemos expuesto lo básico de la creación de páginas web utilizando programas de edición gráfica y de texto, editores de html, junto con valiosos trucos e ideas. Aquí presentamos una nueva selección de pistas para la edición de páginas web.

Desarrollo gráfico completo

Cada vez más existe la tendencia a desarrollar conceptos gráficos para un diseño web completos dentro de un mismo programa, hasta llegar al montaje de la página web misma. En contraste, durante los primeros años de la web, lo habitual era preparar cada uno de los elementos por separado. Las recientes versiones de programas como Fireworks o Xara permiten desarrollar los elementos gráficos de navegación, incluyendo efectos de mouseover, barras desplegables, mapas de imagen. Este tipo de programas no sólo preparan toda la parte gráfica, sino que también son capaces de generar el código html necesario para colocar cada imagen en su sitio debido.

 

Normalmente, el diseñador empieza creando un prototipo a pantalla completa dentro de un programa de gráficos, aunque en una fase preliminar es frecuente que las ideas se manejen en papel, a modo de bocetos. Dentro de un programa de gráficos, las opciones de reglas y guías (estableciendo las unidades en píxels) son especialmente útiles para colocar con precisión los elementos gráficos y de navegación, los espacios asignados al texto y demás partes de la página. La resolución de pantalla que actualmente es el estándar es 800 por 600 píxels. Si nuestro monitor permite trabajar cómodamente a una resolución mayor, la pantalla podrá acomodar una vista completa del desarrollo gráfico de la página web y al mismo tiempo las paletas y espacio de trabajo del programa en que trabajamos.

Inicialmente es mejor trabajar en modo de color completo RGB. Si es necesario ya reduciremos el número de colores de las diferentes partes de la imagen al recortarla y optimizar.

Recorte de imágenes (slicing)

Una vez el prototipo de página está listo debemos tomar varias decisiones:

  • ¿Qué partes incorporarán texto normal y qué partes serán gráficos?
  • ¿Debemos incluir efectos de javascript con algunos elementos (por ejemplo, efectos de mouseover-- cambios al pasar el ratón)?
  • ¿Es posible sustituir parte del modelo con una imagen de fondo, o con una celda de tabla en color? Con estas alternativas economizaremos tamaño final en la página completa.

Para recrear la estructura de la página de forma que el navegador la muestre correctamente, se puede optar:

  1. un mapa de imagen con la imagen completa que hemos creado, bien como jpg, bien como gif. Resultaría poco flexible y probablemente el tamaño del fichero sería bastante grande (a menos que pueda resolverse con pocos colores y que contenga grandes áreas homogéneas, en el caso de un gif). De todos modos, esta opción puede ser la más conveniente en algunos proyectos.
  2. Cortar el prototipo en fragmentos que se optimizarán separadamente; algunos trozos no se guardarán como gráficos, sino que serán casillas de una tabla, o el fondo mismo de la página.

Aparentemente, la segunda opción reviste mucha más complicación. Si queremos crear una réplica en html de lo que hemos preparado como prototipo en el programa de gráficos, será necesario en primer lugar colocar con mucho cuidado una serie de guías para cortar a lo largo de ellas, evitando que falten píxels o que haya superposiciones. Una forma de facilitar esta operación és activar la opción de "atraer a las reglas" en el programa.

Una vez preparadas las guías, simplemente seleccionamos los trozos con la herramienta de selección rectangular, copiamos. Abrimos una ventana nueva para la selección (algunos programas automáticamente asignan el tamaño de la selección actual al nuevo archivo; si no es así, basta tomar nota de este tamaño en el momento de seleccionar los fragmentos). Esta imagen parcial se optimiza y se guarda con el nombre que se quiera. El proceso se repite para cada una de las partes de la imagen que sea necesario guardar como gráfico: las partes que puedan resolverse como una celda vacía pueden dejarse.

Finalmente es necesario montar todo en forma de disposición de tablas o capas. Para ello nos hará falta el editor de html que utilicemos habitualmente.

Todo este proceso se puede simplificar mucho utilizando un programa que sea capaz de trocear la imagen y reconstruirla en forma de tabla html. Existen algunas utilidades gratis de este tipo, que pueden localizarse en servidores de programas como Softonic. Por otro lado, también es posible realizar el proceso de forma automática en los programas profesionales para edición gráfica para la web: Fireworks, Xara, ImageReady (incluído en Photoshop 5.5-6) El control que ofrecen herramientas de este tipo es muy grande y realmente pueden ahorrar tareas aburridas y concentrarse en el proceso creativo.

Por último está la decisión de generar un layout a base de tablas o a base de capas. Hasta hace poco tiempo, este dilema estaba fuera de lugar. La única manera realista de llegar a la mayor parte de usuarios era generar páginas web basadas en tablas anidadas. Sin embargo, desde hace unos meses, con la llegada de browsers que realmente soportan bien el estándar de html 4, con capas y dhtml, ya es viable plantearse esta alternativa; ésta presenta numerosas ventajas, en especial que el código resultante es mucho más limpio, más flexible y con posibilidades de interacciones dinàmicas.

Cambios en bloque

A menudo hace falta obtener imágenes de un tamaño constante, con una resolución de colores y formato diferente, recortadas de una determinada manera, etc. por ejemplo, para preparar páginas con vistas en miniatura. Este trabajo puede resultar más bien pesado si se lleva a cabo con muchas imágenes. Sería deseable automatizar el proceso, utilizando funciones avanzadas de algunos programas. Estas operaciones pueden hacerse con las funciones de macro o acciones, pero algunas aplicaciones tienen una opción especializada en el menú (batch processing). Para llevar a cabo los cambios, basta elegir la carpeta o los ficheros y especificar el tipo de cambios a realizar.

Conviene investigar dentro de las opciones de nuestro programa cómo utiliza estos cambios en bloque, puesto que pueden automatizar y realizar con suma facilidad tareas que de otro modo serían pesadas y rutinarias. Así, puede prepararse una macro (que recibe diferentes nombres según el programa, tales como actions) para generar miniaturas de 100 px. de ancho con todos los gráficos de una carpeta en un solo paso.

Image Robot, de Jasc software, es un programa especializado en este tipo de cambios automatizados.

Pero no sólo puede ser preciso efectuar cambios en los contenidos gráficos. También nos encontraremos con textos que se deben actualizar a menudo, tales como extractos de noticias o resúmenes de actualidad, enlaces que han cambiado... estos cambios pueden ser una auténtica pesadilla. Sí, ya sé, seguramente habéis encontrado muchas cosas que están pendientes de actualizar en esta misma web. Lo que digo.

Cada programa de edición web tiene sus propias estrategias para actualizar los cambios en el texto, los enlaces... más o menos eficientes y fáciles de usar. Muchos programas permiten resolver parte de estos problemas de actualización y mantenimiento con sus sistemas de plantillas y librerías. Otra idea interesante es emplear un applet de Java, insertado en una posición determinada de la página, que lea un fichero de texto independiente en el que están contenidas, por ejemplo, las últimas novedades que se van a incorporar al sitio.

Cambio del tamaño de las imágenes

Operaciones tales como el recorte de una imagen, trasformaciones de simetría (obtener la imagen vuelta del revés horizontal o verticalmente) son muy comunes en el desarrollo de proyectos. Por fortuna, estas operaciones no revisten complicación alguna y se trata de un solo clic, sin merma de calidad en el nuevo gráfico.

Sin embargo, el cambio de tamaño de un gráfico de mapa de bits, tal como un gif o un jpg tiene sus peculiaridades, derivadas de la naturaleza misma de estos formatos. En general, dada la resolución fija de un mapa de bits, el cambio de tamaño implica adaptar a las nuevas dimensiones la información original y esto implica una cierta pérdida de calidad. Una imagen a color de 24 bits, como un JPEG, se puede beneficiar de un proceso de escalado más suave que difumina los contornos para disimular el cambio de tamaño. Las imágenes con un número limitado de colores (256 o menos, como los GIF) sólo pueden cambiarse de tamaño con un sistema más bruto y que da contornos más escalados, la típica imagen de un gráfico de ordenador realizado con poco cuidado. Algunos programas diferencian estas dos opciones como resample en el primer caso y resize en el segundo.

Para escalar con mayor finura un GIF (o cualquier otro gráfico con un número limitado de colores) el procedimiento adecuado es: 1) aumentar la resolución a color de 24 bits o color RGB; 2) Aplicar el cambio de tamaño "resample" 3) Reducir de nuevo la profundidad de color.

Sin embargo, no puede decirse que absolutamente siempre sea mejor escalar en modo de color completo. Para pequeños gráficos en los que interese mantener la definición, puede ser incluso conveniente el proceso más basto de "resizing". Pueden probarse las dos alternativas para ver cuál da mejores resultados.

Otra situación en la que se debe decidir el modo de escalado, es la importación de un fichero EPS o en formato de Adobe Illustrator hacia un programa de edición en mapa de bits como Photoshop. En este caso, no habrá problemas de pérdida de calidad con la ampliación, puesto que partimos de un formato vectorial que se puede escalar sin peroblemas; ahora bien, puede elegirse una importación con bordes suavizados o con bordes normales. Para dibujos de tipo lineal o técnico puede ser conveniente la segunda opción.

La forma más obvia de despreocuparse de la merma de calidad por el escalado de los gráficos es preparar los originales en una aplicación de dibujo vectorial y guardar una copia en ese formato. Evidentemente esto es posible para logotipos, texto, imágenes más o menos simples, pero no para fotografías.

Cuando se trata de preparar grandes cantidades de páginas con gráficos que tengan una estructura idéntica, es muy conveniente utilizar un componente o utilidad del programa que permita su generación automática. Por ejemplo, Netobjects Fusion tiene un componente que automáticamente rastrea los gráficos de una carpeta, y prepara páginas web con miniaturas de todos ellos, botones para ir de una página a la siguiente, etc. El fantástico Irfanview también hace algo parecido. El trabajo tedioso que pueden ahorrar es muy considerable.

Control del color a través de la producción

Uno de los factores a tener en cuenta en el proceso de producción para la web es la consistencia en el uso del color a través de los cambios de formato y programas de edición. No se trata de una cuestión marginal, puesto que los gráficos para la web se basan mayoritariamente en un formato que soporta sólo un rango de colores limitado: el GIF. En efecto, al poder incluir tan sólo 256 colores, todos aquellos que estén fuera de este margen se deberán convertir en uno u otro de los colores indexados en el fichero. Los programas de gráficos tienen diferentes formas de controlar esta limitación: bloquear determinados colores del gráfico original para asegurarnos de que sí estén presentes en la versión GIF,  crear tramas o difusión de puntos para simular los colores no incluídos en la tabla del fichero, etc.

Existe el riesgo de que un proyecto se vea seriamente retardado, por problemas de conversión de colores al reducir la versión original a un formato indexado. Por tanto, es imprescindible un control exacto de qué colores se están utilizando y especificando en las diferentes fases de producción, tanto gráficas como de programación. Recordemos los diferentes sistemas en que se pueden especificar los colores en los programas de ordenador (artículo sobre el color, sección de Diseño gráfico). Es probable que nos encontremos ante la necesidad de convertir continuamente colores de formato decimal a hexadecimal. Algunos programas tienen esta capacidad y no supone problema alguno; si no es así, puede recurrirse a alguna pequeño programa o incluso a la calculadora del sistema. Por ejemplo, para pasar colores de decimal a hexadecimal:

 

No es sorprendente que muchos programas de edición de gráficos incorporen utilidades destinadas a recoger muestras de color no limitadas a los gráficos abiertos en el programa, sino incluso desde cualquier punto del escritorio o cualquier otra ventana abierta. Si nuestro programa no tiene esa capacidad existe una posibilidad simple: efectuar una captura de pantalla del área que contiene el color a muestrear, y a partir de ésta efectuar la lectura del color en cuestión. Más cómodo y rápido es emplear una aplicación sumamente útil llamada Eyedropper (cuentagotas) que, una vez abierta, se sitúa discretamente en la barra de tareas, en forma de icono: un cuentagotas que da nombre al programa. Si queremos saber cuál es exactamente cualquier color de la pantalla, en la aplicación que sea, basta hacer clic sobre el icono del cuentagotas (http://eyedropper.inetia.com). Otra utilidad parecida, ColorPic tiene más opciones, entre ellas la de guardar unos "chips" de color mientras se van eligiendo.

Organizar el diseño con tablas.

A menudo, las tablas se asocian a diseños rígidos y poco elegantes, en especial si pensamos en una tabla de estadísticas, con las celdas separadas por líneas. En realidad, las tablas son la herramienta bàsica del diseño gráfico, y en particular, del diseño de páginas web. ¿Dónde están las tablas, si no se ven? Con frecuencia, están presentes sin ser muy aparentes, ya que suelen utilizarse tablas sin contornos lineales. Mucho más elegante: separar la información de las casillas con el espacio blanco.

De algún modo, el diseño con tablas limita las posibilidades, pero al mismo tiempo es beneficioso tener una retícula a la que adaptar el diseño: esto facilita la consistencia y la armonía de las diferentes secciones y páginas.

El diseño de páginas web ha estado condicionado durante años a lo que se podía hacer -y a lo que no se podía hacer- con tablas. Los sistemas de aplicación de formato más flexibles y potentes, como las hojas de estilo CSS, no se han podido utilizar con seguridad por el deficiente soporte en distintos navegadores. Sin embargo, existen trucos que permiten adaptar las tablas a casi cualquier necesidad de layout:

uso de imágenes de 1 píxel, transparente, que se pueden reutilizar las veces que se quiera con diferentes dimensiones para actuar como espaciador y colocar, por ejemplo, los elementos de una tabla en posiciones específicas.

Tablas anidadas de forma compleja.

Crear filas o columnas de una anchura muy reducida para simular líneas sólo a un lado de las celdas.

Estos trucos, por suerte, pronto serán innecesarios (e incluso pueden resultar cómicos.) De momento, siguen vigentes para garantizar una compatibilidad muy amplia de las páginas, y los programas de edición visual a menudo generan páginas con un código recargado, basado en estos trucos, que resulta difícil de editar fuera del programa original.

Las capas.

Con la adopción del estándar de las hojas de estilo en cascada (CSS) por los navegadores de última generación, éstos son capaces de representar páginas web con diseños mucho más flexibles que los que inicialmente permitían. En particular, existe la definición de capas o layers, que permite un control absoluto de las dimensiones y posición de los elementos de la página. Una capa es un contenedor de texto, imagen, etc. que está colocado en una posición determinada. Las capas pueden superponerse y, mediante scripts, pueden hacerse móviles (para arrastrarlas con el ratón, o para que se muevan en una animación preestablecida.) El uso de capas, evidentemente, hace posible un control muy preciso del diseño gráfico de las páginas web.

Con un buen programa, capaz de manejar capas (como los que comentamos en nuestros artículos sobre diseño web), podemos crear un diseño de página sofisticado y preciso.  Con una precisión al píxel, como suele decirse. Estos programas, tales como Fusion, Dreamweaver o GoLive, incluyen una opción de retícula y guías para ayudar a colocar los elementos con la máxima exactitud.

Por ejemplo, con Fusion (un programa de diseño htm que se cree ser una aplicación de autoedición) se manejan los elementos del layout de la misma forma en que lo haríamos en uno de esos programas, incluso con la facilidad de una paleta para alinear y distribuir intuitivamente los elementos como la que mostramos en la imagen. Con esta paleta podemos colocar de la forma más precisa y fácil, por ejemplo, las capas o cualquier otro contenedor de objetos en la página.

Solución para el problema de la compatibilidad html.

Hasta ahora, muchos desarrolladores han preparado incluso dos versiones alternativas de la misma web para evitar problemas de compatibilidad con navegadores que no soporten los estándares más actuales. Si esto parece una tarea interminable, lo es sólo en apariencia. En realidad, con un buen editor visual como Dreamweaver, Fusion o GoLive es extremadamente simple convertir tablas en capas o viceversa, ¡con un sólo clic del ratón! Una vez se tienen las dos versiones alternativas de las páginas web, pueden subirse ambas al servidor y colocar en las páginas un script que reconoce el browser del visitante, de manera que dirige la página, si es preciso, a la versión soportada por su navegador. En Fusion ni siquiera hace falta introducir código JavaScript: puede hacerse con uno de sus componentes (Screen Door.)

Dicho esto, es muy criticable que todavía se usen browsers que no están adaptados a los estándares actuales (¡la mayoría de los cuales datan de 1996-97!) Dado que la mayoría son gratis no hay motivo para tener un navegador anticuado o que no cumpla los estándares: con ellos es posible una web mejor diseñada, más dinámica y más adaptable al visitante. Más detalles en www.webstandards.org ...

Frames

Un diseño de páginas basado en marcos (frames) se basa en unos contenedores que alojan páginas web que se han diseñado por separado y que, de hecho, se pueden mostrar independientemente en una ventana del navegador. No faltan ejemplos de páginas con frames, pero es un sistema que la mayoría de diseñadores prefiere evitar, puesto que tiene más inconvenientes que ventajas. La ventaja que suele citarse es la facilidad de actualizar los enlaces de una sección: basta cambiar una página, la que contiene los enlaces. La lista de inconvenientes sería larga, pero, por ejemplo, un sistema de frames suele tener sentido para albergar una barra de navegación fija en un pequeño marco, mientras que el mayor contiene la página a la que se vaya a acceder. Sin embargo, si un visitante llega directamente a una de esas páginas, y no contiene los elementos de navegación, se puede encontrar con una página "huérfana". Y si a ésta le añadimos los elementos que faltan ¿para qué queremos el frame?

Los marcos internos (iframe) pueden tener utilidades muy diversas. Por ejemplo, son una manera eficaz de incorporar contenido variable en una sola pantalla, sin la complicación de configurar un script. Uno de los usos más frecuentes es el de presentar un anuncio, independiente del resto del contenido de la página. De este modo,el anunciante, una vez contratado el espacio en nuestra web, puede actualizar por su cuenta el espacio de que dispone y nosotros no debemos ocuparnos de nada.

Si damos algunas vueltas a la idea podemos encontrar otras aplicaciones. Los marcos pueden servirnos para mostrar páginas web distintas e independientes (que pueden estar en servidores distintos) en una sola pantalla del navegador. De este modo, por ejemplo, podemos tener una parte en la que acordemos mostrar las últimas noticias sobre un determinado tema, presentadas por la Web X. Nuestra tarea acabará al definir el marco para X, al que corresponde la URL de ese sitio. Cada vez que los responsables de X actualicen su contenido, éste aparece al día en su propio marco, sin que nosotros tengamos que intervenir para nada. Se trata, evidentemente, de un sistema cómodo y con interesantes posibilidades.

Organizar el diseño con HTML dinàmico.

Las capas tienen una ventaja enorme a la hora de resolver determinados tipos de maquetación. Lo que sería muy complejo con el sistema tradicional de tablas anidadas puede ser elegantemente simple con CSS. Además, es posible aprovechar el espacio en forma tridimensional (superponer parcialmente capas, hacerlas visibles sólo ante determinados eventos...)

Una idea interesante para el uso de capas es preparar una interfaz que aproveche además los comportamientos dinámicos asociados a ellas (DHTML). Así, podemos diseñar una interfaz semejante a la del sistema de ventanas, con una serie de contenedores libremente movibles, o sistemas de menús desplegables que no sólo economizan espacio, sino que tienen un funcionamiento familiar para la mayoría de usuarios. Colocar mucha más información de la inicialmente visible en una misma página tiene la ventaja de que se puede mostrar inmediatamente, una vez descargada la página por completo, y de una forma interactiva, y sin abrumar al usuario con una gran cantidad de texto. Por ejemplo, en una pantalla con un esquema de un edificio se pueden contemplar detalles de las estructuras al hacer clic en cada uno de los puntos numerados (ver el ejemplo.)

Las posibilidades del html dinámico se están sólo empezando a explotar de una forma general. Hasta hace relativamente poco sólo los sitios más vanguardistas apostaban plenamente por estas técnicas, mientras que la mayoría de proyectos empresariales, negocios online, etc. Apostaban por páginas más conservadoras que pudieran llegar a la mayoría de usuarios, con independencia de que hayan actualizado sus navegadores o no.

Organizar diseños con Java, Flash y otras tecnologías.

El uso de Flash, Java y otras tecnologías puede hacer de las páginas algo aún más atractivo y con funcionalidades sorprendentes. Ahora bien, su uso debe ponderarse y tener en cuenta que es posible que parte de la audiencia no logre acceder a esos contenidos por una inadecuada configuración de su navegador. En el caso de puntos de acceso en una red local, es posible que cada terminal no pueda instalar el plugin solicitado y, por tanto, debe tenerse en cuenta si realmente lo que se va a ofrecer no puede resolverse con html normal e imágenes. Cuando existe una diferencia muy significativa de tamaño de ficheros, complejidad y efectividad, debe apostarse por la alternativa que resulta más claramente favorable. En caso de que realmente no haya una gran diferencia es mejor utilizar el html convencional.

Los applets de Java pueden aportar funciones extendidas a nuestra web, pero no es aconsejable que tengan un papel imprescindible a partir de las páginas iniciales. Los problemas de configuración en los usuarios son comunes y por tanto es conveniente preparar un sitio que ofrezca la mayor parte de contenidos y recursos prescindiendo de Java, y ubicar los applets en páginas concretas. No es mala idea avisar de que el funcionamiento correcto de estas depende de la correcta configuración del navegador.

Flash es algo fabuloso, pero sólo para determinados supuestos. Su uso indiscriminado -e inadecuado- es una de las peores chapuzas en la web actual. Hoy resulta fácil crear espectaculares animaciones de títulos que rotan, se acercan y alejan, explotan y se reconstruyen... ¿y qué? También es fácil crear (o conseguir ya hechos) animaciones, títulos tridimensionales, o aplicar texturas hiperrealistas. Al final, todos estos efectismos gratuitos (en el doble sentido de la palabra: cuestan poco o nada y no vienen a cuento) son un indicador preciso de la falta de gusto de un diseñador o del amateurismo con que se ha planteado la web.

Aún así, llama la atención el hecho de que muchas páginas, incluídos proyectos realizados con muchos recursos, presentan inacabables películas de Flash que no son más que un obstáculo irritante para acceder al contenido. La descarga de enormes animaciones que nada aportan (aparte del lucimiento del diseñador) es irritante para el usuario, que se pregunta ¿para esto he tenido que esperar tanto?

Como todas las cosas, Flash debe utilizarse con gusto y cuando puede resolver situaciones que difícilmente pueden abordarse con otros recursos. Algunas pistas dentro de nuestra web sobre cuándo utilizar Flash y un pequeño taller práctico.