Desarrollador Web
Blog dedicado al desarrollo de aplicaciones web
Ejemplo de css sprites
71487 días
by admin
in Optimizaciones
En este post vamos a ver un pequeño ejemplo de como utilizar css sprites de forma efectiva.
Para ello, primero vamos a utilizar algunas imágenes del pack de íconos gratis disponible en este link de Smashing Magazine. Una vez bajados, creamos la siguiente página en html (los íconos de social media del pack van a ser copiados a la carpeta images de nuestro proyecto para este ejemplo).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title>Ejemplo sin sriptes</title>
</head>
<body>
<img src="images/social_digg.png" alt="digg" />
<img src="images/social_facebook.png" alt="facebook" />
<img src="images/social_google.png" alt="google" />
<img src="images/social_skype.png" alt="skype" />
<img src="images/social_linked_in.png" alt="linkedin" />
<img src="images/social_twitter.png" alt="twitter" />
</body>
</html>
Esa sería nuestra página común y corriente, en donde cada imagen tiene su correspondiente archivo.
El paso siguente es dirigirnos a Css sprites generator y seleccionar los archivos que queremos juntar ( en nuestro caso serán: social_digg.png, social_facebook.png, social_google.png, social_skype.png, social_linked_in.png y social_twitter.png).
una vez seleccionadas todas las imágenes de nuestro sprite, generamos el archivo resultado con su css correspondiente haciendo click en el botón Generate!
ya estamos en condiciones de crear nuestra página utilizando sprites. Para ello baja el archivo png generado en el paso anterior y cópialo en la carpeta images del proyecto. El código de nuestra página utilizando css sprites será el siguiente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title>Ejemplo con sriptes</title>
<style>
.social {
background-image: url(images/result.png);
width: 48px;
height: 48px;
}
/*es importante escribir los nombres sin espacios .social .digg no funciona*/
.social.digg {background-position: 0px 0px;}
.social.facebook {background-position: 0px -58px;}
.social.google {background-position: 0px -116px;}
.social.skype {background-position: 0px -174px;}
.social.linkedin {background-position: 0px -232px;}
.social.twitter {background-position: 0px -290px;}
</style>
</head>
<body>
<img src="images/blank.gif" class="social digg" alt="digg" />
<img src="images/blank.gif" class="social facebook" alt="facebook" />
<img src="images/blank.gif" class="social google" alt="google" />
<img src="images/blank.gif" class="social skype" alt="skype" />
<img src="images/blank.gif" class="social linkedin" alt="linkedin" />
<img src="images/blank.gif" class="social twitter" alt="twitter" />
</body>
</html>
como se puede apreciar, lo que estamos haciendo es poner una imagen en blanco y reemplazarla mediante el atributo class. El css que nosotros deberemos generar consta de dos partes:
1- El contenedor de la imagen (en nuestro caso es .social): tiene como atributos el background-image que descargamos y al ancho y alto de cada imagen, en nuestro caso eran íconos de 48px * 48px, pero pueden ser de cualquier tamaño e inclusive pueden ser imágenes de distintos tamaños con distintos altos y anchos.
2- Cada clase particular: comenzará con el nombre del contenedor (.social) y debería seguir con un nombre que sea representativo para nosotros (en este caso se utilizó el nombre de la red social a la cual representan). Las posiciones background-position fueron generadas por css sprites, por lo que debes copiarlas y pegarlas en tu estilo css.
Como se puede apreciar, ahora para generar nuestra página web solo necesitamos bajar blank.gif y result.png. En el caso anterior fueron 6 archivos pero podrían haber sido 20 que agrupamos en uno solo. Las ventajas evidentes de usar esta técnica es que reducimos las llamadas al servidor y también creamos un archivo que es de menor tamaño que la suma de los archivos que fueron utlizados para generarlos (menos llamadas y menos ancho de banda utilizados).
Si todavía quieres optimizarlo un poco más deberías hacer lo siguiente:
1- Sacar el estilo a un archivo css externo (estos archivos se guardan en el caché del navegador, por lo cual si un usuario entra varias veces la velocidad será mayor)
2- Transformar la imagen a un formato jpg. Hay que tener cuidado con este paso, sobre todo si se utilizan transparencias ya que jpg no es apto para guardar transparencias (png y gif si lo son). La reducción de tamaño suele ser notable, en este caso pasó de 18,9KB a 7,2KB.
El código luciría de la siguiente forma
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title>Ejemplo con sriptes mejorado</title>
<link href="estilos.css" rel="stylesheet" />
</head>
<body>
<img src="images/blank.gif" class="social digg" alt="digg" />
<img src="images/blank.gif" class="social facebook" alt="facebook" />
<img src="images/blank.gif" class="social google" alt="google" />
<img src="images/blank.gif" class="social skype" alt="skype" />
<img src="images/blank.gif" class="social linkedin" alt="linkedin" />
<img src="images/blank.gif" class="social twitter" alt="twitter" />
</body>
</html>
y el archivo estilo.css sería la copia de lo que había dentro de la etiqueta
.social {
background-image: url(images/result.jpg);
width: 48px;
height: 48px;
}
.social.digg {background-position: 0px 0px;}
.social.facebook {background-position: 0px -58px;}
.social.google {background-position: 0px -116px;}
.social.skype {background-position: 0px -174px;}
.social.linkedin {background-position: 0px -232px;}
.social.twitter {background-position: 0px -290px;}
Se puede ver los ejemplos funcionando en el siguiente link:
http://ejemplos.desarrolladorweb.net/csssprites/
El ABC de los Test AB
691191 días
Hoy vamos a ver como hacer un Test AB para nuestro sitio.
Básicamente se trata de tener varias (dos o más) versiones de una misma página y queremos saber cual es la que logra nuestro objetivo con mayor efectividad. El objetivo puede ser (entre muchísimos otros):
- Registrar usuarios a nuestro sitio
- Registrar mails para nuestro newsletter
- Que el usuario compre un determinado artículo
- Que el usuario descargue nuestro programa
Resumiendo, necesitamos:
Varias versiones de la misma página
Un objetivo medible
Un grupo de usuarios distribuidos aleatoriamente
Para este microejemplo, voy a crear dos versiones de una página para que el usuario nos deje su email y se suscriba a nuestro boletín de noticias (no tienen nada de funcionalidad las páginas, simplemente un botón que reenvía a un anuncio de agradecimiento).
1- Archivos a utilizar
indexa.html: nuestra versión original
indexb.html: la variante que queremos comparar
gracias.html: el objetivo que se alcanza cuando el usuario nos deja su mail y se suscribe a nuestro newsletter ficticio
2- El segundo paso es registrarnos en Google Website Optimizer
Una vez registrados procedemos a crear un Test AB
El sitio nos pedirá que llenemos los siguientes datos:
página original: en nuestro caso indexa.html
variante/s: en nuestro caso hay solo una, que es indexb.html
conversion page: el objetivo que queremos alcanzar, en nuestro caso es gracias.html, que es la página que se muestra cuando nos dejan el mail
En el siguiente paso nos pide si nosotros o nuestro webmaster vamos a ser los encargados de insertar los scripts en las páginas, en nuestro ejemplo diremos que somos nosotros
Google nos proporciona los scripts para incluir en nuestras páginas, deberemos incluir un script en la página original (indexa.html), uno en cada varianete, en nuestro caso solo tenemos una que es indexb.html y otro en la página de conversión (gracias.html).
Incluimos los scripts en cada página (en la sección head) y procedemos a validar
Lanzamos nuestro Experimento y listo! tenemos nuestro test AB funcionando.
Ahora si entramos a la url de nuestra página original, algunos usuarios verán indexa.html y otros indexb.html
Para ver el ejemplo funcionando dirigirse a http://ejemplos.desarrolladorweb.net/abtest/indexa.html.
Espero que les haya gustado. Saludos
Valor Agregado a tu sitio con Apture
713Hoy vamos a ver como dar valor agregado a nuestro sitio con el servicio de Apture. El servicio que nos presta esta página es el de búsquedas inmediatas en el sitio, para utilizarlo, simplemente tenemos que marcar una palabra, posar el puntero del mouse sobre la misma y Apture buscará por nosotros las entradas en google más relevantes, junto con videos e imágenes.
¿Cómo instalarlo?
La instalación es muy sencilla. Simplemente nos damos de alta en https://www.apture.com/signup/ , completamos los datos que nos piden y luego nos devuelve un código que deberemos pegar en el body de nuestro sitio (recomendado que sea antes de la etiqueta de cierre </body> de modoque deje la carga el final)
Espero que les haya gustado. Saludos
Algunas optimizaciones para tu web
700193 días
En este post vamos a ver algunas de las optimizaciones que se pueden hacer a un sitio web. Básicamente se trata una utilización más eficiente de los recursos, ya sea reduciendo las llamadas al servidor como también puede ser reducir los espacios en blanco.
1- ¿Tienes muchas imágenes pequeñas?
Solución: Utiliza css sprites.
Css sprites es una técnica en donde se unen varias imágenes en una sola, luego mediante css y la manipulación del atributo background-position se muestra una zona de la imagen unida. Existen webs como http://csssprites.com/ que nos facilitan nuestro trabajo, simplemente seleccionamos las imagenes que queremos unir y luego el programa se encarga de generar una sola y nos devuelve el código css que debemos utilizar
Para demostrar la optimización, voy a insertar unas caputras de los tiempos y cantidad de llamadas al servidor utilizando css sprites y sin utilizarlo
Con Css sprites:
[box] Request Count: 2 Bytes Sent: 876 (headers:876; body:0) Bytes Received: 5.474 (headers:542; body:4932) ACTUAL PERFORMANCE ————– Requests started at: 15:02:13.292 Responses completed at: 15:02:14.055 Aggregate Session duration: 00:00:00.714 Sequence (clock) duration: 00:00:00.7630436 TCP/IP Connect duration: 175ms RESPONSE CODES ————– HTTP/200: 2 RESPONSE BYTES (by Content-Type) ————– image/png: 3.987 text/html: 945 ~headers~: 542 [/box]
Sin Css Sprites
[box] Request Count: 9 Bytes Sent: 4.213 (headers:4213; body:0) Bytes Received: 9.341 (headers:2433; body:6908) ACTUAL PERFORMANCE ————– Requests started at: 14:57:03.084 Responses completed at: 14:57:04.279 Aggregate Session duration: 00:00:02.285 Sequence (clock) duration: 00:00:01.1950684 TCP/IP Connect duration: 553ms RESPONSE CODES ————– HTTP/200: 9 RESPONSE BYTES (by Content-Type) ————– image/png: 5.934 ~headers~: 2.433 text/html: 974 [/box]
Como se puede observar, no solo obtuvimos una reducción considerable del tiempo de carga, sino que también pasamos de hacer 9 peticiones (sin css sprites) a 2 peticiones, además la imagen generada ocupa 3987 bytes contra 5934 de las imágenes sueltas.
Puedes ver los ejemplos:
2- ¡Agrega un favicon!
Un favicon no solo nos permite diferenciarnos del resto de las páginas, sino que el navegador siempre hace búsqueda de este elemento y en caso de no tenerlo no devuelve un código HTTP que no se encontró el elemento, lo que es lisa y llanamente un desperdicio de recursos
Existen muchas páginas para generar favicons como esta
3- Reduce los espacios en blanco
Tanto en archivos javascript como en los css, el tener muchos espacios en blanco es un desperdicio de recursos y de ancho de banda a la hora de transferirlos. Existen herramientas como cssoptimiser que nos hacen el trabajo más liviano, busca la herramienta que sea más adecuada a tus gustos e integrala a tu proceso de desarrollo (antes de poner un sitio en producción realiza todas las optimizaciones).
3.1- Utiliza Google Closure Compiler
Google Closure Compiler nos permite optimizar nuestros archivos javascript de diferentes formas, ya sea quitando los espacios en blanco, con una optimización simple o con una avanzada. Quitar espacios en blanco no merece muchas explicaciones, la optimización simple además de quitar los espacios en blanco, reduce el nombre de las variables, por ejemplo si nosotros tenemos var miVariableConNombreBonito nos la reduce a un simple var a en todos los lugares donde aparezca. La optimización avanzada va más allá, pero hay que usarla con cuidado, ya que no siempre produjo los resultados deseados en mis pruebas.
Si no quieres bajar el programa, puedes utilizarlo online desde este enlace
[box type="info"] Siempre es conveniente tener un archivo javascript con todos los chiches (comentarios, nombres de variables, etc) para el desarrollo y otra versión optimizada para cuando nuestro sitio se encuentra en producción (puede ser miscript.min.js)[/box]
4- Utiliza todas las herramientas que tengas a mano para realizar optimizaciones
En un post anterior vimos como utilizar DOM Monster. Pero existen cientos de alternativas (gratis, pagas, para descargar y para usar on line) que nos pueden ayudar a mejorar nuestro sitio. Una de mis favoritas es Site Load Test. Es online, es gratuita y nos informa acerca de muchas optimizaciones que se le pueden realizar a nuestro sitio, además realiza un test de carga para hacernos saber si nuestro sitio se encuentra dentro de los parámetros normales de funcionamiento
5- Prueba tu sitio en diferentes navegadores y resoluciones
Si tienes un poco de experiencia en desarrollo web, seguramente te ha pasado de que una página que se veía excelente en un navegador en otro (casi seguro que Internet Explorer) se veía diferente o algunas funcionalidades no estaban disponibles. Para esto podemos en primer lugar, instalar los navegadores más conocidos en nuestra PC, pero además podemos hacer uso de páginas como Browser Shots que nos muestra una extensa lista de browsers en diferentes sistemas operativos para que seleccionemos y luego (mientras más navegadores se elijan, más va a tardar) nos muestra capturas de como se ve en cada uno.
Para minimizar los errores de funcionamiento podemos echar mano de frameworks como jQuery, cuyos desarrolladores se encargan de hacer testeos cross-browsers
Bueno, ya vimos algunas de las muchas optimizaciones que se pueden realizar a nuestro sitio, voy a tratar de seguir con este tema en post siguientes. Espero que les haya gustado.
DOM Monster te tira la posta
697195 días
Navegando por la red encontré esta útil herramienta para analizar sitios web. Se trata de DOM Monster y no requiere instalar archivos ni dirigirse a ninguna página en especial para hacer el análisis. Simplemente tenemos que entrar en el siguiente link y arrastrar el elemento que en la imagen a continuación sale dentro de un rectángulo rojo a nuestros marcadores
Una vez que lo tenemos en los marcadores, nos dirigimos a la página web que queremos analizar y buscamos dentro de los marcadores a DOM Monster para seleccionarlo
Una vez que lo seleccionamos, nos aparecerá una ventana emergente donde nos dará información como:
- espacios en blanco
- cantidad de iframes utilizados
- cantidad de javascript inline
- una gran cantidad de tips para mejorar la performance
Espero que les sirva.
Saludos
Conversión de Divisas
713195 días
En este post vamos a ver como crear un conversor de divisas en javascript, para ello vamos a hacer uso de la Open Source Exchange Rates API.
Me tomé el trabajo de convertir en un xml la tabla de monedas del estandar ISO 4217 que figura en Wikipedia
1- Estructura de los directorios
datos : contiene el archivo xml que se usa para cargar los combos de las monedas
js: contiene el plugin encargado de realizar la conversión
index.html: el archivo de ejemplo
2- Aspectos relevantes
Haremos uso de la API mencionada al principio, que devuelve un archivo json, asignaremos los valores predeterminados del plugin
<script type="text/javascript">
$.getJSON('http://openexchangerates.org/latest.php', function(data) {
fx.rates = data.rates;
fx.base = data.base;
fx.settings = {
from: "USD",
to: "GBP"
}
});
</script>
Usaremos jquery para cargar los combos de monedas, en nuestro código html tienen los id monedaOrigen y monedaDestino.
<script>
$(document).ready(function(){
$.ajax({
type: "GET",
url: "datos/monedas.xml",
dataType: "xml",
success: function(xml) {
var selectOrigen = $('#monedaOrigen');
var selectDestino = $('#monedaDestino');
$(xml).find('moneda').each(function(){
var codigo = $(this).find('cod').text();
var moneda=$(this).find('mon').text();
selectOrigen.append("<option value='" + codigo +"'>" + moneda + "</option>");
selectDestino.append("<option value='" + codigo +"'>" + moneda + "</option>");
});
selectOrigen.children(":first").text("seleccione una moneda").attr("selected",true);
selectDestino.children(":first").text("seleccione una moneda").attr("selected",true);
}
});
});
</script>
Creamos el código html mínimo indispensable para llevar a cabo la operación, dos combos con las monedas de origen y destino y un botón para realizar la conversión. Tambíen añadimos un textbox para el monto que queremos convertir y un botón que lleve a cabo la operación. Por último también agregaremos una zona en donde se vaya mostrando el resultado de las conversiones realizadas
<body> <div id="page-wrap"> <h1>Conversión de monedas</h1> <form> <select id="monedaOrigen"> <option>Cargando</option> </select> <select id="monedaDestino"> <option>Cargando</option> </select> <br /> <label for="txtCantidad"> Cantidad a Convertir </label> <input type="text" id="txtCantidad" /> <button id="btnConvertir">Convertir</button> <br /> </form> </div> <div id="resultado"> </div>
Por último, vamos a programar la funcionalidad de la conversión, para ello usaremos el método bind y el evento click del botón
<script>
$('#btnConvertir').bind('click', function() {
var monedaOrigen=$('#monedaOrigen').val();
var monedaDestino=$('#monedaDestino').val() ;
var cantidad = parseFloat($('#txtCantidad').val());
var resultado=fx.convert(1, {from: $.trim(monedaOrigen) , to: $.trim(monedaDestino) });
var conversion=fx.convert(cantidad, {from: $.trim(monedaOrigen) , to: $.trim(monedaDestino) });
var textoAMostrar=$('#txtCantidad').val().toString() + " " + $('#monedaOrigen option:selected').text() + " equivalen a " + conversion.toString() + " " + $('#monedaDestino option:selected').text();
$("<p>" + textoAMostrar + "</p>").appendTo("#resultado");
return false;
});
</script>
Como siempre podemos ver el ejemplo funcionando aquí y descargarlo de este enlace.
[box type="info"] Si al presionar el botón convertir los combos vuelven al primer elemento quiere decir que no se encontró una de las monedas en la API[/box]
[box] Para ver el ejemplo funcionando localmente deberemos hacerlo a través de Apache u otro servidor web, ya que de otra forma se bloqueará el xml por cuestiones de seguridad del navegador[/box]
Subir Archivos a tu web
690196 días
En este post vamos a ver como subir archivos a tu web de forma fácil con la herramienta Plupload. Este ejemplo, como de costumbre, es lo mínimo indispensable que se puede hacer, para ver todas las opciones que nos proporciona puede remitirse a la página web del creador.
1- Estructura de directorios
js: contiene el componente y todos sus archivos (incluye las extensiones y archivos de idioma del mismo)
uploads: almacenará los archivos subidos
dump.php e index.php: serán los encargados de procesar las subidas
index.html: el archivo de ejemplo
2- Creación de la página para subidas
En el head de nuestra página agregaremos los archivos javascript a utilizar, algunos pueden evitarse si no queremos utilizar la opción Silverlight por ejemplo
<script type=”text/javascript” src=”http://bp.yahooapis.com/2.4.21/browserplus-min.js”></script>
<script type="text/javascript" src="js/plupload.js"></script> <script type="text/javascript" src="js/plupload.gears.js"></script> <script type="text/javascript" src="js/plupload.silverlight.js"></script> <script type="text/javascript" src="js/plupload.flash.js"></script> <script type="text/javascript" src="js/plupload.browserplus.js"></script> <script type="text/javascript" src="js/plupload.html4.js"></script> <script type="text/javascript" src="js/plupload.html5.js"></script> <script type="text/javascript" src="js/i18n/es.js"></script>
Creamos los controles básicos para poder realizar las subidas, en este caso será un contenedor div, que albergará otro contenedor div encargado de listar los archivos y dos links, uno para seleccionar los archivos y otro para subir los seleccionados
<div id="container"> <div id="filelist">No se encontraron extensiones.</div> <br /> <a id="pickfiles" href="javascript:;">[Seleccionar Archivos]</a> <a id="uploadfiles" href="javascript:;">[Subir Archivos]</a> <br /> </div>
Por último crearemos en el body de nuestra página los controladores del componente:
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
var uploader = new plupload.Uploader({
runtimes : 'gears,html5,flash,silverlight,browserplus',
browse_button : 'pickfiles',
container: 'container',
max_file_size : '500kb',
url : 'upload.php',
resize : {width : 800, height : 600, quality : 95},
flash_swf_url : 'js/plupload.flash.swf',
silverlight_xap_url : 'js/plupload.silverlight.xap',
filters : [
{title : "Archivos de Imágenes", extensions : "jpg,gif,png"},
]
});
uploader.bind('Init', function(up, params) {
$('filelist').innerHTML = "<div>Método utilizado: " + params.runtime + "</div>";
});
uploader.bind('FilesAdded', function(up, files) {
for (var i in files) {
$('filelist').innerHTML += '<div id="' + files[i].id + '">' + files[i].name + ' (' + plupload.formatSize(files[i].size) + ') <b></b></div>';
}
});
uploader.bind('UploadProgress', function(up, file) {
$(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
});
$('uploadfiles').onclick = function() {
uploader.start();
return false;
};
uploader.init();
</script>
De este código podemos comentar lo siguiente:
Se utilizarán los runtimes de acuerdo al orden en que se encuentren
runtimes : ‘gears,html5,flash,silverlight,browserplus’,
en caso de tener gears disponible lo utilizará, sino buscará si nuestro browser tiene soporte a html5 para usarlo y así sucesivamente
el disparador del evento de selección de archivos será pickfiles
browse_button : ‘pickfiles’,
El tamaño máximo de archivo será de 500kb (no se procesarán archivos de un tamaño mayor)
max_file_size : ’500kb’,
El encargado de procesar los archivos subidos será upload.php
Las imágenes será redimensionadas a un tamaño máximo de 800 pixels de ancho o 600 de alto con una calidad del 95%
resize : {width : 800, height : 600, quality : 95},
Voila, tenemos nuestra subida de múltiples archivos que además nos permite:
- filtrar por tipo
- redimensionar en el lado del cliente
- limitar el tamaño máximo
Como siempre, podemos ver el ejemplo funcionando en este link
También podemos bajar el archivo de ejemplo de aquí
[box type="info"] El componente Plupload está publicado bajo licencia GPL v2. Antes de usarlo chequear si es compatible con el uso que le queremos dar.[/box]
Creación de un Slider
685En este post vamos a crear un slider muy sencillo para usar en cualquier tipo de página web.
El plugin a utilizar se llama FlexiSlider y se puede adquirir en la siguiente dirección
1- Estructura de carpetas
css: contiene el css del slider junto con la carpeta themes que almacena las imagenes propias del plugin
images: contiene las imagenes que vamos a usar para mostrar en los slides
js: contine el plugin, también puede almacenar el archivo de jquery, pero en este caso lo sacaremos del cdn de google
2- Creacíon del slide
Lo primero que debemos hacer es poner las referencias en el head de nuestra página a los archivos que vamos a utilizar. En este caso necesitamos el css del plugin, el framework de jquery y el archivo de javascript de FlexiSlider
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <script src="js/jquery.nivo.slider.pack.js"></script>
Luego necesitamos crear un div contenedor (en nuestra página puede ser el mismo que alberga el contenido principal) y dentro del mismo otro contenedor div al que le asignaremos la clase flexslider. Dentro del contedor con la clase flexislider crearemos una lista con la clase slides, cada item de la lista será un slide de nuestro slider, por lo cual cada li deberá contener una imagen con el atributo src que haga referencia a la imagen que queremos mostrar
<div> <ul> <li> <img src="images/slide1.jpg" /> </li> <li> <img src="images/slide2.jpg" /> </li> <li> <img src="images/slide3.jpg" /> </li> <li> <img src="images/slide4.jpg" /> </li> </ul> </div> </div>
Por último, pero no menos importante, deberemos activar el plugin, notese que en este caso lo haremos en el evento load del documento, a diferencia de las galerías que lo hacían en ready. La diferencia entre los dos es que load espera a que estén descargados todos los elementos del DOM antes de ejecutarse. Agregaremos el siguiente código en el head de nuestra página:
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
También creamos un estilo para el contenedor, de modo que nos quede centrado dentro de la página, para lo cual incluiremos en nuestro head (o en un archivo css externo ) el código para hacerlo más presentable
<style type="text/css">
#contenedor{width: 80%; max-width: 800px; margin: 0 auto;}
</style>
Podemos ver el resultado en el siguiente enlace
Para descargar los archivos del ejemplo, haga click aquí
[box type="info"] Este ejemplo es lo mínimo que se puede hacer con el plugin, para consultar todas las opciones disponibles consulte la página web del creador [/box]
Creación de Galerías con Jquery
686En este ejemplo vamos a crear una galería usando dos plugins de jquery bastante conocidos, se trata de ColorBox y PrettyPhoto.
1- Estructura de los directorios
css: Contiene los archivos de estilo de las galerías.
js: Contiene los archivos de los plugins
images: Almacena las fotos, dentro de fullscreen están las imágenes que se muestran al hacer click en la miniatura, enthumbnails están las miniaturas. La carpeta PrettyPhoto es propia del plugin.
2 – Creación de la galería con ColorBox
El primer paso a realizar es incluir los archivos necesarios en el head de la página, en este caso necesitamos el archivo de jquery, el plugin de colorbox y su css correspondiente, es importante aclarar que debemos cargar jquery antes que colorbox (ya que colorbox usa jquery).
<link media="screen" rel="stylesheet" href="css/colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script src="js/jquery.colorbox-min.js"></script>
También creamos la lista de imágenes que va a contener la galería, se trata de elementos <a> que tienen el valor de href a la imagen destino (grande) y dentro del mismo mostraremos un elemento <img> que tenga como valor de src la ruta a nuestra miniatura
<a class="gal1" href="images/fullscreen/1.jpg" title="Imagen1."><img src="images/thumbnails/t_1.jpg" alt="imagen1" /> </a> <a class="gal1" href="images/fullscreen/2.jpg" title="Imagen2."><img src="images/thumbnails/t_2.jpg" alt="imagen2" /></a> <a class="gal1" href="images/fullscreen/2.jpg" title="Imagen3."><img src="images/thumbnails/t_3.jpg" alt="imagen3" /></a>
Por último, deberemos activar el plugin, para ello dentro delde nuestra página crearemos el siguiente código:
<script type="text/javascript">
$(document).ready ( function(){
$(".gal1").colorbox({rel:'gal1'});
})
</script>
[box type="info"]
Notese que los elementos “a” tienen una clase con el mismo nombre que utilizamos para activar el plugin, en este caso se llama gal1 pero lo podemos cambiar por el que nos parezca, inclusive se pueden crear diferentes galerías agrupando los elementos “a” con diferentes nombres de acuerdo al grupo y luego activando cada galería desde el $(document).ready de la forma: $(“.clasea”).colorbox({rel:’clasea’});
$(“.claseb”).colorbox({rel:’claseb’});[/box]
3- Creación de la galería con PrettyPhoto
Primero cargamos en el head los archivos necesarios
<link media="screen" rel="stylesheet" href="css/prettyPhoto.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
Luego, dentro del body de nuestro documento, creamos una lista <ul> y le asignamos la clase gallery clearfix. Por cada elemento que vayamos a mostrar usaremos un <li> que contenga un <a> con el href que tenga como destino la imagen en tamaño grande, dentro de <a> creamos también un elemento <img> con el valor del atributo src que referencie a la imagen en tamaño reducido.
<ul class="gallery clearfix"> <li><a href="images/fullscreen/1.jpg" rel="prettyPhoto[gallery1]" title="Imagen1."><img src="images/thumbnails/t_1.jpg" alt="imagen1" /> </a></li> <li><a href="images/fullscreen/2.jpg" rel="prettyPhoto[gallery1]" title="Imagen2."><img src="images/thumbnails/t_2.jpg" alt="imagen2" /></a></li> <li><a href="images/fullscreen/3.jpg" rel="prettyPhoto[gallery1]" title="Imagen3."><img src="images/thumbnails/t_3.jpg" alt="imagen3" /></a></li> </ul>
Una vez creada nuestra lista procedemos a activar el plugin desde un script en el head de nuestro documento de la siguiente forma:
<script type="text/javascript">
$(document).ready ( function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
})
</script>
[box type="info"] Para crear diferentes galerías deberemos agrupar los diferentes “a” de acuerdo a cada conjunto que se quiera mostrar haciendo variar el valor dentro de los corchetes en el atributo rel[/box]
Para ver el ejemplo en funcionamiento: Click Aquí
Para descargar los ejemplos: Click Aquí