Web Lab

A cura di Giulio Carducci

Esiste in giro e particolarmente sulla "rete una enorme dsponibilità di testi e di informazioni particolari accompagnata, tuttavia, da una totale mancanza di quadri di riferimento, di visuale complessiva sul tema della realizzazione del sito, di analisi critica circa le diverse variegate opzioni di strumenti e alternative operative. Abbiamo deciso quindi, tra il nostro gruppo di lavoro, che poteva essere utile mettere a disposizione dei neofiti della progettazione le nostre esperienze e considerazioni critiche, al fine di evitare loro, per quanto possibile, gli "alti e bassi" tipici di un percorso di maturazione professionale, sia sul piano di scelte di carattere più ampio che di piccole "ricette" per problemi particolari.

Va detto che per realizzare un sito Web di una certa professonalità non basta conoscere i linguaggi del caso (HTML, CSS, Javascript e altro) ma occorre avere una certa padronanza dei programmi per la grafica. Non occorre divenirne esperti, ma una certa confidenza con gli stessi è indispensabile. Come pure è utile sapere attingere da una serie di risorse disponibili su Internet la cui conoscenza consente di risparmiare parecchio in termini di tempo e di qualità dei risultati.

Quanto segue, al momento, non è ancora soddisfacentemente "categorizzato". Lo diverrà con il tempo. Per ora è una successione di argomenti, in ordine pressoché (anche se non completamente) casuale, ch alterna argomenti di carattere più generale a "ricette" per casi e problemi particolari. Per un riscontro o un dialogo potete scrivermi indirizzando a Questo indirizzo email è protetto dagli spambots. E' necessario abilitare JavaScript per vederlo.

Da ultimo, quanto qui contenuto non è un corso né di HTML né di altri linguaggi di programmazione legati alla realizzazione di un sito Web. E' uno "spazio virtuale" che si aggiunge ai tanti e qualificati siti sulla rete che intende contribuire, con suggerimenti e considerazioni basate sulla propria pelle, alla conoscenza di questa appassionante attività che riguarda l'utilizzo creativo della tecnologia del Web.

Giulio Carducci

 

"Codifica base" o Content Management System?

 

Per "codifica base" intendiamo l'utilizzo dei linguaggi HTML, CSS, PHP e SQL la cui conoscenza, con diversi gradi di approfondimento, è necessaria per realizzare moderni siti "dinamici" (vale a dire capaci di interagire con l'utente). Operare con questi mezzi è come realizzare una casa utilizzando mattoni, calce, commssionando infissi su misura e realizzando impianti esattamente calibrati sulle esigenze del committente (eventualmente con rubinetti d'oro ...)

Utilizzare un CMS significa, invece, adottare il mondo del "prefabbricato". Con la differenza che, mentre il prefabbricato in edilizia è tangibile e ben visibile, i CMS, che consentono di risparmiare effettivamente giorni di programmazione, hanno la necessità di essere studiati, capiti, compresi nella loro articolazione in vari "moduli" e, nell'ambito di ciascuno di questi, va appreso l'insieme di funzioni possibili e disponibili. Esattamente come avviene per lo studio di un linguaggio di programmazione (abbiamo visto che di linguaggi occorre conoscerne, seppure con grado di profondità diverso, almeno quattro mentre, in teoria, di CMS se ne può conoscere uno solo). In ogni caso resta la necessità di conoscere un paio di programmi di grafica.

Nell'ambito dei CMS occorre distinguere tra quelli molto semplici (utili per realizzare un sito "vetrina", senza funzioni interattive, oggi spesso definito come "blog") da quelli che consentono la realizzazione di siti professionali, altamente interattivi e sofisticati. Alla prima categoria appartiene la piattaforma www.blog.com (ce ne sono molte altre), quanto alla seconda conviene fermarsi ai leader Wordpress, Joomla! e Drupal.

Occorre dire questo: ipotizzato che il tempo per impadronirsi di un CMS sia inferiore a quello complessivo necessario per lo studio dei linguaggi, credo di poter affermare che un controllo di grado elevato sul CMS prescelto richieda comunque una buona conoscenza dei linguaggi stessi. A meno di non voler rinunciare a una buona percentuale del grado di personalizzazione dell'estetica e delle funzionalità del sito. In altre parole, il sistema "genera" il sito, che occorrerebbe poi "rifinire" sulla base della conoscenza dei linguaggi. A meno di accontentarsi (e somigliare, quindi, a diversi altri ...).

La strada da noi scelta è stata quella di acquisire una buona conoscenza dei linguaggi e di affrontare quindi un CMS, in particolare Joomla!

Il vero "plus" di un CMS è quello di consentire la possibilità a terzi redattori esterni di aggiungere o modificare contenuti, attraverso un sofisticato sistema di autorizzazioni. Come pure la possibilità di "incorporare" "plug in" complessi, come nel caso in cui si voglia realizzare un e-shop.

Per completezza, in fine, va ricordato che potete anche progettare "sulla carta" (in questo caso carta, matita e gomma sono ancora insostituibili ...) il vostro sito e commissionarne quindi l'esecuzione a un esperto, magari a bitbook.


 

Come "vignettare" un'immagine

Un'immagine "vignettata" è quella che appare con i bordi gradualmente sfumati ("feather" in inglese) verso l'esterno. I parametri che riguardano questa operazione sono:

  1. la forma finale dell'immagine (quadrato, rettangolo, ma anche ellisse o cerchio);
  2. il "gradiente", vale a dire lo spessore della fascia che gradualmente sfuma;
  3. Il colore verso cui la sfumatura si conclude (normalmente coincide con il colore del fondo su cui l'immagine vignettata dovrà collocarsi.

Nell'esempio indicato la forma è rettangolare, il gradiente è di 5 pixel, il colore del punto 3 è il bianco, e non coincide con lo sfondo di questa pagina (grigio) perché altrimenti il colore stesso non si sarebbe notato.
Prescindendo dalla scelta estetica se sia preferibile una immagine con bordi sfumati a una con bordi netti (dipende dal contesto, in generale la "vignettatura" richiama qualcosa di un po' "old fashioned", quindi di raffinato e di alto livello), questa apparentemente semplice operazione è trattata poco o nulla nei libri mentre sulla rete se ne trovano varie descrizioni in generale piuttosto complesse. Dopo varie esperienze, questa è la mia ricetta. Ovviamente utilizzando Photoshop, programma flessibilissimo, indiscutibile ma di difficoltà notevole.

Anzitutto va detto subito che la "ricetta" non funziona con le immagini .gif. Non chiedetemene il perché, se qualcuno vorrà dircelo sarà il benvenuto. Semplicemente convertite l'immagine .gif in uno dei numerosi altri, più congeniali a Photoshop. Se volete andare sul sicuro, convertitelo in .jpg.

Quindi aprite l'immagine in Photoshop, fatene una copia di lavoro per mantenere immutato l'originale, ritagliatela se necessario con lo strumento taglierina (C) e applicate con uno dei due possibili strumenti di selezione (M) una selezione, appunto, di qualche millimetro all'interno della immagine. Vi ricordo che lo strumento di selezione ha una variante "rettangolo" e una variante "ellisse", rispettivamente "forzabili" mediante l'utilizzo del tasto "maiuscolo" a quadrato e a cerchio (date sempre un'occhiata quando usate Photoshop a quanto indicato nella barra orizzontale di "contesto", in alto, per spiegarvi eventuali bizzarrie momentanee del programma).

Allorchè attivate lo strumento di selezione, proprio sulla barra di contesto focalizzate il valore di "sfuma": esso svolge un duplice importante ruolo nella nostra operazione. Il primo tende ad arrotondare gli angoli se avete optato per una forma quadrata o rettangolare, il secondo è che determina l'ampiezza della sfumatura (precedente punto 2).

Io ho impiegato parecchio per capire la relazione dei due aspetti, ma voi lo capirete al volo: un ipotetico rettangolo con angoli retti si troverebbe in difficoltà a "raccordare" le bande di sfumatura in corrispondenza degli angoli stessi. Quindi, se voi optate per una banda "sfumata" di qualche spessore, corrispondentemente gli angoli si arrotonderanno per consentire un adeguato e morbido raccordo di sfumature in corrispondenza degli angoli. Per le ellissi e i cerchi il problema non si pone. Il valore in pixel di "sfuma" che vi consiglio varia da 3 a 10.

Una volta operata la selezione e adeguatamente posizionata (ricordatevi l'uso della barra spaziatrice al riguardo) procedete a invertire la selezione (menù in alto Selezione>Inversa ovvero Maiusc+Contr+I). Quindi procedete a riempire la selezione stessa che a questo punto borderà la fascia esterna dell'immagine. Per operare tale riempimento, utilizzate Modifica>Riempi dal menù in alto ovvero Maiusc+F5. Si aprirà una finestra di dialogo dove dovrete impostare il colore che vorrete utilizzare. Come si è detto, è opportunoche tae colore coincida con quello dello sfondo su cui andrà collocata l'immagine.

Con questo dovreste avere concluso. Ricordatevi che Photoshop (e questa è una delle funzioni più utili per noi webbisti) vi consente di "salvare per il Web" in una varietà di formati.

 

Il magico mondo dei "Form"

L'argomento dei "Form", insieme a quello della registrazione e dell'autenticazione dei visitatori, costituiscono i capisaldi della interattività del web. I form possono essere semplicissimi fino a complicatissimi e articolati in varie pagine. La trattazione che ne viene fatta in questo articolo è di carattere elementare (contiamo di scrivere in futuro articoli di approfondimento) e riguarda form destinati a essere inviati a un indirizzo di posta elettronica, tramite l'invio dei dati del form stesso a un programma PHP che provvederà a inviare l'email a chi di dovere. Il programma PHP (o anche altro) può avere funzioni diverse e anche molto complesse e molto spesso elaborerà i dati interagendo con il data base MySql.

Lo scopo, in sintesi, di questo articolo è di familiarizzare il lettore con i diversi tag, elementi e i relativi parametri che definiranno, nel loro insieme, il lay-out con cui il form comparirà sul video del visitatore nonchè le diverse tipologie dei campi e le loro relative funzioni.

Leggendo quanto segue, il lettore tenga presente, per quanto riguarda questo primo semplice form, che vengono utilizzati tag esclusivamente HTML e si fa uso di una tabella per formattare i campi. L'utilizzo delle tabelle, come discusso altrove, nonostante il prepotente arrivo sulla scena di CSS, resta uno strumento estremamente utile per definire lay-out diciamo, così "locali". Esaminiamo il seguente codice HTML:


<form method="POST" action="contact.php">
<table>
<tr>
<td align="left">Nome</td>
<td align="left"><input type="text" name="nominativo" maxlength="30" size="30"> </td>
</tr>

<tr>
<td align="left">Email</td>
<td align="left"><input type="text" name="email" maxlength="30" size="30"> </td>
</tr>

<tr>
<td align="left">Oggetto</td>
<td align="left"><input type="text" name="oggetto" maxlength="100" size="100"> </td>
</tr>

<tr><td align="left">Messaggio</td>
<td align="left"><textarea cols="60" rows="5" name="messaggio"></textarea> </td>
</tr>

</table>

<br>
<input type="submit" value="Invio">

</form>

Si può anzitutto notare che il tag "form" apre e chiude la serie di istruzioni, fungendo quindi da contenitore per il resto del codice.

Il tag in questione ha diversi possibili attributi, ma due sono essenziali e vanno immediatamente dichiarati:
- method, che può assumere due valori: GET e POST. Nel primo caso i dati verranno trasmessi associati alla URL di destinazione, e quindi sono limitati come numero di caratteri. Nel secondo caso sono inclusi nel "corpo" del messaggio che verrà inviato e il numero di caratteri può essere maggiore. I due metodi hanno pro e contro che esulano da questa trattazione. Noi useremo sempre POST.
- action, che indica il file contenente programma PHP che dovrà elaborare le informazioni immesse nel form.

Il codice che segue è inquadrato in una normale tabella (si suppone che il lettore conosca i fondamenti di questo tag). Ciò serve solo per formattare i campi del form, ma non si tratta, ovviamente, di codice specifico per il form stesso.

La parola Nome  è una semplice stringa di testo che serve a identificare il primo campo che andremo a definire.

All'interno del form i diversi campi vengono definiti utilizzando vari possibili elementi. I due più importanti sono:
- input type, che serve per campi di pochi caratteri, su di una sola riga
- textarea, che serve per indicare un'area multiriga, capace di ospitare testi di notevole ampiezza.

Abbiamo definito, come si vede, il primo campo con l'elemento input type e il parametro "text". Abbiamo dato un nome a questo campo ("Nominativo") e abbiamo definito la dimensione del campo stesso e il massimo numero di caratteri che l'utente potrà inserire (le due lunghezze non devono necessariamente coincidere).

Il secondo e il terzo campo ("email" e "oggetto") sono dichiarati in modo del tutto analogo.
Il quarto campo ("messaggio") è di tipo diverso: si tratta di un'area di testo, viene quindi utilizzato l'elemento textarea con i propri parametri specifici, autoesplicativi.

I campi sono ora completati. Resta da definire un campo di controllo, capace di spedire le informazioni che verranno introdotte nei tre campi sopra specificati al programma indicato dal parametro "action". Tale campo di controllo si definisce con l'elemento input type questa volta associato al parametro "submit". E' possibile anche indicare una "label" (value="Invio") che comparirà sul campo, a forma di pulsante, che con quest'ultima dichiarazione abbiamo definito.

Il nostro form è ora pronto e se lo copiate e lo leggete con il vostro browser sarà reso sul display come segue:

 

Nome
Email
Oggetto
Messaggio

Abbiamo visto come in apertura di questo script il parametro action del tag form punti al file del programma che dovrà prendere in consegna ed elaborarli. Per completare l'opera a dare un senso a tutto quello che abbiamo detto e fatto, diamo un'occhiata a un possibile file-programma. L'esempio è tratto dal mio sito www.bluegarden.it e il programma in questione prende in consegna le informazioni, le impacchetta in un messaggio aggiungendo una stringa che chiarisce l'origine del messaggio stesso, invia il tutto al mio indirizzo e mail e fa comparire sullo schermo del visitatore (che ha riempito e inviato il form) un messaggio di ringraziamento e conferma di avvenuta ricezione.

Il codice in questione contenuto nel file contact.php è il seguente:

<? mail(" Questo indirizzo email è protetto dagli spambots. E' necessario abilitare JavaScript per vederlo. , Questo indirizzo email è protetto dagli spambots. E' necessario abilitare JavaScript per vederlo. ",$oggetto,"Da: ".$nominativo."\n".$messaggio."\n"."Email mittente: ".$email."\n"."Email inviata direttamente dal sito Blue Garden."); print "Grazie per averci contattato! Le risponderemo al più presto."; ?>

Una sintetica ma esauriente analisi della funzione mail (per una trattazione generale sulle funzioni PHP si veda alla voce "Libri" del menu principale di questo sito). La funzione ha un Codice Operativo (diciamo) che è mail e tre parametri, contenuti in parentesi e delimitati dalla virgola. La forma generale di questa funzione è quindi mail(param1,param2,param3). L'ordine in cui si trovano i parametri ha un significato preciso: il primo sarà l'indirizzo cui è estinata la email, il secondo ciò che comparira nel "Subject" della email, il terzo costituirà il corpo del messaggio. Per la precisione, questa funzione può avere altri due parametri opzionali che non riteniamo trattare in questa sede.

Il primo parametro è chiaro: sarà una stringa (quindi inizia e termina con virgolette) che contiene l'email del destinatario. Potete utilizzare più di un indirizzo, scritti di seguito e divisi da una virigola, ovvaimente senza aggiungere virgolette se non quella di fine stringa.

Nel secondo parametro, destinato, come si è detto, all'oggetto del messaggio, viene inserita la variabile corrispondente all'elemento name="oggetto" del form che abbiamo discusso

Il terzo e ultimo parametro è più complesso perché abbiamo voluto fare uno sforzo di formattare l'estetica del messaggio. Ricordatevi che il parametro è uno solo, ma in questo caso è costituita da più elementi (stringhe, variabile e comandi di formattazione collegati dal segno punto.

Questi elementi sono:

  • la stringa "Da: "
  • la variabile $nominativo che, se controllate il codice del form, contiene il nome del visitatore;
  • il comando di formattazione "\n" il cui effetto sarà quello di produrre nel messaggio che si produrrà un ritorno a capo;
  • la variabile $messaggio che, sempre controllando il codice del form, vedete contenere il corpo del messaggio;
  • in literal con la stringa "Email del mittente:" esplicativa dell'informazione che comparirà subito dopo;
  • la variabile $email che contiene l'email del mittente;
  • un ulteriore ritorno a capo;
  • una stringa che produrrà nel messaggio la notizia che lo stesso proviene da un form presente e utilizzato sul sito "Blue Garden".

Questo è quanto. Avete appreso un sacco di cose. Potete copiare il codice con cut and paste attivando la "visione sorgente" del vostro browser. Verificate solo che nel vostro codice (che andrete a utilizzare) siano presenti effettivamente le parentesi acute < e > e non i rispettivi sostituti "ecommerciale" l t ;" e "ecommerciale g t ;" che ho usato come escamotage per non far interpretare al browser il codice e mostrarvelo in modo "sorgente" ...

Un form con attachment

Si è visto che un form che consente al visitatore di inviare un messaggio da una pagina web al gestore del sito utilizzando la funzione mail() di PHP è un argomento di una certa complessità ma comunque assimilabile. Più complesso è il tutto se ci si prefigge, nel form, di consentire all'utente di allegare un file prelevato dal proprio computer (client).

Dico subito che per venire a capo di questo meccanismo, esplorando la rete, ho incontrato le soluzioni più disparate, alcune veramente "intricate" e di non agevole comprensione. Illuminante è stato al riguardo un articolo di Kevin Yonk, reperibile sul sito www.sitepoint.com da cui traggo e interpreto quanto segue.

Anzitutto, occorre tenere a mente che il pprocesso si articola sempre su due componenti: il form vero e proprio e il file .php cui punta il form con il proprio elemento "action".

Esaminiamo distintamente i due aspetti

Il form

Il codice per il form è il seguente (per semplicità, il form non è formattato, cosa che potete fare ricorrendo a una tabella o anche a una serie di tabelle, come nell'esempio indicato per il form senza attachment):

Invio di una email con attachment
<form action="mail.php" method="POST" enctype="multipart/form-data">
<p> To: <input type="text" name="to" value="" >
<p> From: <input type="text" name="from" value="" >
<p> Subject: <input type="text" name="subject" value="">
<p> Message:<textarea cols="70" rows="10" name="message"></textarea>
<p> File Attachment: <input type="file" name="fileatt">
<p> input type="submit" value="Send">
</form>
</body>


Il codice sopra indicato viene reso dal browser come segue:

Invio di una email con attachment

To:
From:
Subject:

Message:

File Attachment:

 

Rispetto al codice che produce il form senza la funzione di attachment si notano due aggiunte:

1 - L'elemento enctype="multipart/form-data" che chiarisce al metodo POST che la email in questione contiene almeno due tdiversi tipi di codifica dei caratteri contenuti (si tratta di questione regolata dal protocollo MIME);

2 - l'elemento input type="file" che chiarisce che ci sarà un file "attached" e che provoca la comparsa del bottone Sfoglia che favorisce la ricerca del file da allegare

Il file .php cui punta il form con l'elemento action

Rispetto al codice visto nel caso di email senza attachment si tratta di un codice notevolmente più complesso. Per compremdere il codice e la relativa maggiore complessità è utile sapere che:

1 - il metodo POST d'imvio memorizza automaticamente alcuni valori importanti ai fini della successiva elaborazione relativi all'attachment. Tali valori sono memorizzati all'interno di array speciali diciamo così "di sistema" che hanno i nomi predefiniti e riservati $_POST e $_FILES.Tali array sono di tipo asspciativo, il che significa che i diversi elementi possono essere richiamati, piuttpsto che da un semplice valore ordinale (0,1,2 ...) da un nome di campo (label) che compare anche nel form sopra illustrato. Inoltre occorre sapere che l'array $_FILES è un array bidimensionale;

2 - la funzione PHP mail() prevede, come si è visto, tre campi principali obbligatori che sono stati utilizzati nel precedente caso di email senza attachment. Si ricorda che i vari parametri sono separati da virgole. La funzione prevede un quarto parametro in cui è possibile "assemblare" tutte le informazioni che riguardano l'attachment;

3 - trattandosi di un messaggio che contiene due diversi tipi di codifica delleinformazioni contenute (si è visto l'elemento enctype nel form) èsi rende necessario, nell'assemblare l'insieme di informazioni del quarto parametro, inserire una stringa di caratteri casuali che sicuramente non abbia caratteri simili (si dice "non collida") con i caratteri isgnificativi delle due parti del messaggio. Tale stringa, considerta la sua funzione di "barriera", prende appunto il nome di boundary string. Tale stringa viene calcolata in modo casuale da una particolare funzione della biblioteca standard di PHP con un algortimo che si chiama md5.

da ultimo, conformemente al protocollo MIME, si rende necessario convertire l'attachment nella codifica base64.

Armati di queste nozioni possiamo analizzare e studiare il codice del file .php cui punta il form, leggendo attentamente i commenti esplicativi che vi sono inseriti.

<?php
// Read POST request params into global vars
$to = $_POST['to'];
$from = $_POST['from'];
$subject = $_POST['subject'];
$message = $_POST['message'];

/* File uploads in PHP 4.1 are placed in a special $_FILES array, so we fetch the values we need out of it: */

// Obtain file upload vars
$fileatt = $_FILES['fileatt']['tmp_name'];
$fileatt_type = $_FILES['fileatt']['type'];
$fileatt_name = $_FILES['fileatt']['name'];

/* For the sake of brevity, we'll assume that the required parameters ($to and $from) now have valid values (email addresses) in them.
Normally we would check their format with regular expressions. */

/* Next, we use the $from value to begin building the extra headers for the email: */

$headers = "From: $from";

/* Next we check the $fileatt variable, which may or may not contain the path and filename to an uploaded file attachment. We use PHP's is_uploaded_file function to find out: */

if (is_uploaded_file($fileatt)) {
// Read the file to be attached ('rb' = read binary)
$file = fopen($fileatt,'rb');
$data = fread($file,filesize($fileatt));
fclose($file);

/* Having read in the data for the file attachment, we need to set up the message headers to send a multipart/mixed message: */

// Generate a boundary string
$semi_rand = md5(time());
$mime_boundary = "==Multipart_Boundary_x{$semi_rand}x";

// Add the headers for a file attachment
$headers .= "\nMIME-Version: 1.0\n" .
"Content-Type: multipart/mixed;\n" .
" boundary=\"{$mime_boundary}\"";
/* Now for the message body itself. This works just as we saw for the text part of a mixed message in the previous section: */
// Add a multipart boundary above the plain message
$message = "This is a multi-part message in MIME format.\n\n" .
"--{$mime_boundary}\n" .
"Content-Type: text/plain; charset=\"iso-8859-1\"\n" .
"Content-Transfer-Encoding: 7bit\n\n" .
$message . "\n\n";
/* Now, to allow for binary file types, we need to use Base64 encoding to convert the (possibly binary) file attachment data to a text-only format suitable for sending by email. All email programs in popular use support Base64 encoding of file attachments, so this is the best way to go. Fortunately, PHP provides a function for Base64 encoding: */

// Base64 encode the file data
$data = chunk_split(base64_encode($data));
/* We now have everything we need to write the portion of the message that contains the file attachment. Here's the code: */
// Add file attachment to the message
$message .= "--{$mime_boundary}\n" .
"Content-Type: {$fileatt_type};\n" .
" name=\"{$fileatt_name}\"\n" .
"Content-Disposition: attachment;\n" .
" filename=\"{$fileatt_name}\"\n" .
"Content-Transfer-Encoding: base64\n\n" .
$data . "\n\n" .
"--{$mime_boundary}--\n";
}
/* That completes the modifications necessary to accommodate a file attachment. We can now send the message with a quick call to mail: */
// Send the message
$ok = @mail($to, $subject, $message, $headers);
if ($ok) {
echo "

Mail sent! Yay PHP!

";
} else {
echo "

Mail could not be sent. Sorry!

";
}
?>

se volete prelevare il codice con cut and paste da questa pagina (nella vista "sorgente" del vostro browser) dovrete ripristinare le parentesi acute aperta e chiusa all'inizio e alla fine dello script (al posto, ovviamente, della codifica &xx; ed eliminare tutti i <br> a fine riga.

Grazie a Kevin Yonk!

Traduzione di un sito Web

La "rete" è notoriamente "global" mentre il vostro sito è probabilmente in italiano. A meno che non sia di interesse puramente locale l'esigenza di tradurlo in altre lingue (almeno in inglese) esite. Come fare?

Esistono varie soluzioni al riguardo. La prima e più costosa è quella di affidarsi a traduttori professionali e, praticamente, sviluppare tante copie del sito quante le lingue supplementari volute. i traduttori professionali, a loro volta, utilizzano oggi sistemi di traduzione semiautomatica, ma la revisione finale della traduzione è sempre affidata ad un essere umano  competente.

La seconda soluzione è quella di operare la "duplicazione tradotta" delle pagine del sito in proprio con l'ausilio di un programma di tarduzione automatica, di cui alcuni sono a pagamento, come nel caso di Babylon. Sconsiglio questa soluzione perché oltre a non essere rimasto soddisfatto di Babylon (costoso e troppa invadenza commerciale, risultati discutibili), lo stesso livello di risultato si può ottenere con i vari sistemi di traduzione gratuiti disponibili su internet.

La terza soluzione, che alla fine rsulta la preferibile, è quella di utilizzare il servizio gratuito offerto da Google. Tale soluzione consiste nel "cucire" sulle pagine che si desidera vengano tradotte "al volo" nel nostro sito una stringa di codice che Google fornisce creando un account sul sito https://www.translate.google.com . Al visitatore del sito comparirà una icona-bandierina corrispondente alla lingua in cui si desidera tradurre "al volo" la pagina in mostra.

Questa ultima soluzione, oltre ad essere gratuita, ha il vantaggio di consentire a voi, amici, collaboratori accreditati e financo visitatori (se lo volete) di contribuire a una sorta di "dizionario di sito" capace di memorizzare parole o frasi personalizzate che verranno utilizzate dal sistema per tradurre le vostre pagine. Non male ...

 

Google Analytics

1 - Preliminari

Google Analytics è solo uno dei servizi messi a disposizione da Google per il Webmaster che voglia gestire i propri siti. Per "gestire" non intendiamo la creazione o l'aggiornamento del sito, quanto piuttosto controllare in che misura esso sia "popolare" sulla rete, quanto sia visitato, quali pagine siano visitate più di altre, quali contatti si traducano in qualcosa (economico o altro) che realizzi i fini per cui il sito è stato realizzato.
G.A. è quindi un insieme di strumenti che consente di "misurare" in qualche modo, attraverso tutta una serie di evidenze, l'efficacia del sito rispetto agli obiettivi che ci siamo proposti ed a individuare le possibili vie di miglioramento se la situazione non soddisfa, ovvero di mantenimento dei risultati conseguiti in caso di situazione soddisfacente. In particolare, G.A. NON è uno strumento per ottimizzare la visibilità del sito sulla rete, argomento questo per cui Google mette a disposizione altri strumenti (per lo più a pagamento) e che viene trattato in altro articolo di questa serie.

Tutto inizia accedendo a www.google.com/analytics/. Questa home page del servizio consente di creare un account del webmaster (o di chi per lui) ovvero di accedere con id e password in caso di account già esistente. Come si vedrà, da un solo account sarà possibile gestire tutti i siti che desideriamo. Sarà anche possibile affidare ad altri l'accesso a detto account.
Una volta creato l'account, è possibile indicare il primo dei siti che desideriamo monitorizzare. La prima operazione che occorre quindi effettuare è quella di "copiare" il codice specifico relativo a detto sito e "incollarlo" in tutte le pagine che vogliamo siano oggetto di controllo da parte di G.A. Tale codice deve essere incollato nella sezione della pagina, suggeriamo prima del tag di chiusura della sezione . Lo script deve comparire in ogni pagina che desideriamo monitorizzare.
Un esempio di tale codice è il seguente:


< script type="text/javascript"> var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-16694969-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
>

 

Nello script di cui sopra la parte personalizzata specificamente relativa al sito in questione è 'UA-16694969-1'. Questa costante identifica l'account creato e il suffisso -1 il primo dei siti che è possibile gestire con l'account in questione. Ovviamente non utilizzate il codice di cui sopra, ma quello specificamente generato per voi da G.A.

2 - Definizione del profilo di gestione

Una volta effettuato questo primo passo è possibile provvedere a definire il profilo di gestione per questo primo sito. Se non viene definito un profilo di gestione specifico, G.A. opererà secondo un profilo di gestione standard di default. Nulla di male. La definizione del profilo di gestione ci consentirà, tuttavia, per alcune delle funzionalità e delle evidenze offerte da GA, di personalizzare alcuni dei parametri del profilo, ottenendo, in tal modo, "viste" personalizzate della situazione. Si potrebbe, ad esempio, avere evidenza del fatto che gli utenti hanno scaricato uno specifico documento, o che hanno visitato una specifica pagina e così via.
L'utente dell'account deve in ogni caso indicare la finestra di tempo relativamente alla quale desidera vengano evidenziati i risultati del monitoraggio.

Le informazioni che G.A. raccoglie e che in parte possono essere personalizzate sono catalogabili nelle seguenti cinque categorie:

 

  1. Visitatori: provenienza, permanenza, cosa hanno visitato, quanto hanno sostato nelle varie pagine, visitatori di ritorno;
  2. Fonti di traffico: accessi diretti, ovvero tramite motori, altri siti etc.
  3. Contenuti: pagine maggiormente visitate, percorsi, download;
  4. Obiettivi: questa è la parte personalizzabile del profilo. Gli obiettivi possono essere specifiche pagine, download, e altro. Il sistema consente all'utente di pedefinire, come personalizzazione dello specifico profilo, fino a cinque obiettivi tra quelli previsti per ciascuno dei quattro gruppi al massimo possibili. A ciascun obiettivo è possibile associare un nome. E' possibile anche indicare un percorso ideale di pagine che si vorrebbe fosse seguito dal visitatore del sito.
  5. e-commerce: nel caso si tratti di un sito di e-commerce, in questa categoria, personalizzabile anch'essa, vengono indicati, ad esempio, i prodotti maggiormente venduti o visitati.


3 - Evidenze
Le evidenze rese disponibli da G.A. sono tutte individuabili e comprensibili cliccando i diversi link che compaiono sulla pagina cui si accede con le proprie credenziali e dopo aver cliccato su uno specifico sito. Forniamo tuttavia alcune indicazioni:

  • a) Informazioni relative alle fonti di traffico, distinte in traffico diretto (il visitatore ha inserito la URL del sito nel proprio browser), siti di provenienza, motori di ricerca, parole chiave (conquistate naturalmente o con Adwords: su questo argomento si veda altro apposito articolo su questo sito);
  • b) dati relativi alle parole chiave. Le parole chiave, come è noto, sono inserite all'inizio di ciascuna pagina, in appositi meta-tag. La loro scelta costituisce un aspetto fondamentale nello sforzo di ottimizzazione da effettuare per promuovere la visibilità del sito sulla rete (SEO - Search Engine optimisation). Anche di questo aspetto si parla in un apposito articolo in questo sito. Per quanto concerne G.A., questo servizio espone tutta una serie di evidenze per valutare quali parole chiavi sono state scelte opportunamente e quali conviene abbandonare e/o sostituire.
  • c) Informazioni relative al comportamento dei visitatori: da quale area geografica provengono, visitatori nuovi/di ritorno, browser e lingue dei visitatori;