Planificacion Inicial del Sitio Web Objetivos: definir las metas del proyecto; éstas deben ser generales y especificas, con el fin de contar con el mayor detalle posible de lo que se desea conseguir.Vender: como herramienta para incrementar las ventas, bien a través de la venta directa (comercio electronico) o mediante la generacion de contactos cualificados para cerrar la venta fuera del entorno digital. Servir: como una herramienta para ofrecer serviciospre y post venta a los usuarios/clientes. Hablar: como una herramienta para acercarse al cliente, estableciendo didlogos, aprendiendo sobre ellos. Ahorrar: ara reducir costes de servicio mediante la automatizacion de procesos operativos. Impactar: como una herramienta para construir y extender la presencia de marca en el mundo digital.Audiencia: hacia qué grupo de personas estara enfocado el sitio. - Encuestas - Arquetipos de usuarios - Escenarios de Uso Tecnologia: qué servicios interactivos se incorporaran al sitio y qué infraestructura se necesita para sustentar dichos servicios.Hardware: se refiere alos elementos fisicos del sistema. En el caso mas simple lo compondrd el servidor y los elementos de infraestructura de red. Software: son los programas y aplicaciones que se necesitan para que se pueda ejecutar las funciones y tareas que se van a ofrecer a los usuarios del sistema. [| Navegador Estaticas Laarquitecturadeun =| & § A —_Peticion de pagina ~ ee sitio Web tienetres is we —@ componentes principales: ae un servidor Web, 1 ooo una conexi6n de red, Pagna Ht, y uno 0 mas clientes (navegadores)Dinamicas re = La informacién esta =O almacenada en una base , de datos, ylas paginas son ress a creadas dindmicamente. =“ Arquitectura “Open Source”: * Servidor Web Apache + Lenguaje de programacion de aplicaciones: PHP * Bases de datos: MySQLArquitectura Microsoft: * Servidor Microsoft IIS + Lenguaje de programacion de aplicaciones: ASP.NET. + Bases de datos: Microsoft SQL / MySQLc. Arquitectura Java: * Servidor Web Tomcat. + Lenguaje de programacion aplicaciones: JSP. « Bases de datos: soporta sistemas de varios fabricantes: Oracle, Microsoft SQL, etc.Definicion del Sitio Web Arquitectura de Informacion. La Arquitectura de la Informacion es el conjunto de métodos y herramientas que permiten organizar los contenidos, para ser encontrados y utilizados por los usuarios, de manera simple y directa. Definicion del Sitio Web Definicion de Contenidos del Sitio Definicion de la Estructura del Sitio + Definicion de los Sistemas de Navegacion Definicion del Disefio Visual ImagenAspecto visual e Requerimientos y necesidades Estructura del sitio Esqueleto del Interfaz implementactn jaro ( a Se Abstracto Concreto (basado en los diagramas de jesse james garret) Definicidn de Contenidos del Sitio Una vez que se han identificado los objetivos del sitio y la audiencia, se debe proceder hacer las definiciones mas concretas que permitan decidir qué contenidos son los que va a tener el sitio web que se desarrolle « Clasificacion orientada a la audiencia « Clasificacion orientada ala tarea « Clasificacién tematicaDefinicion de la Estructura del Sitio Se realiza el proceso de identificar la forma que tendrd el sitio web que se esta desarrollando. En este sentido es importante hacer una diferencia entre estructura y disefio. Estructura: se refiere a la forma que tendra el sitio web en términos generales con sus secciones, funcionalidades y sistemas de navegacidn. No considera ni incluye grdficos Disefio: se refiere a la solucion grdfica que se creard para el sitio, en la cual aparecen colores, logotipos, vifietas, y otros elementos de disefio que permiten identificar visualmente al sitio.Estructura Se refiere a las conexiones y relaciones entre paginas Estructura secuencial Estructura hipertextual Estructura jerarquica Mapa del Sitio Se refiere al proceso de crear un “arbol de contenido” en el que se muestre de manera practica cuantas secciones tendra el sitio en desarrollo y cuantos niveles habra dentro de cada uno.+ Secciones: se debe intentar que sean las menos posibles, con el fin de concentrar las acciones del usuario en pocas areas. » Niveles: se debe intentar que el usuario esté siempre a menos de tres clicks del contenido que anda buscando. + Contenidos relacionados: se debe considerar que habra funcionalidades que estén presentes en todo el sitio.Definicidn de los Sistemas de Navegacion: Sistemas de navegacion global: son aquellos conjuntos de enlaces que estructuran el contenido del sitio web en diferentes secciones principales. Sistemas de navegacion local: su funcion es ofrecer el acceso a las sub-secciones del Sitio web. del sitio web. Sistemas de navegacién contextual: suelen estar integrados en el propio contenido, en apartados o bloques, son aquellos sistemas que permiten la navegacidn transversal.Caracteristicas de los Sistemas de Navegacion + Consistente: el sistema debe ser similar en todo el sitio, en lo referido a su ubicacién y disposicién en las paginas. ¢ Uniforme: el sistema debe utilizar similares términos dentro del sitio. « Visible: el sistema debe distinguirse claramente dentro del sitio. Definicién del diseno visual La recomendacion es trabajar en cuatro etapas sucesivas e incrementales.Diseno de las Estructuras de Paginas: Wireframes Los wireframes especifican la arquitectura y organizacion de los contenidos y navegacion de cada pagina o grupos de paginas. Sirven de vinculo entre la estructura del sitio web y su aspecto visual. {Project Name} 5.0 oj Homepee> Notes = Hare | ibe ADH] | soar aceite Sear [ ‘Searen Qe cones reteset Oeste cnitine Vorraeanpe eaeDisefo de interaccion Por diseno de interaccion nos referimos ala actividad y resultado de definir el comportamiento interactivo del sitio web. Diagramas de flujo ad Bocetos de Diseno Esta etapa consiste en la generacion de dibujos digitales acabados de la forma que tendran las paginas principales del sitio que se desarrolla.LOREM IPSUM LOR Construccion del Sitio Web Maquetacion HTML En el caso de un sitio estatico, esta etapa corresponderd a la construccién del sitio y consiste en generar todo el sitio en tecnologia HTML utilizando los elementos graficos,imagenes y contenidos reales.En el caso de un sitio dindmico, en esta etapa se generan las plantillas HTML queutilizaran los desarrolladores de software para introducir la programacion quegenerard los contenidos de cada pagina. En este caso los contenidos de paginaquedan almacenados en una base de datos (textos, imagenes, archivos multimedia,etc.) Programacion Poco a poco se ha pasado de modelos basados en paginas estaticas a aplicaciones web de alta complejidad que gestionan contenidos. Partiendo de este planteamiento las tareas de programacién se dividen en dos partes:Programacion Front-end: se trata de la programacion relacionada con el interfaz de usuario. En este etapa se programan las plantillas HTML definiéndose las dreas de contendido de cada una de ellas de modo que posteriormente se pueda cargar la informacién que corresponda a cada drea a través del sistema de administracién del gestor de contenidos. Programacion Back-end: se refiere a la programacion y configuracion del sistema de administracion y las bases de datos que soportaran la carga y publicacion de los contenidos del Sitio Web