Google Programming

Google Programming è la headline di ioProgrammo di dicembre, che presenta il mash-up Google Maps API + HTML 5 + Flickr API + jQuery che trovate a pag. 12.

Il lungo articolo che descrive l’applicazione analizza tutte le più moderne tecnologie di webdesign.

L’applicazione si basa su una Google Map che occupa l’intera finestra del browser. Al di sopra della mappa viene collocato un menu generato dalle tab di jQuery UI, che facilita la navigazione e permette di scorrere tra diversi elenchi di dati.

Ed ecco i dati: quelli generati dall’utente cliccando sulla mappa, grazie al servizio di reverse geocoding della Google Maps API; quelli recuperati dinamicamente da Flickr, grazie ad una richiesta AJAX generata via jQuery; quelli memorizzati dall’utente, grazie al local storage di HTML 5.

Insomma, ce n’è per tutti i gusti: il risutato è un’applicazione avanzata, che spinge al massimo sulle incredibili potenzialità della libreria JS più famosa!

Happy mashing!

Twitter OAuth su ioProgrammo di novembre

Dallo scorso 31 agosto, Twitter non concede più accesso al webservice attraverso il sistema di autenticazione base. Ora tutte le applicazione che fanno uso delle API di Twitter devono accedere al servizio attraverso OAuth.

La novità non è di scarso rilievo, soprattutto per la crescente popolarità del servizio di microblogging più diffuso al mondo. Per questo ho proposto alla redazione di ioProgrammo un nuovo articolo in cui analizzo i servizi di Twitter.

Nel numero di novembre, infatti, spiego come sfruttare le API con accessi in lettura e scrittura, con il supporto della libreria twitteroauth.

Ma c’è di più: per rendere più interessante il discorso, propongo un mash-up con Google Maps ottenuto grazie alla geolocalizzazione dei tweet con il supporto della W3C Geolocation API.

Il tutto testato su browser desktop e mobile.

Buona lettura!

Google Chrome Extensions part 2

In edicola la seconda parte della guida introduttiva alle estensioni di Google Chrome.

Nel numero di ottobre approfondisco il discorso sulle Chrome Extensions, avviato con l’intro del mese scorso, mostrando come prelevare dati in formato JSON, ovunque siano disponibili, per iniettarli all’interno del DOM del documento corrente, qualunque esso sia.

L’estensione che viene sviluppata come esempio importa i dati di un feed di Twitter, grazie alla JSON Search API, filtrati in base ad una chiave di ricerca impostata dall’utente. I dati così ottenuti, vengono inseriti in una div, a sua volta iniettata in posizione assoluta al’interno del documento corrente.

Forse è più facile da fare che da dire 🙂

Buona lettura!

Google Chrome Extensions

ioProgrammo di settembreIn queste settimane c’è molto fermento attorno al browser di Google. L’attesa versione 6 porta con sè diverse novità, tra cui una nuova API e varie modifiche all’interfaccia.

Vista l’attualità dell’argomento, abbiamo pensato di offrire ai lettori di ioProgrammo due articoli sulle Chrome Extensions, ossia su quelle applicazioni e temi grafici che accrescono le funzionalità e permettono di personalizzare la UI del browser.

Lo sviluppatore può, infatti, agire sull’interfaccia utente, oppure creare funzioni che permettono di gestire diversamente i bookmarks, le schede o le finestre di Chrome. Inoltre, grazie alle estensioni, è possibile accedere al DOM delle pagine caricate, prelevando informazioni o modificando la vista. E, accedendo ai dati dalle origine più disparate, si aprono le porte ad ogni tipo di mashup.

In questo numero, vedremo come prelevare i dati di un feed di Twitter e organizzarli visivamente in una finestra di popup del browser. L’articolo, ovviamente, getta le basi per un discorso più complesso, che proseguirà nel numero di ottobre.

Non perdetelo 😉

10 righe di codice per accedere alle API di Twitter con jQuery

Ormai avere un account su Twitter è un must, soprattutto per chi si occupa di design e development. Blog, webzines e case editrici specializzate in tecnologie di programmazione pubblicano costantemente informazioni su Twitter e, spesso, sono informazioni di notevole valore. Quindi su Twitter bisogna esserci!

Tra i servizi web più popolari, Twitter è tra quelli che si rinnovano di più: periodicamente vengono aggiunte nuove features e migliorate quelle già esistenti. In questo modo, tra l’altro, si allargano gli ambiti di applicazione del servizio.

Tra le funzionalità più interessanti, va segnalata la possibilità di geolocalizzare i singoli tweet. Questa possibilità è prevista solo quando si accede al servizio attraverso le sue API, ma, visto lo sviluppo vertiginoso di periferiche mobili dotate di GPS, si tratta di una feature da tenere nella dovuta considerazione.

Ora, dato che su Twitter si pubblicano un bel po’ di contenuti, può essere interessante (e spesso opportuno) prelevare questi contenuti e importarli nel proprio sito/blog personale o aziendale. Magari collocando i singoli tweet (se localizzati) su una mappa, con tanto di infowindow…

Dunque, supponiamo di voler visualizzare solo i contenuti geo-localizzati. Per farlo bastano una decina di righe di codice. Ma davvero!

Quello che occorre è un po’ di JavaScript (poco poco) e un paio di funzioni jQuery.

Iniziamo inserendo jQuery nel nostro documento:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Ed ecco lo script:

$(document).ready(function(){

$.getJSON('http://api.twitter.com/1/statuses/user_timeline.json?screen_name=carlodaniele&count=10&callback=?',
  function(data){
    $.each(data, function(){
      if(this.geo != null){
        $('<li></li>')
          .hide()
          .append(this.text)
          .append(" - " + this.user.name)
          .append(" - Lat: " + this.geo.coordinates[0] + ", Lon: " + this.geo.coordinates[1])
          .appendTo('#tweets')
          .fadeIn();
      }
    });
  }
);

});

Quando ogni elemento del DOM del documento è stato caricato, la funzione jQuery $.getJSON preleva i dati dalla URL trasmessa come primo parametro. Nell’esempio si tratta della timeline di un utente con profilo pubblico. Il parametro count=10 stabilisce il numero massimo di tweet che formeranno la risposta.

Analizziamo lo script riga per riga.

Il secondo argomento di $.getJSON è costituito da una funzione anonima di callback che si occupa della manipolazione dei dati. All’interno della callback, andremo a scorrere i singoli elementi della risposta, con la funzione jQuery $.each: se i singoli elementi contengono un valore del campo geo diverso da null, allora viene creato un list item:

$('<li></li>')

Il list item viene nascosto:

.hide()

Viene inserito al suo interno il testo del singolo tweet:

.append(this.text)

Viene aggiunto in coda un trattino con il nome dell’autore:

.append(" - " + this.user.name)

Vengono aggiunte le coordinate della posizione dell’utente al momento del tweet:

.append(" - Lat: " + this.geo.coordinates[0] + ", Lon: " + this.geo.coordinates[1])

Il list item così generato viene inserito nell’elemento del DOM con id=tweets (ovviamente una lista):

.appendTo('#tweets')

In ultimo, il list item viene visualizzato gradatamente:

.fadeIn();

Giusto per completezza, non dimentichiamo la unordered list da inserire nel documento:

<ul id="tweets"></ul>

Due note importanti:

  1. la nostra applicazione funziona solo se nei 10 tweet più recenti ce n’è almeno uno geolocalizzato (altrimenti non viene generato nemmeno un list item);
  2. la geolocalizzazione è possibile solo se nelle impostazioni generali dell’account è stata messa la spunta all’opzione “Tweet location” (è bene fare una verifica)

E comunque, se non volete limitare la ricerca ai soli tweet geolocalizzati, basta semplicemente eliminare la condizione if(this.geo != null)

Ah, vi chiederete perchè non abbia collocato direttamente i tweet su una mappa. La risposta sarà su ioProgrammo, fra un paio di mesi 😉

Buon divertimento