Si ya tiene claro para qué desea tener su sitio web en Internet (para publicar su currículum, crear un sitio dedicado a sus aficiones, un boletín electrónico de su barrio, o tan sólo para experimentar), lo mejor es que apunte todo lo que le gustaría contar y visite en Internet todas las páginas que pueda sobre el mismo tema o que por su estructura puedan servirle para tomar ideas. En ocasiones puede ser la idea de poner un pequeño icono, un enlace a su dirección de correo o un diseño que le haya gustado: tan sólo deberá descargar la página como HTML en su disco duro y abrirla con PageMill para adaptarla a sus necesidades. En el caso expuesto, se trata de crear una revista electrónica, pero su estructura básica puede servir para un montón de propósitos.

Empezar el trabajo

Una vez que tenga la “estructura lógica” de sus páginas es el momento de realizar un boceto de la estructura visual de la página. Por supuesto, antes de comenzar a experimentar tenga en cuenta lo expuesto en la primera parte de este artículo publicada el mes pasado en iMacworld. En el caso del ejemplo mostrado se optó por una estructura típica en tres columnas, ya que permite situar en un lateral el menú de navegación con el que acceder al resto de las secciones desde cualquiera de las páginas y en las otras dos se pueden mantener o suprimir elementos según se vea necesario. Sin embargo, si sus propósitos son distintos puede utilizar una estructura diferente. Antes de decirse por una estructura visual, visite cuantas más páginas pueda para tomar ideas o incluso descargarse una página cuya estructura le sirva como punto de partida.

Diga adiós a la vista previa. A pesar de que PageMill se presenta como un editor web con capacidad para mostrar el contenido de la página cómo se verá en el navegador, el aspecto de la página (tanto en modo edición como en modo vista previa o Preview Mode) difiere un poco, por no decir mucho, del aspecto real en un navegador. Es muy recomendable que olvide la previsualización de PageMill y tenga como referencia el resultado que muestran los navegadores. Asimismo es conveniente que observe los resultados siempre en los navegadores más habituales (Navigator y Explorer) y en varias plataformas (Mac OS, Windows), ya que muchas veces el aspecto cambia significativamente entre distintos navegadores y plataformas.

Situar los objetos. Una de las desventajas del diseño web con respecto al diseño convencional es que situar los elementos en el lugar deseado es en ocasiones bastante complicado. Sin embargo, existen algunos trucos que ayudan a los diseñadores a colocar los elementos donde lo necesitan con la mayor precisión posible. De estos trucos, los más extendidos son el uso de tablas e imágenes invisibles, y la combinación de estos elementos con un poco de paciencia puede proporcionar resultados muy interesantes (incluso sin saber una palabra de HTML) y con una aplicación tan sencilla como PageMill.

Las imágenes

Salvo que sea usted muy poco exigente con el aspecto visual de la página que va a crear, querrá introducir imágenes y otros recursos gráficos. Si bien PageMill incorpora lo que se podrían llamar “capacidades para editar imágenes”, éstas se limitan a la posibilidad de convertirlas a formato GIF y hacer transparente uno de los colores. Lo mejor que puede hacer si quiere realizar un trabajo medianamente vistoso es conseguir una herramienta de edición gráfica. Lo ideal sería contar con una aplicación como Photoshop, pero si su complicación o precio no se lo permiten, puede probar con aplicaciones más asequibles como Adobe PhotoDeluxe o Metacreations Painter Classic (ver artículo “Un artista en casa” publicado en Macworld 81) o incluso con alguna aplicación shareware como Graphic Converter.

Si no se siente con la paciencia necesaria para crear los logos o los iconos de su página, puede adquirir una colección de clip art en la que encontrará símbolos, fotos y dibujos con los que ilustrar su diseño. Lo único que debe tener en cuenta es que si realmente desea realizar un trabajo completamente original, el empleo de imágenes “enlatadas” (bien sean procedentes de una colección de clip art o de Internet) puede no ser el camino más adecuado, aunque sí le pueden servir para adaptar iconos, logotipos e ilustraciones.

En la página que sirve de ejemplo, el logotipo de Rock Stars se realizó con el programa de diseño vectorial Adobe Illustrator y se le dio el acabado en Photoshop, el resto de las imágenes se digitalizaron con un escáner o se tomaron de Internet y se adaptaron y optimizaron en Photoshop.

Las imágenes visibles y las invisibles. Sea cual sea el camino que tome en cuanto la forma de incorporar imágenes en su página, si desea tener control sobre la disposición de los elementos en ella deberá tener en cuenta que la mayoría de los elementos de las páginas web se comportan como objetos elásticos salvo que tengan algo que se lo impida, y ese algo suele ser una imagen.

Los formatos gráficos que más se utilizan en diseño web son JPEG y GIF. El primero suele funcionar muy bien cuando se trata de incorporar imágenes procedentes de fotografías o que tienen muchos colores, mientras que el formato GIF se suele utilizar para dibujos con pocos colores. Por otro lado, el formato GIF tiene una característica interesante en su capacidad para hacer que una zona o un color de la imagen se vea como transparente en el navegador.

Esta característica se utiliza mucho ya que permite crear una pequeña imagen transparente (1 x 1 píxeles de tamaño) que se colocará como una “imagen fantasma” con diferentes medidas y que servirá para que una tabla no se cierre o no se abra o “empujar” alguno de los elementos de la página. Si no dispone de un editor de imágenes, puede probar a tomar una captura (Comando+Mayúsculas+4) lo más pequeña que le sea posible en una parte de la pantalla que sea de color blanco (abriendo una carpeta vacía, por ejemplo), abrir el documento con SimpleText y copiar su contenido directamente en PageMill. Una vez en la página, seleccione la imagen, ábrala con el editor de imágenes de PageMill (Comando+D) y haga clic en su interior con la herramienta en forma de varita. Cierre la ventana guardando los cambios y ya tiene una imagen transparente con la que ayudarse para controlar la disposición de los elementos en la página.

Ponga estilo

Crear una página atractiva es una tarea que implica tener en cuenta muchos factores, como la estructura general, la navegación, el tratamiento de las imágenes, el color, etc. No obstante, una de las piezas claves de todo diseño se encuentra en el empleo de la tipografía que, por desgracia, es uno de los puntos débiles del diseño en Internet. Aunque PageMill y otros editores web permiten utilizar distintas tipografías, tenga en cuenta que los usuarios que accedan a sus páginas sólo verán éstas si están instaladas en su ordenador. Para evitar este problema es muy recomendable que, de entre todas las fuentes que PageMill permite utilizar (que son todas las que tenga instaladas en su ordenador), utilice sólo las fuentes que vienen instaladas con el sistema operativo. En el ejemplo mostrado sólo se utilizaron los tipos Geneva y Times, que se encuentran en casi cualquier Macintosh. Sin embargo, con esta precaució