tipos de diseño web

Programas de edición web

Actualmente crear una página web no presenta ningún problema. Por un lado, hay una amplia oferta de programas específicos que facilitan la tarea; por otra parte, la mayoría de programas corriente, como Microsoft word, o StarOffice, tienen una opción de guardar como página web (html), de manera que basta con preparar el documento como siempre y guardarlo aprovechando esta opción.

Los programas de edición de HTML.

De todos modos, si queremos crear páginas web con un mayor control sobre su diseño, necesitamos un editor dedicado para html; preferiblemente, que sea un editor visual, para no tener que empezar memorizando el código html. Por suerte, no es necesario comprar uno de estos programas, porque con las últimas versiones de los navegadores se incluye una utilidad para crear y publicar nuestras maravillas! Con Internet Explorer viene FrontPage Express (una versión reducida de su programa comercial FrontPage) y Netscape lleva el Composer. Ambos programas son sencillos de utilizar, cuentan con completa ayuda y no están nada mal para empezar. StarOffice tampoco os costará nada y viene perfectamente equipado para la creación y publicación web. Hay muchas otras alternativas, pero para empezar estas son las más adecuadas.

Crear una página básica no puede ser más sencillo: abrimos la aplicación, sea Composer o Frontpage, y tendremos una página en blanco para trabajar. Tecleamos el texto o lo pegamos, después de haberlo copiado de un fichero que ya tengamos escrito. Se colocan las imágenes situándose en la posición donde se quiere incluir, pulsando el botón que representa Insertar Imagen (o en el menú, eligiendo Insertar | Imagen); se elige el archivo gif o jpg de la lista que aparece, buscando la carpeta adecuada si es preciso, y ya está. Podemos elegir la forma en que el texto rodea la imagen, y ya está. Se guarda la página y el programa genera todo el código html.

Para páginas más complejas, debemos explorar las diferentes opciones del programa. Todo es muy fácil de usar e intuitivo. La herramienta más potente para el diseño son las tablas. Dominando su manejo se puede crear el diseño más impactante y funcional con el editor más sencillo. Como se ve en la imagen siguiente, los inspectores de propiedades de las tablas incluyen toda la información necesaria para controlar el aspecto del layout. hasta el más mínimo detalle: Así, ¿es innecesario conocer el lenguaje de definición de las páginas web, el HTML? Si queremos crear páginas con una cierta seriedad, la respuesta es sí: conviene mirar la ayuda del programa o tener a mano alguna referencia de los códigos del lenguaje (o consultar nuestra pequeña página de referencia de HTML.) Aunque no tengamos intención de escribir directamente el código, nos ayudará mucho saber qué son los encabezamientos H1, H2... qué es un retorno forzado de carro (<br>), etcétera.

Editores profesionales.

Si queremos herramientas más profesionales, la oferta es variada. Los últimos editores de páginas web permiten una gestión de websites completos, facilitando enormemente la tarea de establecer enlaces, funciones avanzadas de formato (CSS, multimedia, animaciones, Java...), uso de plantillas... desde el punto de vista de una empresa también facilitan la creación de catálogos con información vinculada a bases de datos, sistemas de comercio electrónico, etcétera.

Muchos profesionales editan sus documentos html directamente en modo código, puesto que la fiabilidad de los editores visuales no es absoluta: en muchos casos colocan las etiquetas de tablas en lugares equivocados o bien generan un código excesivamente complicado, lo que lo hace difícil de revisar. Existe una miríada de excelentes editores html en modo texto. Si bien un bloc de notas es más que suficiente, estos programas, tipo Homesite, 1st page 2000, HTML-Kit, etc. incorporan toda una serie de ayudas encaminadas a agilizar la edición del código y la gestión de proyectos con muchos archivos.

Probablemente, los tres programas de edición visual más completos de calibre profesional son  NetObjects Fusion , Macromedia Dreamweaver y Adobe Golive. Con cualquiera de los tres es posible un control preciso del aspecto de la página web y es muy fácil añadir interactividad y efectos tales como los mouseovers. Son programas caros, de forma que hacer el gasto sólo compensa para alguien con perspectivas profesionales. NetObjects Fusion es una excepción: puede comprarse la versión 4 a un precio muy reducido y es una herramienta poderosísima. Nosotros al menos los hemos probado, en sus diferentes versiones, cosa que podéis hacer obteniendo un cd-rom promocional o descargando una versión de evaluación de la web de sus respectivos fabricantes, NetObjects, Macromedia o Adobe.

Las capacidades ya por sí muy amplias de estos programas se pueden ampliar utilizando plug-ins y otras extensiones que realmente aportan funcionalidades muy importantes a las aplicaciones, en ocasiones automatizando tareas o realizando operaciones que de otro modo resultarían mucho más trabajosas. Algunos de estas extensiones son gratuitas, mientras que en otros casos son comerciales. Se comentan algunas extensiones en el artículo dedicado a los plugins (sección de diseño gráfico.)

   

La forma en que se crea un sitio en Fusion es prácticamente opuesta a la mayoría de programas; aquí, tener un sitio estructurado y con estilo coherente no es el resultado de añadir páginas independientes, sino el paso previo, necesario, a introducir contenido en ellas.

Aquí podemos ver las ventanas de trabajo donde planificamos la estructura de nuestro sitio, bien en forma de carpetas grandes con la estructura en forma de diagrama, bien en forma de árbol parecido al explorador de windows.

NetObjects Fusion

No hay manera más rápida y flexible de crear una web completa que con Fusion. El proceso viene guiado por la sobria y atractiva interfaz del programa: 1) Crear el sitio, 2) Añadir contenido a las páginas, 3) Aplicar estilo al conjunto y 4) Publicar. El poder del programa radica en que crea el sitio como una base de datos con todas sus características; por ello, puede aplicarse cualquier cambio quedando al instante arreglado en todas y cada una de las páginas. A partir de esta base de datos, al final se generan todas las páginas html, carpetas y gráficos necesarios.

1. Crear el sitio: Se empieza casi al revés que en otros programas; empezamos por definir la web completa, antes de crear ninguna página. Esto se hace con un esquema en árbol con unos iconos parecidos a post-its que representan las páginas. Podemos modificar la estructura como queramos, añadir o quitar páginas, cambiarlas de sitio, cambiar nombres... el programa es totalmente flexible.

2. Llenar las páginas con contenido. Una vez definida la web de este modo (con la posibilidad de cambiarlo cuando se quiera),  el programa definirá todas las páginas y una estructura de navegación automática, que puede configurarse como se desee. Lo que más quebraderos de cabeza lleva, en este programa es algo sin importancia. Podemos concentrarnos en el trabajo creativo y de creación de contenidos. Abrimos las páginas y añadimos contenido gráfico y textual. Nuevamente, las herramientas disponibles lo hacen muy fácil. El programa recuerda más una aplicación profesional de DTP que un editor de html; para cada elemento seleccionado el programa muestra un panel con sus propiedades, para que podamos cambiarlas si es necesario.

No debemos preocuparnos por el html, puesto que se genera automáticamente a partir de los objetos que hayamos colocado en cada página. Cada página lleva su propio gráfico de título, y barras de navegación que pueden apuntar al mismo nivel, el superior, el inferior, o el primero del sitio, según se elija. Puede optarse por una barra de botones gráficos (con efectos de rollover automáticamente creados y distinguiendo la página actual del resto de opciones) o por texto. La posición de los elementos de navegación en cada página o en cada sección completa se puede cambiar según se desee. La forma en que se puede establecer la navegación es sorprendente: se puede crear muy fácilmente un enlace de tipo secuencial para páginas que se puedan ver una tras otra. No importa si las recolocamos; el programa siempre maneja el enlace correcto.

Añadir contenidos es sumamente fácil: basta con elegir el icono correspondiente; pueden colocarse también applets de Java, películas de Flash, formularios... para determinadas funciones, el programa utiliza los llamados components, que ayudan en la preparación de formularios, applets de Java, imágenes que cambian... Respecto de los componentes, el programa es extensible, ya que incluye una colección de ellos, pero acepta otros desarrollados externamente. Algunos de éstos son utilísimos, como uno llamado InsertMeta (se puede obtener de www.apollon.de)

3. Controlar los elementos (assets) Con la información de las páginas y la estructura del sitio, el programa registra cada elemento del sitio, sea un enlace, un gráfico, un applet, etcétera en una base de datos que "todo lo vigila": si movemos de carpeta un gráfico, movemos, cambiamos de nombre o eliminamos alguna página, no tendremos que ir de página en página arreglándolo todo, bastará modificar el fichero de assets, los objetos que incluyen las páginas, para que todo quede arreglado.

4. Configurar el estilo. Para tener una web de aspecto profesional, Fusion se encarga de aplicar un estilo homogéneo a todas las páginas, de acuerdo con unas plantillas llamadas SiteStyles, que incluyen los gráficos necesarios para los botones de navegación, el fondo de la página, los títulos, además del tipo de letra elegido, el color de los enlaces... Hay una gran cantidad de plantillas listas para usar, algunas de ellas francamente acertadas. Cubren prácticamente todos los estilos; pero también se pueden crear a medida: sólo hay que preparar los gráficos básicos porque el programa hace el resto: este es el aspecto del Sitestyle de nuestra web:

Fusion no es rígido en ningún momento; cada página puede tener un estilo independiente del resto. Pero todas aquellas páginas que tienen aplicado el estilo común se podrán arreglar automáticamente con sólo elegir un nuevo SiteStyle o modificar alguna de las partes que lo forman. Hacer un "lifting" a una web con esta aplicación, lejos de ser una fuente de dolores de cabeza, se convierte en algo entretenido y creativo, sin preocupaciones técnicas. El tiempo y esfuerzo que se ahorra en relación a otros programas es impresionante: las tareas más mecánicas, tales como asignar enlaces, colocar los elementos fijos de las páginas no deberá preocuparnos en absoluto.

5. Finalmente, sólo queda la tarea de publicar. Aquí también el programa facilita el trabajo enormemente: basta con escribir el nombre de nuestro servidor, nuestros datos y se encarga de transferir ficheros y crear todas las carpetas necesarias; puede publicarse todo completo, una sección, una sola página o sólo los archivos modificados desde la última sesión.

Tantas alabanzas a este programa se deben, naturalmente, a que lo tengo (haciendo una excepción a mi habitual cometido de rey del Cheapware.) ¡Pero resulta que este programa puede entrar perfectamente en la categoría de Cheapware! El programa está en su versión 5, pero la 4 (incluso las anteriores) es igual de poderosa y puede comprarse sólo por 59 $, unas 10.000 pesetas, un precio ridículamente bajo en comparación con otros programas que no son ni la mitad de eficientes. Encontraréis más información en www.netobjects.com o en www.efuse.com.

Dreamweaver  y Adobe Golive son, por otro lado, estupendos programas con los que trabajar es muy agradable; su interfaz también es elegante, simple y al mismo tiempo con todo el control imaginable. Son herramientas profesionales que se utilizan por parte de los mejores estudios de creación digital. Sin embargo, sus capacidades de manejo de sitios completos no son ni de lejos tan potentes como las de Fusion. Sus puntos fuertes son sobre todo la incorporación de los últimos avances en diseño web, un acertado manejo de plantillas y una buena integración con otros programas relacionados, como los editores de gráficos para web (Fireworks.) Nosotros hemos probado varias versiones de Dreamweaver y, efectivamente, se trata de un magnífico programa (en él construímos la versión original catalana de Vigital.) Es posible obtener una versión de demostración, plenamente funcional durante 30 días, tanto de Golive como Dreamweaver. Los programas se dominan si se tiene experiencia en creación de páginas, en unos cinco minutos.

Por otro lado, existen una serie de programas enfocados específicamente a la creación de webs dinámicas, vinculadas a bases de datos y que proporcionan páginas creadas en el momento en el servidor en función del usuario que las visite. ¡Esto ya es un tema mucho más avanzado! Existen una serie de programas que sirven para este tipo de creación web: el propio Fusion, Drumbeat, Generator...

Buenos editores freeware

Aparte de los mencionados FrontPage Express, Composer y StarOffice (o cualquier programa con capacidad de exportar como html), si buscamos algo más completo y profesional encontraremos una variada oferta de tipo freeware o shareware.

Para editar código directamente cualquier editor de texto vale, pero programas como Note Tab Light son una bendición con sus características avanzadas de búsqueda y reemplazamiento, librerías de recortes, etc.

Existen diferentes programas de edición web de tipo freeware, como podemos comprobar visitando cualquier servidor de ficheros en la red, o con una colección en cd-rom. Si queréis una recomendación, os aconsejamos un programa muy avanzado y completo, con todas las últimas posibilidades de creación de páginas dinámicas: FirstPage 2000. Su interfaz es bastante intuitiva, i ofrece todas las prestaciones para crear páginas atractivas y funcionales, con todo tipo de efectos y añadidos. Su ayuda es muy detallada, tiene plantillas listas para usar, una gran biblioteca de efectos Javascript  y DHTML... aunque no es adecuado para un principiante, al menos la versión que conocemos (pronto se publicará una nueva versión.) puesto que se trabaja a nivel de código, aunque las etiquetas se eligen visualmente.

No hay nada que pueda hacerse con Golive o Dreamweaver que no se pueda hacer o superar con FirstPage 2000, y no es difícil dominar su manejo. Su interfaz cambia según el grado de experiencia que le indiquemos: podemos elegir entre cuatro grados crecientes de dominio del html: fácil- normal- experto y "hardcore". Dado que no os costará nada, podéis descargar el programa y probarlo. Sólo por sus colecciones de scripts y ayuda ya vale la pena. Gratis, de Evrsoft.

Otro programa recomendable es un proyecto del consorcio de la www, llamadoAmaya. Se trata de un navegador / editor visual bastante potente. a oferta de editores de HTML shareware es bastante amplia y podemos encontrar listados completos en las secciones de editores html de cualquiera de las webs que recomendamos en la sección final, o a partir de un servidor de ficheros como softonic.com. Algunos de los más populares son HotMetal Pro , HotDog y Allaire Homesite (por cierto, éste se obsequia con Fusion.) Y aún hay muchos más, como HTMLKit.

Programas complementarios.

Algunos programas de edición web son del tipo "todo en uno", pero a veces viene bien o es necesario tener algún programa auxiliar para preparar las páginas. Estos programas pueden complementar las deficiencias de un editor básico como Composer o FrontPage Express, o simplemente, cubrir todas las necesidades de la creación de la web. Necesitaremos, típicamente:

• Programas para el manejo y creación de les imágenes;
• Creadores de animaciones, que puede ser un mismo programa de la categoría anterior.
• Creadores y aplicadores de hojas de estilo CSS (si se quieren usar.)
• Un programa cliente de FTP para subir los archivos al servidor (aunque cada vez más los editores pueden hacerlo por sí mismos de forma más o menos inteligente.

Para crear otro tipo de adiciones, como Flash o PDF casi no queda otro remedio que adquirir la aplicación correspondiente. Flash se puede probar durante 30 días sin limitaciones, y es fácil encontrar varias versiones anteriores (ahora ya van por la 5), de manera que se puede tener en uso durante varios meses, tiempo suficiente para crear un montón de animaciones. De todas maneras, otros programas permiten crear archivos flash estáticos, o documentos pdf básicos.

Una utilidad de compresión de ficheros, tipo zip, si queremos añadir este tipo de archivos a nuestro sitio. Existen un montón de programas gratis de este tipo.

De todos estos tipos de programas hablamos en las secciones correspondientes; si tenéis proyectado crear contenidos para la Web, evidentemente, también navegaréis por ella, y os convendrán algunas de las utilidades que destacamos en nuestra página de "Cheapware".