SlideShare una empresa de Scribd logo
1 de 6
Descargar para leer sin conexión
DISEÑO E INSTALACIÓN
DE SITIOS WEB
Navegación del sitio
El usuario controla la navegación
NAVEGACIÓN DEL SITIO
Otro aspecto a tener en cuenta en el diseño es la navegación del sitio.
Guía a los visitantes hacia la información que se requieren de forma rápida e
intuitiva
Conduce al visitante hacia las páginas donde este es capaz de interactuar con los
elementos del sitio.
¿Dónde estoy?
¿Dónde he estado?
¿A dónde puedo ir?
Un sistema de navegación útil es aquel que:
Construir un sistema de navegación que contribuya a incrementar la satisfacción del
usuario y que, en consecuencia, tribute al éxito del sitio, está más allá de agregarle
enlaces.
En esta labor se debe considerar un conjunto de factores como el agrupamiento de la
información, la estructura, los retornos a páginas, entre otros.
La navegación es uno de los elementos básicos de la Web, y va más allá del uso de
enlaces hypertextuales.
Una interface de navegación debe ayudar al usuario a responder a tres preguntas:
PÁGINA 2
¿DÓNDE ESTOY?
En relación a la Web como un todo
En relación a la estructura del sitio
Es probablemente la pregunta del millón.
La respuesta, en términos de situación dentro de un sitio debe proporcionarse a dos
niveles:
La primera es importante en tanto que el usuario a menudo percibe la Web como un
todo.
Los cambios drásticos en mecanismos de navegación no son
bien asumidos dentro de esta perspectiva.
Esto implica así mismo, que el usuario no sabrá en qué sitio está a menos que se lo
digas. Por ello, la norma número uno es colocar tu logo o marca identificativa en
todas tus páginas.
La situación en cuanto a la estructura del sitio se consigue mediante la inclusión de
cabeceras que muestran a grandes rasgos la estructura del web y resaltan la situación
actual.
Un tercer elemento a tener en cuenta es el propio título de la página, que debe ser
significante e individualizado.
PÁGINA 3
PÁGINA 4
¿DONDE HE ESTADO?
El botón atrás del navegador que nos proporciona una historia secuencial de las
páginas visitadas.
Los enlaces ya visitados que nos indican las opciones ya vistas dentro de los
enlaces de una página
Con la tecnología Web actual resulta difícil contestar a esta pregunta. Existen, sin
embargo, algunos recursos que nos permiten afrontarla:
En este sentido, es importante respetar la convención en cuanto a la representación
de los links (azul para los activos y rosa para los visitados).
El usuario sabe siempre de esta manera lo que ha visto y lo que no, dentro siempre de
lo que puede ver.
¿A DÓNDE PUEDO IR?
Enlaces embebidos (El tradicional texto subrayado)
Enlaces estructurales (Apuntan a otro nivel de la estructura, por lo que diferirán de
página a página, si bien es necesario que mantengan una coherencia
comprendida y esperada por el usuario. Es más conveniente utilizar nombres
descriptivos del nivel jerárquico que este en sí)
Enlaces asociativos (Proporcionan información adicional o colateral, del tipo de
"ver también")
Esta cuestión se responde con las opciones visibles de navegación y con el resto de
enlaces dentro de la página.
Es imposible mostrar todos los destinos posibles en una sola página, una buena
estructura del sitio, fácil de comprender y asimilar por el usuario, será de gran utilidad
a la hora de conocer los puntos posibles de destino desde un sitio dado.
Hay tres clase de hyperenlaces que pueden ser usados en una página:
PÁGINA 5
PÁGINA 6
EXTENSO Y PROFUNDO
Generalmente, el diseño más común de navegación es listar todos los elementos de
alto nivel del sitio, a menudo en una banda a la derecha de la pantalla.
El beneficio de este diseño (Extenso) es que el usuario es continuamente informado
de los servicios disponibles en el sitio haya entrado por el punto que haya entrado.
La desventaja es que existe una pérdida del 20% de la pantalla en páginas destino
pudiendo recuperar misma información con un clic adicional a la página de inicio.
La alternativa es presentar información en profundidad, esto es, en cada página
informar de los diferentes elementos jerárquicos que la anteceden, un esquema de
navegación que se conoce como breadcrumbs (migajas de pan, conocido así por el
cuento de Hansel Y Gretel, donde dejaban rastros en el camino para volver a casa).
Este segundo escenario tiene la ventaja de ocupar poco espacio y ser muy sencillo, lo
que deja al usuario concentrarse en el área de contenidos que es lo que
generalmente hace.
Su inconveniente radica en la dificultad de utilizarlo en estructuras no jerárquicas.
EL USUARIO CONTROLA LA NAVEGACIÓN
En el diseño de interfaces tradicional, el diseñador puede controlar donde puede ir el
usuario en cada momento. En el diseño Web no es así. Además, una aplicación
tradicional es un sistema de interfaces cerrado, dentro del que está el usuario.
Pero en la web el usuario se mueve rápidamente de un sitio a otro dentro de una
misma ventana, de un mismo entorno, por lo que llega a percibir la Web como un
todo, más que como una acumulación de aplicaciones diferenciadas.
Ello implica compartir una serie de reglas que el usuario ha aprendido a través de su
experiencia y que confía en que le sean suficientes para moverse por cualquier sitio
de la red.

Más contenido relacionado

La actualidad más candente

Presentación sobre Diseño Web
Presentación sobre Diseño WebPresentación sobre Diseño Web
Presentación sobre Diseño WebMarcelo Freitas
 
Diseño Web - Proceso de desarrollo y diseño
Diseño Web - Proceso de desarrollo y diseñoDiseño Web - Proceso de desarrollo y diseño
Diseño Web - Proceso de desarrollo y diseñoFrancisco Rodriguez
 
Internet y páginas web
Internet y páginas webInternet y páginas web
Internet y páginas websara paredes
 
Fundamentos del diseño web front end
Fundamentos del diseño web front endFundamentos del diseño web front end
Fundamentos del diseño web front endDavid Hurtado
 
DISEÑO Y MANEJO DE PAGINAS WED
DISEÑO Y MANEJO DE PAGINAS WEDDISEÑO Y MANEJO DE PAGINAS WED
DISEÑO Y MANEJO DE PAGINAS WEDsaidi-12barcelo
 
Fundamentos del diseño gráfico para web e interactivos
Fundamentos del diseño gráfico para web e interactivosFundamentos del diseño gráfico para web e interactivos
Fundamentos del diseño gráfico para web e interactivosRoger Crunch
 
PATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEBPATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEBMario Martinez
 
Patrones de Diseño Web (Getting Input - Obtención de Información)
Patrones de Diseño Web (Getting Input - Obtención de Información)Patrones de Diseño Web (Getting Input - Obtención de Información)
Patrones de Diseño Web (Getting Input - Obtención de Información)Alex Naupay
 
Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación
Patrones de Diseño Web (Getting Input - Obtención de Información) - PresentaciónPatrones de Diseño Web (Getting Input - Obtención de Información) - Presentación
Patrones de Diseño Web (Getting Input - Obtención de Información) - PresentaciónAlex Naupay
 
Diseño e instalación de sitios web
Diseño e instalación de sitios webDiseño e instalación de sitios web
Diseño e instalación de sitios webKareliaRivas
 
patrones de diseño web.
  patrones de diseño web.   patrones de diseño web.
patrones de diseño web. Diana Luna
 

La actualidad más candente (20)

Usabilidad y accesibilidad web
Usabilidad y accesibilidad webUsabilidad y accesibilidad web
Usabilidad y accesibilidad web
 
Tipos de plataforma web
Tipos de plataforma webTipos de plataforma web
Tipos de plataforma web
 
Presentación sobre Diseño Web
Presentación sobre Diseño WebPresentación sobre Diseño Web
Presentación sobre Diseño Web
 
Diseño Web 02
Diseño Web 02Diseño Web 02
Diseño Web 02
 
Maicol
MaicolMaicol
Maicol
 
Diseño Web - Proceso de desarrollo y diseño
Diseño Web - Proceso de desarrollo y diseñoDiseño Web - Proceso de desarrollo y diseño
Diseño Web - Proceso de desarrollo y diseño
 
Diseño de interfaz
Diseño de interfazDiseño de interfaz
Diseño de interfaz
 
Diseño de Interfaz
Diseño de InterfazDiseño de Interfaz
Diseño de Interfaz
 
Internet y páginas web
Internet y páginas webInternet y páginas web
Internet y páginas web
 
Fundamentos del diseño web front end
Fundamentos del diseño web front endFundamentos del diseño web front end
Fundamentos del diseño web front end
 
DISEÑO Y MANEJO DE PAGINAS WED
DISEÑO Y MANEJO DE PAGINAS WEDDISEÑO Y MANEJO DE PAGINAS WED
DISEÑO Y MANEJO DE PAGINAS WED
 
Fundamentos del diseño gráfico para web e interactivos
Fundamentos del diseño gráfico para web e interactivosFundamentos del diseño gráfico para web e interactivos
Fundamentos del diseño gráfico para web e interactivos
 
PATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEBPATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEB
 
Diseño Web
Diseño WebDiseño Web
Diseño Web
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 
Patrones de Diseño Web (Getting Input - Obtención de Información)
Patrones de Diseño Web (Getting Input - Obtención de Información)Patrones de Diseño Web (Getting Input - Obtención de Información)
Patrones de Diseño Web (Getting Input - Obtención de Información)
 
Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación
Patrones de Diseño Web (Getting Input - Obtención de Información) - PresentaciónPatrones de Diseño Web (Getting Input - Obtención de Información) - Presentación
Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación
 
ing.software
ing.softwareing.software
ing.software
 
Diseño e instalación de sitios web
Diseño e instalación de sitios webDiseño e instalación de sitios web
Diseño e instalación de sitios web
 
patrones de diseño web.
  patrones de diseño web.   patrones de diseño web.
patrones de diseño web.
 

Similar a Diseño e instalación de sitios web (navegación del sitio / el usuario controla la navegación)

Revista TicNews Abril 2015
Revista TicNews Abril 2015Revista TicNews Abril 2015
Revista TicNews Abril 2015Edicion Ticnews
 
Guía de Proyectos Web (extraordinario)
Guía de Proyectos Web (extraordinario)Guía de Proyectos Web (extraordinario)
Guía de Proyectos Web (extraordinario)Ginis Cortes
 
Elaboración de documentos web mediante lenguajes de marcas
Elaboración de documentos web mediante lenguajes de marcasElaboración de documentos web mediante lenguajes de marcas
Elaboración de documentos web mediante lenguajes de marcasJomicast
 
DISEÑO DE INTERFACES.pdf
DISEÑO DE INTERFACES.pdfDISEÑO DE INTERFACES.pdf
DISEÑO DE INTERFACES.pdfLauLopez16
 
Jm checklist
Jm checklistJm checklist
Jm checklistdedarisu
 
Usabilidad y Arquitectura de Información, un pretexto para hablar de la satis...
Usabilidad y Arquitectura de Información, un pretexto para hablar de la satis...Usabilidad y Arquitectura de Información, un pretexto para hablar de la satis...
Usabilidad y Arquitectura de Información, un pretexto para hablar de la satis...Alexa Zárrate
 
Accesibilidad vs usabilidad
Accesibilidad vs usabilidadAccesibilidad vs usabilidad
Accesibilidad vs usabilidadSol Escobar
 

Similar a Diseño e instalación de sitios web (navegación del sitio / el usuario controla la navegación) (20)

NSU
NSUNSU
NSU
 
Revista TicNews Abril 2015
Revista TicNews Abril 2015Revista TicNews Abril 2015
Revista TicNews Abril 2015
 
T08 dawebnavega
T08 dawebnavegaT08 dawebnavega
T08 dawebnavega
 
Mapas de navegación
Mapas de navegaciónMapas de navegación
Mapas de navegación
 
Investigación unidad II
Investigación unidad IIInvestigación unidad II
Investigación unidad II
 
Multimedia
MultimediaMultimedia
Multimedia
 
Guía de Proyectos Web (extraordinario)
Guía de Proyectos Web (extraordinario)Guía de Proyectos Web (extraordinario)
Guía de Proyectos Web (extraordinario)
 
Clase no 3
Clase no 3Clase no 3
Clase no 3
 
Elaboración de documentos web mediante lenguajes de marcas
Elaboración de documentos web mediante lenguajes de marcasElaboración de documentos web mediante lenguajes de marcas
Elaboración de documentos web mediante lenguajes de marcas
 
DISEÑO DE INTERFACES.pdf
DISEÑO DE INTERFACES.pdfDISEÑO DE INTERFACES.pdf
DISEÑO DE INTERFACES.pdf
 
Fundamentos DiseñO Web
Fundamentos DiseñO WebFundamentos DiseñO Web
Fundamentos DiseñO Web
 
IA GUIDE
IA GUIDEIA GUIDE
IA GUIDE
 
IA GUIDE
IA GUIDEIA GUIDE
IA GUIDE
 
Diseo web
Diseo webDiseo web
Diseo web
 
Jm checklist
Jm checklistJm checklist
Jm checklist
 
Documento pdf
Documento pdfDocumento pdf
Documento pdf
 
Arquitectura de la información
Arquitectura de la informaciónArquitectura de la información
Arquitectura de la información
 
Usabilidad y Arquitectura de Información, un pretexto para hablar de la satis...
Usabilidad y Arquitectura de Información, un pretexto para hablar de la satis...Usabilidad y Arquitectura de Información, un pretexto para hablar de la satis...
Usabilidad y Arquitectura de Información, un pretexto para hablar de la satis...
 
Accesibilidad vs usabilidad
Accesibilidad vs usabilidadAccesibilidad vs usabilidad
Accesibilidad vs usabilidad
 
Diseno web 4
Diseno web 4Diseno web 4
Diseno web 4
 

Más de KareliaRivas

Lenguaje de programación Python
Lenguaje de programación PythonLenguaje de programación Python
Lenguaje de programación PythonKareliaRivas
 
Diseño e instalación de sitios web (PHP hypertext preprocessor)
Diseño e instalación de sitios web (PHP hypertext preprocessor)Diseño e instalación de sitios web (PHP hypertext preprocessor)
Diseño e instalación de sitios web (PHP hypertext preprocessor)KareliaRivas
 
Estrategia de aprendizaje 17 (Herencia)
Estrategia de aprendizaje 17 (Herencia)Estrategia de aprendizaje 17 (Herencia)
Estrategia de aprendizaje 17 (Herencia)KareliaRivas
 
Programación orientada a objetos (Herencia)
Programación orientada a objetos (Herencia)Programación orientada a objetos (Herencia)
Programación orientada a objetos (Herencia)KareliaRivas
 
Estrategia de aprendizaje 16 (Introducción a html)
Estrategia de aprendizaje 16 (Introducción a html)Estrategia de aprendizaje 16 (Introducción a html)
Estrategia de aprendizaje 16 (Introducción a html)KareliaRivas
 
Introducción a HTML
Introducción a HTMLIntroducción a HTML
Introducción a HTMLKareliaRivas
 
Programación orientada a objetos (Crear objetos)
Programación orientada a objetos (Crear objetos)Programación orientada a objetos (Crear objetos)
Programación orientada a objetos (Crear objetos)KareliaRivas
 
Programación orientada a objetos (Creación de clases)
Programación orientada a objetos (Creación de clases)Programación orientada a objetos (Creación de clases)
Programación orientada a objetos (Creación de clases)KareliaRivas
 
Los tipos de lenguaje de programación
Los tipos de lenguaje de programaciónLos tipos de lenguaje de programación
Los tipos de lenguaje de programaciónKareliaRivas
 
Diseño e instalación de sitios web (Apache HTTP server)
Diseño e instalación de sitios web (Apache HTTP server)Diseño e instalación de sitios web (Apache HTTP server)
Diseño e instalación de sitios web (Apache HTTP server)KareliaRivas
 
Introducción a la programación orientada a objetos en c (POO)
Introducción a la programación orientada a objetos en c (POO)Introducción a la programación orientada a objetos en c (POO)
Introducción a la programación orientada a objetos en c (POO)KareliaRivas
 
Lenguajes de programación
Lenguajes de programaciónLenguajes de programación
Lenguajes de programaciónKareliaRivas
 
Diseño e instalación de sitios web (Definición de un servidor web)
Diseño e instalación de sitios web (Definición de un servidor web)Diseño e instalación de sitios web (Definición de un servidor web)
Diseño e instalación de sitios web (Definición de un servidor web)KareliaRivas
 
Interfaces para sistemas de gestión de bases de datos
Interfaces para sistemas de gestión de bases de datosInterfaces para sistemas de gestión de bases de datos
Interfaces para sistemas de gestión de bases de datosKareliaRivas
 
Recursividad en programación
Recursividad en programaciónRecursividad en programación
Recursividad en programaciónKareliaRivas
 
Diseño e instalación de sitios web (El reto del espacio en pantalla / plantil...
Diseño e instalación de sitios web (El reto del espacio en pantalla / plantil...Diseño e instalación de sitios web (El reto del espacio en pantalla / plantil...
Diseño e instalación de sitios web (El reto del espacio en pantalla / plantil...KareliaRivas
 

Más de KareliaRivas (20)

Lenguaje de programación Python
Lenguaje de programación PythonLenguaje de programación Python
Lenguaje de programación Python
 
Diseño e instalación de sitios web (PHP hypertext preprocessor)
Diseño e instalación de sitios web (PHP hypertext preprocessor)Diseño e instalación de sitios web (PHP hypertext preprocessor)
Diseño e instalación de sitios web (PHP hypertext preprocessor)
 
Estrategia de aprendizaje 17 (Herencia)
Estrategia de aprendizaje 17 (Herencia)Estrategia de aprendizaje 17 (Herencia)
Estrategia de aprendizaje 17 (Herencia)
 
Programación orientada a objetos (Herencia)
Programación orientada a objetos (Herencia)Programación orientada a objetos (Herencia)
Programación orientada a objetos (Herencia)
 
Estrategia de aprendizaje 16 (Introducción a html)
Estrategia de aprendizaje 16 (Introducción a html)Estrategia de aprendizaje 16 (Introducción a html)
Estrategia de aprendizaje 16 (Introducción a html)
 
C#
C#C#
C#
 
Introducción a HTML
Introducción a HTMLIntroducción a HTML
Introducción a HTML
 
Programación orientada a objetos (Crear objetos)
Programación orientada a objetos (Crear objetos)Programación orientada a objetos (Crear objetos)
Programación orientada a objetos (Crear objetos)
 
Java
JavaJava
Java
 
Html
HtmlHtml
Html
 
Programación orientada a objetos (Creación de clases)
Programación orientada a objetos (Creación de clases)Programación orientada a objetos (Creación de clases)
Programación orientada a objetos (Creación de clases)
 
Los tipos de lenguaje de programación
Los tipos de lenguaje de programaciónLos tipos de lenguaje de programación
Los tipos de lenguaje de programación
 
Diseño e instalación de sitios web (Apache HTTP server)
Diseño e instalación de sitios web (Apache HTTP server)Diseño e instalación de sitios web (Apache HTTP server)
Diseño e instalación de sitios web (Apache HTTP server)
 
Introducción a la programación orientada a objetos en c (POO)
Introducción a la programación orientada a objetos en c (POO)Introducción a la programación orientada a objetos en c (POO)
Introducción a la programación orientada a objetos en c (POO)
 
Lenguajes de programación
Lenguajes de programaciónLenguajes de programación
Lenguajes de programación
 
Diseño e instalación de sitios web (Definición de un servidor web)
Diseño e instalación de sitios web (Definición de un servidor web)Diseño e instalación de sitios web (Definición de un servidor web)
Diseño e instalación de sitios web (Definición de un servidor web)
 
Factorial en C++
Factorial en C++Factorial en C++
Factorial en C++
 
Interfaces para sistemas de gestión de bases de datos
Interfaces para sistemas de gestión de bases de datosInterfaces para sistemas de gestión de bases de datos
Interfaces para sistemas de gestión de bases de datos
 
Recursividad en programación
Recursividad en programaciónRecursividad en programación
Recursividad en programación
 
Diseño e instalación de sitios web (El reto del espacio en pantalla / plantil...
Diseño e instalación de sitios web (El reto del espacio en pantalla / plantil...Diseño e instalación de sitios web (El reto del espacio en pantalla / plantil...
Diseño e instalación de sitios web (El reto del espacio en pantalla / plantil...
 

Último

Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricGlobal Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricKeyla Dolores Méndez
 
Plan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxPlan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxpabonheidy28
 
La era de la educación digital y sus desafios
La era de la educación digital y sus desafiosLa era de la educación digital y sus desafios
La era de la educación digital y sus desafiosFundación YOD YOD
 
SalmorejoTech 2024 - Spring Boot <3 Testcontainers
SalmorejoTech 2024 - Spring Boot <3 TestcontainersSalmorejoTech 2024 - Spring Boot <3 Testcontainers
SalmorejoTech 2024 - Spring Boot <3 TestcontainersIván López Martín
 
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...silviayucra2
 
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdftrabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdfIsabellaMontaomurill
 
Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...
Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...
Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...AlanCedillo9
 
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...FacuMeza2
 
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptxProyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx241521559
 
Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfRedes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfsoporteupcology
 
Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024GiovanniJavierHidalg
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveFagnerLisboa3
 
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)GDGSucre
 
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Josephguía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan JosephBRAYANJOSEPHPEREZGOM
 
KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesKELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesFundación YOD YOD
 
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíaTrabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíassuserf18419
 
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfPARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfSergioMendoza354770
 
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE  DE TECNOLOGIA E INFORMATICA PRIMARIACLASE  DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIAWilbisVega
 
Hernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptxHernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptxJOSEMANUELHERNANDEZH11
 

Último (19)

Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricGlobal Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
 
Plan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxPlan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docx
 
La era de la educación digital y sus desafios
La era de la educación digital y sus desafiosLa era de la educación digital y sus desafios
La era de la educación digital y sus desafios
 
SalmorejoTech 2024 - Spring Boot <3 Testcontainers
SalmorejoTech 2024 - Spring Boot <3 TestcontainersSalmorejoTech 2024 - Spring Boot <3 Testcontainers
SalmorejoTech 2024 - Spring Boot <3 Testcontainers
 
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
 
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdftrabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdf
 
Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...
Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...
Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...
 
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
 
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptxProyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx
 
Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfRedes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdf
 
Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
 
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)
 
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Josephguía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Joseph
 
KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesKELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento Protégeles
 
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíaTrabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnología
 
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfPARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
 
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE  DE TECNOLOGIA E INFORMATICA PRIMARIACLASE  DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
 
Hernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptxHernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptx
 

Diseño e instalación de sitios web (navegación del sitio / el usuario controla la navegación)

  • 1. DISEÑO E INSTALACIÓN DE SITIOS WEB Navegación del sitio El usuario controla la navegación
  • 2. NAVEGACIÓN DEL SITIO Otro aspecto a tener en cuenta en el diseño es la navegación del sitio. Guía a los visitantes hacia la información que se requieren de forma rápida e intuitiva Conduce al visitante hacia las páginas donde este es capaz de interactuar con los elementos del sitio. ¿Dónde estoy? ¿Dónde he estado? ¿A dónde puedo ir? Un sistema de navegación útil es aquel que: Construir un sistema de navegación que contribuya a incrementar la satisfacción del usuario y que, en consecuencia, tribute al éxito del sitio, está más allá de agregarle enlaces. En esta labor se debe considerar un conjunto de factores como el agrupamiento de la información, la estructura, los retornos a páginas, entre otros. La navegación es uno de los elementos básicos de la Web, y va más allá del uso de enlaces hypertextuales. Una interface de navegación debe ayudar al usuario a responder a tres preguntas: PÁGINA 2
  • 3. ¿DÓNDE ESTOY? En relación a la Web como un todo En relación a la estructura del sitio Es probablemente la pregunta del millón. La respuesta, en términos de situación dentro de un sitio debe proporcionarse a dos niveles: La primera es importante en tanto que el usuario a menudo percibe la Web como un todo. Los cambios drásticos en mecanismos de navegación no son bien asumidos dentro de esta perspectiva. Esto implica así mismo, que el usuario no sabrá en qué sitio está a menos que se lo digas. Por ello, la norma número uno es colocar tu logo o marca identificativa en todas tus páginas. La situación en cuanto a la estructura del sitio se consigue mediante la inclusión de cabeceras que muestran a grandes rasgos la estructura del web y resaltan la situación actual. Un tercer elemento a tener en cuenta es el propio título de la página, que debe ser significante e individualizado. PÁGINA 3
  • 4. PÁGINA 4 ¿DONDE HE ESTADO? El botón atrás del navegador que nos proporciona una historia secuencial de las páginas visitadas. Los enlaces ya visitados que nos indican las opciones ya vistas dentro de los enlaces de una página Con la tecnología Web actual resulta difícil contestar a esta pregunta. Existen, sin embargo, algunos recursos que nos permiten afrontarla: En este sentido, es importante respetar la convención en cuanto a la representación de los links (azul para los activos y rosa para los visitados). El usuario sabe siempre de esta manera lo que ha visto y lo que no, dentro siempre de lo que puede ver.
  • 5. ¿A DÓNDE PUEDO IR? Enlaces embebidos (El tradicional texto subrayado) Enlaces estructurales (Apuntan a otro nivel de la estructura, por lo que diferirán de página a página, si bien es necesario que mantengan una coherencia comprendida y esperada por el usuario. Es más conveniente utilizar nombres descriptivos del nivel jerárquico que este en sí) Enlaces asociativos (Proporcionan información adicional o colateral, del tipo de "ver también") Esta cuestión se responde con las opciones visibles de navegación y con el resto de enlaces dentro de la página. Es imposible mostrar todos los destinos posibles en una sola página, una buena estructura del sitio, fácil de comprender y asimilar por el usuario, será de gran utilidad a la hora de conocer los puntos posibles de destino desde un sitio dado. Hay tres clase de hyperenlaces que pueden ser usados en una página: PÁGINA 5
  • 6. PÁGINA 6 EXTENSO Y PROFUNDO Generalmente, el diseño más común de navegación es listar todos los elementos de alto nivel del sitio, a menudo en una banda a la derecha de la pantalla. El beneficio de este diseño (Extenso) es que el usuario es continuamente informado de los servicios disponibles en el sitio haya entrado por el punto que haya entrado. La desventaja es que existe una pérdida del 20% de la pantalla en páginas destino pudiendo recuperar misma información con un clic adicional a la página de inicio. La alternativa es presentar información en profundidad, esto es, en cada página informar de los diferentes elementos jerárquicos que la anteceden, un esquema de navegación que se conoce como breadcrumbs (migajas de pan, conocido así por el cuento de Hansel Y Gretel, donde dejaban rastros en el camino para volver a casa). Este segundo escenario tiene la ventaja de ocupar poco espacio y ser muy sencillo, lo que deja al usuario concentrarse en el área de contenidos que es lo que generalmente hace. Su inconveniente radica en la dificultad de utilizarlo en estructuras no jerárquicas. EL USUARIO CONTROLA LA NAVEGACIÓN En el diseño de interfaces tradicional, el diseñador puede controlar donde puede ir el usuario en cada momento. En el diseño Web no es así. Además, una aplicación tradicional es un sistema de interfaces cerrado, dentro del que está el usuario. Pero en la web el usuario se mueve rápidamente de un sitio a otro dentro de una misma ventana, de un mismo entorno, por lo que llega a percibir la Web como un todo, más que como una acumulación de aplicaciones diferenciadas. Ello implica compartir una serie de reglas que el usuario ha aprendido a través de su experiencia y que confía en que le sean suficientes para moverse por cualquier sitio de la red.