In questi ultimi mesi sto affrontando la realizzazione di piccoli siti dinamici, completi di pannello di amministrazione.
Il linguaggio è PHP, il database è MySQL, il server è Linux e il webserver è... Apache! Ebbene sì, si tratta del classico ambiente LAMP.
La novità è che, per affrontare i progetti, non scrivo "codice selvaggio", ma mi appoggio ad un framework open source chiamato CodeIgniter.

Il framework è versatile, comodo e accompagnato da una nutrita schiera di estimatori e programmatori.
Purtroppo, come spesso accade nel mondo delle apllicazioni web, essendo il framework una "creatura" inglese, non ha affrontato nativamente il problema dei caratteri speciali: à, è, é, ì, ò, ù (per noi italiani, ad es.).
Questo problema mi è diventato palese nel momento in cui ho cercato di trasmettere stringhe di ricerca con simili caratteri all'URI segmentato tipico di CodeIgniter (quando non si desidera utilizzare la classica querystring: pippo.php?c=prendi&m=fai&v=questo).

Il framework, infatti, per motivi di sicurezza (indiscutibili), ammette nei suoi URI questa serie di caratteri:
a-z 0-9~%.:_\-
Nel momento in cui un italiano scrive in un modulo di ricerca "gravità" appare a video un pagina bianca che riporta il seguente errore:

The URI you submitted has disallowed characters.

Per risolvere la questione ho dovuto perdere un paio di giorni di ricerche su Google e alla fine ho trovato questo salvifico articolo:

CodeIgniter 1.7: The URI you submitted has disallowed characters.

Se avete lo stesso problema, andate in system/libraries e aprite il file URI.php alla linea 189 e modificate:

if ( ! preg_match("|^[".str_replace(array('\\-', '\-'), '-', preg_quote($this->config->item('permitted_uri_chars'), '-'))."]+$|i", $str))

così:

if ( ! preg_match("|^[".str_replace(array('\\-', '\-'), '-', preg_quote($this->config->item('permitted_uri_chars'), '-'))."]+$|i", rawurlencode($str)))

Questa soluzione si applica a CodeIgniter 1.7.

Riporto qui di seguito una traduzione parziale di un ottimo articolo tratto dal Blog di SEOmoz, in cui si parla dei benefici indiretti ma preziosi offerti a un sito web da contenuti ricchi di valore aggiunto (originalità, chiarezza, autorevolezza, etc.), presentati nel miglior modo possibile.

Innanzitutto, per contenuto non intendo l'utilizzo o l'ottimizzazione delle parole chiave. Sto parlando di come la presentazione e l'architettura del contenuto di una pagina in testo, immagini e multimedia possono essere ottimizzate per i motori di ricerca. La cosa singolare è che molte di queste raccomandazioni sono effetti di secondo ordine. Avere la giusta formattazione o esposizione non farà crescere necessariamente il vostro posizionamento in modo diretto, ma attraverso ciò è molto più probabile guadagnare link, ottenere click ed eventualmente trarne vantaggio nelle classifiche di ricerca.

Struttura del contenuto

Poiché il SEO è diventato una parte integrante del miglioramento di un sito web, non è sorprendente che la formattazione del contenuto - le scelte di presentazione, stile e layout che fate per il vostro contenuto - sia una parte del processo. Scegliere caratteri sans serif (senza grazie) come Arial e Helvetica sono scelte sagge per il web; in particolare è stato molto elogiato dagli esperti per la sua usabilità/leggibilità il carattere Verdana.

La scelta del carattere è accompagnata, per importanza, dalle questioni di dimensione e contrasto. Caratteri più piccoli di 10pt in genere sono veramente difficili da leggere e in ogni caso dimensioni relative (non assolute) del carattere sono raccomandate, così gli utenti possono impiegare le opzioni del browser per aumentarne/diminuirne la dimensione, appunto. Il miglior contrasto - la differenza di colore tra lo sfondo e il testo - rimane sempre quello tra il colore nero del testo su uno sfondo bianco.

La lunghezza del contenuto è un altro punto critico nel processo di ottimizzazione, che può giocare un grosso ruolo nel caso in cui il vostro materiale sia facile da consumare e facile da condividere. Testi molto lunghi spesso non si adattano bene al web, mentre contenuti brevi e facilmente digeribili spesso hanno più successo. Sfortunatamente, suddividere un testo lungo in più segmenti spesso si può ritorcere contro, così l'abbandono della pagina aumenta mentre l'attrazione dei link fallisce - l'unico vantaggio sono le visualizzazioni della pagina per visita (ecco perché molti siti orientati al CPM - costo per mille impressioni - utilizzano questa tattica).

Infine, nell'ottimizzazione del contenuto è importante la presentazione del materiale: un design bello, semplice, facile da usare raccoglie molti più lettori e link di un contenuto povero e poco chiaro.

L'autore continua poi a illustrare altre tecniche di otimizzazione, che vanno dall'uso corretto e semantico dei fogli di stile a quella che, forse, è la pratica più importante di tutte, cioè l'unicità e la profondità del contenuto.
In sintesi estrema, i criteri da seguire sarebbero:

- 30-35 parole uniche che formino frasi uniche e analizzabili, che altri siti o pagine non hanno;
- un contenuto testuale HTML unico, che sia differente da tutte le altre pagine del sito;
- titoli e descrizioni della pagina (meta tag) unici;
- unico contenuto di video/audio/immagine.

Per ulteriori suggerimenti, vi rimando all'articolo originale (in inglese): Best Practices for Content Optimization

Sui principi del CRAP (Contrasto Ripetizione Allineamento Prossimità) che dovrebbero guidare ogni buon web designer rimando all'ottimo articolo di LineHeight. Vorrei qui soffermarmi, invece, su alcune considerazioni più pratiche, magari scontate, ma mai abbastanza ripetute.

Le immagini

La grafica per il web, a differenza di quella utilizzata per la stampa, ha a che fare con immagini per il video. Ciò significa che è sufficiente una risoluzione pari a 72 dpi e che il metodo di colore è l’RGB e non il CMYK. Un’altra forte limitazione consiste nel fatto che le pagine web possono accogliere solo immagini salvate in uno di questi 3 formati: GIF, JPEG o PNG.

Pur essendo l’ADSL molto diffusa oggigiorno, è consigliabile creare immagini con un buon rapporto qualità/peso che si aggiri tra i 20 e i 50KB per ognuna di esse. Bisogna infatti ricordarsi che più una pagina web è leggera, in termini di dimensioni, prima viene caricata dal browser e meno deve attendere l’utente per vederla.

I testi

La scelta del carattere condiziona fortemente la sua leggibilità. Anche se non è una regola assoluta, per il web è meglio utilizzare caratteri sans-serif o senza grazie (Verdana, Arial, etc.), più leggibili, anche quando le loro dimensioni sono piccole (10 pixel), rispetto ai caratteri con grazie o serif (Times, New York, etc.), diffusamente usati in tipografia.

Inoltre, occorre ricordare che non tutti i browser visualizzano i testi con l’anti-aliasing, ossia ammorbidendo e allisciando le linee dei caratteri in modo da ridurre l’effetto di scalinatura che si produce quando un segnale a bassa risoluzione viene mostrato ad alta risoluzione.
Per questo motivo, se si desidera un testo con l’anti-aliasing, è opportuno farne un’immagine. Stessa “traduzione” andrebbe fatta per gestire effetti speciali su un testo al passaggio del mouse.

Non conviene, invece, utilizzare massivamente le immagini al posto del testo, perché i motori di ricerca preferiscono in genere siti ricchi di parole chiave, pertinenti e pregnanti. Si raccomanda pertanto un certo equilibrio fra testo e immagini nella stesura della pagina web.

I colori

L’uso dei colori dovrebbe sottostare al principio del maggior contrasto possibile. Inoltre, per riempire gli elementi della pagina, è buona norma non usare colori piatti ma utilizzare dei gradienti, ossia dei riempimenti che sfumano da un colore ad un altro, meglio se si tratta di un tono più chiaro ed uno più scuro dello stesso colore. Il gradiente assicura un effetto di classe.

Riguardo al contrasto fra testo e sfondo, è inutile ribadire che la migliore leggibilità in assoluto si ottiene col classico binomio: carattere nero su pagina bianca. Tuttavia, sono possibili anche altre combinazioni, magari da utilizzare con cautela, riservandole a zone particolari della pagina web e lasciando invece i testi principali (quelli, cioè, che vanno letti) sul nero/bianco.
Si sconsiglia vivamente di invertire il contrasto classico, ricorrendo a testo bianco su pagina nera, perché poco leggibile, soprattutto per gli ipovedenti.

Le dimensioni

Una pagina web si sviluppa in verticale a seconda della lunghezza dei suoi contenuti e naturalmente gli elementi in alto vengono letti prima e meglio di quelli in basso. È consigliabile quindi di non inserire testi troppo lunghi e, se proprio occorre farlo, di spezzarli in più pagine.

Per quanto riguarda lo sviluppo orizzontale della dimensione di una pagina si deve porre molta attenzione ad un unico limite: la risoluzione del monitor. Un contenuto testuale o un’immagine che superino la larghezza del monitor comportano la comparsa in basso della barra di scorrimento orizzontale e l’occultamento di una parte del sito.
Benché i monitor attuali abbiano quasi tutti risoluzioni ampie, conviene sempre pensare a una risoluzione media di 800x600 pixel o, al massimo, 1024x768 pixel. Così facendo, si può stabilire che la pagina web non deve superare in larghezza i 760 o 960 pixel circa. E, in questo caso, una dimensione buona per i caratteri è 12 pixel.

L’alternativa è pensare a un layout della pagina fluido, ossia con larghezza in percentuale che possa coprire tutto lo schermo. Di conseguenza, si può dare una dimensione fluida anche al carattere utilizzato nel sito in modo che si adatti sempre alla risoluzione del monitor (più alta è la risoluzione, più grande dev’essere il carattere e viceversa).
Naturalmente, anche in questo caso non si può dimenticare un minimo di larghezza entro cui devono disporsi gli elementi visualizzati.

Come si costruisce un sito per internet?

Non è facile rispondere, benché io abbia accumulato a tal riguardo una discreta esperienza nel corso degli anni. Propongo, per questo motivo, di partire da un atomo concettuale, naturalmente non esauriente per sua stessa natura: realizzare un sito web è una alchimia.

Non ho usato il termine “chimica”, perché il sito non viene creato solo dalla mera combinazione di diversi aspetti (grafici, multimediali, tecnici, ergonomici, etc.), ma tende a creare qualcosa di diversamente “alto” (un po’ come cercare di ottenere l’oro dal piombo).

Non ho neppure usato il termine “arte”, perché, nel senso etimologico di tecnica, il sito è il risultato di procedimenti anche intuitivi, non solo legati necessariamente ad un archivio di procedure già codificate.

Ma mi sto dilungando... Arrivo dunque al punto, cercando di rispondere alla prossima domanda.

Quali passi bisogna seguire per creare un sito web?

Potrei continuare, ma preferisco rispondere ed affermare un ulteriore concetto che consegue da quanto appena detto: creare un sito web è un’attività di problem-solving.

È necessario armarsi di pazienza e di taccuino e, come ogni buon programmatore che si rispetti sa, fare una sorta di diagramma di flusso delle operazioni che occorre attuare e prevedere per approntare un sito web navigabile, stabile, performante e gradevole (se non accattivante).

Quindi, il primo passo è chiarire bene a se stessi e agli altri che cosa si vuole ottenere. Una vetrina dal bel design, ma fondamentalmente inutile perché statica e monolitica. Un magazzino stracolmo di casse variopinte nel quale perdersi irrimediabilmente. Un film spettacolare che già alla quarta visione spingerà lo spettatore a chiedere il rimborso del biglietto.

Il secondo passo consiste nell’ideazione del layout grafico del sito. A tutta pagina, a due o tre colonne, con filmato introduttivo oppure completamente in Flash, sulle tonalità del verde o con inserti rossi sul bianco ed il nero, squadrato o rotondeggiante, stile blog o stile portale verticale, etc. Ci sarebbe da sbizzarrirsi, se non fosse che esistono i famosi “paletti” di compatibilità: risoluzione monitor, sistema operativo, browser, etc. Prima di lanciarsi in spericolate grafiche futuristiche, conviene pertanto considerare bene quali sono le possibilità offerte e le conoscenze possedute.

Ora si può passare alla traduzione della grafica scelta nella pagina web vera e propria, che potrà più o meno complicarsi a seconda del grado di interattività che dovrà avere il sito (AJAX, PHP, ASP, etc.). Questo è il momento fatidico in cui bisognerà confrontare la visualizzazione di ciò che si desidera con quella resa dai vari browser circolanti. Passerei però direttamente alla prossima fase, perché non mi piace affatto enumerare i tanti caduti sul campo di battaglia nella ricerca del Santo Graal: la compatibilità cross-browser!

Fatti tutti i controlli del caso, ora si può pubblicare il sito e godersi il meritato riposo e la gloria dei posteri. Sempre che il sito sia stato ottimizzato e predisposto per i motori di ricerca… Ma tutto questo riguarda l’attività SEO!

Web 3.0 articolo molto divertente di Jeffrey Zeldman su cosa vuol dire al giorno d’oggi fare web development

Capire il web design altro articolo di Jeffrey Zeldman su web design e sua definizione

Cos’è Web 2.0 articolo, oserei dire “storico”, di Tim O’Reilly sul Web 2.0