Diseñar y codificar un menú de navegación texturizado
En este tutorial de 2 pasos aprenderás a crear una barra de navegación elegante y con textura en Photoshop y a codificarla. Usaremos algunas texturas para agregar detalles increíbles al fondo y nos ocuparemos de las opciones de fusión y otros trucos de Photoshop para realizar todos los elementos de la barra de menú. Finalmente, daremos vida al diseño con html, css y jQuery. ¡Disfruta del tutorial, esperamos que te sea útil!
Avance:
Puede hacer clic aquí para ver la demostración en vivo de la barra de navegación
DESCARGAR PLANTILLA PSD + HTML/CSS
[hidepost] [descarga format="1"] [/hidepost]Conviértete en miembro Premium y obtén acceso ilimitado a archivos fuente y recursos premium por solo $7 al mes. Haz clic aquí para obtener más información .Este tutorial está escrito a 4 manos por mí y Piervincenzo. Te guiaré a través de la primera parte, la que se centra en Photoshop y la construcción gráfica de la interfaz. Luego le pasaré la pelota a Piervincenzo, quien te explicará cómo convertir el diseño en una barra de navegación web HTML/CSS completamente funcional.
- Parte 1: crear el menú en Photoshop
- Parte 2: codificar el menú - html/css/jQuery
Así que comencemos la lección conmigo (¡soy el niño de la foto de la izquierda!)
*nota para usuarios de Mac: ctrl=cmd, alt=opción
Paso 1
Cree un nuevo documento de Photoshop de 1020 x 248 píxeles. Dado que mi objetivo es crear una barra de navegación, este tamaño funcionará bien. Por supuesto, si desea crear la interfaz completa de un sitio web, necesitará un documento más grande. 940 px es una buena longitud para una barra de navegación. Por lo tanto, use las guías para delimitar 940 px (coloque la primera guía vertical en 40 px y la segunda en 980 px)
¿Cómo crear guías? Puedes crear una guía haciendo clic y arrastrando desde la regla. Si quieres ocultar las guías, ve a VerMostrarGuías. Si no quieres visualizar las reglas, ve a VerReglas.
Paso 2
Rellena el fondo con un gris claro (#e9e9e9). A continuación, ve a FiltroRuidoAñadir ruido para crear un bonito y sutil fondo para la barra de navegación.
Paso 3
Con la herramienta Rectángulo redondeado y un radio de 5 px, crea la forma principal de la barra. Puedes notar que también he delimitado la altura con 2 guías.
Paso 4
Ahora podemos jugar con las opciones de fusión (haga clic derecho en la miniatura de la capaOpciones de fusión) para estilizar la forma. Comience agregando una superposición de color marrón (#8e4b3e): Luego, un efecto de trazo blanco semitransparente: La sombra interna con la configuración correcta se puede usar para agregar profundidad a la forma: Finalmente, agregue un brillo interno fino para crear el efecto de trazo (usamos "trazo" para crear el borde semitransparente, por lo que no podemos usarlo nuevamente. De todos modos, el brillo interno con la configuración correcta funcionará bien).
Paso 5
Ahora que la forma principal está lista, podemos trabajar en el efecto de textura en un documento aparte. Crearemos un patrón para este propósito, así que vamos a crear un nuevo documento de 250x250 píxeles en Photoshop. Ten en cuenta que cada vez que necesites trabajar con archivos que no sean demasiado claros, como texturas, es una buena costumbre crear patrones en lugar de trabajar con toda la textura. En el nuevo documento de Photoshop, he pegado (AbrirSeleccionar la textura) una de nuestras texturas de piel . Recuerda reducir el tamaño de la textura (Ctrl+T)
Paso 6
Para agregar otros efectos agradables, pegué una de nuestras texturas de efectos de ruido , configurada en "pantalla" para eliminar las áreas negras.
Paso 7
Todavía no estoy satisfecho con el resultado, así que vamos a crear otro pequeño documento de Photoshop para realizar un micropatrón. El tamaño del documento es de 5x5 píxeles. Con la herramienta Línea, crea dos líneas de 45° como se muestra en la captura de pantalla. Para asegurarte de que el ángulo sea de 45°, mantén presionada la tecla Shift mientras dibujas las líneas. Ve a EdiciónDefinir patrón para guardar el patrón. Si "Definir patrón" no está visible en tu menú, intenta hacer clic en la miniatura de la capa de fondo antes y luego inténtalo una segunda vez.
Paso 8
Cambia al documento de patrón de textura. Crea una nueva capa y ve a EdiciónRellenar y selecciona el patrón que acabas de crear de la biblioteca. Para cambiar el color de las líneas, utiliza las opciones de fusión y añade una superposición de color blanco. Reduce también la opacidad aleste año. Por último, si quieres que las líneas queden más sucias, crea una máscara de capa y utiliza un pincel grunge negro para borrar algunas partes de las líneas. El patrón está listo y puedes guardarlo (EdiciónDefinir patrón).
Paso 9
Ahora podemos cambiar al lienzo principal de Photoshop. Crea una nueva capa. Luego, haz clic con Ctrl+Clic en la máscara vectorial de la capa de forma principal para seleccionar sus píxeles y ve a EdiciónRellenar y selecciona el patrón texturizado. Por último, presiona Ctrl+D para deseleccionar. Cambia el modo de fusión de capas a superposición con una opacidad del 40 %.
Paso 10
Para añadir aún más estilo a la barra de navegación, podemos crear costuras y otros efectos bonitos. Con la herramienta Marco de una sola fila creamos una selección horizontal de 1px, creamos una nueva capa y rellenamos la selección con un marrón oscuro (#3d150e). Creamos una segunda línea de 1px inmediatamente encima de la primera y la rellenamos con blanco. Reducimos la opacidad aleste año Tanto desde la izquierda como desde la derecha, eliminamos las partes de las líneas que sobresalen de la forma principal.
Paso 11
Con la herramienta Marco rectangular, haga una selección sobre toda el área inferior de la forma principal, inmediatamente debajo de las dos líneas horizontales, como se muestra en la captura de pantalla a continuación: Establezca el mismo marrón oscuro (#3d150e) de la primera línea de 1px como color de primer plano, tome la herramienta Degradado con un degradado que vaya de marrón a transparente y cree una sombra suave inmediatamente debajo de las 2 líneas. Reduzca la opacidad de la capa para hacer que el efecto sea más suave:
Paso 12
Crear las costuras es muy sencillo. Crea una nueva capa, amplíala y selecciona la herramienta Marco rectangular (M). Haz una pequeña selección rectangular (1x4 píxeles) y rellénala de blanco. Duplica la capa presionando Ctrl+J y mueve la capa duplicada debajo de la original. Agrega una capa de color marrón oscuro (#3d150e) y haz clic una vez en la flecha inferior de tu teclado y una vez en la derecha. Así hemos creado el efecto de sombra.
Paso 13
Ahora puedes seleccionar ambas capas y fusionarlas (Ctrl+E). Luego puedes crear varias copias de la unión manteniendo presionada la tecla Alt y haciendo clic y arrastrando con el mouse. Continúa hasta que hayas cubierto toda la barra de navegación.
Paso 14
En este punto podemos colocar los enlaces del menú. Utilicé Helvética (negrita, 12 puntos), pero también funcionaría bien Arial u otra fuente sans serif simple. El único estilo agregado al texto es una sombra delgada (#35120d).
Paso 15
Con la herramienta elipse, dibuja un pequeño círculo cerca del enlace del portafolio. Crearemos una flecha para indicar la existencia de un menú desplegable. Reduce la opacidad a alrededor deleste año. Con la herramienta Polígono (establece los lados en 3), crea un pequeño triángulo y colócalo dentro del círculo. Luego, si quieres aplastar un poco el triángulo, toma la herramienta Selección directa (A), selecciona el punto de ancla inferior del triángulo y arrástralo hacia arriba. Finalmente, agrega la misma sombra del texto del portafolio.
Paso 16
En el lado derecho de la barra de navegación crearemos el botón de inicio de sesión/registro. Con la herramienta Rectángulo redondeado (radioeste año) dibuja una forma como se muestra en la captura de pantalla: Luego agrega una superposición de degradado (de #0087b9 a #70cffb) y un efecto de trazo de 1px en azul oscuro (#005281).
Paso 17
Duplica la capa, elimina todos los estilos y rasterízala (clic derecho Rasterizar capa). Mantén presionada la tecla Ctrl y haz clic en la copia blanca de la forma para seleccionar sus píxeles, toma una de las herramientas de selección y haz clic una vez en la flecha inferior de tu teclado para moverte 1 px hacia abajo en la selección. Luego, pulsa Eliminar y reduce la opacidad a alrededor del 80 % para crear un bonito efecto de luz.
Paso 18
Con la herramienta Línea, crea dos líneas verticales en el centro de la forma. La de la izquierda es del mismo color azul (#005281) del efecto de trazo, mientras que la de la derecha es blanca con la opacidad reducida al 50%.
Paso 19
Utilizando siempre Helvética, escribe en "login" y "signup". A continuación, abre la ventana de modos de fusión y, en primer lugar, reduce la opacidad del relleno al 0 %, luego añade una sombra interior fina y una superposición de color:
Pasoeste añoh5>Duplica la capa del tipo login y mueve el duplicado debajo de la original, luego elimina todos los estilos para que solo tengamos un texto de color blanco. Mueve esta capa 1px hacia abajo y 1px hacia la derecha. Finalmente reduce la opacidad al 50%. Haz lo mismo con la palabra "signup":
Paso 21
Ahora que la barra de navegación está completa, podemos crear los efectos de desplazamiento, comenzando por el enlace del portafolio. En esta fase, es importante la forma en que organizas tus capas. Observa cómo organicé las mías: he creado un grupo llamado "desplazamiento" donde colocar dentro todas las capas del efecto de desplazamiento. Por el momento, dentro de este grupo he colocado una copia de la capa de texto del portafolio y una de la flecha, rotada 180° (presiona ctrl+T y luego rota la forma). De esta manera, puedes ocultar el grupo "a" por el momento y trabajar solo con el "desplazamiento".
Paso 22
Para el efecto de desplazamiento, decidí crear un cuadro rectangular redondeado (radio de 10 px) con los siguientes estilos:
Paso 23
Colocar en las subpáginas. La fuente es siempre la misma, Helvética 12pt negrita. Para separar la página principal de las subpáginas, he utilizado dos líneas de 1 píxel. La superior es marrón oscuro (#190603), mientras que la inferior es blanca con una opacidad del 10%.
Paso 24
El último paso es diseñar la ventana modal que aparecerá cuando alguien haga clic en el botón "Iniciar sesión". He decidido utilizar el mismo cuadro del efecto de desplazamiento del portafolio. Luego lo he llenado con un formulario y un botón simple creado con el mismo método del botón de inicio de sesión/registro. El único estilo añadido a los cuadros del formulario es una sombra interior suave.
Paso 25
Podemos crear los efectos de "hover" y "click event handler" para los dos botones (login + signup). Como hicimos para el enlace de la cartera, crea 2 grupos para ordenarlos y titúlalos "hover" y "click". El efecto de hover se obtiene con un efecto de luz suave. Simplemente crea una capa, toma un pincel blanco suave con dureza 0%, haz clic una vez y establece la capa en superposición. Para el efecto de clic, solo he invertido la superposición de degradado. ¡ Hemos terminado la primera parte, muchachos! Ahora es momento de codificar el diseño.
Perfecto, tenemos un diseño de menú bonito y con textura. Vamos a codificarlo usando marcado XHTML 1.0 Strict, CSS (con un poco de la versión 3) y un script jQuery simple (basado en una versión 1.4.2).
Paso 26
Crea un nuevo directorio /WG_textured_menu donde puedas poner los archivos necesarios, index.html y style.css, las carpetas para las imágenes (/images) y la carpeta para los archivos Javascript (/js).
Paso 27
Prepara el documento. Abre index.html con tu editor de texto favorito (yo suelo trabajar con Notepad++); define el DOCTYPE , nosotros usamos XHTML 1.0 Strict que "contiene todos los elementos y atributos HTML, pero NO INCLUYE elementos de presentación o en desuso (como la fuente);" define el encabezado de tu documento (que es un contenedor para todos los elementos del encabezado, como la información meta de los scripts y más). Agregamos también dos contenedores div , un contenedor (que nos permitirá centrar la estructura) y el contenedor para nuestro menú de navegación.
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"html cabezameta http-equiv="Tipo-de-contenido" content="texto/html; conjunto-de-caracteres=utf-8" /titleMenú texturizado/titlelink href="style.css" rel="hoja de estilo" type="text/css" /script type="texto/javascript" src="js/jquery.js"/scriptscript type="texto/javascript" src="js/custom.js"/script/cabezacuerpodivdiv/div/div/cuerpo/html
Paso 28
Ahora puedes agregar la lista desordenada al menú de navegación principal.
ullia href="#"Inicio/a/lilia href="#"Acerca de/a/lilia href="#"Portafolio span/span/a/lilia href="#"Contacto/a/lilia href="#"Blog/a/li/ul
Paso 29
Complete el marcado agregando el panel de navegación de subnivel. Para agregar el panel, incluimos un div con una clase de "sub_panel" y una lista desordenada anidada dentro del elemento de lista del ul principal, como se muestra a continuación.
ullia href="#"Inicio/a/lilia href="#"Acerca de/a/lilia href="#"Portafolio span/spandivullia href="#"Diseño web/a/lilia href="#"Imprimir/a/lilia href="#"Diseño de logotipo/a/lilia href="#"Otros medios/a/li/ul/div/lilia href="#"Contacto/a/lilia href="#"Blog/a/li/ul
Agreguemos una nueva lista desordenada anidada con una clase de "sign_navigation" para el menú "iniciar sesión/registrarse".
ullia href="#"Inicio/a/lilia href="#"Acerca de/a/lilia href="#"Portafolio span/spandivullia href="#"Diseño web/a/lilia href="#"Imprimir/a/lilia href="#"Diseño de logotipo/a/lilia href="#"Otros medios/a/li/ul/div/lilia href="#"Contacto/a/lilia href="#"Blog/a/liliullia href="#"Iniciar sesión/a/lilia href="#"iniciar sesión/a/li/ul/li/ul
Paso 30
Sebastiano también planeó un bonito panel de inicio de sesión, por lo que lo agregaremos en nuestro marcado justo después de >/ul de la lista principal desordenada usando >form , >label y >input .
divmétodo de formulario='publicar' acción=''conjunto de camposh3Inicio de sesión de miembros/h3span/spanlabel for='username'Nombre de usuario/labelinput id='nombre de usuario' valor='' título='nombre de usuario' nombre='inicio de sesión' tipo='texto' /label for='password'Contraseña/labelinput id='contraseña' nombre='contraseña' valor='' título='contraseña' tipo='contraseña' /pentrada id='signin_submit' valor='' tipo='submit' /tipo de entrada='casilla de verificación' nombre='recordar_inicio de sesión' valor='1' id='recordar' /label for='remember'Recuérdame/label/p/conjunto de campos/formulario/div
Paso 31
Extrae todas las imágenes necesarias para el estilo del archivo psd. Hemos vinculado nuestro style.css dentro de la etiqueta head .
link href="style.css" rel="hoja de estilo" type="text/css" /
Ahora abra el archivo "style.css" en su editor de texto y comience a establecer algunos ajustes generales.
* { margen: 0; relleno: 0; borde: ninguno; } /* sin margen ni relleno para todos los elementos */a { text-decoration: none; } /* restablecer la decoración de texto en los enlaces */:focus { outline: none; } /* restablecer el foco */
Paso 32
Establecemos el estilo para el contenedor "wrapper" de >body y el contenedor "navigation_bar". Tenga en cuenta que usamos el contenedor #navigation_bar para crear un fondo gris claro; el panel de inicio de sesión se colocará mediante un posicionamiento absoluto, asegúrese de agregar un posicionamiento relativo a >#navigation_bar .
cuerpo { fondo: #e7e7e7 url(images/body_bck.jpg); familia de fuentes: "Helvetica Neue", Helvetica, Arial, sans-serif; tamaño de fuente: 12px; }.wrapper { ancho: 973px; alto: 500px; margen: auto; } /* margen automático y ancho para centrar nuestra estructura */#navigation_bar { margen: 60px 0este año 0; relleno: 4px; fondo: #f7f7f7; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; radio del borde: 10px; ancho: 967px; }
Paso 33
Es hora de darle estilo a nuestro menú de navegación. Tenga en cuenta que el menú desplegable se colocará mediante un posicionamiento absoluto; asegúrese de agregar un posicionamiento relativo al elemento de la lista.
ul#gen_navigation { float: left; width: 940px; height: 45px; background: url(images/bck_pattern.jpg) repeat-x; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; border: 1px solid #472620; list-style: none; padding: 22px 0 0 25px; }ul#gen_navigation li { posición: relativa; visualización: en línea; transformación de texto: mayúsculas; relleno derecho: 52px; }ul#gen_navigation li a { color: #fff; peso de fuente: negrita; sombra de texto: 1px 1px 0px #472620; relleno: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; radio del borde: 5px; }ul#gen_navigation li a:hover { color de fondo: #3d150e; }ul#gen_navigation li a span { display: inline-block; width: 9px; height: 7px; margin-left: 15px; background: url(images/arrow_up.png) no-repeat; } /* para agregar la flecha */
Paso 34
Ahora podemos agregar las reglas de estilo para el >.sub_panel .
.sub_panel { posición: absoluta; superior: -15px; izquierda: -18px; relleno: 5px; color de fondo: rgba(255,255,255,0.4); -radio-del-borde-moz: 10px; -radio-del-borde-webkit: 10px; -radio-del-borde-khtml: 10px; radio-del-borde: 10px; flotante: izquierda;}.sub_panel ul { fondo: #3d150e; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; radio del borde: 10px; relleno: 43px 40px 25px 15px; }ul#gen_navigation li .sub_panel ul li { relleno: 3px 0; pantalla: bloque; tamaño de fuente: 10px; }ul#gen_navigation li .sub_panel ul li a { fondo: ninguno; sombra de texto: 1px 1px 0px #1e0905; }
Paso 35
Termine de agregar el estilo para el menú de inicio de sesión/registro, el panel de inicio de sesión y su formulario.
ul#sign_navigation { float: derecha; posición: relativa; superior: -10px; derecha: -15px; sangría de texto: -9999px; ancho: 190px; alto: 32px; }ul#sign_navigation li a { relleno: 0; -moz-border-radius: 0; -webkit-border-radius: 0; -khtml-border-radius: 0; radio del borde: 0; }ul#sign_navigation li a.login_button { fondo: url(images/login_but.png) no-repeat 0px 0px; ancho: 76px; alto: 32px; pantalla: bloque; flotante: izquierda; }ul#sign_navigation li a.login_button:hover, ul#sign_navigation li a.sign_in_button:hover { posición de fondo: 0px -32px; }ul#sign_navigation li a.login_button:activo, ul#sign_navigation li a.sign_in_button:activo { posición de fondo: 0px -64px; }ul#sign_navigation li a.sign_in_button { fondo: url(images/sign_up_but.png) no-repeat 0px 0px; ancho: 74px; alto: 32px; pantalla: bloque; flotante: izquierda; }.login_panel { posición: absoluta; superior: 55px; derecha: 10px; color de fondo: rgba(255,255,255,0.4); -radio-del-borde-moz: 10px; -radio-del-borde-webkit: 10px; -radio-del-borde-khtml: 10px; radio-del-borde: 10px; relleno: 5px; flotante: derecha; }formulario .login_panel { fondo: #3d150e; color: #fff; relleno: 10px 15pxeste año 15px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; radio del borde: 10px; ancho: 180px; }.login_panel formulario h3 { fondo: url(images/line.gif) repeat-x abajo a la izquierda; padding-bottom: 10px; margin-bottom: 15px; }.close_login { posición: absoluta; derecha: -5px; superior: -5px; fondo: url(images/x.png) no-repeat; ancho: 30px; alto: 29px; pantalla: bloque; cursor: puntero; }Etiqueta del formulario .login_panel { tamaño de fuente: 10px; float: left; padding-top: 5px; clear: both; }.login_panel formulario input[type="text"], .login_panel formulario input[type="password"] { altura: 10px; ancho: 110px; float: right; margen: 0 0 15px 10px; relleno: 5px; tamaño de fuente: 10px; -moz-box-shadow: recuadro 1px 1px 1px #ccc; -khtml-box-shadow: recuadro 1px 1px 1px #ccc; -webkit-box-shadow: recuadro 1px 1px 1px #ccc; box-shadow: recuadro 1px 1px 1px #ccc; -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; }.login_panel p { borrar: ambos; }.login_panel formulario input[type="submit"] { ancho: 67px; alto: 21px; fondo: url(images/login_sub.png) no-repeat; float: left; margin-right: 12px; cursor: puntero; }.login_panel formulario p etiqueta { claro: ninguno; relleno: 1px 0 0 5px; margen superior: 3px; }.login_panel formulario entrada[tipo="casilla de verificación"] { float: left; margin-top: 3px; }
Paso 36
Cuando un float está contenido dentro de un contenedor que tiene fondo, ese float no fuerza automáticamente la altura del contenedor y el fondo no es visible. Por lo tanto, tenemos que agregar un contenedor inferior vacío >div/div (justo antes de la etiqueta de cierre de >div ) y la clase CSS relativa >.clear { clear: both; } para corregir este "error".
Paso 37
¿Recuerdas el "Paso 27"? Hemos añadido la siguiente línea de códigos:
script type="texto/javascript" src="js/jquery.js"/scriptscript type="texto/javascript" src="js/custom.js"/script
Vinculan el script .js con nuestra página. Por lo tanto, tenemos que agregar el archivo jquery.js a la carpeta /js, abrirlo y pegar el código jQuery . Luego, crea el archivo custom.js en la carpeta /js y ábrelo. Ahora estamos listos para escribir nuestro script personalizado.
Paso 38
Empecemos a trabajar con el panel de login. Para mostrar y ocultar nuestro panel utilizaremos el método >.toggleClass() , por lo que tendremos que añadir la siguiente clase en nuestro style.css: >.hidden { display: none; }
$(función() {// mostrar/ocultar el panel de inicio de sesión haciendo clic en .login_button$('.login_button').click(función() {$('.login_panel').toggleClass('oculto');});// Oculte el panel de inicio de sesión haciendo clic en .close_button$('.close_login').click(función() {$('.login_panel').addClass('oculto');});// Evitar el evento de clic predeterminado dentro del panel de inicio de sesión$('.login_panel').click(función(evento) {evento.preventDefault();});});
Paso 39
Finalmente el código jQuery para el panel desplegable. Una nota importante: nuestro panel se mostrará sobre el menú de navegación, por eso tenemos que añadir una nueva clase en nuestro css para posicionar correctamente el elemento de la lista principal desordenada ( >#gen_navigation ). La clase, que añadimos vía Javascript, es >ul#gen_navigation li.dropdown_hover a { position: relative; z-index: 100; padding-bottom: 7px; background: url(images/line.gif) no-repeat bottom left; } .
//mostrar menú desplegable cuando el mouse se mueve sobre el elemento de lista que contiene el subpanelvar cus_dropdown_sel = $('ul#gen_navigation li').find('.sub_panel').parent();var ancho de pan = 0; $(cus_dropdown_sel).hover(función(){panWidth = $(este).width() + 40;$('.sub_panel').css('width', panWidth); //control multiplataforma para el ancho del subpanel $(this).addClass('dropdown_hover'); // agrega la clase 'dropdown_hover' para hacer visible el elemento de la lista del menú de navegación $(this).find('.sub_panel').fadeTo(200, 1); // mostrar el panel }, función(){ $(this).removeClass('dropdown_hover'); // eliminar la clase 'dropdown_hover' $(this).find('.sub_panel').hide(); // ocultar el panelpanWidth = 0; // restablecer ancho });
Eso es todo, mira cómo se ve nuestro menú: demostración en vivo .
DESCARGAR PLANTILLA PSD + HTML/CSS
[hidepost] [descarga format="1"] [/hidepost]Conviértete en miembro Premium y obtén acceso ilimitado a archivos fuente y recursos premium por solo $7 al mes. Haz clic aquí para obtener más información .
Deja una respuesta