Archives For Letture

È colpa di Nicola e del suo articolo di qualche giorno fa, ho provato l’esperimento GitHub di Fang-Pen Lin e Pablo Stanley disponibile all’indirizzo getavataaars.com. Si tratta di un generatore di avatar molto dinamico che può essere utilizzato anche tramite URL e che sfrutta la libreria sviluppata dallo stesso team (dai un’occhiata qui: avataaars.com).

Simpatici esperimenti: avataaars generator

La costruzione avviene direttamente tramite menu a tendina disponibili sul sito web, tu devi solo trovare la migliore combinazione per rappresentare te stesso. Puoi salvare il risultato in qualsiasi momento usando il formato PNG, quello SVG ha qualche problema (non viene aperto correttamente né da Gimp, né da Inkscape; il primo vede uno sfondo completamente trasparente, il secondo solo una piccola parte degli elementi che hai utilizzato per costruire la tua immagine cartoon). Puoi inoltre includere in maniera diretta la tua immagine tramite codice HTML (questo ti permette di non rimetterci tuo spazio web e banda).

L’esempio pratico di quanto appena detto sopra è questo:

<img src='https://avataaars.io/?avatarStyle=Transparent&topType=ShortHairShortRound&accessoriesType=Prescription02&hairColor=Black&facialHairType=BeardLight&facialHairColor=Black&clotheType=Hoodie&clotheColor=Gray02&eyeType=Side&eyebrowType=RaisedExcited&mouthType=Twinkle&skinColor=Light'
/>

Buon divertimento! 😉

Condividi l'articolo con i tuoi contatti:

Non è una novità (per chi mi conosce e magari mi ha tra “gli amici“) che io abbia abbandonato Facebook da qualche tempo a questa parte. Mantengo l’account, sporadicamente mi collego e butto un occhio al feed ma nulla più, non interagisco, non ci perdo altro tempo. Il fascino del Social Network per antonomasia, re incontrastato dei rapporti ricuciti nonostante la lontananza tra due o più persone ha commesso troppi errori per passare inosservato. Tanti lo hanno definitivamente abbandonato cancellando le proprie tracce, io lo tengo lì un po’ come un soprammobile nella teca. Non ho le applicazioni di Facebook installate sullo smartphone (né tanto meno sul tablet) e sto bene così, spero di riuscire entro un certo tempo a fare la stessa cosa con Instagram (dove pubblico poco ma guardo abbastanza).

r/gioxx.org, la protezione della rete e dei propri contenuti

Il blog in questa sua “ultima versione” (Gioxx’s Wall) è invece aperto e sufficientemente (spero) curato dal 2007, di anni ne sono passati abbastanza, così come di acqua sotto ai ponti, eppure lui è sempre qui, raggiungibile, letto (qualche volta più, qualche volta meno) ma mai realmente abbandonato. È la mia creatura, quel “One Man Show” che ti mette davanti la platea di lettori che possono giudicarti in qualsiasi momento, che possono conoscerti un po’ di più, fare affidamento su di te per ciò che è inerente la professione e la passione riportata negli articoli. È un po’ un rifarsi a quanto scritto – e personalmente apprezzato – da Emanuele qualche tempo fa:

La rete va protetta.

Emanuele non è il solo ad aver intrapreso questa strada (calcando poi la mano con la serie dedicata al riprendersi la propria privacy), c’è anche Luca che ha scelto di dare un taglio netto con il passato.

Io che c’entro?

Per il momento poco, è chiaro che qualcosa non mi torna, che non è più la “scampagnata” di qualche anno fa, belli (oddio, si fa quel che si può), spensierati e poco attenti a questo tipo di accadimenti, sempre pronti a lanciarci in quella nuova avventura e prodotto messo per scambiarci idee e opinioni. Sono orfano di FriendFeed, mai dimenticarlo (soprattutto per chi ha avuto l’occasione di trovarcisi iscritto e in mezzo alla bolgia), ed è un po’ quello che ho ritrovato su Reddit. Dopo anni di lurking, ho deciso di registrare il mio account e creare uno spazio da dedicare al blog, ai suoi lettori, agli amici e conoscenti. È così che nasce /r/Gioxx.

Blog, r/gioxx.org, la protezione della rete e dei propri contenuti

Vedilo come uno spazio di confronto. Ho iniziato a interagire con le altre persone che compongono comunità italiane e internazionali di Reddit, voglio in qualche maniera dare anche del mio indietro. Se un tempo avrei preferito condividere articoli e spunti interessanti tramite la pagina Facebook del blog, oggi voglio farlo tramite la stanza su Reddit, con la possibilità di parlare insieme di un argomento specifico, scambiarci opinioni, pareri, in maniera civile e pacata. Il blog qui è e qui resterà, questo è certo, almeno fino a quando continuerò a pagare la corrente e lo spazio messomi a disposizione, voglio che tu veda /r/Gioxx come un luogo dove parlare d’altro, dove segnalare interessanti letture e / o chiedere lumi su un determinato argomento, pur rimanendo nella sfera dedicata agli argomenti principali di questo blog (informatica, videogiochi, entertainment, ecc.).

Ti aspetto :-)


immagine di copertina: unsplash.com / author: Clark Tibbs
Condividi l'articolo con i tuoi contatti:

Era agosto quando ho cominciato a curiosare nel sito web di Fabio Disconzi, approdato lì grazie a un consiglio di lettura riguardo gli Open Data e la difficile adozione da parte di alcune mentalità “brillanti“, quelle che difficilmente comprendono che si tratta di dati ufficialmente accessibili in maniera pubblica, al massimo rimaneggiati da chi ne ha le giuste capacità e che, talvolta, li propone in maniera parecchio più “user-friendly“, come fa Fabio. L’articolo di cui parlo è questo (e ti consiglio a mia volta la lettura): fabiodisconzi.com/webzine/opendata/30/societa-opendata-trasparenza-problemi/index.html

Perché ne parlo oggi? Perché chiacchierando con un amico è saltato fuori l’eterno discorso del prezzo della benzina nella pompa italiana, e del suo costante modificarsi nel tempo a causa di accise e scelte del governo non troppo chiare al comune mortale come me. È per questo motivo che mi è tornato in mente il sito web di Fabio, ed è per questo che ho consigliato di farci un salto per rendersi conto della curva di crescita (e decrescita, in rari casi) che il litro ha subito.

L'Open Carburanti di Fabio Disconzi

Si chiama Open Carburanti ed è solo uno degli osservatori messi a disposizione, nati grazie alla disponibilità degli Open Data resi pubblici dal Governo Italiano (vedi qui: mise.gov.it/index.php/it/open-data), plasmati affinché l’utente finale potesse leggerli e ordinarli secondo le proprie esigenze. Il progetto –completamente libero e aperto a tutti– è accessibile all’indirizzo fabiodisconzi.com/open-carburanti.

Da qui potrai navigare nei prezzi medi storici del carburante (non solo gasolio o benzina verde, ma anche GPL e metano), cercare la pompa di benzina economica più vicina a te, ma anche capire quanto ti è costato un pieno di benzina (basato sulla media dei 40 litri, occhio) rispetto all’ultimo aggiornamento dei prezzi, confrontando il tutto tra le diverse bandiere presenti sul mercato. Questo particolare riguardo le accise ha risposto alla domanda principale della chiacchierata di cui ti parlavo all’inizio, ma c’è tanto che si può imparare semplicemente dando una forma ai dati grezzi.

Questo più che un articolo è uno di quei consigli e “Segnalibro” che puoi salvare anche tu nel tuo browser, perché sono certo che possa tornarti utile per rispondere a qualche tua domanda. Dal canto mio, ringrazio Fabio per il lavoro svolto e gli faccio un grande in bocca al lupo per un futuro meno denso di mentalità chiuse che pretendono solo di essere rimosse / oscurate da quanto da lui messo online. Tutti abbiamo il sacrosanto diritto della maggiore trasparenza di quanto è già nato pubblico.

Buon fine settimana!


Photo by Gab Pili on Unsplash
Condividi l'articolo con i tuoi contatti:

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.

Gioxx’s Wall su Google Currents – gioxx.org/currents

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:

&lt;style&gt;
.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;
}
&lt;/style&gt;

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

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

&lt;div class='customHeader'&gt;
&lt;div class='editionName'&gt;
&lt;/div&gt;
&lt;/div&gt;

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:

&lt;style&gt;
.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;
}
&lt;/style&gt;

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

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

&lt;div class='customHeader'&gt;
&lt;div class='editionName'&gt;
&lt;img src=&quot;https://producer.googleusercontent.com/producer/attachment/CAAqBwgKMKqJ4AEw8bcN-gioxx.org_headerText.png4&quot; /&gt;
&lt;/div&gt;
&lt;div class='divider'&gt;&lt;/div&gt;
&lt;div class='sectionName'&gt;
&lt;g:text textid='sectionName'&gt;&lt;/g:text&gt;
&lt;/div&gt;
&lt;/div&gt;

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 :-)

&lt;style&gt;
.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;
}
&lt;/style&gt;

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

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

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

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:

&lt;style&gt;
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;
}
&lt;/style&gt;

&lt;g:header disablePages='splash'&gt;
&lt;style&gt;
.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;
}
&lt;/style&gt;

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

&lt;/style&gt;
&lt;/g:if&gt;

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

&lt;/style&gt;
&lt;/g:if&gt;

&lt;div class='customHeader'&gt;
&lt;div class='editionName'&gt;
&lt;g:text textid='editionName'&gt;
&lt;/g:text&gt;
&lt;/div&gt;

&lt;div class='divider'&gt;
&lt;/div&gt;

&lt;div class='sectionName'&gt;
&lt;g:text textid='sectionName'&gt;
&lt;/g:text&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/g:header&gt;

&lt;g:splash layout='spanColumns' spanHeight='fit' gravity='top'
pages='1'&gt;
&lt;style&gt;
.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;
}
&lt;/style&gt;

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

&lt;/style&gt;
&lt;/g:if&gt;

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

&lt;/style&gt;
&lt;/g:if&gt;

&lt;div class='articleTitle'&gt;
&lt;g:field fieldId='title'&gt;
&lt;/g:field&gt;
&lt;/div&gt;

&lt;div class='articleSubtitle'&gt;
&lt;g:field fieldId='subtitle'&gt;
&lt;/g:field&gt;
&lt;/div&gt;

&lt;div class='articleByline'&gt;
&lt;span class='articleFavicon'&gt;
&lt;g:field fieldId='favicon' hideExpansion='true'&gt;
&lt;/g:field&gt;
&lt;/span&gt;

&lt;g:field fieldId='external_authorName'&gt;
&lt;/g:field&gt;

&lt;span class='articleCreated'&gt;
&lt;g:field fieldId='external_created'&gt;
&lt;/g:field&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;/g:splash&gt;

&lt;g:include template='interstitialAd'&gt;
&lt;/g:include&gt;

&lt;g:include template='leaderboardAd'&gt;
&lt;/g:include&gt;

&lt;g:fieldgroup source='feed,discovered,user' type='' start='1'
max='1' slideshow='true'&gt;
&lt;/g:fieldgroup&gt;

&lt;g:field fieldId='body'&gt;
&lt;/g:field&gt;

&lt;g:fieldgroup source='feed,discovered,user' type='' start='2'
max='10' slideshow='true'&gt;
&lt;/g:fieldgroup&gt;

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:

&lt;style&gt;
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;
}
&lt;/style&gt;

&lt;g:header disablePages='splash'&gt;
&lt;style&gt;
.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;
}
&lt;/style&gt;

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

&lt;/style&gt;
&lt;/g:if&gt;

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

&lt;/style&gt;
&lt;/g:if&gt;

&lt;div class='customHeader'&gt;
&lt;div class='editionName'&gt;
&lt;!--&lt;g:text textid='editionName'&gt;--&gt;
&lt;g:text textid='sectionName'&gt;
&lt;/g:text&gt;
&lt;/div&gt;

&lt;!--&lt;div class='divider'&gt;
&lt;/div&gt;--&gt;

&lt;div class='sectionName'&gt;
&lt;!--&lt;g:text textid='sectionName'&gt;--&gt;
&lt;/g:text&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/g:header&gt;

&lt;g:splash layout='spanColumns' spanHeight='fit' gravity='top'
pages='1'&gt;
&lt;style&gt;
.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;
}
&lt;/style&gt;

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

&lt;/style&gt;
&lt;/g:if&gt;

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

&lt;/style&gt;
&lt;/g:if&gt;

&lt;div class='articleTitle'&gt;
&lt;g:field fieldId='title'&gt;
&lt;/g:field&gt;
&lt;/div&gt;

&lt;div class='articleSubtitle'&gt;
&lt;g:field fieldId='subtitle'&gt;
&lt;/g:field&gt;
&lt;/div&gt;

&lt;div class='articleByline'&gt;
&lt;span class='articleFavicon'&gt;
&lt;g:field fieldId='favicon' hideExpansion='true'&gt;
&lt;/g:field&gt;
&lt;/span&gt;

&lt;g:field fieldId='external_authorName'&gt;
&lt;/g:field&gt;

&lt;span class='articleCreated'&gt;
&lt;g:field fieldId='external_created'&gt;
&lt;/g:field&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;/g:splash&gt;

&lt;g:include template='interstitialAd'&gt;
&lt;/g:include&gt;

&lt;g:include template='leaderboardAd'&gt;
&lt;/g:include&gt;

&lt;g:fieldgroup source='feed,discovered,user' type='' start='1'
max='1' slideshow='true'&gt;
&lt;/g:fieldgroup&gt;

&lt;g:field fieldId='body'&gt;
&lt;/g:field&gt;

&lt;g:fieldgroup source='feed,discovered,user' type='' start='2'
max='10' slideshow='true'&gt;
&lt;/g:fieldgroup&gt;

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! :-)

Condividi l'articolo con i tuoi contatti: