MotionCAPTCHA, una nueva forma de validar formularios asegurándonos que los que lo llenan son Humanos y no bots que meten solo spam, con este nuevo método el usuario tendrá que DIBUJAR el el signo que aparece en la imagen con el mouse, interesante verdad?, pues si es muy original, algo para destacar también es que esta hecho con jQuery, así que la validación se hace al instante, recomendado para nuevos proyectos.
Link, Demo y Descarga | MotionCAPTCHA
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...
Choco-Slider, es otro slider con jQuery, entre sus características principales tenemos las siguientes:
Su uso es sencillo:
<div id="slider"> <img src="img/img_1.jpg" alt="" title=""/> <img src="img/img_2.jpg" alt="" title=""/> <img src="img/img_3.jpg" alt="" title=""/> <img src="img/img_4.jpg" alt="" title=""/> <img src="img/img_5.jpg" alt="" title=""/> </div>
Demo y Descarga | Choco-Slider
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...
Tiny Circleslider, es un “slideshow” circular que también hace de “Carrusel”, lo peculiar es que tiene un efecto circular para la transición y bastante configurable, otro punto a favor es su fácil implementación y lo mejor de todo es que esta hecho bajo jQuery, y por si fuera poco pesa solo 4kb.
Link y Demo | Tiny Circleslider
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...
Subir Arriba, Go to Top o Scroll to Top son métodos que se usan para crear crear links hacia una ancla en especifico que este caso hacia el top de la página. ( id=top).
Hasta ahi todo es relativamente sencillo porque solo se necesita crear un link hacia una ancla más o menos así:
<body id="top"> <!-- TODO EL CONTENIDO --> <a href="#top">Ir arriba</a> </body>
Ahora lo que voy a tratar de explicarles es como agregar un efecto de jQuery, que hará la página se desplace lentamente hasta llegar al tope de la página en el navegador.
Primero modificaremos un poco el html para agregar un DIV que contendra el link hacia la ancla:
<div class="subir">
<a href="#top">Subir</a>
</div>
Para leer el tutorial Completo hagan clic en Seguir Leyendo…
(más…)
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...
Pues eso.. Como hacer que un modulo sea flotante??
Para que sirve para mostrar contenido extra, generalmente contenido o banners que quieres que restalten y al hacerlo flotante obviamente resaltará mucho.
Pues manos a la obra. Primeramente explicaré a grandes rasgos lo que haremos, primero abriremos el index.php del template agergaremos la nueva posición de módulo, luego agregaremos el efecto con jQuery, despues de eso agregamos los estilos en el style.css de la plantilla y por último agregamos el contenido del módulo.
Click en “Seguir Leyendo” para seguir el tutorial completo.
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...
Lo prometido es deuda aquí esta el DEMO que prometí del tutorial de Como usar el efecto “Lavalamp” en el menú de Joomla!?.
Tutorial | Como usar el efecto “Lavalamp” en el menú de Joomla!? Fixed!
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...
jRumle es un plugin para jQuery muy divertido que sirve para hacer vibrar, temblar y rotar elementos de html como los DIV’s que serian los mas aconsejables ya que también afecta para todo lo que esta dentro del DIV.
Su uso es simple solo es agregar la librería y el plugin:
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jrumble.1.0.js"></script>
(Usen la libreria alojada en el servidor de google)
Luego solo queda indicar el “ID” del div y los parámetros para que necesitamos.
$(document).ready(function(){
$('#my-rumble-div').jrumble({
rangeX: 10,
rangeY: 10,
rangeRot: 4
});
});
Sencillo no?
Link, Demo y Documentación | jRumble
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...
Hablando con un amigo me hizo recuerdo de este fantástico efecto de “Lavalamp” echo por Ganeshji Marwaha.
Y.. justamente ahora tengo un proyecto en Joomla! que hacer así que me dispuse a usar este asombroso efecto en el “Top Menú” de sitio e hice algunas pruebas en mi servidor local (localhost) para ver la complejidad de adaptar este plugin al menú de Joomla! y descubrí que no era complicado asi que ahora les posteo este mini tutorial de como agregarlo al “Template del Joomla“.
1.- Creamos el menú en y todos los items que necesitaremos en el mismo, en mi caso agregué 6 items de muestra para que se note más el efecto.
2.- Publicamos el módulo en la posición donde queremos que aparezca el menú (y el efecto XD) tenemos que tener en cuenta que solo lo usaremos de forma horizontal, también tenemos que agregar un “id” y una clase al la lista “UL” y debería quedar más o menos asi:
Como ven usé de ID “lavalamp” y de Class “_lavalamp” hice esto para que la estructura de nuestro menú quede así:
<div class="left">
<ul class="menu_lavalamp" id="lavalamp">
<li class="item16"><a href="#"><span>Home</span></a></li>
<li class="item17"><a href="#"><span>Quienes somos?</span></a></li>
<li class="item18"><a href="#"><span>Productos</span></a></li>
<li class="item19"><a href="#"><span>Noticias</span></a></li>
<li class="item20"><a href="#"><span>Reservas</span></a></li>
<li class="item21"><a href="#"><span>Contactos</span></a></li>
</ul>
</div>
Donde resaltaremos esto:
<ul class=”menu_lavalamp” id=”lavalamp” >
Que hará toda la magia, ahora solo nos queda agregar los JS y el CSS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/pruebas/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/pruebas/js/jquery.lavalamp.js"></script>
<script type="text/javascript">
$(function() {
$("#lavalamp").lavaLamp({
fx: "backout",
speed: 700,
});
});
</script>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/pruebas/css/template.css" type="text/css" />
Tip: Siempre es bueno usar las librerias hosteadas en otro servidor para reducir el tiempo de carga de la página.
Gracias a MATI que me hizo dar cuenta del bug que tenia el tutorial, modifiqué un poco el Script de “jquery.lavalamp.min.js” así que ahora lo que tiene que contener este .js es:
/**
* LavaLamp - A menu plugin for jQuery with cool hover effects.
* @requires jQuery v1.1.3.1 or above
*
* http://gmarwaha.com/blog/?p=7
*
* Copyright (c) 2007 Ganeshji Marwaha (gmarwaha.com)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Version: 0.2.0
* Requires Jquery 1.2.1 from version 0.2.0 onwards.
* For jquery 1.1.x, use version 0.1.0 of lavalamp
*
*
* Modify by Jorge A. Inturias C. for Jooomla Menu
* www.inturias.com
*
*/
(function($) {
$.fn.lavaLamp = function(o) {
o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {});
return this.each(function() {
var me = $(this), noop = function(){},
$back = $('<li class="back"><div class="left"></div></li>').appendTo(me),
$li = $("li", this), curr = $("li.active", this)[0] || $($li[0]).addClass("current")[0];
$li.not(".back").hover(function() {
move(this);
}, noop);
$(this).hover(noop, function() {
move(curr);
});
$li.click(function(e) {
setCurr(this);
return o.click.apply(this, [e, this]);
});
setCurr(curr);
function setCurr(el) {
$back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" });
curr = el;
};
function move(el) {
$back.each(function() {
$(this).dequeue(); }
).animate({
width: el.offsetWidth,
left: el.offsetLeft
}, o.speed, o.fx);
};
});
};
})(jQuery);
No se guardar el codigo de arriba en: jquery.lavalamp.min.js.
Por ultimo cargaremos el CSS en el archivo “template.css” que usé yo para hacer la plantilla.
*{border:0;margin:none;padding:0}
.menu_lavalamp { position: relative; height: 29px; width:700px; background:#FF8400; padding: 15px; margin: 10px 0; overflow: hidden; border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px; }
.menu_lavalamp li { float: left; list-style: none; }
.menu_lavalamp li.back { background:#E57907;width: 9px; height: 30px; z-index: 8; position: absolute;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px; }
.menu_lavalamp li a { font: bold 14px arial; text-decoration: none; color: #fff; outline: none; text-align: center; top: 7px; text-transform: uppercase; letter-spacing: 0; z-index: 10; display: block; float: left; height: 30px; position: relative; overflow: hidden; margin: auto 10px; }
.menu_lavalamp li a:hover, .menu_lavalamp li a:active, .menu_lavalamp li a:visited { border: none; }
Tip: recuerden siempre usar un “reset” de elementos. ( Tips y Comentarios sobre como escribir correctamente CSS )
Use Css3 para hacer los bordes redondeados para evitar la carga de imagenes innecesarias XD ( Como crear bordes redondeados y transparentes con CSS3 )
Y listo eso es todo!
Todavía no lo subí a ningún servidor para que puedan ver el demo online pero les pongo un Screenshot de mi localhost en una plantilla varia pero funciona al 100%.
Demo | Demo Menú Joomla con Lavalamp
Comentarios?
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...
Scrollerota, es un slideshow interesante con un efecto muy atractivo para mostrar el texto descriptivo o informativo, como todos los buenos plugins tiene una serie de opciones comunes, por ejemplo: el Ancho, Alto, Tiempo de pausa, velocidad de la transición, y tipo de Transición.
Para su uso en el html es básicamente asi:
<div id="scrollerota">
<ul class="images">
<li><img src="images/image1.jpg" /></li>
<li><img src="images/image2.jpg" /></li>
<li><img src="images/image3.jpg" /></li>
</ul>
<ul class="text">
<li>Nullam rutrum, nibh sit amet sodales luctus, mauris est placerat justo, molestie gravida lorem enim eu sapien.<a href="#" class="readmore">Leer más..</a></li>
<li>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam et eros nisl. Etiam vehicula lobortis pharetra. Integer ut ipsum risus.<a href="#" class="readmore">Leer más..</a> </li>
<li>Nulla facilisis felis vitae leo condimentum quis adipiscing turpis rhoncus. Sed id lacus libero, ut accumsan lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<a href="#" class="readmore">Leer más..</a> </li>
</ul>
</div>
Obviamente antes a esto se tiene que agregar las librerias:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.scrollerota.min.js"></script>
Luego inicializar el plugin indicando las configuraciones:
<script type="text/javascript">
$("#scrollerota").scrollerota({
width: 500,
height: 333,
padding: 10,
speed: 2000,
timer: 5000,
slideshow: true,
easing: 'easeInOutQuart'
});
</script>
Y por ultimo Agregar el CSS.
No es mucha documentación como ven, es un plugin sencillo de usar e implementar en nuevos proyectos.
Demo, y Descarga | Scrollerota jQuery Plugin
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...
liteAccordion, es un plugin hecho en base a jQuery con la única función de dar el efecto “Acordeón” a los sitios web, este efecto es muy útil para mostrar imágenes y contenido ahorrando espacio en la página y dando un efecto muy atractivo y moderno al sitio.
El uso de este plugin es sencillo sólo necesitamos añadir las librerias:
<head>
<link rel="stylesheet" href="liteAccordion.css">
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="liteaccordion.jquery.js"></script>
</body>
El html básicamente quedaría así:
<div class="accordion">
<ol>
<li>
<h2><span>Slide One</span></h2>
<div></div>
</li>
<li>
<h2><span>Slide Two</span></h2>
<div></div>
</li>
<li>
<h2><span>Slide Three</span></h2>
<div></div>
</li>
<li>
<h2><span>Slide Four</span></h2>
<div></div>
</li>
<li>
<h2><span>Slide Five</span></h2>
<div></div>
</li>
</ol>
<noscript>
<p>Please enable JavaScript to get the full experience.</p>
</noscript>
</div
y por ultimo al final de la página llamamos al Js así:
<script>
$('#yourdiv').liteAccordion();
</script
Demo y Descarga | liteAccordion – a horizontal accordion plugin for jQuery
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...