Tra le tante funzionalità offerte dalle applicazioni dell’iPhone, una tra le fondamentali è la possibilità di navigare online e quindi di visitare i siti che ci interessano di più.

Allo stesso modo, i gestori di siti web dovrebbero preoccuparsi rendere consultabili i propri contenuti direttamente dallo schermo dell’Iphone.

Per chi avesse installato WordPress, il CMS di cui ho più volte discusso in questo blog, l’operazione è incredibilmente semplificata tramite l’utilizzo di uno dei soliti utilissimi plugin: quello che fa al caso nostro è WPtouch iPhone Theme.

A dispetto del nome questo plugin rende leggibile il nostro sito in maniera pratica e semplice su diversi supporti come iPod touch, Android, Opera Mini mobile, Palm Pre ed il BlackBerry.

Il plugin si scarica e si installa inserendolo come sempre nella cartella wp-content/plugins e successivamente attivandolo dal pannello dei plugin all’interno del pannello di controllo di WordPress.

Una volta attivato è possibile impostare diversi parametri direttamente cliccando il bottone “opzioni”:

tra le altre impostazioni, è possibile configurare la prima pagina del sito che si aprirà sul browser, il titolo, la personalizzazione delle icone da far apparire a lato del sito nonchè l’impostazione di una icona personalizzata da inserire come logo del sito, con la possibilità di differenziarla per le singole pagine e per i bookmarks.

In aggiunta questo plugin fornisce la possibilità di monitorare il supporto e la compatibilità dei supporti con i diversi plugin installati su WordPress.

In definitiva questo plugin permette di rendere il proprio sito web (creato con wordpress) completamente consultabile e navigabile ovunque sia possibile accedere ad una connessione internet, comodamente dallo schermo del proprio iPhone.

Come per l’aggiunta del bottone “home” di cui ho parlato in un precedente articolo, per aggiungere questa nuova area è semplicemente necessario aprire il file “functions.php” nella cartella principale di thematic ed aggiungere le seguenti righe prima della riga contenente “?>” :

// questo crea la widget area
function my_widgets_init() {
 register_sidebar(array(
 'name' => 'Header Aside',
 'id' => 'header-aside',
 'before_widget' => '<li id="%1$s">',
 'after_widget' => "",
 'before_title' => "<h3 class=\"widgettitle\">",
 'after_title' => "</h3>\n",
 ));
}
add_action( 'init', 'my_widgets_init' );

// questo comando aggiunge l'area creata al tema
function my_header_widgets() {
if ( function_exists('dynamic_sidebar') && is_sidebar_active('header-aside') ) {
 echo '<div id="header-aside">'. "\n" . '<ul>' . "\n";
 dynamic_sidebar('header-aside');
 echo '' . "\n" . '</div><!-- #header-aside .aside -->'. "\n";
}
}
add_action('thematic_header', 'my_header_widgets', 9);

Come sempre basta ricaricare online il file appena modificato e la nuova widget area, che in questo caso avrà il nome di “Header-Aside” apparirà all’interno del menu “widget” situato sotto “aspetto“.

Nell’ultima riga del codice che ho riportato è presente un numero, in questo caso un “9“, situato appena prima della dicitura “);”

Questo numero indica la posizione della widget area all’interno del codice php della pagina. Modificandolo con il numero “8” la widget area da noi creata verrà automaticamente posizionata prima del menù di navigazione principale del nostro sito.

N.B.: questa modifica funziona correttamente con la versione 2.9.1 di WordPress e con la versione 0.9.5.1 di Thematic.

La sua installazione è semplicissima, basta scaricare questo plugin ed installarlo in wordpress (semplicemente caricando via ftp sul proprio sito la cartella appena scaricata nella cartella di default dei plugin che è wp-content/plugins/) e successivamente attivandolo nel pannello di controllo dei plugin all’interno di WordPress.

Una volta effettuata questa operazione comparirà tra gli strumenti di wordpress una nuova area chiamata Gallery, attraverso la quale è possibile aggiungere e gestire le immagini e le gallerie (è infatti possibile generare più di una gallery, nel caso si vogliano suddividere le immagini per categorie), impostare la dimensione dei thumbnail ovvero le miniature delle immagini sulle quali si andrà a cliccare per lanciare la photogallery, impostare lo stile di visualizzazione della gallery stessa oltre ad altre impostazioni utili al fine di personalizzare la gallery secondo le proprie esigenze.

Inoltre questo plugin possiede anche altre potenzialità e strumenti che andrò ad illustrare nel prossimo articolo.

Oltre quindi a fornire strumenti per la creazione e la modifica di articoli, per la divisione in categorie e per l’aggiunta di tags, la piattaforma WordPress permette di modificare l’aspetto della propria pagina web, permettendo di installare e raccogliere diversi temi.

Questi ultimi, attraverso la modifica dei fogli di stile a loro associati, mutano l’aspetto della propria pagina web, agendo su tutti gli aspetti grafici dell’interfaccia. è pertanto possibile modificare lo sfondo, la forma e la grafica dei pulsanti, il comportamento dei link, il colore, l’altezza e la tipologia delle font utilizzate e tutti gli altri aspetti grafici del proprio blog.

WordPress permette di gestire anche dei widget, ovvero delle piccole applicazioni che svolgono le funzioni più disparate, come ad esempio la visualizzazione di uno slideshow, un calendario, il blog-roll (la lista dei link ad altri siti di interesse), i link alle categorie del blog ecc.

Questi widget vengono organizzati all’interno di aree del blog predisposte, ad esempio nella sidebar (barra laterale), nel footer (il “piè di pagina” del blog) o nell’header (intestazione). Il numero e la disposizione di queste aree all’interno dell’interfaccia varia a seconda del tema caricato.

Esiste una grande varietà di temi già pronti per wordpress reperibili nel web, alcuni gratuiti, altri a pagamento.

Tra questi thematic è un tema basilare e molto pulito, reperibile gratuitamente e che permette di modificarne completamente l’aspetto agendo sui css.

Per inserire aree aggiuntive e personalizzabili per i widget esistono varie soluzioni, ma questo tema contiene già di per sè una grande quantità di aree per i widget, fattore che permette un’ampia personalizzazione del layout grafico del sito.

Nei prossimi articoli parlerò appunto dei widget e dei plugin inseribili all’interno della piattaforma di WordPress.

Riescono a catturare l’attenzione dell’utente e comunicare in modo chiaro ed inequivocabile un contenuto, facilitando e velocizzando la navigazione all’interno di un sito. Inoltre vanno aldilà delle barriere linguistiche, poiché i simboli sono riconoscibili pressoché universalmente.

Pertanto, il fatto di sfruttare questo mezzo di comunicazione immediato e globale, è un aspetto fondamentale da tenere in considerazione in fase di progettazione in ambito web.

Di seguito elenco alcune fonti di icone gratuite varie ed interessanti da poter utilizzare all’interno dei propri siti:

Wefunction: un valido set di icone molto dettagliate.

Famfamfam: altro interessante set di icone di misura ridotta.

Iconfinder: un potente motore di ricerca per icone. Permette di impostare diversi filtri per la ricerca.

Iconza: set predefinito di icone che permette di modificarne diversi parametri come colore delle icone, grandezza e colore dello sfondo.

Infine segnalo questo articolo su smashingmagazine.com che contiene una grande raccolta di icone incredibilmente dettagliate.

Consistono fondamentalmente in una serie di modifiche (o meglio aggiunte) all’interfaccia del browser.
Nello specifico si tratta di barre degli strumenti (toolbars) e pulsanti (buttons), ma anche di temi o modifiche all’interfaccia che permettono all’utente di personalizzare al massimo l’utilizzo del browser e di velocizzare le operazioni che compie più frequentemente o permettergli di sfruttare specifiche funzionalità avanzate.

Esiste una vasta quantità di addons, grazie anche al fatto che possono essere sviluppati dagli utenti stessi, e spaziano dai bottoni per il controllo della posta elettronica e la lettura degli rss feed alle barre personalizzate dei programmi applicativi o dei motori di ricerca (Google, Yahoo…), passando per i bottoni della gestione di vari comandi, come i download dei files o per “catturare” una schermata video.

Alcuni di questi strumenti sono molto utili (se non fondamentali) nel campo del web-design e forniscono un supporto pratico e di rapido utilizzo

Di seguito vediamo i principali:

- Firebug: tool molto utile che permette di “mettere a nudo” la pagina web, mostrandone il codice html o css e gli script in una finestra separata.

- Web Developer Toolbar: questa barra contiene diverse funzionalità simili che permettono di attivare e disattivare elementi come i css, la cache o i cookies di una pagina web.

- ColorZilla: bottone permette con un semplice click di conoscere la gradazione di colore di qualsiasi elemento della pagina (ad eccezione degli elementi in Flash), fornire la relativa codifica in RGB ed esadecimale e di copiarla negli appunti.

- MeasureIt: consente di “misurare” in pixel una porzione di sito..

- ScreenGrab: permette di salvare o copiare negli appunti la schermata di un sito o una porzione.

Di seguito invece elenco alcuni tools che possono tornare utili anche a chi piace semplicemente navigare in rete e utilizzare le potenzialità del web 2.0.

- Google toolbar: questa barra permette di accedere, oltre alle principali funzioni di Google come la ricerca e il servizio Gmail, anche ad altri servizi come il traduttore e la correzione automatica.

- Add this: pulsante che permette di condividere le pagine internet sui principali social network.

- Clear Cache Button: come suggerisce l’icona, questo pulsante fa una rapida pulizia della cache.

- Password exporter: utile strumento per chi ha molte registrazioni a diversi servizi poiché questo bottone permette di salvare, gestire ed esportare le password registrate.

- StumbleUpon: per finire, una toolbar che riporta una pagina a caso pescando nella rete in base alle preferenze impostate dall’utente. Molto comodo e divertente per scoprire ad ogni click contenuti interessanti sparsi per il web.