Clase #1 HTML

Pgina Web: Anlisis de su estructura y diseo

Qu es el Diseo Web?

Agenda

Propsito

Definir el anlisis de la estructura y diseo de una pagina Web Manejo de teora para elaborar la estructura, diseo y codificacin o ensamble de una pagina Web.

Actividad #1 Pre saberes sobre la creacin de sitios web Actividad #2 Pgina Web: Anlisis de su estructura y diseo Actividad #3 Fases para elaborar una pgina Web: estructura, diseo y codificacin o ensamble.

Pgina Web: Anlisis de su estructura y diseo

Propsito

Identificar conocimientos sobre la creacin de

sitios Web

Indicaciones

Identifique los diferentes conceptos

desarrollando el siguiente crucigrama.

http://www.educaplay.com/es/recursosedu cativos/819363/conceptos_sobre_paginas _web.htm

Espacio motivacional

Propsito

Fomentar buenas costumbres en los

estudiantes.

Actividad #2 Pgina Web: Anlisis

de su estructura y diseo

Propsito

Definir el anlisis de la estructura y diseo de

una pagina Web

Indicaciones

Definir el anlisis de la estructura de un sitio

web por medio de las diapositivas que se presentaran a continuacin

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

Actividad practica

Navegar en los siguientes sitios web y definir cuando es un sitio esttico y cuando es un sitio dinmico.

http://mmabogados.com.sv/ http://sms.listasal.info/sms/# www.ccsa.edu.sv www.cuponclub.net

Evalu los sitios junto con su profesora y determine la clasificacin de complejo a simple

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 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.

Fases para elaborar una pgina Web: estructura, diseo y codificacin o ensamble

Metodologa

Actividad #3

Propsito

Manejo de teora para elaborar la estructura,

diseo y codificacin o ensamble de una pagina Web.

Indicaciones

A continuacin se presentan diapositivas para explicar el manejo de teora para elaborar la estructura y diseo de una pagina Web. Valore la informacin tomando notas sobre la descripcin del tema para aplicarlo en el anlisis de sitios web.

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 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 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 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.

Actividad practica

Investigue cinco sitos web:

Universitario Infantil Cultural o documental Noticias Revista

Analice la estructura del sitio, la colocacin de los botones, escriba el objetivo general y especifico, y analice el tipo de audiencia y las tareas que ellos realizarn