Curso de Curso de Webmaster IWebmaster I

Fundamentos Fundamentos

¿Qué es el ¿Qué es el Diseño Web?Diseño Web?

Conceptos Básicos: Conceptos Básicos: La pirámide del diseño WebLa pirámide del diseño Web

Las cuatro características principales del diseño Web son:

1. El contenido

2. La tecnología

3. Los aspectos visuales

4. Los aspectos económicos

Conceptos Básicos: Conceptos Básicos: La pirámide del diseño WebLa pirámide del diseño Web

Usuarios Diseñadores

FORMA(visual)

FUNCION(tecnología)

FINALIDAD

CONTENIDO

Conceptos Básicos: Conceptos Básicos: Los diversos sitios Web.Los diversos sitios Web.

Complejo

Simple

Centradoen el

documento

Centradoen la

Aplicación

Sitio WebPuramente estático

Sitio creadodinámicamente

Sitio estático conFormulario de entrada

Acceso dinámico a datosA través de un sitio Web

Aplicación basada en la Web

Fundamentos de diseño Web Fundamentos de diseño Web Construir para los usuariosConstruir para los usuarios

Un error frecuente en el desarrollo Web es que los sitios se construyen mas para los diseñadores y sus necesidades que para los verdaderos usuarios

La clave para obtener el éxito en el diseño de un sitio web funcional es pensar siempre teniendo en cuenta el punto de vista del usuario

Fundamentos de diseño Web Fundamentos de diseño Web Utilidad y facilidad de empleoUtilidad 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 serán eficientes, fáciles de manejar y ayudaran a los usuarios a conseguir sus objetivos de manera satisfactoria y sin errores

Fundamentos de diseño Web Fundamentos de diseño Web Atención al contenidoAtención 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 diseño Web Fundamentos de diseño Web Navegando los contenidosNavegando los contenidos

Los usuarios necesitan ayuda para no perderse en un sitio. Es necesario asignar nombres claros a los vínculos, agrupar de forma lógica los botones, emplear títulos de paginas claros y elementos de navegación consistentes

Estructurar de forma clara el sitio, ayuda, pero una buena navegación necesita algo mas que una buena estructura.

Los mejores diseños Web, son a menudo, aquellos que utilizan una navegación sencilla y refinada

La navegación es solamente un medio para conseguir un resultado final

Fundamentos de diseño Web Fundamentos de diseño Web Importancia del AspectoImportancia del Aspecto

Un buen sitio Web tiene que funcionar y tiene que ser fácil de navegar.

Con frecuencia lo primero en que repara el usuario, es el aspecto visual.

El aspecto del sitio puede influir en la opinión que tenga el usuario sobre el mismo

Los elementos visuales influirán en gran medida en la percepción inicial del sitio por parte del usuario

Fundamentos de diseño Web Fundamentos de diseño Web Valor permanenteValor 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 podríamos llamar el valor permanente, un sentimiento básico 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 tecnología, la facilidad de empleo y la consecución del objetivo.

Fundamentos de diseño Web Fundamentos de diseño Web Equilibrio entre Forma y Función Equilibrio entre Forma y Función

La función sin la forma seria aburrida; aunque el sitio funcione, no inspirara al usuario.

Si la forma es impresionante y la función es limitada, el usuario quedara desconcertado.

La forma de un sitio debería estar directamente relacionada con su finalidad

La determinación de la forma mas adecuada para un sitio presupone que la función del sitio esta claramente definida

Fundamentos de diseño Web Fundamentos de diseño Web Lo que se ve es lo que se desea Lo que se ve es lo que se desea

EL control debería estar en manos del usuario o, al menos, debería 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 cómo quiere verlo.

El usuario debería ser dueño de sus propias acciones, permitiéndosele navegar sin rumbo, realizar cualquier tipo de búsqueda, imprimir el contenido mostrado….

El proceso deEl proceso deDiseño WebDiseño Web

MetodologíaMetodología

Proceso de Diseño Web Proceso de Diseño Web Método Web ad hoc Método Web ad hoc

Es un método muy sencillo, consiste en desarrollar el sitio, efectuar una inspección visual con un explorador, corregir errores y publicar en la Web

Los sitios desarrollados con este método informal presentan numerosos problemas

Este método se utiliza en proyectos muy pequeños cuando solo se cuenta con un solo diseñador / programador y cuando el mantenimiento necesario en el futuro es de poca entidad.

Proceso de Diseño Web Proceso de Diseño Web Modelo del Método Web Básico Modelo del Método Web Básico

Es un método 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 diseñadores a planificar cada paso desde el principio.

Proceso de Diseño Web Proceso de Diseño Web Modelo en Cascada Modelo en Cascada

Definición del problemaExploración del concepto

Análisis de los requisitosEspecificación

Diseño de prototipos

Realización y pruebas unitarias

Integración y ensayoDel sistema

Publicación, explotación Y mantenimiento

Planificación del sitio Planificación del sitio Objetivos Generales Objetivos Generales

Esta sección debería contener una breve argumentación para explicar el propósito global del sitio y las medidas básicas adoptadas para alcanzar el éxito.

Planificación del sitio Planificación del sitio Objetivos Específicos Objetivos Específicos

En esta sección se analizarían detalladamente los objetivos del sitio y se proporcionarían unos objetivos mensurables para verificar la utilidad del sitio

Planificación del sitio Planificación del sitio Análisis de la Audiencia Análisis de la Audiencia

Esta sección debería contener los perfiles de los usuarios que van a visitar el sitio. La sección describirá tanto las características de la audiencia como las tareas que esta audiencia trata de realizar en el sitio.

¿Donde viven?¿Qué edad tienen?¿Idioma?¿Conocimientos técnicos?

¿Qué obtienen del sitio?¿Qué desean ejecutar?¿Cuándo visitaran el sitio?¿Duración por visita?

Planificación del sitio Planificación del sitio Análisis de lo escenarios de empleo Análisis de lo escenarios de empleo

En esta sección se analizan los diversos escenarios de tareas que realizaran los usuarios del sitio.

Comience primero analizando como llegara el usuario a sitio, y después, continué la visita hasta su conclusión.

En esta sección se pueden incluir también un análisis de cómo concluye la visita, por ejemplo, previendo el numero de descargas, paginas accedidas, etc… siempre que estén relacionados con el análisis detallado de los objetivos

Planificación del sitio Planificación del sitio Requisitos del contenido Requisitos del contenido

La sección de requisitos del contenido proporcionara una lista de todos los textos, imágenes y otros medios de comunicación 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.

Planificación del sitio Planificación del sitio Requisitos Técnicos Requisitos Técnicos

Esta sección deberá proporcionar una visión general de los tipos de tecnologías que se emplearan en el sitio, tales como HTML, Javascript, CGI, JAVA, etc.

Los requisitos tecnológicos deberían estar directamente relacionados con las capacidades de los usuarios.

Planificación del sitio Planificación del sitio Requisitos Visuales Requisitos Visuales

En la sección de requisitos visuales se subrayaran las consideraciones básicas para el diseño de la interfaz.

Esta sección deberá indicar a grandes rasgos como se relacionara el sitio con cualquier material de marketing existente y definirá las restricciones que tendrán los usuarios para emplear gráficos y otros elementos multimedia (tamaño de pantalla, colores..)

Esta sección puede resaltar algunos detalles específicos como: tipo de fuente, color

Planificación del sitio Planificación del sitio Requisitos de Distribución Requisitos de Distribución

Esta sección contendrá los requisitos de distribución, particularmente cualquier tema relacionado con la función como host.

En esta sección deberá incluirse un análisis básico del numero de usuarios que visitaran el sitio, cuantas paginas se visitaran en un acceso típico y cual es el tamaño de una pagina estándar

La mayoría de estos datos son estimaciones que nos permitirán definir correctamente las funciones que debe realizar cada pagina.

Planificación del sitio Planificación del sitio Diagrama de la estructura del sitio Diagrama de la estructura del sitio

Esta sección 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 sección basándose en los diversos escenarios de usuario analizados en las fases iniciales del proyecto

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

Planificación del sitio Planificación del sitio Diagrama de la estructura del sitio Diagrama de la estructura del sitio

Pagina Principal

Productos Acerca de Noticias

Cúpula

Robots

PSV

Planificación del sitio Planificación del sitio Dotación de personal Dotación de personal

Esta sección recogerá los recursos necesarios para el desarrollo y explotación del sitio.

Estos valores pueden darse como un simple dato de horas-hombre y deberán hacer referencia a cada una de las cuatro áreas que requieren personal: contenido, tecnología, diseño visual y gestión.

Planificación del sitio Planificación del sitio Plazos de Tiempo Plazos de Tiempo

Los plazos de tiempo deberán mostrar el progreso de proyecto teniendo en cuenta las dotaciones de personal estimadas en la sección anterior, combinado con el típico proceso en cascada señalado anteriormente

Planificación del sitio Planificación del sitio Presupuesto Presupuesto

El presupuesto deriva principalmente de los requisitos de personal y de los requisitos de distribución.

Los costos de la campaña de marketing, costos de licencias de aplicaciones, propiedad intelectual y otros, deberán indicarse también en el presupuesto.