el 33

Tips para hacer funcionar tu sitio web en IE

Sabiendo que tu aplicación funciona perfectamente en Firefox, Opera, Safari, Chrome… ver cómo se comporta en IE puede llegar a resultar muy frustante. Y no estoy hablando del CSS, sino de pequeñas diferencias en la especificación del DOM.

He estado lidiando un poco sobre cómo hacer funcionar una aplicación en IE 6 sin ningun fallo,  éstos son sólo son algunos tips rápidos e información que encontrado:

• Como víen Anieto2k, existe Companion JS y tiene buena pinta como debugger, pero quería algo sencillo para el momento así que directamente usé Visual Studio (no lo recomiendo) con las excepciones que me daba ; )
• Existe una versión muy reducida de Firebug para Internet Explorer llamada Firebug Lite.
• Habilita el modo debug en IE, enlazo al tutorial.
• Inserta la etiqueta tbody en tus tablas, es una buena práctica además de ser necesario para Internet Explorer.
• Al asignar una clase con setAttribute a un elemento creado mediante DOM, en IE es className y en los demás class.
• Un ligero script para detectar el navegador del usuario.
• Cuando quieres obtener el textNode de un elemento, en algunos es innerText y en otros contentText. Lo he arreglado con un simple el.innerText || el.contentText.
• Hay muchas librerías que abstraen las distintas formas de asignar eventos, pero bueno para IE te puede servir elemento.onclick = function(){}
• El evento onchange de un checkbox sólo se dispara al perder el foco. La solución es cambiarlo por onclick.
• Si tienes que añadir atributos a un elemento con setAtribute, primero insertalo en el árbol DOM.
• Si asignas un margin en la misma dirección que el float de un elemento, IE dobla este margin.  Hay una explicación bastante detallada aquí. Existen varias soluciones, una de ellas es asignar la propiedad con ‘_’ delante, que sólo será interpretada por IE.
  [-]^?View Code CSS

  .exampleContainer{   float:left;   width: 40%;   margin-left: 100px;   _margin-left: 50px;   }

• Para que un elemento contenedor se expanda por ejemplo dos divs flotados a la izquierda y a la derecha, en IE se necesita un hack que está muy bien explicado ( con otros tips ) en la página de Marcio Barrios.

No es mucha información y puede que me equivoque, pero espero que le sirva a alguien. ( y a mí­ para que no se me olvide )

Debug en Javascript con la consola de Firebug

Tras un tiempo sin actividad alguna, espero volver al mismo ritmo que los dos primeros meses de blog. Ahora que estoy trabajando bastante con Javascript/AJAX, creo que puede resultar útil escribir sobre cómo utilizar Firebug para realizar un buen debug de una aplicación web.

El modo más simple para saber qué está haciendo una aplicación en cada momento sería una función parecida a esta:

function printTestInfo( msg )
{
    var container = document.getElementById("systemInfo");
    container.innerHTML += msg + "
";
}

Muy simple y muy limitada, lo mismo puedes hacer llenando de alerts tu código. Para cuando tienes unas pocas líneas de código puede estar bien, pero cuando tiener muchas llamadas AJAX y trabajas mucho con el DOM no es suficiente.

Firebug se ha hecho indispensable para cualquier desarrollador web, te ahorra mucho tiempo y poco a poco están saliendo plugins que lo hacen mucho más potente. En mi caso lo que más utilizo es: HTML y CSS inspector, inspeccionar el árbol DOM, la extensión FireCookie, YSlow de vez en cuando, el debug y profile de Javascript, y por último el motivo de este post, la consola.

La consola aparte de incorporar un command line muy potente y toda la información necesaria sobre llamadas AJAX realizadas, dispone de una API que hace que la función anterior no la vuelvas a utilizar. Es un objeto que dispone de una serie de métodos muy útiles para mostar información en la consola de Firebug.

Tenéis el listado completo de métodos en la documentación de Firebug, que recomiendo echarle un vistazo porque hay muchas opciones que no sabes ni que existen. No se le puede pedir más, pero sinceramente hecho en falta que el método group lleve un identificador para poder agrupar mensajes de distintos módulos y no correlativamente cómo lo hace actualmente.

Aquí tenes un ejemplo de uso:

var callbackDasSources = {
 
    success: function(o){
         console.info('DAS REGISTRY: Success ajax request to retrieve das registry');
 
         console.log('DAS REGISTRY: Parsing ...');
         dasSources._parseDasSources(o.responseXML);
 
         console.log('DAS REGISTRY: Generating select form...');
         dasSources._printDasSources();
    },
 
    failure: function(o){
        console.error('DAS REGISTRY: Failure retrieving DAS sources..');
    }
};

Y a la consola en funcionamiento (con la extensión FireCookie):

Ahora bien, todo esto esta muy bien pero sólo sirve para Firefox. Si ejecutas tu sitio web en Internet Explorer deja de ser funcional mostrando un mensaje que no conoce el objeto console (con suerte te muestra el error, porque es algo bastante frustante el mensaje “Runtime error”). Los de Firebug han hecho un pequeño script en el que definen el objeto con los métodos vacíos, pero bueno si le añades un par de líneas usando la función printTestInfo anterior puede llegar a resultar algo útil:

if (!window.console || !console.firebug)
{
    var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",
                 "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];
 
    window.console = {};
    for (var i = 0; i < names.length; ++i)
        window.console[names[i]] = function() {
            for ( var j = 0; j < arguments.length; ++j)
                printTestInfo(arguments[j])
        }
}

El post iba a ser más largo, pero entonces no sabía que poner de título por lo que lo dejo para unos días más tarde : )

Clase para geolocalizar la IP en PHP + Google Maps API

En el proyecto pidecita.com del iWeekend de Valencia se hacía uso de Google Maps para localizar las peluquerías, y se pensó en recomendar varias al usuario en base a su ubicación. Para ello implementé una clase muy básica en PHP para geolocalizar la IP del usuario consumiendo la API de hostip.

Existen muchos servicios que ofrecen información sobre el país en el que te encuentras, pero lo que nosotros queríamos era localizar por ciudad. Este tipo de servicios suele acertar el país en un 95% de los casos, pero la provincia o ciudad no suele ser la correcta sino la del proxy de tu proveedor. Se basa en rangos de IP específicamente asignados a cada país, por lo que su fiabilidad en este sentido es media/baja. Mi IP estática que me brinda Telefónica me localiza mi provincia perfectamente, además de sus coordenadas.

Con la API REST de Hostip pódeis hacer las siguientes consultas:

http://api.hostip.info/country.php
  US

http://api.hostip.info/get_html.php?ip=12.215.42.19
  Country: UNITED STATES (US)
  City: Sugar Grove, IL

http://api.hostip.info/get_html.php?ip=12.215.42.19&position=true
  Country: UNITED STATES (US)
  City: Sugar Grove, IL
  Latitude: 41.7696
  Longitude: -88.4588

http://api.hostip.info/?ip=12.215.42.19
  [Archivo XML]

En un principio en el iWeekend parseaba el html devuelto de la 2º opción, pero ya de paso para probar la facilidad que te brinda PHP 5 para leer XML con Simple XML he utilizado la 4º opción. La clase es muy fácil de usar sólo tenéis que incluirla y llamar al método getLocationFromIp():

include('./classes/geoLocateIp.class.php');
 
$geo = new geoLocateIp();
$location = $geo -> getLocationFromIp();

La variable $location es un array asociativo con los siguientes campos: CountryName, CountryCode, City, Longitude y Latitude.

Os dejo el código fuente de la clase:

class geoLocateIp
{
	private $serviceLocateURL = 'http://api.hostip.info/?ip=';
 
	public function getLocationFromIp()
	{
		$ip = $this->getIpAdress();
 
		if (empty($ip))
			throw new Exception('Error retrieving IP address');
 
		// Use the method your server supports ( most of them only support curl )
		$xmlData = geoLocateIp::file_get_contents_curl($this->serviceLocateURL.$ip);
		//$xmlData = file_get_contents($this->serviceLocateURL.$ip);
 
		if (empty($xmlData))
			throw new Exception('Error retrieving xml');
 
		$locationInfo = $this->parseLocationData($xmlData);
 
		return $locationInfo;
	}
 
	private function getIpAdress()
        {
		if (isset($_SERVER['HTTP_X_FORWARDED_FOR'])) {
			   $ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
		}
		elseif (isset($_SERVER['HTTP_VIA'])) {
		   $ip = $_SERVER['HTTP_VIA'];
		}
		elseif (isset($_SERVER['REMOTE_ADDR'])) {
		   $ip = $_SERVER['REMOTE_ADDR'];
		}
		else {
		   $ip = NULL;
		}
		return $ip;
          }
 
	private function parseLocationData($xmlData)
	{
		// Use of Simple XML extension of PHP 5
		$xml = simplexml_load_string($xmlData);
 
		if (!is_object($xml))
		    throw new Exception('Error reading XML');
 
		$infoHost = $xml->xpath('//gml:featureMember');
		$city = $xml->xpath('//gml:featureMember//gml:name');
 
		$coordinates = $infoHost[0]->xpath('//gml:coordinates');
		$coordinates = split(',', (string) $coordinates[0]);				
 
		$info = array (
			"City"		=> (string) $city[0],
			"CountryName"	=> (string) $infoHost[0]->Hostip->countryName,
			"CountryCode"	=> (string) $infoHost[0]->Hostip->countryAbbrev,
			"Longitude"	=> $coordinates[0],
			"Latitude"	=> $coordinates[1]
		);
 
		return $info;
	}
 
	public static function file_get_contents_curl($url)
	{
		$ch = curl_init();
 
		curl_setopt($ch, CURLOPT_HEADER, 0);
		curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
		curl_setopt($ch, CURLOPT_URL, $url);
 
		$data = curl_exec($ch);
		curl_close($ch);
 
		return $data;
	}
}

Y a continuación, he preparado un mashup muy básico con dicha clase y la API de Google Maps en el que geolocaliza en el mapa tu situación. Lo he llamado Geolocate your IP, original verdad? : ) Estoy abierto a críticas del código, bugs, chapuzas… Y si queréis el código fuente sólo tenéis que decírmelo.

Update: Por una petición masiva de Darocz dejo el código fuente del mini-mashup y el de la clase geoLocateIp.

Optimiza la carga de tu sitio web

Un estudio de Yahoo revela que en los sitios web más populares el tiempo de carga total de una página viene condicionado por un 20% del lado del servidor y un 80% del cliente. Esto no quiere decir que dejemos de optimizar el servidor, pero sí que tengamos en cuenta consejos o buenas prácticas para que tu sitio web cargue más rápido.

El tiempo de respuesta de una página es muy importante de cara al usuario, no suelen tener mucha paciencia ( yo tampoco… ), por lo que la primera carga se debe tener muy en cuenta (sin ningun elemento cacheado en el navegador) . En Yahoo han creado una serie de pautas para que tengamos en cuenta a la hora de analizar el rendimiento de nuestro sitio:

Han añadido muchos consejos más que podéis ver en la página
para desarrolladores de Yahoo, me acuerdo que hace poco sólo estaban éstas 13 y ahora ya van sobre las 40. Cito sólo éstas, porque existe una extensión para Firefox en la que comprueban las trece pautas puntuándolas y con la teoría necesaria para poder solucionarlas. Se llama YSlow y la derecha podéis ver una captura evaluando mi sitio web, parece que no tengo muy buena puntación…

Ésta extensión se basa en FireBug, para los que no la conozcan es una extensión impresionante que te ayuda a depurar tu sitio web. Puedes controlar el HTML y CSS en tiempo real, analizar las peticiones que se realizan e incorpora un completo debugger de JavaScript.

Una de las prácticas importantes es reducir las peticiones HTTP, los navegadores sólo aceptan dos peticiones concurrentes del mismo dominio, por lo que a mayor número de archivos mayor número de peticiones y por consecuencia, mayor tiempo de carga.

Sitios web con mucho tráfico como Google y Yahoo reducen el número de peticiones HTTP para los iconos, botonos, pequeñas imágenes con una técnica basada en la propiedad de CSS background-image y background-position, en la que combinan las imágenes en una para después mostrar sólo el segmento adecuado.

En un principio no había encontrado una aplicación web en la que subier mis imágenes a combinar y me devolviera las propiedades CSS necesarias para cada imagen. Ya me había apuntado contento otra cosilla a hacer en mi libreta, para aprender un poco de la librería para gráficos GD de PHP. Pero me resultaba un poco raro que no lo hubiera hecho nadie por lo que buscando un poco más, me he encontrado con que un desarrollador de Yahoo ya la había implementado. La verdad es que la aplicación funciona muy bien, y está disponible hasta el código fuente, otra vez será ; )