Da zero a cento con Google Currents: come pubblicare la vostra opera

Dell’arrivo di Google Currents in Italia ne hanno già parlato in molti, uno fra tanti è NinjaMarketing che ha giustamente approfondito l’argomento in suo articolo. Quello che vorrei fare io invece è parlarvi (come al solito) di come mettervi rapidamente in pista per arricchire quello che è il panorama delle pubblicazioni italiane compatibili con il software di Mountain View, considerato uno dei migliori per Android lo scorso anno e disponibile anche per iOS e -soprattutto- in Italia.

Quello che ho personalmente fatto è stato mettere in piedi una versione di Gioxx’s Wall compatibile con Google Currents, il risultato del mio lavoro è già visibile sottoscrivendo l’edizione su gioxx.org/currents e presto rilascerò una nuova versione che metterà in primo piano più aree del blog, lasciando in secondo piano tutto il resto (Twitter, video & Co.). Già disponibile inoltre è una pubblicazione dedicata a X Files, potete sottoscriverla andando all’indirizzo mozilla.gfsolone.com/currents!

Attraverso questo articolo vorrei darvi qualche consiglio su come personalizzare l’header della tabella dei contenuti e delle sezioni, quindi quello degli articoli singoli, il tutto non accontentandosi dello stile di default proposto da Google (molto elegante, a dirla tutta).

Tutto comincia da qui

Per poter iniziare a pubblicare la vostra opera sarà necessario andare all’indirizzo google.com/producer, entrare con il vostro utente Google e accettare la licenza proposta. Unico obbligo è l’utilizzo di Google Chrome, grave pecca per chi come me preferisce usare sempre Mozilla, ma tant’è.

Scelto il nome della pubblicazione e la prima fonte dalla quale scaricare i dati (tipicamente il feed RSS del vostro blog), potrete inserire altre fonti e contenuti. Farlo è estremamente intuitivo e semplice, Google pensa grosso modo a tutto, non mi soffermerò molto su come procedere, lo lascio fare alla vostra curiosità e allo stesso Google (la parte relativa al motore di ricerca stavolta, ndr) se necessario ;-)

Tabella dei contenuti

Il cuore e la partenza di tutta la vostra testata “Currents-Ready“, da qui potrete pilotare l’utente verso le sezioni più specifiche o verso i canali esterni quali Facebook, Twitter, Youtube, Flickr e qualsiasi altro servizio vi riesca a mettere a disposizione più o meno facilmente un feed RSS sul quale poggiare il vostro lavoro di “conversione” al mobile.

La tabella dei contenuti viene composta automaticamente da Google Currents che seleziona le ultime novità presenti nei vostri feed, ne cattura un’immagine e la propone al lettore per una fruizione intelligente, immediatamente e molto semplice. Quello che è possibile fare è determinare la posizione dei feed in lista, affinché Currents vada a inserire in prima, seconda o terza pagina (potete continuare a vostro piacimento e necessità) i contenuti.

Un consiglio? Inutile dirlo, tenete in testa alla lista ciò che volete mostrare in prima pagina, in particolar modo le prime 3 posizioni che su uno smartphone la faranno da padrone, contrariamente al tablet che -per ovvi motivi- proporrà più box e contenuti nella stessa schermata grazie al monitor più grande.

E’ inoltre possibile ritoccare lo stile proposto di default, un custom si adatta meglio alle esigenze di comunque, soprattutto per mostrare un eventuale logo o personalizzare i colori che possono non piacere nonostante l’usabilità e la leggibilità siano assolutamente perfette così come proposte nativamente. Ciò che io ho fatto è stato integrare il logo di questo blog, modificando lo sfondo subito dietro (da grigio a nero), replicando poi il tutto sulle altre sezioni e pagine singole della testata.

Selezionando quindi “Custom” sotto la voce “Header Template” (in Sections), ho messo mano al CSS, caricando dapprima l’immagine desiderata tramite l’area “Media library“, quindi inserendo il collegamento diretto nel foglio di stile stesso. Ecco il risultato in codice:

<style>
.customHeader {
background-color: #000000;
background-image:url('https://producer.googleusercontent.com/producer/attachment/CAAqBwgKMKqJ4AEw8bcN-gioxx.org_headerText.png4');
background-repeat:no-repeat;
background-position:center;
display: -webkit-box;
height: 60px;
-webkit-box-flex: 0;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
}

.customHeader .editionName {
color: #FFFFFF;
font-family: 'Currents-Regular-Sans';
font-weight:normal;
margin: 0 10px 0 0;
max-width: 80%;
overflow: hidden;
text-align: right;
text-overflow: ellipsis;
text-transform: lowercase;
white-space: nowrap;
}
</style>

<g:if device='tablet'>
<style>
.customHeader { font-size: 36px; -webkit-box-align: end; }
</style>
</g:if>

<g:if device='phone'>
<style>
.customHeader { font-size: 28px; -webkit-box-align: center; }
</style>
</g:if>

<div class='customHeader'>
<div class='editionName'>
</div>
</div>

Avendo poi cura di andare a rimuovere la voce “<g:text textid=’editionName’></g:text>” nel DIV “editionName” così da non far comparire il testo scritto con il nome assegnato alla testata, lasciando spazio solo ed esclusivamente all’immagine.

La singola sezione

Contrariamente alla tabella dei contenuti, vostra home page appositamente realizzate per Currents, la singola sezione può proporre specifici contenuti per i quali è sempre bene ricordare “dove ci si trova” al lettore. Per questo motivo ho deciso non solo di inserire il logo del blog (anche in questo caso togliendo il puro testo dall’header), ma di lasciare il nome assegnato alla sezione subito dopo, in modalità “logo | nome della sezione”. Il codice ritoccato è quindi il seguente:

<style>
.customHeader {
background-color: #000000;
display: -webkit-box;
height: 60px;
line-height: 60px;
-webkit-box-flex: 0;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
}

.customHeader .editionName {
color: #333;
font-family: 'Currents-Regular-Sans';
font-weight: normal;
margin: 0 10px 0 0;
max-width: 50%;
overflow: hidden;
text-align: right;
text-overflow: ellipsis;
text-transform: lowercase;
white-space: nowrap;
}

.customHeader .sectionName {
color: #DEDEDE;
font-family: 'Currents-Light-Sans';
font-weight: 300;
margin: 0 0 0 10px;
max-width: 40%;
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
text-transform: lowercase;
white-space: nowrap;
}

.customHeader .divider {
border-left: solid 1px #a3a3a3;
}
</style>

<g:if device='tablet'>
<style>
.customHeader { font-size: 30px; -webkit-box-align: end; }
.customHeader .divider { height: 30px; margin-bottom: 15px; }
</style>
</g:if>

<g:if device='phone'>
<style>
.customHeader { font-size: 22px; -webkit-box-align: center; }
.customHeader .divider { height: 22px; margin-top: 5px; }
</style>
</g:if>

<div class='customHeader'>
<div class='editionName'>
<img src="https://producer.googleusercontent.com/producer/attachment/CAAqBwgKMKqJ4AEw8bcN-gioxx.org_headerText.png4" />
</div>
<div class='divider'></div>
<div class='sectionName'>
<g:text textid='sectionName'></g:text>
</div>
</div>

Stavolta ho deciso di non usare il logo del blog come sfondo della testata, è stato infatti inserito nel DIV “editionName“, al posto del puro testo. Il nome della sezione specifica mantiene il suo posto, così come il DIV “divider”, che produce a video quella barra verticale che permette di separare gli altri due.

Personalizzare la sezione Twitter

Decidere di inserire Twitter tra i contenuti disponibili sull’edizione Currents può sembrare una sciocchezza prima di scoprire che il noto Social Network, già da diverso tempo, non distribuisce più pubblicamente il proprio stream tramite feed RSS come un tempo.

Quello che si può fare per aggirare l’ostacolo è andarsi a ricavare i propri tweet direttamente dalle API di Twitter, il modo è piuttosto semplice e il risultato sarà effettivamente “digeribile” come feed RSS partendo dall’indirizzo https://api.twitter.com/1/statuses/user_timeline.rss?screen_name=gioxx dove -ovviamente- al posto del mio nickname andrà indicato il vostro o quello di un utente generico che volete includere nella pubblicazione.

Occhio però alle richieste, più aumentano, più c’è possibilità che vi venga bloccata la richiesta alla fonte, da quando sono state introdotte le API di Twitter c’è infatti un limite posto proprio sulle request, una veloce lettura alla sezione Developers del Social Network vi schiarirà le idee. Questa sezione sparirà dalla prossima versione di Gioxx’s Wall per Currents ;-)

Nessuno vi vieta però di rimbalzare il feed di Twitter su uno strumento di terze parti che possa tenere memoria dei vostri cinguettii e non arrabbiarsi se il numero di richieste al feed stesso aumenta nel tempo. Per la sezione Twitter ho voluto modificare lo stile prendendo quello di una qualunque sezione e arricchendolo ulteriormente con l’icona “simbolo” dell’azienda :-)

<style>
.customHeader {
background-color: #000000;
display: -webkit-box;
height: 60px;
line-height: 60px;
-webkit-box-flex: 0;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
}

.customHeader .editionName {
color: #333;
font-family: 'Currents-Regular-Sans';
font-weight: normal;
margin: 0 10px 0 0;
max-width: 50%;
overflow: hidden;
text-align: right;
text-overflow: ellipsis;
text-transform: lowercase;
white-space: nowrap;
}

.customHeader .sectionName {
color: #DEDEDE;
font-family: 'Currents-Light-Sans';
font-weight: 300;
margin: 0 0 0 10px;
max-width: 40%;
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
text-transform: lowercase;
white-space: nowrap;
}

.customHeader .divider {
border-left: solid 1px #a3a3a3;
}
</style>

<g:if device='tablet'>
<style>
.customHeader { font-size: 30px; -webkit-box-align: end; }
.customHeader .divider { height: 30px; margin-bottom: 15px; }
</style>
</g:if>

<g:if device='phone'>
<style>
.customHeader { font-size: 22px; -webkit-box-align: center; }
.customHeader .divider { height: 22px; margin-top: 5px; }
</style>
</g:if>

<div class='customHeader'>
<div class='editionName'>
<img src="https://producer.googleusercontent.com/producer/attachment/CAAqBwgKMKqJ4AEw8bcN-gioxx.org_headerText.png4" />
</div>
<div class='divider'></div>
<div class='sectionName'>
<img src="https://producer.googleusercontent.com/producer/attachment/CAAqBwgKMKqJ4AEw8bcN-twitter_newbird_white.png" style="width: 50px; float: left;" /><g:text textid='sectionName'></g:text>
</div>
</div>

Vale lo stesso per Facebook o Google Plus, quest’ultimo integrato e già disponibile tra le sezioni inseribili in testata. Per Facebook vi servirà qualche passaggio in più, neanche troppo difficile …

L’integrazione con Facebook

Un semplice servizio online ed un URL ben preciso è tutto ciò che vi serve per avere un feed RSS da dare in pasto a Currents e pubblicare i contenuti di una timeline Facebook di una vostra pagina direttamente su smartphone e tablet senza passare dal Social Network di Mark Zuckerberg o esservi iscritti.

Find My Facebook ID è quello di cui necessitate. Andate alla pagina findmyfacebookid.com e inserite l’URL completo della pagina / profilo Facebook, quindi con l’unico pulsante disponibile ottenete l’ID numerico della pagina, copiatelo ed andate a sostituirlo nell’URL seguente che rimarrà sempre lo stesso:

https://www.facebook.com/feeds/page.php?id=182682921817&format=rss20

Dove “182682921817” è l’ID della mia pagina dedicata a ABP X Files. Avete appena ottenuto la fonte RSS attraverso la quale pubblicare i vostri contenuti Facebook su Currents :-)

Un template custom anche per gli articoli

Cosa resta da fare? Un piccolo ritocco all’aspetto della testata per gli articoli singoli prima di andare in onda :-)

Quello seguente propone la testata standard più sottile di quella delle sezioni o della tabella dei contenuti pur permettendomi di integrare ancora un logo (cosa che però ho preferito non fare, scegliendo il puro testo almeno stavolta) e il nome della sezione dalla quale stiamo attingendo le informazioni ora presenti sullo schermo del device, il tutto con un bianco e un grigio chiaro su sfondo nero:

<style>
a.seeOriginalLink {
background-color: #EDEDED;
border: 1px solid #DCDCDC;
color: #333;
cursor: pointer;
display: block;
font-family: 'Currents-Regular-Sans';
margin: 1em auto;
max-width: 330px;
padding: 0.5em;
text-align: center;
vertical-align: middle;
-webkit-tap-highlight-color: #DCDCDC;
}

a.seeOriginalLink:active {
background-color: #DCDCDC;
}
</style>

<g:header disablePages='splash'>
<style>
.customHeader {
background-color: #000000;
display: -webkit-box;
-webkit-box-flex: 0;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
}

.customHeader .editionName {
color: #FFFFFF;
font-family: 'Currents-Regular-Sans';
font-weight: normal;
margin: 0 10px 0 0;
max-width: 50%;
overflow: hidden;
text-align: right;
text-overflow: ellipsis;
text-transform: lowercase;
white-space: nowrap;
}

.customHeader .sectionName {
color: #DEDEDE;
font-family: 'Currents-Light-Sans';
font-weight: 300;
margin: 0 0 0 10px;
max-width: 40%;
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
text-transform: lowercase;
white-space: nowrap;
}

.customHeader .divider {
border-left: solid 1px #a3a3a3;
color: #727271;
}
</style>

<g:if device='tablet'>
<style>
.customHeader { font-size: 22px; height: 40px; -webkit-box-align:
center; font-weight:bold; }
.customHeader .divider { height: 22px; margin-top: 3px; }

</style>
</g:if>

<g:if device='phone'>
<style>
.customHeader { font-size: 17px; height: 30px; -webkit-box-align:
center; font-weight:bold; }
.customHeader .divider { height: 17px; margin-top: 1px; }

</style>
</g:if>

<div class='customHeader'>
<div class='editionName'>
<g:text textid='editionName'>
</g:text>
</div>

<div class='divider'>
</div>

<div class='sectionName'>
<g:text textid='sectionName'>
</g:text>
</div>
</div>
</g:header>

<g:splash layout='spanColumns' spanHeight='fit' gravity='top'
pages='1'>
<style>
.articleTitle {
color: #000;
font-family: 'Currents-Condensed-Sans';
margin-top: 30px;
text-align: left;
}

.articleSubtitle,
.articleByline {
color: #666;
font-family: 'Currents-Regular-Sans';
line-height: 30px;
text-align: left;
}

.articleByline {
border-bottom: solid 1px #ccc;
border-top: solid 1px #ccc;
font-size: 14px;
line-height: 30px;
height: 30px;
margin: 15px 0 0 0;
}

.articleByline img {
height: 16px;
margin-right: 5px;
vertical-align: sub;
width: 16px;
}

.articleCreated {
color: #999;
}
</style>

<g:if device='tablet'>
<style>
.articleTitle { font-size: 42px; margin: 20px 0 5px 0;
line-height: 1.1em; }
.articleSubtitle { font-size: 26px;line-height: 1.1em; }

</style>
</g:if>

<g:if device='phone'>
<style>
.articleTitle { font-size: 30px; margin: 15px 0 5px 0;
line-height: 1.1em; }
.articleSubtitle { font-size: 22px;line-height: 1.1em; }

</style>
</g:if>

<div class='articleTitle'>
<g:field fieldId='title'>
</g:field>
</div>

<div class='articleSubtitle'>
<g:field fieldId='subtitle'>
</g:field>
</div>

<div class='articleByline'>
<span class='articleFavicon'>
<g:field fieldId='favicon' hideExpansion='true'>
</g:field>
</span>

<g:field fieldId='external_authorName'>
</g:field>

<span class='articleCreated'>
<g:field fieldId='external_created'>
</g:field>
</span>
</div>
</g:splash>

<g:include template='interstitialAd'>
</g:include>

<g:include template='leaderboardAd'>
</g:include>

<g:fieldgroup source='feed,discovered,user' type='' start='1'
max='1' slideshow='true'>
</g:fieldgroup>

<g:field fieldId='body'>
</g:field>

<g:fieldgroup source='feed,discovered,user' type='' start='2'
max='10' slideshow='true'>
</g:fieldgroup>

Estremamente pulito e semplice, anche sui tablet.

Articoli e template custom: Supporto Informatico

Partendo dal presupposto che tutto quello che c’era da dire è stato detto fino a due righe fa, dedico questo breve paragrafo all’integrazione che ho voluto eseguire tra il mio blog e SupportoInformatico.org, progetto personale nato qualche tempo fa che ancora oggi -statistiche alla mano- raccoglie il favore del pubblico più tecnico alla ricerca dell’URL semplice da ricordare e dire agli utenti che hanno ben poca confidenza con le macchine!

Quello che sono andato ad operare sui singoli articoli pescati da questo diverso feed è la semplice modifica dell’intestazione che ora non proporrà mai il nome della sezione ma manterrà semplicemente il testo “supporto informatico“, inserito a mano proprio nel codice qui di seguito:

<style>
a.seeOriginalLink {
background-color: #EDEDED;
border: 1px solid #DCDCDC;
color: #333;
cursor: pointer;
display: block;
font-family: 'Currents-Regular-Sans';
margin: 1em auto;
max-width: 330px;
padding: 0.5em;
text-align: center;
vertical-align: middle;
-webkit-tap-highlight-color: #DCDCDC;
}

a.seeOriginalLink:active {
background-color: #DCDCDC;
}
</style>

<g:header disablePages='splash'>
<style>
.customHeader {
background-color: #000000;
display: -webkit-box;
-webkit-box-flex: 0;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
}

.customHeader .editionName {
color: #FFFFFF;
font-family: 'Currents-Regular-Sans';
font-weight: normal;
margin: 0 10px 0 0;
max-width: 50%;
overflow: hidden;
text-align: right;
text-overflow: ellipsis;
text-transform: lowercase;
white-space: nowrap;
}

.customHeader .sectionName {
color: #DEDEDE;
font-family: 'Currents-Light-Sans';
font-weight: 300;
margin: 0 0 0 10px;
max-width: 40%;
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
text-transform: lowercase;
white-space: nowrap;
}

.customHeader .divider {
border-left: solid 1px #a3a3a3;
color: #727271;
}
</style>

<g:if device='tablet'>
<style>
.customHeader { font-size: 22px; height: 40px; -webkit-box-align:
center; font-weight:bold; }
.customHeader .divider { height: 22px; margin-top: 3px; }

</style>
</g:if>

<g:if device='phone'>
<style>
.customHeader { font-size: 17px; height: 30px; -webkit-box-align:
center; font-weight:bold; }
.customHeader .divider { height: 17px; margin-top: 1px; }

</style>
</g:if>

<div class='customHeader'>
<div class='editionName'>
<!--<g:text textid='editionName'>-->
<g:text textid='sectionName'>
</g:text>
</div>

<!--<div class='divider'>
</div>-->

<div class='sectionName'>
<!--<g:text textid='sectionName'>-->
</g:text>
</div>
</div>
</g:header>

<g:splash layout='spanColumns' spanHeight='fit' gravity='top'
pages='1'>
<style>
.articleTitle {
color: #000;
font-family: 'Currents-Condensed-Sans';
margin-top: 30px;
text-align: left;
}

.articleSubtitle,
.articleByline {
color: #666;
font-family: 'Currents-Regular-Sans';
line-height: 30px;
text-align: left;
}

.articleByline {
border-bottom: solid 1px #ccc;
border-top: solid 1px #ccc;
font-size: 14px;
line-height: 30px;
height: 30px;
margin: 15px 0 0 0;
}

.articleByline img {
height: 16px;
margin-right: 5px;
vertical-align: sub;
width: 16px;
}

.articleCreated {
color: #999;
}
</style>

<g:if device='tablet'>
<style>
.articleTitle { font-size: 42px; margin: 20px 0 5px 0;
line-height: 1.1em; }
.articleSubtitle { font-size: 26px;line-height: 1.1em; }

</style>
</g:if>

<g:if device='phone'>
<style>
.articleTitle { font-size: 30px; margin: 15px 0 5px 0;
line-height: 1.1em; }
.articleSubtitle { font-size: 22px;line-height: 1.1em; }

</style>
</g:if>

<div class='articleTitle'>
<g:field fieldId='title'>
</g:field>
</div>

<div class='articleSubtitle'>
<g:field fieldId='subtitle'>
</g:field>
</div>

<div class='articleByline'>
<span class='articleFavicon'>
<g:field fieldId='favicon' hideExpansion='true'>
</g:field>
</span>

<g:field fieldId='external_authorName'>
</g:field>

<span class='articleCreated'>
<g:field fieldId='external_created'>
</g:field>
</span>
</div>
</g:splash>

<g:include template='interstitialAd'>
</g:include>

<g:include template='leaderboardAd'>
</g:include>

<g:fieldgroup source='feed,discovered,user' type='' start='1'
max='1' slideshow='true'>
</g:fieldgroup>

<g:field fieldId='body'>
</g:field>

<g:fieldgroup source='feed,discovered,user' type='' start='2'
max='10' slideshow='true'>
</g:fieldgroup>

Mentre la testata della sezione principale integra un logo completo che mostra il simbolo, il nome e l’URL del blog.

In conclusione

Currents è indubbiamente un bel progetto ed un ottimo strumento per sbarcare su smartphone e tablet con il minore sforzo possibile e la maggiore qualità disponibile allo stato attuale.

Ho avuto modo di metterlo alla prova anche sottoscrivendo importanti feed italiani e non e godendo di buona qualità di lettura e minore fatica nel destreggiarmi tra pubblicità e immagini che nulla hanno a che fare tipicamente durante la navigazione di una testata attraverso Safari (su iOS).

Sia questo blog che il progetto ABP X Files sono sbarcati sin dal primo momento su Currents, mi farebbe molto piacere se mi “portaste in giro con voi” ogni volta che potete! :-)

Gli URL diretti per sottoscrivere le edizioni sono rispettivamente gioxx.org/currents e mozilla.gfsolone.com/currents, ma potete tranquillamente puntare il vostro lettore di QR code subito qui sotto per evitare di utilizzare la tastiera!

Buona lettura! :-)