Tema - Don BoscoFacultad: Ingeniería Escuela: Computación Asignatura: Lenguajes interpretados en el cliente 4 Se va a agregar una nueva columna para separar en dos partes estas últimas

Facultad: Ingeniería Escuela: Computación Asignatura: Lenguajes interpretados en el cliente

1

Tema.

Creación de menús.

Objetivos. Diseñar interfaces de menús utilizando las HTML5 y el CSS3

Material a utilizar. Navegador de su preferencia.

Editor de texto preferido

Introducción.

Las interfaces esenciales de usuario son aquellas en las que se incluyen elementos tales como

menús, ventanas, los "beeps" y algunos otros sonidos que la computadora hace, normalmente son

todos aquellos canales por los cuales se permite la interacción entre el hombre y la computadora.

Una interfaz inteligente es fácil de aprender y usar. Permite a los usuarios hacer su trabajo o

desempeñar una tarea en la manera que hace más sentido para ellos, en vez de tener que

ajustarse al software. Una interfaz inteligente se diseña específicamente para la gente que la

usará, por lo que la estética y la colocación de los elementos en el lugar adecuado son muy

importantes a la hora de decidir su diseño.

El menú es una parte importante para los sistemas basados en la web, por lo que aparte de ser

creativos y cumplir con la misión para lo cual son diseñados, estos no deberían consumir muchos

recursos, de tal forma que no se afecte el rendimiento de la aplicación que se esta desarrollando.

En esta sesión de laboratorios vamos a desarrollar el menú de una aplicación y la para lo cual

vamos a tomar en cuenta el menú del portal de la universidad para cambiarle la forma en como

este se ve y plantearlo en HTML5 y CSS3.

Al utilizar las características nuevas del CSS no es necesario la parte de programación que antes

era necesaria usando para ello JavaScript.

Procedimiento. Lo primero que debemos conocer es que lo que vamos a programar, en este caso ya sabemos que

vamos a realizar el menú del portal de la universidad con algunos del submenú que se tienen.


2

Entonces usando nuestros conocimientos previos de HTML, creamos la página con el nombre de

index.html, en el cual se tendrá la estructura del menú

Lo cual nos quedará de la siguiente manera


3

En este caso, se va a utilizar algunas imágenes que deberemos crear, o buscar que estén acorde a

lo que la opción del menú nos dice y esos elementos vincularlos (puede usar los que se encuentran

el archivo de recursos para esta práctica. Una vez tenemos nuestra estructura básica, se va a

seguir agregando elementos al mismo. A este punto tenemos algo como esto

Ahora vamos a modificar el elemento que nos dice “institucional”, donde encontramos mas sub

elementos para ello vamos a agregar un nivel usando un elemento div, note que los nuevos

elementos deben están antes del cierre del tag </li>


4

Se va a agregar una nueva columna para separar en dos partes estas últimas opciones y para ello

creamos de nuevo otro elemento div y ul, y dentro de estos copiamos la mitad de las opciones que

tenemos en institucional

Para que el menu se vea de la siguiente manera

Y con la siguiente modificación del código


5

Esto va servir más adelante cuando se cree el CSS y se dé un mejor formato. Ahora de la misma

manera, en la cual se crearon los submenús, para institucional, se va a crear para rectoría, calidad

y desarrollo, de la siguiente manera.

Agregamos el tag <span> al elemento donde esta la opción de rectoría, también vamos a cambiar

la imagen, para indicar que este elemento tiene un submenú. El código resultante es algo parecido

a lo siguiente

Ahora realice este mismo proceso, para las restantes opciones del menu: calidad y desarrollo, con

las siguientes opciones:

Calidad:


6

Organización

A. Trabajo

Programas

Autoestudio

Desarrollo:

Profesional

Internacionalización

Cooperación

Recuerde que debe añadir <span> y cambiar la imagen en cada una de las dos opciones

Verifique todas las opciones que tiene el portal de la universidad y complete el menú de opciones

que se tienen. Luego de hacer eso va a crear los CSS que dan el formato al menú.

Para ello crear una carpeta llamada CSS y donde se van a crear los archivos: layout.css y menu.css

Para el archivo layout.css se crean todos los formatos que necesitamos para las paginas html, y los

elementos : body, footer, h2, stuts, span container, etc. de la siguiente manera:


7

Luego de haber realizado las configuraciones generales de cada una de las páginas, ahora la

codificación se hace para el menú.

Para esto crear en el directorio CSS un nuevo archivo “menu.css” y en el vamos a codificar algunos

de los comandos que previamente hemos visto con la finalidad de darle una mejor apariencia a

nuestro menú.


8


9


10


11

El menú finalizado tendrá el siguiente aspecto.


12

Investigación complementaria.

Investigue como crear menús utilizando JavaScript

Referencias. GAUCHAT, J. (2013). El gran libro de HTML5, CSS3 y Javascript. Marcombo, S.A. 2ª Edición

Documents

Tema - Don BoscoFacultad: Ingeniería Escuela: Computación Asignatura: Lenguajes interpretados en el cliente 4 Se va a agregar una nueva columna para separar en dos partes estas últimas