Creación de menú (UL) desde cero – 3 Submenus.

En el post inicial vimos como crear un menú utilizando listas no ordenadas, luego vimos como añadir un estilo de tabs a las opciones del menú. Ahora veremos como agregar submenus a las opciones del menú principal, claro, utilizando listas no ordenadas.

Comencemos….

1.- Estructura principal. Para este ejemplo utilizaremos la estructura creada en el menú básico y la modificaremos para agregar submenus utilizando otra lista no ordenada. La lista que representara el submenu se agregará dentro de la opcion de menu que la contenga, con esto se facilita el posicionamiento del submenu.

<div class=”contenedorMenu”>        
            <ul class=”menu”>
                <li><a href=”#inicio”>Inicio</a></li>            
                <li><a href=”#seccion1″>Sección 1</a></li>
                <li><a href=”#seccion2″>Sección 2</a>
                    <!– este es el submenu –>                    
                    <ul class=”submenu”>
                        <li><a href=”#Subseccion1″>SubSeccion1</a></li>                    
                        <li><a href=”#Subseccion2″>SubSeccion2</a></li>
                        <li><a href=”#Subseccion3″>SubSeccion3</a></li>
                    </ul>
                    <!– Termina el submenu –>                
                </li>
                <li><a href=”#seccion3″>Sección 3</a></li>
            </ul>                        
        </div>

2.- Estilos para el submenu. El submenu debería estar oculto hasta que la opción que lo contiene este seleccionada. Además, agregamos estilos para los submenu items.

/*Estilos para submenu UL*/
            .submenu
            {
                display:none; /*No mostrar*/
            }

/*Estilos para los SubmenuItems    */
            .submenu li
            {
                background: #a921A6;   /*Color de fondo para el menu*/                
                width:140px;    /*Establecer el ancho de cada item*/
                text-align:center;    /*centrar contenido en texto*/
            }

3.- Desplegar el submenu. Una vez el cursor este sobre la opción del menú principal, se cambiará el estilo del submenu para mostrarlo.

/*Cuando se pase el cursor sobre el Item de Menu, mostrar el submenu*/
            .menu li:hover > .submenu
            {
                display: inline-block;            /*Mostrar submenu*/
            }        

 

Ahora, tenemos un menú parecido a este:

Menu Ul

En el siguiente post veremos como hacer un sticky menú

Gracias

Como utilizar un Sprite con CSS

Esta técnica ha sido utilizada desde hace mucho tiempo, principalmente en juegos para simular movimiento a los elementos (gráficos).

Los sprites en el desarrollo de páginas web, evita que para cada icono incorporado como imagen se haga una petición y transferencia entre cliente y servidor, es decir, si mi página tiene un conjunto de iconos para cada icono se hace una petición de transferencia de imagen, entonces con esta técnica, todas las imágenes de los íconos están en una sola imagen, de manera sólo se transfiere una sola imagen al cliente (navegador), evitando así un sinnúmero de peticiones y transferencias para cada icono de la página web.

Una primera opción es crear las imagen con los íconos en una sola linea vertical, como se muestra en al siguiente imagen:
css-sprites-vertical
esta distribución vertical es la forma más sencilla de implementar porque solo nos preocupamos por el alto entre cada gráfico, el HTML se vería así:

<p id=”l1″>Las calculadores del siglo pasado</p>
<p id=”l2″>Sonido desactivado</p>
<p id=”l3″>Unidad de CD/DVD</p>
<p id=”l4″>Cara con lentes</p>

El CSS de la siguiente manera:

#l1, #l2, #l3, #l4 {
    padding-left: 32px;
    height: 32px;
    line-height: 32px;
    background-image:url(‘css-sprites-vertical.gif’);
    background-repeat: no-repeat;
}
#l1 {background-position: 0px 0px;}
#l2 {background-position: 0px -32px;}
#l3 {background-position: 0px -64px;}
#l4 {background-position: 0px -96px;}

donde se declaran algunos aspectos generales, la separación del margen izquierdo (padding), el alto específico (height), la misma imagen de fondo (con la distribución vertical de los gráficos), por último la posición del background de manera estratégica que corresponde al gráfico que se quiere mostrar.

Un inconveniente al utilizar imágenes como sprites donde tienen todas las imágenes ordenadas verticalmente, es cuando son demasiadas imágenes, entonces se propone otra alternativa, la cual establece una sola imagen que contiene gráficos (imágenes) tanto vertical como horizontalmente, como lo muestra la siguiente imagen.

css-sprites

Esto tiene implicaciones, la primera es que el código HTML tiene que cambiar, es necesario hacer uso de un elemento más que servirá para delimitar el espacio vertical y horizontal del background que se mostrará, los elementos que pueden servir para trabajar esta técnica son div, p o img.

En este caso mostraré el ejemplo usando un elemento img, el código HTML quedaría de la siguiente forma:

<p id=”l5″><img src=”pixel.png” alt=”” />Las calculadores del siglo pasado</p>
<p id=”l6″><img src=”pixel.png” alt=”” />Tecla a con acento</p>
<p id=”l7″><img src=”pixel.png” alt=”” />Signo de música</p>
<p id=”l8″><img src=”pixel.png” alt=”” />gráfico de copiar</p>

La imagen pixel.png es una imagen de 1px de alto por 1px por ancho de manera que no interfiera en tapar el background del elemento web.

Para este ejemplo el CSS quedaría así:

#l5 img, #l6 img, #l7 img, #l8 img{
    height: 32px;
    width: 32px;
    background-image: url(‘css-sprites.gif’);
    background-repeat: no-repeat;
    vertical-align: middle;
}

#l5 img{background-position: 0px 0px;}
#l6 img{background-position: -32px 0px;}
#l7 img{background-position: -32px -32px;}
#l8 img{background-position: -64px -64px;}

de igual manera se define el ancho, alto del espacio del gráfico, una única imagen de fondo para el elemento img y de manera personalizada el espacio de la imagen que se mostrará.

Ahora a probar!.

Saludos

Nota: las imágenes utilizadas no son propias, son imágenes tomadas de otros sitios en internet que también las utilizan para ejemplificar el uso de sprites.

Fuentes optimizadas para web

Desde que apareció @font-face en CSS el aspecto de las páginas web cambio. Ahora ya no tenemos que usar solo las aburridas fuentes que por defecto traen los navegadores, ahora podemos usar un amplio conjunto de fuentes y seleccionar el conjunto de fuentes que van de acuerdo al estilo que le queremos dar a nuestra web.

Google ofrece un servicio llamado Google Fonts donde podemos seleccionar entre un amplio catalogo de fuentes disponibles y optimizadas para web.

fuentes

Lo que tenemos que hacer es seleccionar las fuentes que vamos a utilizar y dar clic en el boton Add to Collection. Cada vez que realicemos esta acción las fuentes se irán agregando a nuestra colección.

fuentes2

Una vez que tenemos todas las fuentes que vamos a utilizar damos clic en la opción Use, que se encuentra en la parte derecha de la colección de fuentes. Esta acción nos llevará a otra pantalla donde nos muestra un resumen de las fuentes seleccionadas. Algunas fuentes están diseñadas en mas de un ancho, si este es el caso será necesario seleccionar cuales estilos son los que nos interesan. Por default todas las fuentes traen el ancho normal (400).

Como un dato extra Google Fonts nos brinda información sobre el impacto que tendrá en nuestro sitio el uso de las fuentes. Recordemos que las fuentes son un recurso mas de la web y como tal implica al menos una solicitud al servidor.

fuente3

Una vez que checamos que todo está bien procedemos a utilizar las nuevas fuentes. Existen 2 alternativas, la primera es descargar las fuentes para incluirlas directamente en nuestros proyectos. Se descargará un archivo .zip que incluye una carpeta por fuente y dentro de cada una de estas carpetas se encuentran los archivos .ttf.

La segunda forma es utilizar directamente el servicio de Google Fonts y así evitarnos hacer la descarga y aprovechar los beneficios de la carga en paralelo de los navegadores al descargar las fuentes desde fonts.googleapis.com. De esta segunda forma existen a su vez 3 formas de utilizarlas, la primera es agregando una hoja de estilos.

<link href=’http://fonts.googleapis.com/css?family=Lobster|Tangerine|Dancing+Script|Crafty+Girls’ rel=’stylesheet’ type=’text/css’>

La segunda es utilizando @import

@import url(http://fonts.googleapis.com/css?family=Lobster|Tangerine|Dancing+Script|Crafty+Girls);

La tercera forma es utilizando JS

<script type=”text/javascript”>
  WebFontConfig = {
    google: { families: [ ‘Lobster::latin’, ‘Tangerine::latin’, ‘Dancing+Script::latin’, ‘Crafty+Girls::latin’ ] }
  };
  (function() {
    var wf = document.createElement(‘script’);
    wf.src = (‘https:’ == document.location.protocol ? ‘https’ : ‘http’) +
      ’://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js’;
    wf.type = ‘text/javascript’;
    wf.async = ‘true’;
    var s = document.getElementsByTagName(‘script’)[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

Cada una de estas forma genera una llamada al API de Google que se encarga de generar el código necesario para poder utilizar las fuentes. Para las fuentes que seleccionamos para este artículo el código generado fue el siguiente.

@font-face {
  font-family: 'Crafty Girls';
  font-style: normal;
  font-weight: 400;
  src: local('Crafty Girls'), local('CraftyGirls'), url(http://themes.googleusercontent.com/static/fonts/craftygirls/v3/0Sv8UWFFdhQmesHL32H8o3hCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  src: local('Dancing Script'), local('DancingScript'), url(http://themes.googleusercontent.com/static/fonts/dancingscript/v4/DK0eTGXiZjN6yA8zAEyM2VhlQWQpSCpzb2Peu3I-Q34.woff) format('woff');
}
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  src: local('Lobster'), url(http://themes.googleusercontent.com/static/fonts/lobster/v6/MWVf-Rwh4GLQVBEwbyI61Q.woff) format('woff');
}
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: 400;
  src: local('Tangerine'), url(http://themes.googleusercontent.com/static/fonts/tangerine/v4/HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

Una vez que agreguemos cualquiera de las formas descritas anteriormente a nuestro proyecto estamos listos para usar las fuentes. Solo es necesario agregar la propiedad font-family en CSS a los elementos que usaran la fuente.

font-family: ‘Lobster’, cursive;
font-family: ‘Tangerine’, cursive;
font-family: ‘Dancing Script’, cursive;
font-family: ‘Crafty Girls’, cursive;

Web icon fonts

Cada vez es mas común el uso de iconos en páginas web. La forma tradicional de trabajar estos iconos era usando pequeñas imagenes. Algunos problemas de trabajarlo de esta forma es que si tu web la trabajas para dispositivos con una mayor resolución (por ejemplo pantallas de retina) tus iconos se podian ver pixeleados, otro problema es que cada imagen es una solicitud al servidor, lo que provoca muchas peticiones web, esto en parte se podia solucionar usando sprites de imagenes.

Una alternativa de solución para este problema es usar icon web fonts, es decir manejar los iconos como si fueran texto (cada icono es un caracter del conjunto de caracteres que componen la fuente). Los beneficios que nos da usar esta técnica es que los iconos ahora son vectoriales 😀 podemos cambiar su tamaño usando css (css:font-size) y su color (css:color) y todo esto sin perder calidad y hablando sobre peticiones al servidor solo se realiza una al invocar la fuente que contiene el conjunto de iconos.

Hay muchos sitios que ofrecen este tipo de fuentes, yo estoy utilizando fontawesome que proporciona un conjunto de iconos bastante amplio y es fácil de utilizar en conjunto con bootstrap. Ademas nos proporciona un cdn. Fontawesome proporciona ejemplos muy claros sobre como utilizarlo.

Esta técnica se basa en el “shadow dom” y utiliza un rango de caracteres reservado para propositos especiales.

 

 

 

¡¡Bienvenidos colaboradores!!

Le damos la más cordial bienvenida a nuestros colegas del Grupo Desarrollador SLP

Que de ahora en adelante se unen como colaboradores de este blog con aportaciones sobre nuevos temas y enriquecimiento de los actuales, sin duda cada una de las entradas generadas por estos nuevos colaboradores enriquecerán el contenido de sitio y apoyará a todos aquellos que buscan tips, trucos, códigos y experiencias!.

Bienvenidos y a compartir!

@chuy_rodriguez & @igarperez