Javascript

Lazy Load: retrasar la carga de imágenes con jQuery

ByLuis October 1, 2009

Interesante plugin para jQuery que permite retrasar la carga de imágenes para que la carga de la página sea más rápida. Para ello, cargará las imágenes sólo cuando se vean mediante el scroll. Un script que está pensado para páginas con gran número de imágenes pesadas.

Lazy Load

Vía / WebAppers

Javascript

DateSlider: seleccionar fechas mediante un slider

ByLuis January 28, 2008

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

Javascript

jQuery Silver: buscador de enlaces con jQuery

ByLuis August 3, 2009

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

Javascript

jQSlickWrap: texto alrededor de una imagen con jQuery

ByLuis November 30, 2009

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.

jQSlickWrap

Vía / CSS Globe

Javascript

FancyBox: zoom de imágenes mediante Javascript

ByLuis April 3, 2008

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();
});

FancyBox

Javascript

Crear aplicación web con Hapi.js, Vue y MongoDB

ByLuis April 26, 2019December 22, 2019

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)

Desarrollo web | Javascript

WebSockets en HTML5

ByLuis March 16, 2010

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

Similar Posts