Fases de Diseño de un sitio Web: I. Fase Creativa

El proceso de diseño y creación de un buen sitio web requiere una buena dosis de planificación y organización en el trabajo. Se pueden distinguir varias fases en este proceso que se trataran paso a paso a lo largo del curso:

• La fase creativa (tormenta de ideas). En esta primera fase es muy importante tener claro el objetivo de nuestro sitio web, se piensa la idea central alrededor de la que vamos a crear todas las páginas y se discute sobre cómo desarrollarla. En esta fase es también importante hacer un estudio de mercado para tener claro a quién va dirigida la página y cuales son sus intereses.
• La fase de preproducción(bocetos previos). En esta segunda fase se realizan los primeros bocetos para tener claro el aspecto final que queremos que tenga nuestro sitio web. Contenido de cada página, textos, imágenes, colores y los efectos que producen, etc.
• La fase de producción (recopilación de material y creación de las páginas). En esta fase se recopila toda la información que queremos incluir en el sitio web y se crean los elementos que falten (edición de texo, búsqueda o creación de imágenes, etc.) hasta que el sitio web esté completamente terminado.
• La fase de postproducción (pruebas, críticas y reconstrucciones). Una vez terminado el sitio web habrá que probarlo detalladamente: comprobar que todos los enlaces funcionan, que las imagenes se ven correctamente, que la página es accesible desde los navegadores previstos, que se ve adecuadamente para las resoluciones más utilizadas, que los textos no contienen faltas de ortografía, etc.

Pasaremos por la fase creativa y de preproducción durante la primera semana mientras hablamos de los aspectos de diseño de un sitio web. Entraremos en la fase de producción durante la segunda y tercera semanas cuando elaboremos todas nuestras páginas mientras aprendemos las bases del lenguaje HTML. Por último abordaremos la fase de postproducción la última semana donde rediseñaremos el sitio web que hayamos creado teniendo en cuenta los aspectos de accesibilidad y las opiniones recogidas sobre nuestro trabajo.

A lo largo del curso vamos a ir paso a paso analizando el proceso de desarrollo de un sitio web acompañados de un personaje ficticio llamado Telémaco que ha decidido crear su propia página en Internet. Seguir a Telémaco en el desarrollo de su proyecto nos ayudará a crear nuestro propio sitio web que publicaremos en Internet al finalizar el curso.

En Internet podemos encontrar páginas con contenido muy diverso. Si consultas las páginas que te proponemos a continuación (para hacerlo pulsa sobre los hiperenlaces subrayados en azul) verás que los distintos sitios web se distinguen tanto por su estructura como por su presentación y por sus contenidos. Por lo general las páginas con los mismos objetivos y audiencia (por ejemplo las páginas de los distintos periódicos) tienen estructuras y contenidos similares, aunque suelen diferir bastante en la presentación (colores, tipos de letra, organización en pantalla, etc.), y a veces en los servicios que ofrecen al usuario.

Ejercicio

Tarea

Analizar las semejanzas y diferencias de varios sitios web atendiendo a su estructura, contenido y presentación y viendo la relación que guardan estos aspectos con el objetivo del web y su audiencia potencial.

Procedimiento

1. Consulta las siguientes páginas web observando principalmente sus semejanzas y diferencias en cuanto a estructura, contenido y presentación.
   • Paginas de empresa con información sobre sus actividades, su equipo directivo, los servicios que ofrecen, los casos de éxito, sus balances, etc. (Planeta, Endesa, Accenture)
   • Páginas de distintas publicaciones: periódicos, revistas, guías de televisión, etc. (http://www.abc.es, http://www.elpais.es, http://www.elmundo.es)
   • Tiendas de venta de libros, discos, material informático, etc., o incluso guias de compras con enlaces a distintas tiendas (http://es.kelkoo.com/)
   • Páginas sobre hobbies o intereses personales: grupos de música, estrellas de cine, películas, personajes históricos, etc. (http://www.carygrant.net/, http://www.audreyhepburn.org/grahamspage/)
   • Portales de ocio (http://www.portalmix.com/) con acceso a servicios de correo, agenda, envío de mensajes a móviles, noticias de actualidad, anuncios, etc.
2. Comenta con tus compañeros en el foro titulado "Aspectos de Diseño" las conclusiones que obtengas de tu análisis sobre como influyen los objetivos y audiencia de un sitio web en su estructura, contenido y formas de presentación y navegación.

Como ves en Internet se puede encontrar casi de todo. El diseño de un buen sitio web comienza por definir cual va a ser el objetivo de nuestra página. Ejemplos de objetivos en los sitios web que acabas de visitar serían: Informar sobre un tema concreto (en el caso de las páginas de hobbies), conseguir clientes (en el caso de las tiendas) , proporcionar información de contacto (en el caso de algunas páginas personales), etc.

El propósito de un sitio web no tiene porqué ser único. Por ejemplo en el caso de las empresas es muy frecuente encontrar varios objetivos reflejados en sus páginas: proporcionar una imagen corporativa, dar información a sus clientes, contratar personal mediante una bolsa de trabajo, ofrecer algunos de sus servicios tradicionales aprovechando el nuevo canal de comunicación o incluso ofertar nuevos servicios.

Un ejemplo de servicio tradicional trasladado a la web es el servicio de localización de paquetes ofrecido por la empresa SEUR. Este servicio permite al usuario saber en cada momento la localización de un paquete que haya enviado o que esté esperando recibir. Para acceder a este servicio el usuario sólo tiene que introducir los datos del envío en la página web. Desde que SEUR ofrece este servicio ha conseguido disminuir considerablemente el número de llamadas telefónicas a su línea de atención al cliente.

Para definir el propósito de un sitio web conviene responder previamente a estas preguntas:

• ¿Qué tipo de información queremos poner disponible en el web?.
• ¿Qué ventajas nos aporta que esa información sea pública y accesible desde cualquier parte del mundo?
• ¿Nos podría ocasionar algún inconveniente?
• ¿A qué tipo de personas va dirigida?.
• ¿Qué requisitos tienen los futuros usuarios de nuestro web (qué tipo de servicios necesitan, cuales son sus requisitos técnicos, etc.)?.
• ¿Qué material adicional necesitamos para enriquecer el contenido que queremos hacer público (imágenes, fotos, estadísticas, etc.) ?

Antes de embarcarnos en la construcción de un sitio web conviene hacer algunas búsquedas en Internet para revisar páginas existentes que tengan una temática un propósito o una audiencia similar a las de nuestro proyecto. Conocer las páginas similares nos aportará algunas ideas y también nos ayudará a decidir los aspectos que queremos que diferencien a nuestra página de las demás. El proyecto a desarrollar a lo largo de este curso consiste en crear un sitio web con información personal. En internet puedes encontrar muchas páginas personales. No todas ellas tienen los mismos objetivos, algunas tratan de recopilar un conjunto de información profesional que sirva como extensión de la tarjeta de visita o del currículum para relaciones profesionales. Otras tratan de ser un punto donde centralizar la información de un conjunto de amigos. Otras son una forma de darse a conocer para contactar con gente de intereses similares, etc. Las próximas tareas te ayudarán a definir el propósito de tu propia página web.

Aplicación práctica

Tarea

Analiza las diferencias de contenido, estructura, presentación y navegación de diversas páginas personales en función de los objetivos y tipo de audiencia.

Procedimiento

1. Consulta en internet varias páginas personales. Aquí te proporcionamos algunas a modo de ejemplo pero puedes localizar muchas más en Internet utilizando un buscador (puedes utilizar como palabras de búsqueda la cadena "página personal" o un nombre común)

   Las páginas que te proponemos son muy variadas en cuanto a su calidad y sus contenidos. En ellas puedes encontrar información biográfica de sus autores, fotografías, información de contacto, currículums, etc.:
   

   • http://www.multired.com/educa/dibruwai/ (Un ensayo de página: muy sencilla y con muy poca información)
   • http://www.etsimo.uniovi.es/~feli/index2.html (Observa en la parte de opinión como utiliza un formulario para recoger sugerencias y mejorar la página)
   • http://www.indiana.edu/~ist/faculty/reigelut.html (Información biográfica, de contacto, fotografía, currículum, etc.)
   • http://www.it.uc3m.es/abel/indice.html (Página personal tipo de un profesor del Departamento de Ingeniería Telemática)

2. Comenta con tus compañeros en en el foro titulado "Aspectos de Diseño" las páginas consultadas (tanto las que os sugerimos como las que vosotros hayais encontrado en la web). Tratad de analizar entre todos qué debería y qué no debería tener una página personal dependiendo de sus objetivos y la audiencia a la que va dirigida.

3. Escribe a modo de borrador un breve resumen con las conclusiones que hayas extraído del debate ya que esta información formará parte de un documento que tendrás que entregar más adelante.

El propósito de Telémaco para poner su propia página en internet es tener un sitio en la red desde el que darse a conocer y mantener contacto con sus amigos o hacer nuevos amigos que compartan sus mismas aficiones. La audiencia de su web van a ser sus compañeros de estudios y de trabajo y gente con sus mismos intereses. Por ello el web de Telémaco tendrá un tono informal y las secciones de su web serán:

• Una página de entrada con algunas notas biográficas y su foto para darse a conocer.
• Una página de fotos dirigida principalmente a sus amigos donde irá colocando las fotos de viajes y excursiones en común para poder intercambiarlas con ellos a través de la red.
• Una página de intereses donde inicialmente colocará enlaces relativos a sus principales aficiones como el arte, el cine o los deportes. Esta página irá evolucionando con el tiempo y con ella pretende captar como "audiencia" a otras personas interesadas en los mismo temas. En un futuro, cuando conozca algo más de la tecnología web le gustaría poner un foro y un portal de noticias donde poner las noticias más recientes de los temas que le interesan para mantenerse al día pero de momento en esta primera versión mantendrá únicamente un listado de sitios interesantes.
• Una página de enlaces de interés donde pondrá información que consulta habitualmente como la programación de televisión, mapas de carreteras o la guía de teléfonos. Con esta página quiere conseguir dos cosas:
  • Por un lado tendrá la información accesible desde cualquier parte del mundo lo único que tiene que hacer es localizar un cibercafé y podrá disponer de su agenda de direcciones desde cualquier lugar del mundo, algo muy útil en sus múltiples viajes.
  • Por otra parte estas páginas que centralizan información útil son una forma de garantizar que la gente volverá a su sitio web en el futuro para hacer consultas y lo utilizará como estrategia para "fidelizar" a su público. Telémaco piensa que si ofrece un servicio de páginas útiles (callejeros, mapas, etc.) la gente se conectará a su página con más frecuencia y así podrán ver las novedades que haya ido introduciendo en sus diferentes secciones.
  • Si Telémaco quiere que su estrategia tenga éxito es muy importante que mantenga la página actualizada y compruebe periódicamente que todos los enlaces funcionan. Si alguien se conecta para consultar algo y encuentra un enlace roto es probable que no vuelva a intentarlo en un futuro.

Aplicación práctica

Tarea

Establece el propósito de tu sitio web y la audiencia a la que va dirigida. Decide si el tono de tu sitio web será formal o informal y el tipo de contenidos a incluir en función de tus objetivos y tu audiencia.

Procedimiento

1. Escribe un documento llamado ObjetivosWeb indicando cual es el propósito de tu página web, cuales van a ser los contenidos y a qué tipo de público va dirigida (máximo 1 página)
2. El documento deberá contener como mínimo la siguiente información:
   • Objetivos generales de tu página web.
   • Audiencia a la que va a ir dirigida
   • Contenido (conjunto de páginas que formarán el sitio web) y cómo cada una de ellas te ayudará a cumplir los objetivos propuestos.
   • Argumentación razonada que justifique la inclusión de los contenidos que propones en función de tus objetivos y tu audiencia (el documento resumen que elaboraste con las conclusiones del debate sobre páginas personales te puede ser útil para esto).
3. Envia el documento ObjetivosWeb al profesor. Para ello utiliza el enlace que aparece al principio de este documento.
4. El profesor te enviará por correo los comentarios a tu documento. Corrígelo y guardalo porque formará parte del documento DisenioWeb que tendrás que entregar al final de este módulo (observa que hemos sustituido la letra "ñ" por "ni" porque no conviene utilizar caracteres especiales para los nombres ya que algunos sistemas de ficheros no entienden estos caracteres).