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
 
Conclusiones- evolucion de la web
Conclusiones- evolucion de la webConclusiones- evolucion de la web
Conclusiones- evolucion de la webDyana Cordovez
 
Cuadro comparativo sobre web 1.0, 2.0 y 3.0
Cuadro comparativo sobre web 1.0, 2.0 y 3.0Cuadro comparativo sobre web 1.0, 2.0 y 3.0
Cuadro comparativo sobre web 1.0, 2.0 y 3.0marcela151016
 
Conceptos basicos de internet
Conceptos basicos de internetConceptos basicos de internet
Conceptos basicos de internetMARIA JOSE Ocampo
 
Presentacion sobre powerpoint
Presentacion sobre powerpointPresentacion sobre powerpoint
Presentacion sobre powerpointoscar ojo
 
PPT: Internet y página web
PPT: Internet y página webPPT: Internet y página web
PPT: Internet y página webrociobetty
 
Introduction to WordPress
Introduction to WordPressIntroduction to WordPress
Introduction to WordPressHarshad Mane
 
PRESENTACIONES ELECTRONICAS
PRESENTACIONES ELECTRONICAS PRESENTACIONES ELECTRONICAS
PRESENTACIONES ELECTRONICAS Diego Morales
 
Pestaña vista de word
Pestaña vista de wordPestaña vista de word
Pestaña vista de wordDaniela4365
 
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
 
Slideshare caracteristicas, ventajas y desventajas
Slideshare caracteristicas, ventajas y desventajas Slideshare caracteristicas, ventajas y desventajas
Slideshare caracteristicas, ventajas y desventajas Jaramillogi
 
Caracteristicas de slideshare
Caracteristicas de slideshareCaracteristicas de slideshare
Caracteristicas de slidesharepaulacamargo05
 

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
 
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
 
Desarrollo web
Desarrollo web Desarrollo web
Desarrollo web
 
Conclusiones- evolucion de la web
Conclusiones- evolucion de la webConclusiones- evolucion de la web
Conclusiones- evolucion de la web
 
Diapositiva Pagina Web
Diapositiva Pagina WebDiapositiva Pagina Web
Diapositiva Pagina Web
 
Cuadro comparativo sobre web 1.0, 2.0 y 3.0
Cuadro comparativo sobre web 1.0, 2.0 y 3.0Cuadro comparativo sobre web 1.0, 2.0 y 3.0
Cuadro comparativo sobre web 1.0, 2.0 y 3.0
 
Conceptos basicos de internet
Conceptos basicos de internetConceptos basicos de internet
Conceptos basicos de internet
 
Presentacion sobre powerpoint
Presentacion sobre powerpointPresentacion sobre powerpoint
Presentacion sobre powerpoint
 
PPT: Internet y página web
PPT: Internet y página webPPT: Internet y página web
PPT: Internet y página web
 
Introduction to WordPress
Introduction to WordPressIntroduction to WordPress
Introduction to WordPress
 
Páginas web
Páginas webPáginas web
Páginas web
 
PRESENTACIONES ELECTRONICAS
PRESENTACIONES ELECTRONICAS PRESENTACIONES ELECTRONICAS
PRESENTACIONES ELECTRONICAS
 
Tipos de plataformas web
Tipos de plataformas webTipos de plataformas web
Tipos de plataformas web
 
Pestaña vista de word
Pestaña vista de wordPestaña vista de word
Pestaña vista de word
 
Access presentacion
Access presentacionAccess presentacion
Access presentacion
 
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)
 
Navegadores y buscadores de internet
Navegadores y buscadores de internetNavegadores y buscadores de internet
Navegadores y buscadores de internet
 
Slideshare caracteristicas, ventajas y desventajas
Slideshare caracteristicas, ventajas y desventajas Slideshare caracteristicas, ventajas y desventajas
Slideshare caracteristicas, ventajas y desventajas
 
Caracteristicas de slideshare
Caracteristicas de slideshareCaracteristicas de slideshare
Caracteristicas de slideshare
 
Teoría del Diseño Web
Teoría del Diseño WebTeoría del Diseño Web
Teoría del Diseño Web
 

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

proyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niñoproyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niñotapirjackluis
 
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyzel CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyzprofefilete
 
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...JAVIER SOLIS NOYOLA
 
Sesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxSesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxMaritzaRetamozoVera
 
Informatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos BásicosInformatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos BásicosCesarFernandez937857
 
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
 
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptxACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptxzulyvero07
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptxFelicitasAsuncionDia
 
Ecosistemas Natural, Rural y urbano 2021.pptx
Ecosistemas Natural, Rural y urbano  2021.pptxEcosistemas Natural, Rural y urbano  2021.pptx
Ecosistemas Natural, Rural y urbano 2021.pptxolgakaterin
 
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
 
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
 
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdfCurso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdfFrancisco158360
 
30-de-abril-plebiscito-1902_240420_104511.pdf
30-de-abril-plebiscito-1902_240420_104511.pdf30-de-abril-plebiscito-1902_240420_104511.pdf
30-de-abril-plebiscito-1902_240420_104511.pdfgimenanahuel
 
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...Carlos Muñoz
 
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
 
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)

Unidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la InvestigaciónUnidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la Investigación
 
proyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niñoproyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niño
 
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyzel CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
 
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
 
Sesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxSesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docx
 
Informatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos BásicosInformatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos Básicos
 
Fe contra todo pronóstico. La fe es confianza.
Fe contra todo pronóstico. La fe es confianza.Fe contra todo pronóstico. La fe es confianza.
Fe contra todo pronóstico. La fe es confianza.
 
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
 
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptxACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptx
 
Ecosistemas Natural, Rural y urbano 2021.pptx
Ecosistemas Natural, Rural y urbano  2021.pptxEcosistemas Natural, Rural y urbano  2021.pptx
Ecosistemas Natural, Rural y urbano 2021.pptx
 
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
 
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
 
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
 
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdfCurso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
 
30-de-abril-plebiscito-1902_240420_104511.pdf
30-de-abril-plebiscito-1902_240420_104511.pdf30-de-abril-plebiscito-1902_240420_104511.pdf
30-de-abril-plebiscito-1902_240420_104511.pdf
 
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
 
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...
 
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