Per oggi ti propongo 5 spunti interessanti sui css che penso possano interessarti:

Regole css applicate di default agli elementi delle pagine html

Senza dubbio non è una nuova risorsa ma questa settimana ho scoperto che sono in molti a non leggere i documenti del w3c, nel caso ti sei mai chiesto quali sono le proprietà di default sugli elementi html questo documento riassume per ogni elemento le varie regole che gli sono attribuite di default.

10 proprietà css molto utili ma non supportate da internet explorer

Il titolo dice tutto, nel caso non ti bastasse questo articolo per abbandonare Internet Explorer leggi questo articolo, se invece hai già abbandonato da tempo il browser microsoft ti consiglio questa iniziativa molto simpatica.

Creare thumbnail grazie alla proprrietà clip

Un bel tutorial, che spiega come realizzare semplici thumbnail da immagini più grandi grazie alla proprietà clip dei css, in alternativa ripropongo questo articolo sulla gestione delle thumbnail con i css e questo su come realizzare una thumbnail grazie a canvas.

Esempi di animazione con i css

Alcuni interessanti esempi di animazione creati con solo css, attualmente funzionano solo su Chrome e Safari, vi consiglio quindi di utilizzare uno di questi browser per capire il potenziale ancora inespresso dei css.

Statistiche sul supporto dei selettori css sui vari browser

Un ottimo riassunto di tutti i selettori css e del supporto fornito da ogni browser con rispettivo sistema operativo, un utile memento quando utilizziamo molti css hacks.

Proseguendo sui nostri passi non ci resta che vedere come richiamare le singole statistiche relative ad ogni account, per fare questo occorre far autenticare l’utente ed ottenere l’id del profilo di cui si desidera mostrare le statistiche. A questo punto non ci resta che richiedere i dati a Google Analytics per mostrarli all’utente nella nostra pagina.

La procedura in realtà è molto simile ai passaggi effettuati per richiedere i dati dell’account utente, si richiedono i feed e si creano delle variabili che daranno come output le statistiche richieste. La vera differenza sta nel modo di richiedere i dati, in quanto è possibile specificare con precisione quali dati ottenere come nel caso di una query.

  function getPageviewsByCityFeed(ProfileId) {
    var myFeedUri = scope + '/data' +
        '?start-date=2009-01-01' +
        '&end-date=2009-05-08' +
        '&dimensions=ga:country,ga:city' +
        '&metrics=ga:visits' +
        '&sort=-ga:visits' +
        '&max-results=100' +
        '&ids=ga:' + ProfileId;
    myService.getDataFeed(myFeedUri, handleMyFeed, handleError);
  }

La seguente funzione infatti richiama le API di Google Analytics tramite url passando i valori necessari e specificare quali dati vogliamo ottenere. Come si evince dalla funzione richiederemo lo stato e la città degli utenti che hanno visitato il sito tra il 1° gennaio 2009 e l’8 maggio 2009, ordinandoli per numero di visite e limitando i risultati a 100.

Notiamo anche alla fine della funzione, la variabile contente l’id del profilo, questo valore è sempre necessario per richiedere i dati di un determinato account. Oltre a questo è indispensabile indicare una data di partenza e una di fine per le statistiche da mostrare. Per maggiori informazioni sui parametri e possibili valori è consigliabile visualizzare il documento Dimensions & Metric reference fornito da Google.

I passaggi successivi sono destinati a gestire e impaginare i dati ricavati tramite il ciclo vengono mostrati i dati ricavati e attraverso la funzione tableize vengono inseriti nelle tabelle.

Per vedere il risultato prova l’esempio completo, una volta effettuato il login a google analytics verranno mostrti gli account disponibili e sarà possibile vedere gli stati e le città degli utenti che hanno visitato il sito.

L’esempio è a puro scopo dimostrativo, è utile pensare di utilizzare questo sistema per ottenere le statistiche di Google Analytics sul proprio spazio web per visionare le statistiche in tempo reale.

Prima di lanciarsi e ricreare totalmente Google Analytics sul proprio spazio web consiglio queste librerie per l’utilizzo delle API di Google Analytics che possono senza dubbio velocizzare la realizzazione di eventuali script da integrare nel proprio sito.

Partendo da quanto visto nell’esempio del precedente tutorial incominciamo a ricavare i dati dell’account utente, questa parte diventa importante per gli step successivi, in quanto è necessario ottenere l’id dei profili associati all’account per ricavare le statistiche di ogni profilo.

Come prima cosa definiamo una funzione per accedere ai dati dell’account dell’utente.

function getAccountFeed() {
  var myAccountFeedUri = scope + "/accounts/default";
  myService.getAccountFeed(myAccountFeedUri, listProfiles, handleError);
}

In questo modo specifichiamo il servizio a cui vogliamo accedere (con la variabile scope) e i dati che desideriamo ottenere (in questo caso i dati dell’account utente), nell parte successiva richiamiamo due ulteriori funzioni.

La prima è indispensabile per gestire eventuali errori avvertendo l’utente della problematica riscontrata.

function handleError(e) {
    alert("Si è verificato un errore!\n"
    + e.cause ? e.cause.statusText : e.message);
}

La seconda funzione serve per restituire in output i dati ricavati

function listProfiles(myResultsFeedRoot) {
   var feed = myResultsFeedRoot.feed;
   var entries = feed.entry;
   var dspString = ""; 

   dspString = [
		"<h1>Profilo</h1>",
		"<table><tr><td>Titolo feed</td>
                 <td>Risultati riportati</td>
                 <td>Pagina iniziale</td>
                 <td>Elementi per pagina</td>
                 <td>ID Feed</td></tr><tr>",
           "<td>" + feed.getTitle().getText() + "</td>",
           "<td>" + feed.getTotalResults().getValue() + "</td>",
           "<td>" + feed.getStartIndex().getValue() + "</td>",
           "<td>" + feed.getItemsPerPage().getValue() + "</td>",
           "<td>" + feed.getId().getValue() + "</td>",
			"</tr></table>"
       ].join('\n');

   dspString += "<h1>Account associati al profilo</h1>";

   for (var idx = 0; idx < entries.length; idx++) {
     var entry = entries[idx]; 

    dspString += [
	 "<table><tr><td>Nome profilo</td>
          <td>ID</td><td>Ultimo aggiornamento</td>
          <td>ID account</td><td>Nome account </td>
          <td>Web Property ID</td><td>ID profilo</td></tr><tr>",
         "<td>" + entry.getTitle().getText() + "</td>",
         "<td>" + entry.getId().getValue() + "</td>",
         "<td>" + entry.getUpdated().getValue().getDate() + "</td>",
         "<td>" + entry.getPropertyValue("ga:accountId") + "</td>",
         "<td>" + entry.getPropertyValue("ga:accountName") + "</td>",
         "<td>" + entry.getPropertyValue("ga:webPropertyID") + "</td>",
         "<td>" + entry.getPropertyValue("ga:profileId") + "</td>",
         "</tr></table>"].join("\n");
   } 

   document.getElementById("display").innerHTML = dspString;
}

Nonostante sembri più articolata non presenta passaggi complessi, nelle prime righe definiamo una variabile per i dati dell’account utente.

var feed = myResultsFeedRoot.feed;
var entries = feed.entry;

Definiamo una nuova variabile vuota che servirà per restituire l’output nella pagina.

var dspString = "";

In questo modo potremmo inserire i feed all’interno della variabile e gestire l’output con un loop.

Infine la variabile dspString sarà  poi inserita all’interno dell’elemento con id display presente nella pagina.

document.getElementById("display").innerHTML = dspString;

Com’è possibile vedere dall’esempio, la funzione getAccountFeed è stata associata al click di un pulsante ma può essere tranquillamente richiamata con altri eventi.

Nel prossimo ed ultimo articolo dedicato alle API di Google Analytics con javascript vedremo come ottenere le statistiche relative ad ogni profilo dell’account utente.

I vantaggi principali dati dall’utilizzo delle API di Google Analytics sono:

- L’aggiornamento in tempo reale delle statistiche

-Accesso ai dati di Google Analytics dal proprio spazio web

-Semplicità di svluppo grazie al supporto fornito da Google

- Possibilità di utilizzo di Javascript

I passi da seguire per accedere a Google Analitycs con javascript sono molto semplici:

1) Richiesta della libreria javascript per l’utilizzo della versione

2)Scelta della versione della libreria

3)Autenticazione dell’utente

4)Richiesta dei dati

Vediamo nel dettaglio come eseguire questi passaggi.

Innazitutto creiamo un nuovo file .html (possibilmente con un doctype e con l’intenzione di fare una pagina web standard :) ) e richiamiamo nell’head della pagina la libreria javascript fornita da google per utilizzare le api di analytics.

<script type="text/javascript" src="http://www.google.com/jsapi">
</script>

Grazie a questa libreria abbiamo a disposizione tutte le funzioni necessarie per ricavare le statistiche dal nostro account. Come passaggio bisogna specificare quale versione della libreria si vuole utilizzare, Google consiglia di utilizzare l’ultima versione superiore alla 1.

<script type="text/javascript">
  google.load("gdata", "1.x");
</script>

Separare questi due script è poco elegante ma risulta indispensabile per specificare correttamente la versione della libreria da utilizzare, in alternativa è consigliabile utilizzare la google.load() all’interno dell’evento onload sul tag body della pagina in modo da caricare la libreria quando la pagina è completamente caricata.

Occorre ricordare che per un corretto funzionamento dell’autenticazione occorre inserire un’immagine presente nello spazio web da cui parte la richiesta, nel nostro caso è stata inserita un’immagine di 1×1px trasparente

<img src="blank.gif" id="hidden"/>

Nascosta tramite css per non interferire con il layout della pagina.

#hidden{display:none;}

Per iniziare con a richiedere dati a Google è necessario specificare quali servizi andremo a richiedere.

var myService = new google.gdata.analytics.AnalyticsService('sample');
var scope = "https://www.google.com/analytics/feeds";

In questo modo dichiariamoun nome per la nostra applicazione/servizio e specifichiamo quale servizio tra le API di Google andremo ad utilizzare.

Per l’autenticazione dell’utente è consigliabile uilizzare la AuthSub Proxy Authentication al momento supportata da javascript. La procedura di autenticazione rimanda l’utente alla pagina di login di Google e richiede di autorizzare il sito che fa la richiesta per ottenere i dati da Google Analitycs.

Questa procedura permette la richiesta dei dati senza mostrarli all’operatore del dominio, all’utente viene assegnato un cookie che consentirà la visione dei dati, è necessario inserire la possibilità di logout poichè il cookie ha durata di due anni. Il permesso dato nel momento del login al sito che ne fa richiesta può essere disabilitato nelle impostazioni presenti nel proprio account nella pagina di Google Analytics.

function login() {
	scope = "https://www.google.com/analytics/feeds";
    var token = google.accounts.user.login(scope);
    getStatus();
}

Creiamo una prima funzione per effettuare il login

function logout() {
    google.accounts.user.logout();
    getStatus();
}

E una seconda per effettuare il logout

function getStatus() {
    var statVal = document.getElementById("status");
    var btnLogin = document.getElementById("btnLogin");

    if (google.accounts.user.checkLogin(scope) == "") {
        btnLogin.value = "Login";
        btnLogin.onclick = login;
        statVal.innerHTML = "Profilo non autenticato.";
		document.getElementById("display").innerHTML = "";
    } else {
        btnLogin.value = "Logout";
        btnLogin.onclick = logout;
        statVal.innerHTML = "Profilo autenticato.";
		getAccountFeed();
    }
}

La terza funzione ci serve per gestire il login e il logout restituendo un messaggio sullo stato di autenticazione (nell’elemento con id status ) e gestendo il valore del pulsante di login e logout (con id btnLogin).

In questo modo l’utente può accedere alle statistiche di Google Analytics da un file html in qualunque spazio web purchè loggato ad un account valido e funzionante.

Nel prossimo articolo vedremo come mostrare i dati relativi all’account dell’utente, per il momento vi lascio questo esempio di autenticazione per le API di Google Analytics con javascript.

Questa necessità è dettata soprattutto dai risultati positivi del web marketing che grazie ad una newsletter diventa a costo zero (mentre nel cartaceo occorre pagare la stampa e la spedizione) e diventa quindi l’opzione più appetibile per un’azienda che si sta muovendo sul web.

Purtroppo però non esiste uno standard per l’html e css nelle mail, ogni webmail come ogni client ha le sue caratteristiche e richiede un trattamento opportuno e spesso non è possibile raggiungere un risultato uguale per i diversi utenti.

In un contesto così articolato ci viene in aiuto campaignmonitor che ci offre dettagliate statistiche sulla compatibilità dei css sulle mail su browser e su client, il panorama come si può notare non è dei più rosei e si percepisce immediatamente le grandi limitazioni a cui si va incontro ma ci permette di capire fino a che punto è possibile dare uno stile alle mail aziendali.