Curso de Webmaster I

Fundamentos

Qu es el Diseo Web?

Conceptos Bsicos: La pirmide del diseo Web

Las cuatro caractersticas principales del diseo Web son:

1. El contenido
2. La tecnologa 3. Los aspectos visuales 4. Los aspectos econmicos

Conceptos Bsicos: La pirmide del diseo Web

FINALIDAD

Usuarios

CONTENIDO

Diseadores

FORMA (visual)

FUNCION (tecnologa)

Conceptos Bsicos: Los diversos sitios Web.

Complejo
Sitio creado dinmicamente Aplicacin basada en la Web

Sitio Web Puramente esttico

Sitio esttico con Formulario de entrada Acceso dinmico a datos A travs de un sitio Web

Simple

Centrado en el documento

Centrado en la Aplicacin

Fundamentos de diseo Web Construir para los usuarios

Un error frecuente en el desarrollo Web es que los sitios se construyen mas para los diseadores y sus necesidades que para los verdaderos usuarios La clave para obtener el xito en el diseo de un sitio web funcional es pensar siempre teniendo en cuenta el punto de vista del usuario

Fundamentos de diseo Web Utilidad y facilidad de empleo

Los buenos sitios son aquellos realmente provechosos para sus usuarios.
La utilidad comprende todas las funciones del sitio que satisfacen las necesidades del usuario La facilidad de empleo es la facilidad de la que dispone el usuario para manejar las funciones del sitio con el fin de conseguir un determinado objetivo. Los sitios funcionales sern eficientes, fciles de manejar y ayudaran a los usuarios a conseguir sus objetivos de manera satisfactoria y sin errores

Fundamentos de diseo Web Atencin al contenido

Los sitios Web suelen estar mas enfocados al contenido que el software tradicional
El contenido es lo que estructura un sitio web

Un contenido original y de calidad es el activo mas importante de la Web.

Los usuarios buscan contenidos utiles y cuando los encuentran, los consumen con voracidad.

Fundamentos de diseo Web Navegando los contenidos

Los usuarios necesitan ayuda para no perderse en un sitio. Es necesario asignar nombres claros a los vnculos, agrupar de forma lgica los botones, emplear ttulos de paginas claros y elementos de navegacin consistentes Estructurar de forma clara el sitio, ayuda, pero una buena navegacin necesita algo mas que una buena estructura.
Los mejores diseos Web, son a menudo, aquellos que utilizan una navegacin sencilla y refinada La navegacin es solamente un medio para conseguir un resultado final

Fundamentos de diseo Web Importancia del Aspecto

Un buen sitio Web tiene que funcionar y tiene que ser fcil de navegar.
Con frecuencia lo primero en que repara el usuario, es el aspecto visual. El aspecto del sitio puede influir en la opinin que tenga el usuario sobre el mismo Los elementos visuales influirn en gran medida en la percepcin inicial del sitio por parte del usuario

Fundamentos de diseo Web Valor permanente

Aunque, en un principio, el aspecto importa, los usuarios se olvidaran poco a poco de ese tema a medida que vayan utilizando el sitio.
Cuando un usuario abandona un sitio se lleva lo que podramos llamar el valor permanente, un sentimiento bsico de mayor o menor xito de la visita al sitio. El valor permanente esta ligado al hecho de que el usuario haya logrado concretar sus objetivos dentro del sitio El valor permanente del sitio viene determinado por los aspectos visuales, el contenido, la tecnologa, la facilidad de empleo y la consecucin del objetivo.

Fundamentos de diseo Web Equilibrio entre Forma y Funcin

La funcin sin la forma seria aburrida; aunque el sitio funcione, no inspirara al usuario.
Si la forma es impresionante y la funcin es limitada, el usuario quedara desconcertado. La forma de un sitio debera estar directamente relacionada con su finalidad La determinacin de la forma mas adecuada para un sitio presupone que la funcin del sitio esta claramente definida

Fundamentos de diseo Web Lo que se ve es lo que se desea

EL control debera estar en manos del usuario o, al menos, debera parecerlo.
Lo que se ve es lo que se desea, es una consigna centrada en el usuario y cede al usuario el control de lo que quiere ver y de cmo quiere verlo. El usuario debera ser dueo de sus propias acciones, permitindosele navegar sin rumbo, realizar cualquier tipo de bsqueda, imprimir el contenido mostrado.

El proceso de Diseo Web

Metodologa

Proceso de Diseo Web Mtodo Web ad hoc

Es un mtodo muy sencillo, consiste en desarrollar el sitio, efectuar una inspeccin visual con un explorador, corregir errores y publicar en la Web
Los sitios desarrollados con este mtodo informal presentan numerosos problemas Este mtodo se utiliza en proyectos muy pequeos cuando solo se cuenta con un solo diseador / programador y cuando el mantenimiento necesario en el futuro es de poca entidad.

Proceso de Diseo Web Modelo del Mtodo Web Bsico

Es un mtodo deductivo, se inicia con una idea del conjunto y se va estrechando hasta llegar a los pasos necesarios para terminar el sitio.
En ingenieria de software, a este modelo se le denomina Modelo en Cascada o Modelo del ciclo de vida del software Este modelo obliga a los diseadores a planificar cada paso desde el principio.

Proceso de Diseo Web Modelo en Cascada

Definicin del problema Exploracin del concepto Anlisis de los requisitos Especificacin

Diseo de prototipos

Realizacin y pruebas unitarias Integracin y ensayo Del sistema Publicacin, explotacin Y mantenimiento

Planificacin del sitio Objetivos Generales

Esta seccin debera contener una breve argumentacin para explicar el propsito global del sitio y las medidas bsicas adoptadas para alcanzar el xito.

Planificacin del sitio Objetivos Especficos

En esta seccin se analizaran detalladamente los objetivos del sitio y se proporcionaran unos objetivos mensurables para verificar la utilidad del sitio

Planificacin del sitio Anlisis de la Audiencia

Esta seccin debera contener los perfiles de los usuarios que van a visitar el sitio. La seccin describir tanto las caractersticas de la audiencia como las tareas que esta audiencia trata de realizar en el sitio.
Qu obtienen del sitio? Qu desean ejecutar? Cundo visitaran el sitio? Duracin por visita?

Donde viven? Qu edad tienen? Idioma? Conocimientos tcnicos?

Planificacin del sitio Anlisis de lo escenarios de empleo

En esta seccin se analizan los diversos escenarios de tareas que realizaran los usuarios del sitio.
Comience primero analizando como llegara el usuario a sitio, y despus, continu la visita hasta su conclusin. En esta seccin se pueden incluir tambin un anlisis de cmo concluye la visita, por ejemplo, previendo el numero de descargas, paginas accedidas, etc siempre que estn relacionados con el anlisis detallado de los objetivos

Planificacin del sitio Requisitos del contenido

La seccin de requisitos del contenido proporcionara una lista de todos los textos, imgenes y otros medios de comunicacin que se necesita incluir en el sitio. Elaborar una matriz en la que se presenten el contenido, la forma, la existencia y el posible propietario o creador resulta de gran utilidad.

Planificacin del sitio Requisitos Tcnicos

Esta seccin deber proporcionar una visin general de los tipos de tecnologas que se emplearan en el sitio, tales como HTML, Javascript, CGI, JAVA, etc.
Los requisitos tecnolgicos deberan estar directamente relacionados con las capacidades de los usuarios.

Planificacin del sitio Requisitos Visuales

En la seccin de requisitos visuales se subrayaran las consideraciones bsicas para el diseo de la interfaz.
Esta seccin deber indicar a grandes rasgos como se relacionara el sitio con cualquier material de marketing existente y definir las restricciones que tendrn los usuarios para emplear grficos y otros elementos multimedia (tamao de pantalla, colores..) Esta seccin puede resaltar algunos detalles especficos como: tipo de fuente, color

Planificacin del sitio Requisitos de Distribucin

Esta seccin contendr los requisitos de distribucin, particularmente cualquier tema relacionado con la funcin como host.
En esta seccin deber incluirse un anlisis bsico del numero de usuarios que visitaran el sitio, cuantas paginas se visitaran en un acceso tpico y cual es el tamao de una pagina estndar

La mayora de estos datos son estimaciones que nos permitirn definir correctamente las funciones que debe realizar cada pagina.

Planificacin del sitio Diagrama de la estructura del sitio

Esta seccin debe proporcionar la estructura del sitio o un diagrama de flujo detallando las diversas secciones existentes dentro del sitio y sus relaciones.
Se desarrollaran etiquetas e ideas generales para cada seccin basndose en los diversos escenarios de usuario analizados en las fases iniciales del proyecto

Es importante la organizacin de las diversas secciones del sitio y puede ser necesario refinar esta organizacin con el tiempo.

Planificacin del sitio Diagrama de la estructura del sitio

Pagina Principal

Productos

Acerca de

Noticias

Cpula

Robots PSV

Planificacin del sitio Dotacin de personal

Esta seccin recoger los recursos necesarios para el desarrollo y explotacin del sitio.
Estos valores pueden darse como un simple dato de horas-hombre y debern hacer referencia a cada una de las cuatro reas que requieren personal: contenido, tecnologa, diseo visual y gestin.

Planificacin del sitio Plazos de Tiempo

Los plazos de tiempo debern mostrar el progreso de proyecto teniendo en cuenta las dotaciones de personal estimadas en la seccin anterior, combinado con el tpico proceso en cascada sealado anteriormente

Planificacin del sitio Presupuesto

El presupuesto deriva principalmente de los requisitos de personal y de los requisitos de distribucin.
Los costos de la campaa de marketing, costos de licencias de aplicaciones, propiedad intelectual y otros, debern indicarse tambin en el presupuesto.