Guía 4 (Parte II) – Módulo 1.

Desarrollo de Software

COLEGIO DON BOSCO

DESARROLLO DE SOFTWARE
Materia: Informática Educativa – Primeros Años DSW – 1°B & 1°C
Docente: Prof. Norberto Colorado
Evaluación: Guía práctica N°4 – Menú de hamburguesa (Parte 2)

I. OBJETIVOS

Que el estudiante:
1. Crear menús diversificados en base a HTML y CSS.
2. Conocer la ventajas y desventajas de cada tipo de menú a realizar.
3. Manejar los diferentes tipos de menús aplicar en la página web con proyección a proyecto Crea-J.

II. INTRODUCCIÓN TEÓRICA

Menús de Hamburguesa - ¿Qué es un menú de hamburguesa?

Es un tipo de menú representado por tres rayas horizontales (de ahí su nombre por la similitud con una
hamburguesa) que permite que los elementos del menú se mantengan ocultos de forma que se despliegan
cuando los usuarios realizan alguna interacción con él. De esta manera, facilitan la navegación, sobre todo en
dispositivos móviles, y dejan más espacio para el contenido.

Prof. Norberto Colorado Página | 1

 Guía 4 (Parte II) – Módulo 1.5

Desarrollo de Software

Seguro que ya te resultan familiares, ya que se usan en la mayoría de nuestros smartphones y tablets, ya que
su uso se ha extendido y normalizado desde el año 2015. Suele colocarse en la esquina superior derecha de la
web o aplicación, ya que es la zona más cercana al pulgar cuando manejamos el móvil, pero puede cambiar su
posición dependiendo del diseño de la web y de lo que interpretemos que será lo más cómodo para los
usuarios.
Pero como cualquier elemento, se necesitan buenas prácticas para que su uso mejore la experiencia de nuestros
usuarios.

Ventajas y desventajas del menú hamburguesa

Sus principales beneficios de uso son:
Navegación práctica y simple. Aunque en un principio pareciese que su uso es complicado, los usuarios
ya consiguen ubicarlo casi de manera automática y su uso ya es un standard.
Fácil implementación en las versiones para móvil o tablet. No se requieren grandes conocimientos de
programación para incluirlo en uestros websites. (con el uso de frameworks)
Más espacio libre para el contenido.
Estilo minimalista y actual.

Pero ¡no todos son ventajas! También tienen algún punto en contra:
Al estar oculto el menú principal, muchos usuarios navegan solo basándose en lo que ven en la página,
así que es probable que algunos no interactúen con este icono.
Muchos usuarios no reconocen el icono hamburguesa, y no saben lo que representa mientras navegan en
la web. Hay que conocer nuestro público y saber si será reconocido por la mayoría.
Se añade un clic extra para llegar a cualquier sección, lo que genera un esfuerzo extra para acceder al
contenido.

Sinceramente, creemos que los beneficios superan con creces a las desventajas, por eso recomendamos ciertas
pautas para su uso:
 Usar el menú hamburguesa cuando ya no exista la opción de mostrar un menú convencional.
 No usar esta opción si el menú tiene pocas opciones. Para eso, es mejor reestructurar el menu mediante
iconos, por ejemplo, que esconder los links tras el menú hamburguesa.
 Al usarlo, asegurarse que existe un contraste claro entre el menú hamburguesa y el fondo, para ayudar a
los usuarios a localizarlo de manera rápida y efectiva.

Estas recomendaciones pueden ser de utilidad, pero lo importante es realizar una reflexión sobre nuestros
usuarios y sobre cómo utilizan nuestra aplicación. Así podremos elegir la mejor opción y conseguir la mejor
experiencia de usuario.

Prof. Norberto Colorado Página | 2

 Guía 4 (Parte II) – Módulo 1.5

Desarrollo de Software

III. REQUERIMIENTOS

Nº Cantidad Descripción
PC con uno de los editores de páginas Web, cualquiera de los navegadores web
1 1 actualizados o que no de problemas de interpretación de HTML5.
2 1 Guía de Laboratorio #4: Menús con CSS (Parte 2)
3 1 Memoria USB

Prof. Norberto Colorado Página | 3

 Guía 4 (Parte II) – Módulo 1.5

Desarrollo de Software

IV. PROCEDIMIENTOS

Ejercicio 1. Menú de Haburguesa

1. Cree un archivo html con el nombre desplegable.html; dentro de otra carpeta manejará los archivos
de estilo que realice en esta práctica.
2. El nombre del CSS será desplegable.css
3. Haga la estructura básica de un archivo HTML5

Prof. Norberto Colorado Página | 4

 Guía 4 (Parte II) – Módulo 1.5

Desarrollo de Software

4. Verá los resultados de cada lista de manera adjunta a la imagen alusiva para ir desplegando las futuras
opciones del menú que realizaremos.

5. Ahora cree el archivo de estilo con las reglas definidas en las imágenes, a cada línea deberá agregar un
comentario dentro del CSS explicando la funcionalidad que realiza a partir de los resultados que va
observando.
Se aconseja que haga cada regla y guarde para ver los resultados y modificaciones que va teniendo la
página web con su menú de hamburguesa.
Regla 1 Regla 2

Regla 3 Regla 4

Prof. Norberto Colorado Página | 5

 Guía 4 (Parte II) – Módulo 1.5

Desarrollo de Software

Regla 5 Regla 6

Regla 7 Regla 8

Regla 9

Regla 10

Prof. Norberto Colorado Página | 6

 Guía 4 (Parte II) – Módulo 1.5

Desarrollo de Software

6. Deberá tener un resultado similar al presentado en la imagen y funcional.

7. Guarde el archivo para subirlo en su espacio en Classroom.

V. EJERCICIO COMPLEMENTARIO

Ejercicio 1. Menú de Hamburguesa

Realice un sitio web con el menú el menú de hamburguesa del ejercicio anterior:
Inicio
Pedro Infante
Jorge Negrete
Vicente Fernández
Alejandro Fernández
Pedro Fernández
Pepe Aguilar
Rocío Durcal
Deberá existir una página principal index con las imágenes de cada uno de ellos; al hacer clic en cada uno de
los enlaces del menú de hamburguesa, lo enviará a la bibliografía de cada uno de ellos que estará en otra página
web realizada por ustedes, todas las paginas deberán tener un footer con sus datos como estudiantes con
nombre y carnet. Igualmente cada página deberá contener el menú de hamburguesa.

Fecha de entrega: Miércoles 14 de Julio del 2021 antes de las cuatro y treinta de la tarde.

Prof. Norberto Colorado Página | 7