CelulaWeb http://www.celulaweb.net Tecnología, Diseño, Desarrollo Web y más Thu, 17 May 2012 15:17:09 -0500 http://www.celulaweb.net es <![CDATA[Añadir líneas de tiempo a tus noticias con Timeline]]> http://www.celulaweb.net/2012/04/02/anadir-lineas-de-tiempo-noticias-con-timeline/ http://www.celulaweb.net/2012/04/02/anadir-lineas-de-tiempo-noticias-con-timeline#comentarios Mon, 02 Apr 2012 09:41:03 -0500 MijT http://www.celulaweb.net/2012/04/02/anadir-lineas-de-tiempo-noticias-con-timeline#comentarios
Como su nombre lo indica, Timeline es un plugin para jQuery que nos permite agregar líneas de tiempo interactivas a nuestras noticias, permitiéndole a los usuarios elegir ver los contenidos haciendo clic en los elementos del timeline o navegando a través de la barra de contenido.

Las noticias se ordenan cronológicamente, pudiéndose navegar sobre ellas haciendo clic en los botones Atrás o Adelante o simplemente arrastrando el timeline hacia la izquierda o derecha hasta encontrar la noticia de nuestro interés.

Los datos de las noticias pueden obtenerse mediante JSON o Google Spreadsheets, además, puede mostrar datos de servicios como Twitter, YouTube, Flickr, Vimeo, Google Maps y SoundCloud.

Configuración Básica

<!DOCTYPE html>
<html>
<head>
<title>Timeline</title>
<!-- CSS -->
<link href="css/timeline.css" rel="stylesheet">
<!-- JavaScript -->
<script type="text/javascript" src="js/jquery-min.js"></script>
<script type="text/javascript" src="js/timeline-min.js"></script>
<!-- Iniciamos el script -->
<script type="text/javascript">
    $(document).ready(function() {
        var timeline = new VMM.Timeline();
        timeline.init("kitchen-sink.json");
    });
</script>
</head>
<body>
    <div id="timeline"></div>
</body>
</html>

Enlace: Timeline

César Aquino para CelulaWeb
Publicado el: 2 de Abr. del 2012 a las 09:41
Comenta este post | Enlace permamente al post

]]> <![CDATA[Camera: Plugin jQuery para crear sliders sensibles]]> http://www.celulaweb.net/2012/03/09/camera-plugin-jquery-sliders-sensibles/ http://www.celulaweb.net/2012/03/09/camera-plugin-jquery-sliders-sensibles#comentarios Fri, 09 Mar 2012 08:44:24 -0600 MijT http://www.celulaweb.net/2012/03/09/camera-plugin-jquery-sliders-sensibles#comentarios
Camera es un plugin para jQuery que permite crear sliders de contenidos con cualquier elemento HTML (texto, imágenes o videos), además es compatible con diseños sensibles (Responsive Design) y dispositivos con pantalla táctil.

Los elementos del slider pueden navegarse mediante los botones "Anterior-Siguiente", bullets, o botones de control (Play y Pause).

El plugin es personalizable tanto en diseño (vía CSS, también incluye skins) como en funcionalidad.

Configuración Básica:

Añadimos el siguiente código entre las etiquetas <head> y </head>:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/camera.js"></script>
<script type="text/javascript">
    jQuery('#content_imgs').camera(); // iniciamos el script, método básico
</script>

El Siguiente código irá dentro del <body>:

<div class="content_imgs">
    <div data-src="images/image_1.jpg"></div>
    <div data-src="images/image_1.jpg"></div>
    <div data-src="images/image_2.jpg"></div>
</div>

En la web del plugin podrán encontrar la documentación con todas las opciones disponibles para su personalización.

Enlace: Camera

César Aquino para CelulaWeb
Publicado el: 9 de Mar. del 2012 a las 08:44
Comenta este post | Enlace permamente al post

]]> <![CDATA[PageScroller: Plugin jQuery para crear scrollers avanzados]]> http://www.celulaweb.net/2012/02/22/pagescroller-plugin-jquery-scrollers/ http://www.celulaweb.net/2012/02/22/pagescroller-plugin-jquery-scrollers#comentarios Wed, 22 Feb 2012 08:41:39 -0600 MijT http://www.celulaweb.net/2012/02/22/pagescroller-plugin-jquery-scrollers#comentarios
Como su nombre lo dice, PageScroller es un plugin para jQuery que nos permite crear scrollers avanzados para desplazarnos en nuestra web de forma más ágil.

Es un plugin bastante flexible, puede integrarse en cualquier página fácilmente, creándose automáticamente la navegación que se encuentra en las barras laterales o en la parte superior.

Al hacer clic en cada elemento del menú de navegación hará un efecto de scrolling llevando al usuario a la sección correspondiente. También puede mostrar flechas Arriba y Abajo para navegar a través de las secciones una por una.

PageScroller puede personalizarse de varias formas, incluyendo la velocidad de desplazamiento y el tipo de navegación.

Configuración básica:

Colocar el siguiente código entre las etiquetas <head> y </head>:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/pagescroller.js"></script>

<!-- Iniciamos el script -->
<script type="text/javascript">
    $(document).ready(function(){
        // Declaramos una variable con nuestro menú de navegación
        var navLabel = new Array('Inicio', 'Portafolio', 'Contactar');
        $('#main').pageScroller({ navigation: navLabel });
    });
</script>

Estructura HTML:

<div id="main">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>

Si deseas usar un IDname y/o className diferente, en el script tendrás que hacer el siguiente cambio:

$('#tu_id').pageScroller({ navigation: navLabel, sectionClass: 'tu_CSS_class' });

En la documentación encontrarás las diferentes opciones de configuración con las que cuenta este plugin.

Enlace: PageScroller

César Aquino para CelulaWeb
Publicado el: 22 de Feb. del 2012 a las 08:41
Comenta este post | Enlace permamente al post

]]> <![CDATA[Sequence: Otro plugin jQuery para crear sliders]]> http://www.celulaweb.net/2012/02/19/sequence-plugin-jquery-sliders/ http://www.celulaweb.net/2012/02/19/sequence-plugin-jquery-sliders#comentarios Sun, 19 Feb 2012 10:46:00 -0600 MijT http://www.celulaweb.net/2012/02/19/sequence-plugin-jquery-sliders#comentarios
Sequence es un plugin para jQuery que permite crear sliders de contenido, ideal para mostrar posts destacados en un blog, es fácil de configurar, como dicen en su web oficial, no es necesario tener ampliso conocimientos de jQuery.

Entre sus principales características, cuenta con estilos de transición creados con CSS3, es compatible con todos los navegadores modernos, también es compatible con layouts sensibles y con dispositivos táctiles.

Es de código abierto, con lo que puedes editarlo añadiéndole más funciones.

Configuración Básica:

Colocar el siguiente código entre las etiquetas <head> y </head>:

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/sequence.js"></script>

<!-- Iniciando script -->
<script type="text/javascript"> 
    $(document).ready(function(){
        var sequence = $("#sequence").sequence(options);
    }
</script>

Con el siguiente código, crearemos la estructura de nuestro slider:

<div id="sequence">
    <ul>
        <li>
            <!--Frame 1 content here-->
        </li>
        <li>
            <!--Frame 2 content here-->
        </li>
        <li>
            <!--Frame 3 content here-->
        </li>
    </ul>
</div>

Sequence está muy bien documentado y en su web podrás ver algunas demos.

Enlace: Sequence

César Aquino para CelulaWeb
Publicado el: 19 de Feb. del 2012 a las 10:46
Comenta este post | Enlace permamente al post

]]> <![CDATA[bgStretcher, Slider con backgrounds adaptables]]> http://www.celulaweb.net/2012/02/09/bgstretcher-slider-backgrounds-adaptables/ http://www.celulaweb.net/2012/02/09/bgstretcher-slider-backgrounds-adaptables#comentarios Thu, 09 Feb 2012 08:08:51 -0600 MijT http://www.celulaweb.net/2012/02/09/bgstretcher-slider-backgrounds-adaptables#comentarios
bgStretcher, es un plugin para jQuery que permite crear un slider con backgrounds adaptables, es decir, las imágenes de fondo se ajustarán automáticamente a la resolución de la pantalla.

Puede usarse con una sola imagen de fondo (lo más común), o con varias imágenes que irán visualizándose una tras otra como una diapositiva.

Instalación:

Una vez descargados los archivos necesarios, en el archivo HTML donde desees usar el script agrega el siguiente código entre las etiquetas <head> y </head>:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bgstretcher.js"></script>
<link rel="stylesheet" href="bgstretcher.css" />

Luego coloca el siguiente código que hará funcionar el script:

<script type="text/javascript">
    $(document).ready(function(){
        $('BODY').bgStretcher({
            images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg'], imageWidth: 1024, imageHeight: 768
        });
    });
</script>

El código anterior insertará las imágenes de fondo en el body, pero si deseas que tus imágenes de fondo se añadan en un <div>, usa el siguiente código:

<script type="text/javascript">
    $(document).ready(function(){
        $('.class_ejemplo').bgStretcher({
            images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg'], imageWidth: 1024, imageHeight: 768
        });
    });
</script>

Finalmente, agregas el siguiente código dentro del body:

<div class="class_ejemplo">
    <!-- Aquí el contenido... -->
</div>

Con eso ya tendrás tu script listo para funcionar, puedes ver la siguiente demostración, si cambias la resolución de la ventana del navegador, te darás cuenta cómo las imágenes van ajustándose automáticamente al tamaño establecido.

bgStretcher es compatible con los siguientes navegadores:

• Internet Explorer 6+
• Mozilla Firefox 2+
• Opera 9+
• Safari
• Google Chrome

Su código no es obstrusivo, podrás usarlo sin problemas junto a otros scripts que tengas funcionando, también puedes personalizarlo a tu gusto, en su web encontrarás la documentación necesaria para ello.

Enlace: bgStretcher

César Aquino para CelulaWeb
Publicado el: 9 de Feb. del 2012 a las 08:08
Comenta este post | Enlace permamente al post

]]> <![CDATA[jQuery Collapse: Plugin para expandir y contraer contenidos]]> http://www.celulaweb.net/2012/01/23/jquery-collapse-plugin-expandir-contraer-contenidos/ http://www.celulaweb.net/2012/01/23/jquery-collapse-plugin-expandir-contraer-contenidos#comentarios Mon, 23 Jan 2012 10:04:14 -0600 MijT http://www.celulaweb.net/2012/01/23/jquery-collapse-plugin-expandir-contraer-contenidos#comentarios
jQuery Collapse es un ligero plugin (sólo pesa 1KB comprimido) para este popular framework que permite expandir y contraer contenidos, bastante útil si deseamos ahorrar algo de espacio en nuestro layout.

Es sencillo de implementar, y lo más interesante es que es tiene soporte para cookies, lo que permite que al expandir o contraer un contenido, este quedará grabado y se mostrará tal cual, la próxima vez que se acceda al sitio.

jQuery Collapse es compatible con los siguientes navegadores:

• IE 6+
• Firefox 3+
• Chrome 5+
• Safari 4+
• Opera 10+

En su web podrás encontrar la documentación necesaria para hacerlo funcionar, además de las opciones que ofrece.

Enlace: jQuery Collapse

César Aquino para CelulaWeb
Publicado el: 23 de Ene. del 2012 a las 10:04
Comenta este post | Enlace permamente al post

]]> <![CDATA[jQ.Mobi: Framework JavaScript y HTML5 para dispositivos móviles]]> http://www.celulaweb.net/2012/01/16/jq-mobi-framework-javascript-html5-dispositivos-moviles/ http://www.celulaweb.net/2012/01/16/jq-mobi-framework-javascript-html5-dispositivos-moviles#comentarios Mon, 16 Jan 2012 06:31:45 -0600 MijT http://www.celulaweb.net/2012/01/16/jq-mobi-framework-javascript-html5-dispositivos-moviles#comentarios
jQ.Mobi es un framework JavaScript y HTML5 para dispositivos móviles que se define a si mismo como una reescritura de jQuery, pero más ligera y veloz; que se centra en proporcionar una gran experiencia en los dos sistemas operativos móviles dominantes (iOS y Android), con un código más eficiente.

En comparación con jQuery Mobile (24KB), jQ.Mobi es mucho más ligero, ya que sólo pesa 3.5KB (comprimido) y cubre la mayoría de características con la misma sintaxis.

jQ.Mobi también se jacta de ser mucho más veloz que jQuery Mobile, se menciona que es 3 veces más rápido en Android y 2.2 veces más rápido en iOS. Además, también cuenta con una biblioteca de interfaz de usuario (también de menor tamaño), e incluye plugins para las interfaces e interacciones móviles.

A continuación les dejo con un video introductorio de este interesante framework:


Enlace: jQ.Mobi

César Aquino para CelulaWeb
Publicado el: 16 de Ene. del 2012 a las 06:31
Comenta este post | Enlace permamente al post

]]> <![CDATA[Revolver.js: Creando sliders personalizables con jQuery y Mootools]]> http://www.celulaweb.net/2012/01/10/revolver-js-sliders-personalizables-jquery-mootools/ http://www.celulaweb.net/2012/01/10/revolver-js-sliders-personalizables-jquery-mootools#comentarios Tue, 10 Jan 2012 12:03:07 -0600 MijT http://www.celulaweb.net/2012/01/10/revolver-js-sliders-personalizables-jquery-mootools#comentarios
Revolver.js es otra interesante opción para crear sliders de contenidos. Es un plugin para jQuery y Mootools, que dispone además de una API con las funciones más comunes de un slider.

Tiene diferentes tipos de transiciones, además, cuenta con funciones para los elementos de navegación (Primero, Siguiente, Último, y para reproducción automática (Play, Stop y Pause)).

Revolver.js es muy fácil de usar, su versión comprimida pesa sólo 4.5 KB. Está muy bien documentado, y en su web oficial podrás encontrar algunas demos que te muestran su funcionamiento.

Enlace: Revolver.js

César Aquino para CelulaWeb
Publicado el: 10 de Ene. del 2012 a las 12:03
Comenta este post | Enlace permamente al post

]]> <![CDATA[28 Plugins de jQuery para Diseño Web Sensible]]> http://www.celulaweb.net/2012/01/10/28-plugins-jquery-diseno-web-sensible/ http://www.celulaweb.net/2012/01/10/28-plugins-jquery-diseno-web-sensible#comentarios Tue, 10 Jan 2012 08:28:45 -0600 MijT http://www.celulaweb.net/2012/01/10/28-plugins-jquery-diseno-web-sensible#comentarios
Ahora que el uso de dispositivos móviles para acceder a Internet es cada vez más común, hay un nuevo reto para los diseñadores y desarrolladores web, hacer que sus trabajos se vean bien en los distintos dispositivos existentes; como smartphones y tablets, además de los de escritorio.

En principio puede ser un trabajo algo complicado, pero siempre habrá por ahí gente talentosa creando recursos para simplificar este trabajo, y facilitarnos la vida. Si usas jQuery. Esta recopilación de 28 plugins que comparten en Web Resources Depot te serán de gran utilidad:

Esta recopilación contiene plugins para layouts, galerías de imágenes, navegación y todo lo que puedas necesitar para empezar ha realizar un diseño web sensible. Aquí les dejo tres ejemplos:

1. jQuery Masonry


2. Galería de imágenes sensible


3. Montaje automático de imágenes


Enlace: 28 High-Quality jQuery Plugins For Building Responsive Websites

César Aquino para CelulaWeb
Publicado el: 10 de Ene. del 2012 a las 08:28
Comenta este post | Enlace permamente al post

]]> <![CDATA[33 Tutoriales de jQuery y CSS3]]> http://www.celulaweb.net/2012/01/06/33-tutoriales-jquery-css3/ http://www.celulaweb.net/2012/01/06/33-tutoriales-jquery-css3#comentarios Fri, 06 Jan 2012 11:06:26 -0600 MijT http://www.celulaweb.net/2012/01/06/33-tutoriales-jquery-css3#comentarios
Esta es una recopilación bastante interesante que hicieron hace poco en Spyre Studios, se trata de 33 tutoriales de jQuery y CSS3 en los que se explican cómo realizar diferentes tipos de trabajos usando el popular framework y CSS3.

Podemos encontrar desde galerías de imágenes, efectos sobre imágenes, animaciones, etc. Aquí les dejo tres ejemplos:

1. Slider de imágenes con thumbnail para vista previa


2. <Select> dependientes con AJAX


3. Tooltips sobre mapas con CSS3 y jQUery


Enlace: 33 Fresh jQuery And CSS3 Tutorials

César Aquino para CelulaWeb
Publicado el: 6 de Ene. del 2012 a las 11:06
Comenta este post | Enlace permamente al post

]]> } ?>