Esistono vari plugin per mettere online con pochi clic la versione mobile di un blog WordPress (basti pensare a Wp Touch), ma le grandi possibilità di personalizzazione di MobilePress mi hanno convinto più di ogni altra cosa.

Tra i suoi punti di forza includo:

• Possibilità di creare temi per la versione mobile, sfruttando le stesse logiche dei temi standard per WordPress
• Possibilità di fornire un tema esclusivo per iPhone/iPod Touch
• Nessuna difficoltà di installazione e configurazione

Parlando dei difetti, l’unico che ho trovato riguarda l’interfaccia di amministrazione, in particolare l’assegnazione del tema. Se non riuscite a vedere il template corretto sul vostro iPhone, è perché il tema relativo a questo dispositivo viene assegnato separatamente rispetto a tutti gli altri dispositivi mobili. Sarebbe meglio avere un’impostazione di default per dare inizialmente a tutte le piattaforme lo stesso tema, iPhone compreso.

Scarica il mio tema base

Viste le possibilità che questo plugin mette a disposizione, sarebbe interessante realizzare una raccolta di temi gratuiti per dispositivi mobili, così come succede già su WordPress.org per i temi standard.

Voglio dare il mio contributo mettendo a disposizione la base del mio tema mobile, che ho realizzato modificando quello di default. Ho tradotto alcuni testi, modificato il formato delle date ed ottimizzato il codice HTML riducendolo all’essenziale.

MobilePress Theme (.zip – 14kb):

Potete considerarla come una base di partenza su cui fare le vostre personalizzazioni, come il cambio di colori o l’eliminazione di elementi non rilevanti per una versione mobile. Su tomstardust.com ad esempio ho limitato tutto alla visualizzazione dei soli post, nascondendo le pagine. Il mio tema comunque le include, potete decidere autonomamente come gestirle.

Se avete suggerimenti o consigli su quello che vorreste trovare nella versione mobile di un sito, dite la vostra nei commenti: il futuro della rete passerà sempre più attraverso i dispositivi mobili.

• diminuito il peso del codice, per una maggiore velocità di caricamento: da 25kb a 11kb
• implementata la navigazione da tastiera
• controllo sui link errati, che non fermano lo script ma visualizzano un’immagine di avviso
• riposizionamento automatico delle immagini durante lo scroll della pagina
• png fix per Explorer 6

Tutto questo si aggiunge all’ottimo lavoro che Diego aveva già fatto. Sono notevoli anche le opzioni di personalizzazione: tre skin sono già pronte (nera, bianca e trasparente), e c’è la possibilità tramite alcuni parametri di decidere la posizione delle frecce di scorrimento nelle gallerie di immagini (alla base dell’immagine o ai lati della pagina).

Se nel vostro prossimo progetto avete bisogno di uno script simile a Lightbox per mostrare anteprime di immagini, provate Pirobox. Alcuni dettagli come la navigazione da tastiera possono fare la differenza, e l’implementazione non richiede tag aggiuntivi nel codice: è sufficiente una classe html per abilitare lo script, in modo semplice e pulito.

Per vedere le demo e le caratteristiche di questo plugin in dettaglio vi rimando alla pagina ufficiale di Pirobox.

Ha deciso di avventurarsi in questo contesto un Web Designer italiano, Diego Valobra, che sfruttando un framework diffuso come jQuery ha realizzato un plugin pronto all’uso.

La sua creazione si chiama Pirobox: sul sito potete trovare alcuni semplici esempi, in due varianti di colore (bianco e nero). Mantenendo tutte le caratteristiche dei suoi predecessori, a mio parere è interessante la possibilità di avere i controlli per scorrere avanti e indietro posizionati esternamente rispetto alle immagini, un dettaglio che può fare la differenza.

Se volete saperne di più sul suo creatore, ho chiesto a Diego i motivi che l’hanno spinto a realizzare un clone di Lightbox, questa è stata la sua risposta:

Qualche mese fa ho iniziato ad interessarmi al framework jQuery, non tanto per sfruttare il “già fatto”,visto che di plugin come sai è piena la rete, quanto per creare effetti su misura ai siti su cui lavoro.

Credo fermamente che la creatività di un web designer non debba limitarsi al creare un layout in psd, tagliarlo, montarlo e farne il debug, ma debba spaziare attraverso il web developing il più possibile. Con questo intendo dire che i codici usati per rendere visibile ciò che si è creato in Photoshop o in Illustrator, devono stare al web designer come la grammatica sta ad uno scrittore. Mi è sembrato quindi inevitabile fare una full immersion nel mondo di ajax, e Pirobox ne è il frutto.

Voglio aggiungere che non sono un programmatore, ma essenzialmente un web designer, per questo nel creare Pirobox ho dovuto supplire alla mancanza di nozioni javascript con la mia creatività. Faccio un’esempio.
Per creare la navigazione nella gallery, quindi i tasti next e previous, tutti… e dico tutti quelli che prima di me hanno creato una qualsiasi tipo di image gallery hanno usato un array con conseguente ciclo for, incremento o decremento dei numeri relativi alle immagini. Io ho semplicemete aggirato l’ostacolo in maniera creativa, senza voler copiare nessuno (sarebbe stato troppo facile), ho  trovato un escamotage che consiste nell’aggiungere nell’html, in fase iniziale di script, due elementi lista:

<li class="begin"></li>
<li class="end"></li>

uno all’inizio della lista che uso per il set di immagini e l’altro alla fine. Questo permette il controllo sulla lista di immagini evitando di usare un array.

Per l’incremento e il decremento ho usato un altro trucco che consiste nell’aggiungere agli elementi lista della gallery adiacenti all’immagine selezionata due classi start e back, che servono per la navigazione. Ovviamente ci sono anche dei controlli sul primo e sull’ultimo elemento della lista grazie ai due <li></li> aggiunti in precedenza, così una volta arrivati all’ultima immagine il tasto next sparisce, stessa cosa per il tasto prev.

L’unico inconveniente, se così possiamo dire visto che il risultato è semanticamente giusto, è che il set di immagini con Pirobox funziona solo se viene usata una lista.

Creare Pirobox è stato stimolante, istruttivo e cosa più importante molto divertente.

Potete vedere il portfolio di Diego su Pirolab.it, e tra i suoi vari lavori troverete anche DiegoValobra.com, un sito che avevo già notato in passato viste le numerose segnalazioni su diverse Web Gallery.

Il plugin si chiama semplicemente Lifestream: dopo averlo attivato ed aver configurato dall’amministrazione i Feed RSS da importare, è sufficiente inserire in una pagina il tag [lifestream] per vedere apparire tutta la propria attività.

Il risultato può essere facilmente personalizzato tramite fogli di stile, in modo da adattare la pagina al proprio blog. Tra l’altro il plugin offre la possibilità di programmare dei post con il resoconto giornaliero: gli articoli verranno pubblicati in automatico ed assegnati ad una specifica categoria.

I requisiti del plugin Lifestream sono basilari: WordPress aggiornato almeno alla versione 2.5 e php 5.

Pro e Contro

Una soluzione di questo tipo potrebbe essere interessante come alternativa a Sweetcron, che ricordo essere ancora in beta. Sicuramente WordPress è una piattaforma molto più stabile e collaudata, tenendo anche presente che al momento non è possibile sapere quando Sweeetcron raggiungerà una versione stabile.

Se inoltre avete già un blog WordPress e non volete avere altre complicazioni, installare un semplice plugin è un’operazione molto più immediata rispetto alla configurazione di un nuovo strumento.

D’altro canto però non è detto che integrare il vostro lifestream in un blog già esistente sia la soluzione ottimale. Personalmente immagino bene questo tipo di contenuti in un contesto indipendente, non incluso in un’altra piattaforma, magari con un proprio dominio o anche solo un sottodominio diverso.

Sta a voi valutare la soluzione migliore per le vostre esigenze: è comunque innegabile che avere in una pagina il resoconto di tutte le proprie attività web 2.0 sia una tendenza che andrà ad affermarsi sempre di più.

Con una semplice combinazione di tasti ( CTRL + spazio su Pc e ALT + spazio su Mac) è possibile aprire un riquadro all’interno della finestra attiva. Da questo riquadro scrivendo poche lettere si è in grado di fare praticamente qualsiasi cosa tramite un’interfaccia a riga di comando: cercare un termine su Google o Wikipedia, tradurre il contenuto di una pagina, cercare delle immagini su Flickr o un indirizzo su Googlemaps, non ci sono limiti alle operazioni possibili.

I comandi più immediati sono:

• g: ricerca su Google
• w: ricerca su Wikipedia
• f: ricerca su Flickr
• map: ricerca su Googlemaps di un indirizzo, se selezionate del testo Ubiquity cercherà direttamente quanto evidenziato
• translate: traduzione del testo evidenziato nella pagina da una qualsiasi lingua all’inglese, utilissima per lingue sconosciute come il cinese
• imdb: ricerca sull’Internet Movie Database
• twitter: aggiorna il proprio stato di Twitter

Fantastica è la possibilità di estendere i commenti presenti, importandoli da altri siti o scrivendoli autonomamente. Per maggiori informazioni vi rimando a quelli elencati sul sito ufficiale e su questo post dei Googlisti.

Creare comandi personalizzati

E’ possibile anche creare dei comandi personalizzati per Ubiquity, magari abbinando una parola chiave alla ricerca sul vostro sito web.

Seguendo questo tutorial potete realizzare in poche righe un comando che permette di effettuare la ricerca di qualsiasi termine. Una volta realizzato lo script, salvatelo in un file .js, caricatelo sul vostro server e collegatelo ad una pagina con il seguente codice da inserire tra i tag <head> e </head>:

<link rel="commands" href="http://percorso-del-file-js" name="Titolo" />

Potete provare il comando che ho realizzato per tomstardust.com andando su questa pagina dopo aver installato Ubiquity. Una volta autorizzato lo script, potrete utilizzare il comando tomstardust per cercare qualsiasi termine su questo sito.

Se a questo punto siete incuriositi da Ubiquity e non l’avete ancora installato, potete farlo dalla pagina ufficiale dei Mozilla Labs, dove trovate anche un video con una dimostrazione pratica.

Sono mancanze che molti utenti non avranno notato, perchè riguardano funzioni utilizzate meno spesso e solo in fase di configurazione e manutenzione del proprio blog, ma non per questo meno importanti.

Gestione di massa delle categorie

Se per caso vi trovate un database ricco di post già scritti, e decidete di riorganizzare le categorie, troverete non poche difficoltà nel farlo.

Questo perchè le categorie possono essere assegnate solo nella pagina di modifica di un post: non esattamente l’ideale se avete centinaia di articoli, impensabile editarli uno ad uno.

Fortunatamente esiste un plugin chiamato Batch Categories: una volta installato ed attivato sarete in grado di assegnare o rimuovere una categoria a più post contemporaneamente.

Importante: se utilizzate WordPress dalla versione 2.5 in poi, non visualizzerete correttamente la pagina del plugin. Per risolvere il problema, che è solo di layout, vi basta installare un altro plugin: Remove Max Width. In questo modo il pannello di amministrazione di WordPress occuperà tutta la larghezza della finestra ed alcuni elementi dell’interfaccia, prima nascosti, appariranno.

Download: Batch Categories

Ordinamento delle categorie

C’è un altra mancanza importante su WordPress: non è possibile decidere in quale ordine debbano apparire le categorie. Ci sono diversi plugin che risolvono il problema, ma io vi consiglio Category Order, che fa il suo dovere con una semplice interfaccia drag & drop.

In realtà con pochi accorgimenti è possibile effettuare diverse operazioni sulle categorie anche dal template, grazie agli ID ed ai parametri di alcune funzioni, ma in questo modo è molto più immediato ed alla portata di tutti.

Download: Category Order

Con questi consigli dovreste essere in grado di gestire le vostre categorie al meglio. Se avete suggerimenti da aggiungere o domande a riguardo, dite la vostra nei commenti.

Ho utilizzato questo tag soprattutto nell’ultima modifica del mio tema, e mi sono trovato ad affrontare un problema su tutti: l’inserimento automatico del testo estratto all’interno di un paragrafo.

Per evitarlo, la soluzione è incredibilmente semplice, infatti esiste un plugin che consente di eliminare i tag html <p></p> intorno a the_excerpt per poter gestire tutto dal template. Il plugin si chiama No Excerpt P, e non fa altro che eliminare la funzione wpautop. In questo modo è possibile inserire il testo dentro dei tag di tipo <h3></h3> o simili, oppure usarlo nel meta tag description.

Se invece volete modificare la lunghezza, esiste un plugin chiamato the_excerpt Reloaded che permette di personalizzare la funzione con diversi parametri. Oltre al numero di parole visualizzate è possibile ad esempio includere elementi html che normalmente sarebbero eliminati, come immagini e link.

Infine se queste modifiche vi servono, ma non volete aggiungere altri plugin alla vostra installazione di WordPress, ricordate che potete sempre includere nel file functions.php del vostro tema gli script che desiderate.

La prima estensione che voglio segnalarvi è DragDropUpload. E’ tanto semplice quanto geniale: permette di trascinare files all’interno dei box per gli allegati. Funziona per qualsiasi form, senza dover ogni volta sfogliare il proprio hard disk alla ricerca dell’elemento desiderato. La utilizzo senza problemi anche su GMail e mi trovo benissimo, per me è diventata un must.

Un’altra estensione da conoscere è Hyperwords: consente di eseguire oltre 200 azioni su qualsiasi parola presente in una pagina web. Ci sono funzioni di conversione, traduzione, ricerca, invio e-mail e altro ancora; guardate il video demo presente su YouTube e rimarrete stupiti.

Spostandoci invece in ambito Web Design, ecco Dust-Me Selectors. Permette di individuare tutti i selettori inutilizzati in una pagina web: prima analizza automaticamente il CSS, poi verifica se nel codice della pagina ci siano elementi di troppo. Utile se vi trovate a lavorare su un sito che non conoscete, oppure su un vostro lavoro di cui avete dimenticato la struttura dei files e volete fare pulizia.

Avete notato altre estensioni di Firefox degne di nota? Segnalatele se le ritenete utili!

In questo articolo voglio elencare le 10 estensioni di Firefox a cui non potrei mai rinunciare, che mi aiutano nel lavoro di tutti i giorni e che spero possano risultare utili a chi ancora non le conosce.

1. Web Developer

Aggiunge una toolbar con numerosi strumenti e funzionalità, dalla possibilità di disabilitare i CSS alla validazione della pagina corrente.

2. Firebug

Permette di fare il debug e modificare il contenuto di una pagina con pochi clic, monitorando CSS, HTML e Javascript in tempo reale. La considero un’estensione complementare a Web Developer, piuttosto che sostitutiva.

3. CSS Mate

Estensione fondamentale per fare test al volo sui CSS di una pagina, avendo un feedback immediato.

4. IE Tab

Per testare un sito è comodo avere degli strumenti che facilitino lo switch tra i vari browser. Questa estensione permette di visualizzare una pagina con il rendering engine di Internet Explorer dentro una tab di Firefox.

5. IE View Lite

Variante di IE Tab (vedi sopra), consente di aprire la pagina corrente in una finestra di Explorer tramite una voce nel menu contestuale.

6. OperaView

Estensione dal funzionamento analogo ad IE View, utile per aprire una pagina sul browser Opera.

7. HTML Validator

Aggiunge all’interno della finestra per la visualizzazione del codice alcune indicazioni utili sulla validazione della pagina. Segnala errori e warnings, con utili suggerimenti per correggerli.

8. MeasureIt

Semplice ma utilissimo tool che crea un righello con il quale misurare gli elementi di una pagina.

9. Screengrab!

Per catturare screenshot di una pagina salvando solo la porzione visibile o tutto il contenuto. Questa estensione è stata migliorata ed il salvataggio dei file immagine ora è molto più veloce.

10. SEO for Firefox

Aggiunge informazioni utili ai risultati della ricerca di Google: PageRank, età del dominio, numero di links, rank su Technorati ed Alexa e molto altro.

Trovate queste estensioni di Firefox anche nella pagina utility di TomStardust.com, insieme ad altre risorse. Se avete consigli sull’argomento o se pensate che nell’elenco manchi qualcosa di importante non esitate a dirlo nei commenti!

La novità più importante riguarda finalmente l’aggiornamento dello script per il pannello di controllo. Adesso utilizzo la libreria Mootools di Valerio Proietti, ed ho abbandonato Prototype. Se non l’avete ancora esaminata a fondo, vi consiglio di studiare le potenzialità di questo framework javascript.

Altro piccolo cambiamento riguarda la favicon del sito, modificata grazie al FavIcon Generator su Dynamic Drive. Basta uploadare un’immagine, anche con delle trasparenze, ed il vostro file .ico è pronto in un attimo.

Queste risorse sono fin da subito disponibili nella pagina utility, che ho appena aggiornato. Ho aggiunto anche un riferimento al plugin Democracy AJAX Poll per WordPress, che in questo momento utilizzo per il sondaggio nella homepage.

Infine per gli appassionati del manageriale Hattrick c’è anche un’utile estensione di Firefox chiamata Firehat, che permette di personalizzare i menu di navigazione secondo le proprie esigenze.

Se volete segnalarmi qualche altra risorsa interessante fatelo senza problemi, la aggiungerò nell’elenco.