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

ByLuis

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

Similar Posts

| | |

Laboratorio: carga de combos

ByLuis

Ayer nos preguntaban cómo cargar combos según lo que se seleccione en otro combo, y aunque no me quedó muy claro la duda que tenía, pues para intentar ayudarle, voy a explicar cómo hacerlo mediante tres posibilidades.

Primeramente explicaremos cómo hacerlo mediante el uso de iframes ocultos. Sí, no es nada web 2.0, pero no a todo el mundo se le da bien el desarrollo web, o no le gusta el uso de Ajax, o simplemente, como me pasa a mí, no nos dejan usar Ajax en los desarrollos del cliente (¡vete a saber por qué!).

Después lo haremos mediante Ajax (¡viva la web 2.0!), pero instanciando nosotros mismos el objeto XMLHttpRequest, para que los conceptos de Ajax no se pierdan dentro del uso de librerías, es importante conocer la base para luego usar una librería que te lo haga todo más fácil.

Y por último, ya no solo en plan web 2.0, sino en plan lo último de lo último, lo haremos usando la librería Prototype. Que la verdad sea dicha, no se trata de reinventar la rueda.

Read More “Laboratorio: carga de combos”

|

FUEL en Firefox 3

ByLuis

Ya hace tiempo hablamos de FUEL, un framework para desarrollar extensiones para Firefox. Ahora ya está disponible en Firefox 3, por lo que podemos ir aprendiendo y haciendo nuestras pruebas.

John Resig nos ofrece una serie de enlaces y ejemplos para empezar con FUEL:

Simple Extensions in Firefox 3

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

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

ByLuis

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.

  1. Hapi.js+Vue.js Crear servidor backend (código v0.1.0)
  2. Reorganización de la configuración (código v0.2.0)
  3. Empezar añadiendo routes (código v0.3.0)
  4. Conectando a mongodb (código v0.4.0)
  5. Modelos mejorados y controladores (código v0.5.0)
  6. Inicializando el frontend (código v0.6.0)
  7. Vue router y login form “tonto” (código v0.7.0)
  8. Comunicación entre frontend y el servidor usando JWT (login) (código v0.8.0)
  9. i18n (código v0.9.0)
  10. Activación de usuario, recordar contraseña, … (código v0.10.0)
  11. Roles (código v0.11.0)
  12. Vuex y avatares (código v0.12.0)
|

Javascript orientado a objetos

ByLuis

Interesante tutorial que nos indica cómo usar los objetos en Javascript, ya sean los objetos predefinidos, el uso del operador new, objetos literales, su declaración, la encapsulación, la herencia, la propiedad prototype para añadir métodos y atributos a un objeto, poliformismo, … explicado con ejemplos y muy útil para aquellos que empiezan y para aquellos que quieran mejorar su código (que a todos nos viene bien).
Object-Oriented Javascript
Vía / Digg

|

Cómo hacer un lector de feeds con jQuery Mobile

ByLuis

Completísimo tutorial que nos explica cómo realizar un lector de feeds usando jQuery Mobile (que actualmente está en versión alpha). Cuyas características son las siguientes:

  • Mostrar lista de feeds con sus logos
  • Mostrar el feed cuando se hace click
  • Crear los estilos para los artículos
  • Crear un icono Apple-touch para que el usuario pueda añadir la aplicación a su teléfono
  • Usar YQL para obtener los datos del feed
  • Caché básico

Post original

Bluff: gráficas mediante Javascript

ByLuis

Bluff es un script que nos permite realizar gráficas de forma sencilla en Javascript. Es necesario incluir la librería JS.Class para que simule canvas en IE.

canvas.png

Crear gráficas es muy sencillo y solo deberemos incluir un script parecido a este:

<canvas id="example"></canvas>
<script type="text/javascript">
var g = new Bluff.Line('example', 400);
g.theme_37signals();
g.title = 'My Graph';
g.data('Apples', [1, 2, 3, 4, 4, 3]);
g.data('Oranges', [4, 8, 7, 9, 8, 9]);
g.data('Watermelon', [2, 3, 1, 5, 6, 8]);
g.data('Peaches', [9, 9, 10, 8, 7, 9]);
g.labels = {0: '2003', 2: '2004', 4: '2005'};
g.draw();
</script>

Bluff