Twitter Searchs

Werner Creixell — Wed, 16 Jun 2010 20:09:50 +0000

In Seminario II the students were challenged to make a web page that displays a Twitter search. The “#chi” or “#worldcup” hash-tag search is performed and the results dynamically displayed.

Dominique Naser solution, using jQuery, can be found here (gracias Dominique).

First a simple form to input the search.


  
    
    Buscador de Hashtags
  
  
        Buscador

The Html file where the search and the results display is performed.





  

    

    Buscador de Hashtags

	        

        



	

  

  

	Resultado

		

		">

Diego Acevedo, used a jQuery plugin Juitter (gracias Diego). You can found his solution here

Both solutions by pass the cross-domain restriction imposed by the browser.

Earthquakes in Google Maps

Werner Creixell — Wed, 16 Jun 2010 15:10:43 +0000

In this example the Seminario II sutdents were asked to design a web page that display a Google map with earthquake information from the US Geological Survey USGS.

Camilo Vera solution can be found here (gracias Camilo).

Camilo’s php script is as follows:

entry as $node){
    //se recuperan los datos que tiene un namespace especificado por la siguiente url
    $geo = $node->children("http://www.georss.org/georss");
    $json[$i][0]=$geo->point;
    $json[$i][1]=$node->title;
    $i++;
}
print(json_encode($json));
?>

The javascript is as follows:

function initialize() {
    myLatlng = new google.maps.LatLng(-33.04299, -71.586657);
    var myOptions = {
      zoom: 3,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.TERRAIN
    }
    //se crea una instancia de un mapa de google
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var request = crear_XmlHttpRequest();
    request.open("GET", "Conector.php", true);
    request.onreadystatechange = function() {
        if(request.readyState == 4 && request.status == 200){
            var yw_json = request.responseText;
                      //dirty JSON evaluation
            var yw = eval('(' + yw_json + ')');
            var i;
            //se recorren el arreglo que contiene la informacion de las coordenadas y el nombre
            //del lugar donde ocurrio el terremoto
            for(i in yw){
                //la tercera dimension del arreglo es inutil, pero lamentablemente json_encode de php lo crea
                //se separan los dos puntos que determinan la coordenada
                coordenadas = yw[i][0][0].split(" ");
                //se guarda el nombre del lugar donde ocurrio el evento
                lugar = yw[i][1][0];
                //se crea el marcador en el mapa
                myLatlng = new google.maps.LatLng(coordenadas[0], coordenadas[1]);
                new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title:lugar
                });
            }
        }
    }
    request.send(null);
  }

//Se define una funcion que retorne el objeto XMLHttpRequest dado que en la
//version 3 de la api de google se quito la clase GXmlHttp

function crear_XmlHttpRequest(){
    var httpRequest;
    if (window.XMLHttpRequest){
        //El explorador implementa la interfaz de forma nativa
	httpRequest = new XMLHttpRequest();
    }
    else if (window.ActiveXObject){
        //El explorador permite crear objetos ActiveX
	try {
            httpRequest = new ActiveXObject("MSXML2.XMLHTTP");
	} catch (e) {
            try {
                httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
    }
    if (!httpRequest){
        alert("No ha sido posible crear una instancia de XMLHttpRequest");
    }
    return httpRequest;
}

The Html file is:

Alejandro Homes solution can be found here (gracias Alejandro). In this example the students used a php script as middle man to by pass the cross-domain restriction in web browsers.

The php script goes as follows:

entry as $entry ) 

{ 

	$aeo = $entry->children("http://www.georss.org/georss");

	$arr[$count] = array ('nombre'=>$entry->title,'fecha'=>$entry->updated,'geo_point'=>$aeo->point,'geo_elev'=>$aeo->elev);

	$count++;

}

  

//JSON enconde and print  

print(json_encode($arr));



?>

The html page is as follows:




	
	Google Maps JavaScript API Example

Werner Creixell » html

Twitter Searchs

Buscador

Resultado

Earthquakes in Google Maps