Práctica Menú Responsive.
Como primer ejercicio destinado a aprender las capacidades necesarias
para llevar a cabo el desarrollo del proyecto de Currículum vitae digital
vamos a realizar esta práctica que te guiará paso a paso en la realización de
un menú responsive, es decir, que será capaz de adaptarse a los diferentes
tamaños de pantalla.
1. Partes Web.
Para este ejercicio comenzaremos a utilizar las etiquetas de HTML5 que
hemos visto en clase. Las partes de esta web son sencillas y tan solo
utilizaremos un header donde incluiremos un nav, un section para el
espacio principal al que llamaremos “section-main” y otro alternativo
denominado “section-dos”.
De momento en los enlaces a las diferentes secciones de la web incluidas
en el menú responsive no incluiremos ningún enlace, es decir, dentro del
href haremos referencia a “#”.
2. Maqueta.
3. Estructura de la web.
Para este ejercicio deberemos utilizar una buena práctica consistente en
distribuir los diferentes archivos que necesitamos para nuestra web en las
carpetas correspondientes, es decir, utilizaremos un fichero externo de CSS
al que llamaremos style y que colocaremos en la carpeta “css” y también
utilizaremos imágenes que incluiremos dentro de una carpeta denominada
images.
La estructura resultante será algo parecido a:
3.1 Head.
Dentro de la cabecera incluiremos los links relacionados con los ficheros
CSS necesarios para nuestra web, en este caso utilizaremos un fichero
creado por nosotros mismos que incluiremos en la carpeta anteriormente
creada con el nombre “css” y al que llamaremos “[Link]” y con un fichero
externo accesible online y que es distribuido de manera gratuita, esta en sí,
es una buena práctica pues se corresponde con una fuente de iconos
gratuitos y muy utilizados en el diseño web, se trata de fuentes distribuidas
como software libre, es decir, que no tenemos que pagar por ellas, puedes
conocer más sobre este proyecto desde la dirección de Cloudflare. Para ello
incluiremos un link a css haciendo referencia a la dirección de los iconos
que se suministran desde la siguiente dirección:
[Link]
3.2 Body.
Veamos los elementos que incluiremos en el cuerpo de la página Web.
3.2.1 Header.
Como podemos observas dentro del “header” disponemos de dos
elementos, uno de ellos destinado a albergar el logo de la web, vuestro
propio logo, y en el otro elemento incluiremos las diferentes opciones del
menú. Es decir, tendremos la siguiente estructura:
Una etiqueta “header” donde incluiremos las siguientes etiquetas:
• Una etiqueta de enlace con la clase “logo”.
• Una etiqueta nav para incluir el menú con la clase “menu” que
contendrá:
o Una etiqueta div con la clase “btn”. Que contendrá:
§ Una “<i>” para el icono de cierre del menú con las clases
asociadas “fas fa-times close-btn”.
o Una etiqueta de lista desordenada para las opciones del menú
con los siguientes ítems que a su vez incluyen un enlace a las
diferentes partes de la web:
§ HABILIDADES.
§ SERVICIOS.
§ PORTFOLIO.
§ TRAYECTORIA.
§ CONTACTO.
• Una etiqueta div para albergar el botón de mostrar el menú que
incluirá:
o Una etiqueta “<i>” para el icono de apertura del menú con las
clases asociadas “fas fa-bars menú-btn”.
[Link]. Reglas Css para el header.
Para el elemento header necesitamos definir las siguientes reglas:
• Un valor de 999 para la coordenada z, es decir, para que el menú se
muestre siempre en su posición más alta y los demás contenidos
pasen por debajo de el cuando realizamos un scroll.
• Seleccionaremos su posición como fija.
• Establecemos su posición para ser visualizado desde el valor cero de
la esquina izquierda superior.
• Le asignaremos un tamaño de ancho para toda la pantalla definido
en %.
• Configuramos su visualización como flexible.
• Justificamos los contenidos para que se incluyan espacio entre los
enlaces.
• Alineamos los ítems en el centro.
• Establecemos un margen interior para sus contenidos de 20 pixeles a
la izquierda y 80 pixeles a la derecha.
• Establecemos un tiempo de 0.6 segundos para la transición.
[Link]. Elemento para el logo.
En este caso incluiremos una imagen, que para este ejercicio no lo
asociaremos todavía a nada, es decir, a ninguna url, pues no la tenemos
subida a ningún servidor, si quisiéramos que la página se recargara bastaría
con incluir nuestra dirección web, de momento utilizando el “#” haremos
que se recargue. Para este enlace crearemos una clase que asociaremos con
él y a la que llamaremos “logo”, definiendo las siguientes características
mediante reglas css:
• Un color blanco para el texto.
• Un tamaño de fuente de 30 pixeles.
• Un grosor de fuente de 700.
• Transformaremos el texto a mayúsculas.
• Desactivaremos las posibles decoraciones del texto.
• Distanciaremos las letras introducidas 2 pixeles.
Como incluiremos una imagen podemos deducir que necesitaremos una
etiqueta de imagen para incluir en el enlace. Para esta imagen incluiremos
una regla css para darle un tamaño de 60 pixeles.
[Link]. Elemento para las opciones de navegación.
Como hemos visto en clase una de las etiquetas semánticas de HTML5 para
especificar la navegación es “nav”, etiqueta que utilizaremos para
especificar nuestras opciones del menú y que por lo tanto le asignaremos
la clase “menú”. Dentro de esta etiqueta a su vez incluiremos una etiqueta
div para el botón de cierre del menú que será mostrado cuando en el
tamaño de página correspondiente a un móvil mostremos las opciones del
menú desplegadas y nos permita cerrar la lista de las mismas.
Reglas css para la clase “menu”.
Definiremos clases para todos los elementos incluidos dentro de esta
etiqueta, es decir, para la lista, los elementos de la lista, los enlaces y para
el hover de los enlaces, teniendo en cuenta que incluiremos luego sus
variantes cuando abordemos las reglas necesarias para reaccionar a los
cambios de tamaño de las pantallas en las mediaqüerys.
Para la clase “menu” incluiremos las siguientes reglas:
• Definiremos su posición como relativa, recuerda que la
propiedad position sirve para posicionar un elemento dentro de la
página. Sin embargo, dependiendo de cual sea la propiedad que
usemos, el elemento tomará una referencia u otra para posicionarse
respecto a ella. Mediante este valor podemos posicionar un
elemento respecto al flujo normal de la página. Se podría decir que
estamos posicionando un elemento tomando como referencia el
flujo normal (la posición por defecto) de dicho elemento.
• Configuraremos su visualización, su display, como flexible, la
propiedad de display flex, ayuda a colocar las cajas como si fueran
celdas de tablas, con un comportamiento predecible y adaptable.
Mozilla a estas cajas flexibles las llama el Diseño del Santo
Grial, flex soluciona problemas de control del diseño y se adapta
fácilmente a los diferentes dispositivos.
• Alinearemos los ítems en el centro.
• Ajustaremos el contenido en el centro.
[Link].1 Elemento para el cierre del menú.
Como queremos que este menú sea responsive, es decir, que cuando
cambiemos el tamaño de la página al tamaño de un móvil aparezca un icono
de cruz, como una “X”, que cierre las opciones del menú, necesitaremos
incluir el icono dentro de alguna de las etiquetas destinadas para modificar
el texto, ya que esto lo que nos permite es asociar una clase con la etiqueta
no incluyendo ningún texto, en este caso tal y como muestra la
documentación de este css de iconos, la realizaremos utilizando una
etiqueta “<i>”. Esta etiqueta la incluiremos dentro de una etiqueta “div”
que nos permita asociarle determinadas reglas css al icono.
Es decir, dispondremos de una etiqueta div, con la clase “btn”, en la que
especificaremos las propiedades del botón representado con un icono
dentro de una etiqueta “<i>”. Incluimos este elemento dentro de la
etiqueta nav ya que se mostrará junto con las opciones del menú una vez
que éstas sean desplegadas.
Reglas CSS para el botón de cierre.
La clase asociada al “div” la llamaremos btn, es decir, una abreviatura de
botón, para añadirle la semántica que nos permita asociarle siempre su
diseño a el botón que estamos diseñando.
Para esta clase “btn” declararemos las reglas css, que más tarde
modificaremos cuando introduzcamos las mediaqüerys para responder a
los cambios de tamaño de página:
• Color del texto en blanco.
• Tamaño de fuente de 25 pixeles, que será el tamaño del icono.
• Definiremos que el puntero del ratón se muestre como un puntero
cuando nos situemos sobre él.
• Configuraremos que por defecto no se muestre, aspecto que
modificaremos en las reglas css que añadiremos para adaptarnos a
los cambios de tamaño de la pantalla.
[Link].2 Elemento para la lista de las opciones.
En este elemento de lista incluiremos cada una de las opciones del menú
que como podrás recordar deberemos incluir un enlace dentro de cada uno
de los ítems de la lista respondiendo a la lista de opciones que hemos
incluido anteriormente, es decir:
• ACERCA DE.
• HABILIDADES.
• SERVICIOS.
• PORTFOLIO.
• TRAYECTORIA.
• CONTACTO.
A cada uno de estos enlaces le asignaremos por ahora un href hacia “#”.
Para el elemento lista del “menú” que incluirá las opciones crearemos las
siguientes reglas:
• Definiremos su posición como relativa.
• Mostraremos su contenido de manera flexible.
• Justificaremos su contenido en el centro.
• Alinearemos sus ítems en el centro.
Para los elementos de la lista del menú del header necesitamos que la lista
no muestre los puntos que muestra por defecto para ello especificaremos
que el estilo de la lista no disponga de diseño.
Para los enlaces incluidos dentro del menú que nos permitan desplazarnos
a las diferentes secciones de la página introduciremos las siguientes reglas:
• El color de texto será blanco.
• El grosor del texto será de 500.
• Transformaremos el texto introducido para que siempre sea
mostrado en mayúsculas independientemente del texto introducido.
• Estableceremos un tamaño de fuente de 20 pixeles.
• Eliminaremos la línea de subrayado del texto típica de todos los
enlaces.
• Estableceremos un margen izquierdo de 0 pixeles y un margen
derecho de 10 pixeles.
• Estableceremos un espaciado respecto al interior del modelo de caja
de 7 pixeles a la izquierda y 12 pixeles a la derecha.
• Configuraremos un borde redondeado de un radio de 20 pixeles.
• Para que los cambios de color de los botones no ocurran de manera
brusca estableceremos una duración de 0.3 segundos.
• Asignaremos una propiedad para la transición que nos permita
configurar el valor que cambia, en este caso el color y que sea su
fondo el que se cambie.
Cuando nos situemos sobre cualquiera de las opciones del menú deseamos
que el color del texto sea de color negro y que su fondo sea de color blanco,
por lo que asignaremos las siguientes reglas:
• Color del texto negro.
• Fondo de los botones de color blanco.
Más tarde asignaremos las reglas que afectan a los anteriores elementos
con los cambios de tamaño de las pantallas.
.
[Link]. Elemento para el botón que permite desplegar las
opciones.
Este elemento será el que nos permitirá mostrar las opciones del menú
cuando el tamaño de pantalla sea el correspondiente al de un móvil, por
defecto estará oculto por lo que deberemos definir un conjunto de reglas
con ese objetivo. Para incluir este elemento utilizaremos una etiqueta div
que nos permite realizar inclusiones de contenido sin una semántica
predefinida y que nosotros completaremos asignándole la clase “btn” que
hemos utilizado con anterioridad para el botón de cierre, solo que en este
caso lo mostramos fuera del nav para que su visualización se realice con el
objetivo de mostrar el contenido de opciones a diferencia del de cierre que
es mostrado a la vez, es necesario que entiendas esta diferencia en la
necesidad de ser mostrado en su momento preciso asociado al
comportamiento de los elementos.
En este caso en la etiqueta “<i>” que deberás utilizar de idéntica manera a
como lo hemos hecho con el botón de cierre utilizaremos la clase “fas fa-
bars menu-btn”.
3.2.2 Sección uno de la página.
En esta sección según la maqueta que podemos ver en la sección de
maqueta, hemos incluido un espacio de un determinado tamaño que
incluye un texto situado en el centro de la misma. Para ella utilizaremos una
etiqueta de HTML5 que nos permite declarar las secciones de una web
junto a una etiqueta de encabezado del mayor tamaño donde incluimos el
texto “Menú responsive”.
Las reglas CSS asociadas con esta sección son:
• Establecemos su posición como relativa.
• Un tamaño del 100% para que se distribuya por todo el ancho de la
página.
• En el caso de que por alguna razón no se mostrara la imagen de fondo
de esta sección asociamos un gradiente lineal como fondo generado
desde la izquierda y haciendo uso de los colores generados en
formato rgb con transparencia con los valores (74,164,195,.8) y
(0,0,0,0.1).
• A su vez asignaremos una imagen como fondo haciendo uso de la
imagen “[Link]” que habremos incluido dentro de la
carpeta de imágenes, especificando que no queremos que esta se
repita por todo el fondo.
• Especificaremos que el tamaño del fondo debe estar asociado con
cubrir todo su contenedor.
• Posicionaremos el fondo de esta sección alineándola al centro.
• Configuraremos su visualización de manera flexible.
• Justificaremos el contenido en el centro.
• Alinearemos sus ítems en el centro para mostrar el texto centrado.
• Estableceremos un espaciado interior de 20 pixeles a la izquierda y
80 pixeles a la derecha.
[Link] Encabezado con texto.
Dentro de esta etiqueta mostraremos el texto “Menú responsive” y
configuraremos para ella las siguientes reglas:
• Un color negro para el texto haciendo uso de una transparencia con
valor del 80 %.
• Un tamaño de fuente de 60 pixeles.
• Un ancho de trazo de la fuente de 800.
• Nos aseguraremos que el texto siempre se muestre en mayúsculas.
• Especificaremos una separación entre las letras de 2 pixeles.
• Incluiremos un interlineado, es decir, un alto de línea de 80 pixeles.
• Añadiremos un sombreado al texto de color negro con los valores de
desplazamiento de la sombre de 0 0 y 3 pixeles respectivamente.
Más tarde configuraremos su apariencia con otras reglas asociadas al
cambio de tamaño de la pantalla para que este texto se adapte.
3.2.2 Sección dos de la página.
En este caso para declarar esta sección de la página actuaremos de idéntica
manera a como lo hemos realizado con la primera, es decir utilizaremos la
misma etiqueta semántica de HTML5 solo que en este caso le asociaremos
la clase “section-dos”.
Como podrás observar en este caso incluimos en esta sección un
encabezado de tamaño 2 con el texto “Ejercicio de menú responsive” y una
etiqueta de párrafo para incluir el texto “Este es el ejercicio para aplicar en
el proyecto”. A ambas etiquetas no le hemos asociado ninguna clase pues
solo las hemos incluido a título informativo.
Sólo hemos incluido una regla CSS para esta sección y es un margen interior
del contenido de 20 pixeles.
3.2.3 Inclusión del javascript.
Para el desarrollo de esta práctica todavía no hemos estudiado el javascript
así que la aprovecharemos para realizar una introducción en este mundo
de la programación.
Como veremos más adelante, de igual modo que disponemos de varias
formas de incluir las declaraciones de clases en un documento de javascript
podemos incluir el uso de este lenguaje de forma similar, es decir, inline, en
una parte del documento y en un fichero exterior.
Para este ejercicio solo nos vamos a centrar en el uso de javascript dentro
del mismo documento pues le vamos asociar unas pocas líneas para dotar
a nuestro menú del comportamiento deseado, es decir, que cambie cuando
realicemos un scroll sobre la página cambiando colores y logo, y para su
comportamiento responsive mostrando un menú adaptado al tamaño de la
página y ocultarlo.
Diferenciaremos tres apartados dentro de nuestro javascript, uno para los
efectos relacionados con el scroll, otro con el cambio de logo y finalmente
uno que nos permita ocultar el menú que se despliega cuando el tamaño
de la página está asociado a un móvil o Tablet.
[Link] Declaración de uso de javascript.
Cuando queremos hacer uso de unas cuantas sentencias de javascript
dentro de un documento necesitamos indicarle al navegador que las líneas
que vienen a continuación están escritas en javascript y así el navegador las
reconocerá e interpretará, te recuerdo que se trata de un lenguaje script y
esto quiere decir que es un lenguaje interpretado, es decir, leído y
ejecutado, en este caso por el navegador.
Para indicarle al navegador que vamos a incluir líneas en javascript
necesitamos utilizar una etiqueta que por supuesto tiene su etiqueta de
cierre además de un atributo que indica su tipo, se trata de:
<script type=”text/javascript”>… </script>
En el interior del espacio declarado por esta etiqueta necesitaremos añadir
tres apartados que encabezaremos con tres comentarios para ayudarnos a
reconocer cada uno de ellos. Los comentarios en javascript se realizan
haciendo uso de // por lo que para el primero de estos bloques de
sentencias javascript escribiremos:
// javascript para efecto de scroll de la barra de navegación o menú
El scroll es un efecto o acción que ocurre en la ventana y para eso el
navegador hace uso del objeto window. Para detectar cuando el usuario
realiza un scroll sobre la pantalla necesitamos incluir algo que esté
escuchando, observando esa acción. Para incluir un observador en
javascript utilizamos la palabra reservada “addEvenListener”, es decir,
añadir observador de un evento, el evento es el scroll, y le asociamos las
acciones que queremos que realice cuando lo detecte.
Además necesitamos declarar una variable que sea capaz de llegar,
apuntar, al elemento que queremos llegar, el que queremos que cambie.
Las variables se declaran utilizando la palabra reservada “var” y
asociándoles un nombre para seguidamente asignarles un valor que en este
caso es un objeto de nuestra web al que hemos llamado “header”. Todas
las sentencias finalizan la línea haciendo uso de un “;”.
Finalizamos este bloque cambiando el aspecto de la barra con las
propiedades para cuando la barra del menú esté abajo y esto ocurre cuando
las coordenadas Y del scroll son mayores que 0, momento en el que el
“header” cambiará de clase, la clase que llamaremos “down”. Como podrás
deducir es necesario incluir una nueva clase dentro de nuestro documento
de CSS que esté asociada con el aspecto que queremos que tenga el menú
cuando se realice el scroll.
Incluimos la clase CSS para el nuevo aspecto del header que hemos llamado
down:
Le añadiremos un fondo de color azul: #1483D5 y un margen interior para
el contenido de 15 pixeles a la izquierda y 80 pixeles a la derecha.
Incluyamos ahora el código javascript:
[Link](“scroll”, function(){
var header = [Link](“header”);
[Link](‘down’, [Link] > 0);
// cambiamos el logo
var logo = [Link](“.logo img”);
if ([Link]>0) {
[Link](‘src’, ‘image/[Link]’);
}else{
[Link](‘src’, ‘image/[Link]’);
}
});
Como podrás observar también hemos incluido el cambio de la imagen en
función de si se hace scroll o no, para ello modificamos el atributo src de la
etiqueta imagen incluido en la etiqueta de clase logo.
Seguidamente, antes de cerrar la etiqueta de script, incluiremos el código
necesario para disponer de un botón que cierre y abra el menú cuando el
tamaño de visualización no sea el de la web. Para ello igual que
anteriormente necesitamos disponer de punteros a las partes de la web que
dispondrán de esa funcionalidad e incluir las clases necesarias para que
cambien de aspecto.
En este caso el evento a escuchar para reaccionar a él con un cambio de
aspecto, es decir, asociando una clase, será el evento “click”.
// javascript para el menú responsive
var menu = [Link](‘.menu’);
var menuBtn = [Link](‘.menu-btn’);
var closeBtn = [Link](‘.close-btn’);
[Link](“click”, () => {
[Link](‘active’);
});
[Link](“click”, () => {
[Link](‘active’);
});
Como podrás observar hemos añadido tres punteros, uno para el menú,
otro para el botón de desplegar el menú y otro para el botón de cerrar el
menú. Tanto al botón de abrir el menú como al de cerrar el menú le hemos
asociado observadores que cuando son detectados realizan una función,
añadir una clase al objeto menú o quitársela. Por lo que será necesario
incluir la clase asociada a cuando el menú esta en su modo activo, es decir,
“active”, en esta clase asociada a la clase menú e incluida en el header le
debemos incluir una sola regla que nos permita posicionar el contenido a la
derecha con un valor de 0.
3.2.4 Configurando los tamaños de pantalla.
Para que el contenido de la web tenga un comportamiento responsive
hemos de hacer que la web reaccione a los cambios de tamaño de pantalla,
para ello hemos de incluir las últimas sentencias CSS.
Para esta función hemos de utilizar las llamadas “media queries” que son
un tipo de reglas de CSS que permiten crear un bloque de código que sólo
se procesará en los dispositivos que cumplan unos criterios especificados
como condición.
En nuestro caso vamos a trabajar con dos condiciones, para pantallas
menores de 991 pixeles, es decir, tablets, y para pantallas menores de 600
pixeles, tamaño que hemos elegido para los móviles.
Comenzamos con el tamaño de pantalla de máximo 991, como este cambio
de pantalla afecta al header en su posición normal como en la posición de
down, deberemos definir unas reglas para estas dos clases, para ambas
clases definiremos un margen interno para el contenido de 20 pixeles a la
izquierda y 40 pixeles a la derecha.
Para la clase btn incluida en el header definiremos la visualización como
bloque.
Para el menú deberemos incluir las siguientes reglas:
• La posición la declararemos como fija, ya que como disponemos del
header en un z-index que lo ponen en la capa 999 necesitamos situar
las opciones menú cuando aparezca por encima del header y hemos
de tener en cuenta que cuando declaramos la posición como fija, es
decir, fixed, este pierde el flujo de elementos en la pantalla, ósea que
los elementos se colocan delante o detrás de el pero nunca a
continuación como el flujo normal de posición normal.
• Establecemos el color de fondo del menú que se mostrará como
#1483D5.
• Configuramos el ancho mínimo del contenedor de las opciones a 330
pixeles.
• Definimos su altura para que ocupe todo el alto del viewport
haciendo uso de las magnitudes necesarias, es decir, vh.
• Establecemos que se sitúe el elemento en la parte superior de la
pantalla haciendo uso de top con el valor cero.
• Indicamos que su posición derecha en horizontal hasta que sea
presionado con un clic el icono del menú con un valor que lo saque
de pantalla establecido en %.
• Configuramos el margen interior para su contenido en 80 pixeles
para el valor de la izquierda y 50 para la derecha.
• Establecemos medio segundo para la duración de la transición
cuando sea mostrado tras hacer clic en el icono del menú.
• Seleccionamos el lado derecho como la propiedad a cambiar en la
transición ya que lo situamos anteriormente fuera de la pantalla.
Para la lista del menú disponemos la regla en la que indicamos que la
dirección flexible será a modo de columna para que las opciones se
muestren una bajo la otra.
Para la clase activa de la clase menú del header configuramos el valor
derecho como 0 para que sea mostrado.
Para la clase del botón de cierre del menú de la clase menú del header
establecemos las siguientes reglas css:
• Posición absoluta.
• Posición superior en 0.
• Posición izquierda en 0.
• Establecemos el margen en 25 pixeles.
Para los enlaces incluidos en la clase menú dentro del header configuramos
las siguientes reglas css:
• Visualización en bloque.
• Tamaño de fuente de 40 pixeles.
• Un margen de 40 pixeles.
• Un margen interior del contenido en 0 pixeles.
Ahora solo nos queda configurar las clases a utilizar para cuando el tamaño
de la pantalla sea de un máximo de 600 pixeles ya que queremos que el
texto se muestre centrado, para ello incluimos las siguientes reglas css:
Para el encabezado de tamaño 1 incluido dentro de la sección que hemos
llamado “section-uno” configuramos un tamaño de fuente de 50 pixeles, un
ancho de línea de 60 pixeles y alineamos el texto en el centro.
