SlideShare una empresa de Scribd logo
1 de 13
Diseño de Sitios y Páginas Web
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],INDICE
Sitios Web y Páginas Web Sitio Web : Es un conjunto de archivo llamados páginas Web generalmente vinculadas entre si por enlaces, con un mismo contenido temático, y organizadas jerárquicamente. Generalmente tiene una página principal que se llama  index.html Página Web:  Es parte de un sitio Web y es un único archivo con nombre propio. Página Web Sitio Web Página principal: Index.html
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Similitudes Comercio / Sitio Web ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Un Sitio Web necesita Comercio
Elementos de una página Web Fuente:  www.vectoralia.com/manual/html/elementos_web.html
¿Qué hace que un sitio Web sea fácil de usarlo e intuitivo para la mayoría de las personas? Dos conceptos claves Usabilidad Accesibilidad Es la capacidad de un sitio Web de ser comprendido, aprendido y usado por un usuario. Conjunto de técnicas orientadas a tal fin (diseño grafico, estructura, publico objetivo, navegación y enlaces entre otros Es la capacidad de acceso a un sitio Web y sus contenidos por parte de todas las personas independientemente de la discapacidad (física, intelectual o técnica) que tengan o las relacionadas al contexto de uso. Por ejemplo: textos alternativos en imágenes (ALT), enlaces significativos, etc
Objetivo y público objetivo Implica C. Qué necesitan B. Para qué usan el sitio D. Testar el sitio con los propios usuarios E. Investigar cómo reaccionan ante el diseño F. Cómo es su experiencia de uso G. Cómo es el contexto de uso MODELADO DEL USUARIO Es determinar perfiles de usuarios en relación a atributos comunes Enlace:  Perfiles de usuarios A. Conocer cómo son Edad de la mayoría de los usuarios que podrían acceder al sitio. Necesidades de información. Conocimientos informáticos. Ubicación geográfica.Idioma.Equipo de cómputo Capacidad de adaptación al sistema de navegación. Usos del sitio Web trabajo, divulgación, comercial, educativo Uso intuitivo y efectivo. “Amigable”
Diseño lógico de un sitio Web ,[object Object],[object Object],[object Object]
Es la forma que tendrá el Sitio Web con sus secciones, funcionalidades y sistemas de navegación Estructura de un sitio Web Tipos Existe una página principal y de ahí se accede a otro grupo de páginas y estas a su vez son nodo de otras (niveles). Es jerarquizada, compleja, y algo difícil para navegar.Consejo no mas de 3 niveles. Arbol Listas La organización del sitio es totalmente opuesto al anterior.No existe una página raíz o principal. Ideal para manuales o guías. Tiene las ventajas de las 2 anteriores. Las páginas están jerarquizadas en niveles, y en cada nivel se organizan como listas. Mixta Páginas todas conectadas entre si. Algo anárquica. ¡Ojo! no dejar enlaces inexistentes y que el usuario se pierda Red
Niveles de un Sitio Web Se refiere a distancia máxima para alcanzar un determinado documento dentro de un sitio Web. Es aconsejable no mas de 3 niveles. Nivel 1 Nivel 2 Nivel 3 Nivel 5 Nivel 4
Navegación en los sitios Web Debe tener las siguientes características: A-Consistente : El sistema de navegación debe ser similar en todo el sitio en su ubicación y disposición en las páginas. B- Uniforme : Deben de usarse los mismos términos en todas las páginas para que el usuario se sienta seguro que va donde desea. C-Visible:  El sistema debe distinguirse claramente dentro del sitio También hay que considerar 2 elementos claves para la navegación: 1- Textual:  La navegación se hace con elementos concretos: menú, guías y botones que digan con claridad la acción que van realizar Se refiere a las formas de acceder a los distintos contenidos del sitio 2- Contextual : Elementos relevantes que permitan mostrar la navegación en pantalla
Tipos de enlaces Web Enlaces semánticos:  Son enlaces entre páginas que tienen una relación de contenidos entre sí Enlaces de navegación:  Solo sirven para conectar páginas entre sí sin un relación explícita. Ej.: El enlace “Volver” o “Página inicial” o el camino recorrido en el sitio “ De una importancia igual o superior a la conquista militar, la evangelización de los pueblos indígenas recayó en manos de los  Frailes dominicos , quienes mandaron construir, con mano de obra esclava de origen indígena, numerosos templos iglesias y conventos.” Enlace semántico Enlace de navegación
Prototipado Significa elaborar modelos o prototipos del sitio Web y por lo tanto no es el producto final, pero sirve para observar si se van cumpliendo los objetivos de usabilidad y accesibilidad. Luego de implementado se desecha. Según el grado de fidelidad o calidad del prototipo se distingue entre: Prototipado de alta fidelidad:  El prototipo será muy parecido al sitio Web una vez terminado. Prototipado de baja fidelidad : El aspecto del prototipo distará bastante del que tenga el sitio Web final

Más contenido relacionado

La actualidad más candente

Pasos para crear un sitio web
Pasos para crear un sitio webPasos para crear un sitio web
Pasos para crear un sitio webtomyycerr
 
Paginas web dinámicas y estáticas
Paginas web dinámicas y estáticasPaginas web dinámicas y estáticas
Paginas web dinámicas y estáticasFloydMera98
 
Herramientas de desarrollo de multimedia
Herramientas de desarrollo de multimediaHerramientas de desarrollo de multimedia
Herramientas de desarrollo de multimediajadecor1
 
características ,ventajas y desventajas de web 1.0,2.0,3.0 y 4.0
características ,ventajas y desventajas de web 1.0,2.0,3.0 y 4.0características ,ventajas y desventajas de web 1.0,2.0,3.0 y 4.0
características ,ventajas y desventajas de web 1.0,2.0,3.0 y 4.0JC64
 
Motores de busqueda.pptx
Motores de busqueda.pptxMotores de busqueda.pptx
Motores de busqueda.pptxjorge cruz
 
¿Qué son los blogs?
¿Qué son los blogs?¿Qué son los blogs?
¿Qué son los blogs?GuíaSalud
 
Gestores de contenido
Gestores de contenidoGestores de contenido
Gestores de contenidoFabian Diaz
 
Reglas generales de diseño de páginas web
Reglas generales de diseño de páginas webReglas generales de diseño de páginas web
Reglas generales de diseño de páginas webKoldo Parra
 
Pasos tecnicos para crear un sitio web
Pasos tecnicos para crear un sitio webPasos tecnicos para crear un sitio web
Pasos tecnicos para crear un sitio webJuan Flores
 
PPT: Internet y página web
PPT: Internet y página webPPT: Internet y página web
PPT: Internet y página webrociobetty
 
¿Qué es el lenguaje HTML?
¿Qué es el lenguaje HTML?¿Qué es el lenguaje HTML?
¿Qué es el lenguaje HTML?nereasanchezz
 
Ventajas y Desventajas de los Sitios Web
Ventajas y Desventajas de los Sitios WebVentajas y Desventajas de los Sitios Web
Ventajas y Desventajas de los Sitios WebBriceyda Gonzalez
 
PRESENTACION SOBRE LOS NAVEGADORES
PRESENTACION SOBRE LOS NAVEGADORESPRESENTACION SOBRE LOS NAVEGADORES
PRESENTACION SOBRE LOS NAVEGADORESandreitaparraok
 
Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)
Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)
Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)Micael Gallego
 

La actualidad más candente (20)

Pasos para crear un sitio web
Pasos para crear un sitio webPasos para crear un sitio web
Pasos para crear un sitio web
 
Paginas web dinámicas y estáticas
Paginas web dinámicas y estáticasPaginas web dinámicas y estáticas
Paginas web dinámicas y estáticas
 
Herramientas de desarrollo de multimedia
Herramientas de desarrollo de multimediaHerramientas de desarrollo de multimedia
Herramientas de desarrollo de multimedia
 
características ,ventajas y desventajas de web 1.0,2.0,3.0 y 4.0
características ,ventajas y desventajas de web 1.0,2.0,3.0 y 4.0características ,ventajas y desventajas de web 1.0,2.0,3.0 y 4.0
características ,ventajas y desventajas de web 1.0,2.0,3.0 y 4.0
 
HTML5
HTML5HTML5
HTML5
 
Motores de busqueda.pptx
Motores de busqueda.pptxMotores de busqueda.pptx
Motores de busqueda.pptx
 
¿Qué es WordPress?
¿Qué es WordPress? ¿Qué es WordPress?
¿Qué es WordPress?
 
Html
HtmlHtml
Html
 
¿Qué son los blogs?
¿Qué son los blogs?¿Qué son los blogs?
¿Qué son los blogs?
 
Gestores de contenido
Gestores de contenidoGestores de contenido
Gestores de contenido
 
Reglas generales de diseño de páginas web
Reglas generales de diseño de páginas webReglas generales de diseño de páginas web
Reglas generales de diseño de páginas web
 
Pasos tecnicos para crear un sitio web
Pasos tecnicos para crear un sitio webPasos tecnicos para crear un sitio web
Pasos tecnicos para crear un sitio web
 
PPT: Internet y página web
PPT: Internet y página webPPT: Internet y página web
PPT: Internet y página web
 
Corel draw
Corel drawCorel draw
Corel draw
 
¿Qué es el lenguaje HTML?
¿Qué es el lenguaje HTML?¿Qué es el lenguaje HTML?
¿Qué es el lenguaje HTML?
 
Diseño y maquetación de sitios web.ppt
Diseño y maquetación de sitios web.pptDiseño y maquetación de sitios web.ppt
Diseño y maquetación de sitios web.ppt
 
Ventajas y Desventajas de los Sitios Web
Ventajas y Desventajas de los Sitios WebVentajas y Desventajas de los Sitios Web
Ventajas y Desventajas de los Sitios Web
 
PRESENTACION SOBRE LOS NAVEGADORES
PRESENTACION SOBRE LOS NAVEGADORESPRESENTACION SOBRE LOS NAVEGADORES
PRESENTACION SOBRE LOS NAVEGADORES
 
Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)
Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)
Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)
 
Web development
Web developmentWeb development
Web development
 

Similar a Diseño de sitios web: conceptos básicos

Similar a Diseño de sitios web: conceptos básicos (20)

Sitio web
Sitio webSitio web
Sitio web
 
Elementos del sitio web
Elementos del sitio webElementos del sitio web
Elementos del sitio web
 
Evaluacionpaginasweb
EvaluacionpaginaswebEvaluacionpaginasweb
Evaluacionpaginasweb
 
trabajo Power point
trabajo Power pointtrabajo Power point
trabajo Power point
 
Arquitectura de la información
Arquitectura de la informaciónArquitectura de la información
Arquitectura de la información
 
Arquitectura de la información
Arquitectura de la informaciónArquitectura de la información
Arquitectura de la información
 
Páginas_web guia didactica.pdf
Páginas_web guia didactica.pdfPáginas_web guia didactica.pdf
Páginas_web guia didactica.pdf
 
Proyecto integrador
Proyecto integrador Proyecto integrador
Proyecto integrador
 
Diseño Web-Personales Institucionales
Diseño Web-Personales InstitucionalesDiseño Web-Personales Institucionales
Diseño Web-Personales Institucionales
 
Diseño web-personales institucionales
Diseño web-personales institucionalesDiseño web-personales institucionales
Diseño web-personales institucionales
 
Diseno web 4
Diseno web 4Diseno web 4
Diseno web 4
 
Diseno web 4
Diseno web 4Diseno web 4
Diseno web 4
 
Introduccion al lenguaje_html
Introduccion al lenguaje_htmlIntroduccion al lenguaje_html
Introduccion al lenguaje_html
 
Guía de evaluación heurística de sitios web
Guía de evaluación heurística de sitios webGuía de evaluación heurística de sitios web
Guía de evaluación heurística de sitios web
 
Evaluación de fuentes de informacion digital
Evaluación de fuentes de  informacion digitalEvaluación de fuentes de  informacion digital
Evaluación de fuentes de informacion digital
 
Ficha# 1 página y sitio web (1) (terminada)
Ficha# 1 página y sitio web (1) (terminada)Ficha# 1 página y sitio web (1) (terminada)
Ficha# 1 página y sitio web (1) (terminada)
 
Clase no 3
Clase no 3Clase no 3
Clase no 3
 
M2 DiseñO Web
M2   DiseñO WebM2   DiseñO Web
M2 DiseñO Web
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 
Analisis seoat
Analisis seoatAnalisis seoat
Analisis seoat
 

Último

Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Lourdes Feria
 
Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dstEphaniiie
 
Identificación de componentes Hardware del PC
Identificación de componentes Hardware del PCIdentificación de componentes Hardware del PC
Identificación de componentes Hardware del PCCesarFernandez937857
 
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptx
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptxTECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptx
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptxKarlaMassielMartinez
 
la unidad de s sesion edussssssssssssssscacio fisca
la unidad de s sesion edussssssssssssssscacio fiscala unidad de s sesion edussssssssssssssscacio fisca
la unidad de s sesion edussssssssssssssscacio fiscaeliseo91
 
Heinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoHeinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoFundación YOD YOD
 
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOSTEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOSjlorentemartos
 
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptxACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptxzulyvero07
 
Historia y técnica del collage en el arte
Historia y técnica del collage en el arteHistoria y técnica del collage en el arte
Historia y técnica del collage en el arteRaquel Martín Contreras
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAEl Fortí
 
MAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMarjorie Burga
 
Planificacion Anual 4to Grado Educacion Primaria 2024 Ccesa007.pdf
Planificacion Anual 4to Grado Educacion Primaria   2024   Ccesa007.pdfPlanificacion Anual 4to Grado Educacion Primaria   2024   Ccesa007.pdf
Planificacion Anual 4to Grado Educacion Primaria 2024 Ccesa007.pdfDemetrio Ccesa Rayme
 
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIARAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIACarlos Campaña Montenegro
 
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptx
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptxEXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptx
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptxPryhaSalam
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaDecaunlz
 
2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdfBaker Publishing Company
 
La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.amayarogel
 

Último (20)

Sesión de clase: Defendamos la verdad.pdf
Sesión de clase: Defendamos la verdad.pdfSesión de clase: Defendamos la verdad.pdf
Sesión de clase: Defendamos la verdad.pdf
 
Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...
 
Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes d
 
Identificación de componentes Hardware del PC
Identificación de componentes Hardware del PCIdentificación de componentes Hardware del PC
Identificación de componentes Hardware del PC
 
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptx
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptxTECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptx
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptx
 
la unidad de s sesion edussssssssssssssscacio fisca
la unidad de s sesion edussssssssssssssscacio fiscala unidad de s sesion edussssssssssssssscacio fisca
la unidad de s sesion edussssssssssssssscacio fisca
 
Heinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoHeinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativo
 
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOSTEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
 
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptxACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
 
Historia y técnica del collage en el arte
Historia y técnica del collage en el arteHistoria y técnica del collage en el arte
Historia y técnica del collage en el arte
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
 
MAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grande
 
Planificacion Anual 4to Grado Educacion Primaria 2024 Ccesa007.pdf
Planificacion Anual 4to Grado Educacion Primaria   2024   Ccesa007.pdfPlanificacion Anual 4to Grado Educacion Primaria   2024   Ccesa007.pdf
Planificacion Anual 4to Grado Educacion Primaria 2024 Ccesa007.pdf
 
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIARAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
 
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptx
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptxEXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptx
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptx
 
Power Point: "Defendamos la verdad".pptx
Power Point: "Defendamos la verdad".pptxPower Point: "Defendamos la verdad".pptx
Power Point: "Defendamos la verdad".pptx
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativa
 
2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf
 
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdfTema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
 
La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.
 

Diseño de sitios web: conceptos básicos

  • 1. Diseño de Sitios y Páginas Web
  • 2.
  • 3. Sitios Web y Páginas Web Sitio Web : Es un conjunto de archivo llamados páginas Web generalmente vinculadas entre si por enlaces, con un mismo contenido temático, y organizadas jerárquicamente. Generalmente tiene una página principal que se llama index.html Página Web: Es parte de un sitio Web y es un único archivo con nombre propio. Página Web Sitio Web Página principal: Index.html
  • 4.
  • 5. Elementos de una página Web Fuente: www.vectoralia.com/manual/html/elementos_web.html
  • 6. ¿Qué hace que un sitio Web sea fácil de usarlo e intuitivo para la mayoría de las personas? Dos conceptos claves Usabilidad Accesibilidad Es la capacidad de un sitio Web de ser comprendido, aprendido y usado por un usuario. Conjunto de técnicas orientadas a tal fin (diseño grafico, estructura, publico objetivo, navegación y enlaces entre otros Es la capacidad de acceso a un sitio Web y sus contenidos por parte de todas las personas independientemente de la discapacidad (física, intelectual o técnica) que tengan o las relacionadas al contexto de uso. Por ejemplo: textos alternativos en imágenes (ALT), enlaces significativos, etc
  • 7. Objetivo y público objetivo Implica C. Qué necesitan B. Para qué usan el sitio D. Testar el sitio con los propios usuarios E. Investigar cómo reaccionan ante el diseño F. Cómo es su experiencia de uso G. Cómo es el contexto de uso MODELADO DEL USUARIO Es determinar perfiles de usuarios en relación a atributos comunes Enlace: Perfiles de usuarios A. Conocer cómo son Edad de la mayoría de los usuarios que podrían acceder al sitio. Necesidades de información. Conocimientos informáticos. Ubicación geográfica.Idioma.Equipo de cómputo Capacidad de adaptación al sistema de navegación. Usos del sitio Web trabajo, divulgación, comercial, educativo Uso intuitivo y efectivo. “Amigable”
  • 8.
  • 9. Es la forma que tendrá el Sitio Web con sus secciones, funcionalidades y sistemas de navegación Estructura de un sitio Web Tipos Existe una página principal y de ahí se accede a otro grupo de páginas y estas a su vez son nodo de otras (niveles). Es jerarquizada, compleja, y algo difícil para navegar.Consejo no mas de 3 niveles. Arbol Listas La organización del sitio es totalmente opuesto al anterior.No existe una página raíz o principal. Ideal para manuales o guías. Tiene las ventajas de las 2 anteriores. Las páginas están jerarquizadas en niveles, y en cada nivel se organizan como listas. Mixta Páginas todas conectadas entre si. Algo anárquica. ¡Ojo! no dejar enlaces inexistentes y que el usuario se pierda Red
  • 10. Niveles de un Sitio Web Se refiere a distancia máxima para alcanzar un determinado documento dentro de un sitio Web. Es aconsejable no mas de 3 niveles. Nivel 1 Nivel 2 Nivel 3 Nivel 5 Nivel 4
  • 11. Navegación en los sitios Web Debe tener las siguientes características: A-Consistente : El sistema de navegación debe ser similar en todo el sitio en su ubicación y disposición en las páginas. B- Uniforme : Deben de usarse los mismos términos en todas las páginas para que el usuario se sienta seguro que va donde desea. C-Visible: El sistema debe distinguirse claramente dentro del sitio También hay que considerar 2 elementos claves para la navegación: 1- Textual: La navegación se hace con elementos concretos: menú, guías y botones que digan con claridad la acción que van realizar Se refiere a las formas de acceder a los distintos contenidos del sitio 2- Contextual : Elementos relevantes que permitan mostrar la navegación en pantalla
  • 12. Tipos de enlaces Web Enlaces semánticos: Son enlaces entre páginas que tienen una relación de contenidos entre sí Enlaces de navegación: Solo sirven para conectar páginas entre sí sin un relación explícita. Ej.: El enlace “Volver” o “Página inicial” o el camino recorrido en el sitio “ De una importancia igual o superior a la conquista militar, la evangelización de los pueblos indígenas recayó en manos de los Frailes dominicos , quienes mandaron construir, con mano de obra esclava de origen indígena, numerosos templos iglesias y conventos.” Enlace semántico Enlace de navegación
  • 13. Prototipado Significa elaborar modelos o prototipos del sitio Web y por lo tanto no es el producto final, pero sirve para observar si se van cumpliendo los objetivos de usabilidad y accesibilidad. Luego de implementado se desecha. Según el grado de fidelidad o calidad del prototipo se distingue entre: Prototipado de alta fidelidad: El prototipo será muy parecido al sitio Web una vez terminado. Prototipado de baja fidelidad : El aspecto del prototipo distará bastante del que tenga el sitio Web final