7/28/2019 Fundamentos Diseo Web Ccsa

1/29

Clase #1 HTMLPgina Web:

Anlisis de su

estructura y diseo

Qu es el

Diseo Web?

7/28/2019 Fundamentos Diseo Web Ccsa

2/29

Agenda Propsito

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

7/28/2019 Fundamentos Diseo Web Ccsa

3/29

Pgina Web: Anlisis de su

estructura y diseo Propsito

Identificar conocimientos sobre la creacin de

sitios Web Indicaciones

Identifique los diferentes conceptosdesarrollando el siguiente crucigrama.

http://www.educaplay.com/es/recursosedu

cativos/819363/conceptos_sobre_paginas

_web.htm

http://www.educaplay.com/es/recursoseducativos/819363/conceptos_sobre_paginas_web.htmhttp://www.educaplay.com/es/recursoseducativos/819363/conceptos_sobre_paginas_web.htmhttp://www.educaplay.com/es/recursoseducativos/819363/conceptos_sobre_paginas_web.htmhttp://www.educaplay.com/es/recursoseducativos/819363/conceptos_sobre_paginas_web.htmhttp://www.educaplay.com/es/recursoseducativos/819363/conceptos_sobre_paginas_web.htmhttp://www.educaplay.com/es/recursoseducativos/819363/conceptos_sobre_paginas_web.htm

7/28/2019 Fundamentos Diseo Web Ccsa

4/29

Espacio motivacional

Propsito

Fomentar buenas costumbres en los

estudiantes.

http://localhost/var/www/apps/conversion/tmp/scratch_14/VIDEO_MOTIVACIONAL_3__Los_marcianitos.flv

7/28/2019 Fundamentos Diseo Web Ccsa

5/29

Actividad #2 Pgina Web: Anlisis

de su estructura y diseo

Propsito

Definirel anlisis de la estructura y diseo de

una pagina Web Indicaciones

Definir el anlisis de la estructura de un sitioweb por medio de las diapositivas que se

presentaran a continuacin

7/28/2019 Fundamentos Diseo Web Ccsa

6/29

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

7/28/2019 Fundamentos Diseo Web Ccsa

7/29

Conceptos Bsicos:

La pirmide del diseo Web

Usuarios Diseadores

FORMA

(visual)FUNCION

(tecnologa)

FINALIDAD

CONTENIDO

7/28/2019 Fundamentos Diseo Web Ccsa

8/29

Conceptos Bsicos:

Los diversos sitios Web.

Complejo

Simple

Centrado

en el

documento

Centrado

en la

Aplicacin

Sitio Web

Puramente esttico

Sitio creado

dinmicamente

Sitio esttico con

Formulario de entrada

Acceso dinmico a datos

A travs de un sitio Web

Aplicacin basada en la Web

7/28/2019 Fundamentos Diseo Web Ccsa

9/29

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

7/28/2019 Fundamentos Diseo Web Ccsa

10/29

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

7/28/2019 Fundamentos Diseo Web Ccsa

11/29

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.

7/28/2019 Fundamentos Diseo Web Ccsa

12/29

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

7/28/2019 Fundamentos Diseo Web Ccsa

13/29

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

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

7/28/2019 Fundamentos Diseo Web Ccsa

14/29

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 lapercepcin inicial del sitio por parte del usuario

7/28/2019 Fundamentos Diseo Web Ccsa

15/29

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

7/28/2019 Fundamentos Diseo Web Ccsa

16/29

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.

7/28/2019 Fundamentos Diseo Web Ccsa

17/29

Fases para elaborar unapgina Web: estructura,diseo y codificacin oensamble

Metodologa

7/28/2019 Fundamentos Diseo Web Ccsa

18/29

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 explicarel manejo de teora para elaborar la estructura y

diseo de una pagina Web.

Valore la informacin tomando notas sobre ladescripcin del tema para aplicarlo en el anlisis de

sitios web.

7/28/2019 Fundamentos Diseo Web Ccsa

19/29

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.

7/28/2019 Fundamentos Diseo Web Ccsa

20/29

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 oModelo del ciclo

de vida del software

Este modelo obliga a los diseadores a planificarcada paso desde el principio.

7/28/2019 Fundamentos Diseo Web Ccsa

21/29

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

7/28/2019 Fundamentos Diseo Web Ccsa

22/29

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.

7/28/2019 Fundamentos Diseo Web Ccsa

23/29

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

7/28/2019 Fundamentos Diseo Web Ccsa

24/29

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 realizaren el sitio.

Donde viven?

Qu edad tienen?

Idioma?

Conocimientos tcnicos?

Qu obtienen del sitio?

Qu desean ejecutar?Cundo visitaran el sitio?

Duracin por visita?

7/28/2019 Fundamentos Diseo Web Ccsa

25/29

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.

7/28/2019 Fundamentos Diseo Web Ccsa

26/29

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.

7/28/2019 Fundamentos Diseo Web Ccsa

27/29

Planificacin del sitio

Diagrama de la estructura del sitio

Pagina Principal

Productos Acerca de Noticias

Cpula

Robots

PSV

7/28/2019 Fundamentos Diseo Web Ccsa

28/29

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.

7/28/2019 Fundamentos Diseo Web Ccsa

29/29

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