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

Las etapas de un proyecto multimedia
Las etapas de un proyecto multimediaLas etapas de un proyecto multimedia
Las etapas de un proyecto multimedia
mlauritha
 
Pasos para crear un sitio web
Pasos para crear un sitio webPasos para crear un sitio web
Pasos para crear un sitio web
tomyycerr
 
PPT: Internet y página web
PPT: Internet y página webPPT: Internet y página web
PPT: Internet y página web
rociobetty
 

La actualidad más candente (20)

Diseño web responsive
Diseño web responsiveDiseño web responsive
Diseño web responsive
 
Páginas web
Páginas webPáginas web
Páginas web
 
Creación de páginas web en wix
Creación de páginas web en wixCreación de páginas web en wix
Creación de páginas web en wix
 
Maquetación Web
Maquetación WebMaquetación Web
Maquetación Web
 
Web 1.0, 2.0, 3.0 Que es, Caracteristicas, Ventajas Y Desventajas
Web 1.0, 2.0, 3.0 Que es, Caracteristicas, Ventajas Y DesventajasWeb 1.0, 2.0, 3.0 Que es, Caracteristicas, Ventajas Y Desventajas
Web 1.0, 2.0, 3.0 Que es, Caracteristicas, Ventajas Y Desventajas
 
Web 1.0 2.0 3.0 características, definiciones, ejemplos.
Web 1.0 2.0 3.0 características, definiciones, ejemplos.Web 1.0 2.0 3.0 características, definiciones, ejemplos.
Web 1.0 2.0 3.0 características, definiciones, ejemplos.
 
Las etapas de un proyecto multimedia
Las etapas de un proyecto multimediaLas etapas de un proyecto multimedia
Las etapas de un proyecto multimedia
 
Pasos para crear un sitio web
Pasos para crear un sitio webPasos para crear un sitio web
Pasos 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
 
¿Qué es WordPress?
¿Qué es WordPress? ¿Qué es WordPress?
¿Qué es WordPress?
 
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
 
Herramientas web 1.0
Herramientas web 1.0Herramientas web 1.0
Herramientas web 1.0
 
Gestores de contenido
Gestores de contenidoGestores de contenido
Gestores de contenido
 
Practica Corel Draw - Vectorización y Efectos Especiales
Practica Corel Draw - Vectorización y Efectos EspecialesPractica Corel Draw - Vectorización y Efectos Especiales
Practica Corel Draw - Vectorización y Efectos Especiales
 
Web 1.0, 2.0, 3.0.4.0
Web  1.0, 2.0, 3.0.4.0Web  1.0, 2.0, 3.0.4.0
Web 1.0, 2.0, 3.0.4.0
 
Software de presentacion
Software de presentacion Software de presentacion
Software de presentacion
 
Fireworks
FireworksFireworks
Fireworks
 
Características de adobe flash
Características de adobe flashCaracterísticas de adobe flash
Características de adobe flash
 
Diapositiva Pagina Web
Diapositiva Pagina WebDiapositiva Pagina Web
Diapositiva Pagina Web
 
Rúbrica para evaluar el sitio web
Rúbrica para evaluar el sitio webRúbrica para evaluar el sitio web
Rúbrica para evaluar el sitio web
 

Similar a Presentación sobre Diseño Web

Evaluacionpaginasweb
EvaluacionpaginaswebEvaluacionpaginasweb
Evaluacionpaginasweb
guest922fe3
 
Diseno web 4
Diseno web 4Diseno web 4
Diseno web 4
blogdevon
 
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
elizaaristizabal
 
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)
valenena8
 

Similar a Presentación sobre Diseño Web (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

Concepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxConcepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Fernando Solis
 

Último (20)

Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
 
Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024
 
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptxCONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
 
Posición astronómica y geográfica de Europa.pptx
Posición astronómica y geográfica de Europa.pptxPosición astronómica y geográfica de Europa.pptx
Posición astronómica y geográfica de Europa.pptx
 
Novena de Pentecostés con textos de san Juan Eudes
Novena de Pentecostés con textos de san Juan EudesNovena de Pentecostés con textos de san Juan Eudes
Novena de Pentecostés con textos de san Juan Eudes
 
FICHA PROYECTO COIL- GLOBAL CLASSROOM.docx.pdf
FICHA PROYECTO COIL- GLOBAL CLASSROOM.docx.pdfFICHA PROYECTO COIL- GLOBAL CLASSROOM.docx.pdf
FICHA PROYECTO COIL- GLOBAL CLASSROOM.docx.pdf
 
Revista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdfRevista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdf
 
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPCTRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
 
La Evaluacion Formativa SM6 Ccesa007.pdf
La Evaluacion Formativa SM6  Ccesa007.pdfLa Evaluacion Formativa SM6  Ccesa007.pdf
La Evaluacion Formativa SM6 Ccesa007.pdf
 
ACERTIJO LA RUTA DEL MARATÓN OLÍMPICO DEL NÚMERO PI EN PARÍS. Por JAVIER SOL...
ACERTIJO LA RUTA DEL MARATÓN OLÍMPICO DEL NÚMERO PI EN  PARÍS. Por JAVIER SOL...ACERTIJO LA RUTA DEL MARATÓN OLÍMPICO DEL NÚMERO PI EN  PARÍS. Por JAVIER SOL...
ACERTIJO LA RUTA DEL MARATÓN OLÍMPICO DEL NÚMERO PI EN PARÍS. Por JAVIER SOL...
 
LA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptxLA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptx
 
1ro Programación Anual D.P.C.C planificación anual del área para el desarroll...
1ro Programación Anual D.P.C.C planificación anual del área para el desarroll...1ro Programación Anual D.P.C.C planificación anual del área para el desarroll...
1ro Programación Anual D.P.C.C planificación anual del área para el desarroll...
 
Tema 19. Inmunología y el sistema inmunitario 2024
Tema 19. Inmunología y el sistema inmunitario 2024Tema 19. Inmunología y el sistema inmunitario 2024
Tema 19. Inmunología y el sistema inmunitario 2024
 
activ4-bloque4 transversal doctorado.pdf
activ4-bloque4 transversal doctorado.pdfactiv4-bloque4 transversal doctorado.pdf
activ4-bloque4 transversal doctorado.pdf
 
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxPLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
 
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxConcepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptx
 
Los avatares para el juego dramático en entornos virtuales
Los avatares para el juego dramático en entornos virtualesLos avatares para el juego dramático en entornos virtuales
Los avatares para el juego dramático en entornos virtuales
 
Usos y desusos de la inteligencia artificial en revistas científicas
Usos y desusos de la inteligencia artificial en revistas científicasUsos y desusos de la inteligencia artificial en revistas científicas
Usos y desusos de la inteligencia artificial en revistas científicas
 
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIASISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
 
AEC 2. Aventura en el Antiguo Egipto.pptx
AEC 2. Aventura en el Antiguo Egipto.pptxAEC 2. Aventura en el Antiguo Egipto.pptx
AEC 2. Aventura en el Antiguo Egipto.pptx
 

Presentación sobre Diseño Web

  • 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