Premesse

Questo articolo non vuole essere una guida esaustiva dell’argomento, piuttosto uno spunto per iniziare a riscrivere i vostri url complessi in URL SEO. Sicuramente bisogna approfondire meglio l’argomento Regular Expression che come vedremo sta alla base delle regole scritte nell’htaccess. Inoltre ovviamente in altra sede si dovrebbe approfondire anche il modo con cui trasformare gli url statici in url seo vincenti. Mi limiterò semplicemente a fare qualche esempio di riscrittura e ad introdurre la logica che sta alla base degli URL SEO.

Esempi pratici

Aver realizzato un sito pieno di contenuti ed esteticamente accattivante oggi non è sufficiente per ottenere delle conversioni e quindi risultati tangibili dal proprio sito. Oggi più che mai è necessario ottimizzare le pagine web anche per i motori di ricerca. Che ci piaccia o no, si deve trovare il giusto compromesso tra l’estetica, la comunicazione, la funzionalità e l’ottimizzazione SEO. In questo articolo tratterò solo un piccolo aspetto dell’ottimizzazione SEO, indicato anche nella Guida SEO di Google: scrivere url amici, cosiddetti URL SEO o User Friendly. Un esempio pratico per chiarire le idee:

Se il nostro sito web è pieno di pagine con link che fanno uso di parametri utili per il funzionamento dell’applicazione come il seguente:

Link Originale:

http://www.trinacriaweb.it/htacces/notizie.php?page=portfolio&tipo=websites&mese=maggio&id=5

È evidente che per molti utenti risulterebbe difficile ricordare questo link. In ogni caso, per i motori di ricerca sarebbe privo di chiavi di ricerca di senso logico. Cosa molto diversa è invece utilizzare un link come il seguente:

Link Riscritto:

http://www.trinacriaweb.it/realizzazione-siti-web/portfolio/websites/maggio/5/arenametallurgica.htm

Quindi costatato che gli URL SEO sono sicuramente più gradevole all’occhio umano, ma soprattutto ai motori di ricerca, molti si chiederanno cosa occorre per riscrivere un URL SEO?

A questo proposito ci viene in soccorso un modulo di Apache: “mod_rewrite”.

Questo modulo di Apache se correttamente configurato grazie a piccole regole scritte in un file .htaccess riesce ad interpretare gli URL SEO.  Il file .htaccess ovviamente dovrà risiedere nella root principale del sito.

Quindi andando all’atto pratico se volessimo  riscrivere l’URL precedente, dovremmo scrivere dentro il file htaccess quanto segue:

RewriteEngine On

RewriteRule ^([a-zA-Z._%+-]+)/([a-zA-Z]+)/([a-zA-Z]+)/([a-zA-Z]+)/([0-9]+)/([a-zA-Z.0-9]+)$ /htacces/notizie.php?page=$2&tipo=$3&mese=$4&id=$5 [L]

Analizziamo la regola:

RewriteEngine On à rappresenta l’istanza per inizializzare l’htaccess.

RewriteRule àinizializza la Regular expression:

^([a-zA-Z._%+-]+) –> rappresenta il primo parametro e traduce nel caso specifico realizzazione-siti-web (che lo possiamo utilizzare come permalink, infatti se proviamo a modificare dall’url questa stringa scrivendo ad esempio pippo al posto di realizzazione-siti-web notiamo che la pagina non cambia, questo perchè il primo parametro non viene utilizzato dall’applicazione per il suo funzionamento ma semplicemente per l’indicizzazione.

/([a-zA-Z]+)/([a-zA-Z]+)/([a-zA-Z]+)/([0-9]+)/ –> dal secondo parametro al quinto passiamo i parametri all’applicazione, infatti questa regola traduce notizie.php?page=portfolio&tipo=websites&mese=maggio&id=5. In questo caso come vediamo passiamo all’applicazione tre parametri di tipo testuale [a-zA-z] e l’ultimo parametro è di tipo numerico [0-9].

Infine ([a-zA-Z.0-9]+)$ –> chiude l’istanza traducendo sostanzialmente trinacriaweb.htm (questa regola ci permette di mettere a nostro piacimento la chiusura dell’url infatti avremmo potuto mettere anche pippo.htm e il risultato non sarebbe cambiato).

La regola sopra riportata supporta anche link meno complessi in termini di parametri passati all’applicazione, ma purtroppo il limite è appunto passarli a prescindere dall’utilità o meno:

ad esempio se volessi costruire un url del tipo:

notizie.php?page=home

in seo dovrei cmq scrivere:

http://www.trinacriaweb.it/web-agency/home/parametro/parametro/0/trinacriaweb.htm

/webagency –> è il permalink che serve solo per l’indicizzazione

home –> è il parametro che fa funzionare l’applicazione

/parametro/parametro/0/ –> sono dei parametri che non servono all’applicazione ma dobbiamo cmq metterli per far funzionare la regola scritta nell’htaccess.

/trinacriaweb.htm –> non serve all’applicazione e serve solo per l’indicizzazione.

anche se apparentemente questo link sembra inspiegabile, questa costruzione permette comunque di passarci sempre tutti i parametri anche se poi l’applicazione ne utilizzerà solo uno che è home. Questo tipo di costruzione è obbligata in quanto la regola expression scritta nell’htacces funziona in maniera posizionale e quindi se abbiamo stabilito che nella posizione 2 ci sarà il parametro che indica il tipo noi cmq per ogni link saremo obbligati a passarci il parametro anche quando non ci serve.

Se infatti rianaliziamo la regola ci accorgeremo che ad ogni parametro passato nel link originale corrisponde una regola posizionata in maniera sequenziale:

page=$2&tipo=$3&mese=$4&id=$5

^([a-zA-Z._%+-]+)/([a-zA-Z]+)/([a-zA-Z]+)/([a-zA-Z]+)/([0-9]+)/([a-zA-Z.0-9]+)$ /htacces/notizie.php?page=$2&tipo=$3&mese=$4&id=$5 [L]

Il page=$2 viene tradotto dalla seconda regola /([a-zA-Z]+)/ che si aspetta un valore testuale nel nostro caso home, ma cosa sarebbe successo se avessimo passato invece di un valore testuale un valore numerico o un carattere speciale? Bhè semplicemente la pagina non sarebbe stata trovata, restituendo un errore 404. Stesso discorso vale se anzichè passare tutti i parametri previsti dalla regola htaccess ne passassimo solo uno e quindi scrivessimo un link come segue:

Link Originale

http://www.trinacriaweb.it/index.php?page=home

Link Riscritto

http://www.trinacriaweb.it/realizzazione-siti-web/home/index.htm

Se avessimo l’esigenza di riscrivere un URL che passa solo un parametro all’applicazione come abbiamo visto sopra, senza passarsi tutti i parametri per far funzionare la regola htaccess scritta in precedenza, non potremmo fare a meno di riscrivere un ulteriore regola nell’htaccess, che reinterpreti l’url seo che più ci aggrada, rispettando in ogni caso la logica posizionale dei parametri come segue:

RewriteEngine On

RewriteRule ^([a-zA-Z._%+-]+)/([a-zA-Z/([a-zA-Z.0-9]+)$ /htacces/index.php?page=$2 [L]

Anche in questo caso come è possibile notare prevediamo:

([a-zA-Z._%+-]+) –> che è il permalink

([a-zA-Z]) –> che traduce il parametro passato di tipo testuale

/([a-zA-Z.0-9]+)$ –> che chiude il link con il tipo nomepage.htm

In conclusione come è possibile notare dagli esempi riportati, è facile intuire che la struttura degli url si può manipolare e strutturare come meglio crediamo, aggiungendo chiavi di ricerca, e senso logico alle parole che lo comporranno; agevolando gli utenti a capire con immediatezza l’argomento trattato all’interno della pagina indicata nel link, e il motori di ricerca ad archiviare in maniera ottimale le pagine del vostro sito web.

Google e il suo buon google chrome sfidano i confini del web, e danno spettacolo e spunti per immaginare il web fra non molto tempo…

In un sito dedicato a tutti gli esperimenti fatti dalla casa di Mountain View, potrete divertirvi a inserire il vostro indirizzo e vedere in pochi minuti un filmato con un uomo che corre a più non posso tra le strade del vostro quartiere…

Ovviamente il tutto è visionabile solo con il Browser Google Chrome…

L’indirizzo in questione è il seguente:

http://www.thewildernessdowntown.com/

Buon Divertimento

La nuova specifica dei CSS (http://www.w3.org/TR/css3-transitions/) include un modulo, chiamato CSS Transitions,  che ci consente di realizzare questi effetti utilizzando solo il foglio di stile, senza aver bisogno di script esterni.

Il modulo consente di modificare i valori di proprietà CSS specificando la durata dell’effetto di transizione.

Normalmente, quando il valore di una proprietà CSS cambia, il risultato viene renderizzato istantaneamente e l’elemento a cui è assegnata tale proprietà viene aggiornato immediatamente. Un “rudimentale” esempio di transizione che abbiamo utilizzato finora è il seguente:

Vediamo dunque all’opera il secondo esempio, passando il mouse sul div colorato.

Utilizzando le transizioni, invece, è possibile assegnare una durata (espressa in secondi) per il passaggio dal vecchio valore al nuovo.

Possiamo applicare un semplice effetto di transizione di 2 secondi all’esempio precedente aggiungendo queste due semplici righe di codice CSS:

Le due proprietà attivano il cambiamento del colore di sfondo dal colore di partenza (contenuto nella prima regola) al colore finale (contenuto nella regola con l’hover).

La transizione dell’esempio è evidenziata in Figura 1:

Il termine WEB 2.0 è ormai di uso comune, ma non tutti ne colgono il vero significato, fino a qualche hanno fà io e i miei amici-colleghi sviluppavamo siti web usando layout  basati su tabelle, e con controlli esclusivamente lato server, mentre nel frattempo un timido javascript si affacciava con una certa diffidenza, nel mondo dei webmaster.

Da allora il web si è evoluto, basta vedere un semplice form di registrazione che in tempo reale ci mostra  se il nostro nick-name o e-mail  sono già presenti nel database  del sito, oppure ci fa sapere il grado di sicurezza della nostra password. Il fatto di non essere più costretti a inviare tutti i dati da un form con  conseguente caricamento dell’intera pagina ha permesso di rendere le procedure di registrazione sicuramente più snelle e accativanti,  anche grazie all’implementazione della tecnica AJAX, ovvero un metodo che permette con javascript e l’oggetto xmlhttp(ormai presente in tutti i browser),  di inviare dei dati ad uno script lato server(php per esempio), senza dover ricaricare tutta la pagina da capo,   risparmiando una notevole quantità di banda, dato che i dati che vengono inviati, sono solo quelli che necessitano di un controllo. Certo il momento di mandare in pensione il sistema tradizionale non è ancora arrivato ma di certo, esistono già applicazioni che ne  fanno largo uso, basti pensare al celebre e talvolta abusato social network Facebook.

Il massiccio impiego  di questi metodi ha reso necessario lo sviluppo di sistemi più agevoli per scrivere eventi con javascript; nascono cosi framework come Jquery(ormai alla versione 1.4) che permette con poche righe di codice di fare chiamate ajax o di cambiare con un click intere regole css.

Come eccenato ad inizio articolo, i siti WEB in passato venivano spesso sviluppati basando l’intero layout sulle tabelle, fino a quando il W3C non diede le sue direttive, e cosi  i webmaster conobbero un TAG allungo dimenticato chiamato DIV, questo elemento  ha complicato la vita a molti sviluppatori ormai cosi affezionati alla praticità delle tabelle, ma per forza di cosa tutti costretti ad allinearsi ai nuovi standard web (bhe non proprio tutti…), La questione nasce da un puro concetto di semantica in quanto lo scopo per il quale le tabelle furono concepite, era quello d’ incasellare dati puramente tabellarri del tipo varibile-valore, mentre il div doveva essere usato per “suddividere” i vari elementi del layout.

Le innovazioni non mancano e non mancheranno,  il css 3 e gli eventi javascrit sono ormai una realtà, il vero problema sta nel fatto che non tutti i browser vanno di pari passo con queste innovazioni, basti pensare a Internet Explorer che ormai giunto alla versione 8 non supporta regole come angoli arrotondati e position fixed, senza contare le attivazioni degli eventi javascript che spesso vengono interpretate in modo nettamente  differente da Firefox o Google crome.

Mi auguro che questa lettura sia d’aiuto a tutti coloro che vogliano comprendere il WEB di oggi e di domani. Gli argomenti che abbiamo introdotto verranno appronfonditi in future pubblicazioni.

PHP for Android (PFA) progetto che ha recentemente acquisito una certa trazione, uno sforzo per rendere lo sviluppo di PHP sulla piattaforma possibile e facile.

Irontec è la società che sta dietro al progetto e il loro obiettivo è di rendere lo sviluppo PHP in Android non solo possibile ma anche realizzabile fornendo strumenti e documentazione. Sul sito dedicato al progetto ci sono informazioni e link per scaricare e installare il software necessario e uno screencast su come iniziare a creare un’applicazione di test.

Potete trovare maggiori informazioni sul progetto (e su come potere parteciparvi) su phpforandroid.net.