Supersized es un script que permite crear presentaciones de diapositivas de fondo y ha pantalla completa, todo bajo la librería jQuery.

Es versión de Supersized tiene temas, vínculos directos de diapositivas, precarga dinámica, y una API.

Características

• Cambia el tamaño de las imágenes para llenar completamente el navegador, manteniendo obvio la dimensión de la imagen
• Ciclos de fondos a través de diapositivas con transiciones y precarga dinámica
• Posee la versión base disponible para aquellos que sólo quieren cambiar el tamaño del fondo.
• Controles de navegación con soporte para teclado
• Integración con Flickr – tirar fotos del usuario, establecido o grupo
• Dirígete a la página del proyecto para todos los detalles.

Nuevo en Supersized 3.2

• Completa reescritura del guión para imágenes super grandes.
• Más opciones, incluida la capacidad para prevenir las diapositivas que se corten en carga.
• Puedes ahora enlazar directamente a las diapositivas
• API que te permite llamar a funciones de forma directa (por ejemplo, el efecto / pausa, siguiente, anterior, y saltar directamente a una diapositiva)
• Los archivos de los themes están separados de los archivos de base, lo que hará que las actualizaciones sean mucho más fácil. El Shutter theme está incluido en cada descarga.
• Flickr no está actualizado a 3.2 (trabajando en eso)

WordPress

WP Supersized desarrollado por el talentoso Ben De Boeck del World In My Eyes . Nota: Este plugin está utilizando la versión 3.1.3

Pixeden es otra comunidad para diseñadores que nació con la idea de crear un lugar único para todas las herramientas que un diseñador moderno pueda necesitar en su día a día. Posee recursos con mucha calidad desde diseños de folleteria hasta tarjetas personales (todo en PSD), entre otras cosas.  Los archivos son gratuitos y sin límite de descarga.

Design Kindle una comunidad sobre diseño web donde podrán encontrar diversidad de recursos gratis. No requiere membresía y los  recursos de diseño web están listos para ser descargados.

Los diseños que encontraremos son diseñados exclusivamente por Design Kindle, lo que garantiza no lo veraz en ningún otro lado. Por último, pero no menos importante, es que podrás  utilizar cualquiera de los archivos descargados en tus proyectos personales o comerciales. Algunas de las categorías que podremos encontrar:

• Websites
• Graphics
• Vectors
• Icons
• Textures
• Styles
• Patterns

Tipped Javascript es un nuevo proyecto de nickstakenburg, el cual nos presenta otra práctica forma para generar hermosos tooltips. Es una evolución generada a partir del popular Prototip, pero llevado al segundo nivel mediante el uso de HTML 5 para darle un control total sobre la apariencia. Al igual que en otros proyectos con similares características, encontraremos diseños ya prediseñados pero eso no nos limitara a obtener mejores resultados. Podrás jugar un poco con los skin además de personalizarlo por completo. Contaras con Callbacks y Eventos disponibles para una fácil integración con tu propio código. Además de visualizar Ajax & HTML o elementos de la página.
Mas info Tipped - Descargas

Incluir tipped

Uso basico

Uso avanzado

Nivo Slider (v2.4) la nueva versión del plugin jQuery que en alguna oportunidad hemos publicado. Se trata de una fantástica forma de crear diapositivas / deslizantes con miniaturas para nuestros proyectos online. Posee características particulares en cuanto a efectos. Permite ajustarse a nuestras necesidades, dirección y control de navegación.

Ver demos - Descarga

Características actuales (v2.4)

• 11 efectos de transición única
• Código Simple y limpia
• Ajustes de Carga para modificar
• Construida basada en la dirección de navegación y control
• versión de 10kb
• Apoya la vinculación en imágenes
• Teclado de navegación
• Títulos HTML
• Libertad de uso bajo licencia MIT

Compatibilidad con exploradores

Nivo Slider ha sido probado en los siguientes navegadores:

• Internet Explorer versión 7 +
• Firefox v3 +
• Google Chrome v4
• Safari v4
• Opera 10.5

Client Testimonials, es una idea muy práctica basada en PHP, XML y jQuery, que nos permitirá montar algo así como una mini plataforma donde se mostraran todas las recomendaciones, o experiencia que nuestros clientes han tenido con nosotros o nuestra empresa. Una muy buena forma de vender aun más nuestros productos o servicios, sin necesidad de montar un sistema CMS dedicada exclusivamente para este fin.

Ver Demo - Descarga (PHP, XML y jQuery) by tutorialzine

testimonials.xml

PLAIN TEXT

HTML:

<?xml version="1.0" encoding="utf-8"?>

<testimonials>
    <item>
        <content>This has to be the most awesome app I've ever used!</content>
        <author-name>John Doe</author-name>
        <author-url>jdoe.com</author-url>
    </item>
    <item>
        <content>Simply amazing! It solved my problem. I highly recommend it.</content>
        <author-name>John Smith</author-name>
        <author-url>smith.com</author-url>
    </item>
    <item>
        <content>A tremendous success. It is like walking on sunshine compared to its competitors.</content>
        <author-name>John Smith</author-name>
    </item>
</testimonials>

PLAIN TEXT

JavaScript:

$(document).ready(function(){

// Hiding all the testimonials, except for the first one.
$('#testimonials li').hide().eq(0).show();

// A self executing named function that loops through the testimonials:
(function showNextTestimonial(){

// Wait for 7.5 seconds and hide the currently visible testimonial:
$('#testimonials li:visible').delay(7500).fadeOut('slow',function(){

// Move it to the back:
$(this).appendTo('#testimonials ul');

// Show the next testimonial:
$('#testimonials li:first').fadeIn('slow',function(){

// Call the function again:
showNextTestimonial();
});
});
})();

});

Codigo completo Client Testimonials Powered by PHP, XML and jQuery

]]> http://xyberneticos.com/index.php/2011/01/20/testimonio-de-clientes-en-php-xml-jquery/feed/ 3 http://xyberneticos.com/index.php/2011/01/20/elastic-thumbnail-menu/ http://xyberneticos.com/index.php/2011/01/20/elastic-thumbnail-menu/#comments Thu, 20 Jan 2011 03:45:27 +0000 Nikko http://xyberneticos.com/?p=3112

Sproing! – Make An Elastic Thumbnail Menu; Si buscabas métodos alternativos para construir los menús de las web que desarrollas, el menú de miniaturas elásticas pueda ayudarte un poco a salir de lo habitual. ¿Qué hace exactamente?, Aumenta los elementos del menú cuando se posa sobre él. Y donde los elementos del menú se amplían hacia arriba.

Ver Demo

PLAIN TEXT

HTML:

<div id="menuwrapper">
<div id="menu"><a class="menuitem" href="#"><img src="image.jpg" alt="" /></a><!--Template for each menu item--></div>
</div>

PLAIN TEXT

CSS:

/* The container which the menu is "locked" to the bottom of */
#menuwrapper{ position:relative; height:210px; }

/* Fixes the whole menu to the bottom of the parent div */
#menu{position:absolute; bottom:0;}

/* Each individual menu item fixed to the bottom with display:inline-block to create elasticity */
.menuitem{ position:fixed relative; bottom:0px; display:inline-block; }

PLAIN TEXT

JavaScript:

$(document).ready(function(){
$('.menuitem img').animate({width: 100}, 0); //Set all menu items to smaller size

$('.menuitem').mouseover(function(){ //When mouse over menu item

gridimage = $(this).find('img'); //Define target as a variable
gridimage.stop().animate({width: 200}, 150); //Animate image expanding to original size

}).mouseout(function(){ //When mouse no longer over menu item

gridimage.stop().animate({width: 100}, 150); //Animate image back to smaller size

});
});

Internet Explorer no realizara un buen trabajo a menos que agreguen la siguiente línea CSS:

PLAIN TEXT

CSS:

img {ms-interpolación de modo: bicúbico;}

Mas Info Sproing! – Make An Elastic Thumbnail Menu

]]> http://xyberneticos.com/index.php/2011/01/20/elastic-thumbnail-menu/feed/ 1 http://xyberneticos.com/index.php/2011/01/14/iconsweets-60-iconos-free/ http://xyberneticos.com/index.php/2011/01/14/iconsweets-60-iconos-free/#comments Fri, 14 Jan 2011 05:05:03 +0000 Nikko http://xyberneticos.com/?p=3101

iconSweets es un pack de iconos que contiene 60 formas vectoriales diseñadas para Photoshop, lo que permite sean completamente personalizados por nosotros. Podran usar estos iconos, tanto para proyectos comerciales, como no comerciales (según licencia) y personalizarlos como gusten.

Descarga iconSweets - Available in 32×32 and 16×16 format

]]> http://xyberneticos.com/index.php/2011/01/14/iconsweets-60-iconos-free/feed/ 1 http://xyberneticos.com/index.php/2011/01/13/banner-animado-personalizado-con-jquery/ http://xyberneticos.com/index.php/2011/01/13/banner-animado-personalizado-con-jquery/#comments Thu, 13 Jan 2011 19:30:53 +0000 Nikko http://xyberneticos.com/?p=3087

Custom Animation Banner with jQuery, es una maravillosa idea para crear banner animados, personalizados con jQuery. La idea es contar con elementos diferentes, que irán apareciendo paso a paso o en una secuencia determinada, dependiendo de nuestra personalización. Se ha utilizado jQuery Easing Plugin y  jQuery 2D Transform Plugin para crear esta ingeniosa animación, muy similar a otras realizadas en flash.

Resultado: Demo - Descarga Ficheros Animation Banner

PLAIN TEXT

HTML:

<div id="ca_banner1" class="ca_banner ca_banner1">
    <div class="ca_slide ca_bg1">
        <div class="ca_zone ca_zone1"><!--Product-->
            <div class="ca_wrap ca_wrap1">
                <img src="images/product1.png" class="ca_shown" alt=""/>
                <img src="images/product2.png" alt="" style="display:none;"/>
                <img src="images/product3.png" alt="" style="display:none;"/>
                <img src="images/product4.png" alt="" style="display:none;"/>
                <img src="images/product5.png" alt="" style="display:none;"/>
            </div>
        </div>
        <div class="ca_zone ca_zone2"><!--Line-->
            <div class="ca_wrap ca_wrap2">
                <img src="images/line1.png" class="ca_shown" alt=""/>
                <img src="images/line2.png" alt="" style="display:none;"/>
            </div>
        </div>
        <div class="ca_zone ca_zone3"><!--Title-->
            <div class="ca_wrap ca_wrap3">
                <img src="images/title1.png" class="ca_shown" alt="" />
                <img src="images/title2.png" alt="" style="display:none;"/>
                <img src="images/title3.png" alt="" style="display:none;"/>
            </div>
        </div>
    </div>
</div>

PLAIN TEXT

CSS:

.ca_banner{
    position:relative;
    overflow:hidden;
    background:#f0f0f0;
    padding:10px;
    border:1px solid #fff;
    -moz-box-shadow:0px 0px 2px #aaa inset;
}
.ca_slide{
    width:100%;
    height:100%;
    position:relative;
    overflow:hidden;
}
.ca_zone{
    position:absolute;
    width:100%;
}
.ca_wrap{
    position:relative;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
.ca_wrap img.ca_shown{
    display:inline !important;
}
/* Custom styles of banner1 */
.ca_banner1{
    width:650px;
    height:300px;
}
.ca_bg1{
    background:#fff url(../images/bg.jpg) no-repeat top left;
}
.ca_banner1 .ca_zone1{
    top:0px;
    left:0px;
}
.ca_banner1 .ca_wrap1{
    width:320px;
    height:300px;
}
.ca_banner1 .ca_zone2{
    top:100px;
    left:240px;
}
.ca_banner1 .ca_wrap2{
    width:387px;
    height:203px;
}
.ca_banner1 .ca_zone3{
    top:32px;
    left:250px;
}
.ca_banner1 .ca_wrap3{
    width:378px;
    height:31px;
}

/*Custom Style for Second Banner*/
.ca_banner2{
    width:120px;
    height:600px;
}
.ca_bg2{
    background:#fff url(../images/bgSmall.jpg) no-repeat top left;
}
.ca_banner2 .ca_zone1{
    top:10px;
    left:0px;
}
.ca_banner2 .ca_wrap1, /*They are the same size*/
.ca_banner2 .ca_wrap2{
    width:120px;
    height:220px;
}
.ca_banner2 .ca_zone2{
    top:250px;
    left:0px;
}

PLAIN TEXT

JavaScript:

$('#ca_banner1').banner({
    steps : [
        [
            //1 step:
            [{"to" : "2"}, {"effect": "zoomOutRotated-zoomInRotated"}],
            [{"to" : "1"}, {}],
            [{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}]
        ],
        [
            //2 step:
            [{"to" : "3"}, {"effect":"slideOutTop-slideInTop"}],
            [{"to" : "1"}, {}],
            [{"to" : "2"}, {}]
        ],
        [
            //3 step:
            [{"to" : "4"}, {"effect": "zoomOut-zoomIn"}],
            [{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}],
            [{"to" : "2"}, {}]
        ],
        [
            //4 step
            [{"to" : "5"}, {"effect": "slideOutBottom-slideInTop"}],
            [{"to" : "2"}, {}],
            [{"to" : "3"}, {"effect": "zoomOut-zoomIn"}]
        ],
        [
            //5 step
            [{"to" : "1"}, {"effect": "slideOutLeft-slideInLeft"}],
            [{"to" : "1"}, {"effect": "zoomOut-zoomIn"}],
            [{"to" : "1"}, {"effect": "slideOutRight-slideInRight"}]
        ]
    ],
    total_steps : 5,
    speed : 3000
});

]]> http://xyberneticos.com/index.php/2011/01/13/banner-animado-personalizado-con-jquery/feed/ 4