SlideShare una empresa de Scribd logo
1 de 7
Descargar para leer sin conexión
Barras de navegación
Las barras de navegación son componentes adaptados al diseño
web responsive y que se utilizan como elemento principal de navegación tanto
en las aplicaciones como en los sitios web.
Los menús están contenidos en una barra de menú, la cual se puede decir que
es una propiedad que tienen las ventanas para poseer menús, esto es porque la
barra de menú en sí misma no es una ventana como lo puede ser un botón de
comando o un cuadro de texto, pero tampoco es una barra de herramientas, sino
un objeto contenedor de otros menús
En los dispositivos móviles se muestran inicialmente minimizadas y al pulsar
sobre ellas, se despliegan todas sus opciones. Si la anchura del dispositivo
aumenta hasta un nivel suficiente, las barras de navegación muestran todos sus
contenidos horizontalmente.
Dependiendo del contenido de tu barra de navegación, puede ser necesario
modificar el punto a partir del cual se muestra horizontal en vez de minimizada.
Para ello, modifica el valor de la variable @grid-float-breakpoint en tu archivo
LESS o añade tu propia media query en el archivo CSS.
Estructura de los menús
Los menús se organizan siguiendo el principio de los árboles, esto quiere decir
que un menú puede tener menús hijos y menús padres. Inicialmente, al crear
una barra de menú, el identificador del objeto nuevo es un identificador de menús
válido, además de que la barra de menú queda como la raíz, el nodo principal, o
en otras palabras, un menú sin padres.
De ahí se pueden empezar a crear menús hijos como lo puede ser uno que se
llame Archivo, otro Edición y otro Ver, que tendrán como padre al manipulador
(handler) del menú raíz; estos menús pueden tener menús hijos, así, archivo,
descendiendo de MenuBar puede engendrar, Abrir, Guardar, Guardar
como, Codificación, etc.
La estructura de una página web influye directamente en el comportamiento de
las visitas. Uno de los elementos fundamentales es el menú, que permite a los
internautas navegar por la página web o el blog. Debe mostrar cuáles son los
contenidos de la web y cómo acceder a ellos. Os dejamos 7 consejos para crear
un menú eficaz en vuestra página web.
Antes de crear los menús de una página web es importante haber reflexionado
sobre su estructutra. Debéis plantearos preguntas como ¿cuál es el objetivo? ¿a
quién va dirigido? ¿qué necesita el público?. Según los contenidos que queráis
incluir, cread una estructura previa que permita un orden lógico de toda la
información que se incluirá en la página web.
1.Elegir dónde ubicar el menú
En mi web podremos incluir un menú horizontal y según la plantilla, uno o dos
menús verticales, uno a la derecha y otro a la izquierda. Podéis combinarlo como
queráis, os aconsejamos tener cuidado con la información repetida. La
localización de los menús afectará a la manera en que los internautas navegan
(o no) por vuestra página web.
2. Limitar el número de enlaces
Como norma general se considera apropiado no superar los 7 enlaces por menú
de navegación. Una cantidad mayor puede confundir a los usuarios y hacer que
se sientan "perdidos" entre tanto enlace. Os aconsejamos evitar los menús
horizontales de más de una línea y los menús verticales demasiado extensos
que obligan al lector a desplazarse por la pantalla. Otro consejo es que si vuestro
logo lleva a la página de inicio de vuestra web, no es necesario incluir un enlace
de tipo "Inicio", ya que sería información redundante.
3. Elegir el título adecuado
La persona que visita la página web debe comprender fácilmente qué es lo que
va a encontrar si hace clic en un enlace del menú. Una o dos palabras suelen
ser suficientes. Por ejemplo, es mejor establecer como título del enlace..
4. Ordenar correctamente los enlaces
El orden en que se muestran los enlaces en los menús también es importante.
Los enlaces a los contenidos más importantes deben situarse en las primeras
posiciones. Habitualmente, enlaces como "Dónde estamos" o "Contacto" se
suelen situar en último lugar, por lo que los internautas ya están acostumbrados
a este funcionamiento.
5. Guardar la coherencia entre páginas
Intentad mantener el lugar del menú principal en todas las páginas y no cambiéis
el orden de los enlaces ni los títulos. Sí podéis, por ejemplo, incluir un menú
secundario en determinadas zonas de la página web. Les recordamos que
puedes crear diferentes estructuras de menús para ajustarlas a las necesidades
de nuestra página web. Os recomendamos consultar el tutorial sobre cómo crear
diferentes estructuras de menús.
6. Comprobar los enlaces
Puede parecer evidente, pero es muy importante comprobar que todos los
enlaces de cada menú funcionan correctamente y llevan al internauta a la página
correcta. Además, podéis utilizar las estadísticas de frecuentación para conocer
cuáles son las páginas más visitadas y estudiar si vuestra estructura de menús
es la adecuada.
Tipos de Sistemas de Navegación
Durante la fase de planeación de un sitio web, generalmente se consideran
varios tipos de sistemas de navegación. Para lograr el éxito es necesario
conocerlos y entender en qué medida cada uno ofrece flexibilidad y usabilidad
para contexto en el que queremos que funcione. Pueden identificarse cuatro
tipos principales de SN:
 Sistemas de navegación lineal
 Sistemas de navegación no lineal
 Sistemas de navegación jerárquica
 Sistemas de navegación compuesta
LINEAL
La navegación lineal permite un flujo de la información mas estable, es muy útil
cuando se quiere explicar al usuario paso a paso, pues permite que el usuario
reciba la información en un orden adecuado, únicamente con la opción de ir
adelante y atrás.
Ejemplo de un menú clásico para navegación lineal :
JERÁRQUICA
Navegación jerárquica o de árbol. Esta estructura comienza con una página
principal o raíz, se presentan varias opciones que permite ir visualizando páginas
más específicas. Éste tipo de navegación ofrece conceptos muy detallados que
se desglosan bajo conceptos más generales.
Ejemplo de menú para navegación jerárquica (Aquí entran la mayoría de
los menús desplegables):
NO LINEAL
Es adecuada cuando se tiene que conservar el camino general, pero hay que
dar lugar a ligeras variaciones, tales como saltarse determinadas páginas.
Permite algunos desvíos controlados, la estructura obliga a regresar al camino
principal, y normalmente al tener un desvío lateral es porque se muestra una
pequeña información adicional.
Ejemplo de menú para navegación no lineal:
COMPUESTA
La navegación compuesta es la que combina diferentes sistemas de navegación
para permitirle al usuario un recorrido más personalizado dentro del sitio.
Ejemplo de menú para navegación compuesta:
OTROS
SITEMAP O MAPA DE SITIO
Un mapa de sitio es la representación completa de la organización de la
información en un sitio web. Expresa todas las relaciones de jerarquía y
secuencia entre sus diferentes contenidos por medio de listas y vínculos.
PIE DE PÁGINAS
El último, pero no menos importante elemento de una web
El pie de página es una pequeña zona que ocupa
la parte inferior de tu web, y aunque su tamaño es modesto, resulta de suma
importancia en términos de diseño y para ofrecer información adicional. Existen
muchas posibilidades de usarlo. Si no sueles prestarle mucha atención, te
arriesgas a perder el interés de tu web. En este artículo, te explicamos cómo
aprovechar este pequeño gran espacio.
Texto del pie de página
Te recomendamos incluir en él la siguiente información:
• Derechos de autor, por ejemplo: “Copyright © 2012 | Tu Nombre”
• Número de teléfono o dirección actual: es fundamental poner esta información
en la página de contacto, pero si también figura en el pie de página, los visitantes
la encontrarán más fácilmente.
• Eslogan: incluir un eslogan en el pie de página es una buena estrategia para
fortalecer tu marca.
• Información adicional.
¡Aquí es en dónde se esconde toda la magia del pie de página! Esta sección es
completamente editable: ¡hasta las etiquetas HTML son aceptadas! Puedes
insertar texto con enlace, imágenes y hasta direcciones de e-mail.
Sugerencias:
• Tu nombre con un enlace a tu e-mail.
• También puedes añadir un logotipo (imagen) de tu compañía usando HTML.
• Insertar enlaces a webs de colaboradores: el pie de página es un lugar en el
que puedes añadir enlaces patrocinados, ya que es un área privilegiada de tu
página.
• Mejora la navegación: si no deseas sobrecargar el menú, el pie de página
puede ser usado para añadir secciones extra del menú.
• Enlaces a redes sociales: puedes utilizar tanto enlaces de texto como banners
(imágenes con enlace). Por ejemplo, usa el logo de Facebook con un enlace a
tu perfil para que tus visitantes puedan acceder fácilmente.
Como puedes ver, existen una gran variedad de opciones para usar en tu pie de
página. Deberías considerar qué es lo más beneficioso para tu web y elegir qué
elementos utilizar.

Más contenido relacionado

La actualidad más candente

La actualidad más candente (16)

Anatomía de un Sitio Web
Anatomía de un Sitio WebAnatomía de un Sitio Web
Anatomía de un Sitio Web
 
Anatomia de una pagina web
Anatomia de una pagina webAnatomia de una pagina web
Anatomia de una pagina web
 
Principios elementales de maquetación WEB
Principios elementales de maquetación WEBPrincipios elementales de maquetación WEB
Principios elementales de maquetación WEB
 
06 Primeros Pasos Para Aprender A Hacer Una PáGina Web
06 Primeros Pasos Para Aprender A Hacer Una PáGina Web06 Primeros Pasos Para Aprender A Hacer Una PáGina Web
06 Primeros Pasos Para Aprender A Hacer Una PáGina Web
 
Análisis de Sitio Web
Análisis de Sitio WebAnálisis de Sitio Web
Análisis de Sitio Web
 
Curso joomla
Curso joomlaCurso joomla
Curso joomla
 
Diseño de páginas Web
Diseño de páginas Web Diseño de páginas Web
Diseño de páginas Web
 
Moretti
MorettiMoretti
Moretti
 
Presentación1
Presentación1Presentación1
Presentación1
 
Paginas web
Paginas webPaginas web
Paginas web
 
Presentacion Diseño Web
Presentacion Diseño WebPresentacion Diseño Web
Presentacion Diseño Web
 
Páginas web actividad uno (2)
Páginas web actividad uno (2)Páginas web actividad uno (2)
Páginas web actividad uno (2)
 
Buenas Practicas - Web
Buenas Practicas - WebBuenas Practicas - Web
Buenas Practicas - Web
 
Proyecto web
Proyecto webProyecto web
Proyecto web
 
Pres3
Pres3Pres3
Pres3
 
Anatomia de una página web
Anatomia de una página webAnatomia de una página web
Anatomia de una página web
 

Similar a Menu de Navegacion y footer

Similar a Menu de Navegacion y footer (20)

Barra lateral
Barra lateralBarra lateral
Barra lateral
 
Barra lateral
Barra lateralBarra lateral
Barra lateral
 
estructura y diseño web partes de una pagina web
estructura y diseño web partes de una pagina webestructura y diseño web partes de una pagina web
estructura y diseño web partes de una pagina web
 
Navegar Po Un Sitio Web
Navegar Po Un Sitio WebNavegar Po Un Sitio Web
Navegar Po Un Sitio Web
 
Estructura del diseño web
Estructura del diseño webEstructura del diseño web
Estructura del diseño web
 
IA GUIDE
IA GUIDEIA GUIDE
IA GUIDE
 
Multimedia
MultimediaMultimedia
Multimedia
 
Guía paraevaluación experta
Guía paraevaluación expertaGuía paraevaluación experta
Guía paraevaluación experta
 
Documento pdf
Documento pdfDocumento pdf
Documento pdf
 
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
 
Guia html2
Guia html2Guia html2
Guia html2
 
tic
tictic
tic
 
Proyecto web
Proyecto webProyecto web
Proyecto web
 
Trabajo de informatica
Trabajo de informaticaTrabajo de informatica
Trabajo de informatica
 
Trabajo de informatica
Trabajo de informaticaTrabajo de informatica
Trabajo de informatica
 
Mapas de navegación
Mapas de navegaciónMapas de navegación
Mapas de navegación
 
Pagina web análisis de su estructura y diseño.
Pagina web análisis de su estructura y diseño.Pagina web análisis de su estructura y diseño.
Pagina web análisis de su estructura y diseño.
 
T08 dawebnavega
T08 dawebnavegaT08 dawebnavega
T08 dawebnavega
 
Kingston team final - Venta de Casas
Kingston team final - Venta de CasasKingston team final - Venta de Casas
Kingston team final - Venta de Casas
 
Diseño de navegación web
Diseño de navegación webDiseño de navegación web
Diseño de navegación web
 

Más de Yadith Gomez Nolasco (16)

Metodologia para-diseno-de-paginas-web
Metodologia para-diseno-de-paginas-webMetodologia para-diseno-de-paginas-web
Metodologia para-diseno-de-paginas-web
 
Manual chat
Manual chatManual chat
Manual chat
 
Fondo y contenido
Fondo y contenidoFondo y contenido
Fondo y contenido
 
Elementos básicos de un sitio web
Elementos básicos de un sitio webElementos básicos de un sitio web
Elementos básicos de un sitio web
 
Diseño web-personales institucionales
Diseño web-personales institucionalesDiseño web-personales institucionales
Diseño web-personales institucionales
 
Manual completo-html-desarrolloweb-nov2014
Manual completo-html-desarrolloweb-nov2014Manual completo-html-desarrolloweb-nov2014
Manual completo-html-desarrolloweb-nov2014
 
Manual css3 nov2014
Manual css3 nov2014Manual css3 nov2014
Manual css3 nov2014
 
Elaboración del resumen
Elaboración del resumenElaboración del resumen
Elaboración del resumen
 
El posicionamiento explicado en 9 pasos
El posicionamiento explicado en 9 pasosEl posicionamiento explicado en 9 pasos
El posicionamiento explicado en 9 pasos
 
Metodologia para-diseno-de-paginas-web
Metodologia para-diseno-de-paginas-webMetodologia para-diseno-de-paginas-web
Metodologia para-diseno-de-paginas-web
 
Menu y footer
Menu y footerMenu y footer
Menu y footer
 
Menusfooter
MenusfooterMenusfooter
Menusfooter
 
Manual chat
Manual chatManual chat
Manual chat
 
Fondo y contenido
Fondo y contenidoFondo y contenido
Fondo y contenido
 
Elementos básicos de un sitio web
Elementos básicos de un sitio webElementos básicos de un sitio web
Elementos básicos de un sitio web
 
Diseño Web-Personales Institucionales
Diseño Web-Personales InstitucionalesDiseño Web-Personales Institucionales
Diseño Web-Personales Institucionales
 

Último

EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptx
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptxEXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptx
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptxPryhaSalam
 
cortes de luz abril 2024 en la provincia de tungurahua
cortes de luz abril 2024 en la provincia de tungurahuacortes de luz abril 2024 en la provincia de tungurahua
cortes de luz abril 2024 en la provincia de tungurahuaDANNYISAACCARVAJALGA
 
Identificación de componentes Hardware del PC
Identificación de componentes Hardware del PCIdentificación de componentes Hardware del PC
Identificación de componentes Hardware del PCCesarFernandez937857
 
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
 
UNIDAD DPCC. 2DO. DE SECUNDARIA DEL 2024
UNIDAD DPCC. 2DO. DE  SECUNDARIA DEL 2024UNIDAD DPCC. 2DO. DE  SECUNDARIA DEL 2024
UNIDAD DPCC. 2DO. DE SECUNDARIA DEL 2024AndreRiva2
 
CALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADCALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADauxsoporte
 
Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dstEphaniiie
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAEl Fortí
 
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADODECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADOJosé Luis Palma
 
Clasificaciones, modalidades y tendencias de investigación educativa.
Clasificaciones, modalidades y tendencias de investigación educativa.Clasificaciones, modalidades y tendencias de investigación educativa.
Clasificaciones, modalidades y tendencias de investigación educativa.José Luis Palma
 
2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdfBaker Publishing Company
 
programa dia de las madres 10 de mayo para evento
programa dia de las madres 10 de mayo  para eventoprograma dia de las madres 10 de mayo  para evento
programa dia de las madres 10 de mayo para eventoDiegoMtsS
 
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARONARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFAROJosé Luis Palma
 
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
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptxFelicitasAsuncionDia
 
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
 
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
 

Último (20)

EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptx
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptxEXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptx
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptx
 
Repaso Pruebas CRECE PR 2024. Ciencia General
Repaso Pruebas CRECE PR 2024. Ciencia GeneralRepaso Pruebas CRECE PR 2024. Ciencia General
Repaso Pruebas CRECE PR 2024. Ciencia General
 
cortes de luz abril 2024 en la provincia de tungurahua
cortes de luz abril 2024 en la provincia de tungurahuacortes de luz abril 2024 en la provincia de tungurahua
cortes de luz abril 2024 en la provincia de tungurahua
 
Identificación de componentes Hardware del PC
Identificación de componentes Hardware del PCIdentificación de componentes Hardware del PC
Identificación de componentes Hardware del PC
 
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
 
UNIDAD DPCC. 2DO. DE SECUNDARIA DEL 2024
UNIDAD DPCC. 2DO. DE  SECUNDARIA DEL 2024UNIDAD DPCC. 2DO. DE  SECUNDARIA DEL 2024
UNIDAD DPCC. 2DO. DE SECUNDARIA DEL 2024
 
CALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADCALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDAD
 
Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes d
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
 
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADODECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
 
Clasificaciones, modalidades y tendencias de investigación educativa.
Clasificaciones, modalidades y tendencias de investigación educativa.Clasificaciones, modalidades y tendencias de investigación educativa.
Clasificaciones, modalidades y tendencias de investigación educativa.
 
Presentacion Metodología de Enseñanza Multigrado
Presentacion Metodología de Enseñanza MultigradoPresentacion Metodología de Enseñanza Multigrado
Presentacion Metodología de Enseñanza Multigrado
 
2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf
 
programa dia de las madres 10 de mayo para evento
programa dia de las madres 10 de mayo  para eventoprograma dia de las madres 10 de mayo  para evento
programa dia de las madres 10 de mayo para evento
 
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARONARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
 
Power Point: "Defendamos la verdad".pptx
Power Point: "Defendamos la verdad".pptxPower Point: "Defendamos la verdad".pptx
Power Point: "Defendamos la verdad".pptx
 
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...
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptx
 
La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.
 
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...
 

Menu de Navegacion y footer

  • 1. Barras de navegación Las barras de navegación son componentes adaptados al diseño web responsive y que se utilizan como elemento principal de navegación tanto en las aplicaciones como en los sitios web. Los menús están contenidos en una barra de menú, la cual se puede decir que es una propiedad que tienen las ventanas para poseer menús, esto es porque la barra de menú en sí misma no es una ventana como lo puede ser un botón de comando o un cuadro de texto, pero tampoco es una barra de herramientas, sino un objeto contenedor de otros menús En los dispositivos móviles se muestran inicialmente minimizadas y al pulsar sobre ellas, se despliegan todas sus opciones. Si la anchura del dispositivo aumenta hasta un nivel suficiente, las barras de navegación muestran todos sus contenidos horizontalmente. Dependiendo del contenido de tu barra de navegación, puede ser necesario modificar el punto a partir del cual se muestra horizontal en vez de minimizada. Para ello, modifica el valor de la variable @grid-float-breakpoint en tu archivo LESS o añade tu propia media query en el archivo CSS. Estructura de los menús Los menús se organizan siguiendo el principio de los árboles, esto quiere decir que un menú puede tener menús hijos y menús padres. Inicialmente, al crear una barra de menú, el identificador del objeto nuevo es un identificador de menús válido, además de que la barra de menú queda como la raíz, el nodo principal, o en otras palabras, un menú sin padres. De ahí se pueden empezar a crear menús hijos como lo puede ser uno que se llame Archivo, otro Edición y otro Ver, que tendrán como padre al manipulador (handler) del menú raíz; estos menús pueden tener menús hijos, así, archivo, descendiendo de MenuBar puede engendrar, Abrir, Guardar, Guardar como, Codificación, etc. La estructura de una página web influye directamente en el comportamiento de las visitas. Uno de los elementos fundamentales es el menú, que permite a los internautas navegar por la página web o el blog. Debe mostrar cuáles son los contenidos de la web y cómo acceder a ellos. Os dejamos 7 consejos para crear un menú eficaz en vuestra página web. Antes de crear los menús de una página web es importante haber reflexionado sobre su estructutra. Debéis plantearos preguntas como ¿cuál es el objetivo? ¿a quién va dirigido? ¿qué necesita el público?. Según los contenidos que queráis
  • 2. incluir, cread una estructura previa que permita un orden lógico de toda la información que se incluirá en la página web. 1.Elegir dónde ubicar el menú En mi web podremos incluir un menú horizontal y según la plantilla, uno o dos menús verticales, uno a la derecha y otro a la izquierda. Podéis combinarlo como queráis, os aconsejamos tener cuidado con la información repetida. La localización de los menús afectará a la manera en que los internautas navegan (o no) por vuestra página web. 2. Limitar el número de enlaces Como norma general se considera apropiado no superar los 7 enlaces por menú de navegación. Una cantidad mayor puede confundir a los usuarios y hacer que se sientan "perdidos" entre tanto enlace. Os aconsejamos evitar los menús horizontales de más de una línea y los menús verticales demasiado extensos que obligan al lector a desplazarse por la pantalla. Otro consejo es que si vuestro logo lleva a la página de inicio de vuestra web, no es necesario incluir un enlace de tipo "Inicio", ya que sería información redundante. 3. Elegir el título adecuado La persona que visita la página web debe comprender fácilmente qué es lo que va a encontrar si hace clic en un enlace del menú. Una o dos palabras suelen ser suficientes. Por ejemplo, es mejor establecer como título del enlace.. 4. Ordenar correctamente los enlaces El orden en que se muestran los enlaces en los menús también es importante. Los enlaces a los contenidos más importantes deben situarse en las primeras posiciones. Habitualmente, enlaces como "Dónde estamos" o "Contacto" se suelen situar en último lugar, por lo que los internautas ya están acostumbrados a este funcionamiento. 5. Guardar la coherencia entre páginas Intentad mantener el lugar del menú principal en todas las páginas y no cambiéis el orden de los enlaces ni los títulos. Sí podéis, por ejemplo, incluir un menú secundario en determinadas zonas de la página web. Les recordamos que puedes crear diferentes estructuras de menús para ajustarlas a las necesidades de nuestra página web. Os recomendamos consultar el tutorial sobre cómo crear diferentes estructuras de menús. 6. Comprobar los enlaces Puede parecer evidente, pero es muy importante comprobar que todos los enlaces de cada menú funcionan correctamente y llevan al internauta a la página correcta. Además, podéis utilizar las estadísticas de frecuentación para conocer
  • 3. cuáles son las páginas más visitadas y estudiar si vuestra estructura de menús es la adecuada. Tipos de Sistemas de Navegación Durante la fase de planeación de un sitio web, generalmente se consideran varios tipos de sistemas de navegación. Para lograr el éxito es necesario conocerlos y entender en qué medida cada uno ofrece flexibilidad y usabilidad para contexto en el que queremos que funcione. Pueden identificarse cuatro tipos principales de SN:  Sistemas de navegación lineal  Sistemas de navegación no lineal  Sistemas de navegación jerárquica  Sistemas de navegación compuesta LINEAL La navegación lineal permite un flujo de la información mas estable, es muy útil cuando se quiere explicar al usuario paso a paso, pues permite que el usuario reciba la información en un orden adecuado, únicamente con la opción de ir adelante y atrás. Ejemplo de un menú clásico para navegación lineal : JERÁRQUICA Navegación jerárquica o de árbol. Esta estructura comienza con una página principal o raíz, se presentan varias opciones que permite ir visualizando páginas más específicas. Éste tipo de navegación ofrece conceptos muy detallados que se desglosan bajo conceptos más generales.
  • 4. Ejemplo de menú para navegación jerárquica (Aquí entran la mayoría de los menús desplegables): NO LINEAL Es adecuada cuando se tiene que conservar el camino general, pero hay que dar lugar a ligeras variaciones, tales como saltarse determinadas páginas. Permite algunos desvíos controlados, la estructura obliga a regresar al camino principal, y normalmente al tener un desvío lateral es porque se muestra una pequeña información adicional. Ejemplo de menú para navegación no lineal:
  • 5. COMPUESTA La navegación compuesta es la que combina diferentes sistemas de navegación para permitirle al usuario un recorrido más personalizado dentro del sitio. Ejemplo de menú para navegación compuesta: OTROS SITEMAP O MAPA DE SITIO Un mapa de sitio es la representación completa de la organización de la información en un sitio web. Expresa todas las relaciones de jerarquía y secuencia entre sus diferentes contenidos por medio de listas y vínculos.
  • 6. PIE DE PÁGINAS El último, pero no menos importante elemento de una web El pie de página es una pequeña zona que ocupa la parte inferior de tu web, y aunque su tamaño es modesto, resulta de suma importancia en términos de diseño y para ofrecer información adicional. Existen muchas posibilidades de usarlo. Si no sueles prestarle mucha atención, te arriesgas a perder el interés de tu web. En este artículo, te explicamos cómo aprovechar este pequeño gran espacio. Texto del pie de página Te recomendamos incluir en él la siguiente información: • Derechos de autor, por ejemplo: “Copyright © 2012 | Tu Nombre” • Número de teléfono o dirección actual: es fundamental poner esta información en la página de contacto, pero si también figura en el pie de página, los visitantes la encontrarán más fácilmente. • Eslogan: incluir un eslogan en el pie de página es una buena estrategia para fortalecer tu marca. • Información adicional. ¡Aquí es en dónde se esconde toda la magia del pie de página! Esta sección es completamente editable: ¡hasta las etiquetas HTML son aceptadas! Puedes insertar texto con enlace, imágenes y hasta direcciones de e-mail. Sugerencias: • Tu nombre con un enlace a tu e-mail. • También puedes añadir un logotipo (imagen) de tu compañía usando HTML. • Insertar enlaces a webs de colaboradores: el pie de página es un lugar en el
  • 7. que puedes añadir enlaces patrocinados, ya que es un área privilegiada de tu página. • Mejora la navegación: si no deseas sobrecargar el menú, el pie de página puede ser usado para añadir secciones extra del menú. • Enlaces a redes sociales: puedes utilizar tanto enlaces de texto como banners (imágenes con enlace). Por ejemplo, usa el logo de Facebook con un enlace a tu perfil para que tus visitantes puedan acceder fácilmente. Como puedes ver, existen una gran variedad de opciones para usar en tu pie de página. Deberías considerar qué es lo más beneficioso para tu web y elegir qué elementos utilizar.