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"...
Ninja UI, es un plugin hecho bajo jQuery con la única finalidad de mejorar las interfaces web, Ninja UI cuenta con varios efectos como el Pop Up, botones, preloads, acordeones y demás.
Recomendado para mejorar la navegación en el sitio sin complicarse mucho.
Su uso al principio cuesta por que no cuenta con suficiente documentación pero analizando un poco el ejemplo se entiende fácilmente:
<span class="ninja ninjaBorder ninjaButton ninjaInline ninjaUnselectable ninjaGradient"> Pop-Up <span class="ninjaIcon ninjaInline">v</span></span>
Esto crea un boton redondeado con gradientes y con un link hacia un Pop Up.
Descarga y Demo | Ninja UI
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"...
En este POST hablaremos de una herramienta para trabajar con elementos Canvas en html5. Se trata de JCanvas, que es una extensión de JQuery.
El primer paso es lógicamente que te descargues la librería. Enlaces para su descarga jCanvas
¿Porque usarlo? Es la pregunta que responden el su sitio oficial. La respuesta es muy simple, mostrando estos ejemplos sin el uso de JCanvas.
ctx = $('#canvas')[0].getContext('2d');
ctx.fillStyle = '#333';
ctx.beginPath();
ctx.arc(50, 50, 20, 0, Math.PI*2, false);
ctx.fill();
ctx.closePath();
y usándolo
$('#canvas').drawArc({
fillStyle: '#333',
x: 50, y: 50,
radius: 20
})
Pasamos ahora a realizar algunos ejemplos de la misma página.
Arc
$("canvas.example").drawArc({
fillStyle: "#000",
x: 100,
y: 100,
radius: 50,
start: 0,
end: 360
})
$("canvas.test").drawArc({
strokeStyle: "#000",
x: 100,
y: 100,
radius: 50,
start: 45,
end: 135,
ccw: true
})
Bézier
$("canvas.test").drawBezier({
strokeStyle: "#000",
x1: 50, y1: 50,
cx1: 200, cy1: 50,
cx2: 50, cy2: 150,
x2: 200, y2: 150,
cx3: 300, cy3: 150,
cx4: 150, cy4: 1,
x3: 350, y3: 50
})
Por ahora es todo lo que mostraré. El sitio oficial tiene varios ejemplos, ademas de permitirte interactuar con sus parámetros de cada función. trabajen con las diferentes figuras y verán lo fácil que es.
Muchas de las cosas que sé, es por experiencia. Por ahora me dedico al desarrollo de sistemas Web, tengo conocimientos de PHP y base de datos. Lo bueno, de mi es que aprendo nuevas cosas, las busco y las vivo.
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"...
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"...
Pensé que los slideshows ya no me podían sorprender más y que ya lo había visto todo en cuanto slideshows pero este tiene algo distinto, para empezar los thumbs en la parte inferior desordenados y con leves rotaciones que hacen que el efecto polaroid sea mas real y no solo eso sino que le da un borde, una sombra, tiene un una imagen de espera (.gif) mientras carga la imagen grande con un título al pie de la misma, y algo que a mi me gustó es que ocupa toda la página, y por último es que puedes tener varias galerías en la misma página como bien se ve en el demo.
Aparte que es un buen slideshow con efecto de Polaroid, el autor pone el tutorial completo de todo el script y css (en ingles).
Link y Tutorial | Polaroid Photobar Gallery with jQuery
Demo | Polaroid Photobar Gallery
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"...
Esta es una manera muy ilustrativa de como dar un Tour del sitio web a un usuario común (en muchos casos enseñar al usuario las cosas que se pueden conseguir en el sitio web), con jQuery.
Solo se necesitar añadir la libreria jQuery, añadir el código .js y crear los box que contendran la explicación del tour.
<div> <h2>crear un tour</h2> <p>Aquí irá el texto del tooltip, ...</p> </div>
Lo que sigue es crear el el objeto JSON con los siguientes parametros:
var config = [
{
"name" : "tour_1",
"bgcolor" : "black",
"color" : "white",
"position" : "TL",
"text" : "Some text here",
"time" : 5000
},...
]
Al principio parece algo confuso por lo largo que se hace el objeto pero es bastante intuitivo y sencillo de usar.
Demo | Website Tour Demo
Descarga y Documentación | Website Tour with 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"...