Realizando una página web me surgió la necesidad de crear una sección que sirviera de galería para que el cliente pueda mostrar todos sus trabajos.
Los requisitos que buscaba es que fuera responsive y que su carga fuese rápida. No quería perder mucho tiempo desarrollando una galería con esas características desde cero y me puse a buscar hasta que llegué a este proyecto en Git Hub de Dmitry Semenov: https://github.com/dimsemenov/Magnific-Popup.
Cada vez que desarrollo una página web lo que más pesado se me hace es escribir siempre la estructura básica de la misma, y tener que abrir y cerrar etiquetas constantemente. Puede parecer una tontería, pero siento como que se pierde un montón de tiempo en algo tan banal como crear dos listas anidadas en HTML, definir la estructura de un HTML5, etc.
Dispuesto a encontrar una manera de agilizar ese proceso, hace unos meses, mientras desarrollaba mi proyecto final de ciclo, descubrí el Zen coding, y junto a él, Emmet.
¿Y qué es el Zen coding? Es la mejora de la productividad en la creación de páginas web, a base de la generación de abreviaturas para escribir código HTML y CSS. Y en Emmet encontré su máximo exponente.
Emmet son sintaxis de abreviaturas ya predefinidas que nos permite, en una sola línea, escribir estructuras complejas HTML, añadiendole atributos, clases, identificadores y contenido.
Este curso, mientras estudiaba por las mañanas, me apunte a un certificado profesional de creación de páginas web.
Estudié HTML5 y CSS3, junto con algo de JavaScript. Por desgracia tuve que abandonar el curso antes de poder ver jQuery, Ajax y poder refrescar PHP, pero la verdad que aprendí bastante.
Hablando con un compañero de DAM por las mañanas comento que quería echarle un vistazo a estos temas en verano, así que aprovecho la plataforma para colgar todos los apuntes y trabajos que he realizado tanto en éste módulo de Lenguajes de marcas como en el certificado de por la tarde.
En verano iré ampliando la información con JavaScript y jQuery, en cuanto un compañero de por la tarde me pase lo que han continuado haciendo.
Esta todo montado en una carpeta en el Drive. Disfrutadla :)
Antes un menú desplegable sólo podía realizarse con JavaScript, JQuery o similar. Ahora, con la nueva implantación de CSS (CSS3), es posible hacerlo sin necesidad de recurrir a ese lenguaje. Que bueno, también lo era antes, con CSS2, pero queda más guay decirlo así y pensar que CSS2 no daba la oportunidad. He dicho.
A lo que iba. La premisa básica para realizar éstas acciones es trabajar ocultando elementos. ¿Cómo?
Comenzaremos creando una lista de elementos. Un botón por ejemplo, o la simulación de un botón. A ese elemento le aplicaremos un atributo :hover para mostrar sus subelementos
Vamos a crear una lista
El archivo HTML es muy sencillito, trabajando con listas y dentro de los elementos de lista otras listas. ¿Habéis visto cuántas veces he repetido la palabra lista? Quizá sea falta de léxico...
<head>
<body>
El CSS lo aplicaremos por capas. Cada línea la he comentado para mayor comprensión del lenguaje:
El resultado que podemos ver es este:
Este código se ha ido haciendo en clase, con todos los compañeros juntos. No es la mejor elección de color, pero como ejemplo sirve.
Y pensaréis "ostias, y ¿todo eso tengo que escribirlo a mano para poder probar el código?". Tranquilos, si está to' pensao. A continuación os dejo tanto el código HTML como el CSS. Que lo disfrutéis.
/* Aplicamos margin y padding a todos los elementos */ *{ margin: 0; padding: 0; } /*Estilo a todos los li dentro del nav */ nav li{ list-style-type: none; background-color: yellow; border-style: solid; border-width: 1px; border-color: black; color: black; } /* Los li hijos de los ul hijos del nav se presentarán a la izquierda */ nav > ul > li{ float: left; } /* Cuándo pasemos por los li dentro del nav se pondrán de color naranja */ nav li:hover{ color: orange; } /* Ordenamos los hijos li de los hijos ul de nav para ponerlos en una misma línea */ nav > ul > li{ margin: 5px; display: inline; } /* Tamaño de los li que están dentro de los ul hijos */ nav > ul li{ min-width: 70px; } /* Posición fija y eliminar los símbolos de lista de los ul dentro de li dentro de un ul hijo de nav */ nav > ul li ul{ display: none; position: absolute; } /* Mostrar el submenú cuando pasemos sobre el li correspondiente */ nav > ul li:hover > ul{ display: block; } /* Dar posición no fija a los ul dentro de li dentro de ul hijo de nav */ nav > ul li ul { position: relative; } /* Alinear a la derecha del li seleccionado el submenú desplegable*/ nav > ul li ul li ul { right: -70px; position: absolute; top: 0; }
/* Aplicamos margin y padding a todos los elementos */
*{
margin: 0;
padding: 0;
}
/*Estilo a todos los li dentro del nav */
nav li{
list-style-type: none;
background-color: yellow;
border-style: solid;
border-width: 1px;
border-color: black;
color: black;
}
/* Los li hijos de los ul hijos del nav se presentarán a la izquierda */
nav > ul > li{
float: left;
}
/* Cuándo pasemos por los li dentro del nav se pondrán de color naranja */
nav li:hover{
color: orange;
}
/* Ordenamos los hijos li de los hijos ul de nav para ponerlos en una misma línea */
nav > ul > li{
margin: 5px;
display: inline;
}
/* Tamaño de los li que están dentro de los ul hijos */
nav > ul li{
min-width: 70px;
}
/* Posición fija y eliminar los símbolos de lista de los ul dentro de li dentro de un ul hijo de nav */
nav > ul li ul{
display: none;
position: absolute;
}
/* Mostrar el submenú cuando pasemos sobre el li correspondiente */
nav > ul li:hover > ul{
display: block;
}
/* Dar posición no fija a los ul dentro de li dentro de ul hijo de nav */
nav > ul li ul {
position: relative;
}
/* Alinear a la derecha del li seleccionado el submenú desplegable*/
nav > ul li ul li ul {
right: -70px;
position: absolute;
top: 0;
}
Si queréis visitar el tutorial que nos ha "inspirado" está aquí.
Realmente no vimos prácticamente nada ese día, pero aún así lo pongo. Quien sabe... Etiqueta <a>
Sirve para la creación de hipervinculos.
Atributos vistos:
target. Permite abrir los enlaces donde se le indique
title. Texto a mostrar cuándo se pasa el curso por encima del enlace. Distinguir de etiqueta <title>
Sintaxis:
<a href="dirección a la que se apunta" |target=" "|>Texto a mostrar</a>
