Creare un sito multilingua in PHP

Per gestire un sito multilingua nei CMS spesso ci vengono in aiuto i plugin ma nel caso di siti molto semplici e con poche pagine potremmo anche pensare di non avere la necessità di creare un pannello back-end e quindi di ritrovarci a dover gestire più lingue.
Creare molti files separati probabilmente è la prima idea che potrebbe venirci in mente ma, francamente, non è certo la migliore!
Il concetto alla base è molto semplice: sfruttare un array in PHP che contenga le varie parole o i testi che dovranno essere inseriti all’interno del sito; ciascuna lingua avrà un array con lo stesso nome che conterrà i testi localizzati e includeremo solo quello della lingua desiderata.
Vediamo come:

<?php
// la lingua può essere selezionata passando un valore in GET all'attributo 'lang'
// rileviamo se esiste un parametro get per 'lang' e lo assegniamo alla variabile $lang
if(isSet($_GET['lang'])) {
    $lang = $_GET['lang'];
// in caso contrario rileviamo la lingua preferita del browser dell'utente
// e la assegniamo alla variabile
} else {
    $lang = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
}

// Verifichiamo se il valore di $lang corrisponde ad una delle lingue
// di cui il nostro sito dispone e assegnamo il valore corretto alla varibile
// impostando come default l'inglese per far si che internazionalmente
// venga visualizzato l'inglese
switch ($lang){
    case 'it':
        $lang = 'it';
        break;
    case 'en':
        $lang = 'en';
        break;        
    default:
        $lang = 'en';
        break;
}
// includiamo il file contenente l'array con le traduzioni corrispondente
// alla lingua ricavata qui sopra
require_once 'lang/lang.'.htmlspecialchars($lang).'.php';

Com’è facile intuire dal codice nella nostra ‘index.php’ ora abbiamo a disposizione un codice identificativo di una lingua non solamente scelta dall’utente ma persino rilevata in automatico dalle preferenze del browser; ora non ci resta che creare gli array contenenti le traduzioni e poi integrarle nell’HTML, iniziamo con l’italiano:

<?php
/*
------------------
Language: Italian
------------------
*/

 
$lang = array();

$lang['PAGE_TITLE'] = "Sito Multilingua";
$lang['PAGE_HEADER'] = "Questo &egrave; un sito multilingua!";

Salviamo il file all’interno della cartella “lang” nominandolo “lang.it.php” e creaiamo quello per l’inglese:

<?php
/*
------------------
Language: English
------------------
*/

 
$lang = array();

$lang['PAGE_TITLE'] = "Multilanguage Website";
$lang['PAGE_HEADER'] = "This is a multilanguage website!";

Salviamo anche questo file all’interno della cartella “lang” nominandolo “lang.en.php” e procediamo infine ad inserire le variabili nell’index (sotto al codice PHP mostrato all’inizio dell’articolo)

<!-- codice all'inizio dell'articolo -->
<!DOCTYPE html>
<html>
<head>
    <title><?php echo $lang['PAGE_TITLE']; ?></title>
    <meta charset="utf-8">
    <meta name="robots" content="index, follow" />
</head>
<body>
    <h1><?php echo $lang['PAGE_HEADER']; ?>
</body>

</html>

Come avete visto nel sorgente dell’index è possibile tradurre anche i vari tag all’interno dell’head permettendoci così di ottimizzare anche la SEO del nostro sito, lo step successivo potrebbe essere quello di ottimizzare l’URL per renderlo più user-friendly utilizzando il la mod_rewrite del file .htaccess.
Ed ecco concluso il nostro sito multi-lingua!
Possiamo ovviamente gestire quanti testi e lingue desideriamo (nel limite del buon senso) ed aggiungerli agli array.
Ci sono molte strade per sviluppare un sito multi-lingua questa è sicuramente tra le più immediate anche se probabilmente ce ne sarebbero di più corrette come ad esempio l’utilizzo dell’estensione PHP gettext che utilizza i files .po e .mo oppure, banalmente, l’utilizzo di un database per archiviare le varie lingue ma per siti di piccole dimensioni la soluzione sopra spiegata funziona egregiamente!

Utilizzare la funzione mail(); di PHP in un VPS Linode

Da qualche tempo a questa parte ho migrato tutti i siti che ho in gestione da un hosting condiviso ad un server cloud Linode (un davvero ottimo host che consiglio vivamente), tale server necessita di una configurazione manuale (ed è un bene) di tutto ciò di cui abbiamo bisogno;
Tra le varie cose da configurare a cui non avevo minimamente pensato c’è la configurazione di un “mail server” per utilizzare il metodo mail(); di PHP, infatti, sebbene mail(); sembra che funzioni e non restituisca errori, se non viene configurato il mail server non verrà inviata nessuna e-mail.

Per utilizzare mail(); è sufficiente installare Postfix e configurarlo per il solo invio di mail e non per la ricezione:
Eseguiamo il seguente comando per installarlo

sudo apt-get install postfix

In seguito durante l’installazione impostiamo “Satellite system” per “Type of Mail Configuration” e lasciamo vuoto alla voce “Relay Host”.

PS: L’OS utilizzato è Ubuntu Server 12.04.

Salvare dei dati in Javascript con localStorage

Ci sono vari modi per salvare dei dati nel browser dell’utente, il metodo più diffuso è l’utilizzo dei cookies ma localStorage sicuramente non è da meno.

Questo sistema ci permette di salvare dei dati sotto forma di stringhe accoppiando una chiave ed il suo relativo valore, tali valori saranno poi accessibili da qualsiasi pagina dello stesso dominio e risulteranno accessibili anche se l’utente chiuderà il browser e lo riaprirà.

Le 3 principali fasi che ci interessano sono come memorizzare i dati, come accedervi e come cancellarli:
Per memorizzare una nuova chiave possiamo utilizzare il metodo localStorage.setItem() che accetta due parametri: il primo è la chiave del valore da memorizzare e il secondo è il valore stesso:

localStorage.setItem('nome', 'Matteo');

Oppure più semplicemente è possibile memorizzarlo assegnandolo direttamente:

localStorage.nome = "Matteo";

Per accedere alla chiave semplicemente richiameremo localStorage e la chiave del valore precedentemente memorizzato:

console.log( localStorage.nome ) ;

Ed infine per eliminare un dato possiamo utilizzare il metodo localStorage.removeItem() che accetta un parametro indicante la chiave del dato da eliminare oppure con il metodo localStorage.clear() elimineremo tutti i dati memorizzati:

// Elimina il dato con chiave 'nome'
localStorage.removeItem('nome');
// Elimina tutti i dati memorizzati
localStorage.clear();

Nel caso in cui volessimo memorizzare dei dati più complessi come un oggetto sarà sufficiente trasformare in stringa l’oggetto utilizzando JSON e successivamente effettuare il parsing:

// Salviamo l'oggetto
var person = {
   nome: 'Matteo',
   cognome: 'Rossi'
};

// Memorizziamo l'oggetto trasformandolo in stringa con il metodo JSON.stringify();
localStorage.oggetto_json = JSON.stringify(person);

// Accediamo all'oggetto memorizzato come stringa utilizzando il metodo JSON.parse();
console.log( JSON.parse(localStorage.oggetto_json).nome ); // Matteo

Ovviamente anche localStorage ha i suoi limiti che consistono principalmente nella quantità di dati memorizzabili (che varia da browser a browser, attualmente credo nessun browser superi i 10MB) e dal supporto di questo metodo del browser (non è supportato da Internet Explorer 8.0 e precedenti).

Corso SEO lezione 10: Il contenuto testuale

Un fattore importante o forse IL fattore per il successo di un sito web è la qualità dei contenuti.

La possibilità di raggiungere una posizione elevata nei risultati è strettamente connessa con la capacità di creare contenuti in grado di soddisfare in maniera esaustiva un reale bisogno di ricerca.

Se gli utenti reputano un sito ben fatto, con un buon contenuto, indirizzeranno altre persone verso di esso. Il passaparola è, infatti, il mezzo più efficace per costruire la reputazione di un sito, sia tra gli utenti sia con Google, e ciò non avviene quasi mai se il contenuto non è di qualità.

Ma come fanno i motori di ricerca a considerare un sito migliore di un altro?

In generale questo avviene perché i siti ritenuti “migliori” hanno in comune determinate caratteristiche:

  • sono facili da utilizzare, da navigare e da capire;
  • forniscono informazioni dirette e pertinenti per le ricerche effettuate;
  • hanno un design professionale e risultano accessibili a tutti i browser moderni;
  • forniscono contenuti credibili e di alta qualità.

E’ sconsigliato scrivere testi palesemente copiati da altre fonti, con molti errori grammaticali o inserire il testo all’interno di immagini in quanto, come detto, l’importante è cercare di creare contenuti originali e con molte informazioni.

Per andare incontro alle esigenze degli utenti è utile classificare e comprendere le loro ricerche in base all’obiettivo che si sono posti:

1)  ricerca verso un percorso: l’intento dell’utente è quello di giungere direttamente ad un sito specifico;

2)  ricerca di informazioni: lo scopo è quello di ottenere risposte rapide, l’informazione stessa é il fine della ricerca, nessuna altra interazione é richiesta oltre al click e alla lettura di ciò che interessa sapere;

3)  ricerca transnazionale: si cerca un luogo (come un ristorante), o si vuole fare un acquisto online o ancora completare una registrazione;

4)  indagine commerciale: é una ricerca a metà strada tra una ricerca di informazioni e una ricerca transazionale (ad esempio la ricerca di potenziali clienti/partner o la raccolta di informazioni sui propri concorrenti).

L’unico accorgimento a livello progettuale che consigliamo nella realizzazione dei contenuti e (parallelamente dell’estetica) è di suddividere i contenuti in pagine pertinenti e, naturalmente, di utilizzare gli heading tags come spiegato nella lezione precedente.

Corso SEO lezione 9: Gli heading tags

Gli heading tags sono i tags utilizzati per individuare le intestazioni utilizzate per organizzare le parti principali e secondarie di una pagina.

Sono sei:

  1. <h1>Testo</h1>
  2. <h2>Testo</h2>
  3. <h3>Testo</h3>
  4. <h4>Testo</h4>
  5. <h5>Testo</h5>
  6. <h6>Testo</h6>

Da <H1>, la misura più importante, ad <H6>, la meno importante.

Un accorgimento da tenere presente, è che le intestazioni di paragrafo create, devono essere coerenti con i contenuti della pagina e devono avere un senso per l’utente. Inoltre, la keywords principale deve comparire una sola volta nel tag H1 e la parola chiave secondaria nel tag H2. In HTML4 è Importante è non ripetere il tag H1 più di 2 volte all’interno della stessa pagina, mentre gli altri header tags si possono ripetere più volte, In HTML5 il ruolo degli heading tags è cambiato ed ogni sezione della pagina può avere la sua struttura e il suo H1, h2, h3 ecc.

Far finta di scrivere un sommario è un modo per capire come usare questo strumento, cercando di individuare quali saranno i punti principali e secondari del contenuto della pagina e, di conseguenza, decidere come usare le intestazioni in modo appropriato.

Per meglio capire come devono essere utilizzate queste tags ecco cosa dovrebbe essere inserito nelle rispettive intestazioni:

  • in H1 nome del sito/della sezione (html5) o titolo della pagina;
  • in H2 nome del sito, descrizione, titolo delle sezioni, sottotitoli;
  • in H3 titolo delle sezioni, sottotitoli;
  • in H4 e H5 i testi delle pagine;
  • in H5 o H6  note, approfondimenti.

La formattazione, che si ottiene grazie a questi tags, aiuta visivamente gli utenti a comprendere l’importanza dei contenuti della pagina.

Ciascun heading tag ha infatti una sua formattazione che differisce per grandezza del testo, margini e rientri di paragrafo (che cambia però da browser a browser) e che può essere modificata con l’utilizzo dei css (cascading style sheet – Foglio di stile).

Una struttura multipla di heading tags viene utilizzata per creare una gerarchia all’interno del contenuto e questo facilita molto la navigazione e i motori di ricerca a dare una valutazione di importanzaai contenuti.

Con l’avvendo di html5 in oltre ci saranno novità all’interno dei browser che sfrutteranno molto più di ora le gerarchizzazioni per dare delle anteprime della struttura dei links e delle pagine.