Similar Posts
DateSlider: seleccionar fechas mediante un slider
DateSlider es un javascript realizado con Prototype/Scriptaculous que te permite seleccionar fechas con un simple slider.
Su uso es sencillo, a parte de añadir los scripts y estilos, tan solo es necesario incluir este texto:
<div id = "slider-container">
<div id = "sliderbar"></div>
</div><br />
<form>
<label for = "datestart">Start:</label> <input type = "text" id = "datestart">
<label for = "dateend">End:</label> <input typde = "text" id = "dateend">
</form>
Y este script:
p_oDateSlider = new DateSlider('sliderbar', '2007-10-01', '2008-10-01', 2001, 2009);
p_oDateSlider.attachFields($('datestart'), $('dateend'));
Introducing: The sliding date-picker
Gracias Carlos por el aviso
jQuery Silver: buscador de enlaces con jQuery
jQuery Silver es un buscador de enlaces en el contenido de la página. Su uso es muy sencillo, se abre una ventana mediante shortcuts, y en ella se pueden realizar búsquedas de enlaces. Permite buscar en etiquetas A e INPUT.
Quizás a simple vista no sea muy útil, pero puede venir bien para aplicaciones más elaboradas.
jQuery Silver
Vía / DZone
jQSlickWrap: texto alrededor de una imagen con jQuery
jQSlickWrap es un plugin jQuery que nos permite mostrar el texto según el contorno de una imagen. Para ello hace uso del objeto CANVAS.
Yo no soy muy partidario de usar estas funcionalidades, pero en diseños vistosos puede quedar muy bien. Independientemente de su funcionalidad, el script es impresionante.
Vía / CSS Globe
FancyBox: zoom de imágenes mediante Javascript
Buen script creado en jQuery que permite añadir zoom a imágenes. Está testado en IE6, IE7 y Firefox. Entre las características muestra en una ventana lightbox la imagen en un tamaño mayor, pudiendo ajustarse al tamaño de la ventana y mostrando un marco alrededor de la imagen. Además permite mostrar un grupo de imágenes de forma común.
Un ejemplo de uso sería el siguiente:
$(function() {
$("div#test_zone a").fancybox();
});

Crear aplicación web con Hapi.js, Vue y MongoDB
Estoy aprendiendo Hapi.js y Vue.js y qué mejor que ir anotando aquí lo que voy aprendiendo, y si a alguien le sirve, mejor que mejor.
Pretendo crear una aplicación web e ir explicando en diferentes posts, que iré añadiendo aquí, lo que estoy aprendiendo.
He estado viendo distintos boilerplates y el que más me ha gustado ha sido appy. Podría usarlo, pero prefiero aprender poco a poco que pegarme con algo ya hecho e indagar qué hace cada cosa.
Lo que más me gusta de appy es que diferencia entre el backend y el frontend de forma bastante clara, distintos directorios y aplicaciones para cada cosa. Es por ello que voy a seguir esta estructura. Aquí hay un artículo bastante majo que explica más o menos lo mismo.
Pues nada más, iré subiendo posts sobre lo que voy aprendiendo. Eso sí, porfa, si meto la pata en algo, no me lo tengas muy en cuenta, estoy aprendiendo.
- Hapi.js+Vue.js Crear servidor backend (código v0.1.0)
- Reorganización de la configuración (código v0.2.0)
- Empezar añadiendo routes (código v0.3.0)
- Conectando a mongodb (código v0.4.0)
- Modelos mejorados y controladores (código v0.5.0)
- Inicializando el frontend (código v0.6.0)
- Vue router y login form “tonto” (código v0.7.0)
- Comunicación entre frontend y el servidor usando JWT (login) (código v0.8.0)
- i18n (código v0.9.0)
- Activación de usuario, recordar contraseña, … (código v0.10.0)
- Roles (código v0.11.0)
- Vuex y avatares (código v0.12.0)
WebSockets en HTML5
HTML5 introduce una característica que puede mejorar sustancialmente las aplicaciones web, los WebSockets, los cuales permite crear un canal de comunicación bi-direccional entre el cliente y el servidor, solucionando los problemas que presenta Ajax o Comet. El ancho de banda ahorrado tiene una proporción de 500:1 y una latencia de 3:1, resultados increíbles que hacen que los de Google anden muy interesandos en esta tecnología (el ahorro en aplicaciones como GMail puede ser considerable).
Por ahora sólo funciona en Google, pero un código de ejemplo sería el siguiente:
if ("WebSocket" in window) {
var ws = new WebSocket("ws://websockets.org:8787"); //this service bounces messages back
ws.onopen = function() {
// Web Socket is connected. You can send data by send() method.
ws.send("message to send");
};
ws.onmessage = function (evt) { var received_msg = evt.data; alert(evt.data); };
ws.onclose = function() { /* websocket is closed.*/alert("WebSocket Closed!"); };
}else{
// the browser doesn't support WebSocket.
alert("Websocket is not supported in your browser");
}
HTML5 Web Sockets: A Quantum Leap in Scalability for the Web
Vía / DZone