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 :)
Vamos a ver como podemos incrustar texto con diversas fuentes en nuestra página web.
Antes se usaban "fuentes seguras", como Helvética, Arial, y en todo caso a lo mejor Sans-serif
font-family: arial, helvetica, sans-serif
En este caso el navegador usaba primero la arial, si no la tiene la helvetica, y si no una cualquiera sin serifear.
Ahora podemos usar un código especial para cargar una fuente en la página web, que se descargará al ordenador del usuario.
Es @font-face (el arroba indica que declararemos una nueva fuente).
Es decir:
Y posteriormente hacer referencia al parrafo donde aplicar esta fuente:
Código para usar en la web:
@font-face {
font-family: 'Akronim';
src: url('fonts/Akronim-Regular.eot'); /* Para Internet Explorer */
src: local('Akronim'), /* Para el resto de navegadores */
url('fonts/Akronim-Regular.ttf') format('truetype'),
url('fonts/Akronim-Regular.woff') format('woff'),
url('fonts/Akronim-Regular.svg') format('svg')
}
p {
font-family: 'Akronim', cursive;
font-size:1.5em;
}
/* dafont.com para conseguir fuentes */
Para la práctica de hoy nos descargaremos una fuente X para realizar la prueba
y en el css de nuestra página, escribimos lo siguiente:
static: Se mantendrá en esa posición, pero dejará de ser visible al mover la págin.
absolute: Permite posicionar el elemento donde queramos dentro de la página web, superponiendo a todos los demás. Siempre es relativa al elemento que la contiene.
relative: Permite poner nuestro elemento donde queramos dentro de la página web
fixed: Atributo que siempre se mantendrá en esa posicion, aunque hagamos scroll
Atributo z-index
Organiza la profundidad de los elementos en una página. Cuanto mayor sea el z-index, más arriba estará en la página web dicho elemento.
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í.
visibility:hidden à
Oculta el elemento, manteniendo su espacio. Digamos que pone una opacidad del
0%
display:none à
Oculta el elemento, y el espacio que ocupa
Selectores CSS
Para aplicar los estilos a determinados elementos,
necesitaremos poner estos códigos:
A un elemento àa { } <!-- Se aplica a todas las
etiquetas a -->
A varios elementos àa,aside{ } <!-- Se aplica a
varios elementos -->
A los id à#panelizquierdo { } <!-- Para todos
los elementos con ese id -->
Por clases à.enlaceRojo { } <!-- Es una
diferencia a nivel conceptual con los id. Es para aplicar “en masa”. Id es
para aplicarlos a algo concreto, a un header por ejemplo }
Para nombrar el class: <a class=”enlaceRojo”>
Veamos un ejemplo. Como mostrar, por ejemplo, en orden los
enlaces que están dentro del nav:
nav a { }
Si tenemos dos nav:
nav a { }
O también:
nav#azul a { } <!-- Sólo los enlaces que estén en un nav hijo de
azul-->
Entonces, para ordenarlos horizontalmente, por ejemplo:
nav a {
display:inline;
}
Margin y Padding
Margin despeja un área del elemento, más allá del borde. El
margen no tiene un color de fondo, y es siempre completamente transparente.
El padding despeja un área alrededor del contenido (dentro
del borde)
La página hasta ahora ha sido editada para mostrar todo lo mencionado en este entrada y en las anteriores. Si deseas descargar la versión de la web hasta el día 17/09/2014 pulsa aquí
