TecnoRetales » HTML http://www.tecnoretales.com La experiencia no se olvida Wed, 07 Jul 2010 21:23:33 +0000 http://wordpress.org/?v=2.8.5 en hourly 1
Google Charts API para generar gráficas en tu web http://www.tecnoretales.com/internet/google-charts-api-para-generar-graficas-en-tu-web/ http://www.tecnoretales.com/internet/google-charts-api-para-generar-graficas-en-tu-web/#comments Fri, 04 Sep 2009 17:27:09 +0000 Manel Pérez Mata http://www.tecnoretales.com/?p=616

Charts generados con GoogleSi quieres montar unas estadísticas profesionales en tu web de manera rápida y sencilla (y lo que es mejor, gratis!), podemos abusar una vez más de nuestro gran amigo Google, pues a liberado una API mediante la qual podemos generar estadísticas sin recurrir a grandes conocimientos técnicos.

Para mostrar una gráfica en nuestro site, únicamente debemos hacer una llamada a una URL (construida siguiendo unas directrices) en el src de un tag image.

Google pone a nuestra disposición una gran cantidad de tipos de gráficas para que se adapte perfectamente a nuestras necesidades: lineales, barras, circulares, diagr de Venn, gráficas de punto e incluso mapas.

Veámos un ejemplo sencillo.  Supongamos que queremos insertar en nuestro portal una gráfica lineal con estadísticas de visitas en el último mes. Pues únicamente necesitamos llamar a la siguiente url:

http://chart.apis.google.com/chart?cht=lc&chxt=x,y&chd=t:3,6,20,40,56,48,93&chs=400×200

Para obtener el siguiente gráfico:

Donde los parámetros pasados son:

  • cht: Tipo de gráfico a utilizar.
  • chxt: Indicamos que muestre los ejex x e y.
  • chd: Le pasamos los valores que queremos que muestre.
  • chs: Indicamos el tamaño de la imágen a mostrar.

A partir de aquí, podemos ir complicando la cosa, añadiendo colores, líneas múltiples, pasándole los datos mediante JavaScript… y un sinfin de cosas más.

Para más referencias, ya sabeis, visitad la API de Google Charts, pero antes de cerrar el post, os dejo una gráfica de lo que podrían ser las zonas con mayor concentración de polen de flores de loto:

]]> http://www.tecnoretales.com/internet/google-charts-api-para-generar-graficas-en-tu-web/feed/ 0 Imágenes en base-64 para Internet Explorer http://www.tecnoretales.com/programacion/imagenes-en-base-64-para-internet-explorer/ http://www.tecnoretales.com/programacion/imagenes-en-base-64-para-internet-explorer/#comments Mon, 15 Jun 2009 06:31:27 +0000 Manel Pérez Mata http://www.tecnoretales.com/?p=161

Prácticamente todos los navegadores actuales, soportan imágenes codificadas en base64, sin embargo, esto no pasa con Internet Explorer (hasta su versión 7 al menos). Estareis pensando que no debería ser un problema ya que no solemos colocar las imágenes codificadas en el código html, sin embargo, podemos encontrarnos con la necesidad de tener embedida la imágen dentro del código por motivos x.

Un ejemplo de uso de imágenes en base64 en el código html sería:

<img src="data:image/gif;base64,R0lGODlhNQAkAKIAAHJycvwHBwAAqwCjC+3PDv///wAAAAAAACwAAAAANQAkAAAItAAHCBxIsODAAggTKlyYMIDDhxAjOjRIsSDDiwslaoRYseMAjCALbBzpsWJIjCM3lqR48mJKjSsNtmT4UmJMizMV1ox4k2BOnTsf9jz4E2FQoUM/FhV5NEBSpUWbOk26lOnRp1WlYl2qlSrXplujgvUq9irZn12HZh2r9qvZtmWDhkXLtufat3bdyj2bM23euDvn9q178+5euHTxFtYbmO9Mv4sB1xT8mHBMw40RD1Z8mXHNgAA7" width="200" alt="Base64 encoded image" />

Nos dará como resultado la siguiente imágen:

Base64 encoded image

mira el código fuente si todavía tienes dudas ;)

Sin embargo, si estás viendo este artículo desde un navegador Internet Explorer (un consejo desde el cariño… cambia a mozilla Firefox), verás algo similar a esto:

Error imágen base64

¿Cómo podemos solucionarlo? Pues de una manera bastante sencilla, podemos pedir a PHP mediante JavaScript que nos haga la decodificación del código base64:

<?php
	if(!empty($_SERVER["QUERY_STRING"])) {
		$data = split(";", $_SERVER["QUERY_STRING"]);
		$type = $data[0];
		$data = split(",", $data[1]);
		header("Content-type: ".$type);
		echo base64_decode($data[1]);
		die();
	} else {
?>
		<html>
			<body>
				<script>
				// Expression Regular para encontrar imágenes en Base64
				var BASE64_DATA = /^data:.*;base64/i;
				// Path al script php que decodifica el código
				var base64Path = "prueba.php";
				function fixBase64(img) {
					// check the image source
					if (BASE64_DATA.test(img.src)) {
						// pass the data to the PHP routine
						img.src = base64Path + "?" + img.src.slice(5);
					}
				};

				// fix images on page load
				onload = function() {
					for (var i = 0; i < document.images.length; i++) {
						fixBase64(document.images[i]);
					}
				};
				</script>

				<img src="data:image/gif;base64,R0lGODlhNQAkAKIAAHJycvwHBwAAqwCjC+3PDv///wAAAAAAACwAAAAANQAkAAAItAAHCBxIsODAAggTKlyYMIDDhxAjOjRIsSDDiwslaoRYseMAjCALbBzpsWJIjCM3lqR48mJKjSsNtmT4UmJMizMV1ox4k2BOnTsf9jz4E2FQoUMFhV5NEBSpUWbOk26lOnRp1WlYl2qlSrXplujgvUq9irZn12HZh2r9qvZtmWDhkXLtufat3bdyj2bM23euDvn9q178+5euHTxFtYbmO9Mv4sB1xT8mHBMw40RD1Z8mXHNgAA7" alt="Base64 encoded image" width="150" height="150"/>
			</body>
		</html>
<?php
	}
?>

Como podemos ver, la función JavaScript fixBase64 chequea que el source de la imágen contenga las palabras “data:xxxxx;base64″, en caso afirmativo, le envía toda la información contenida en el source a PHP. Este, utiliza la función base64_decode para traducirla y la devuelve a la página. En este momento, se verá perfectamente en cualquier navegador que tenga JavaScript habilitado.

]]> http://www.tecnoretales.com/programacion/imagenes-en-base-64-para-internet-explorer/feed/ 1 Redimensionado de iframe al tamaño de la página contenida http://www.tecnoretales.com/programacion/redimensionado-de-iframe-al-tamano-de-la-pagina-contenida/ http://www.tecnoretales.com/programacion/redimensionado-de-iframe-al-tamano-de-la-pagina-contenida/#comments Mon, 08 Jun 2009 08:04:39 +0000 Manel Pérez Mata http://www.tecnoretales.com/?p=172

Con este sencillo código JavaScript, ajustamos la altura del iframe al tamaño de la página en él conteido, de ese modo, evitaremos el molesto scroll lateral.

<html>
    <body>
        <script language="JavaScript">
            //Ajusta el tamaño de un iframe al de su contenido interior para evitar scroll
            function autofitIframe(id){
                if (!window.opera && document.all && document.getElementById){
                    id.style.height=id.contentWindow.document.body.scrollHeight;
                } else if(document.getElementById) {
                    id.style.height=id.contentDocument.body.scrollHeight+"px";
                }
            }
        </script>
        <iframe id="miFrame" src="http://www.tecnoretales.com/" width="100%" height="0" frameborder="1" transparency="transparency" onload="autofitIframe(this);"></iframe>
    </body>
</html>

Una vez cargado el iframe, llamamos a la función autofitIframe que se encargará de obtener la altura total de la página contenida y se la asignará al tamaño del iframe.
Simplemente…

]]> http://www.tecnoretales.com/programacion/redimensionado-de-iframe-al-tamano-de-la-pagina-contenida/feed/ 2
Enmascarar mails para evitar SPAM http://www.tecnoretales.com/programacion/enmascarar-mails-para-evitar-spam/ http://www.tecnoretales.com/programacion/enmascarar-mails-para-evitar-spam/#comments Thu, 07 May 2009 19:12:29 +0000 Manel Pérez Mata http://www.tecnoretales.com/?p=60

Aquí os dejo una forma sencilla de enmascarar un mail en una web de manera que, por pantalla mostrará el texto, sin embargo, si miramos el código fuente (o lo que es lo mismo, un bot visita nuestra web en busca de direcciones de correo electrónico) no encontraremos este texto.

El “truco” está en transformar cada uno de los caracteres a unicode utilizando esta función que me he entretenido en programar:

  1. function convertCP2HexNCR($textString) {
  2.     $outputString   = "";
  3.     $CPstring       = "";
  4.  
  5.     for ($i = 0; $i < strlen($textString); $i++) {
  6.         $b = ord($textString[$i]);
  7.         $CPstring .= dechex($b). ‘ ‘;
  8.     }
  9.     $textString = str_replace(‘/^\s+/’, ”, $CPstring);
  10.  
  11.     if (strlen($textString) == 0) { return ""; }
  12.  
  13.     $textString = str_replace(”, ‘ ‘,$textString);
  14.     $listArray = explode(‘ ‘, $textString);
  15.  
  16.     for ($i = 0; $i < count($listArray); $i++ ) {
  17.         $n = $listArray[$i];
  18.         $outputString .= ”.$n.‘;’;
  19.     }
  20.  
  21.     return $outputString;
  22. }
  23.  
  24. echo convertCP2HexNCR("mehanhechoclick@yhacecosquillitas.com");

Si ejecutamos este código PHP desde un navegador, veremos que por pantalla aparece el email, sin embargo, al hacer Ctr+U (en Firefox) o lo que es lo mismo, ver código fuente, veremos que el resultado es muy diferente, algo como:

&#x6d;&#x65;&#x68;&#x61;&#x6e;&#x68;&#x65;&#x63;&#x68;&#x6f;&#x63;&#x6c;&#x69;...

En cualquier caso, es importante remarcar que no es un método infalible ya que, como os comentaba, lo que realmente estamos haciendo es transforar el texto a unicode, por lo tanto, un bot programado para tal efecto, sería capaz de detectar y recodificar el email, pero esos casos tienden a 0.

]]> http://www.tecnoretales.com/programacion/enmascarar-mails-para-evitar-spam/feed/ 0