SlideShare una empresa de Scribd logo
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

Usabilidad y accesibilidad web
Usabilidad y accesibilidad webUsabilidad y accesibilidad web
Usabilidad y accesibilidad web
Efrain Herrera Jimenez
 
Tipos de plataforma web
Tipos de plataforma webTipos de plataforma web
Tipos de plataforma web
Gustavo Quintero
 
Presentación sobre Diseño Web
Presentación sobre Diseño WebPresentación sobre Diseño Web
Presentación sobre Diseño Web
Marcelo Freitas
 
Diseño Web 02
Diseño Web 02Diseño Web 02
Diseño Web 02
Raymond Marquina
 
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
Francisco 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 end
David 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 interactivos
Roger Crunch
 
PATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEBPATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEB
Mario Martinez
 
Diseño Web
Diseño WebDiseño Web
Diseño Web
AngelyBarnica
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
JesusRubio51
 
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ón
Alex Naupay
 
ing.software
ing.softwareing.software
ing.software
Enrique Reyes
 
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
KareliaRivas
 
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 2015
Edicion Ticnews
 
T08 dawebnavega
T08 dawebnavegaT08 dawebnavega
T08 dawebnavega
Ramón Patiño Trejo
 
Investigación unidad II
Investigación unidad IIInvestigación unidad II
Investigación unidad II
alejandrodavila35
 
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 marcas
Jomicast
 
DISEÑO DE INTERFACES.pdf
DISEÑO DE INTERFACES.pdfDISEÑO DE INTERFACES.pdf
DISEÑO DE INTERFACES.pdf
LauLopez16
 
Fundamentos DiseñO Web
Fundamentos DiseñO WebFundamentos DiseñO Web
Fundamentos DiseñO Web
Raymond Marquina
 
Diseo web
Diseo webDiseo web
Diseo web
Yancy Cruz
 
Documento pdf
Documento pdfDocumento pdf
Documento pdf
johannafreitez
 
Jm checklist
Jm checklistJm checklist
Jm checklistdedarisu
 
Arquitectura de la información
Arquitectura de la informaciónArquitectura de la información
Arquitectura de la información
Sabdiel Batista Díaz
 
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
 
Documento pdf
Documento pdfDocumento pdf
Documento pdf
 
Jm checklist
Jm checklistJm checklist
Jm checklist
 
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 Python
KareliaRivas
 
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
 
C#
C#C#
Introducción a HTML
Introducción a HTMLIntroducción a HTML
Introducción a HTML
KareliaRivas
 
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
 
Java
JavaJava
Html
HtmlHtml
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ón
KareliaRivas
 
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ón
KareliaRivas
 
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
 
Factorial en C++
Factorial en C++Factorial en C++
Factorial en C++
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 datos
KareliaRivas
 
Recursividad en programación
Recursividad en programaciónRecursividad en programación
Recursividad en programación
KareliaRivas
 
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

Inteligencia Artificial y Ciberseguridad.pdf
Inteligencia Artificial y Ciberseguridad.pdfInteligencia Artificial y Ciberseguridad.pdf
Inteligencia Artificial y Ciberseguridad.pdf
Emilio Casbas
 
Alan Turing Vida o biografía resumida como presentación
Alan Turing Vida o biografía resumida como presentaciónAlan Turing Vida o biografía resumida como presentación
Alan Turing Vida o biografía resumida como presentación
JuanPrez962115
 
Conceptos Básicos de Programación Proyecto
Conceptos Básicos de Programación ProyectoConceptos Básicos de Programación Proyecto
Conceptos Básicos de Programación Proyecto
cofferub
 
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
vazquezgarciajesusma
 
Diagrama de flujo - ingenieria de sistemas 5to semestre
Diagrama de flujo - ingenieria de sistemas 5to semestreDiagrama de flujo - ingenieria de sistemas 5to semestre
Diagrama de flujo - ingenieria de sistemas 5to semestre
DiegoCampos433849
 
trabajo de tecnologia, segundo periodo 9-6f
trabajo de tecnologia, segundo periodo 9-6ftrabajo de tecnologia, segundo periodo 9-6f
trabajo de tecnologia, segundo periodo 9-6f
zoecaicedosalazar
 
biogas industrial para guiarse en proyectos
biogas industrial para guiarse en proyectosbiogas industrial para guiarse en proyectos
biogas industrial para guiarse en proyectos
Luis Enrique Zafra Haro
 
Conceptos Básicos de Programación. Tecnología
Conceptos Básicos de Programación. TecnologíaConceptos Básicos de Programación. Tecnología
Conceptos Básicos de Programación. Tecnología
coloradxmaria
 
Trabajo Coding For kids 1 y 2 grado 9-4.pdf
Trabajo Coding For kids 1 y 2 grado 9-4.pdfTrabajo Coding For kids 1 y 2 grado 9-4.pdf
Trabajo Coding For kids 1 y 2 grado 9-4.pdf
jjfch3110
 
Estructuras básicas_ conceptos básicos de programación.pdf
Estructuras básicas_  conceptos básicos de programación.pdfEstructuras básicas_  conceptos básicos de programación.pdf
Estructuras básicas_ conceptos básicos de programación.pdf
ItsSofi
 
TRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
TRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdfTRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
TRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
thomasdcroz38
 
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...
Telefónica
 
Desarrollo de Habilidades de Pensamiento.
Desarrollo de Habilidades de Pensamiento.Desarrollo de Habilidades de Pensamiento.
Desarrollo de Habilidades de Pensamiento.
AlejandraCasallas7
 
Robótica educativa para la eduacion primaria .pptx
Robótica educativa para la eduacion primaria .pptxRobótica educativa para la eduacion primaria .pptx
Robótica educativa para la eduacion primaria .pptx
44652726
 
EduFlex, una educación accesible para quienes no entienden en clases
EduFlex, una educación accesible para quienes no entienden en clasesEduFlex, una educación accesible para quienes no entienden en clases
EduFlex, una educación accesible para quienes no entienden en clases
PABLOCESARGARZONBENI
 
Trabajo Coding For kids 1 y 2 grado 9-4.pdf
Trabajo Coding For kids 1 y 2 grado 9-4.pdfTrabajo Coding For kids 1 y 2 grado 9-4.pdf
Trabajo Coding For kids 1 y 2 grado 9-4.pdf
cj3806354
 
Conceptos Básicos de Programación L.D 10-5
Conceptos Básicos de Programación L.D 10-5Conceptos Básicos de Programación L.D 10-5
Conceptos Básicos de Programación L.D 10-5
JulyMuoz18
 
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdfDESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
marianabz2403
 
ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024
ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024
ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024
DanielErazoMedina
 
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
vazquezgarciajesusma
 

Último (20)

Inteligencia Artificial y Ciberseguridad.pdf
Inteligencia Artificial y Ciberseguridad.pdfInteligencia Artificial y Ciberseguridad.pdf
Inteligencia Artificial y Ciberseguridad.pdf
 
Alan Turing Vida o biografía resumida como presentación
Alan Turing Vida o biografía resumida como presentaciónAlan Turing Vida o biografía resumida como presentación
Alan Turing Vida o biografía resumida como presentación
 
Conceptos Básicos de Programación Proyecto
Conceptos Básicos de Programación ProyectoConceptos Básicos de Programación Proyecto
Conceptos Básicos de Programación Proyecto
 
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
 
Diagrama de flujo - ingenieria de sistemas 5to semestre
Diagrama de flujo - ingenieria de sistemas 5to semestreDiagrama de flujo - ingenieria de sistemas 5to semestre
Diagrama de flujo - ingenieria de sistemas 5to semestre
 
trabajo de tecnologia, segundo periodo 9-6f
trabajo de tecnologia, segundo periodo 9-6ftrabajo de tecnologia, segundo periodo 9-6f
trabajo de tecnologia, segundo periodo 9-6f
 
biogas industrial para guiarse en proyectos
biogas industrial para guiarse en proyectosbiogas industrial para guiarse en proyectos
biogas industrial para guiarse en proyectos
 
Conceptos Básicos de Programación. Tecnología
Conceptos Básicos de Programación. TecnologíaConceptos Básicos de Programación. Tecnología
Conceptos Básicos de Programación. Tecnología
 
Trabajo Coding For kids 1 y 2 grado 9-4.pdf
Trabajo Coding For kids 1 y 2 grado 9-4.pdfTrabajo Coding For kids 1 y 2 grado 9-4.pdf
Trabajo Coding For kids 1 y 2 grado 9-4.pdf
 
Estructuras básicas_ conceptos básicos de programación.pdf
Estructuras básicas_  conceptos básicos de programación.pdfEstructuras básicas_  conceptos básicos de programación.pdf
Estructuras básicas_ conceptos básicos de programación.pdf
 
TRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
TRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdfTRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
TRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
 
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...
 
Desarrollo de Habilidades de Pensamiento.
Desarrollo de Habilidades de Pensamiento.Desarrollo de Habilidades de Pensamiento.
Desarrollo de Habilidades de Pensamiento.
 
Robótica educativa para la eduacion primaria .pptx
Robótica educativa para la eduacion primaria .pptxRobótica educativa para la eduacion primaria .pptx
Robótica educativa para la eduacion primaria .pptx
 
EduFlex, una educación accesible para quienes no entienden en clases
EduFlex, una educación accesible para quienes no entienden en clasesEduFlex, una educación accesible para quienes no entienden en clases
EduFlex, una educación accesible para quienes no entienden en clases
 
Trabajo Coding For kids 1 y 2 grado 9-4.pdf
Trabajo Coding For kids 1 y 2 grado 9-4.pdfTrabajo Coding For kids 1 y 2 grado 9-4.pdf
Trabajo Coding For kids 1 y 2 grado 9-4.pdf
 
Conceptos Básicos de Programación L.D 10-5
Conceptos Básicos de Programación L.D 10-5Conceptos Básicos de Programación L.D 10-5
Conceptos Básicos de Programación L.D 10-5
 
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdfDESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
 
ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024
ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024
ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024
 
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
 

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.