Contenido

Pseudo-ajax para leer ficheros locales

12 ene

+ 7

CSSGalery.info nos muestra una solución para leer fichero cuando ejecutamos HTML desde nuestro local. Detectando si la página está siendo ejecutado en un entorno local mediante el protocolo file: de la URL decide como actuar ante una llamada a la función get_content().

function get_content(url,update) {
	if ( document.location.protocol == "file:" ) {
		// console.log("local");
		var ifr = new IFrame({
		src:url,
		events:{
		load: function() {
				$(update).set("html", this.contentWindow.document.body.innerHTML );
			}
		}
		}).inject(document.body);
	}else {
		// console.log("server");
		var myHTMLRequest = new Request.HTML({
		update:update,
		}).get(url);
	}
}

La función get_content(), a la que le pasamos la ruta y donde queremos descargar el cotenido se encarga de hacer todo el trabajo por nosotros. Para los que no usamos MooTools he montado una versión en JS sin necesidad de trabajar con ningún framework.

function get_content(url,update) {
  if ( document.location.protocol == "file:" ) {
    var ifr = document.createElement("iframe");
    ifr.src = url;
    ifr.onload = function() {
	document.getElementById(update).innerHTML = this.contentWindow.document.body.innerHTML;
    }
    document.getElementsByTagName("body")[0].appendChild(ifr);
  }else {
    var ajax = (XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
    ajax.open('GET', URL); 
    ajax.onreadystatechange = function(){
		document.getElementById(update).innerHTML = ajax.responseText;
    }; 
    ajax.send(null); 
  }
}

Desde CSSGallery.info podemos testear la versión online y/o descargar un zip para probarlo en nuestro local.

La calculadora tambien se hace 2.0

5 ene

+ 1

Una muestra que la Web 2.0 está aquí es que hasta la calculadora se está inmersa en este mundo. Lo curioso es que tenga que hacer una petición ajax para cada cálculo… pero es una aproximación.

CSSHttpRequest, ajax cross-domain con CSS

24 oct

+ 6

El Ajax entre diferentes dominios es algo que veremos dentro de unos meses en las nuevas versiones de los navegadores actuales. Mientras tanto los desarrolladores están dando soluciones a esta necesidad y ahora, usando la manipulación del CSS desde Javascript solventan el problema

CSSHttpRequest.get(
        "http://www.nb.io/hacks/csshttprequest/hello-world/",
        function(response) { alert(response); }
    );

Si revisamos el código, vemos la magia de esta técnica:

var s = chr.getStyleSheet();

    // IE
    if(s.addImport) {
        index = s.addImport(url);
        item = s.imports(index);
    }

    // W3C
    else if(s.insertRule) {
        index = s.insertRule("@import url(" + url + ");", 0);
        item = s.cssRules[index];
    }

Me encanta ver como la necesidad despierta estas maravillas entre los desarrolladores.

16 formularios de contacto con Ajax

22 oct

+ 1

Interesante recopilatorio de formularios de contacto que usan la tecnología Ajax para complementar funcionalidades y ofrecer al usuario una página atractiva y cómoda de usar.

SexyLightbox 2, nueva versión con nuevas funcionalidades

13 oct

+ 3

Desde Coders.me descubro la siguiente versión de SexyLightbox, “la version de Lightbox más sexy”.

sexylightbox2

Esta nuev versión además de mostrar imagenes, nos permite introducir HTML, mediante peticiones Ajax o plano. Además de reajustar su tamaño dependiendo del tamaño de la imagen y de la pantalla del navegador.

Google Gears para Safari

26 ago

+ 1

Con esta versión para Safari, tenemos ya Google Gears para:

  • Internet Explorer 6+ y Firefox 1.5+ sobre Windows
  • Firefox 1.5+ sobre Linux
  • Firefox 1.5+ sobre MacOs X
  • Internet Explorer 4.01+ sobre Windows Mobile.
  • Opera Mobile 9.50
  • Opera 9.5*

La lista va creciendo y eso nos acerca a una propuesta realmente interesante para suplantar el almacenamiento DOM hasta que este esté más y mejor implantado en los navegadores futuros.

* Recordaba que la versión 9.50 estaba preparada para trabajar con Google gears, pero buscando información solo he encontrado para la versión Mobile, así que por el momento lo dejo como interrogante. Actualizaré en cuanto tenga más info.

Lee los datos ID3 de tus MP3 con Javascript

19 ago

+ 3

Cuando creía que no podría ver nada que me sorprendiera, llega Jacob Seidelin y me deja boquiabierto ante la posibilidad de leer datos EXIF de una foto directamente desde Javascript. Algo que hasta la fecha únicamente había hecho con PHP o algún otro lenguaje de servidor.

Pasan 90 días y voala! Jacob nos vuelve a sorprender sacando la información ID3 de los fichero MP3. Para los que no sepan de que trata el ID3 Tag, solo decir que es la información que almacenamos juntos a nuestros ficheros MP3, el albúm, artística, fecha de publicación,… todo está incluido dentro del fichero MP3 y al pasarlo de un PC a otro, este se mantiene.

// Dirección del fichero MP3 (debe estar en el mismo dominio).
var file = "mymusicfile.mp3";

// Definimos la función a realizar después de leer los datos.
function mycallback() {
 alert("All tags in this file: " + ID3.getAllTags(file).toSource());
 alert("Title: " + ID3.getTag(file, "title") + " by artist: " + ID3.getTag(file, "artist"));
}

ID3.loadTags(file, mycallback);

Como podemos ver, su uso es realmente sencillo. Pero en su interior todo es mucho más complejo.

La magia reside en la librería BinaryAjax, una librería desarrollada por él con la que podemos realizar una llamada a un fichero asincronamente, de ahí Ajax del nombre, el que carga para así poder obtener los datos leyendo directamente del contenido binario del fichero. Una librería realmente sorprendente.

Actualmente no funciona para Opera, … es que algo malo tendría que tener :D, teneis un ejemplo para verlo funcionando aqui mismo.

img2json, obtén datos de imagenes

12 ago

+ 3

img2json es una de esas herramientas que te puedan ayudar a dar un valor extra a tus aplicaciones web. Con ella, puedes obtener datos de imagenes desperdigadas por la red obteniendo sus datos EXIF.

Los datos EXIF, son aquellos que se almacenan en la cámara en la que fueron tomadas, tal como la fecha, compresión, configuración personalizada para la foto, marca y modelo de la cámara,… datos que ya vimos como obtenerlos con Javascript.

Ahora podemos hacerlo online gracias a img2json, obteniendo un fichero json con todos los datos disponibles para cualquier imagen.

Ejemplo

http://img2json.appspot.com/go/?url=https://www.anieto2k.com/wp-content/themes/anieto2k08/images/logo2.jpg

Únicamente tendremos que pasar como parámetro la imagen que queremos procesar y automáticamente nos devolverá los datos en formato json en el formato siguiente:

{
	url: "URL_DE_LA_IMAGEN",
	mimeType: "MIME_TYPE",
	width: WIDTH,
	height: HEIGHT,
	byteSize: TAMAÑO_EN_BYTES,
	exif: {DATOS_EXIF}
}

Via

Firefox3 integra opción nativa para gestionar la subida de ficheros

8 jul

+ 3

Una de las nuevas funcionalidades de Firefox3 es la extensión de los elementos <input type="file" /> que nos permite utilizarlos previamente antes de subirlos a nuestro servidor mediante Javascript.

firefox3_files

Como podemos ver en Firebug, vemos que los elementos <input /> incorporan una propiedad DOM extra llamada files, que se compone de un array de elementos ordenados que hacen referencia a los ficheros subidos mediante ese elemento.

Esta propiedad, dispone de 3 métodos con las que podremos hacer uso de los elementos que subamos:

  • Atributos : fileSize y fileName
  • Métodos: getAsDataURL, getAsBinary y getAsText

Ejemplo de uso

function writeText() {
    var data = $('text').files.item(0).getAsBinary();
    $('result').update(data);
    $('textsize').update($('text').files.item(0).fileSize);
}
function writeImage() {
  var data = $('image').files.item(0).getAsDataURL();
  $('imageresult').src = 'data:' + data;
  $('imagesize').update($('image').files.item(0).fileSize);
}

Google Ajax Libraries API, ajax sobre la arquitectura Google

27 may

+ 16

Hoy, la comunidad de desarrolladores web ha saltado de alegría al ver el anuncio por parte de Google, de su nuevo proyecto, Google Ajax Libraries API.

Sin duda Google dispone, hoy en día, de una infrastructura capaz de resistir a todos los usuarios de internet accediendo simultáneamente, pues es muy inteligente por su parte, ofrecerla para que fines como este. Con Google Ajax Libraries API, podremos acelerar la carga de nuestro Javascript y tener de forma estandarizada los más importantes frameworks javascript.

Actualmente la lista es la siguiente:

* No son frameworks JS, pero tambien están disponibles dentro de Google Ajax Libraries API.

Aunque conociendo a Google, no descartaría que fueran añadiendo nuevas librerías.

¿Como usarlo?

Para usar este nuevo invento, tenemos 2 opciones:

1) Cargar la librería directamente

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>

De esta forma estaremos cargando directamente desde los servidores de Google la versión 1.6.0.2 de Prototype. Si queremos cargar cualquier otra librería, cargaremos la ruta correspondiente:

//jQuery

http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js

// Prototype

http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js

//Script.aculo.us

http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js

//MooTools

http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools-yui-compressed.js

//Dojo

http://ajax.googleapis.com/ajax/libs/dojo/1.1.1/dojo/dojo.xd.js

2) Cargarmos mediante el sistema de carga de Google Ajax Libraries API, google.load().

< strong><script src="http://www.google.com/jsapi"></script>
<script>
// Load jQuery
google.load("jquery", "1");

// on page load complete, fire off a jQuery json-p query
// against Google web search
google.setOnLoadCallback(function() {
$.getJSON("http://ajax.googleapis.com/ajax/services/search/web?q=google&;v=1.0&;callback=?",

// on search completion, process the results
function (data) {
if (data.responseDate.results &&
data.responseDate.results.length>0) {
renderResults(data.responseDate.results);
}
});
});
</script>

Como podemos observar en negrita, vemos que la ruta del javascript que hemos de cargar es diferente y no hace referencia a ninguna librería, ya que simplemente contiene el código necesario para que podamos cargar la librería que deseemos.

La función google.load()

google.load(name, version, opt);

La función google.load() es la clave para entender el sistema anterior, ya que ella es la que se encarga de cargar la librería que solicitemos.

google.load("jquery", "1");

Esta función recibe 3 parámetros, el primero indica la librería que queremos cargar, pudiendo ser cualquiera de estos casos.

google.load("jquery", "1.2.3");
google.load("prototype", "1.6");
google.load("scriptaculous", "1.8.1");
google.load("mootools", "1.11");
google.load("dojo", "1.1.1");

El segundo, indica la versión de la librería que queremos cargar. Este parámentro es un poco especial, ya que si indicamos que queremos la versión 1.2 de jQuery, Google automáticamente devolverá la ultima versión disponible de la rama 1.2. De igual forma si indicamos la versión 1, nos devolverá la más alta de la rama 1, osea la 1.2.3. Esto nos permite trabajar con versiones antiguas, o más nuevas dependiendo del tipo de desarrollo que estemos efectuando.

El último parámetro será usado para las opciones personalizadas de cada unos de los framework, por ejemplo, MooTools, jQuery y Dojo permite solicitar el código sin comprimir.

google.load("mootools", "1.11", {uncompressed:true});

Usandolo con herramientas de Google

Algo que tambien me ha gustado ha sido que la función google.load(), integre la posibilidad de cargar el API de Google Maps, Google Ajax Search, Google AJAX Feed API o Google data APIs. Algo que nos permite reducir considerablemente las llamadas a las diferentes API’s para cargar el código.

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi?key=ABCDEFG"></script>
    <script type="text/javascript">
      google.load("maps", "2");
      google.load("search", "1");

      // Call this function when the page has been loaded
      function initialize() {
        var map = new google.maps.Map2(document.getElementById("map"));
        map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);

        var searchControl = new google.search.SearchControl();
        searchControl.addSearcher(new google.search.WebSearch());
        searchControl.addSearcher(new google.search.NewsSearch());
        searchControl.draw(document.getElementById("searchcontrol"));
      }
      google.setOnLoadCallback(initialize);
    </script>

  </head>
  <body>
    <div id="map" style="width: 200px; height: 200px"></div>
    <div id="searchcontrol"></div>
  </body>
</html>