Marcos Fernández » javascript http://www.marcosdev.com Programación de páginas web Mon, 28 Sep 2009 07:59:37 +0000 http://wordpress.org/?v=abc en hourly 1 Cargar Google Maps de forma asíncrona http://www.marcosdev.com/cargar-google-maps-de-forma-asincrona/ http://www.marcosdev.com/cargar-google-maps-de-forma-asincrona/#comments Fri, 31 Oct 2008 18:07:20 +0000 Marcos Fernández http://www.marcosdev.com/?p=31 Google Maps ha sido uno de los grandes inventos que se sacó Google de la manga. Normalmente para cargar Google Maps situamos una etiqueta <script> dentro de nuestra página con nuestra id del api de Google Maps. Luego modificamos la etiqueta <body> para que cuando se cargue el documento, ejecute una función para inicializar el mapa.

El problema que ya comenté en un post anterior (Cargar Google Analytics una vez se haya cargado la página), es que esto, en según que momentos, puede enlentecer de una forma muy grave nuestra página, o por ejemplo, el mapa lo tenemos en una pestaña que por defecto no es visible. Por ello, podemos obtar por una solución que incrementará sustancialmente la velocidad de carga de nuestra página y que se encargará de que, una vez se haya cargado la página, proceder a la descarga y la inicialización del nuestro Google Map.

Esta no es la única utilidad, también podríamos cargar nuestro Google Map a voluntad mediante la pulsación de cualquier elemento. Esto nos permitiría que en una página no cargásemos el Google Map hasta que el usuario decidiese utilizaro, aliviando la carga de nuestra página.

Veamos un ejemplo práctico llamando a Google Maps una vez se ha terminado la carga de nuestra página:
http://www.marcosdev.com/ejemplos/googlemaps_async/

Lo primero de todo, veamos la estructura de nuestros ficheros:

Por un lado tenemos un fichero html en el cual hay una capa que utilizaremos para insertar nuestro Google Maps y las llamadas a los ficheros googleMaps.js y jquery.js.

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Ejemplo de carga de forma asíncrona de Google Maps</title>
</head>
<body>
   <div id="mapa" style="width:300px;height: 300px">
      <p style="text-align:center"><strong>Cargando</strong></p>
   </div>
   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript" src="googleMaps.js"></script>
</body>
</html>

Cómo podemos ver, el div con id “mapa” tiene un texto interior que pone “Cargando”. Esto es para que mientras se carga nuestro Google Maps el visitante pueda saber que el navegador está trabajando. Después del div, insertamos las dos llamadas a nuestros ficheros javascript. El primero es la librería jQuery que nos ayudará realizar la petición de carga del conjunto de ficheros necesarios para cargar Google Maps.

En el fichero googleMaps.js tenemos el código necesario para realizar la carga del mapa:

function cargarMapa(){
   if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("mapa"));
      map.setCenter(new GLatLng(39.578678,2.646021), 16);
   }
};

$(document).ready(function(){
   var api='ABQIAAAAOxTvdJxbyGuGB8_UUEe52xRHT0E5MDpBZnfhvo0jhLIefK70hRTYIol4_Lr75EWTtT9VjcaZzY2QWg';
   $.getScript('http://maps.google.com/maps?file=api&v=2.x&key='+api+'&async=2&callback=cargarMapa');
});

Lo primero que vemos es una función llamada “cargarMapa” la cual será llamada una vez tengamos cargada la librería de Google Maps. Esta función únicamente se encarga de mostrar nuestro Google Maps en un determinado div (en nuestro caso el div llamado “mapa“) y situarlo en una coordenada (new GLatLng(39.578678,2.646021)) con un determinado zoom (16).

La parte interesante viene justo después. Vemos el comienzo típico de cualquier fichero js que jQuery ( $(document).ready(function(){ ) y justo después dos líneas de código; la primera es una variable en la cual, por cuestiones de tener un código más legible, guardo el clave del api de Google Maps. Y en el segundo realizo la petición, que a simple vista, es la misma url que normalmente nos da google para poner en las etiquetas <script>. Pero si nos fijamos, existe dos diferencias. Justo al final de la línea vemos que hay dos parámetros de url nuevos: &asyn=2&callback=cargarMapa. El primero (async=2) permite llamara de forma asíncrona (cuando nosotros queramos y no siempre cuando se carga el documento al completo), y el segundo (callback=cargarMapa) es el parámetro que le dice a Google Maps que función debe ejecutar una vez tenga todo lo necesario cargado para ser ejecutado.

Ponerlo en práctica es tremendamente sencillo y podemos sacarle mucha utilidad al tema, como por ejemplo, la siguiente demostración dónde cargamos el mapa cuando alguien hace clic sobre un botón:

http://www.marcosdev.com/ejemplos/googlemaps_async/index2.html

La diferencia entre el primer ejemplo y este segundo, reside en que la capa “mapa” la tengo escondida y que en vez de cargar el mapa directamente, le agrego una funcionalidad al botón para que este lo carge cuando hagan clic sobre él, y además, haga visible la capa:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Ejemplo de carga de forma asíncrona de Google Maps</title>
</head>
<body>
   <div id="mapa" style="width:300px;height:300px;display:none;">
      <p style="text-align:center"><strong>Cargando</strong></p>
   </div>
   <input type="button" name="bCargar" id="bCargar" value="Cargar Mapa" />
   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript" src="googleMaps.js"></script>
</body>
</html>



function cargarMapa(){
   if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("mapa"));
      map.setCenter(new GLatLng(39.578678,2.646021), 16);
  }
};

$(document).ready(function(){

   //Agregamos evento click al botón
   $('#bCargar').click(function(){
      //Mostramos la capa mapa
      $('#mapa').show();
      var api='ABQIAAAAOxTvdJxbyGuGB8_UUEe52xRHT0E5MDpBZnfhvo0jhLIefK70hRTYIol4_Lr75EWTtT9VjcaZzY2QWg';
      $.getScript('http://maps.google.com/maps?file=api&v=2.x&key='+api+'&async=2&callback=cargarMapa');
   });
});

Espero que les sea útil

P.D.: Los estilos de la capa “mapa” están escritos utilizando el atributo style. Esto no es una buena práctica; hay que utilizar ficheros CSS de estilos. Lo he hecho así para hacerlo más visible para todos.

P.D2.: En el segundo ejemplo se podría insertar la capa “mapa” en tiempo real sin necesidad de que esté en el código, pero sería menos didácticos para aquellas personas que tengan un nivel bajo de Javascript.

]]> http://www.marcosdev.com/cargar-google-maps-de-forma-asincrona/feed/ 9 Cargar Google Analytics una vez se haya cargado la página http://www.marcosdev.com/cargar-google-analytics-una-vez-se-haya-cargado-la-pagina/ http://www.marcosdev.com/cargar-google-analytics-una-vez-se-haya-cargado-la-pagina/#comments Thu, 30 Oct 2008 07:31:05 +0000 Marcos Fernández http://www.marcosdev.com/?p=27 Muchas veces nos encontramos con la situación de que a una página le cuesta terminar de cargar por culpa del Google Analytics. Yo lo he sufrido en mis propias carnes con proyectos de cierto tamaño. A pesar de la granja inmensa y poderosísima de servidores de Google, muchas veces por razones varias, este caso se da. También afecta a la situación de que si utilizas frameworks de Javascript como jQuery, el Google Analytics te para la carga del resto de elementos hasta que él no haya terminado su carga. El problema es que no podemos guardar en nuestro servidor el fichero ga.js o el fichero urchin.js que solicitamos a Google.

Podemos solventar el problema de una manera muy sencilla, cargar Google Analytics una vez se haya cargado el resto de las páginas. Esta situación tiene una ventaja muy grande, si Google Analytics se pone tontito, el resto de la página puede vivir en paz. A pesar de que lo voy a explicar a continuación se puede realizar de otras formas, voy a utilizar el framework jQuery por su sencillez y potencia.

Lo primero que debemos hacer es incluir la librería jquery. Yo todas las inclusiones de ficheros js las hago al final, justo antes de la etiqueta de cierre de body (Norma de aceleración de velocidad de carga de páginas web de YSlow).

<script type="text/javascript" src="jquery.js"></script>

Y justo debajo introducimos el siguiente código

<script type="text/javascript">
   $(document).ready(function(){
      $.getScript('http://www.google-analytics.com/ga.js',function(){
         if (typeof(_gat) == 'object'){
            var pageTracker = _gat._getTracker('UA-1806963-8');
            pageTracker._initData();
            pageTracker._trackPageView();
         }
      });
   });
</script>

Dentro del segundo bloque de código debes substituir UA-1806963-8 por tu ID de Google Analytics. Si queréis ver un ejemplo funcionando podéis visitar la siguiente página: http://www.holjoy.com

Un saludo

]]> http://www.marcosdev.com/cargar-google-analytics-una-vez-se-haya-cargado-la-pagina/feed/ 4 Videotutorial – Reducir javascript con PHP http://www.marcosdev.com/videotutorial-reducir-javascript-con-php/ http://www.marcosdev.com/videotutorial-reducir-javascript-con-php/#comments Fri, 02 May 2008 19:34:50 +0000 Marcos Fernández http://www.marcosdev.com/?p=8 Videotutorial sobre el tutorial para reducir ficheros javascript con PHP.

Duración: 13:03

Descarga en formato QuickTime

]]> http://www.marcosdev.com/videotutorial-reducir-javascript-con-php/feed/ 8 Reducir ficheros javascript con PHP http://www.marcosdev.com/reducir-ficheros-javascript-con-php/ http://www.marcosdev.com/reducir-ficheros-javascript-con-php/#comments Fri, 02 May 2008 14:01:46 +0000 Marcos Fernández http://www.marcosdev.com/?p=5 Uno de los problemas más habituales hoy en día en el desarrollo de páginas web es la utilización de múltiples ficheros Javascript. Estos ficheros a la mínima que la página sea algo grande, toman un peso muy significativo. Una de las premisas que siempre debemos tener en la cabeza es hacer que nuestra página cargue lo más rápido posible. (El addon para Firefox llamado YSlow que se integra con Firebug es muy útil para optimizar nuestra página).

Como toda buena práctica de programación, nuestro código incluye sangrías y comentarios. Si no ponemos sangrías nuestro código se hace incomprensible, y si le quitamos los comentarios, dentro de unos meses nos acordaremos de aquel día que decidimos no escribir una frase aclaratoria de que hacía aquella función.

Por ello, existen multitud de herramientas que permite que a partir de un fichero javascript nuestro, se genere un fichero javascript reducido, es decir, sin espacios, sin comentarios, e incluso ofuscado (cambia nombre a las variables por letras o números y trata de reducir la comprensión del código por alguien que quiera copiarnos o analizarnos para un ataque).

Estas herramientas el problema que tienen es que debes tener un fichero para el desarrollo y luego de haber hecho los cambios oportunos, debes generar el fichero reducido.

En este tutorial veremos como podemos reducir en tiempo real los ficheros Javascript que precise nuestro documento mediante PHP (es necesario tener la versión 5). Además, si nuestra página utiliza más de un fichero js (javascript), lograremos reducir las peticiones al mínimo. Por ejemplo, nuestra página utiliza tres ficheros js nuestros, son tres peticiones. Lograremos reducirlo a únicamente una petición. Caso aparte es cuando debes realizar la inclusión de un fichero js como el de Google Maps, con el cual no puedes utilizar esta técnica.

Vamos manos a la obra.

Lo primero que necesitamos es descargar una librería llamada Jsmin-php. Podéis encontrarlo en su página web, y justo en la derecha hay un botón para accionar la descarga.

Descargamos el dichero jsmin-1.1.1.php (esta era la versión al momento de hacer este tutorial).

Supongamos que tenemos la siguiente estructura de ficheros:

En la imagen podemos observar que tenemos un fichero index.php en el cual hay el siguiente código:

< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</meta></head>
<body>
<p id='parrafo'>Hola</p>

<script type='text/javascript' src='test.js'></script>
<script type='text/javascript' src='test2.js'></script>

</body>
</html>

Cómo se puede observar es un documento en blanco con un párrafo en el cual está escrito la palabra Hola. Este párrafo tiene como identificador único el id ‘parrafo’.

Más adelante podemos ver la llamada a dos ficheros js externos al documento. Cómo se puede apreciar, he puesto las inclusiones al final del documento, justo antes del final del body. Esto es una de las pautas a la hora de optimizar el rendimiento de una página web. En otro tutorial trataremos de una manera más profunda este tema.

El contenido de los ficheros js es el siguiente

Fichero test.js

/*
Esto es un fichero de prueba js
Conjunto de comentarios que explican el funcionamiento de este js
El código siguiente sustuirá el texto interior del párrafo identificado con el id parrafo
*/

document.getElementById('parrafo').innerHTML='esto funciona';

Fichero test2.js

//Comentario: esto va a mostrar un mensaje de alerta
alert('hola mundo');

El código del fichero test.js lo que hace es buscar dentro del documento un elemento que tenga como identificador ‘parrafo’ y le sustituye su contenido por un texto ‘esto funciona’.

El código del fichero test2.js lo que hace es mostrar un mensaje.

En ambos documentos se pueden ver muchos comentarios. Estos comentarios están bien para nosotros pero lo que hacen es hacer más lenta la carga de la página ya que el fichero tiene un mayor fichero.

Vamos a comenzar a solucionar este problema.

Para ello, lo primero que debemos hacer es crear un fichero php al cual le podemos llamar scripts.php. Este fichero tiene la función de solicitar los ficheros js que necesitemos, reducirlos y generar un documento único.

Para que el contenido final del documento sea entendido por el navegador como código javascript y no otro tipo de lenguaje debemos incluir como primera línea de nuestro fichero scripts.php el siguiente código:


header("content-type: application/x-javascript');

Ahora debemos incluir la librería jsmin que hemos descargado y la cual se encargará de optimizar el código:


require_once 'jsmin-1.1.1php';

La parte que viene ahora es muy sencilla. Debemos ejecutar la siguiente línea por cada fichero js que queramos llamar. En nuestro caso será dos veces:


echo JSMin::minify(file_get_contents('test.js'));

echo JSMin::minify(file_get_contents('test2.js'));

JSMin:minify es la orden que se encarga de reducir un determinado código. file_get_contents lo que hace es obtener el contenido de un determinado fichero. Por lo tanto esta orden lo que hace es obtiene el código de nuestros ficheros js, lo reduce y mediante la orden echo lo vuelca en pantalla, en nuestro caso, produciendo un nuevo fichero js.

El resultado es el siguiente:


document.getElementById('parrafo').innerHTML='esto funciona';
alert('hola mundo');

Cómo se puede observar ya no hay comentarios. Si el código tuviese sangrías o fuera más complejo, se podría observar muchas más diferencias.

Ahora ya sólo nos queda retocar el fichero index.php. Vamos a decirle que en vez de utilizar los dos ficheros js, utilice únicamente el fichero php que hemos generado. Con ello matamos dos pájaros de un tiro: reducimos las peticiones de 2 ficheros a 1, y generamos código reducido. Para ello sustituimos las siguientes líneas:


<script type='text/javascript' src='test.js'></script>

<script type='text/javascript' src='test2.js'></script>

Por esta


<script type='text/javascript' src='scripts.php'></script>

Listo. Ya tenemos nuestra página web con el js reducido y además hemos reducido el número de peticiones.

Espero que esto os pueda ser útil.

Ficheros del tutorial Reducir Js con PHP

]]> http://www.marcosdev.com/reducir-ficheros-javascript-con-php/feed/ 19