Guía para diseñadores gráficos

Guía para diseñadores gráficos > Diseño de páginas web programadas

Diseño de páginas web programadas

Las posibilidades y utilidades de la programación web son prácticamente infinitas, limitadas únicamente por la imaginación. Por ejemplo, un programa web puede generar un contenido específico para cada usuario de Internet (en función de su procedencia, entradas o consultas anteriores...), puede tratar y guardar la información enviada por un usuario a través de un formulario, puede enviar correos electrónicos, puede generar o retocar imágenes, puede presentar informaciones de productos almacenados en una base de datos...

De todas las posibilidades de la programación web, la utilidad más utilizada es la que permite crear páginas con listados de elementos (categorías, productos, servicios, empresas, personas...) que enlacen a páginas con información individual de cada elemento del listado, todas estas generadas de un modo automático, obteniendo los datos (textos, imágenes y otras informaciones) de una base de datos que el cliente puede exportar a Internet o administrar a través de una intranet (programas web de gestión privados).

En este apartado vamos a describir las posibilidades y limitaciones en el diseño de páginas web programadas con listados o con información de elementos obtenidos de una base de datos. De todos modos, es necesario insistir que tales limitaciones no son reales, aunque facilitaran el trabajo del maquetador y programador y por lo tanto abarataran el coste del proyecto.

Página web programada para presentar un elemento

Antes de empezar a diseñar las páginas web de los elementos, tendríamos que preguntarnos:

  • Qué información de la base de datos deseamos presentar por cada elemento (nombre, imagen, descripción, precio, web, dirección...)
  • Cuáles son las dimensiones máximas y mínimas de las informaciones a presentar: ¿todas las imágenes tienen el mismo tamaño? ¿el texto a presentar tiene longitudes muy diferentes dependiendo del elemento?
  • ¿Existen informaciones que se pueden presentar para unos elementos y no presentarse para otros? Por ejemplo, unos productos pueden tener rebajas y otros no, unas empresas pueden tener dirección mail y otras no,...

A continuación podremos empezar a esbozar el diseño de la página web que va a presentar los datos e informaciones de cada elemento. Normalmente, todas las páginas web de cada elemento tendrán el mismo diseño y estructura o composición por lo que tendremos que prever cómo se comportará el bloque principal y los bloques secundarios si las informaciones a presentar varían:

  • Las informaciones (texto o imágenes) de dimensiones más largas o grandes se cortarán para caber en el espacio diseñado.
  • O, los bloques serán fluidos (en ancho, altura y/o posición) en función de las dimensiones de la información a presentar o en función del número de informaciones a presentar. En este caso tendremos que diseñar la página web teniendo en cuenta las posibles variaciones de la estructura.

Si se desea que las páginas web de determinados elementos tengan un diseño completamente distinto (ofertas, empresas destacadas, productos sin estoc...), se tendrán que diseñar tales páginas del mismo modo especificado más arriba.

Idealmente, cada elemento de la base de datos debería tener un título, descripción y palabras clave para optimizar la página en los buscadores (ver Optimización para los buscadores - SEO)

Ejemplos de páginas de elementos programadas por Javajan:
- Ejemplo de producto (www.esteller.com): http://www.esteller.com/es/productos/navaja-gigante/26/39/347/348/445/1478.html
- Ejemplo de producto (www.spirafootwear.es): http://www.spirafootwear.es/products_running_product.php?idFamily=1&idFamilySub=19

Página web programada para presentar un listado

Por defecto, cada elemento del listado web se presentará dentro de un bloque. El diseño de cada bloque listado seguirá el mismo procedimiento que el diseño de las páginas de elementos web programadas. Así pues, tendremos que definir los datos o informaciones a presentar para cada elemento (y las posibles excepciones). A continuación podremos empezar a esbozar el diseño de cada bloque que va a presentar la información de cada elemento. Normalmente, los bloques de cada elemento se diseñarán con la misma estructura y composición, por lo que tendremos que prever cómo se comportará el bloque si las informaciones a presentar varían, del mismo modo que vimos en el apartado anterior.

Si se desea que determinados elementos tengan un diseño de bloque completamente distinto, será necesario diseñar este nuevo bloque y prever el comportamiento de este bloque con el resto.

A parte de la estructura y diseño de los bloques de los elementos, debemos diseñar también como se van a listar los distintos bloques. Las siguientes son las opciones más comunes.

  • De lado (¿Cuántas columnas se presentarán como máximo?)
  • Unos debajo de los otros (lo más utilizado cuando principalmente se presenta texto).

Además, tendremos que definir cuántos elementos se listaran como máximo por cada página. Si no se listan todos los elementos en la primera página, tendremos que diseñar enlaces para acceder a la continuación de los listados.

Ejemplos de listados programados por Javajan:
- Listados de categorias y productos (www.esteller.com): http://www.esteller.com/es/marcas/Wenger/productos/navajas-suizas/classic/26/39/347/348.html
- Listados simples de productos (www.spirafootwear.es): http://www.spirafootwear.es/products_catalog.php?idFamily=1

Intranet

Normalmente, una intranet no es pública y solo es accesible mediante nombre de usuario y clave de acceso (password). La intranet será utilizada por el cliente para consultar, añadir o eliminar elementos (productos, servicios, categorías, empresas, personas...) o actualizar sus informaciones (textos, imágenes, precios, vídeos...).

Normalmente una intranet no necesita un diseño muy elaborado, por lo que el presupuesto de un proyecto web siempre se abaratará si el programador toma un diseño estándar utilizado para sus programas. En principio, el cliente final o el diseñador solo necesitan especificar al programador qué elementos de la base de datos serán necesarios consultar o gestionar.

Ejemplo de Intranet programada por Javajan:
http://www.javajanonline.com/admin_basica (acceder con nombre de usuario: admin y clave de acceso: basica

JAVAJAN [somos maquetadores y programadores web]. Webs for designers & you. www.javajan.com © 2012 | Avís legal
TwitterFacebookRSSe-mail