Creación de menú (UL) desde cero – 4 Sticky Menu.

En el post anterior hicimos un menú horizontal, con posibilidad de agregar submenus verticales para cada opción del menú.

Ahora, agregaremos un poco de funcionalidad al menú, haremos que este menú este siempre visible sin importar que tan larga este la pagina y cuanto se scrollee, a este efecto se le conoce como StickyMenu (Menú pegajoso).

Comencemos……

1.- Estructura básica del menú. Para este ejemplo, utilizaremos la estructura generada en el primer ejercicio.

<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></li>
                    <li><a href=»#seccion3″>Sección 3</a></li>
                </ul>                        
            </div>

2.- Estilos para el menú. Utilizaremos los estilos generados en el primer ejercicio.

<style type=»text/css»>
            body{ margin:0px;}                       
            /*Estilos para el contendor del menu*/            
            .contenedorMenu
            {
                background: #E321A6;   /*Color de fondo para el menu*/
                width: 100%; /*ancho del menu */
            }
            /*Estilos para el elemnto ul*/
            .menu
            {
                list-style: none;  /*Quitar viñetas de la lista*/
                padding: 0px;    /*Quitar sangría de la lista */
                height: 30px;    /*Establecer el ancho del menu*/
                line-height: 30px; /*Centrar el contenido al medio*/
                margin: 0px;/*Quitar espacios arriba y abajo*/
            }
            /*Estilos para los items de menu*/
            .menu li
            {
                float:left;    /*alinear los elemntos a la izquierda*/
                width:100px;    /*Establecer el ancho de cada item*/
                text-align:center;    /*centrar contenido en texto*/
            }
            /*Estilos para el enlace dentro de los Items de menu*/
            .menu li a
            {
                text-decoration: none;    /*Quitar el subrayado*/
                color: white;    /*Color de fuente*/
                display: inline-block;    /*Expandir el enlace a lo alto del LI*/
                width: 100%;    /*Expandir el enlace a lo largo del LI*/
            }
            /*Estilos para los enlaces cuando el mouse se coloca sobre ellos*/
            .menu li a:hover
            {
                 background-color:white;    /*Color de Fondo*/
                 color:#E321A6;    /*Color de fuente*/
            }
            /*Estilos sticky*/
            .sticky{position: fixed; top: 0px; width: 1000px;}
        </style>

3.- Agregar elementos adicionales a la pagina. Para mostrar como funciona este ejercicio, incorporaremos un encabezado y saltos de linea a la pagina. Como encabezado agregaremos un div, y los saltos de linea se incorporaran al final de la página.

<div class=»pagina»>
            <div class=»encabezado»></div>
            <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></li>
                    <li><a href=»#seccion3″>Sección 3</a></li>
                </ul>                        
            </div>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        </div>

Y sus correspondientes estilos:

            /*Estilos generales para la pagina*/
            .pagina{ width: 1000px; margin: 0 auto;}
            .encabezado{ width:100%; background-color: #456789; height: 200px;}

4.- Agregar la referencia a la API de JQuery. De preferencia utilicemos el sitio oficial de JQuery y la version mas reciente para trabajar nuestros proyectos.

             <script src=»http://code.jquery.com/jquery-1.11.0.min.js»></script>

5.- Implementar el código JQuery. Lo que queremos lograr es lo siguiente:

-Inicialmente el menú debe verse debajo del encabezado y, mientras se scrollea hacia abajo recorrerse en la ventana, como normalmente ocurriría.
-Cuando el scroll rebase el ancho del encabezado, el menú cambiará de estilo para permitir que siempre este visible al tope de la página.

Esto se implementa así:

<script type=»text/javascript» >
            $(document).ready(function () {
                    /*Vincular el evento scroll a la ventana*/
                    $(window).scroll(function () {
                            //Obtener el alto del encabezado
                            var distancia = $(«.encabezado»).height();
                            //Verificar si se ha scrolleado lo sifuciente para que menú se vea en el tope del sitio                            
                            if( $(this).scrollTop() > distancia )
                            {
                                /*Si el scroll llego a la posicion del menu, dejar el menu al tope con posicion fija*/
                                $(«.contenedorMenu»).addClass(«sticky»);
                            }
                            else
                            {
                                /*Si el scroll esta por encima del menu, quitar la posicion fija en el tope*/
                                $(«.contenedorMenu»).removeClass(«sticky»);
                            }
                    });
            });
        </script>

Donde la clase sticky, se define:

/*Estilos sticky*/
.sticky{position: fixed; top: 0px; width: 1000px;}

Esto permite que el menú, siempre este visible sin importar que tan larga sea la página.

Menu4aMenu4b

Gracias

Cómo usar las animaciones con CSS3

Con la versión 3.0 de CSS es posible crear animaciones de elementos web que anteriormente solo se podía crear mediante un lenguaje de programación estructurado que permitiera estructuras de control (ciclos y condicionantes).

De manera similar ocurrió con las transiciones (también incorporadas en CSS3), sin embargo la diferencia entre las transiciones y las animaciones es que las transiciones se ejecutan a partir de un evento como puede ser el hover y las animaciones no responden a un evento en especial, sino al cargado de los estilos al momento de cargar la página.

para ejemplificar el uso de las animaciones usaremos una imagen.

<img alt=»» » src=»tatto%20page.jpg»  />

y lo que haremos es que mediante animaciones cambiaremos la propiedad de opacidad (opacity) de la imagen de manera que esté transparente al unicio y que se comience a visualizar conforme pasa el tiempo.

Entonces los atributos de la imagen quedaría así:

img{
    animation: aparecer 5s; /*se declara para la imagen una animación llamada «aparecer» y que la animación se realizará en 5 segundos */ 
}

Nota: Estas instrucciones son las declaraciones estándares, en caso de que no se ejecuten tendrás que agregar los prefijos (-webkit-, -o-, -ms-, etc) de acuerdo al navegador que utilices para revisar el ejercicio.

Una vez declarada la animación para el elemento se realiza la declaración de la animación de la siguiente manera:

@keyframes animacion
{
    from{opacity:0;}  /* apariencia inicial del elemento*/
    to{opacity:1;} /* apariencia finaldel elemento*/
}

El ejemplo anterior indica que la opacidad del elemento que tenga asignada esta animación será de «cero» inicialmente (es decir no se verá) y durante la animación se transitará hasta llegar a «uno» (es decir será completamente visible).

Si el ejemplo se deja tal como está, esta animación solo hará una transición es decir de opacidad cero a opacidad uno, sin embargo si queremos que esto sea cíclico (que cuando llegue a opacidad 1 inicie nuevamente) debemos agregar a la animación una instrucción indicando que la animación no se detenga en el estado final:

animation-iteration-count: infinite;

Otro mecanismo para ejemplificar el paso de la animación entre el estado inicial y el final es hacerlo mediante el porcentaje del tiempo que durará la animación, de la siguiente manera:

@-webkit-keyframes aparecer {
    0% {opacity:0;}      /*  similar al «from» estado inicial*/
    50% {opacity:1;}    /*  estado que marca el estado al 50% del tiempo transcurrido */
    100% {opacity:0;} /*  similar a «to», marca el estado al 100% del tiempo transcurrido */
}

Les recomiendo profundizar en los demás parametros de las animaciones que permiten personaliar la transición de la aminación:

  • animation-delay, especifica el tiempo en que comenzará la animación
  • animation-direction, especifica como se desarrollará la animación
  • animation-duration, especifica cuanto tiempo durará el tiempo del ciclo de la animación
  • animation-fill-mode, especifica el estilo que se le aplicará al elemento cuando la animación no ha terminado o no ha comenzado
  • animation-play-state, especifica cuando la animación está ejecutándose o está en pausa.

Cada una de estos parámetros tiene su conjunto de valores.

Espero les sea de utilidad.

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

Creación de menú (UL) desde cero – 2 Diseño Tab.

En el post anterior creamos la estructura básica del menú utilizando un contenedor y una lista no ordenada como las opciones que el menú va mostrar. Construimos un menú bastante básico pero funcional.

En este post, daremos al menú un aspecto diferente, vamos a simular TABs.

Comencemos…

1.- Estructura Intacta. Para este ejemplo, la estructura que creamos anteriormente no se modificara, seguimos utilizando:

<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></li>
                <li><a href=»#seccion3″>Sección 3</a></li>
            </ul>                        
        </div>

2.- Agregar estilos. Para darle el efecto de tab, tendremos que agregar nuevos estilos y cambiar de lugar algunos otros.

El primer cambio que realizaremos sucede en la regla del contenedor, en el menú original teníamos esta regla:

.contenedorMenu
            {
                background: #E321A6;   /*Color de fondo para el menu*/
                width: 400px; /*ancho del menu */
            }

Como primer cambio moveremos el estilo que establece color de fondo de la regla del contenedor y lo colocaremos en la regla que establece estilos a los ListsItems.

Como segundo cambio, en esta misma regla, agregaremos los estilos para redondear los bordes superiores de los item de la lista, para esto utilizaremos los estilos border-top-left y border-top-right.

La regla queda así:

.menu li
            {
                float:left;    /*alinear los elemntos a la izquierda*/
                width:100px;    /*Establecer el ancho de cada item*/
                text-align:center;    /*centrar contenido en texto*/
                

               /*Para menú en forma de tabs*/
                background: #E321A6;   /*Color de fondo para el menu 1er cambio*/
                border-top-left-radius: 15px;   /*Bordes redondeados 2ndo cambio*/
                border-top-right-radius: 15px;                
            }

Para mayor información acerca del estilo border-radius, ir aquí

Como tercera modificación, agregamos un borde redondeado al evento hover de los ListItems, esto con la finalidad de ver un borde redondeado al colocar el cursor sobre el Item.

.menu li a:hover
            {
                 background-color:white;    /*Color de Fondo*/
                 color:#E321A6;    /*Color de fuente*/
                 /*Para menú en forma de tabs*/

                 border-top:1px #E321A6 solid;
                 border-top-left-radius: 15px;
                 border-top-right-radius: 15px;    
            }       

El menú queda así:

Menu tab

En el siguiente post veremos como agregar submenús al menú principal

Saludos

Creación de menú (UL) desde cero – 1 Estructura y diseño.

Los menús siempre han sido un elemento infaltable en la visualización de información, por qué, es a partir de él que los usuarios pueden acceder de manera fácil y rápida a toda la información que se desea mostrar.

En los sitio web, los menús han pasado de ser una simple lista enlaces a una serie de elementos HTML que combinado con CSS y JavaScript, nos muestran funcionalidades mas ricas y vistas mas atractivas para usarse.

En esta serie de posts, crearemos un menú desde cero utilizando una lista no ordenada (UL), modificando su vista con CSS y dando funcionalidad con JQuery.

Comencemos…….

1.-Estructurar el menu. Utilizo un div «contenedor » que me permitira mover el menu o cambiar su posicionamiento, dentro de él creo un elemento Lista No Ordenada y creo sus ListItems, uno por cada opción que contendrá el menú.

<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></li>
                <li><a href=”#seccion3″>Sección 3</a></li>
       </ul>                        
 </div>

2.- Diseñar los estilos. Una vez creada la estructura HTML que formará mi menú, aplico los estilos necesarios para darle una vista diferente a como se vería normalmente una lista no ordenada. A continuación se muestran los estilos aplicados a cada uno de los elementos así como la función que tiene cada uno de ellos:

 <style type=»text/css»>
body{ margin:0px;}
/*Estilos para el contendor del menu*/
.contenedorMenu
{
background: #E321A6;   /*Color de fondo para el menu*/
width: 400px; /*ancho del menu considerando que cada una de las opciones del menu tiene como ancho 100px;*/
}
/*Estilos para el elemnto ul*/
.menu
{
list-style: none;  /*Quitar viñetas de la lista*/
padding: 0px;    /*Quitar sangría de la lista */
margin:0px; /*Quitar espacios que genera la lista ul*/
height: 30px;    /*Establecer el ancho del menu*/
line-height: 30px; /*Centrar el contenido al medio*/
}
/*Estilos para los items de menu*/
.menu li
{
float:left;    /*alinear los elemntos a la izquierda*/
width:100px;    /*Establecer el ancho de cada item*/
text-align:center;    /*centrar contenido en texto*/
}
/*Estilos para el enlace dentro de los Items de menu*/
.menu li a
{
text-decoration: none;    /*Quitar el subrayado*/
color: white;    /*Color de fuente*/
display: inline-block;    /*Expandir el enlace a lo alto del LI*/
width: 100%;    /*Expandir el enlace a lo largo del LI*/
}
/*Estilos para los enlaces cuando el mouse se coloca sobre ellos*/
.menu li a:hover
{
background-color:navy;    /*Color de Fondo*/
color:#fff;    /*Color de fuente*/
}

</style>

Hasta ahora, tenemos un menú bastante básico pero funcional. Algo asi:

Menu básico

En próximos post, agregaremos algunas funcionalidades y características a este menú.

2.-Menu en forma de TAB

Gracias.

Almacenar Arrays en Cookies con Javascript

Cuando un servidor web responde a una solicitud de un cliente el servidor termina la conexión que se establece entre ellos y se «olvida» de lo que esta pasando con el cliente, es por ello que se ideó la idea de almacenar en el cliente información que puede ser necesaria en caso de reestablecer la conexión con el servidor para realizar mas peticiones. Tomemos como ejemplo el inicio de sesión de un usuario en sitio web, el usuario iniciará su sesión al ingresar al sitio por primera vez, esta página pedirá recordar estas credenciales para evitar que el usuario tenga que iniciar sesión cada que se reestablece la comunicación con el servidor.

Esto es posible gracias a que el lenguaje JavaScript es capaz de escribir esta información directamente en el cliente a través de archivos de texto. Las cookies se administran de forma diferente para cada navegador, en algunos casos se crea un archivo de cookies por dominio y en algunos otros por cada usuario del equipo cliente. Esto no nos afecta en nada ya que en el lenguaje JavaScript las cookies se manejan de la misma forma, independientemente del navegador que el cliente utilice.

Desde el JavaScript las cookies se guardan la propiedad cookie del objeto document y de igual manera es desde ahí donde se recuperan las cookies almacenadas.

Cabe recordar que los datos que se almacenan dentro de las cookies se almacenan como cadena de caracteres, entonces les presento aquí una forma de almacenar datos de un arreglo dentro de una cookie:

//Teniendo un array con datos:
var ganadores = [«Luis»,120,»Ernesto»,87,»Vane»,145];
//creamos una variable que almacenara las cadenas que contienen el arreglo
var strGanadores=»»;
//mediante un ciclo concatenamos los valores del arreglo a la cadena.
for(var i=0;i<ganadores.length;i++)
{
strGanadores+=ganadores[i]+»,»;  //agregamos un carácter ‘,’ (coma) como separador de los elementos en la cadena
}
//Quitamos el ultimo carácter, que es una coma.
strGanadores = strGanadores.substr(0, strGanadores.length-1);
//Generamos el tiempo de duración que tendrá la cookie
var hoy = new Date();    //Fri May 09 2014 10:43:00 GMT-0500 (Hora de verano central (México))
var unAnio  = 365*24*60*60*1000; // establecer la duración que tendra la cookie 365 dias * 24 horas *60 minutos * 60 segundos * 1000 milisegundos (1 año en milisegundos)
var duracion = hoy.getTime() + unAnio; //la suma de la fecha de hoy en ms ´un año en ms, como resultado = Fri May 09 2024 10:43:00 GMT -0500 en ms
hoy.setTime(duracion);
var expira = hoy.toUTCString();
//guardamos la cookie con los datos del arreglo y que expirara dentro de un año
document.cookie = strGanadores+»;expires=»+expira;

//Para recuperar la informacion
ganadores = document.cookie.split(«,»);  //obtenemos los elementos que se separaron por coma, retorna un arreglo
for(var i=0;i<ganadores.length; i++)
{
document.getElementById(i+1).innerHTML=ganadores[i];
}

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.

[IIS] Subir archivos de mas de 4MB

En algunas ocasiones es necesario adjuntar archivos desde el cliente, ya sea para enviar mi CV (Hoja de Vida) en algún registro a un Diplomado o simplemente para asociar una imagen a mi cuenta (Avatar), anteriormente ya vimos Cómo cargar archivos en SQL Server con ASP.NET usando C#  Pero IIS tiene definido por default permitir solo el cargado de archivos menores a 4Mb, es decir archivos relativamente pequeños.

En caso de necesitar archivos de mas de 4MB, se deberá hacer lo siguiente:

En el archivo de configuración Web.config:

Agregar la etiqueta <httpRuntime>, como propiedad agregar maxRequestLength y como valor de esta propiedad, establecer como entero (Int32) el tamaño en KB del limite del búfer, es decir del tamaño máximo del archivo que se puede seleccionar.

<httpRuntime maxRequestLength="10240"/> //10 MB

Saludos

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;