ImageInfo: obtener información de una imágen con JavaScript

ImageInfo es una pequeña librería JavaScript que obtiene la información ó metadatos (formato, dimensiones, etc) de los archivos de imágen. Basado en IMG2JSON.

Bastará con incluir los archivos JavaScript necesarios en la cabezara de nuestro documento HTML. Pueder ver en el siguiente ejemplo la forma de usar esta librería.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Reading image's info</title>
<script type="text/javascript" src="binaryajax.js"></script>
<script type="text/javascript" src="imageinfo.js" ></script>
<script type="text/javascript" src="exif.js" ></script>

<script type="text/javascript" >
	// URL de la imagen (debe estar en el mismo dominio)
	var file = "london-olympic-logo.gif";
	
	// define tu propia función de respuesta
	function mycallback() {
		document.getElementById('info1').innerHTML = "Todo la informacion: " + ImageInfo.getAllFields(file).toSource()
	   	document.getElementById('info2').innerHTML = "Formato: " + ImageInfo.getField(file, "format") + ", Dimensiones : " + ImageInfo.getField(file, "width") + "x" + ImageInfo.getField(file, "height")
	}
	
	// Finalmente mostrar la informacion de la imagen
	ImageInfo.loadInfo(file, mycallback);
</script>
</head>

<body>
    <img src="london-olympic-logo.gif" alt="Imagen" height="126" width="210"  />
    <h3>Informacion de la imagen</h3>
    <div id="info1">
    </div>
    <div id="info2">
    </div>
</body>
</html>

ImageInfo libreria JavaScript

Con el método getField podemos obtener información específica de la imagen. He aquí otros valores para getField:

  • format (formato de la imagen el cual puede retornar: "JPEG", "PNG", "GIF" or "BMP")
  • version (actualmente solo para formatos GIF)
  • width (ancho en píxeles)
  • height (altura en píxeles)
  • bpp (bits por píxel)
  • alpha (retorna verdadeo si el canal alpha está presente, solo para formato PNG)
  • mimeType (el tipo mime enviado por el servidor)
  • byteSize (tamaño del archivo)
  • exif (si la imagen contiene datos EXIF. Solo en formato JPEGs)

Vía Ajaxian

Blog del autor Nihilogic

Tell A Friend: Widget para compartir contenidos de tu blogs por E-mail

Tell A Friend  es un widget para blogs y webs hecho en JavaScript que permite a los visitantes del sitio enviar el link/enlace de la página web actual a un amigo por medio de correo electrónico ó mensajería instantánea como Google Talk, Yahoo! ó Messenger. Es muy distinto a ShareThis y AddThis, ya que estos más se centrar en guardar el enlaces en sitios para marcadores publicos ó para promoverlos. Sin embargo Tell A Friend se enfoca en nuestros contactos directos a través del correo electrónico ó mensajería. Por algo compartir contenidos en la web mediante correo es la forma más popular.

Enviar por correo

Vía DigitalInspiration

Mi primera aplicación con AJAX ... usando Prototype!

En este blog hemos venido hablando y desarrollando con AJAX un gran número de ejemplos prácticos, especialmente relacionandolo con PHP y MySQL. Y realmente que hemos aprendido bastante, pues sea ha desarrollado desde la misma raíz de AJAX: el objeto XMLHttpRequest (aka. XHR), pese a que hay muchas librerías JavaScript que la implementan de forma más resumida. Justamente ahora nuestro objetivo es centrarnos en los frameworks y como con estos podemos implementar AJAX en nuestras aplicaciones, y empezaremos por uno de los más conocidos: Prototype. Veamos un ejemplo sencillo (descarga Prototype).

Mostraremos el contenido de un archivo de texto llamado datos.txt, podemos copiar y pegar cualquier texto en este archivo. En un archivo HTML aparte, pongámosle index.html, llamaremos a la librería Prototype, y creamos una función JavaScript en cual usará el objeto AJAX con el método Request para realizar la petición del contenido de datos.txt. El contenido de datos.txt se mostrará en un contenedor-div que nosotros especifiquemos según el atributo id. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Primer ejemplo AJAX Prototype</title>
</head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript">

function cargarContenido(fuente_datos, contenedor_id) {
	var url = encodeURIComponent(fuente_datos);
	var params = '';

	new Ajax.Request(url, {
	method: 'get', parameters: params,
	onSuccess: function(transport) {

	if(transport.responseText.length > 0){
		document.getElementById(contenedor_id).innerHTML=transport.responseText;
	}}});
}

</script>
</head>
<body>
<a href="#" onclick="cargarContenido('datos.txt', 'contenedor')">Cargar contenido</a>
<div id="contenedor">
{aqui aparecera el contenido}
</div>
</body>

Si tienes conocimientos de HTML y algo de JavaScript será suficiente para entender el código. (sino date un paseo por la sección AJAX de este blog). En el método Request podemos especificar la forma de obtener datos (GET ó POST) y algunos parametros, entre otros.  

Lo que hicimos con el objeto XMLHttpRequest, PHP y MySQL anteriormente, trataremos de hacerlo con Prototype.

Enlaces | AJAX, Colección de tutoriales con AJAX + PHP y MySQL



Cómo redireccionar una página web (Redireccionado 301)

HTTP 301 es una método eficaz para redireccionar páginas web. No es díficil de aplicar en nuestras aplicaciones, además tiene la ventaja de preservar los rankings en los motores de búsqueda. El código 301 se interpreta como "movido permanentemente".

A continuación se muestra cómo aplicar el código 301 en algunos lenguajes y servidores web.

Redireccionar con ColdFusion 

<.cfheader statuscode="301" statustext="Moved permanently">
<.cfheader name="Location" value="http://www.new-url.com">

Redireccionar con PHP 

<?
  Header( "HTTP/1.1 301 Moved Permanently" ); 
  Header( "Location: http://www.new-url.com" ); 
?>

Redireccionar con ASP 

<%@ Language=VBScript %>
<%
 Response.Status="301 Moved Permanently"
 Response.AddHeader "Location","http://www.new-url.com/"
%>

Redireccionar con ASP .NET 

<script runat="server">
 private void Page_Load(object sender, System.EventArgs e)
 {
 Response.Status = "301 Moved Permanently";
 Response.AddHeader("Location","http://www.new-url.com");
 }
</script>

Ver más: Redireccionar con IIS, JSP, CGI, Rails, Apache (htaccess) y HTML.

Mostrar backlinks (enlaces externos) de nuestra web en Google con PHP

Averiguando algunos script para una herramienta que pienso desarrollar, encontré estos dos códigos que seguramente les serán de utilidad en lo relacionado a obtener información acerca de los backlinks de nuestro sitio web ó blog. Los backlinks son importantes en el posicionamiento en los buscadores y está relacionado con la popularidad de nuestro sitio en la internet.

Esta primera función muestra el número de backlinks que tiene Google de nuestro sitio web:

<?
function google_backs($url){ 
    $site = fopen('http://www.google.com/search?q=link%3A'.urlencode($url),'r'); 
    while($cont = fread($site,1024657)){ 
        $total .= $cont; 
    } 
    fclose($site); 
    $match_expression = '/of about <b>(.*)</b> linking to/Us'; 
    preg_match($match_expression,$total,$matches); 
    return $matches[1]; 
}
echo google_backs("misitio.com");
?>

La segunda función, no tiene que ver nada con Google pero es igual de útil. El código muestra si nuestro sitio web está enlazado desde cierto sitio web:

<?php
function check_back_link($remote_url, $your_link) {
    $match_pattern = preg_quote(rtrim($your_link, "/"), "/");
    $found = false;
    if ($handle = @fopen($remote_url, "r")) {
        while (!feof($handle)) {
            $part = fread($handle, 1024);
            if (preg_match("/<a(.*)href=["']".$match_pattern.
"(/?)["'](.*)>(.*)</a>/", $part)) {
                $found = true;
                break;
            }
        }
        fclose($handle);
    }
    return $found;
}
// ejemplo:
if (check_back_link("http://www.igeek.com.ar", "http://www.ribosomatic.com")) echo "enlace existente";
?>

Como se aprecia en el ejemplo, verificamos si RibosoMatic está enlazado desde la web de mi amigo Homero: iGeek. El resultado es "enlace existente".

Mi objetivo es hallar una función más compleja para hallar/mostrar backlinks de nuestra web así como tantas herramientas SEO (cómo por ejemplo Backlink Checker) que hay por allí. Pero con estás funciones quizás podamos lograr algo.

Implementar XML-RPC en PHP

Algo que interesante de WordPress es que podemos escribir nuevos contenidos a través de software de escritorio como, por citar un ejemplo, Windows Live Writer. Aunque en realidad WordPress no es único CMS que provee está característica, a través de éste me di cuenta que usa un archivo llamado xmlrpc.php. Me puse averiguar estos términos: XML-RPC. En Wikipedia encontramos una definición más que satisfactoria:

... es un protocolo de llamada a procedimiento remoto que usa XML para codificar los datos y HTTP como protocolo de transmisión de mensajes.

Es un protocolo muy simple ya que sólo define unos cuantos tipos de datos y comandos útiles, además de una descripción completa de corta extensión. La simplicidad del XML-RPC está en contraste con la mayoría de protocolos RPC que tiene una documentación extensa y requiere considerable soporte de software para su uso.

[...]

Existen implementaciones para varios sistemas operativos, lenguajes de programación, licencias comerciales y de software libre.

Llamar a procedimientos remotos usando XML enviandolo por HTTP. Así podía entender mejor como las aplicaciones de escritorio para escribir contenidos en los blogs funcionaban. Eso quiere decir que puedo enviar datos de un aplicación hecha con cierto lenguaje de programación a otra aplicación desarrollada con un lenguaje distinto usando este protocolo.

Como menciona la definición XML-RPC: existen implementaciones para varios lenguajes de programación. Lo cual nos indica que algunos lenguajes no traen de forma nativa funciones que manejen este protocolo, por lo que se ayudan de algunas librerías extras (ver cómo podemos implementar con distintos lenguajes de programación).

En el caso de PHP existen muchas librerías para implementar XML-RPC, y así usarlo en nuestras aplicaciones. Una de estas, y que me parecio simple de usar, es phpxmlrpc. 

Para mostrar el funcionamiento, veamos el siguiente ejemplo, que por cierto lo encontre en un blog en español, aunque hize algunas pequeñas modificaciones para que funcionará correctamente.

Ver Artículo Completo ››

Agregar marcas en Google Maps con un formulario HTML (+ jQuery + XML + PHP)

Podemos sacarle mucho provecho a Google Maps. Una característica interesante son los marcadores ó marcas (makers) que podemos ubicar sobre los mapas. Este pequeño artículo te explica, de manera general, como podemos hacer para agregar marcas haciendo uso de un formulario HTML sobre el mismo mapa. Usaremos código PHP para guardar estos marcadores en un archivo XML. Cuando se carge nuevamente el mapa cargará las marcas guardadas en el archivo XML. Haremos uso de jQuery para el manejo de JavaScript sin complicaciones.

Ver Artículo Completo ››

Cómo integrar slideshow en tu tema de WordPress

Si tienes WordPress como CMS entonces este tutorial será de tu interés. Smooth Gallery es un slideshow (en nuestro idioma, una especie de presentación ó diapositivas de imágenes junto con texto de forma interactiva) hecho con JavaScript y que podemos usarlo en nuestras aplicaciones web con tan solo unas cuantas líneas de código y configuraciones. En CatsWhoCode le han dado una aplicación interesante, pues en su página inicial se muestra un slideshow de las imágenes de los artículos recientes del blog, con el titulo y un extracto de este (si le echamos un vistazo tendremos una idea de lo que se quiere lograr).

Ahora CatsWhoCode explica como aplicar este slideshow en WordPress paso a paso. 

Slideshow en WordPress fácilmente

Tutorial | How to : Integrate a slideshow in your wordpress theme

Barras de progreso con jQuery, JavaScript, CSS y Photoshop

Barras de progreso con jQuery

jQuery.UI ProgressBar Widget

Progress Bar 1

Barra de progreso con jQuery y PHP

Progress Bar 2

Plugin jqUploader para jQuery

Progress Bar 3

Plugin para jQuery

Progress Bar 4

Ver Artículo Completo ››

Comparando utilidades de compresión JavaScript

En vista de que en el desarrollo de aplicaciones web se hecha mano de JavaScript, es necesario poder aligerar en gran medida el peso de nuestros códigos JavaScript para una rápida carga de nuestro aplicaciones en el navegador.

Y en realidad la mesa está servida, por un lado por que existen varios frameworks JavaScript que nos facilitan escribir código en este lenguaje con unas cuantas líneas; y por otro lado, pues tenemos a nuestra alcance una gran variedad de herramientas para comprimir nuestros scripts, incluyendo a los frameworks.

Puesto que estos frameworks no son conocidos por ser ligeros en cuanto a KB, pero podemos  aligerar su peso dependiendo del compresor usado y el tipo de compresión. A este respecto The JavaScript CompressorRater nos puede ayudar ya que utiliza algunos de los compresores (JSMin, Dojo shrinksafe, Packer, the YUI Compressor) y frameworks (Dojo, YUI, Ext JS, jQuery, base2, Scriptaculous) más populares para comparar cuál de ellos nos combiene.

Un dato interesante de este test es que la librería YUI es la que más se puede comprimir de todas sus rivales (hasta 6.7% de compresión) usando Packer (tipo de compresión: shrink, privateVars) como compresor. Echen un vistazo ustedes mismos.

Enlace | The JavaScript CompressorRater

10 páginas : Anterior 1 ...3 4 5 6 7 ...10 Siguiente

Navegación

Categorias

Archivos

Monitored by eXternalTest