Twitter Timeline Widget

Piccola novità con il post di oggi, parleremo infatti di una funzionalità che interessa sia chi ha un sito qui su WordPress.com sia chi ne mantiente una istanza self-hosted del CMS WordPress *e* utilizza il plugin JetPack. In particolare ci concentreremo sul widget relativo a Twitter e di come questo si sia modificato nel tempo, supportando la funzionalità di Timeline che permette una interattività tra il nostro flusso di cinguettii e chi ci legge, direttamente sulle pagine del nostro sito …

Embed mediante shortcode

In prima istanza dovremo andare sul sito di Twitter, autenticarci e provvedere a creare il nostro Twitter Widget. Qui potremo scegliere il nostro schema di colori per la sua visualizzazione nonché le sue dimensioni. Una volta fatto non ci resterà che cliccare sul tasto di salvataggio “Save Changes.” – per chi come me mantiene l’interfaccia in lingua inglese.

Per inserire quindi il widget appena creato in un qualunque post appena creato sul nostro spazio WordPress.com ci basterà copiare il seguente shortcode nell’editor del post:

[twitter-timeline id=1234 username=yourhandle]

Nello shorcode, l’id è quella lunga sequenza numerca che possiamo visualizzare nella URL quando stiamo editando il nostro widget, mentre il nostro username è quello usato su Twitter (ricordandoci di levare la @ che lo precede … quindi da @kOoLiNus -nel mio caso, a solo `kOoLiNuS`.

e ancora:

Lo screenshot mostra in un’immagine quanto sopra riportato. Una volta fatto ciò, e salvato, otterremo un risultato come il seguente:

Tweets by @wordpressdotcom

Veniamo ora ai cambiamenti occorsi nel wiget Twitter Timeline ed al suo nuovo aspetto, in qualunque area abilitata ad ospitarlo.

Configurazione del Widget

Per attivare il widget, come noto, ci basterà trascinarlo dall’area dove sono elencati quelli disponibili nella nostra sidebar (o footer, o testata, a seconda del tema) all’interno della Bacheca una volta che avremo seguito il percorso Aspetto -> Widget. Le nuove opzioni di configurazione sono le seguenti:

• Title (titolo): Serve per impostare un titolo personalizzato al widget come “cinguettii”, “il mio twitter” o “Twit Recenti”.
• Width (larghezza): Serve a specificare (in pixel) la larghezza del widget che mostrerà la tua timeline. Mantenendo come valore “0″ il sistema cercherà di leggere il foglio di stile in modo che si adatti al meglio alle dimensioni della barra laterale del tema che stai utilizzando.
• Height (altezza): Questa è l’impostazione con cui dimensionare l’altezza della nostra timeline. Il default è fissato a 400px che, tipicamente, riesce a far visualizzare due o tre dei nostri tweet più recenti (gli altri sono visualizzabili mediante scorrimento).
• Widget ID: È il numero identificativo, univoco, assegnato al tuo widget su Twitter. Abbiamo visto poco sopra come individuarlo.
• Layout Options (opzioni layout): Volendo si può lavorare con queste opzioni in modo da modificare l’aspetto standard della propria timeline. Ogni volta che ne selezioniamo uno, salviamo, aggiorniamo la pagina di ‘anteprima’ del sito e visualizziamo il risultato della nostra modifica.
• Link/Border Color (colore link/bordi): Se ti interessa un’integrazione più spinta del widget con il tuo tema, puoi provare ad inserire il codice colore esadecimale per ciascuna delle due aree specificate.
• Timeline Theme: Twitter fornisce, di base, due temi standard – uno chiaro ed uno scuro – per la timeline dei suoi utenti. Puoi coordinare l’aspetto del widget anche soltanto andando a scegliere quale dei due meglio si adatta al tema che stai usando.

È tutto. Domande?

Snap, nuovo tema premium su WordPress.com

Nella tradizione Automattic, il giovedì viene utilizzato per il rilascio di un nuovo tema. L’ultimo arrivato è un tema premium (al costro di 68$) realizzato dal team di The Theme Foundry.

Snap – questo il nome del nuovo nato – è un tema reattivo, molto leggero negli elementi grafici, che ricalca in pieno gli stilemi minimalistici degli ultimi trend del web design. Il tutto per valorizzare al massimo i contenuti proposti.

Valorizza i tuoi lavori

Andiamo ora ad esaminarne le peculiarità, oltre all’evidente realizzazione in griglia degli elementi della pagina. Già da questi primi screenshot si vede come, indipendentemente dal dispositivo utilizzato per la visualizzazione di un sito che utilizza questo tema, quello che salta all’occhio è il contenuto che ci andiamo a mettere.

Snap è quindi un perfetto template per l’uso come portfolio personale

La homepage di Snap (come puoi vedere cliccando qui) è pensata per riassumere in breve i punti focali del tuo business. Possiamo inserire uno slider o un’immagine statica nella zona principale della pagine, affiancato poi da una griglia contenente i tuoi progetti più recenti o le ultime novità.

Un portfolio sempre in ordine

Snap, come dicevamo, è realizzato specificatamente pensando alla realizzazione di un portfolio personale. Infatti è presente un template di pagina chiamato appunto Portfolio (qui una demo) che assieme all’ordinamento delle stesse, e dei loro contenuti, assicura un risultato molto accattivante. Questo è possibile anche grazie ad alcune modifiche effettuabili attraverso una comoda interfaccia drag-and-drop.

Conoscere l’autore

Oltre ai tuoi lavori, Snap è realizzato anche per mettere in evidenza l’autore delle opere mostrate. Il template di pagina profilo è perfetto per raccontare la tua storia, il tuo business. Puoi completare il tuo profilo inserendo un tuo ritratto, con un testo descrittivo, che appariranno nella colonna sinistra, assieme agli altri contenuto della pagina.

Aggiungi il tuo stile

Grazie all’utilizzo di un’immagine, o un colore, di sfondo è molto facile personalizzare il look-n-feel del tuo sito usando Snap. Come sempre è a disposizione l’upgrade a pagamento  Custom Design per modificare lo schema colori e le font utilizzate.upgrade, you can also quickly personalize Snap’s color scheme and fonts.

Le speficiche in breve (tutte le misure sono espresse in pixel):

1. Snap è un tema a larghezza variabile e responsive.
2. Immagini e video vengono scalati a seconda della dimensione dello schermo.
3. Lo slider per i contenuti in evidenza deve essere grande almeno 994 per 650.
4. Il signolo post e la pagina di default hanno una larghezza massima della colonna del contenuto pari a 651.
5. Nella pagina a piena larghezza la colonna principale ha una larghezza massima di 994.

Sei un albergatore? Valorizza la tua proprietà con WordPress.com

Se hai un (piccolo) hotel, una locanda, un bed & breakfast e ne vuoi valorizzare il sito web, con foto accattivanti, uno stile personale e funzionale, che sia visualizzato splendidamente su dispositivi mobili, e la cui fruizione su di essi non sia frustante beh … da oggi WordPress.com può venirti incontro con la sua nuova sezione WordPress.com/hotels.

Una dimora per la tua dimora

Scopo di Automattic è stato quello di valorizzare e semplificare la gestione della presenza online di ciascuna attività di albergazione, a complemento finale di tutto il lavoro fatto da ciascun albergatore nel rendere il più comfortevole possibile l’esperienza nella “dimora fuori casa” costruita per i propri clienti.

Come Stay with us

“Vieni a stare con noi” … questo è stato il tema ispiratore per la realizzazione del nuovo tema Stay (questa la sua vetrina su Theme WordPress.com). Il tema è stato realizzato sulle specifiche esigenze, proprie di un’attività di albergazione, permettendo di mettere in evidenza tutte le caratteristiche e le attrazioni a disposizione della struttura dando ampio respiro alle immagini e corredando il tutto con una serie di funzionalità specifiche che andiamo ora ad esaminare.

Ad esempio, è presente la gestione delle stanze in un apposito menù della Bacheca, dove potremo andare ad inserirne la descrizione, le testimonianze degli utenti che vi hanno risieduto, ed i prezzi di ciascuna di esse; il tutto in pochi e semplici passaggi. Sarà poi possibile anche visualizzare ciascuna di esse in una apposita Pagina del tema.

Ovviamente è stato implementato un meccanismo di gestione delle prenotazioni delle stanze, in modo che il visitatore possa sapere immediatamente se la stanza da lui richiesta è disponibile per la data della sua permanenza.

Possiamo personalizzare Stay inserendo il logo della nostra attività, scegliendo un’immagine o colore di sfondo o con un’attento uso delle varie zone dove possiamo inserire widget (ben otto) o attraverso l’uso di menù personalizzati. Come sempre, poi, è possibile spingersi più in la acquistando una (o più) delle funzionalità Premium messe a disposizione di WordPress.com, come l’uso di colori personalizzati, l’attivazione della modifica dei CSS attraverso il Custom Design upgrade.

Stay è un tema completamente adattivo (responsive, come si dice in gergo tecnico), perfetto per la visualizzazione su qualunque schermo, di qualunque dispositivo. Se il nostro prossimo cliente è già per strada, non avrà quindi problemi a trovarci, senza dover essere costretto ad una scrivania…

Sarai in buona compagnia

Sono già cominciate ad essere presenti alcune attività commerciali che hanno sfruttato questa nuova funzionalità della piattaforma WordPress.com E ad essere pubblicizzate nella directory WordPress.com/hotels, quali:

☞ The Lake Crest Inn

☞ Long House Bed & Breakfast

☞ Yellow Inn

Considerazioni finali

Le pagine WordPress.com/hotels e quella del tema Stay vanno lette attentamente, poiché ben enfatizzano i vari punti di forza di questa offerta commerciale resa disponibile gratuitamente dalla piattaforma. Il passaggio all’acquisto delle funzionalità Premium, infatti, è del tutto opzionale e può subentrare senza problema alcuno nei casi in cui, ad esempio, si parta con la propria attività e forte dei successi raccolti si voglia continuare ad investire sulla propria presenza web (senza passare da Facebook o simili).

Credo anche che questo sia l’inizio di un nuovo tipo di business per Automattic, offrendosi come un’alternativa a siti quali l’italianissimo http://www.1and1.it molto pubblicizzato in questi mesi in TV, ma la cui qualità tecnica e grafica han lasciato perplessi più d’uno…

---

Bueno: un esempio di personalizzazione

Ciao a tutti,

il tempo è tiranno e non si riesce a star dietro alle cose cui si tengono, specie se non sono essenziali nella vita quotidiana (leggasi salute e lavoro). Per fortuna la voglia di scrivere e parlare delle cose che ci piacciono non manca ed eccomi qui a tradurre un (lungo) articolo d’esempio pubblicato un mese fa dai tipi di WordPress.com in merito alla personalizzazione del proprio blog, fornendo un caso d’uso reale …

Penso sia un’esigenza comune quella di voler personalizzare il template del proprio sito/blog in modo che ci calzi a pennello, come un abito su misura, e che rispecchi in un certo qual modo il nostro gusto estetico e la nostra personalità. Oggi vedremo come è possibile personalizzare quello che oggi è il terzo tema più popolare su WordPress.com e, nonostante ciò, costruire qualcosa di completamente personale.

Diciamo ciao al blog Mi Piace Kate:

Kate è una graphic designer, come si intuisce un’amante dei gatti e del fai da te che ha scelto di pubblicare le proprie cose utilizzado il tema gratuito Bueno. Abbiamo scelto di parlare del suo blog perchè costituisce un fantastico esemoio di come l’utilizzo di alcune immagini personali e l’utilizzo del Custom Design upgrade (per un costo di 30$) possono cambiare un tema gratuito in uno dal look super-professionale e unico.

Ma bando alle ciance e guardiamo l’immagine seguente che compara la pagina standard dell’home page del tema Bueno con quella realizzata da Kate. Impressionante, vero ?

Solo prestando attenzione al cerchio contenente la data di pubblicazione del tema (rosa nella versione originale, chartreuse nella versione di Kate) si capisce quale sia il tema alla base, il fatto che ci sia Bueno a presentare i vari contenuti. Come ci è riuscita? Ecco le sue non-così-segrete tecniche….

Header personalizzato

Kate ha impostato il look & feel del suo sito direttamente nella testata della pagina, usando un’immagine per il custom header da lei realizzata che riesce ad impostare il tono emozionale del sito, e quindi del suo estensore, mediante un attento uso di forme e colori …

L’utilizzo di un’immagine personale per l’header del tema non rende necessario l’acquisto di un upgrade, ma è una opzione standard per Bueno (e moltissimi altri temi sulla piattaforma WordPress.com … 152, per essere precisi).

Starei pensando, “Ma io non sono un graphic designer!”? Beh, la notizia è che tu non devi necessariamente esserlo! Basta essere creativi e utilizzare, ad esempio, il tuo word processor preferito e utilizzarle le proprietà di elaborazione del testo con effetti e forme e poi salvare il tutto come un’immagine. Oppure semplicemente utilizzare un’immagine dal significato speciale … Voilà! Personalità al volo…

Colori personalizzati

Kate ha quindi preso i colori scelti per l’immagine dell’header e li ha (sapientemente) distribuiti all’interno delle varie componenti del sito, dai cerchi contenenti le date dei post alle linee di separazione sui titoli dei widget usati. Questo le è stato possibile acquistando il Custom Design upgrade, che le ha permesso di usare esattamente i colori che voleva ed applicare le modifiche al file CSS secondo il suo gradimento.

Se il tema generale di Bueno, sul rosa, non è di tuo gradimento non c’è problema … Bueno viene offerto con sette schemi di colore differenti, che possono essere scelti ed applicati con un paio di click andando nell’apposita sezione della Bacheca, quindi Aspetto e dunque selezionando le Opzioni del Tema. Altrimet puoi utilizzare il Custom Design upgrade to change the colors of fonts and backgrounds even more, senza utilizzare i CSS. (Ma se vuoi affondare i tuoi denti nel vasto menù dei CSS qui troverai un’antipasto).

Font personalizzate

Non sono i colori possono essere modificati acquistando il Custom Design upgrade. Potrai modificare anche le font del tema sceltom andando così a modificare drasticamente l’effeto del tema di partenza. Sul suo “Mi Piace Kate”, Kate ha scelto di utilizzare la classica font serif Ambroise per l’header ed i titoli dei post, e l’altamente leggebile Museo Sans per il contenuto dei post. A questi ha affiancato, infine, l’elegante Raleway per i titoli ed i menù opzione. Se l’argomento dell’uso di font perosnalizzate ti interessa, puoi sempre consultare l’articolo (in inglese) su come altri blogger li utilizzano ed imparare come ottenerne un’anteprima per il tuo sito.

Divertirsi con le widget di testo

Kate non ha avuto paura di andare a guardare ‘sotto il cofano’ e manipolare i vari widget a disposizione in modo che apparissero esattamente come voleva. Guarda con attenzione come ha stilizzato il tuo blogroll. Lo ha cambiato dal semplice elenco puntuale una riga per sito ad un blocco compatto ma allo stesso tempo elegante e ben leggibile.

Come ci è riuscita? Semplicemente utilizzato un Text widget piuttosto che il Links widget comunemente utilizzato da tutti per il proprio blogroll. Poiché è possibile inserire codice HTML standard in una widget testuale, è riucita ad inserire l’elenco dei siti da lei seguiti separandoli elegantemente cone una doppia backslash. L’uso di font personalizzate, così come i colori, ha fatto il resto.

Kate ha poi dato un’altra forte personalizzazione alla sidebar del suo blog utilizzado una delle widget preferite dai ragazzi di Automattic ma poco utilizzate tra gli utenti. Una comune widget di testo con un po’ di testo per la parte “about” dell’autrice. Anche qui l’utilizzo di font, colori e testo riesce a dare al visitatore informazioni e contesto rinforzando l’esperienza di navigazione del “brand” Mi Piace Kate brand.

Si è anche preoccupata di personalizzare i titoli delle widget utilizzate, quindi “Links” divente “I Like to Look,” e “About” diventa “Oh Hello.” Non perdete quindi occasione di personalizzare ogni più piccolo dettaglio del tuo blog!

Come si vede, alla fine, a Kate è bastato un po’ di buon gusto, pazienza ed attenzione nell’esaminare le possibilità offerte da Bueno e dai vari upgrade della piattaforma WordPress.com per esprimere la propria personalità e gusto estetico.

–

Nei prossimi giorni spero di riuscire a tradurvi un’altro paio di interessanti articoli sulla personalizzazione dei template WordPress!