Soprattutto in mani esperte WordPress può essere utilizzato per siti semplici e complessi, siti personali, siti aziendali, photoblog, siti e-commerce, siti di recensioni di prodotti, social network, forum o news aggregator.

In questo sito vengono indicati 10 modi alternativi di usare WordPress, dove per “alternativi” si intende alternativi ai blog o ai siti tradizionali.

Anche noi per alcuni progetti (per il nostro sito, ad esempio) abbiamo scelto di utilizzare WordPress, un sistema che apprezziamo per le notevoli possibilità di personalizzazione e l’integrazione con numerosi servizi SEO.

Spuntare gli elementi di una checklist è un’azione che prima o poi abbiamo fatto tutti, utilissima quando si deve prestare attenzione a una serie di attività da portare a termine (le cosiddette “to do list”, la lista delle cose da fare) o quando si deve semplicemente leggere un elenco di informazioni che altrimenti tenderemmo a ignorare, con il risultato di perdere tempo o di far perdere tempo a qualcun altro.

Ad esempio nei servizi di assistenza on line vengono spesso chieste delle informazioni utili alla risoluzione del problema. Nel caso di assistenza informatica dovrete inserire i dati riguardanti il computer utilizzato, l’hardware e il sistema operativo in uso, e magari anche gli applicativi installati. Capita però che gli utenti non inseriscano tutte le informazioni richieste. Una check-list è anche in questo caso la soluzione ideale.

Liste di controllo per chi lavora nel web

In ambito medico, o in altre situazioni in cui saltare un passaggio è troppo rischioso (pensiamo al pilota di un aereo), le checklist vengono in aiuto alle persone nell’eseguire una serie di compiti nel giusto ordine, senza tralasciare alcun passaggio.

Ma avere una lista di azioni da spuntare è fondamentale per non perdersi nel flusso di informazioni anche quando si porta avanti un progetto che, per quanto complesso, non comporta rischi eccessivi – quantomeno non in termini di vite umane – come ad esempio può essere la progettazione di un sito internet o la programmazione di complesse applicazioni per il web.

In questo post del 2009 di Smashing Magazine vengono proposte diverse utilissime checklist per grafici, programmatori e web-designer. Si tratta di questionari e liste di controllo per rendere il processo di progettazione più semplice e organizzato: checklist per la fase precedente al lancio di un sito, checklist per la grafica, il codice HTML, i CSS e in generale tutti gli aspetti che riguardano il design di un sito web, ma anche checklist sull’usabilità, l’accessibilità e l’ottimizzazione SEO di un sito. Una checklist utile in questo senso è anche la nostra lista di cose da fare per evitare che un sito sembri vecchio.

Ultimamente però il “fattore velocità” è stato riscoperto da molti web-designer ed esperti di ottimizzazione. Pare infatti che Google prenda in considerazione anche la velocità di caricamento delle pagine tra i suoi criteri per il posizionamento. Sorpresi?

In realtà, per un web che sia davvero accessibile, è perfino ovvio che i siti vengano realizzati tenendo conto della velocità, e questa è una cosa che abbiamo sempre pensato. Google, avendo sempre sostenuto un web funzionale e accessibile, evidentemente è della stessa opinione.

Ottimizzare WordPress per renderlo più veloce

In questo post di Andrea Pernici sull’ottimizzazione di WordPress – la piattaforma nata per i blog ma ormai, con l’aggiunta dei numerosi plugin, diventata un ottimo CMS – vengono dati molti preziosi consigli su come rendere più veloce il proprio sito.

Viene spiegato in modo semplice e divulgativo come ridurre il peso delle immagini, come comprimere i CSS e i Javascript e come diminuire il numero di query PHP. Un numero eccessivo di uno o più di questi elementi potrebbe provocare fastidiosi rallentamenti nel caricamento delle pagine.

Altri consigli riguardano più nello specifico WordPress e le sue caratteristiche, come il numero di widget non utilizzati o non necessari, il numero di commenti (se avete la fortuna di avere troppi commenti sapete quanto rallentino una pagina) o il caching del frontend. Vengono inoltre consigliati alcuni plugin utili per ottimizzare al meglio il proprio sito realizzato con WordPress.

Infine, anche e soprattutto per motivi di sicurezza, un consiglio sempre valido per chi utilizza WordPress per gestire il proprio sito, è quello di aggiornarlo sempre all’ultima versione e di tenere sempre aggiornati anche tutti i plugin.

Testa il tuo form contatti. E se fosse per questo che non ricevi mai delle mail dal sito? Sei sicuro che il tuo form contatti funzioni a dovere? Mettiti nei panni dell’utente che compila tutti i campi, perde tempo per comunicare con te ma poi scopre che il form non funziona. Pensi che poi ti scriverà una mail?

Rinnova i contenuti del sito. I testi di un sito, per quanto belli, non dovrebbero restare uguali per sempre. Non sono la Bibbia, né dei versi immutabili e immortali. Con il nuovo anno potresti modificare i contenuti del tuo sito. Sarà anche l’occasione per un generale controllo ortografico: spesso alcuni errori si notano solo tempo dopo, del tutto casualmente.

Aggiorna la data del copyright. La data presente nel footer di molti siti, vicino al simbolo del copyright, andrebbe aggiornata ogni anno, anche se spesso non accade. Se non voi che il tuo sito sembri obsoleto controlla che tutte le date presenti siano aggiornate. Su Internet anche un “2009″ può far sembrare molto vecchi.

Aggiorna i plugin. Beh, se usi WordPress o altri CMS aggiornare tutti i plugin alle ultime versioni è molto – molto – importante. Spesso capita di dare alcuni plugin per scontati e quasi dimenticarsi di farne uso nel proprio sito, e così ci si ritrova con versioni ormai vecchie e poco sicure. Per evitare spiacevoli sorprese controlla tutti i tuoi plugin e aggiornali alle ultime versioni.

Aggiorna il tuo portfolio. Anno nuovo, lavori nuovi. Ma ovviamente sono importanti anche quelli vecchi. Considerando che, in teoria, gli ultimi lavori sono sempre i migliori, un portfolio non aggiornato ha davvero poco senso. Quindi se sei un grafico, un artista, un fotografo o un web-designr e il tuo portfolio è fermo ai lavori che hai fatto quando ancora ti pagavano (o NON ti pagavano) in lire, forse è tempo di aggiornarlo!

Controlla i link rotti. Non c’è niente di peggio dell’errore 404, quando si clicca su un link ma, ahimè, è “impossibile visualizzare la pagina”. Per questo motivo dovresti controllare che il tuo sito non contenga link che non portano da nessuna parte o a pagine che non esistono più. Per tua fortuna esistono numerosi plugin e software che possono cercare i broken link al posto tuo.

Rivalida il codice. Sicuramente il tuo codice era perfetto quando hai innaugurato il sito. Ma sei sicuro che lo sia ancora in seguito alle duemila modifiche che hai apportato negli ultimi tempi? E’ tempo di controllare.

INOLTRE, VEDI ANCHE:

• Don’t forget the small stuff this year (da Smashing Magazine)
• Le novità dei CSS3
• Template su misura per siti, CMS e blog
• Sidebar: meglio a destra o a sinistra?
• Realizzazione siti e-commerce
• L’importanza dei siti cross browser

Forse non c’è una risposta giusta. E’ un antico dilemma del web-design e più o meno tutti quelli che sviluppano siti web o realizzano template hanno la propria opinione sull’argomento. Vediamo di prendere brevemente in considerazione le due opzioni e le relative ragioni.

Prima cosa: leggiamo da sinistra verso destra

Come si può notare anche grazie allo strumento di Google Browser Size, la maggior parte degli utenti si concentra soprattutto sulla parte centrale e su quella sinistra della pagina, un po’ per la risoluzione dello schermo e poi perché è così che leggiamo noi occidentali, da sinistra verso destra. Proprio per questo motivo la sidebar dei blog di solito è a destra, dato che viene data maggiore importanza ai contenuti, ovvero l’ultimo post pubblicato, che viene posizionato a sinistra. Se però nel vostro sito il menù di navigazione contiene molte voci – e il contenuto centrale resta sostanzialmente invariato – allora la sidebar a sinistra avrà più senso. Ma non è sempre così.

Cosa mettere nella sidebar?

Ecco perché forse non c’è una risposta giusta alla domanda “meglio a destra o a sinistra?”, almeno per quanto riguarda l’argomento sidebar. Ogni sito, infatti, è un caso a sè.

Tutto dipende da cosa decidete di inserire nella sidebar e a quali contenuti date maggiore importanza. Se ad esempio cercate di guadagnare con degli annunci pubblicitari allora sarà sensato posizionarli nella parte alta della sidebar sinistra, là dove siete sicuri che cadrà l’occhio del visitatore appena visualizzerà la pagina.

Nei blog, come abbiamo detto, il contenuto vero e proprio (i post) normalmente è a sinistra – o nella parte centrale – mentre la sidebar è a destra, dove, come prima cosa, sarebbe intelligente mettere il link al feed RSS e altre informazioni che meritano rilievo.

Se invece il vostro è un sito dove il menù di navigazione è particolarmente importante per la consultazione delle pagine in sequenza, allora sarà meglio riservargli la parte superiore della sidebar sinistra, spostando gli altri contenuti in quella destra o nel footer se si tratta di un template con una sola colonna. A volte capita di posizionare la sidebar sulla destra ma poi di doverla spostare a sinistra su richiesta del cliente perché così è abituato. Anche siti importanti come quelli dei grossi giornali hanno spostato solo di recente la sidebar a destra adeguandosi alla struttura grafica tipica dei blog.

E i motori di ricerca cosa ne pensano?

Al momento in realtà non pensano, dunque quando realizzate un template e dovete decidere dove posizionare la sidebar è meglio pensare come prima cosa all’effettiva usabilità del sito. Però è giusto tenere conto che lo spider dei motori di ricerca legge la pagina così com’è presentata nel codice HTML, senza gli effetti dei fogli di stile. Dunque il contenuto sulla sinistra verrà letto prima di quello sulla destra se così presentato nel codice della pagina. Ma proprio grazie ai fogli di stile è possibile realizzare template su misura dove il contenuto sarà in cima alla pagina HTML nonostante sia visualizzato nella sidebar destra.

Come già detto altrove quando realizziamo siti o template su misura per siti facciamo sempre attenzione alla compatibilità con i browser più utilizzati

Realizzare siti internet cross browser – cioè che possano essere visti da tutti senza problemi – è uno degli obiettivi principali di un web-designer, soprattutto se si tratta di siti aziendali, dove un utente che scappa perché non riesce a visualizzare correttamente la pagina rappresenta una perdita significativa. Ma di cosa bisogna tenere conto quando si realizza un sito?

Siti accessibili e compatibili

Perché il tema grafico di un sito sia visualizzato correttamente da tutti bisogna tenere conto ovviamente dei browser utilizzati, della risoluzione dello schermo (fattore spesso dimenticato) e dei sistemi operativi usati dagli utenti.

Il primo e più importante elemento da prendere in considerazione è sicuramente il browser, dato che non solo ne esistono diversi, ma circolano in più versioni e spesso non vengono aggiornati. Ci è perfino capitato di suggerire l’aggiornamento del browser ad alcuni clienti che, pur ringranziandoci del consiglio, ci spiegavano che preferivano continuare a usare quella versione perché così erano abituati e non volevano cambiare.

Per questo motivo quando realizziamo template su misura cerchiamo di tenere conto non solo delle ultime versioni dei browser ma anche di quelle precedenti, anche se ovviamente dovrebbe essere un dovere di tutti utilizzare programmi aggiornati, soprattutto per motivi di sicurezza. Ma come valutare se un sito è compatibile o no?

Strumenti utili per testare un sito

Durante la realizzazione di un sito può essere utile usare alcune delle estensioni di Firefox per chi sviluppa siti web che abbiamo consigliato in un altro post. Ma oltre a quelle estensioni esistono alcuni servizi on line che si occupano proprio di valutare la compatibilità cross browser di un sito internet, a partire dal codice XHTML, i fogli di stile e gli script Javascript e AJAX, se si è fatto uso di tecniche di programmazione Ajax.

Uno strumento molto utile ad esempio è BrowserShots, servizio gratuito che risponde perfettamente alla domanda “come si vede il mio sito negli altri computer?”. Grazie a BrowserShots non dovrete installare decine di sistemi operativi e browser diversi, dato che semplicemente inserendo l’URL potrete vedere, grazie a degli screenshot, come viene visualizzato il vostro sito con le varie versioni dei più usati browser Linux e Windows.

Ecco quindi 10 plugin di Firefox consigliati a chi sviluppa siti internet.

1) Firebug

E’ sicuramente l’estensione di Firefox che usiamo di più. Fondamentale per modificare template per siti, questa estensione permette il debug e la modifica di tutti gli elementi della pagina: i fogli di stile, il codice HTML/XHTML, la struttura DOM (Document Object Model) e il codice Javascript. Secondo Firefox circa 2 milioni e 700mila utenti hanno installato Firebug.

2) Web Developer

Ecco un’estensione, che fa tutto o quasi, che è possibile utilizzare anche in coppia con Firebug. Consiste in una toolbar con numerose funzioni – dalla possibilità di disabilitare i fogli di stile o le immagini a quella di validare le pagine – talmente tante che è inutile elencarle tutte.

3) Colorzilla

Semplice ma molto utile, basta puntare il cursore di Colorzilla sull’area della pagina che ci interessa per sapere di che colore si tratta e il relativo codice.

4) MeasureIt

Anche questa estensione di Firefox è tanto semplice e banale quanto fondamentale: un righello che ci indica le misure esatte degli elementi di una pagina web, comprese le distanza tra un elemento e un altro.

5) IE Tab

Grazie a questo popolare e scaricatissimo plugin è possibile, con un semplice clic, visualizzare una pagina così come la vede Internet Explorer, restando però all’interno di Firefox. Se si sta lavorando a un sito utilizzando Firefox e non si vuole aprire Explorer IE Tab è la soluzione ideale. Il plugin permette comunque di visualizzare la pagina anche aprendo Explorer, sempre con un semplice clic.

6) Fireshot

Permette di fare degli screenshot della pagina sulla quale si sta lavorando e di aggiungere note ai singoli elementi. Utile se si lavora in un team o se si deve presentare un’anteprima del lavoro a un cliente.

7) Font Finder

Semplicissima utility: selezionate un testo o parte di esso e Font Finder vi dà tutte le informazioni possibili su quel testo, a partire ovviamente dal font utilizzato.

8) HTML validator

Un validatore di codice interno al browser. L’estensione vi indica gli errori presenti una pagina e suggerisce come correggerli.

9) Window Resizer

Diciamo che siete sicuri che il codice sia valido e che il sito funzioni perfettamente con tutti i browser. Ma avete pensato alla risoluzione dello schermo? Window Resizer è un’estensione di Firefox che consente di ridimensionare la risoluzione del browser per poter visualizzare un sito nelle varie risoluzioni standard.

10) Fire PHP

Come Firebug ma per il PHP: utile plugin dedicato agli sviluppatori per modificare e monitorare il codice PHP delle pagine web.

Un consiglio: dato che alcuni di questi componenti aggiuntivi svolgono in parte le stesse funzioni, basta semplicemente scegliere quelli che si considera più adatti alle proprie esigenze, senza doverli per forza installare tutti. Per altre estensioni dedicate ai web-developer rimandiamo all’apposita pagina del sito di Mozilla Firefox.

Naturalmente la soluzione c’è. Anzi, più di una. Esistono infatti diversi plugin che ci consentono di mettere offline il proprio sito o blog fatto con WordPress per lavorarci in tutta tranquillità.

La maggior parte di questi plugin potete trovarli nel sito ufficiale di WordPress, nella sezione dei plugin, sotto il tag maintenance. Sono plugin che permettono appunto di creare una maintenance page, ovvero una pagina di lavori in corso, visibile ai visitatori del sito. Gli utenti con particolari permessi (l’admin, ad esempio) continueranno invece a visualizzare il sito vero e proprio, potendo così modificare tranquillamente il template senza che nessuno se ne accorga.

Se invece si vuole mantenere on line il sito con un tema e modificare on line un altro tema, ci viene in aiuto Theme test driver. Questo plugin consente appunto di intervenire su un tema che sarà visibile solo all’admin mentre gli altri visitatori continueranno a vedere il tema ufficiale. E’ un plugin che usiamo spesso quando lavoriamo a template su misura, anche se per modifiche strutturali più impegnative consigliamo di mettere il sito offline con i sistemi indicati sopra, dato che le modifiche a un tema potrebbero andare in conflitto con l’altro tema.

E se vi state chiedendo come creare una maintenance page efficace, in questo interessante post vengono suggerite diverse soluzioni partendo da esempi di pagine di lavori in corso di siti famosi come Twitter, Flickr, Google, Last.fm e altri.

Il motivo di questo ritardo secondo alcuni va visto in Internet Explorer. Infatti alcune versioni ancora molto diffuse del popolare browser Microsoft non supportano le specifiche dei CSS3, al contrario di Explorer 9 che, secondo quanto dichiarato da Microsoft, supporterà tali specifiche.

Questo significa che al momento sfruttare le novità più recenti vorrebbe dire anche rinunciare a una buona parte degli utenti che non sono in grado di visualizzarle perché utilizzano browser non aggiornati, mentre – come sappiamo – l’accessibilità è il primo comandamento per i web-designer, impegnati nel realizzare siti e template su misura cross-browser, ovvero che siano visualizzabili da qualunque browser.

Nonostante questo alcune proprietà dei CSS3 possono già essere utilizzate, in modi diversi, con le ultime versioni di Firefox, Safari o Chrome. Ecco alcune delle novità introdotte dai CSS3:

• box-shadow: effetto di ombreggiatura. Novità molto apprezzata dai web-designer, permette di applicare l’ombra a un elemento senza dover ricorrere all’utilizzo di immagini.
• opacity: applica l’effetto di “opacità” e trasparenza a un elemento, che si esprime in percentuale. Può essere un’immagine, un testo o un link. Per Internet Explorer invece va utilizzato “alpha filter”. Molto utile per effetti rollover.
• multi-column: rende possibile spezzare in più colonne un testo. Si può applicare a diversi elementi, compresi gli elenchi puntati: il contenuto sarà visualizzato nel numero di colonne specificate nel foglio di stile.
• border-radius: elementi con angoli arrotondati. Normalmente si utilizzavano le immagini, ma grazie a questa proprietà non è più necessario.
• @font-face: rende possibile l’utilizzo di font non installati dall’utente. Al momento è supportato solo da Safari.

La lista aggiornata delle proprietà dei CSS3 già utilizzabili con alcuni browser la trovate in questa pagina.

Le regole ufficiali per comporre i CSS invece sono contenute nelle direttive emanate dal W3C, il World Wide Web Consortium, cioè la società che si occupa di definire gli standard da utilizzare nel Web.