PORTAL WEB

FUNCIONALIDAD, ESTILOS Y MAPA

[ESCRIBA EL NOMBRE DE LA COMPAA] [Seleccione la fecha] Autor: AUTOR

HISTORIAL DE DOCUMENTO
FECHA VERSIN DESCRIPCIN AUTOR

TABLA DE CONTENIDO
1. Resumen 2. Introduccin 3. Planificacin del sitio 3.1. Definicin de objetivos 3.1.1. Objetivo general 3.1.2. Objetivos especficos 3.2. Personal involucrado 4. Definicin de servicios interactivos 5. Definicin de audiencia 6. Escenario de uso 7. Definicin de la Infraestructura Tecnolgica 7.1. Arquitectura del sitio web 8. Definicin del sitio 8.1. Definicin de contenido 8.2. Requerimientos funcionales 8.3. Requerimientos no funcionales 8.4. Definicin de estructura del sitio 8.4.1. Mapa de sitio 8.4.2. Sistema de navegacin 8.5. Diseo visual 8.5.1. Wireframes 8.5.2. Logo 8.5.3. Colores 8.5.4. Diseo de interaccin 8.6. Casos de uso 9. Construccin del Sitio web 9.1 Maquetacin HTML 9.2 Programacin 10. Plan de prueba 11. Plan de lanzamiento 12. Plan de mantenimiento Pg. 4 5 6 6 7 7 8 9 9 10 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

RESUMEN
Debe ir una breve descripcin del documento, es decir, nos presenta de forma rpida en que consiste el documento. Se recomienda manejo de resumen en espaol e ingles.

INTRODUCCIN
Nos da una pauta con un poco mas de detalle sobre el contenido del documento, mencionando mas formalmente algunos de los puntos que se desarrollaran a lo largo del mismo.

PLANIFICACIN DEL SITIO

Para desarrollar y poner en marcha un sitio web o emprender el rediseo de un sitio ya existente, se sugiere comenzar por dar respuesta a un grupo muy concreto de interrogantes, que permitirn aclarar y definir de manera bsica las expectativas en torno al sistema de informacin e interaccin que se va a generar. Dichas preguntas son las siguientes: 1. Para qu necesita el sitio web la organizacin? 2. Para qu necesita el sitio web la audiencia a la que se dirige? 3. Qu informacin de la organizacin es til para la audiencia? 4. Qu imagen de la organizacin quiero proyectar en mi audiencia? 5. Qu servicios interactivos entregar a travs del Sitio Web? 7. Quines pueden ayudarme a realizar el proyecto?

DEFINICIN DE LOS OBJETIVOS

En base a lo obtenido de las preguntas anteriores podr generar los objetivos generales y especficos del sitio. OBJETIVO GENERAL Nos indica el propsito general del portal cual es la idea fundamental de que se disee. OBJETIVOS ESPECIFICOS Se podr enfocar a las metas que maneja la empresa, es decir a quien va dirigido, por que disearlo, que metas cumple

PERSONAL INVOLUCRADO
Se describen los perfiles de las personas que pueden participar en el desarrollo del sitio, como pueden ser Director, lder de proyecto, editor de contenidos, proveedor de informacin, responsable tcnico, desarrollador, etc.

DEFINICIN DE SERVICIOS INTERACTIVOS

Se definE, con cierta anticipacin, el tipo de tecnologas que se emplearn para llevar a cabo los objetivos. La intencin en este caso, es que la definicin temprana de lo que se espera conseguir permitir tomar decisiones concretas en las fases siguientes y de esa manera asegurar que el proyecto se dirija a cumplir las metas que se hayan diseado. En esta parte es de suma importancia cumplir con una o ms de las siguientes tareas, que generarn la informacin bsica para la toma de decisiones respecto de las funcionalidades: Evaluar los servicios que se ofrecen actualmente a los clientes: ayudar a entender cules son las reas organizativas clave y la forma en que estn operando en la actualidad, con el fin de extraer de ellas los procedimientos de trabajo con que contar la atencin de usuarios a travs del Sitio Web. Identificar unidades gestoras de informacin: permitir realizar las coordinaciones necesarias internamente para ver de qu manera el Sitio Web y las operaciones virtuales que puedan hacer sus usuarios, se relacionar con la operacin fsica de la organizacin. Analizar procesos y elaborar diagramas de flujo: permitir entender de manera visible y documentada la forma en que se est operando y ayudar a determinar en qu partes del proceso el sitio web puede aportar valor. Identificar contenidos y procesos que puedan ser publicados: ayudar a definir de mejor forma las funcionalidades que se estn detallando, puesto que permitir conocer concretamente los recursos iniciales con que se operar a travs del Sitio Web.

DEFINICIN DE AUDIENCIA
El primer paso a la hora de emprender un diseo web es conocer a nuestros usuarios potenciales: cules son sus objetivos, necesidades y expectativas; cul es su nivel de experiencia y conocimientos tecnolgicos; qu posibles limitaciones de acceso pueden tener; qu otros sitios web similares pueden estar acostumbrados a usar, etc. No todos los sitios web se dirigen al mismo pblico, y por tanto un mismo diseo no puede ser igual de eficaz independientemente del contexto. Una de las formas ms concretas y econmicas de establecer la audiencia, es comenzar por investigar en la propia organizacin: entrevistar especialmente a empleados que atienden al pblico, informes y estudios realizados por el Departamento de Marketing, informacin de bases de datos de clientes (CRM), etc.

ESCENARIO DE USO
Lo que se busca es que, basados en las audiencias posibles, sea factible imaginar los tipos de contenidos que ellos vendrn a buscar al sitio. En este sentido, la expresin estudiar escenarios de uso busca determinar situaciones de uso reales en el Sitio Web, basado en usuarios existentes que puedan llegar al sitio a buscar determinados tipos de informacin. Al llegar a casos reales de uso del sitio, es posible establecer con mucha mayor exactitud cmo esas personas (es decir casos reales) van a usar el sitio. Naturalmente, este tipo de revisiones permiten ratificar o modificar lo que se haya definido previamente como contenido del sitio, debido a que muchas veces la planificacin inicial es hecha por personas que conocen la organizacin y dan por obvios muchos de los contenidos que para los usuarios normales no lo son tanto.

DEFINICION DE INFRAESTRUCTURA TECNOLOGICA

Llegados a este punto se deben especificar las tecnologas que sustentarn el desarrollo, funcionamiento y mantenimiento del sitio web. Esta especificacin se realiza en dos niveles: Hardware: se refiere a los elementos fsicos del sistema. En el caso ms simple lo compondr el servidor donde quedar alojado el Sitio Web y los elementos de infraestructura de red. Software: son los programas y aplicaciones que se necesitan para que el Sitio Web pueda ejecutar las funciones y tareas que se van a ofrecer a los usuarios del sistema.

Ejemplos de software pueden ser un gestor de contenidos para manejar el proceso de publicacin y actualizacin de contenidos, el sistema operativo del servidor, programas de gestin de bases de datos, una tienda virtual, etc. Los recursos de hardware y software necesarios pueden variar sustancialmente en funcin de la complejidad de las funcionalidades y servicios que se desean incorporar al sistema, el volumen de informacin que debe manejar el sistema y el nmero estimado de usuarios a atender, entre otros factores.

ARQUITECTURA DEL SITIO WEB

En trminos generales, debe indicar que plataformas tecnolgicas ocupara para desarrollar la arquitectura, ejemplo: Arquitectura "Open Source": Servidor Web Apache Lenguaje de programacin de aplicaciones: PHP Bases de datos: MySQL

Arquitectura Microsoft: Servidor Microsoft IIS

Lenguaje de programacin de aplicaciones: ASP.NET. Bases de datos: Microsoft SQL / MySQL

Arquitectura Java: Servidor Web Tomcat. Lenguaje de programacin aplicaciones: JSP. Bases de datos: soporta sistemas de varios fabricantes: Oracle, Microsoft SQL, etc. Tal y cmo se ha comentado anteriormente las caractersticas y arquitectura del sistema dependern de los requerimientos y alcance del proyecto. A la hora de seleccionar la plataforma hay que considerar que ciertos componentes requieren licencias de los fabricantes y que, por tanto, tienen un impacto directo en el coste del proyecto. Es lo que se denomina tecnologas propietarias. Por ejemplo en el caso de implementar una base de datos SQL u Oracle se debern pagar las licencias correspondientes mientras que MySQL es un sistema de bases de datos de cdigo abierto open source de libre distribucin. Bien es cierto que las prestaciones de SQL u Oracle son superiores a MySQL. Por tanto antes de seleccionar la plataforma se debern considerar los requerimientos iniciales del proyecto, adems de criterios de coste.

DEFINICIN DEL SITIO

Los elementos que se muestran a continuacin constituyen la metodologa de la Arquitectura de Informacin, mediante la cual es posible conseguir las metas de organizacin y visibilidad de los contenidos. Cada una de ellas debe ser investigada, desarrollada y documentada adecuadamente: Definicin de Contenidos del Sitio Definicin de la Estructura del Sitio Definicin de los Sistemas de Navegacin Definicin del Diseo Visual

DEFINICIN DE CONTENIDO
Una vez que se han identificado los objetivos del sitio y la audiencia, se debe proceder a hacer las definiciones ms concretas que permitan decidir qu contenidos son los que va a tener el sitio web que se desarrolle. Puede usar la misin, visin, valores y dems informacin que el cliente desee agregar al sitio.

REQUERIMIENTOS FUNCIONALES
Junto con la bsqueda e identificacin del contenido que deber tener el sitio, se debe trabajar tambin en la definicin de lo que se busca que el sitio haga, es decir, los tipos de interaccin que se busca incluir como pueden ser comnmente formularios de solicitud de informacin, procesos de registro y suscripcin, buscadores de informacin o documentos, etc.

REQUERIMIENTOS NO FUNCIONALES
Se puede enfocar a los requerimientos de interfaz extrema, usabilidad, rendimiento, seguridad, poltico, etc.

DEFINICIN DE ESTRUCTURA DE SITIO

Una vez que se ha hecho el trabajo de identificacin y clasificacin de contenidos reseados en las etapas anteriores , se debe avanzar hacia las definiciones relacionadas con la forma que tendr el sitio que se est desarrollando. Ello implicar trabajar en tres reas concretas, a travs de las cuales se definir la estructura del sitio, el rbol de contenidos y los sistemas de navegacin que se ofrecer a los usuarios para que avancen a travs de sus contenidos. En esta fase se realiza el proceso de identificar la forma que tendr el sitio web que se est desarrollando. En este sentido es importante hacer una diferencia entre estructura y diseo: Estructura: se refiere a la forma que tendr el sitio web en trminos generales con sus secciones, funcionalidades y sistemas de navegacin. No considera ni incluye elementos grficos (logotipos, vietas, etc.). Diseo: se refiere a la solucin grfica que se crear para el sitio, en la cual aparecen colores, logotipos, vietas, y otros elementos de diseo que permiten identificar visualmente al sitio. Dado lo anterior, cuando hablamos de la estructura nos estamos refiriendo bsicamente a cul ser la experiencia que tendr un usuario cuando accede al sitio. De esta manera podremos determinar donde estarn ubicados los servicios interactivos (buscador, reas de contenidos, formulario, etc.). Gracias a la realizacin de esta etapa es posible discutir en trminos muy prcticos cul ser la oferta de elementos de informacin e interaccin que tendr el usuario. Al no incluir elementos de diseo, se permite que la discusin sobre la estructura se desarrolle en aspectos concretos, sin que intervengan an consideraciones estticas que habitualmente atrasan la aprobacin de esta etapa del desarrollo. Dicho de otro modo La Estructura del sitio web se refiere a las conexiones y relaciones entre pginas, a su topologa. Un sitio web puede encontrarse estructurado de forma muy diversa, solapar diferentes tipos de estructuras y contener subestructuras diferentes a la estructura general. A continuacin se exponen las estructuras ms comunes. Estructura secuencial: Las pginas se encuentran interrelacionadas de forma lineal. Esta estructura es recomendable cuando es necesario que el usuario complete cada uno de los pasos ordenadamente (carrito de compra, registro como usuario, etc.). Estructura hipertextual: El hipertexto es la base sobre la que se asienta la Web. En una estructura hipertextual las pginas se enlazan por similitud o relacin directa entre los contenidos, permitiendo al usuario que se encuentra visualizando una pgina 'saltar' hacia otras que le puedan interesar por contener informacin relacionada. Este tipo de estructura, si bien ofrece mayor

libertad y dinamismo a la navegacin puede ocasionar desorientacin, provocando que el usuario se sienta 'perdido'. Estructura jerrquica: en este caso las pginas se estructuran definiendo relaciones jerrquicas entre ellas (padre-hijo) Probablemente la jerrquica es la estructura de informacin ms comn en sitios web. La organizacin en forma de rbol, por un lado resulta lo suficientemente flexible y escalable como para posibilitar la organizacin de grandes cantidades de pginas, y por otro resulta muy orientativa para el usuario en su navegacin. MAPA DE SITIO Se refiere al proceso de crear un rbol de contenido en el que se muestre de manera prctica cuntas secciones tendr el sitio en desarrollo y cuntos niveles habr dentro de cada uno. Cuando se usa la idea de crear un rbol, se refiere exactamente a generar un diagrama que cuente con un tronco, ramas y hojas, para mostrar las zonas principales, secundarias y contenidos finales que se irn incorporando. En este sentido se debe evitar a toda costa que el rbol de contenidos represente la estructura de la organizacin, dado que sta es conocida y comprendida internamente, pero constituye una barrera de entrada para usuarios externos. Si ellos llegan a buscar en una estructura de contenidos basada en la forma en que funciona la organizacin, primero debern comprender cmo funciona la entidad para luego encontrar lo que les interesa. Dado lo anterior, las recomendaciones para la generacin de este rbol son las siguientes: Secciones: se debe intentar que sean las menos posibles, con el fin de concentrar las acciones del usuario en pocas reas; hay que considerar que cada una de las reas a integrar en el rbol requerir de mantenimiento posterior en contenidos, grfica y funcionalidad, lo que encarecer el costo final de operacin del sitio. Dado lo anterior, se recomienda que las secciones se siten entre 5 y 7. Niveles: se debe intentar que el usuario est siempre a menos de tres clics del contenido que anda buscando. Por ello no se debera crear ms de tres niveles de acceso; esto significa una Portada, una Portadilla de Seccin y los Contenidos propiamente tales. Contenidos relacionados: se debe considerar que habr funcionalidades que estn presentes en todo el sitio. Entre ellas se incluyen elementos como Buscador, Preguntas Frecuentes y Formularios de Contacto. Se recomienda que este tipo de elementos quede fuera del rbol y floten sobre ste, con el fin de indicar que desde todas las pginas habr enlaces a ellos.

SISTEMA DE NAVEGACIN Una vez que se cuenta con los rboles de contenido desarrollados en el paso anterior, la tarea siguiente consiste en generar los sistemas de acceso a dichos contenidos en el sitio web. A travs de estos, los usuarios podrn avanzar por sus diferentes reas, sin perderse. En la estructura arquetpica de los sitios web podemos diferenciar entre sistemas de navegacin global, local y contextual:

Sistemas de navegacin global: son aquellos conjuntos de enlaces que estructuran el contenido del sitio web en diferentes secciones principales. Su funcin es la de orientar al usuario acerca de donde se encuentra y qu otras secciones principales puede visitar. Sistemas de navegacin local: su funcin es ofrecer el acceso a las sub-secciones del sitio web. En muchas ocasiones estos sistemas son los que incluyen la clasificacin (taxonoma) de los productos o contenidos del sitio web. Sistemas de navegacin contextual: suelen estar integrados en el propio contenido, en apartados o bloques de tipo enlaces relacionados, noticias relacionadas, es decir son aquellos sistemas que permiten la navegacin transversal.

DISEO VISUAL
Una vez que se ha terminado el trabajo en la estructura, ya se cuenta con los elementos suficientes como para avanzar hacia la generacin del diseo visual de las pantallas del sitio, momento en que se utilizar la documentacin que se han ido generando en las etapas anteriores. Para ello la recomendacin es trabajar en cuatro etapas sucesivas e incrementales, que se describen a continuacin:

WIREFRAMES
Los wireframes especifican la arquitectura y organizacin de los contenidos y navegacin de cada pgina o grupos de pginas. Sirven de vnculo entre la estructura subyacente del sitio web y su aspecto visual dando respuesta a cuestiones como la forma y presentacin de los sistemas de navegacin y bsqueda, la ubicacin de los rtulos y la ordenacin de los contenidos en una perspectiva espacial. Lo ideal es que estos dibujos no tengan ningn elemento grfico o visual concreto, sino que slo incluyan lneas y bloques que representen objetos de contenido (como logos, vietas o fotos). Nuevamente, el uso de estas imgenes ayudar a que la discusin sobre cada pantalla se centre en la funcionalidad y no en temas ms subjetivos como colores o calidad de los elementos de diseo en la pgina.

LOGO Se realiza la presentacin de logo de la empresa, asi como una breve explicacin del mismo. COLORES Indicar que colores se ocuparan para la empresa y explicar el por que de ellos. DISEO DE INTERACCIN Por diseo de interaccin nos referimos a la actividad y resultado de definir el comportamiento interactivo del sitio web, es decir, qu acciones se ofrecern al usuario en cada momento, y cmo responder la aplicacin a las acciones que realice. Cuando se realizan operaciones en la web tales como comprar un billete de avin, realizar una transaccin econmica, etc., es el diseo de interaccin el que ha de velar para que todo el proceso se realice de forma adecuada, sin fallos, y que el usuario sea capaz, en todo momento, de saber qu est haciendo y cmo puede hacer lo que desea. Una de las metodologas ms concretas para asegurar que la experiencia del usuario se est resguardando adecuadamente, es la generacin de diagramas de flujo mediante los cuales se representan grficamente las posibilidades de accin que tiene un usuario enfrentado a tomar una decisin en un Sitio Web.

CONSTRUCCION DEL SITIO WEB

Habla bsicamente de la construccin y codificacin del portal y debemos ver los siguientes puntos:

MAQUETACIN DE HTML
En el caso de un Sitio Web esttico, es decir, una coleccin de pginas HTML estructurada en un directorio, esta etapa corresponder a la construccin del sitio y consiste en generar todo el sitio en tecnologa HTML utilizando los elementos grficos, imgenes y contenidos reales. En el caso de un sitio dinmico, en esta etapa se generan las plantillas HTML que utilizarn los desarrolladores de software para introducir la programacin que generar los contenidos de cada pgina. En este caso los contenidos de pgina quedan almacenados en una base de datos (textos, imgenes, archivos multimedia, etc.).

PROGRAMACIN
Hablamos de las tareas de programacin que se dividen en 2: Programacin Front-end: se trata de la programacin relacionada con el interfaz de usuario. En este etapa se programan las plantillas HTML definindose las reas de contendido de cada una de ellas de modo que posteriormente se pueda cargar la informacin que corresponda a cada rea (texto, imgenes, mens , etc.) a travs del sistema de administracin del gestor de contenidos. Programacin Back-end: se refiere a la programacin y configuracin del sistema de administracin y las bases de datos que soportarn la carga y publicacin de los contenidos del Sitio Web.

PLAN DE PRUEBA
Una vez que el sitio se ha construido, es necesario hacerlo pasar por una serie de pruebas antes de entrar a la fase de produccin. Mediante dichas pruebas, se medir su reaccin integral frente a diversas acciones que realizarn los usuarios desde sus pginas. COMO Y QUE PROBAR Con el fin de probar las diferentes capacidades de un Sitio Web, es necesario dividir el trabajo en cinco reas, que son: Pruebas de Interfaces y Contenidos Pruebas de Funcionalidades y Operacin Pruebas de Carga Pruebas de Seguridad Pruebas de Respaldo y Recuperacin

PLAN DE LANZAMIENTO
Para hacer el lanzamiento de un nuevo Sitio Web es obligatorio que el nuevo sitio haya cumplido adecuadamente las pruebas antes descritas, con el fin de que todos los contenidos prometidos estn incorporados y las funcionalidades realicen todo aquello que se describe respecto de ellas. Si hay contenidos o funcionalidades descritas que no pueden estar disponibles para el momento en que se desea hacer el lanzamiento del Sitio Web, es preferible eliminarlos en ese momento e incorporarlos cuando estn listos, en lugar de dejarlos en el sitio y que den una mala imagen sobre el mismo.

PLAN DE MANTENIMIENTO
Una de las caractersticas ms importantes de la funcin de un Sitio Web es que uno de sus roles principales es el de constituirse en un vehculo de informacin y servicio entre la organizacin y la audiencia a la que est dirigida. En este sentido, se debe tener claro que crear el Sitio Web no es un objetivo en s mismo, sino que es el primer paso para contar con una herramienta que se utilizar para difundir informacin, ofrecer servicios y otros fines de acuerdo a las necesidades que tenga la organizacin. Dada la definicin anterior, el mantenimiento del Sitio Web no es una tarea que deba descansar en forma directa en el Departamento de Informtica (o su equivalente), ya que eso significara que se le da una visin exclusivamente tcnica, o que slo deba estar en manos del departamento de Comunicacin (o su similar), porque en ese caso no tendra una visin de incorporarle las mejoras tcnicas que correspondan de acuerdo al adelanto de la tecnologa.