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

CodeMirror: consola Javascript para tus páginas web

ByLuis January 23, 2008

CodeMirror es una librería realizada con MochiKit que nos permite incluir una consola de Javascript en nuestras aplicaciones web. Un ejemplo perfecto para el funcionamiento es el libro de Javascript online Eloquent Javascript, el cual muestra ejemplos javascript y usa la consola para poder ejecutarlos.

Nos muestra el código parseado y resaltado, además nos permite modificarlo y ejecutarlo, viendo los resultados en una ventana diferente.

Además es sencillo de utilizar:

var editor = new CodeMirror(CodeMirror.replace("inputfield"), {
parserfile: ["tokenizejavascript.js", "parsejavascript.js"],
path: "lib/codemirror/",
stylesheet: "lib/codemirror/jscolors.css"
});

CodeMirror

Javascript

jMaps: Google Maps mediante jQuery

ByLuis November 19, 2008

jMaps es una librería de jQuery que facilita la integración de los mapas de Google Maps en nuestra web, sin necesidad de conocer el API de Google Maps.
Permiote dada una dirección válida podemos obtener su localización y al revés, buscar direcciones hacia y desde cualquier localización, añadir y quitar marcadores, polígonos, capas, publicidad de adsense…
jMaps
Vía / Script & Style

Javascript

JSINER: objetos y herencia en Javascript

ByLuis May 8, 2007

JSINER es una librerÃa de Javascript que pretende facilitar la programaciÃ³n orientada a objetos y la dependencia en la gestiÃ³n de scripts en ficheros externos.

Para el tema de la herencia, el autor define una herencia lazy, cuyas caracterÃsticas son las siguientes:

Tiene las mismas caracterÃsticas que la herencia mediante prototype.
No es necesario orden alguno en la declaraciÃ³n de los scripts externos.
En la mayorÃa de los casos la carga del HTML es mÃ¡s rÃ¡pida, ya que los scripts se cargan solo en el momento en el que se necesitan.
Las dependencias se declaran en un modo mÃ¡s especÃfico y las dependencias entre clases solo en scripts concretos.
Los scripts solo se cargan cuando se necesitan.

JSINER

Javascript | Yahoo

YSlow: añadido de Firebug de Yahoo

ByLuis July 25, 2007

YSlow es un plugin para Firefox que aÃ±ade una nueva pestaÃ±a a Firebug, la cual realiza informes de las pÃ¡ginas que visitamos y nos indica por quÃ© es lenta segÃºn algunas reglas de rendimiento.

Muestra una evaluaciÃ³n de cada posible regla de rendimiento, mostrando estadÃsticas de ellas. AdemÃ¡s indica que componentes estÃ¡n instalados y hace una comparativa entre la pÃ¡gina visitada con cachÃ© o sin cachÃ©.
Una extensiÃ³n muy a tener en cuenta.
YSlow
VÃa / OpenSourceCommunity.org

AJAX | Javascript

Ya tenemos nuevo ThickBox

ByLuis August 10, 2006

De muchos es conocido Lightbox, y la popularidad que produjo a su autor en su momento cuando se hizo pÃºblico. BÃ¡sicamente es uno de los efectos que mÃ¡s se estÃ¡n viendo en pÃ¡ginas webs a la hora de mostrar imÃ¡genes. No hablamos de nada nuevo ni lo descubrimos ahora.

Y como alternativa a Lightbox tenemos ThickBox 2.0 mucho mÃ¡s ligera y potente con sÃ³lo 27Kb de cÃ³digo. Â¿QuÃ© son 27Kb que sirven para cosas como esta?.

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

Javascript

Detectar características HTML5 mediante Javascript

ByLuis March 31, 2010

Aunque el HTML5 no está disponible en todos los navegadores, no es mala idea ir incluyendo en nuestras webs aplicaciones que hagan uso de HTML5, e ir dándole un poco de vidilla al asunto y no estar pendientes de Internet Explorer. Por ello, este script nos puede venir muy bien:

function detectBrowserCapabilities(){
  var res = new Array();
  res["userAgent"] = navigator.userAgent;    
  var hasWebWorkers = !!window.Worker;
  res["workersFlag"] = "" + hasWebWorkers;
  var hasGeolocation = !!navigator.geolocation;
  res["geoFlag"] = "" + hasGeolocation;
  if (hasGeolocation) {
    document.styleSheets[0].cssRules[1].style.display = "block";
    navigator.geolocation.getCurrentPosition(function(location) {
      res["geoLat"] = location.coords.latitude;
      res["geoLong"] = location.coords.longitude;
    });
  }
  var hasDb = !!window.openDatabase;
  res["dbFlag"] = "" + hasDb;
  var videoElement = document.createElement("video");
  var hasVideo = !!videoElement["canPlayType"];
  var ogg = false;
  var h264 = false;
  if (hasVideo) {
    ogg = videoElement.canPlayType('video/ogg; codecs="theora, vorbis"') || "no";
    h264 = videoElement.canPlayType('video/mp4; 
    codecs="avc1.42E01E, mp4a.40.2"') || "no";
  }
  res["videoFlag"] = "" + hasVideo;
  if (hasVideo){
    var vStyle = document.styleSheets[0].cssRules[0].style;
    vStyle.display = "block";
  }
  res["h264Flag"] = "" + h264;
  res["oggFlag"] = "" + ogg;
  return res;
}

Build Web applications with HTML 5

Similar Posts