fundamentos diseo web ccsa

Upload: serrano-palacios

Post on 03-Apr-2018

234 views

Category:

Documents


0 download

TRANSCRIPT

  • 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