Google fa un grosso passo avanti con Docs: 1 gigabyte di spazio e upload di file di qualsiasi tipo, non solo di documenti.

Beh… finalmente! Io, che uso sempre Google Docs per appuntarmi idee e articoli per questo blog, ne sentivo l’esigenza. Perché? Semplicemente per avere tutto in un posto ed evitare di aprire più siti o utilizzare pendrive che spesso si dimenticano.

Alcuni dettagli

Per tutti gli utenti. Oltre al servizio online, l’upload è stato implementato anche sulla suite stand-alone.

Estensione dello spazio. Lo spazio fornito gratuitamente è pari a 1 gigabyte. Tuttavia è possibile esternderlo alla modica cifra di $0,25 all’anno per gigabyte.

Dimensione dei file. Potranno essere caricati solo file inferiori a 250 mebagbyte.

Condivisione. Così come succede già per i documenti, i file potranno essere condivisi con tutti gli utenti di Docs. Invece non è ancora presente una funzionalità per condividere documenti e altri file su siti di terze parti, ma il responsabile precisa che questa possibilità non è stata scartata del tutto.

Lavorare con i file. Naturalmente non sarà possibile lavorare su tutti i tipi di file caricati con Docs. Questo attualmente è possibile solo con i PDF, i file della suite Microsoft Office e i formati nativi di Docs. Per tutti gli altri tipi di file sarà necessario scaricarli sul proprio pc e lavorarci su con l’applicazione necessaria.

Niente “cloud”. Il responsabile del progetto avverte che non è un disco virtuale, in quanto non c’é un client con il compito di aiutarti a sincronizzare i terabyte. A questo proposito invito a cercare i rumori e le indiscrezioni sul progetto di Google chiamato GDrive.

Vijay Bangaru, Google Docs product manager

this is a natural extension and progression of what we’ve been doing with Google Docs

the idea behind this feature is that it’s really an opportunity for Google to invest in cloud storage and provide value added services to its users around sharing files, uploading files and being able to collaborate and search on all of that content

“Questa è una naturale estensione e miglioramento a dimostrare quanto è stato fatto con Google Docs. L’idea dietro a questa funzionalità consiste nel fatto che per Google è una grossa opportunità investire nel cloud storage fornendo ricchi servizi riguardo la condivisione e l’upload di file, per incentivare la collaborazione e la ricerca su questi contenuti.”

Fonti

http://www.pcworld.com/article/186738/google_docs_to_allow_storage_of_any_type_of_file.html

http://www.readwriteweb.com/enterprise/2010/01/google-docs-now-for-storage-as.php

Per me questa è una bella novità… Credo che mi aiuterà molto e migliorerà la mia esperienza con Google Docs. Tu che ne pensi?

Ogni applicazione viene progettata e sviluppata con uno o più sistemi di autenticazione e sicurezza. Pensiamo al login di un sito web, al controllo degli utenti o alla gestione dei permessi.

L’autenticazione HTTP permette di implementare un controllo degli accessi basato su username e password, semplice da realizzare, stabile e sicuro.

PRO. Questo tipo di autenticazione offre un più rigido controllo sugli utenti e una maggiore stabilità rispetto al classico login. Il controllo degli utenti è molto rigido in quanto è l’amministratore a inserire nuove coppie di username e password, al contrario della procedura di registrazione durante la quale sono gli utenti a inserire i dati. Riguardo la stabilità, il discorso è molto simile a quello che si fa con i cms: un modulo Apache scritto e controllato da centinaia di sviluppatori è assai meno probabile che fallisca rispetto alle procedure di login scritte da un team ristretto di programmatori.

CONTRO. Il primo limite sta proprio nel fatto che per inserire un nuovo utente bisogna andare a scrivere “a mano” i dati per l’autenticazione, problema comunque risolvibile con uno script che accede al file dei dati per l’autenticazione, nel caso si voglia una procedura di registrazione automatizzata. Un altro limite è la difficoltà di gestire l’utente connesso, ad esempio, per avere un’area personale o per memorizzare i prodotti del carrello, tutte cose facilmente realizzabili nel caso di un login con database.

AUTENTICAZIONE HTTP con PHP » http://php.net/manual/en/features.http-auth.php

ATTENZIONE. Potrebbe succedere che in locale l’autenticazione HTTP non funzioni. Invece di perdere tempo inutilmente provala direttamente sul tuo spazio web, magari in una directory di test. A me è successo così! Per saperne di più segui questa discussione sul forum di html.it che, tutt’ora non ha risposte .

SOMMARIO

Un buon motivo per l’autenticazione HTTP

Una delle tante situazioni che ti dovrebbe far capire il senso dell’autenticazione HTTP.

Le diverse autenticazioni HTTP

La differenza fra le diverse autenticazioni.

Un esempio veloce

Esempio facile da capire per introdurre l’argomento.

Le direttive Apache

Una panoramica sulle direttive Apache che servono per implementare l’autenticazione HTTP, in modo da comprendere meglio cosa stiamo facendo.

Ottenere il percorso assoluto

Conoscere il percorso assoluto del server è necessario per impostare correttamente il file .htaccess.

Il file delle password: .htpasswd

Il file che contiene le coppie “username:password”.

Il file dei gruppi di utenti: .htgroup

Il file (opzionale) in cui impostare i gruppi di utenti.

Autenticazione HTTP in pratica

Come proteggere i file
Come proteggere una directory
Una nota sulle prestazioni
Creare eccezioni

Personalizza la pagina di errore “401 Authorization Required”

Come personalizzare la pagina di errore che appare quando non si inseriscono i dati corretti.

Note sull’articolo

Data la complessità degli argomenti trattati cerco di dare il giusto supporto anche agli sviluppatori che si sono avvicinati da poco all’uso del server Apache. Infatti per buona parte dell’articolo vengono fornite tutte quelle conoscenze di base richieste per una buona comprensione dell’autenticazione HTTP al fine di evitare un semplice copia-incolla che difficilmente porterà ai risultati sperati.

Se le direttive e il funzionamento del server Apache ti sono familiari puoi benissimo andare direttamente a vedere come implementare l’autenticazione HTTP iniziando a leggere dal paragrafo “Autenticazione HTTP in pratica“.

Un buon motivo per l’autenticazione HTTP

Pensa a un grosso sito ecommerce. Questo sarà diviso almeno in 4 aree: publica, utenti, gestione, amministrazione.

Nell’area pubblica potranno accedervi tutti, nell’area utenti solo gli utenti registrati, nell’area gestione solo gli addetti alle normali mansioni, come la moderazione dei commenti sui prodotti, e nell’area amministrazione solo pochi amministratori che, tra gli altri, avranno il compito di aggiungere nuovi amministratori e gestirne i permessi. Data la delicatezza dell’area amministrazione è necessario proteggerla il più possibile.

Ed è qui che entra in gioco l’autenticazione HTTP, che verrà implementata per creare una ulteriore barriera prima di accedere alla pagina login. In questo modo per accedere all’area amministrazione sarà necessario inserire due diverse coppie di username e password, con il conseguente rafforzamento della sicurezza.

Naturalmente, questo è solo uno dei tanti motivi per sfruttare l’autenticazione HTTP per rendere più sicuro il proprio sito.

Le diverse autenticazioni HTTP

Su un server Apache si possono implementare almeno 3 tipi di autenticazione HTTP.

Base. Utilizza dei file di testo per l’autenticazione. Il modulo necessario è mod_auth.c, ed è considerato uno dei moduli di base. In ogni caso dai un’occhiata ai servizi del tuo provider oppure alle informazioni php, con la funzione phpinfo().

DBM. Utilizza dei file di tipo DBM per l’elenco di username e password. Il modulo necessario è mod_auth_dbm.c.

Digest. Basata sull’algoritmo di hashing md5. Il modulo necessario è mod_auth_digest.c. Questo modulo è ancora in fase di test e alcune funzioni non sono ancora correttamente implementate.

Un esempio veloce

Per darti l’idea di quello che dobbiamo fare ti faccio un esempio veloce.

File .htaccess

AuthType Basic
AuthName "Restricted Files" #messaggio personalizzato
AuthUserFile /percorso-assoluto/.htpasswd
Require valid-user

N.B. non ho scritto il vero percorso assoluto per questioni di sicurezza. Credo che il mio provider non vorrebbe che lo sventolassi in giro!

File .htpasswd

admin:86dGPOHvD26i2
admin2:165491czyZTp2
admin3:29p7hc19vPpm6

dove username e password della prima riga sono “admin”.

Demo

Se non ti basta lo screenshot puoi provarlo andando su http://test.jblog.it/http_auth_base/ (username e password sono entrambe “admin”).

Le direttive Apache

Le direttive principali per implementare l’autenticazione HTTP.

AuthType. Imposta il tipo di autenticazione: basic o digest.

AuthName. Messaggio o descrizione personalizzata; utile per dare indicazioni.

AuthUserFile. File degli username e delle password, generalmente chiamato .htpasswd.

AuthGroupFile. File dei gruppi di utenti.

Require. Filtra gli utenti abilitati all’accesso. Generalmente si utilizza valid-user per indicare che l’accesso è permesso a tutti gli utenti validi, ad esempio quelli che inseriscono credenziali valide. Alternativamente si possono utilizzare user e group seguiti rispettivamente da una lista di utenti o di gruppi, separati da spazi.

Satisfy. Gestisce la politica degli accessi. Funziona solo se sono utilizzate contemporaneamente le direttive Allow e Require. Con All fa in modo che entrambe le condizioni siano verificate per convalidare l’accesso, invece con Any basta che sia verificata solo una delle condizioni.

Ottenere il percorso assoluto

Per collegare il file delle password (.htpasswd) e dei gruppi al file .htaccess non ci si può limitare al percorso relativo, ma è necessario il percorso assoluto. Per internderci, il percorso assoluto è quello che sul nostro pc inizia con “C:/…”.

Uno dei modi per ottenere il percorso assoluto del server è quello di creare ed eseguire il seguente script php:

<?php
   echo $_SERVER['DOCUMENT_ROOT'];
?>

dove la variabile $_SERVER['DOCUMENT_ROOT'] contiene il percorso assoluto della directory in cui si trovano i file del tuo sito.

Se non sei pratico/a di php segui queste istruzioni

1. Rinomina lo script in “doc_root.php”
2. Caricalo nella directory principale del tuo sito
3. Eseguilo scrivendo http://www.tuosito.com/doc_root.php
4. Copia e conserva il testo fornito in output, cioè il percorso assoluto

ATTENZIONE. Ti accorgerai anche tu che il percorso ottenuto dallo script php non è completo. Basterà guardare alla fine per osservare l’assenza del nome della directory in cui si trova il file .htpasswd. Quasi sempre è necessario completare il percorso assoluto scrivendo manualmente la directory in cui si trova il file .htpasswd. Un po’ di pazienza e tutto funzionerà a dovere!

Il file delle password: .htpasswd

Il file .htpasswd deve contenere la lista di username e password che verranno utilizzati per l’autenticazione (vedi l’esempio in basso).

Il nome del file. Il file dei dati di autenticazione puoi rinominarlo a tuo piacimento; non è obbligatorio chiamarlo “.htpasswd”. Tuttavia è consigliabile rispettare il modello “.htxxxxxx”, cioè farlo iniziare sempre con “.ht” cambiando solo il resto. Esempi validi: “.htpassword”, “.ht_dati_accesso”.

Criptare le password. Al contrario dell’username, che viene scritto “in chiaro”, la password deve essere criptata. Fortunatamente su internet si possono trovare molti siti che si occupano non solo di criptare la password ma anche di impostare il file .htpasswd.

Strumenti utili per .htpasswd

http://www.htaccesstools.com/htpasswd-generator/
http://www.wmtips.com/tools/htpasswd-generator/
http://www.4webhelp.net/us/password.php
http://www.clockwatchers.com/htaccess_tool.html
http://htmlfixit.com/cgi-bin/tools/htaccess/index.pl
http://tools.dynamicdrive.com/password/
http://www.softspecialist.com/i/htaccess-password-generator-htpasswd-encryption-tool.htm

Per iniziare. Se non ti va o non riesci a utilizzare questi tools puoi iniziare subito con questi dati: admin:86dGPOHvD26i2, dove username e password sono entrambi admin.

Scrivere il file .htpasswd. Per creare un file .htpasswd è necessario seguire solo 2 semplici regole:

1. username e password devono essere separate dai due punti “:”
2. inserire una coppia <username>:<password> per riga

Esempio di file .htpasswd

admin:86dGPOHvD26i2
admin2:165491czyZTp2
admin3:29p7hc19vPpm6

Per una maggior sicurezza sulla documentazione Apache viene consigliato di inserire i file .htpasswd all’esterno della directory principale del sito in modo da renderli totalmente inaccessibili dall’esterno, ad esempio tramite browser. Purtroppo non sempre è possibile inserire dei file all’esterno della directory principale, soprattutto se hai un hosting di base.

Il file dei gruppi di utenti: .htgroup

Il file dei gruppi di utenti deve contenere l’elenco dei gruppi in corrispondenza dei quali si scrive la lista di username appartenenti (vedi l’esempio in basso). Questo file è direttamente collegato al file .htpasswd in quanto gli username appartenenti a ciascun gruppo sono proprio quelli scritti nel file .htpasswd.

Il nome del file. Il file dei dati di autenticazione puoi rinominarlo a tuo piacimento. Tuttavia è consigliabile rispettare il modello “.htxxxxxx”, cioè farlo iniziare sempre con “.ht” cambiando solo il resto. Esempi validi: “.htgruppi”, “.ht_lista_gruppi”. Ho preferito chiamarlo “.htgroup” per avere una maggior chiarezza nella scrittura dell’articolo.

A cosa serve? Dividere gli utenti per gruppi è necessario, ad esempio, nel caso in cui si hanno diverse aree alle quali devono accedere diversi gruppi di utenti. Inoltre è anche comodo per la direttiva Require perché invece di inserire tutti gli username si evita di “sporcare” eccessivamente il file .htaccess limitandosi a scrivere pochi gruppi.

Esempio

Nota la “pulizia” della versione 2 del file .htaccess rispetto alla versione 1. Probabilmente non ti sembrerà niente di così rivoluzionario… Pensa in grande! Pensa a una lista di 30 username per ogni gruppo!

File .htpasswd (valido per le due versioni del file .htaccess)

admin:86dGPOHvD26i2
admin2:165491czyZTp2
admin3:29p7hc19vPpm6
admin4:86dGPOHvD26i2
admin5:165491czyZTp2
admin6:29p7hc19vPpm6
admin7:86dGPOHvD26i2
admin8:165491czyZTp2
admin9:29p7hc19vPpm6

File .htaccess [versione 1] (senza dividere gli utenti in gruppi)

<Files index_gruppo1.php>
   AuthType Basic
   AuthName "Fai parte del gruppo 1?"
   AuthUserFile /percorso_assoluto/.htpasswd
   AuthGroupFile /percorso_assoluto/.htgroup
   Require user admin admin2 admin3 admin4 admin5
</Files>

<Files index_gruppo2.php>
   AuthType Basic
   AuthName "Fai parte del gruppo 2?"
   AuthUserFile /percorso_assoluto/.htpasswd
   AuthGroupFile /percorso_assoluto/.htgroup
   Require user admin6 admin7 admin8 admin9
</Files>

File .htaccess [versione 2] (utenti suddivisi in gruppi)

<Files index_gruppo1.php>
   AuthType Basic
   AuthName "Fai parte del gruppo 1?"
   AuthUserFile /percorso_assoluto/.htpasswd
   AuthGroupFile /percorso_assoluto/.htgroup
   Require group gruppo1
</Files>

<Files index_gruppo2.php>
   AuthType Basic
   AuthName "Fai parte del gruppo 2?"
   AuthUserFile /percorso_assoluto/.htpasswd
   AuthGroupFile /percorso_assoluto/.htgroup
   Require group gruppo2
</Files>

.htgroup (per il file .htaccess versione 2)

gruppo1: admin admin2 admin3 admin4 admin5
gruppo2: admin6 admin7 admin8 admin9

Demo. Per farti capire meglio di cosa sto parlando vai su http://test.jblog.it/http_auth_group/.

Per una maggior sicurezza sulla documentazione Apache viene consigliato di inserire i file .htgroup all’esterno della directory principale del sito in modo da renderli totalmente inaccessibili dall’esterno, ad esempio tramite browser. Purtroppo non sempre è possibile inserire dei file all’esterno della directory principale, soprattutto se hai un hosting di base.

Autenticazione HTTP in pratica

Come proteggere i file

Per proteggere uno o più file si possono utilizzare le direttive <Files> o <FilesMatch>.

La seconda è da preferire quando i file da proteggere si devono riconoscere tramite regex. In pratica, la direttiva <FilesMatch> deve essere utilizzata quando si devono proteggere più file con gli stessi criteri oppure quando non si è sicuri del nome, ad esempio quando non si sa se l’estensione è scritta in minuscolo o in maiuscolo.

La direttiva <Files> è da preferire solo quando il file è uno solo e si è sicuri del nome.

Uso della direttiva <FilesMatch>

# 1) protegge i file secret1.php e secret2.php
# 2) [pP][hH][pP] perchè non si è sicuri di come è scritta l'estensione
<FilesMatch "(secret1|secret2)\.[pP][hH][pP]">
   AuthType Basic
   AuthName "Accesso alle pagine segrete..."
   AuthUserFile /percorso_assoluto/.htpasswd
   Require valid-user
</FilesMatch>

Uso della direttiva <Files>

<Files secret1.php>
   AuthType Basic
   AuthName "Accesso alla pagina segreta..."
   AuthUserFile /percorso_assoluto/.htpasswd
   Require valid-user
</Files>

<Files secret2.php>
   AuthType Basic
   AuthName "Accesso alla pagina segreta..."
   AuthUserFile /percorso_assoluto/.htpasswd
   Require valid-user
</Files>

Come proteggere una directory

Teoricamente si dovrebbe agire come per i file, utilizzando però le direttive <Directory> e <DirectoryMatch>.

Problema. A meno che tu non abbia accesso al file di configurazione del server o del virtual host, non è possibile farlo in quanto le direttive <Directory> e <DirectoryMatch> NON possono essere utilizzate nel file .htaccess. A questo proposito vorrei ringraziare Enoa del forum di html.it.

Soluzione. Inserire un file .htaccess direttamente nelle directory da proteggere. Tutto qui! Ricordati di non inserire i file .htpasswd e .htgroup nella directory da proteggere.

Esempio di file .htaccess da inserire nella directory da proteggere

AuthType Basic
AuthName "Accesso alla Directory XXX..."
AuthUserFile /percorso_assoluto/.htpasswd
Require valid-user

Una nota sulle prestazioni

Per sua natura l’implementazione dell’autenticazione HTTP comporta un leggero peggioramento delle prestazioni. In pratica, ogni volta che si accede a dei file protetti direttamente o indirettamente (cioè all’interno di una directory protetta) il server controlla se la richiesta HTTP è autorizzata ad essere soddisfatta. In altre parole, ogni – e sottolineo ogni – richiesta HTTP è soggetta a un controllo da parte del server per verificare se questa possiede le autorizzazioni necessarie.

Quindi, prima di implementare un’autenticazione HTTP chiediti quanto influirà questo, seppur leggero, abbassamento di prestazioni.

Creare eccezioni

Nonostante ci si autentichi con successo potrebbero sorgere altri problemi. Gli script utilizzati con tecniche Ajax oppure i file XML richiamati da animazioni Flash potrebbero non essere letti in quanto la richiesta di questi file non proverrebbe dal browser con cui ci si è autenticati e il server Apache potrebbe considerarla come una richiesta non autorizzata.

Un’altra situazione per la quale è necessario creare delle eccezioni si ha quando ci sono dei file o sottodirectory ad accesso libero in una directory protetta.

Soluzione veloce

Se il sito è stato sviluppato completamente da te, non avrai grosse difficoltà ad applicare questa soluzione: ti basterà solo modificare qualche riga di codice.

Inserire i file ad accesso libero in una sottodirectory da “liberare” dalla protezione dell’autenticazione HTTP.

1. Crea una sottodirectory
2. Inserisci tutti i file e le directory da “liberare”
3. Inserisci in questa sottodirectory un nuovo file .htaccess con il seguente codice

Allow from All
Satisfy Any

Queste due righe disattivano l’inserimento dei dati per l’autenticazione. Con Satisfy Any si stabilisce che è sufficiente verificare una delle due condizioni tra Require (che si trova nel file .htaccess della directory superiore) e Allow. Quindi, poiché con Allow from All diciamo ad server che l’accesso è “permesso a tutti” una delle due direttive è sempre verificata.

Soluzione complessa

Se il sito è basato su un CMS o comunque non è stato sviluppato da te non è possibile spostare file e directory in quanto non sapremmo dove effettuare le modifiche al codice. Questa soluzione infatti permette di “liberare” file e directory lasciandoli tutti al loro posto.

Liberare una directory. Come per la soluzione veloce, basta inserire al suo interno un nuovo file .htaccess con il seguente codice:

Allow from All
Satisfy Any

Liberare uno o più file. Utilizzando le direttive <Files> o <FilesMatch> è possibile liberare rispettivamente uno o più files. Utilizzare <Files> per liberare dei file in base al nome esatto mentre <FilesMatch> per liberare dei file riconoscendoli tramite espressioni regolari.

Il file index.php. Generalmente se si accede a una directory senza specificare un file verremo portati sul file index.php o index.html. Se liberiamo il file index.php della directory contenente il file .htaccess principale (con le varie istruzioni per l’autenticazione HTTP) questo è soggetto a un doppio comportamento. Se accediamo alla directory (senza specificare nessun file), cioè scrivendo nel browser “http://miosito.com/directory_protetta/” ci verranno chiesti i dati per l’autenticazione. Invece se accediamo al file index.php (specificandolo nell’indirizzo), cioè scrivendo nel browser “http://miosito.com/directory_protetta/index.php” non ci vengono chiesti i dati per l’autenticazione. Non credo sia possibile risolvere questo problema.

Demo. Prova le eccezioni create per index.php e free_access.php con questo script: http://test.jblog.it/http_auth_exception/index.php. Prova anche ad accedere a http://test.jblog.it/http_auth_exception/ in cui, a differenza del primo indirizzo, ti verranno chiesti i dati per l’autenticazione.

Esempio

AuthType Basic
AuthName "Accesso alla Directory..."
AuthUserFile /percorso_assoluto/.htpasswd
Require valid-user

# Libera il file index.php
<Files index.php>
   Allow from All
   Satisfy Any
</Files>

# Libera il file free_access.php
<Files free_access.php>
   Allow from All
   Satisfy Any
</Files>
# Libera tutti i file .xml, .css e .js
<FilesMatch "\.(xml|css|js)$">
   Allow from All
   Satisfy Any
</FilesMatch>

# Libera i file "page1.php" e "page2.php"
<FilesMatch "^(page1\.php|page2\.php)$">
   Allow from All
   Satisfy Any
</FilesMatch>

Personalizza la pagina di errore “401 Authorization Required”

Come ciliegina sulla torta impostiamo una pagina personalizzata per l’errore 401 che si verifica quando non si inseriscono dei dati di autenticazione corretti.

Pagina 401 di default

Codice da inserire nel file .htaccess principale

ErrorDocument 401 /my_401.html

La mia pagina 401 personalizzata

Demo. Prova la pagina personalizzata su http://test.jblog.it/http_auth_errordoc/ (clicca su “annulla”).

Suggerimenti? Bisogno d’aiuto?

Sto imparando a mie spese che su Apache anche le cose più semplici non sono così immediate, ma bisogna sempre sbatterci un po’ la testa!

Se hai dei suggerimenti per una miglior comprensione dell’articolo, ti serve qualche chiarimento o non riesci a venire a capo di un particolare problema non esitare a contattarmi. Sarà l’occasione per imparare qualcosa di nuovo!

Crediti

Apache HTTP Server – Core » http://httpd.apache.org/docs/2.0/mod/core.html

Apache HTTP Server – mod_auth » http://httpd.apache.org/docs/2.0/mod/mod_auth.html

Apache HTTP Server – Authentication, Authorization and Access Control » http://httpd.apache.org/docs/2.0/howto/auth.html

Foto | NYkette » http://newyorkette.com/2006/03/08/a-bouncer-on-bouncers/

Dal blog ufficiale di Twitter arriva una bella notizia: da oggi Twitter supporta la lingua italiana! Gli autori del blog:

siamo emozionati perché oggi con il lancio della versione italiana del nostro sito diventiamo ancora di più una piattaforma di comunicazione globale. Come sempre, desideriamo ringraziare tutti i traduttori che hanno partecipato al progetto e che ci hanno mostrato la loro bravura.

Ora che le conversazioni su Twitter si arricchiscono di punti di vista sempre più diversificati a livello globale, il network di informazioni continuerà a crescere in ogni angolo e fessura del pianeta. Più eventi saranno condivisi, più conoscenza e consapevolezza si diffonderà e i milioni di persone che alimentano Twitter influenzeranno altri milioni di persone con i loro tweet.

Hai mai consigliato a qualcuno di iscriversi su Twitter?

Io si, e le risposte più comuni sono “eh…ma è tutto in inglese, non lo capisco” oppure “su Twitter parlano tutti in inglese!”. Risposte di questo tipo le ho avute soprattutto da amici che non conoscono bene l’inglese oppure che non hanno un blog e, probabilmente, non ne sentono (ancora) l’esigenza.

Il 2010 sarà l’anno di Twitter?

Sono convinto che gli italiani non abbiano ancora capito il senso di Twitter e la differenza dai comuni social network. Negli ultimi mesi di quest’anno ci si attendeva un’esplosione di Twitter che non c’è stata, forse proprio a causa del mancato supporto alla lingua italiana. (In effetti Facebook esplose proprio quando venne tradotto in italiano…)

Twitter mi piace. Mi è sempre piaciuto, fin dall’inizio. Speriamo che la lingua italiana favorisca l’iscrizione degli utenti italiani e i tweet in italiano.

Altrimenti ci toccherà tweettare in inglese…tra italiani!

E da un po’ di tempo che si sente parlare di aggiornamenti di interfaccia da parte di Google, e ancora di più dei suoi interventi riguardo la ricerca real-time (hai presente il progetto “Google Caffeine”?).

Beh… tutto ciò si sta concretizzando!

Real-Time Search

Google, sul proprio canale Youtube, ha pubblicato un video intitolato “Real Time Search” in cui vengono illustrati i significativi cambiamenti del motore di ricerca.

Il modo in cui Google supporterà la ricerca in tempo reale consiste nel fatto che nelle SERP, oltre ai consueti risultati, vedremo una piccola area “animata” in cui ci verranno forniti dei link in tempo reale pescati da Twitter, Yahoo answers, siti di news, servizi web, ecc.

Google Adsense: nuova interfaccia

Questa sera mi è arrivata un’email:

Nuova interfaccia disponibile per il suo account AdSense

Sono stato scelto come beta-tester per la nuova interfaccia di adsense! Certo, se hanno scelto me chissà quanti ne avranno scelti: diciamo che, per ovvi motivi, non entro spesso nel mio account…

I cambiamenti di grafica da parte di Google erano nell’aria. Riguardo adsense parlare solo di grafica è riduttivo; infatti sono state apportate delle modifiche anche all’interfaccia. Non sono un esperto di adsense e non lo conosco a fondo, quindi ho notato solo le modifiche nelle pagine più classiche: home, unità pubblicitarie, creazione di una nuova unità pubblicitaria.

Home » panoramica

Sono stati aggiunti dei grafici simili a quelli di Google Analytics, vengono fornite ulteriori informazioni e in maniera più chiara.

I nuovi grafici

Ecco i nuovi grafici al lavoro nella pagina “rapporti sul rendimento”:

Creazione di una nuova unità pubblicitaria

Il processo di creazione di una nuova unità pubblicitaria è stato ridotto a 2 fasi anziché 3: prima bisognava selezionare il tipo di annuncio e in seguito impostarne l’aspetto, mentre ora il tipo di annuncio è selezionabile nella stessa pagina in cui si imposta l’aspetto. Inoltre, l’anteprima è stata spostata lateralmente riducendo l’altezza della pagina. Devo dire che ho particolarmente apprezzato le modifiche apportate a questa pagina.

Per sapere di più

Sul blog ufficiale di Google AdSense: http://it-adsense.blogspot.com/2009/11/una-nuova-interfaccia-di-adsense-ora-in.html

Durante la realizzazione di un sito arriva sempre il momento in cui è necessario utilizzare dei pacchetti di icone, ad esempio per linkare il profilo sui vari social network o per elencare i metodi di pagamento accettati.

Se stai realizzando un cms la scelta del giusto pacchetto di icone può addirittura diventare un problema. Infatti, poiché un generico cms ha molte funzioni alle quali associare l’icona adatta, a meno che tu non voglia prenderle a caso da google immagini, hai bisogno di pacchetti completi in grado di soddisfare le esigenze attuali (e future) del tuo cms.

Il fatto è che non sempre hai il tempo e la voglia di correre su internet per cercare l’icona adatta, anche perché sarebbe difficile trovarne una allineata allo stile di quelle che stai già utilizzando.

Quindi per non avere più preoccupazioni dai uno sguardo ai seguenti pacchetti di icone e scegli quelli più adatti alle tue esigenze!

Una panoramica dei pacchetti

I pacchetti veramente completi che ti eviteranno tutte le preoccupazioni sono:

• Fugue Icons, pacchetto completissimo
• FamFamFam Silk Icons, pacchetto completo anche se le icone sono meno della metà di quello precedente
• Social Network Icon Pack, icone di vari social network (alcuni non molto conosciuti)
• FamFamFam Flag Icons, le bandiere di tutti gli stati del mondo
• Chalkwork Payments, icone di varie carte di credito e metodi di pagamento

Per siti graficamente leggeri i 3 pacchetti seguenti hanno icone in bianco e nero (o scala di grigi), secondo me molto delicate e gradevoli:

• bwpx.icns
• Mini Icons 2
• Mini Pixel Icon Set v.1.2

Gli altri pacchetti per un motivo o per l’altro meritavano di essere segnalati.

Fugue Icons

Sia graficamente che per il gran numero di icone che contiene, questo è sicuramente il miglior pacchetto.

Sono in una doppia versione grafica (con e senza ombreggiatura) e il gran numero di icone permette di coprire molti ambiti.

Tuttavia, se non dovessero soddisfarti puoi sempre modificarle grazie ai file .psd inclusi nel pacchetto. Un consiglio: fatti un giro nei file .psd, esplora i livelli, guarda i vari elementi che compongono una singola icona… approfittane per imparare a disegnare le tue icone!

Dato che molte delle icone sono simili a quelle di sistemi operativi o famose applicazioni (es. microsoft word), ci sono concrete possibilità che gli utenti conoscano già la funzione associata, il ché fa guadagnare dei punticini in usabilità.

L’unica pecca che sento di segnalare sta nel fatto che, a differenza di altri pacchetti, non sono suddivise in directory e a volte è veramente dura trovare l’icona desiderata!

Url: http://www.pinvoke.com/
Numero di icone: 2360
Formati: psd, png
Dimensioni: 16 x 16
Licenza: http://creativecommons.org/licenses/by/3.0/

FamFamFam Silk Icons

Fortunatamente le icone di questo pacchetto si assomigliano a quelle precedenti, quindi, se non dovessi trovarne una potrai sempre cercarla nell’altro pacchetto (e viceversa).

Un po’ di tempo fa utilizzai queste icone e l’esperienza è stata molto positiva, grazie anche allo stile molto gradevole e ai colori non troppo forti.

Come il pacchetto precedente, il gran numero di icone permette di coprire molti ambiti e l’unica pecca sta nel fatto che, a differenza di altri pacchetti, non sono suddivise in directory ed è un po’ difficile sfogliarle.

Autore: Mark James
Url: http://www.famfamfam.com/lab/icons/silk/
Numero di icone: 1000
Formato: png
Dimensioni: 16 x 16
Licenza: http://creativecommons.org/licenses/by/3.0/

Led Icon Set v1.0

Graficamente tra le più belle, sono particolarmente indicate per applicazioni grafiche e di scrittura.

Autore: Aleksandr Kozmenko
Url: http://led24.de/iconset
Numero di icone: 512
Formato: png
Dimensioni: 16 x 16
Licenza: http://creativecommons.org/licenses/by-sa/3.0/

Splashy Icons

Abbastanza “piatte”, senza troppe ombreggiature e bordi ma con gradienti ben definiti.

Orientate per l’utilizzo in applicazioni “social” e multimediali.

Url: http://splashyfish.com/sketches/comments/splashy-icons-an-icon-library-for-prototyping/
Numero di icone: 512
Formati: png, MacOSx png
Dimensioni: 16 x 16

Flavour Icon set

Sono molto generiche: difficile stabilire in quali ambiti possano essere indispensabili.

Meritano di essere segnalate per la grafica molto curata ma soprattutto per la presenza di tutti i pulsanti della tastiera, a mio avviso difficili da trovare.

Autore: Oliver Twardowski
Url: http://www.smashingmagazine.com/2009/05/20/flavour-extended…
Numero di icone: 452
Formato: psd, png, MacOSx png
Dimensioni: 48 x 48
Licenza: uso personale e commerciale

Diagona Icons

Mi sembrano una specie di “evoluzione grafica” del pacchetto FamFamFam Silk Icons.

Secondo me sono molto adatte a blog e applicazioni “social”.

Url: http://www.pinvoke.com/
Numero di icone: 400
Formato: png
Dimensioni: 16 x 16, 10 x 10
Licenza: http://creativecommons.org/licenses/by-sa/3.0/

Mini Pixel Icons

Graficamente molto delicate, particolarmente adatte a siti di ecommerce data la presenza di carte di credito, borse, carrelli, stampanti, shopping bag, ecc.

Url: http://icondock.com/free/mini-pixel-icons
Numero di icone: 322
Formati: gif
Dimensioni: 14 x 14

Free Web Design Icon Set

Non hanno dei particolari campi di applicazione ma mi sono sembrate molto adatte per cms generici in quanto le icone presenti corrispondono alle più classiche funzioni di un cms, che secondo me sarebbero in grado di soddisfarle completamente.

Url: http://semlabs.co.uk/journal/free-web-design-icon-set
Numero di icone: 310
Formati: png
Dimensioni: 16 x 16

bwpx.icns

Questo pacchetto ha icone molto classiche, quindi adatte a cms generici.

Graficamente molto leggere ma originali. L’autore afferma che:

… ogni icona è stata accuratamente creata un pixel alla volta …

sarà vero? Quanta pazienza!

Autore: Paul Armstrong
Url: http://paularmstrongdesigns.com/projects/bwpx-icns/
Numero di icone: 260
Formati: gif
Dimensioni: 18 x 18
Licenza: http://creativecommons.org/licenses/by-sa/3.0/us/

Mini Icons 2

Graficamente semplici, leggere e molto gradevoli sono particolarmente adatte ad applicazioni di scrittura.

Url: http://www.brandspankingnew.net/archive/2006/12/hohoho.html
Numero di icone: 113
Formato: gif
Dimensioni: 10 x 10
Licenza: http://creativecommons.org/licenses/by-sa/2.5/
Note: al momento della scrittura dell’articolo il link per il download non è funzionante; quindi scaricare l’immagine del post.

Mini Pixel Icon Set v.1.2

Semplici e leggere dal punto di vista grafico; l’autore ha pensato bene di adattarle alla dimensione, variandone leggermente il disegno.

Particolarmente adatte a siti di ecommerce e cms generici.

Autore: Paul Olyslager
Url: http://www.paulolyslager.com/free-mini-pixel-web-icons
Numero di icone: 111
Formati: gif, png, psd
Dimensioni: 25 x 25 (dimensioni e stili variabili)
Note: due versioni di design (con e senza antialiasing).

Tango Icon Library

Questo pacchetto di icone nasce per GNOME, ambiente desktop per Linux.

Credo che non possano essere la soluzione definitiva poiché, essendo orientate a sistemi operativi e applicazioni desktop, non hanno molte di quelle icone ampiamente utilizzate nelle comuni applicazioni web.

Tuttavia, meritano di essere segnalate per lo stile interessante ed originale e per la presenza dei file vettoriali .svg.

Url: http://tango.freedesktop.org/Tango_Icon_Library
Numero di icone: 215
Formati: svg, png
Dimensioni: 32 x 32, 22 x 22, 16 x 16

Twotiny Icon Set

Icone molto generiche, adatte a vari ambiti e, benché non siano tantissime, potrebbero essere una buona soluzione.

Url: http://code.google.com/p/twotiny/
Numero di icone: 122
Formati: gif, MacOSx
Dimensioni: variabili, mediamente 16 x 16
Licenza: http://dev.perl.org/licenses/
Note: nella pagina ci sono due pacchetti; il link per il download relativo a questo pacchetto è “twotiny-plus-expansion.zip”.

Social Network Icon Pack

Questo è in assoluto il pacchetto di icone “social” più famoso.

Almeno per quattro ragioni:

• è completo di tutti i principali social network (molti pacchetti di questo tipo non avevano addirittura l’icona di last.fm!)
• viene aggiornato spesso (c’è già l’icona di Google Wave)
• a differenza della maggior parte delle icone “social” non hanno uno
  stile particolare e sono facilmente intonabili con qualsiasi grafica
• sono molto fedeli al logo originale (molti pacchetti le personalizzano troppo al punto da non essere riconoscibili!)

Url: http://www.komodomedia.com/blog/2009/06/social-network-icon-pack/
Numero di icone: 60
Formati: png, MacOSx png
Dimensioni: 32 x 32, 16 x 16
Licenza: http://creativecommons.org/licenses/by-sa/3.0/

Chalkwork Payments

In questo pacchetto sono presenti molte carte di credito, da quelle più famose a quelle più recenti o meno conosciute.

Di ogni icona, oltre all’icona base, ci sono 5 varianti (aggiungi, modifica, cancella, sicura, condividi).

Url: http://www.mezzoblue.com/icons/chalkwork/payments/
Numero di icone: 21
Formati: png, tif, gif, bmp, ico, icns
Dimensioni: 32 x 32, 24 x 24, 16 x 16
Licenza: http://www.mezzoblue.com/icons/license/

FamFamFam Flag Icons

Le bandiere di tutti gli stati del mondo in una grafica accettabile e sobria.

Autore: Mark James
Url: http://famfamfam.com/lab/icons/flags/
Numero di icone: 247
Formati: png, gif, MacOSx png, MacOSx gif
Dimensioni: 16 x 11

2s-space Emotions v2

Tante emoticons espressive, divertenti, alternative e ben disegnate. Mi ricordano tanto i cartoni animati giapponesi!

Autore: kirozeng
Url: http://kirozeng.deviantart.com/art/2s-space-Emotions-v2-72785912
Numero di icone: 20
Formati: png
Dimensioni: 256 x 256

PNGs Smilies for Wordpress

Questo pacchetto nasce con l’intento di rimpiazzare le emoticons di wordpress.

Rispetto a quelle di wordpress sono più morbide e gradevoli, anche se proprio per queste caratteristiche risulterebbero meno evidenti all’interno del testo. A te la scelta!

Autore: David Lanham
Url: http://vikiworks.com/2007/09/25/pngs-smilies-for-wordpress/
Numero di icone: 19
Formati: png
Dimensioni: 16 x 16
Licenza: http://creativecommons.org/licenses/by-sa/3.0/

Free smiles

Probabilmente starai pensando: “tutto qui?”. In realtà potremmo definirlo come il “framework degli emoticons“.

All’interno del pacchetto ci sono tutti i pezzi per realizzare le proprie emoticons.

Ho calcolato che con tutte le combinazioni dei diversi pezzi si avrebbero fino a 600 emoticons!

Se non ti va di utilizzare programmi di grafica puoi sempre andare su http://icojoy.com/lj/free/smiles/form.php, uno script in cui potrai comporre e scaricare l’emoticons in pochi secondi.

Url: http://www.icojoy.com/articles/18/
Numero di icone: 10
Formati: psd, png, gif, bmp
Dimensioni: 20 x 20

Problemi con i link?

Hai difficoltà a scaricare i pacchetti? Il sito o la pagina non è più disponibile? Nessun problema!

Io conservo tutti i pacchetti di questa lista. Quindi contattami e li metterò a disposizione per il download.

Perfavore, se qualche link non è più funzionante avvertimi e provvederò ad aggiornare l’articolo. Grazie.

Ti è piaciuta questa raccolta?
Conosci altri pacchetti che meritano di essere segnalati?

Su ImpressiveWebs viene segnalato un articolo su Boagworld intitolato The biggest ecommerce lies and how to avoid them in cui l’autore del blog, Paul Boag, risponde ai lettori con un commento audio. Ottima idea! E soprattutto molto originale…

Pensando un po’ più in grande, immagini la possibilità di commentare un post parlando anziché scrivendo?

Il lato tecnico

Credo che l’autore del blog abbia semplicemente registrato la sua voce, caricato il file e “embeddato” il player nel testo del suo commento.

Ma, se volessimo dare ai lettori del nostro blog la possibilità di commentare in formato audio gli interventi tecnici non sarebbero né semplici né immediati.

In pratica dovremmo:

• gestire il microfono
• avere uno script per la registrazione (per intenderci, una specie di player con i pulsanti “rec”, “play”, “stop”, ecc.)
• avere a che fare con codec e script per la conversione/compressione (non vorrai memorizzare in “.wav”?!? )
• disporre di uno spazio web di quelli che non hanno i megabyte contati

Per avere un’idea, il sito LaPhotoCabine dà la possibilità di stampare le fototessere direttamente da casa in un formato molto simile a quello delle cambine fotografiche. Il sito è realizzato completamente in Flash e ActionScript, con i quali viene gestita la webcam del proprio pc.

I lettori del blog

Lasciamo stare il lato tecnico e pensiamo invece come lettori di un blog. Potrebbe essere una soluzione comoda per commentare? Ci impiegheremmo lo stesso tempo per lasciare un commento?

Beh, credo che questo dipenda unicamente dalla qualità dell’applicazione che provvederà a registrare, convertire e memorizzare il commento audio. L’obiettivo principale sarà quello di agevolare il più possibile l’operazione rendendendo il tutto trasparente al lettore.

Quale formato per i commenti?

Infine, dobbiamo considerare se è meglio memorizzare i commenti in formato audio o testuale. Penso che il formato dei commenti andrebbe scelto tenendo conto dell’utilizzo che ne vogliamo fare. In pratica, commenti audio andrebbero bene per un sito o blog concepito in maniera multimediale, ad esempio per un sito Flash che promuove un gioco. Invece, per un blog tecnico, non so fino a che punto i commenti audio andrebbero bene: non si può mica dettare il codice a voce!

Sicuramente i commenti audio porterebbero nelle pagine dei blog una multimedialità che attualmente non c’è e i commenti lunghi verrebbero letti (o ascoltati) molto più volentieri…

Che ne pensi dei commenti audio? Se esistesse un servizio web per la gestione dei commenti audio (come Disqus per i commenti testuali) daresti la possibilità di lasciare dei commenti audio nel tuo blog?

Nelle ultime settimane su Twitter sono state introdotte diverse novità che vanno a modificare non di poco l’utilizzo e l’utilità della piattaforma di microblogging.

In particolare parliamo delle liste e della gestione dei retweet, quest’ultima già annunciata da tempo. Mentre, per quanto riguarda i trending topics, sono in atto degli interventi per migliorarne la ricerca e la selezione.

Le liste

E’ già da tempo che sono state introdotte le liste, quindi non è propriamente una novità “hot”, e come succede per ogni funzionalità di Twitter, sono nati in breve tempo software, siti e strumenti vari per gestirle al meglio.

Le liste non sono altro che “insiemi di account”, generalmente raggruppati per argomento, provenienza, ecc.

In breve, grazie a questa nuova funzionalità possiamo:

1. dividere gli account che seguiamo in liste, ad esempio tematiche o per provenienza, proprio come una rubrica telefonica
2. seguire una lista come se fosse un singolo account
3. conoscere chi ci ha inserito all’interno di una lista

Inoltre, riguardo la promozione, le liste ci danno la possibilità di essere conosciuti da chi segue una lista in cui siamo presenti, senza “seguire per essere seguiti”, il ché, a mio avviso, non è una cosa da poco…

Probabilmente eravamo in tanti che attendevamo una cosa del genere. Si, perché con le liste si risolve il problema dei troppi account che si seguono, che intasano la homepage di tweet che non ci interessano. Diciamocelo, tutti utilizziamo Twitter come strumento promozionale, quindi seguiamo tanta gente solo per “farci notare”. Questo, se da una parte può essere estremamente importante, dall’altra è estremamente dannoso per la vita su Twitter perché di fatto ci impedisce di frequentare l’homepage per leggere i tweet delle persone che più ci interessano.

Articoli che ti consiglio di leggere

The next step for Twitter Lists – Entire countries
Il prossimo passo per le Twitter Lists – Paesi interi

4 Ways News Organizations are Using Twitter Lists
4 modi di organizzare le Twitter Lists

10 Twitter List Widgets You Can Grab & Embed Right Now
10 widget per le Twitter Lists

Twitter Lists, presto le API

ReTweet

Fino ad oggi ci eravamo adattati a fare i ReTweet con messaggi del tipo:

RT bla bla bla bla bla (via @account)

oppure

@account bla bla bla bla bla

La nuova gestione dei ReTweet era stata annunciata in Agosto. Chi (come me) frequenta spesso la documentazione delle API di Twitter si sarà accorto dei nuovi metodi per i ReTweet con la scritta “coming soon”, presente tutt’ora.

Purtroppo le funzionalità dei ReTweet sono attive solo su una piccola percentuale di utenti scelti a caso, in modo da testarle prima di attivarle su tutti gli account. Intanto, grazie agli screenshot pubblicati su Mashable!, ma realizzati da Marketing Shindig (@marketwire on Twitter) possiamo avere un’idea di quello che potremo fare:

1. per ogni tweet, visualizzare la lista degli account che ne hanno fatto il ReTweet
2. avere un comodo pulsante “retweet” su ogni tweet, proprio come “reply” o la stellina per i preferiti, con la possibilità di ritornare sui propri passi cliccando su “undo”
3. bloccare la visualizzazione di un account fra i retweet

Questo è l’articolo del 13 Agosto sul blog ufficiale di Twitter: Project Retweet: Phase One

Trending Topics

Questa mattina, sul blog di Twitter, con un breve articolo vengono annunciati degli interventi con l’intento di migliorare la lista dei trending topics.

IL PROBLEMA. I trending topics sono uno strumento creato per scoprire in tempo reale cosa sta succedento e gli argomenti di maggior interesse. Secondo lo staff di Twitter, con l’aumentare dei tweet sta diventando un ammasso di parole inutili e di scarso interesse.

LA SOLUZIONE. Attualmente sono al lavoro per migliorare la qualità delle ricerche e fornire dei trending topics più utili.

Sono pienamente d’accordo con lo staff di Twitter. Inoltre spero che miglioreranno la gestione degli hashtag, cioé quei tag con il cancelletto “#”, che vengono linkati automaticamente. Cosa c’entra? Avete mai notato che nei trending topics spesso sono presenti contemporaneamente le stesse parole con e senza il carattere “#”?

Una possibile soluzione sarebbe quella di linkare gli hashtag alla pagina http://twitter.com/search?q=hashtag anziché http://twitter.com/search?q=#hashtag, e nella pagina di ricerca far apparire i tweet che corrispondono sia alla parola senza il “#” sia alla parola con il “#”. In pratica, rendere un po’ più trasparente la gestione degli hashtag…

In questi ultimi giorni gli scammers sono molto attivi sia su Twitter che su Facebook.

La loro attività consiste nel compromettere gli account e da questi inviare messaggi contenenti un link verso un sito che sicuramente non ti farà piacere visitare…

Anch’io ho ricevuto un messaggio del genere su Twitter da parte, però, di un utente italiano (che ho subito avvisato). Il ché mi ha fatto insospettire e in pochi minuti ne ho avuto la conferma leggendo le news.

Il messaggio su Twitter

I made $426.23 online today with [link]

Il messaggio su Facebook

Just take a look at it and read it over and try it if you want [link].

Consigli

• Avvisa subito il mittente del messaggio
• Non visitare il link. Neanche per curiosità!
• Anche se il tuo account non è stato compromesso, cambia la password in modo da evitare l’invio di futuri messaggi

Ne approfitto per dare qualche piccolo consiglio sulla password

• scegli una password lunga
• inserisci sia lettere che numeri
• non inserire nome, cognome, anno di nascita e altre parole direttamente collegabili a te

Perfavore, potresti avvisarmi se ricevi un messaggio di questo tipo? Io sono “giacomoratta” su Twitter e “Giacomo Ratta” su Facebook. Ti ringrazio in anticipo.

L’articolo è stato strutturato molto bene in quanto descrive i 10 formati incriminati fornendo lo screenshot del sito che lo utilizza, il tutto all’interno di una bellissima slide-show.

1. Banner sotto l’header

Spacca in due la pagina e sposta più in basso il suo vero contenuto.

2. Annunci simili al contenuto

Sono ingannevoli e causano l’abbandono involontario del sito da parte dell’utente.

3. Annunci animati

Provoca distrazione e, poiché sono di bassa qualità, riduce la credibilità del sito.

4. Annuncio espandibile al centro della pagina

Obbliga l’utente a cliccare sul pulsante “chiudi”, interrompendo fastidiosamente la navigazione.

5. Banner vicini al logo

Anche se ha il vantaggio di non interferire sulla struttura della pagina e, quindi, di non trascinare ulteriormente in basso il contenuto, riduce lo spazio riservato al logo diminuendo la chiarezza e la visibilità del brand.

6. Banner ampio in alto a sinistra

In molti casi, con un banner di questo tipo gli utenti si accorgono subito che non fa parte del reale contenuto della pagina.

7. Google Ads testuali

Interrompono il contenuto della pagina. Naturalmente il gestore del sito spera che vengano confusi con il contenuto e che, di conseguenza, vengano cliccati.

8. Pulsante “chiudi” nascosto

Spesso nei banner graficamente carini e animati si cerca di camuffare il pulsante “chiudi” o di ritardarne la sua apparizione. In questo caso gli utenti sono costretti a perdere tempo a cercarlo o a sorbirsi tutta l’animazione che generalmente è una sgradevole interruzione della navigazione.

9. Banner “a tutto schermo”

Questo tipo di banner occupa tutta l’area della pagina e obbliga l’utente a cliccare su “continua” (o qualcosa di simile) per accedere ai contenuti desiderati. Abbastanza “violenta” come soluzione.

10. Annunci appariscenti e ben amalgamati

Quando un banner o un annuncio assomiglia graficamente al sito e al suo contenuto tende a fondersi con la pagina risultando indistinguibile agli occhi dell’utente. In questo caso l’utente rimane disorientato, soprattutto se è un assiduo visitatore abituato al normale layout del sito.

Questa è solo una sintesi. Per leggere l’articolo originale e osservare i 10 screenshot dei siti che utilizzano questi formati vai su http://www.businessinsider.com/10-online-ad-formats-people-hate-most-2009-6.

Che ne pensi di questa lista? Secondo te è completa o avresti altri esempi negativi da aggiungere?

Nonostante ci siano un po’ di ottimi plugin per la gestione e la stampa dei “featured posts” ho sviluppato questo mio plugin che, credo, sia diverso dai plugin in circolazione e per certi versi offra una gestione più user friendly. Probabilmente questo sarà un giudizio soggettivo… In pratica, ci sono alcuni plugin che permettono di inserire gli id dei post, separati da virgole, in una casella di testo. Il mio plugin legge i “custom fields” (in italiano “campo personalizzati”) dei post che si decide di mettere in evidenza. In questo senso credo che impostare un campo personalizzato sia un po’ più user friendly rispetto all’aver a che fare con insiemi di numeri. Secondo te?

Per gli impazienti

Per iniziare a utilizzare il plugin:

1. effettua il download: http://download.jblog.it/wp-plugins/jblog_featured_posts.zip
2. copialo nella directory “plugins” e attivalo
3. inserisci la funzione jblog_print_featured_posts() nel punto del template in cui vuoi stampare la lista dei post in evidenza

Per far comparire un determinato post fra i post in evidenza è necessario entrare nella pagina di editing dell’articolo e inserire un campo personalizzato di nome “featured” con il valore “ok” o uno qualsiasi. Il valore non incide sul funzionamento del plugin. Tuttavia consiglio di inserire il valore “ok” in modo da beneficiare di futuri aggiornamenti in cui eventualmente verrà utilizzato.

In profondità

Il plugin è composto da due funzioni:

• jblog_getFeaturedPosts seleziona i post e li restituisce in un array, ordinati dal più recente al più vecchio
• jblog_printFeaturedPosts seleziona i post e li stampa sottoforma di lista <ul>…<li>

jblog_getFeaturedPosts

Questa funzione è il cuore del plugin. Seleziona i post e li restituisce in un array. In questo modo potrai essere libero di gestire e stampare i dati restituiti come più ti piace.

La funzione ha 2 argomenti:

• $args [default "limit=10&len=0"] è una stringa in cui vengono passate le opzioni (nella forma [opzione]=[valore]) separate da “&”. Le uniche due opzioni sono limit (-1 per stampare tutti i post in evidenza, un numero maggiore di 0 per stampare un numero limitato di post) e len per la lunghezza del contenuto (per non selezionare il contenuto basta impostarlo con zero o non impostarla affatto)
• $metakey [default "featured"] è una stringa utilizzata per impostare il nome del campo personalizzato utilizzato per indicare che il post deve esser messo in evidenza

Esempio

$myarray = jblog_getFeaturedPosts("limit=-1&len=150","myfeatured");

• $myarray è l’array in cui verranno restituiti i post
• limit=-1 fa in modo che si selezionino tutti i post che hanno il campo “myfeatured”
• len=150 imposta il numero di caratteri del contenuto da restituire
• “myfeatured” è il campo personalizzato utilizzato per indicare che il post deve esser messo in evidenza

L’array restituito dalla funzione è composto dai post selezionati, ordinati dal più recente al più vecchio. Ogni elemento dell’array è a sua volta un array associativo contenente le informazioni del singolo post divise in corrispondenza degli indici “id”, “title”, “link” e “content”.

Esempio

Un semplice esempio per la stampa delle informazioni di ogni singolo post selezionato.

// Seleziona i post
$posts_array = jblog_getFeaturedPosts("limit=20&len=300","myfeatured");

// Ciclo: stampa le informazioni di ogni singolo post
foreach($posts_array as $post)
{
     echo "ID: ".$post['id'];
     echo "Titolo: ".$post['title'];
     echo "Link: ".$post['link'];
     echo "Contenuto: ".$post['content'];
}

jblog_printFeaturedPosts

Oltre a selezionare i post in evidenza, li stampa in una lista del tipo <ul>…<li>.

Gli argomenti sono gli stessi della funzione jblog_getFeaturedPosts (vedi sopra).

Esempio

Questa funzione va utilizzata direttamente all’interno del template inserendo la riga seguente nel punto in cui si desidera visualizzare la lista.

<? jblog_printFeaturedPosts("limit=-1&len=100") ?>

Come impostare un post “in evidenza”

Questo se vogliamo è il lato del plugin un po’ più “macchinoso”.

Per fare in modo che un post venga stampato nella lista dei post in evidenza è necessario andare nella pagina di editing dell’articolo e creare un “custom field” (o campo personalizzato) di nome “featured” oppure uguale all’argomento $metakey passato alle funzioni.

Come valore scrivere una cosa qualsiasi. Tuttavia consiglio di inserire il valore “ok” in modo da beneficiare di futuri aggiornamenti in cui eventualmente verrà utilizzato. Il valore non incide sul funzionamento del plugin, ma è necessario dato che wordpress non permette la creazione di un campo personalizzato senza un valore.

HTML e utilizzo dei CSS

Se utilizzi la funzione jblog_printFeaturedPosts ecco le informazioni che ti servono per poter formattare adeguatamente la lista dei post.

• Per formattare il contenitore principale della lista (<ul>) fare riferimento all’id “featured_posts”
• Ad ogni contenitore del singolo post (<li>) viene attribuito l’id “featured_post_” al quale viene aggiunto in coda l’id del post
• Il titolo di ogni post viene inserito all’interno di un tag <a>, il cui attributo href sarà impostato con il link del post
• Il contenuto dei post viene inserito in un tag <p>

Vuoi personalizzare il codice html? Apri il file del plugin, individua la funzione jblog_printFeaturedPosts e buon lavoro!

Esempio dell’output

<ul id="featured_posts">
	 <li>
		<a href="http://...html" id="featured_post_270">Titolo 1 - post 270</a>
		<p>Howwww! Nab him, jab him, tab him, grab him, stop that pigeon now.</p>
	</li>
	<li>
		<a href="http://...html" id="featured_post_320">Titolo 2 - post 320</a>
		<p>Grab him, stop that pigeon now.</p>
	</li>
	<li>
		<a href="http://...html" id="featured_post_450">Titolo 1 - post 450</a>
		<p>Tab him, grab him, stop that pigeon now.</p>
	</li>
</ul>

Script e Download

Per vedere il codice del plugin fai su http://test.jblog.it/wp-plugins/jblog_featured_posts.txt

Per scaricare il plugin vai su http://download.jblog.it/wp-plugins/jblog_featured_posts.zip

Per eventuali segnalazioni e malfunzionamenti scrivi dei commenti a questo post o contattami sull’email che trovi nella pagina “contatti”.

Questo plugin non fa per te? In questa pagina (su wordpress.org) trovi tantissimi plugin riguardanti i “post in evidenza”. Sicuramente ne troverai uno adatto alle tue esigenze!

Foto: still managed to draw a straight line di deadmanjones

Questo progetto si propone di creare un nuovo standard per migliorare il collegamento fra i contenuti web sfruttando il significato delle parole e dei tag.

Il tagging attuale

Per loro natura, i tag servono a etichettare e organizzare i contenuti sul web e, di conseguenza, migliorare i risultati di ricerca. Tuttavia, in assenza di uno standard comune i vantaggi dei tag risultano limitati in quanto software e siti web non riescono a interpretarli al meglio.

Un’altro problema è di tipo semantico. Poiché una parola può avere più di un significato non è possibile avere la certezza che dei contenuti collegati fra loro si riferiscano allo stesso argomento. Ad esempio, con il tagging attuale una foto di un ragno verrebbe collegata a un documento che parla di internet solo perché entrambi potrebbero riferirsi al tag “web” (ragnatela).

Da qui nasce il bisogno di definire uno standard che, oltre a gestire i tag, sappia tener conto dei significati delle parole in determinati contesti.

Il formato Common Tag

Il progetto è stato sviluppato per affrontare le attuali carenze del tagging e aiutare utenti, editori e sviluppatori a ottenere maggiori e più precisi collegamenti fra i propri contenuti e il resto del web. Ecco i punti chiave:

• Common Tag si basa sul formato standard RDFa
• Il significato dei singoli tag è memorizzato in grandi database gestiti come dizionari
• Ai contenuti e ai tag vengono attribuiti i rispettivi significati, grazie ai quali potranno relazionarsi con altri contenuti del web

La precisione delle relazioni si ottiene grazie all’utilizzo di metadati e concetti ben definiti con cui vengono taggati i contenuti. Attualmente questo progetto si serve di due grandi dizionari da cui prelevare i significati dei vari tag:

• FreeBase, un database sociale di concetti e argomenti che più interessano agli utenti
• DBpedia, un server in cui le informazioni sono rappresentate come in Wikipedia e leggibile dall’esterno grazie all’interfaccia pubblica

Come funziona, tecnicamente

Il formato Common Tag si basa sul formato standard RDFa, un meccanismo che consente di strutture il contenuto di documenti HTML. Lo standard RDFa è stato sviluppato dal W3C ed è supportato da Google e Yahoo! grazie al quale forniscono maggiori risultati nelle ricerche.

La struttura del modello Common Tag è molto semplice.

• I contenuti (e le loro singole parole) possono essere taggati con uno o più tag
• Ogni Common Tag può contenere la URL di un’altra risorsa che ne identifica univocamente il concetto descritto, cioè il suo significato
• Opzionalmente potrebbe contenere altre informazioni come la data di creazione e l’etichetta

Il significato dei singoli tag è memorizzato in grandi database (come Freebase.com e dbpedia.org)  che di fatto vengono gestiti come dizionari; grazie a questi database è possibile effettuare collegamenti basati sul significato anziché sulla parola. In questi enormi database ogni tag ha una pagina composta da tutte le sue informazioni, strutturate secondo lo standard RDFa.

I database dei significati possono essere letti da siti e applicazioni esterne grazie alle interfacce pubbliche (o API), da imparare grazie alla relativa e approfondita documentazione. Guarda la documentazione di Freebase e la documentazione di DBpedia.

Maggiori informazioni. Se ti interessa approfondire il lato tecnico dei Common Tag non ti resta che consultare la Quick Start Guide e le Specifiche dei Common Tag, e lo standard RDFa (sul sito del W3C).

ESEMPIO. Ecco un semplice esempio preso da commontag.org. Con questo codice si indica che il documento corrente riguarda la band U2 (vedi l’attributo “resource”).

<body xmlns:ctag="http://commontag.org/ns#" rel="ctag:tagged">
   <span   typeof="ctag:Tag"
           rel="ctag:means"
           resource="http://rdf.freebase.com/ns/en.u2"/>
</body>

Contenuti più usabili

Man mano che i Common Tag saranno utilizzati i contenuti web verranno attribuiti a un numero sempre maggiore di tag e significati. Questo sarà vantaggioso sia per gli utenti, che avranno più contenuti fra i quali scegliere, sia per gli editori, che vedranno aumentare notevolmente le visite nel proprio sito.

Inoltre, il fatto che i principali motori di ricerca supportino adeguatamente il markup standard RDFa gioca a favore della diffusione dei Common Tag. Quindi gli sviluppatori non avranno molte scuse per non utilizzarli. Entrambi i motori di ricerca hanno sviluppato le proprie applicazioni che sfruttano i Common Tag per fornire maggiori e più dettagliati risultati di ricerca: SearchMonkey di Yahoo! e Rich Snippets di Google.

Maggiori relazioni fra i contenuti

Tutte le informazioni relative a un particolare concetto sono collegate fra loro e rappresentate da un singolo tag, sia all’interno dei singoli siti che in tutto il web. Questo consente, a editori e sviluppatori, di fornire molte più informazioni e risorse correlate al contenuto del proprio sito web.

Ad esempio, se un articolo parla di Tom Cruise, i Common Tag ci permettono di collegarvi articoli che parlano di Katie Holmes per il semplice fatto che sono sposati e non perché nei titoli e nel contenuto di questi articoli compaiono le parole “Tom” o “Cruise”. Se così fosse, tra questi comparirebbero tutti gli articoli che parlano del “Cruise control” e dell’automobile “Land Cruiser”!

Contenuti di qualità e applicazioni innovative

Il fatto che i computer capiscano il significato delle parole migliora l’esperienza dell’utente. Infatti, ciò permette a editori e sviluppatori di avere contenuti più completi e creare applicazioni innovative che lavorano sui contenuti taggati con i Common Tag.

Ad esempio, consideriamo un blog sul cinema e un sito per la vendita di biglietti, e supponiamo che entrambi abbiano i contenuti taggati con i Common Tag. Inoltre supponiamo che un utente stia leggendo un articolo riguardante Star Trek. Uno sviluppatore potrebbe creare un’applicazione che permetta a questo utente di acquistare i biglietti per Star Trek direttamente all’interno dell’articolo, basandosi sul fatto che l’articolo e la pagina per l’acquisto dei biglietti hanno il Common Tag relativo al film di Star Trek. Immagini quante applicazioni potrebbero nascere sulla falsa riga di questa? Moltiplica per 1000!

Conclusione

Adottare uno standard ben definito per descrivere i propri contenuti si rivelerà estremamente vantaggioso. Applicazioni e servizi web sapranno finalmente collegare innumerevoli risorse sulla base dell’argomento trattato e non più sull’analisi delle parole chiave. Senza grossi interventi da parte di editori e sviluppatori!

Per me, come ho scritto nel titolo, questo standard rappresenta un piccolo, ma fondamentale, passo per il web semantico, quello che tutti chiamano Web 3.0. In fondo, si chiama web semantico proprio perché si basa sull’analisi del significato delle parole e non più su una “ricerca di caratteri”. Mi piacerebbe sapere cosa ne pensi sui Common Tag: ritieni che siano così importanti tanto da utilizzarli fin da subito o preferisci aspettare in attesa di altre tecniche che siano più semplici da implementare?

In questo articolo non verranno descritti dei metodi per la riduzione delle richieste HTTP ma parlerò delle modifiche e degli strumenti che ti permetteranno di ottimizzare i componenti della pagina per velocizzarne le relative richieste HTTP.

Ottimizzare le immagini

Anche se l’ottimizzazione non riduce le richieste http, è comunque importante per abbassare i tempi di caricamento delle pagine.

Ottimizzare un’immagine non è immediato; spesso sono necessarie molte prove e test per individuare il giusto bilanciamento fra qualità e dimensione del file.

Generalmente la compressione di un immagine è un’operazione da eseguire manualmente prima di caricare l’immagine nel proprio sito. Per fare ciò esistono numerosi script e tool gratuiti. Eccone alcuni.

Compressione di file CSS e Javascript

Questa pratica (in inglese chiamata “minification”) consiste nel rimuovere dal codice tutti i caratteri non necessari in modo da ridurre la dimensione del file. Tecnicamente avviene quanto segue:

• vengono ristretti i nomi di variabili
• caratteri di spaziatura come tab, a capo e spazio vengono eliminati (dove possibile)
• vengono cancellati tutti i commenti

ATTENZIONE. Dopo la compressione il funzionamento degli script e i nomi delle funzioni rimangono invariati, quindi non è necessario modificare i file di template. In altre parole, i nomi delle variabili che vengono modificati sono i parametri locali delle funzioni, che non influenzano la modalità di chiamata delle funzioni.

Offuscare il codice Javascript

Offuscare il codice (in inglese “obfuscate”, “obfuscation”) significa comprimerlo e trasformarlo in modo che risulti illeggibile (per i programmatori) per evitare che venga effettuato il cosiddetto reverse engineering, il procedimento attraverso cui è possibile leggere, capire ed utilizzare il codice di uno script.

PRO: si raggiunge un ottimo livello di compressione, riducendo notevolmente la dimensione dello script.

CONTRO: è un procedimento molto complesso attraverso cui si rischia di generare bug e malfunzionamenti; pertanto si consiglia di limitarsi esclusivamente a comprimere il codice anziché offuscarlo.

Servizi web, librerie, software

Ecco un po’ di strumenti e servizi web per la compressione e l’offuscamento di file Javascript e CSS. Inizialmente trovi quelli riguardanti Javascript; in basso potrai vedere tutti quelli per la compressione di CSS.

YUI Compressor

YUI Compressor è la più famosa libreria (open source) per la compressione di file CSS e Javascript. La compressione Javascript elimina commenti, caratteri di spaziatura e accorcia i nomi delle variabili. La compressione CSS utilizza un compressore basato su espressioni regolari.

JSMin

JSMin è un filtro che rimuove commenti e caratteri di spaziatura dai file Javascript. Generalmente la dimensione del file viene dimezzata. Questa libreria incoraggia i programmatori a esprimersi liberamente evitando che si preoccupino di risparmiare spazio. In fondo alla pagina puoi trovare i link per scaricare l’eseguibile MS-DOS.exe oppure i codici sorgenti in C, C#, Java, JavaScript, Perl, PHP, Python, OCAML, Ruby.

DojoToolkit ShrinkSafe

Dojo, il famoso toolkit javascript, utilizza uno strumento per ridurre la dimensione, e quindi il tempo di caricamento, dei file Javascript. La particolarità sta nel fatto che invece di ricorrere alle solite espressioni regolari, Dojo Compressor è basato su Rhino, un javascript engine del progetto Mozilla. Quindi, poiché legge il flusso effettivo del codice javascript, può avere una visione migliore del contesto in cui una variabile viene letta e/o scritta, rispetto alle espressioni regolari.

Packer

Semplice servizio web per la compressione e l’offuscamento di codice Javascript. La libreria è disponibile anche per PHP e .NET. Download: http://dean.edwards.name/download/#packer.

JavaScript Obfuscator and Minifier

Librerie PHP per l’esecuzione da riga di comando. Richiedono la versione 5.2 (o superiore) di PHP CLI binary. Windows non è supportato e, a detta dello sviluppatore, non lo sarà mai.

jsobf: compressa e offusca codice Javascript.

jsfmt: effettua il processo inverso su un codice che ha subito compressione e offuscamento.

Download: http://web.2point1.com/2008/09/07/jsfmt-and-jsobf-available-for-download/.

Demo: http://timwhitlock.info/plug/examples/JavaScript/j_obfuscate.php.

SmartOptimizer

SmartOptimizer (precedentemente chiamata JSmart) è una libreria PHP che si occupa di comprimere, offuscare, memorizzare in cache, fondere più file o stampare gli script direttamente nella pagina.

pack:tag

Libreria JSP che compressa e combina risorse (come Javascript e CSS) e li memorizza nella cache del browser o in un file generato dinamicamente. Questo script si può inserire facilmente all’interno delle pagine e lavora in maniera trasparente sia all’utente sia allo sviluppatore.

ObfuscateJS

Progetto Java per la compressione e l’offuscamento di codice javascript. Si occupa di rimuovere caratteri di spaziatura e commenti, e di accorciare i nomi delle variabili locali.

JsCompress

Servizio web per la compressione di codice javascript. Si può scegliere di eseguire la compressione con JsMin o con Packer. Molto interessante.

Javascript Minifier

Servizio web (basato su JsMin) per la compressione di codice javascript. Puoi decidere se effettuare direttamente il download oppure visualizzare il risultato in una textarea.

Free Javascript Obfuscator

Servizio web che si occupa di comprimere e offuscare codice javascript. Offrendo diverse opzioni ti lascia libero di decidere completamente l’aspetto finale del codice.

Online Javascript Obfuscator

Servizio web per la compressione e l’offuscamento di codice javascript.

PHP CSS Compressor

In questo articolo vengono fornite alcune righe di codice PHP da inserire direttamente nei file CSS. Questo codice provvede automaticamente alla compressione del contenuto del file CSS. In fondo all’articolo vengono descritte le modifiche da apportare al file .htaccess in modo che il file .css venga elaborato come file .php.

CSS Compressor

Servizio web per la compressione di codice CSS. L’applicazione è un’applet Java.

CSS Tidy

Software, eseguibile da riga di comando, per la compressione di file CSS. La pagina del progetto è completa di tutta la documentazione necessaria per iniziare a utilizzarlo.

Conclusione

Imparare a utilizzarli tutti è impossibile. Quindi, prima perder tempo tra download e righe di codice ti consiglio di analizzare il tuo sito per individuare i componenti che ne influenzano maggiormente le prestazioni.

Ad esempio, se il tuo sito è una galleria di immagini gestita con un paio di file javascript la cosa migliore da fare è scegliere il miglior tool per ottimizzare le foto, considerando anche il loro formato. Se, invece, hai un sito dinamico che fa un largo uso di javascript e tecniche Ajax, comprimere (e offuscare) il codice dei tuoi file javascript sarà fondamentale per migliorare il caricamento e la reattività del tuo sito web.

Crediti

• Yahoo! Developer Network – Best Practices for Speeding Up Your Web Site
• Foto1: forty-nine: compressed work week di dead_squid
• Foto2: fog over Istanbul skyscrapers di WhatCouldPossiblyGoWrong?
• Foto3: MAGNIFYING GLASS di andercismo

In breve questo studio dimostra che:

• Facebook sia il leader incontrastato in Europa con oltre 200 milioni di utenti
• QZone è in assoluto il più utilizzato con circa 300 milioni di utenti, anche perché è il leader in Cina…
• MySpace è, in generale, in netto calo in tutti i paesi

Non vorrei ripetere ciò che hanno detto altri, quindi ti segnalo un po’ di link per approfondire.

Articolo originale: Vincos Blog » World Map of Social Networks

Approfondimento facebook: Vincos Blog » Osservatorio Facebook

Italiani

• BusinessAndBlog » La mappa dei social network nel mondo (giugno 2009)
• ZeroPuntoDue » La mappa di penetrazione dei Social Network nel mondo

Inglesi

• TechCrunch » A Map Of Social (Network) Dominance
• ReadWriteWeb » Social Networks Around the World

Il 5 Giugno Tony La Russa, il manager dei St. Louis Cardinals (squadra di baseball), ha portato Twitter in tribunale a causa della presenza del suo falso account, in particolare di alcuni tweet in cui si rivangavano episodi spiacevoli della vita del manager.

In occasione di questo episodio Biz Stone (il co-fondatore di Twitter), nel blog ufficiale, ha detto la sua riguardo la querela avanzata da Tony La Russa ed ha fornito alcuni dettagli sui piani futuri che adotterà Twitter per combattere la creazione di falsi account.

Stone ha ribadito che la società cancella, sospende o trasferisce il controllo (ai legittimi proprietari) di account creati da persone diverse da quello che dicono di essere, aggiungendo che queste misure sono state adottate anche nel caso del manager La Russa.

Verified account

Stone ha annunciato che l’azienda ritiene comunque opportuno migliorare ulteriormente il servizio, e da questa estate gli account di Twitter potranno essere contrassegnati dall’etichetta “account verificato”. Questa caratteristica indicherà che le persone dietro un account sono effettivamente quelle che dicono di essere.

Per ora non si è capito bene come si procederà tecnicamente. Tuttavia, sul blog viene detto che un modo consiste nel verificare se nel sito della persona relativa all’account è presente il link verso lo stesso account su Twitter.

La sperimentazione inizierà con la verifica degli account di politici, atleti, artisti famosi, e altri personaggi pubblici. L’azienda spera di poter verificare molti più account in futuro, ma sarà necessario iniziare da un ristretto numero di account a causa delle notevoli risorse richieste.

Che ne pensi? Credi che sia fatica sprecata o che migliorerà notevolmente la vita su Twitter?

FONTI

• http://blog.twitter.com/2009/06/not-playing-ball.html
• http://news.cnet.com/8301-1023_3-10258816-93.html

L’aspetto degli annunci sarà praticamente identico alle migliaia di post che vengono pubblicati ogni ora, ma verranno contraddistinti da una piccola linea verde che indicherà il fatto di essere sponsorizzati. Proprio come i normali post, gli annunci sponsorizzati potranno contenere e linkare notizie, immagini, video riguardanti un’azienda e i suoi prodotti, ed essere aggiunti all’interno dei bookmarks degli utenti. Un esempio su come potrebbero apparire gli annunci lo puoi vedere cliccando sull’immagine in alto oppure qui.

Il successo di un annuncio (o il fallimento) sarà determinato dagli utenti semplicemennte esprimendo il loro interessamento, con gli strumenti messsi a disposizione da Digg. In pratica, quanti più utenti aggiungeranno ai loro bookmarks un annuncio, tanto meno l’insersionista dovrà pagare. Viceversa, se l’annuncio verrà sepolto fra i post il prezzo da pagare aumenterà notevolmente. Per questo motivo gli inserzionisti avranno un motivo in più a pubblicare post sponsorizzati di qualità in modo che interessino il più possibile agli utenti di Digg. Con questo meccanismo, quando un utente leggerà un annuncio sponsorizzato non risponderà con un semplice “non mi interessa, è solo  pubblicità” ma “questo post non mi interessa”.

Il principale obiettivo che si propone lo staff è quello di fornire agli inserzionisti una maggiore probabilità che il loro annuncio interessi realmente gli utenti, facendolo apparire all’interno di post simili. Inoltre gli utenti del celebre social bookmarker avranno un ruolo fondamentale nel giudicare la rilevanza di un annuncio, e di conseguenza il successo di una campagna pubblicitaria.

Lo staff ha avvertito che il servizio sarà continuamente “sotto i ferri” e verrà migliorato anche grazie ai feedback degli utenti.

Progetto molto originale… Staremo a vedere!

FONTE: http://blog.digg.com/?p=808

Grazie a queste applicazioni Facebook può rendersi utile a migliorare la cultura dei suoi utenti, come succede spesso in Twitter.

Ecco le applicazioni più interessanti, secondo me.

Books

Books ti permette di condividere i tuoi libri preferiti con i tuoi amici, scoprire altri libri che potrebbero interessarti, vedere i libri preferiti dai tuoi amici, acquistare libri su Amazon.com.

CourseFeed

Grazie a questa applicazione è possibile trovare scuole superiori e compagni di college, e collegarti con loro attraverso questo servizio. Il punto forte è l’apprendimento, poiché è possibile collegarsi con i professori delle maggiori università e accedere agli appunti ed ai quiz che mettono a disposizione degli studenti. Attualmente ci sono tantissimi professori e studenti.

MyPersonality

Con questa applicazione potrai conoscere meglio la tua personalità. In pratica dovrai rispondere onestamente a tante semplici domande e alla fine verrà descritta la tua personalità. Ad esempio, ti verrà detto quanto sei affidabile, quanto sei sicuro/a di te, ecc.

Teach the People

Teach the People è una community di insegnanti attraverso la quale condividono la loro conoscenza con altri utenti Facebook. Ci sono diversi argomenti a cui ci si può iscrivere per ricevere materiale didattico e aggiornamenti. Vengono condivisi documenti, immagini, video, audio, ecc. che è possibile commentare nella rispettiva bacheca.

Typing Speed

Semplice tool con cui è possibile vedere quanto sei veloce a scrivere con la tastiera. Misura anche l’accuratezza delle parole scritte e il rapporto velocità/accuratezza. La tua velocità a precisione aumenterà quanto più farai pratica con questo fantastico tool.

WeRead

Leggere libri è importante ma molta gente non legge abbastanza. Questa applicazione cerca di spingerti a leggere di più selezionando automaticamente i libri che potrebbero interessarti. Come? Quando la aggiungi al tuo profilo ti mostra un elenco di libri e ti chiede di sceglierne alcuni. Basandosi sulle scelte fatte selezionerà alcuni libri che molto probabilmente ti interesseranno.

Crediti

• News.Cnet.com – 10 Facebook apps that teach you something
• Foto1, foto2, foto3, foto4, foto5, foto6: Don Reisinger/CNET

Conosci altre applicazioni?

Se conosci altre applicazioni o hai scritto un articolo su questo argomento puoi segnalarmelo. Scriverò un articolo o integrerò questo con le applicazioni segnalate da te. In particolare, conosci applicazioni “italiane”?

In particolare, ha bisogno di ordinare i post in modo casuale nell’archivio di categoria.

Dopo aver spulciato le librerie di Wordpress e aver eseguito un po’ di prove ho sfornato questa funzione che sembra funzionare a dovere.

La classe WP_Query

In Wordpress le query (interrogazioni) al database vengono gestite con la classe WP_Query che si trova in wp-includes/query.php.

Ecco le proprietà e i metodi della classe WP_Query che utilizziamo:

• con il metodo set($query_var, $value) impostiamo le caratteristiche della query
• il metodo get($query_var) restituisce il valore di una variabile
• per eseguire la query utilizziamo la funzione get_posts()

Tuttavia, questi tre metodi non bastano a modificare l’elenco dei post che verranno visualizzati.

Questo elenco è memorizzato all’interno della proprietà posts (di tipo array) che verrà sovrascritta con l’array restituito dal metodo get_posts(), nell’ultima riga.

Per saperne di più sulla classe WP_Query vai su http://codex.wordpress.org/Function_Reference/WP_Query.

Il codice

function jblog_orderbyRand()
{
	global $wp_query;

	// Imposta il tipo di ordinamento
	$wp_query->set('orderby', 'rand');

	// Disabilita la paginazione dei post
	$wp_query->set('nopaging', true);
	$wp_query->set('posts_per_page', -1);

	// Reimposta l'array dei post da stampare
	$wp_query->posts = $wp_query->get_posts();
}

Come utilizzare la funzione

Innanzitutto copiamo il codice precedente nel file functions.php (all’interno della directory del template). Se il file non esiste basterà crearlo.

Anche se la necessità originale era quella di modificare l’elenco dell’archivio di categoria, questa funzione è efficace in ogni pagina del blog che contenga un elenco di post, quindi nell’homepage, nell’archivio di tag, ecc.

Per utilizzarla basterà inserirla in testa alla pagina da modificare. Ad esempio, se vogliamo che tutti gli archivi vengano ordinati in modo casuale, dobbiamo aprire il file archive.php del template e inserirla in testa:

<? // Ordinamento casuale
   jblog_orderbyRand(); 	?>

<? get_header(); ?>
	<div id="content" class="narrowcolumn">
		<?php if (have_posts()) : ?>
			. . .

Se, come nel caso del lettore, si deve ordinare in modo casuale solo l’archivio di categoria scriveremo la funzione all’interno di un costrutto if in cui si controlla che l’archivio sia relativo a una categoria.

Questo controllo si esegue ottenendo l’id della categoria grazie alla funzione get_query_var('cat') che restituisce il valore di una variabile per la query. Nota che quella funzione è equivalente all’istruzione $wp_query->get('cat'). Entrambe restituiscono l’id (di tipo intero) della categoria. Questo sarà maggiore di zero se l’archivio che si sta visualizzando è di categoria.

<? // Ordinamento casuale (se id categoria è positivo)
   if(get_query_var('cat')>0)
   jblog_orderbyRand(); 	?>

<? get_header(); ?>
	<div id="content" class="narrowcolumn">
		<?php if (have_posts()) : ?>
		. . .

Svantaggio: non è possibile dividere i post per pagine

Ogni volta che si carica la pagina viene rigenerato l’elenco e, dato che viene ordinato in modo casuale, i post non vengono adeguatamente distribuiti nelle varie pagine. In pratica è concreto il rischio che dei post apparsi nella pagina 1 possano apparire nuovamente in altre pagine. Per questo motivo viene disabilitata la paginazione.

Inoltre, è necessario applicare un ultima modifica al tema della pagina che ospiterà l’elenco da ordinare in modo casuale. Cioé, è necessario evitare che appaiano i link “post precedenti” e “post successivi”. Nei casi più semplici basterà eliminare il codice relativo a questi link. Se invece l’ordinamento casuale è condizionato (come nel codice precedente) bisognerà applicare le condizioni (contrarie rispetto a quelle relative alla funzione) alla visualizzazione di questi link:

<? // Per la funzione la condizione era get_query_var('cat')>0 (con il ">" anziché "<=")
if(get_query_var('cat')<=0) : ?>
	<div class="navigation">
		<div class="alignleft"><?php next_posts_link(__('&laquo; Older Entries', 'kubrick')); ?></div>
		<div class="alignright"><?php previous_posts_link(__('Newer Entries &raquo;', 'kubrick')); ?></div>
	</div>
<? endif; ?>

Serve aiuto?

Come vedi quello che ho scritto nella pagina “Informazioni” riguardo l’aiuto ai lettori non sono solo un mucchio di frasi fatte per riempire una pagina. Quindi se hai bisogno di aiuto o, più semplicemente, di un consiglio ricordati di passare da qui. Finché ne avrò il tempo sarò felice di aiutarti!

Il Mime HTML e lo schema data:URL sono due importanti ingredienti nella ricetta che ti permetterà di ridurre le richieste HTTP.

• Una pagina Mime HTML è un tipo di pagina web in cui è possibile scriverci sia il codice html sia dei dati come immagini, oggetti flash, file audio
• Lo schema data:URL è una tecnica grazie alla quale è possibile inserire i dati nella pagina web (che abbiamo già visto nell’articolo Ridurre le richieste HTTP (parte 2): come unire e combinare immagini, script, css e che riprenderò per evitarti di fare su e giù per il blog)

Non utilizzeremo queste due tecniche separatamente ma ci serviranno per creare il mix esplosivo per caricare quanti più dati possibile in una sola richiesta http: quella della pagina web.

Lo schema data:URL

Per capire bene il Mime HTML è necessario sapere come codificare i file in base64 e come utilizzarli all’interno della pagina per poi vedere l’intera struttura di un documento MHTML.

Il vantaggio fondamentale di questa tecnica consiste nel risparmio di tante richieste http quanti sono gli oggetti e le immagini codificati in base64 che inseriamo nella pagina.

Vediamo subito un esempio.

<IMG ALT="Foto" SRC="data:image/gif; base64,
	R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwhhx4dbgYKAAA7B72VFgl2Tf7452
	AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz
	ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp
	a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl
	ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis
	F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH" />

Dopo la paura iniziale, in genere ci si domanda: cosa sono quei caratteri e come faccio a inserirli?

Quell’ammasso di caratteri è la codifica in base64 dell’immagine. In pratica, è il contenuto del file immagine codificato in base64.

Per codificare un’immagine in base64 si utilizza una semplice funzione php: base64_encode.

L’ultima questione riguarda il tipo MIME che si può ottenere in due modi:

• utilizzando la funzione mime_content_type, dopo aver abilitato l’estensione php_mime_magic.dll.
• leggendo le informazioni del file grazie le funzioni File Information di php. Era un’estensione PECL, ma ora non lo è più. Bisogna utilizzare la libreria esterna magic_open

Nel caso non si possano utilizzare queste funzioni si dovrà scrivere manualmente, il che presuppone che si conosca il tipo dell’oggetto o dell’immagine da inserire.

Come inserire un’immagine in base64 (senza funzioni per il tipo MIME)

<img src="data:image/jpeg;base64,<?
echo base64_encode(file_get_contents("img.jpg")); ?>" alt="Immagine" />

Come inserire un’immagine in base64 (con funzioni per il tipo MIME)

<? $mime = mime_content_type("img.jpg"); ?>
<img src="data:<? echo $mime; ?>;base64,<?
echo base64_encode(file_get_contents("img.jpg")); ?>" alt="Immagine" />

Script, demo e download

Per vedere lo script vai a http://test.jblog.it/img_base64/index.txt

Per vedere una demo vai a http://test.jblog.it/img_base64/

Per scaricare l’esempio vai a http://download.jblog.it/img_base64.zip

Mime HTML

Il termine “Mime HTML” sta per “Multipurpose Internet Mail Extensions HyperText Markup Language“.

Per avere un’idea di quella che può essere una pagina mhtml (di estensione .mht) pensiamo ad un’email con dei file allegati (che possono essere anche delle immagini presenti all’interno del testo). I file che vengono inviati tramite email, sottoforma di allegati, vengono codificati in base64 e successivamente inseriti nell’intestazione dell’email. Quando il nostro client riceve l’email, prima decodifica gli allegati per renderli fruibili ed eventualmente pronti per il download. Una pagina MHTML funziona grosso modo così.

ATTENZIONE. Una pagina MHTML non deve necessariamente essere quella in cui viene scritto il codice html. Infatti può esserlo anche un file css che utilizza delle immagini (che vedremo successivamente).

Struttura di una pagina MHTML

Generalmente una pagina di questo tipo è composta da 3 mattoni fondamentali:

• nell’intestazione si specifica che il file è di tipo “multipart/related”, il separatore dei dati codificati in base64 e il tipo di contenuto del file (es. “text/html”)
• la seconda parte è quella relativa ai dati codificati in base 64 separati dal separatore specificato nell’intestazione e definiti dai rispettivi campi “Content-Location”, “Content-Type” e “Content-Transfer-Encoding” (naturalmente, quest’ultimo viene impostato con “base64″). Possono trovarsi anche in fondo alla pagina, il che è meglio poiché si da priorità al caricamento del codice
• nella terza parte viene scritto il corpo della pagina (o del messaggio, nel caso delle email) in html, css o altro, all’interno del quale verranno richiamati i dati specificati nella seconda parte del documento

Esempio di documento

L’esempio seguente è una pagina web con allegate 2 immagini, e segue lo schema in figura.

Purtroppo Internet Explorer gestisce diversamente i dati allegati e ci costringe a scrivere due versioni di codice. Tuttavia, questa è una delle rare volte in cui preferisco IE poiché con il browser Microsoft i dati in base64 vengono scritti una sola volta e possono essere richiamati infinite volte all’interno del documento grazie alla stringa specificata in “Content-Location”. Con gli altri browser (Firefox, Opera, Safari, Chrome) è necessario scrivere i dati codificati per ogni utilizzo dell’oggetto o immagine, il che rende il tutto più pesante e ci costringe a pensare due volte prima di decidere di inviare un’oggetto all’interno del documento MIME Html.

<!--
MIME-Version: 1.0
Content-Type: multipart/related; boundary="|b|o|u|n|d|a|r|y|"

--|b|o|u|n|d|a|r|y|
Content-Location:2bmp24869
Content-Type:image/bmp
Content-Transfer-Encoding:base64

Qk0eCgAAAAAAADYEAAAoA[...caratteri...]QEBAQEBAQEBZA==
--|b|o|u|n|d|a|r|y|
Content-Location:1bmp21242
Content-Type:image/bmp
Content-Transfer-Encoding:base64

Qk12CwAAAAAAAD[...caratteri...]JCQkJCQkJ
-->
<!--
--|b|o|u|n|d|a|r|y|
Content-Location:5bmp92853
Content-Type:image/bmp
Content-Transfer-Encoding:base64

DCwmoA2NiOAKioQ[...caratteri...]QDz87gA0dGCALq6X
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr" lang="en-US">
<head>
  <title>Titolo pagina</title>
</head>
<body>

	<object data="data:image/bmp;base64,Qk0eCgAAAAAAADYEAAAoA[...caratteri...]QEBAQEBAQEBZA==">
		<img src="mhtml:http://localhost/jblog_script/mhtml_dataurl/index2.php!2bmp24869" alt="img3" />
	</object>

	<div style=" width:200px; height:200px; background-image:url(data:image/bmp;base64,Qk12CwAAAAAAAD[...caratteri...]JCQkJCQkJ); *background-image:url(mhtml:http://localhost/jblog_script/mhtml_dataurl/index2.php!1bmp21242);"></div>

</body>
</html>

Il fatto che queste immagini abbiano questo “strano” formato non ci deve assolutamente far preoccupare. Gli utilizzi sono quelli di sempre: all’interno del tag <img>, come sfondo di un elemento grazie alle regole css, ecc.

Compatibilità con IE. Per gestire la compatibilità con il browser Internet Explorer è necessario inserire l’immagine compatibile con IE all’interno dei tag <object> in cui viene specificata l’immagine in un formato compatibile con i restanti browser. I risultati sono i seguenti:

• se si accede alla pagina con un browser diverso da IE, il tag object funzionerà correttamente mostrando l’immagine; il tag <img> al suo interno non verrà preso in considerazione dal browser
• nel caso in cui si acceda con Internet Explorer, poiché il tag <object> non funzionerà verrà considerato il tag <img> in cui l’immagine specificata è in un formato compatibile con IE

Regole da rispettare. Per concludere vorrei evidenziare alcune importanti caratteristiche riguardo il formato di un documento MHTML:

• “Mime Version” e “Content-Type” devono trovarsi obbligatoriamente in testa alla pagina, prima del <!Doctype…>
• Il primo separatore può essere separato a piacere dall’intestazione del documento
• Il separatore (boundary) deve trovarsi esattamente fra i dati in base64 dell’oggetto precedente e le intestazioni dell’oggetto successivo, senza ulteriori “a capo”, “spazi”, “tab”, e altri caratteri
• I vari oggetti possono essere separati solo da “fine” (–>) e “inizio” (<!–) commenti, stando attenti a non inserire altri caratteri tra <!– e il separatore; invece, fra il contenuto in base64 e –> possono esserci caratteri di escape (a capo, tab, ecc.)
• Prima del separatore è necessario inserire due trattini “–”
• Riguardo IE, l’indirizzo da scrivere dopo mhtml: deve essere identico all’indirizzo visibile nella barra degli indirizzi. Questo indirizzo si ottiene dalla variabile riservata $_SERVER['REQUEST_URI']

Utilizzare concretamente Mime HTML e data:URL

Ecco come immagino la generazione di un documento Mime HTML con lo schema data:URL.

Prima fase. Gli oggetti e le immagini vengono codificati in base64 e sistemati all’interno del documento.

Seconda fase. Il browser legge il codice html e decodifica i dati allegati portandoli al loro formato primitivo: le immagini ritornano immagini, gli oggetti flash ritornano animazioni, ecc.

La classe MimeHtmlHandler

Per automatizzare il tutto ho sviluppato una piccola classe PHP che con un paio di righe ti permetterà di inserire all’interno del documento MHtml un’immagine precedentemente allegata.

N.B. la proprietà *background-image serve per rimpiazzare la prima background-image nel caso questa non funzionasse. In particolare, la proprietà *background-image viene utilizzata per IE mentre background-image funziona con i restanti browser.

Il codice dell’esempio precedente è stato ottenuto da questo script PHP:

<?
// ( 1 ) Crea l'oggetto
$mhh = new MimeHtmlHandler("http://test.jblog.it","|b|o|u|n|d|a|r|y|","MIME Version 1.0");

// ( 2 ) Header "Content-Type" e "MIME Version"
$mph->printHeader();

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr" lang="en-US">
<head>
  <title>mhtml test page</title>
</head>
<body>
  <div id="test1">test #1</div>
  <div id="test2">test #2</div>

  <object data="<? $mhh->inc("2.bmp","image/bmp"); ?>">
	  <img src="<? $mhh->incIE("2.bmp"); ?>" alt="img3" />
  </object>

 <div style=" width:200px; height:200px; background-image:url(<? $mhh->inc("1.bmp","image/bmp"); ?>); *background-image:url(<? $mhh->incIE("1.bmp"); ?>);"></div>

</body>
</html>
<?
// ( 3 ) Crea la lista dei dati (per IE)
$mhh->incAll();
?>

Caratteristiche principali della classe MimeHtmlHandler

La classe ha due array privati: il primo è quello in cui vengono conservati gli oggetti che vengono inseriti nella pagina in modo da evitare di codificarli e impostarli nuovamente per un successivo inserimento; il secondo è quello relativo ai nomi in codice specificati in “Content-Location” quando si stampa la lista dei dati codificati che verrà utilizzata solo da Internet Explorer.

Le funzioni da utilizzare sono solo due: inc e incIE. Queste due funzioni permettono di inserire oggetti in formati compatibili con tutti i browser e con IE. Inoltre, in base al tipo e al numero di argomenti passati è possibile creare da zero un oggetto o richiamarne uno già inserito.

Quando si vuole stampare un’oggetto già inserito precedentemente il nome del file verrà cercato nell’array degli oggetti. La ricerca viene effettuata a partire dall’ultimo elemento in quanto sono molto più probabili gli inserimenti consecutivi di immagini rispetto a quelli richiesti in punti molto diversi e lontani di una pagina.

Le 3 istruzioni fondamentali

1. Crea l’oggetto della classe specificando l’url di base delle immagini, il separatore (boundary) e la versione MIME
2. Stampa l’intestazione “Content-Type” e “MIME Version”
3. In fondo alla pagina viene stampata la lista dei dati in base64 che servono a Internet Explorer, mentre per gli altri browser i dati codificati vengono specificati all’interno del tag in cui si utilizzano

Come inserire un’immagine

Sono state create due funzioni distinte per l’inserimento di un’immagine compatibile con IE o con gli altri browser (rispettivamente incIE e inc). Analizziamo i casi più comuni relativi all’utilizzo di queste funzioni.

• Inserire un’immagine in modo che sia compatibile con tutti i browser. Richiamare la funzione inc() all’interno dell’attributo “data” del tag <object>, passando come parametri il percorso del file e il tipo mime. All’interno dei tag <object> e </object> inserire il tag <img> richiamando la funzione incIE() all’interno dell’attributo “src”. Alla funzione incIE basterà passare solo il nome del file grazie al quale verranno recuperati gli altri dati relativi all’oggetto da stampare.
• Inserire un’immagine esistente. Alle funzioni inc() e incIE() basterà passare il nome del file.

Demo e download

Per vedere una demo vai su http://test.jblog.it/mhtml1/

Per scaricare la classe MimeHtmlHandler e l’esempio vai su http://download.jblog.it/mhtml1.zip

Esempio2. CSS e data:URL

Per utilizzare la classe MimeHtmlHandler all’interno di un file CSS, la prima operazione da fare è impostare il server Apache in modo che processi i file CSS come file PHP. Per fare ciò basterà aggiungere queste righe:

<FilesMatch "myfile.css$">
	AddHandler application/x-httpd-php .css
</FilesMatch>

Infine componiamo il file css:

• processandolo come file php si perde la natura del file css che ripristiniamo inviando l’header “Content-Type:text/css”
• includiamo la classe MimeHtmlHandler, e richiamiamo le prime due funzioni fondamentali (costruttore e printHeader() )
• componiamo il corpo del file css utilizzando, dove occorrono, le funzioni inc() e incIE()
• infine, richiamiamo l’ultima funzione fondamentale incAll() per stampare la lista dei file che servirà ad Internet Explorer

<? header("Content-Type: text/css"); ?>
/*<?
include("MimeHtmlHandler.php");

// ( 1 ) Crea l'oggetto
$mhh = new MimeHtmlHandler("http://localhost","|b|o|u|n|d|a|r|y|","");

// ( 2 ) Header "Content-Type" e "MIME Version"
$mhh->printHeader();
?>*/

#test1 {
  background-image: url("<? $mhh->inc("2.bmp","image/bmp"); ?>"); /* normal */
  *background-image: url(<? $mhh->incIE("2.bmp"); ?>); /* IE < 8 */
}

#test2 {
  background-image: url("<? $mhh->inc("1.bmp","image/bmp"); ?>"); /* normal */
  *background-image: url(<? $mhh->incIE("1.bmp"); ?>); /* IE < 8 */
}

div {
  width: 100px;
  height: 100px;
  font: bold 24px Arial;
}
/*<?
// ( 3 ) Crea la lista dei dati (per IE)
$mhh->incAll();

?>*/

Demo e download

Per vedere una demo vai su http://test.jblog.it/mhtml2/

Per scaricare la classe MimeHtmlHandler e l’esempio vai su http://download.jblog.it/mhtml2.zip

Considerazioni finali

Nei precedenti esempi abbiamo visto solo come utilizzare queste tecniche per allegare le immagini, anche perché è questa la situazione più frequente. Tuttavia, nello stesso modo potresti allegare facilmente oggetti flash e applet Java: nello stesso modo!

Compatibilità IE. Ho testato queste tecniche con Internet Explorer, dalla versione 5.5 alla 8 e non ho riscontrato grossi problemi. Una piccola anomalia si verifica quando si aggiorna la pagina più volte e le immagini non vengono caricate. Sinceramente non so da cosa può dipendere.

Queste tecniche, in confronto ai CSS Sprite sembrano “roba da smanettoni” a causa dell’ammasso di numeri e lettere che genera la codifica in base64 e dell’utilizzo (leggero) di php. Non farti ingannare… In fondo cosa c’è di così difficile?!? Dovrai solo pensare alcuni minuti alle immagini da allegare ai documenti (html, css, ecc.) e analizzare un po’ le velocità di caricamento per capire fino a che punto potranno avvantagiarti. Io dico di provarci!

Non escludo che nella classe MimeHtmlHandler ci possano essere dei bug. Per qualsiasi problema, chiarimento e curiosità sarei felice se mi contattattassi. Dimmi com’è andata e se queste tecniche ti sono state utili: non vedo l’ora di sapere gli esiti dei tuoi esperimenti!

Crediti

Phpied.com – data:urls – what are they and how to use them

Phpied.com – MHTML – when you need data: URIs in IE7 and under

Foto1. Vientiane 04 – Pink Dragonfruit shake di Ben Beiske

Ci sono 50 set di icone libere da royality e complete di tutti i maggiori social media. Quest’ultima caratteristica mi è piaciuta particolarmente poiché in tanti pacchetti mancavano le icone di social media anche abbastanza famosi come lastfm!!!

Spero ti sia gradito: http://directoryfordesigners.com/50-free-social-media-icon-sets-for-your-blog

Il sito è Directory4Designers, una directory sottoforma di blog in cui i web designer possono condividere i propri lavori e possono essere facilmente contattati tramite i social network. Da tenere d’occhio, magari abbonandosi ai feed…

Foto1. SmashingMagazine – Cheers: A Free “Social” Icon Set

Per quale motivo? Innanzitutto perché è interessante vedere come da jquery si possa passare ai classici oggetti javascript e poi perché in alcuni casi si preferisce programmare in javascript senza rinunciare ad alcune potenzialità di jquery come, ad esempio, i selettori, spesso argomento di scontro (e confronto) fra i vari framework. Inoltre, come dice ImpressiveWebs, alcuni sviluppatori si trovano a dover lavorare a progetti già avviati nei quali non è possibile (o non è sicuro) utilizzare librerie come jquery, mootools, dojo, ecc.

Un ringraziamento speciale va a ImpressiveWebs che mi ha gentilmente autorizzato a tradurre buona parte dell’articolo orginale.

getElementById: selezionare un elemento conoscendo l’id

Sappiamo che quasi tutti i tag html hanno l’attributo id. Questo attributo serve a identificare univocamente un elemento all’interno del documento html. Non è possibile specificare lo stesso id per due elementi diversi e, se ciò accade, il w3c validator segnalerà l’errore.

Supponiamo di avere un tag html con l’id “my_element_id”:

<div id="my_element_id">Questo è un elemento generico</div>

La caratteristica fondamentale dell’id ci permette di selezionare esattamente un elemento che ha come id un certo valore. Non a caso infatti la funzione restituisce un solo elemento e non un array di elementi, come avviene per funzioni che effettuano selezioni più generiche.

var elemento = document.getElementById("my_element_id");

Con jquery è possibile fare lo stesso ma, al contrario della precedente, la funzione jquery prevede la restituzione di un array di elementi poiché viene utilizzata anche per selezioni più generiche. Quindi sarà necessario selezionare il primo, nonché l’unico, elemento dell’array restituito. L’elemento ottenuto è esattamente uguale a quello ottenuto con la funzione getElementById.

var elemento = $("#my_element_id")[0];

Ottenuto l’elemento che si fà?

Si possono utilizzare tutte le proprietà e le funzioni (o meglio, metodi) javascript previste dal quel tipo di oggetto. Ad esempio:

elemento.style.border = "1px solid #000";
elemento.disabled = "true";

Se, invece, preferisci utilizzare jquery dovrai ricorrere necessariamente alle proprietà e ai metodi definiti nella libreria jquery. Ad esempio:

$("#my_element_id").css("border",""1px solid #000"");
$("#my_element_id").attr("disabled","true");

ATTENZIONE. Spesso si sbaglia la scrittura della funzione scrivendo getElementByID anziché getElementById (notare la “d” minuscola).

Vantaggi. L’utilizzo di questa funzione impone la definizione di identificatori per i vari elementi che si vogliono gestire all’interno di funzioni javascript. Questo rappresenta un vantaggio poiché si tende a migliorare la scrittura del codice html. Un’altro possibile vantaggio è la maggior velocità della selezione per id rispetto alla selezione fra un’insieme di più elementi, che vedremo di seguito.

getElementByTagName: selezionare un gruppo di tag

Se per qualche motivo non puoi o non vuoi specificare un id per alcuni elementi, questa funzione ti viene in aiuto. L’unico argomento della funzione è il tag degli elementi da selezionare i quali verranno poi restituiti in un array.

Esempio. Supponiamo di avere una lista di link e di voler selezionare solo quelli che hanno l’attributo “target” uguale a “_blank” in modo da modificare il valore di questo attributo in “_top”.

<ul id="lista_5link">
	<li><a href="link1.html" target="_blank">Primo link</a></li>
	<li><a href="link2.html">Secondo link</a></li>
	<li><a href="link3.html" target="_blank">Terzo link</a></li>
	<li><a href="link4.html" target="_top">Quarto link</a></li>
	<li><a href="link5.html" target="_self">Quinto link</a></li>
</ul>

Per selezionare i tag “<a>” con l’attributo “target” uguale a “_blank” dobbiamo innanzitutto ottenere un’array di tutti i tag “<a>” e successivamente modificare quelli che rispettano la nostra condizione.

var myLinks = document.getElementsByTagName("a");

for(i=0; i<myLinks.length; i++)
{
	if (myLinks[i].getAttribute("target") == "_blank")
	myLinks[i].setAttribute("target","_top");
}

Con jquery il tutto si riduce a:

$("a[target='_blank']").attr("target","_top");

Con “a” si chiede di selezionare tutti i tag “<a>” e con “[target='_blank']” si chiede che questi tag abbiano l’attributo “target” uguale a “_blank”. Infine con attr("target","_top"), che viene eseguito solo se è stato trovato il tag richiesto, si imposta l’attributo “target” con il valore “_top”.

Miglioramento. Per evitare che la ricerca dei tag “<a>” venga effettuata all’interno dell’intero documento, si può impostare l’id  alla lista in modo da restringere la ricerca agli elementi interni alla lista.

Al tag “<ul>” ho precedentemente assegnato l’id “lista_5link”. Ora vediamo come restringere la ricerca.

// Seleziona l'elemento con l'id "lista_5link"
var oggettoLista = document.getElementById("lista_5link");

// Dell'elemento "oggettoLista" ricaviamo l'insieme dei tag <a>
var myLinks = oggettoLista.getElementsByTagName("a");

// Il ciclo for rimane uguale al precedente
for(i=0; i<myLinks.length; i++)
{
	if (myLinks[i].getAttribute("target") == "_blank")
	myLinks[i].setAttribute("target","_top");
}

Con jquery si aggiunge il vincolo “#lista_5link”:

$("#lista_5link a[target='_blank']").attr("target","_top");
/* Invece di $("a[target='_blank']").attr("target","_top"); */

Soluzione ibrida

// Seleziona gli elementi <a> con jQuery
var myLinks = $("#lista_5link a")

// Il ciclo for rimane uguale al precedente
for(i=0; i<myLinks.length; i++)
{
	if (myLinks[i].getAttribute("target") == "_blank")
	myLinks[i].setAttribute("target","_top");
}

Osservazione. Potresti dirmi “perché non assegniamo lo stesso id a tutti i tag <a>?“. Questa operazione non si può fare poiché l’id, per sua natura, deve necessariamente essere unico all’interno del documento, cioè solo un elemento può avere un certo id. Infatti, come spiegato prima, l’id deve servire a identificare univocamente un solo elemento all’interno del documento html.

Leggere e scorrere i nodi del documento

Cosa sono i nodi? Un nodo è un qualsiasi elemento, tag, contenitore, blocco autonomo (es. <br />, <hr />), frammento di testo. I nodi hanno una relazione genitore-figlio. Ad esempio, nel caso della lista illustrata precedentemente, <ul> è il genitore e <li> il figlio, che a sua volta è il genitore di <a>.

Ogni elemento è un nodo e come tale ha alcune proprietà e metodi che ci permettono di ricavare i suoi figli diretti (children), il suo genitore (parent), e di manipolarli in vari modi.

Codice html che utilizzeremo per tutti gli esempi

<div id="parent_div">
	<p>Paragrafo1</p>
	<p>Paragrafo2</p>
	<a href="#">Link</a>
	<p>Paragrafo3</p>
	<h5>Titolo h5</h5>
</div>

Ottenere i nodi figli con childNodes e children

Le due proprietà, childNode e children, sono costituite da un array dei figli diretti.

La differenza fra le due consiste nel fatto che children ignora i nodi di tipo testo concentrandosi sugli elementi html e xml.

• La proprietà childNodes rileva come “figli del contenitore” tutti gli elementi: tag, elementi, testo, ecc. Come si può vedere in figura, l’array childNodes avrà 10 elementi: gli indici pari saranno gli elementi “testuali” e gli indici dispari i tag html. N.B. i blocchi evidenziati sono i figli “testuali”, quelli non evidenziati sono i figli “html”
• La proprietà children rileva come “figli del contenitore” solo i tag html. Quindi l’array children avrà solo 5 elementi: i tag contenuti nel div “parent_div”

Esempio. Supponiamo di voler assegnare a tutti i figli del div “parent_div” la classe “newclass”.

La proprietà children

// Otteniamo i figli diretti di "parent_div"
var div_children = document.getElementById("parent_div").children;

for(i=0;i<div_children.length;i++)
{
	// Assegniamo la classe "newclass"
	div_children[i].className="newclass";
}

ATTENZIONE. Ho riscontrato alcuni problemi legati a questa proprietà, ad esempio su Firefox. L’alternativa è proprio childNodes, da utilizzare con qualche piccolo accorgimento.

La proprietà childNodes e nodeType

Gli stessi risultati della proprietà children possono essere ottenuti con la proprietà childNodes, controllando il tipo di nodo che si sta leggendo grazie alla proprietà nodeType. Questa proprietà può avere 12 valori diversi (interi, da 1 a 12). La lista completa la puoi trovare qui: http://www.w3schools.com/Dom/dom_nodetype.asp . In particolare, poiché la proprietà children non considera i nodi testuali, controlliamo che nodeType non sia 3 (codice corrispondente ai nodi testuali).

// Otteniamo i figli diretti di "parent_div"
var div_children = document.getElementById("parent_div").childNodes;

for(i=0;i<div_children.length;i++)
{
	// Controlliamo il tipo di nodo: noteType=3 se è un nodo testuale
	if(div_children[i].nodeType==3) continue;

	// Assegniamo la classe "newclass"
	div_children[i].className="newclass";
}

Il risultato è identico al codice precedente in cui si utilizza la proprietà children.

Soluzione ibrida

// Selezione figli con jquery
var div_children = $("#parent_div").children();

// Ciclo for uguale al precedente
for(i=0;i<div_children.length;i++)
{
	// Assegniamo la classe "newclass"
	div_children[i].className="newclass";
}

N.B. la selezione con jquery ha lo stesso effetto della proprietà children, ovvero seleziona tutti i figli tranne quelli di tipo testuale.

Soluzione con jquery

// Selezione figli con jquery e assegnazione della classe "newclass"
$("#parent_div").children().addClass("newclass");

Con $("#parent_div").children() otteniamo i figli e con addClass("newclass") assegniamo la classe “newclass” ai figli trovati.

Ottenere il primo e l’ultimo nodo figlio con firstChild e lastChild

Normalmente per recuperare il primo o l’ultimo nodo figlio di un elemento si dovrebbero scrivere le seguenti righe di codice:

// Primo nodo figlio
var first_child = document.getElementById("parent_div").firstChild;

// Ultimo nodo figlio
var last_child = document.getElementById("parent_div").lastChild;

Problema. Come per la proprietà childNodes, anche queste leggono qualsiasi tipo di nodo. Quindi, se fra due elementi c’è un carattere di spaziatura o un tab, questo verrà considerato un nodo.

Soluzione. Con un semplice ciclo while possiamo leggere i successivi (o precedenti) nodi di tipo non testuale.

// Primo nodo figlio
var first_child = document.getElementById("parent_div").firstChild;

// Se il nodo letto è di tipo testuale leggiamo il successivo
while(first_child!=null && first_child.nodeType==3)
first_child = first_child.nextSibling;

// Ultimo nodo figlio
var last_child = document.getElementById("parent_div").lastChild;

// Se il nodo letto è di tipo testuale leggiamo il precedente
while(last_child!=null && last_child.nodeType==3)
last_child = last_child.previousSibling;

Osservazioni. Le condizioni del ciclo while controllano che il nodo sia stato trovato (cioé che sia diverso da null) e che il tipo sia testuale (cioé nodeType = 3). Se entrambe le condizioni sono verificate il nodo attuale viene rimpiazzato con il successivo (nel caso del primo nodo) o con il precedente (nel caso dell’ultimo nodo). Questo procedimento si ripete finché non ci sono più nodi figli o non viene trovato un nodo di tipo “non testuale”. La proprietà nextSibling permette di ottenere il nodo successivo; la proprietà previousSibling permette di ottenere il nodo precedente.

Soluzione ibrida con jquery

Poiché il metodo children() di jquery legge i nodi figlio di tipo “non testuale”.

Per ricavare il primo e l’ultimo nodo figlio si passa come argomento “:first” (per il primo nodo) e “:last” (per l’ultimo nodo).

// Primo nodo figlio
var first_child = $("#parent_div").children(":first");

// Ultimo nodo figlio
var last_child = $("#parent_div").children(":last");

Ottenere il genitore di un nodo con parentNode

Supponiamo di avere il seguente codice html:

<div id="parent_div">
	<p id="child1">Paragrafo1</p>
	<p id="child2">Paragrafo2</p>
	<p id="child3">Paragrafo3</p>
</div>

Per ottenere il genitore dei tre paragrafi utilizzeremo la proprietà parentNode su uno dei tre paragrafi.

var parent_node1 = document.getElementById("child1").parentNode;
var parent_node2 = document.getElementById("child2").parentNode;
var parent_node3 = document.getElementById("child3").parentNode;

Le tre variabili (parent_node1, parent_node2, parent_node3) avranno lo stesso nodo: il div “parent_div”.

Soluzione con jquery

// parent() restituisce un array di un solo elemento
var my_node = $("#ciaociao").parent()[0];

Ottenere i “fratelli” dei nodi con nextSibling e previousSibling

Per ottenere il fratello di un nodo si possono utilizzare due funzioni:

• nextSibling, per leggere il fratello successivo
• previousSibling, per leggere il fratello precedente

Supponiamo di avere il seguente codice html:

<div id="parent_div">
	<p id="child1">Paragrafo1</p>
	<p id="child2">Paragrafo2</p>
	<p id="child3">Paragrafo3</p>
</div>

Vogliamo ottenere il nodo corrispondente al paragrafo di id “child2″.

Problema. Anche queste proprietà selezionano i nodi di tipo “testuale”.

Soluzione. Inseriamo un ciclo while identico a quello scritto per le proprietà firstChild e lastChild.

// Ottenere il nodo "child2" partendo dal paragrafo "child1"
var node_child2_mod1 = document.getElementById("child1").nextSibling;

// Se il nodo letto è di tipo testuale leggiamo il successivo
while(node_child2_mod1!=null && node_child2_mod1.nodeType==3)
node_child2_mod1 = node_child2_mod1.nextSibling;

// Ottenere il nodo "child2" partendo dal paragrafo "child3"
var node_child2_mod2 = document.getElementById("child1").previousSibling;

// Se il nodo letto è di tipo testuale leggiamo il precedente
while(node_child2_mod2!=null && node_child2_mod2.nodeType==3)
node_child2_mod2 = node_child2_mod2.previousSibling;

Soluzione con jquery

Fortunatamente i metodi next() e prev() di jquery selezionano solo i nodi “non testuali” e restituiscono un set di nodi costituito di fatto da un solo nodo.

// Ottenere il nodo "child2" partendo dal paragrafo "child1"
var node_child2_mod1 = $("#child1").next()[0];

// Ottenere il nodo "child2" partendo dal paragrafo "child3"
var node_child2_mod2 = $("#child3").next()[0];

Attraversare i “fratelli” dei nodi con nextSibling e previousSibling

Supponiamo di voler modificare tutti i fratelli di un certo nodo. Per fare ciò è necessario scorrere tutti i nodi “fratelli” modificandoli in base alle nostre esigenze. In realtà l’attraversamento dei nodi fratelli l’abbiamo già fatto in occasione dei cicli while utilizzati per risolvere il problema della selezione dei nodi testuali.

Utiliziamo il codice html dell’esempio precedente.

// Otteniamo il nodo corrispondente al paragrafo "child1"
var node_child1 = document.getElementById("child1");

// Scorriamo tutti i fratelli di node_child1
while(node_child1!=null && node_child1.nodeType!=3)
{
	// Leggiamo il fratello di node_child1 e lo inseriamo nella stessa variabile
	node_child1 = node_child1.nextSibling;

	// Esempio: applichiamo la classe "newclass"
	node_child1.className="newclass";
}

Conclusioni

Queste sono alcune delle principali tecniche per selezionare e scorrere gli elementi html con il codice javascript “puro” e utilizzando il famoso framework jquery che, come avrai potuto notare, semplifica la scrittura di codice javascript e ne riduce drasticamente la lunghezza.

In queste situazioni preferisci utilizzare javascript puro o jquery? Hai avuto problemi durante l’utilizzo di queste tecniche? Si possono migliorare in qualche modo?

Crediti

• ImpressiveWebs – 10 Essential DOM Methods & Techniques for Practical JavaScript
• Libro. Javascript – La guida di Danny Goodman, Michael Morrison (McGraw-Hill)
• Foto1: Catch me if you can! di Josh n Jerry
• Foto2: http://www.freerepublic.com/focus/f-chat/2096935/posts
• Foto3: Node di dixit M
• Foto5: Climbing di docman

Non perdere il prossimo articolo sulle tecniche javascript e jquery per manipolare i nodi e gli elementi html.

Senza dubbio, il modo migliore per farlo consiste nell’utilizzo delle espressioni regolari, chiamate anche RegEx (da “regular expressions”).

Perché è il modo migliore? Anziché scrivere un’intera funzione composta da decine e decine di righe di codice, grazie alle RegEx basta defire il modello (o pattern) della stringa email e far eseguire il confronto da un’apposita funzione.

Caratteristiche di un indirizzo email

Il primo passo consiste nell’individuare le caratteristiche di un indirizzo email in modo da definirle successivamente in un modello (pattern).

Local part

Questa parte, che indica spesso l’username, può essere costituita da:

• un massimo di 64 caratteri
• lettere minuscole e maiuscole dell’alfabeto inglese, cioè a-z e A-Z
• numeri, da 0 a 9
• caratteri speciali . ! # $ % & ' * + - / = ? ^ _ ` { | } ~. Alcuni servizi email non permettono di creare indirizzi solo con i caratteri speciali più comuni come “.” , “-”, e “_”

N.B. il carattere “.” non può trovarsi né all’inizio né alla fine.

Domain name

La parte successiva alla “@” è il nome del dominio (es. example.com) che può essere costituito da:

• un massimo di 255 caratteri
• lettere minuscole dell’alfabeto inglese, cioè a-z
• numeri, da 0 a 9
• caratteri speciali “.” e “-”

N.B. il carattere “.” non può trovarsi né all’inizio né alla fine. Inoltre deve essere presente almeno un punto.

Il pattern per un indirizzo email

Ora che sappiamo la struttura di un indirizzo email possiamo definire precisamente il pattern che verrà confrontato all’indirizzo email da controllare.

Definiamo un pattern per indirizzi email semplici che contengano sono lettere, numeri, punti “.”, underscore “_” e trattini “-”. In seguito vedremo come modificare i pattern in modo da accettare anche i caratteri speciali.

Pattern per la “local part”

La prima parte impone che l’indirizzo inizi almeno con una lettera (maiuscola o minuscola) o con un numero. Vengono esclusi i caratteri con cui non può iniziare l’email.

La seconda parte è un po’ più complicata:

• vengono definiti tutti i caratteri accettati dall’email
• corrisponde a un punto seguito da a-z, A-Z, 0-9, – o 0
• il codice “\.?” indica che i successivi caratteri possono (opzionalmente) essere preceduti da un solo punto
• la parte [a-zA-Z0-9\-\_] è seguita dal carattere + perché deve essere trovato un carattere del tipo a-z, A-Z, 0-9, – o 0 almeno una volta
• viene racchiusa nelle parentesi tonde e seguita dal carattere * per impostare la condizione in base alla quale la seconda parte può essere presente facoltativamente

Pattern per il “domain name”

La prima parte impone che l’indirizzo inizi almeno con una lettera (maiuscola o minuscola) dell’alfabeto inglese. Vengono esclusi i caratteri con cui non può iniziare un nome di dominio.

Nella seconda parte, come per la “local part”:

• vengono definiti tutti i caratteri accettati dall’email
• corrisponde a un punto seguito da a-z, A-Z, 0-9, – o 0
• il codice “\.?” indica che i successivi caratteri possono (opzionalmente) essere preceduti da un solo punto
• la parte [a-zA-Z0-9\-\_] è seguita dal carattere + perché deve essere trovato un carattere del tipo a-z, A-Z, 0-9, – o 0 almeno una volta
• viene racchiusa nelle parentesi tonde e seguita dal carattere * per impostare la condizione in base alla quale la seconda parte può essere presente facoltativamente

La terza parte impone la presenza di un punto fra il nome del dominio e il codice del dominio di primo livello. In pratica, se il dominio è example.com, il punto di cui si impone la presenza è quello che si trova fra example e com.

L’ultima parte stabilisce il formato del codice del dominio di primo livello. Questo deve essere composto da almeno due caratteri e da sole lettere (del tipo a-z e A-Z) dell’alfabeto inglese.

Lunghezza della “local part” e del “domain name”

Purtroppo non è possibile imporre la lunghezza totale dei due segmenti (o almeno io non ci sono riuscito).

Scrivendo (\.?[a-zA-Z0-9\-\_]){0,63} la condizione {0,63} viene attribuita sia \. sia a [a-zA-Z0-9\-\_]. Quindi, l’indirizzo email risulterà troppo lungo se sia i punti sia i restanti caratteri corrispondenti a [a-zA-Z0-9\-\_] saranno più di 63. Ecco cosa succederebbe:

• punti<=63, caratteri<=63: indirizzo ok
• punti>=63, caratteri<=63: indirizzo errato
• punti<=63, caratteri>=63: indirizzo ok (non è ciò che vogliamo)
• punti>=63, caratteri>=63: indirizzo errato

Il terzo caso non va bene a causa dei controlli sul numero dei caratteri. Infatti, se i caratteri sono più di 63 l’indirizzo email viene considerato corretto.

Ho fatto diverse prove ma ho sempre avuto esiti negativi. Come ho detto prima, probabilmente non ci sono riuscito io.

Sono ben accetti suggerimenti e soluzioni alternative.

La mia soluzione

In seguito vedremo che per controllare se i due segmenti rispettano le dimensioni massime, rispettivamente 64 e 255, si possono scrivere un paio di righe di codice per:

• dividere l’indirizzo email in due in corrispondenza della @
• controllare la lunghezza di ciascuna stringa

Accettare i caratteri speciali

Per fare in modo che la tua funzioni accetti alcuni o tutti i caratteri speciali basterà sostituire la stringa [a-zA-Z0-9\-\_] (presente nella “local part”) con la stringa [a-zA-Z0-9\-\_\!\#\$\%\&\'\*\+\/\=\?\^\`\{\|\}\~].

Se non vuoi accettare alcuni caratteri bisogna eliminare il carattere speciale e il “\” che lo precede.

Codice Javascript

function isEmail(string)
{
	/* Confronta la stringa con il pattern RegEx */
	if(string.search(/^[a-zA-Z0-9]+(\.?[a-zA-Z0-9\-\_]+)*\@[a-zA-Z]+(\.?[a-zA-Z0-9\-\_]+)*\.[a-zA-Z]{2,}$/)==-1)
	return false;

	/* Divide l'indirizzo in due parti: "local part" e "domain name" */
	var parts = string.split("@");

	/* Controlla se "local part" supera i 64 caratteri */
	if(parts[0].length>64) return false;

	/* Controlla se "local part" supera i 255 caratteri */
	if(parts[1].length>255) return false;

	return true;
}

Codice PHP

function isEmail($string)
{
	/* Confronta la stringa con il pattern RegEx */
	if(!eregi("[a-zA-Z0-9]+(\.?[a-zA-Z0-9\-\_]+)*\@[a-zA-Z]+(\.?[a-zA-Z0-9\-\_]+)*\.[a-zA-Z]{2,}$",$string))
	return false;

	/* Divide l'indirizzo in due parti: "local part" e "domain name" */
	$parts = explode("@",$string);

	/* Controlla se "local part" supera i 64 caratteri */
	if(strlen($parts[0])>64) return false;

	/* Controlla se "local part" supera i 255 caratteri */
	if(strlen($parts[1])>255) return false;

	return true;
}

Demo e download

Per vedere lo script vai su http://test.jblog.it/email_checker/email_checker.txt

Per vedere una demo vai su http://test.jblog.it/email_checker/

Per scaricare l’esempio vai su http://download.jblog.it/email_checker.zip

Conclusione

Le espressioni regolari sono un potente strumento, ma fanno lavorare la cpu.

Quindi, ti consiglio di utilizzare le espressioni regolari solo quando la stringa da controllare ha un formato complesso come, appunto, un indirizzo email o un numero di telefono. Se invece devi verificare che contenga solo caratteri numerici è meglio ricorrere a funzioni che controllano carattere per carattere.

Per quanto riguarda le funzioni email, personalmente le ritengo buone ma non le migliori. Le ho provate e sembrano funzionare adeguatamente. Per qualsiasi errore o malfunzionamento io sono qui… Sono graditi consigli, critiche e opinioni in genere.

Crediti

Wikipedia (english) – E-mail address

Foto1 – Formatear cadenas de Texto/String como númericas con o sin decimales – Regex – Expresiones Regulares

Gestire la cache è fatica sprecata?

Assolutamente no! Il fatto è che ogni utente che accede al sito la prima volta deve comunque attendere il caricamento completo della pagina e dei suoi componenti, che vengono subito memorizzati in cache. Il miglioramento di prestazioni si verifica a partire dalla seconda pagina che viene visitata in quanto i componenti vengono letti dalla cache, evitando di effettuare nuove (e inutili) richieste http.

Vantaggi immediati

Diminuire i componenti di una pagina consente di avere un notevole aumento delle prestazioni che migliora l’esperienza tutti gli utenti, vecchi e nuovi, dalla prima all’ultima pagina.

In questo articolo vedremo alcune tecniche che riducono drasticamente il numero e il tempo di caricamento relativo a immagini, script e css. Queste tecniche non fanno altro che combinare questi componenti in modo da caricarne pochi ma più pesanti anziché molti ma leggeri. Parleremo di image maps, sprite css, dello schema data:URL, di generatori di sprite css, di come combinare automaticamente javascript e css, vedremo che a volte è meglio inserire il codice direttamente nella pagina html, e come è possibile evitare gli script duplicati.

Pochi ma buoni

A primo impatto potrebbe sembrare un’assurdità affermare che “è meglio caricare un file da 300 kbyte anziché 10 file da 40kb”. Fortunatamente non lo è!

Infatti, se prendiamo 10 immagini e le copiamo all’interno di un solo file immagine, quest’ultimo file occuperà molto meno rispetto alla somma delle 10 immagini. Il motivo è che nei file vengono memorizzate tantissime informazioni oltre al contenuto che i software ci mostrano.

Ad esempio, se apriamo una fotografia quello che vediamo è semplicemente un’immagine. Tuttavia, quel file contiene anche una serie di informazioni come: modello fotocamera, altezza, larghezza, risoluzione, ecc.

Caricare una sola immagine (ed un set di informazioni) è meglio che caricare dieci immagini (e dieci set di informazioni) perché:

• la dimensione del file più grosso è minore della somma di tanti file più piccoli
• tante richieste http si riducono a una sola

Mentre sulla riduzione delle richieste http possiamo essere d’accordo, credo che tu abbia qualche dubbio sul fatto che diminuisca la dimensione del file più grande. Bene, fai questo semplice esperimento:

• prendi un’immagine e fanne 10 copie
• crea un’immagine grande abbastanza da contenere perfettamente 10 immagini uguali
• confronta la dimensione dei 10 file immagine con quella del file immagine più grande

I componenti incriminati

Generalmente si focalizza l’attenzione su immagini, javascript e css perché sono presenti in tutte le pagine e, se mal gestiti, non solo provocano un eccessivo numero di richieste http ma rallentano il normale caricamento delle pagine.

Combinare le immagini: “image maps”

Se vogliamo inserire due immagini affiancate basta combinarle in un unico file immagine e inserire quest’ultimo all’interno della pagina.

I problemi nascono nel momento in cui, ad esempio, vogliamo applicare un diverso link a ciascuna immagine. Infatti, essendo un’unica immagine, non possiamo racchiuderla all’interno di un tag <a>, ma dobbiamo “mappare” le immagini.

Prima di illustrare i tre metodi è necessario descrivere gli strumenti a nostra disposizione.

Il tag <area>

Serve per creare le singole aree, cliccabili o meno, dell’immagine. Non richiede il tag di chiusura completo (</area>).

Formato. <area shape="..." coords="..." href="http://example.com/link1.html">

Per creare documenti più accessibili, si può utilizzare il tag <a>…</a> con gli stessi attributi di <area>. Infatti, grazie al tag <a> si può specificare un testo alternativo per l’area.

Formato. <a href="http://example.com/link1.html" shape="..." coords="..." />Area1</a>


shape: (default, rect, circle, poly), cioè (default, rettangolo, cerchio, poligono). Specifica la forma di una regione.

coords: coordinate. Specificano la posizione e la sagoma. Il numero e l’ordine dei valori dipendono dalla forma specificata da shape.

• rect: left-x, top-y, right-x, bottom-y. I vertici opposti del rettangolo.
• circle: center-x, center-y, radius. Coordinate del centro e lunghezza del raggio.
• poly: x1, y1, x2, y2, …, xN, yN. Coordinate di tutti i vertici del poligono.

href: link associato alla regione.

nohref: impostare con true per specificare che la regione non ha link associati, altrimenti non impostare.

Il tag <map>

Specifica una mappa da far richiamare da un oggetto. È richiesto il tag di chiusura </map>.

All’interno dei tag <map>…</map> si inseriscono tutte le aree relative alla mappa.

name. Assegna un nome alla mappa.

Associare una mappa a un elemento

Utilizzare l’attributo usemap fra gli attributi dell’elemento, specificando un URI.

Ricorda che un URI può essere un indirizzo del tipo http://www.example… o un id del tipo #nome-mappa.

Formato. <img src="foto.jpg" alt="La mia foto" usemap="mappafoto" />

Image maps lato client

La presenza di usemap implica che l’oggetto sia un immagine. Se non lo è, i browser potrebbero comunque implementare un’interazione con l’utente simile a quella per le immagini. Purtroppo non tutti i browser eseguono correttamente la mappatura di un immagine o di un oggetto.

Un blocco <map> può contenere sia elementi <area> sia elementi a livello di blocco come <a> per aumentare la compatibilità con i browser più datati.

Alcune osservazioni

1. Se sono presenti contemporaneamente <a> ed <area>, i browser recenti ignorano il tag <area>
2. Se due o più regioni si sovrappongono, la prima regione avrà la precedenza sulle altre
3. L’elemento <map> non è compatibile con i browser HTML 2.0

Demo e download

Per vedere una demo vai a http://test.jblog.it/imagemap_cs/

In quest’altro esempio le aree sono rettangolari, circolari e poligonali. http://test.jblog.it/imagemap_cs2/

Per scaricare entrambi gli esempi vai a http://download.jblog.it/imagemap_cs_cs2.zip

Esempio 1

Classico esempio con <map> all’interno dell’oggetto, ed i tag <a> all’interno di <map>.

<HTML>
	<HEAD><TITLE>The cool site!</TITLE></HEAD>
	<BODY>
	<P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
		<MAP name="map1">
			Navigate the site:
			<A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |
			<A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |
			<A href="search.html" shape="circle" coords="184,200,60">Search</A> |
			<A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A>
		</MAP>
	</OBJECT></P>
	</BODY>
</HTML>

Esempio 2

Come utilizzare la mappa richiamandola con usemap, senza inglobarla all’interno dei tag <object>.

<HTML>
	<HEAD><TITLE>The cool site!</TITLE></HEAD>
	<BODY>
	<P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"></OBJECT></P>
	<MAP name="map1">
		Navigate the site:
		<A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |
		<A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |
		<A href="search.html" shape="circle" coords="184,200,60">Search</A> |
		<A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A>
	</MAP>
</HTML>

Esempio 3

Utilizzo degli elementi <area>.

<HTML>
	<HEAD><TITLE>The cool site!</TITLE></HEAD>
	<BODY>
	<P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"></OBJECT></P>
	<MAP name="map1">
		Navigate the site:
		<AREA href="guide.html" alt="Access Guide" shape="rect" coords="0,0,118,28">
		<AREA href="search.html" alt="Search" shape="rect" coords="184,0,276,28">
		<AREA href="shortcut.html" alt="Go" shape="circle" coords="184,200,60">
		<AREA href="top10.html" alt="Top Ten" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">
	</MAP>
</HTML>

Esempio 4

Questo è un utilizzo concreto della condivisione di una mappa fra più immagini. Questo codice carica l’immagine più interna (navbar1.gif) se l’immagine esterna (navbar1.png) non viene processata correttamente dal browser. Ad entrambe le immagini viene associata la stessa mappa.

<HTML>
	<HEAD><TITLE>The cool site!</TITLE></HEAD>
	<BODY>
	<P><OBJECT data="navbar1.png" type="image/png" usemap="#map1">
		<OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"></OBJECT>
	</OBJECT></P>
	<MAP name="map1">
		Navigate the site:
		<A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |
		<A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |
		<A href="search.html" shape="circle" coords="184,200,60">Search</A> |
		<A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A>
	</MAP>
</HTML>

Esempio 5

Utilizzo combinato di <area> e <a> per avere una maggiore compatibilità. I browser più recenti non considerano gli elementi <area>.

<HTML>
	<HEAD><TITLE>The cool site!</TITLE></HEAD>
	<BODY>
	<P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"></OBJECT></P>
	<MAP name="map1">
		Navigate the site:
		<AREA href="guide.html" alt="Access Guide" shape="rect" coords="0,0,118,28">
		<AREA href="search.html" alt="Search" shape="rect" coords="184,0,276,28">
		<AREA href="shortcut.html" alt="Go" shape="circle" coords="184,200,60">
		<AREA href="top10.html" alt="Top Ten" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">
		<A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |
		<A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |
		<A href="search.html" shape="circle" coords="184,200,60">Search</A> |
		<A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A>
	</MAP>
</HTML>

Esempio 6

Come sovrapporre due aree. Da notare l’ultima coordinata specificata, il raggio). I due cerchi hanno lo stesso centro, ma il primo ha un raggio minore del secondo.

Il risultato è che posizionandosi sul primo (che non ha link) non appare la “manina”. Spostandosi leggermente fuori dal primo ci si posiziona sul secondo (che ha un link) ed appare la “manina”. In pratica, l’area specificata prima ha la precedenza sulle altre che sovrascrive.

<MAP name="map1">
	<A shape="circle" coords="100,200,50">Non ho link</A>
	<A href="outer-ring-link.html" shape="circle" coords="100,200,250">Ho un link</A>
</MAP>

Image maps lato server

A volte la mappatura delle immagini può essere troppo complicata da scrivere come html.

In questi casi è meglio ricorrere a tecniche lato server.

Partiamo dal codice html. Da notare l’attributo ismap.

<HTML>
	<HEAD><TITLE>The cool site!</TITLE></HEAD>
	<BODY>
	<A href="map_script.php">
		<IMG src="navbar1.png" alt="Navigazione" ismap />
	</A>
</HTML>

Come funziona? Quando ci si posiziona sull’immagine, il browser aggiunge all’url di <a>, quindi a map_script.php, le due coordinate. Ad esempio, se ci posizioniamo sul pixel di coordinate (18,46), il link del tag <a> verrà trasformato automaticamente da map_script.php a map_script.php?18,46.

Lo script lato server ha il compito di leggere i due parametri $_GET relativi alle coordinate e comportarsi a seconda dei valori letti.

<?php
/* $_GET array associativo. Ottiene le chiavi dell'array. */
$keys = array_keys($_GET);

/* Prende la prima chiave, la divide e inserisce i due valori in $x e $y */
list($x,$y) = explode(",",$keys[0]);

/* Comportamenti */
if(($x>=0 && $x<=118) && ($y>=0 && $y<=28))	 include("guide.html");
elseif(($x>118 && $x<=184) && ($y>=0 && $y<=28)) include("shortcut.html");
elseif( ($x>=(184-30) && $x<=(184+30)) && ($y>=(200-30) && $y<=(200+30)) ) include("search.html");
elseif(($x>220 && $x<=280) && ($y>=30 && $y<=54)) include("top10.html");
?>

Nel codice dell’esempio 1, l’area relatva a top10.html è un poligono. Non è semplice controllare se un punto è presente in un poligono. Bisogna trovare e utilizzare appositi algoritmi e funzioni. Potresti trovarli su geometryalgorithms.com (che nel momento in cui scrivo è “temporaneamente sospeso”).

Script, demo e download

Per vedere e scaricare lo script vai a http://test.jblog.it/imagemap_ss/map_script.txt

Per vedere una demo vai a http://test.jblog.it/imagemap_ss/

Per scaricare l’esempio vai a http://download.jblog.it/imagemap_ss.zip

Image maps lato client e lato server

Per avere la compatibilità con i vecchi browser è bene combinare le due tecniche.

<HTML>
	<HEAD><TITLE>The cool site!</TITLE></HEAD>
	<BODY>
	<A href="map_script.php">
		<IMG src="navbar1.gif" alt="Navigazione" usemap="#map1" ismap />
	</A>
	<MAP name="map1">
		Navigate the site:
		<A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |
		<A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |
		<A href="search.html" shape="circle" coords="184,200,60">Search</A> |
		<A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A>
	</MAP>
	</BODY>
</HTML>

Il testo alternativo

I tag <a> con il testo all’interno si utilizzano per avere un testo alternativo nel caso in cui l’immagine non venga caricata.

Naturalmente questo comportamento non è gestito dal browser, infatti il testo dei link appare sempre.

Per nasconderlo è necessario operare con i css. Consiglio anche di guardare le tecniche di “image replacement”.

Script, demo e download

Per vedere lo script vai a http://test.jblog.it/imagemap_css/map_script.txt

Per vedere una demo vai a http://test.jblog.it/imagemap_css/

Per scaricare l’esempio vai a http://download.jblog.it/imagemap_css.zip

Lo schema data:URL

Questa tecnica permette di inserire i dati direttamente nel codice html, risparmiando quindi la relativa richiesta http.

Scopriamo le carte e vediamo subito un esempio.

<IMG ALT="Foto" SRC="data:image/gif; base64,
	R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwhhx4dbgYKAAA7B72VFgl2Tf7452
	AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz
	ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp
	a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl
	ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis
	F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH" />

Dopo la paura iniziale, in genere ci si domanda: cosa sono quei caratteri e come faccio a inserirli?

Quell’ammasso di caratteri è la codifica in base64 dell’immagine. In pratica, è il contenuto del file immagine codificato in base64.

Per codificare un’immagine in base64 si utilizza una semplice funzione php: base64_encode.

L’ultima questione riguarda il tipo MIME che si può ottenere in due modi:

• utilizzando la funzione mime_content_type. Deve essere abilitata l’estensione php_mime_magic.dll.
• leggendo le informazioni su un file grazie le funzioni File Information di php. Era un’estensione PECL, ma ora non lo è più. Bisogna utilizzare la libreria esterna magic_open

Nel caso non si possano utilizzare queste funzioni si dovrà scrivere manualmente.

Come inserire un’immagine in base64 (senza funzioni per il tipo MIME)

<img src="data:image/jpeg;base64,<?
echo base64_encode(file_get_contents("img.jpg")); ?>" alt="Immagine" />

Come inserire un’immagine in base64 (con funzioni per il tipo MIME)

<? $mime = mime_content_type("img.jpg"); ?>
<img src="data:<? echo $mime; ?>;base64,<?
echo base64_encode(file_get_contents("img.jpg")); ?>" alt="Immagine" />

Script, demo e download

Per vedere lo script vai a http://test.jblog.it/img_base64/index.txt

Per vedere una demo vai a http://test.jblog.it/img_base64/

Per scaricare l’esempio vai a http://download.jblog.it/img_base64.zip

Gli sprite CSS

Partiamo dalla situazione più comune. Supponiamo di voler realizzare un menù composto da 5 pulsanti grafici che cambino colore quando si passa sopra col mouse. La cosa più logica sarebbe quella di creare 10 immagini: 5 per il pulsante in modalita “normale”, 5 per il pulsante in modalità “mouse sopra”.

Poiché caricare 10 immagini significa effettuare 10 richieste http, utilizziamo la tecnica degli sprite CSS.

Questa tecnica consiste nel:

• creare un file immagine abbastanza grande da contenere tutte e 10 le immagini del menù (come ho detto all’inizio dell’articolo, è meglio un’immagine grande anziché tante piccole immagini)
• impostare questa immagine come sfondo agli elementi del menù (cioè <a>, <li>, <div>, ecc.)
• per ogni elemento impostare la proprietà background-position per spostare lo sfondo all’interno dell’elemento in modo da avere l’immagine desiderata

Gli utilizzi di questa tecnica sono infiniti: dal menù al singolo rollover, dalla serie di immagini allineate al contenitore con gli angoli arrotondati.

VANTAGGI

• riduce notevolmente le richieste http e migliora il caricamento delle pagine
• elimina del tutto i ritardi relativi ai rollover poiché non viene caricata una nuova immagine ma viene spostato lo sfondo

SVANTAGGI

• richiede un po’ più di lavoro nell’impostazione dei css e nella creazione delle immagini
• non è sempre possibile combinare in una sola immagine tutte le immagini del sito, a causa delle difficoltà che si incontrano nel posizionamento dello sfondo con le regole dei css

Esempio 1

Inserire le immagini con il tag <img>. Questo metodo è a dir poco geniale poiché permette di inserire le immagini come si è sempre fatto col vantaggio di ridurre le richieste http. In pratica viene impostato lo sfondo al tag <img>.

L’articolo completo è di CssGlobe. Lo puoi trovare qui.

Abbiamo bisogno di un’immagine gif trasparente 1px x 1px (spacer.gif), e l’immagine sprite (tuttelefoto.jpg).

tuttelefoto.jpg – L’immagine sprite che utilizzeremo

<html>
<head><title>Sprite CSS - Esempio 1</title></head>
<body>
	<img src="spacer.gif" id="foto1" alt="Foto1" />
	<img src="spacer.gif" id="foto2" alt="Foto2" />
	<img src="spacer.gif" id="foto3" alt="Foto3" />
</body>
</html>

L’immagine trasparente serve per far assumere al tag <img> il suo normale comportamento (ad es. in modo che quando selezioni l’immagine si colora l’area di <img>).

Codice css

#foto1, #foto2, #foto3 { background:url(tuttelefoto.jpg) no-repeat; }
#foto1 { width:100px; height:50px; background-position:0px 0px; }
#foto2 { width:120px; height:90px; background-position:0px -50px; }
#foto3 { width:90px; height:130px; background-position:-120px 0px; }

Demo e download

Per vedere una demo vai a http://test.jblog.it/img_sprite1/

Per scaricare l’esempio vai a http://download.jblog.it/img_sprite1.zip

Esempio 2

Un’altro modo per inserire delle immagini è impostarle come sfondo ad elementi flottanti.

spriteimg.png – L’immagine sprite che utilizzeremo

<html>
<head><title>Sprite CSS - Esempio 2</title></head>
<body>
	<a href="#" id="feedburner"></a>
	<a href="#" id="subscribe"></a>
	<a href="#" id="bookmarks"></a>
</body>
</html>

Demo e download

Per vedere una demo vai a http://test.jblog.it/img_sprite2/

Per scaricare l’esempio vai a http://download.jblog.it/img_sprite2.zip

Codice css

#feedburner { margin-right:20px; background:url(spriteimg.png) no-repeat -5px -5px; float:left; width:91px; height:29px; }
#subscribe { margin-right:20px; background:url(spriteimg.png) no-repeat -5px -35px; float:left; width:127px; height:18px; }
#bookmarks { background:url(spriteimg.png) no-repeat -5px -55px; float:left; width:127px; height:18px; }

Esempio 3

Gli sprite css sono ideali per sviluppare menù di navigazione.

spritemenu.png – L’immagine sprite che utilizzeremo

<html>
<head><title>Sprite CSS - Esempio 3</title></head>
<body>
	<ul id="navmenu">
		<li id="nav_homepage"><a href="#"></a></li>
		<li id="nav_informazioni"><a href="#"></a></li>
		<li id="nav_catalogo"><a href="#"></a></li>
		<li id="nav_indirizzi"><a href="#"></a></li>
		<li id="nav_contact"><a href="#"></a></li>
	</ul>
</body>
</html>

Codice css

#navmenu ul { list-style:none; }
#navmenu li { float:left; list-style:none; }
#navmenu a { display:block; height:30px; width:135px; background:url(spritemenu.png) no-repeat;  }

#nav_homepage a:link, #nav_homepage a:visited { background-position:0px 0px; }
#nav_informazioni a:link, #nav_informazioni a:visited { background-position:-270px 0px; }
#nav_catalogo a:link, #nav_catalogo a:visited { background-position:-560px 0px; }
#nav_indirizzi a:link, #nav_indirizzi a:visited { background-position:-420px 0px; }
#nav_contact a:link, #nav_contact a:visited { background-position:-135px 0px; }

#nav_homepage a:hover, #nav_homepage a:focus, #nav_homepage a:active { background-position:0px -30px; }
#nav_informazioni a:hover, #nav_informazioni a:focus, #nav_informazioni a:active { background-position:-270px -30px; }
#nav_catalogo a:hover, #nav_catalogo a:focus, #nav_catalogo a:active { background-position:-560px -30px; }
#nav_indirizzi a:hover, #nav_indirizzi a:focus, #nav_indirizzi a:active { background-position:-420px -30px; }
#nav_contact a:hover, #nav_contact a:focus, #nav_contact a:active { background-position:-135px -30px; }

Demo e download

Per vedere una demo vai a http://test.jblog.it/img_sprite3/

Per scaricare l’esempio vai a http://download.jblog.it/img_sprite3.zip

Generatori di Sprite CSS

I generatori di sprite css semplificano la creazione di un’immagine abbastanza grande da contenere tutte le immagini da utilizzare nel proprio sito. Questi, secondo me, sono i migliori.

Generatore di Sprite CSS
http://spritegen.website-performance.org/
https://launchpad.net/css-sprite-generator (codice sorgente)

CSS Sprites Generator
http://www.csssprites.com/

CSS sprites for humanoid beings (and the like)
http://printf.ru/spritr/

SmartSprites (Alpha!)
http://smartsprites.osinski.name/

Combinare javascript e css

Spesso una pagina richiama più di uno script e più di un css. Per ridurre le richieste http relative ai css (o agli script) basta copiare il contenuto di tutti i file css (o script) in un unico file.

Il bello di questa tecnica è che, a differenza delle immagini, è quasi sempre possibile combinare tutti i file dello stesso tipo in un unico file. Il “quasi” è dovuto al fatto che alcuni script, se inseriti nello stesso file, potrebbero dare dei problemi. Quindi è sempre meglio testare il funzionamento dello script combinato. Se si verificano dei problemi, basta escludere dalla fusione i file “incompatibili”.

La combinazione degli script in un unico file può essere eseguita in due modi:

• manualmente, cioé copiando il contenuto di ogni script all’interno di un file più grande
• dinamicamente, ricorrendo a semplici script lato server

Gli script lato server che vedremo sono strutturati in 5 fasi:

• lettura dei nomi dei file da includere passati come parametri $_GET
• impostazione delle opzioni
• inclusione effettiva dei file
• stampa dei campi di intestazione con la funzione header() per la gestione della cache, il tipo mime, ETag
• stampa del contenuto finale del file

Script php: combinare più file css

La particolarità dello script relativo ai file css è che per ogni file da includere è necessario specificare l’attributo media (all, screen, print, ecc.), cioé quell’attributo che indica il tipo di dispositivo per cui deve valere quel file css. Non è necessario specificare l’estensione dei file poiché viene aggiunta automaticamente all’interno dello script.

Attenzione. Non passare nomi di file contenenti il carattere “.” in quanto, nelle richieste $_GET, viene convertito automaticamente in “_”.

Codice html

<link rel="stylesheet" type="text/css"
href="combined.css?file1:all&file2:screen&file3:print" />

Impostare Apache

Poiché lo script che ha l’estensione .css è necessario impostare il server Apache affinché processi il file combined.css come un file .php. Basterà aggiungere un paio di righe.

<FilesMatch "combined.css$">
	AddHandler application/x-httpd-php .css
</FilesMatch>

Script, demo e download

Per vedere lo script vai a http://test.jblog.it/combine_css/combine.txt

Per vedere una demo vai a http://test.jblog.it/combine_css/combine.css?file1:all&file2:screen&file3:print

Per scaricare l’esempio vai a http://download.jblog.it/combine_css.zip

Script php: combinare più file javascript

Non è necessario specificare l’estensione dei file poiché viene aggiunta automaticamente all’interno dello script.

Attenzione. Non passare nomi di file contenenti il carattere “.” in quanto, nelle richieste $_GET, viene convertito automaticamente in “_”.

Codice html

<script type="application/javascript" src="combined.js?file1&file2&file3"></script>

Impostare Apache

Poiché lo script che ha l’estensione .js è necessario impostare il server Apache affinché processi il file combined.js come un file .php. Basterà aggiungere un paio di righe.

<FilesMatch "combined.js$">
	AddHandler application/x-httpd-php .js
</FilesMatch>

Script, demo e download

Per vedere lo script vai a http://test.jblog.it/combine_js/combine.txt

Per vedere una demo vai a http://test.jblog.it/combine_js/combine.js?file1&file2&file3

Per scaricare l’esempio vai a http://download.jblog.it/combine_js.zip

Stampare javascript e css nel codice html

Sappiamo che per utilizzare codice javascript o css ci sono 3 modi:

1. stamparli direttamente nel codice html
2. dividerli su più file esterni (da richiamare)
3. stamparne alcuni e richiamare gli altri

Il terzo metodo

Come succede in tante occasioni, la “via di mezzo” è da preferire. La successiva domanda è: su che criterio si scelgono i file da stampare nel codice html e quelli da richiamare esternamente?

Sinceramente, non saprei dirlo con precisione. Probabilmente esistono degli studi che potrebbero aiutarti in questo. Secondo me, il codice da stampare nel documento html è quello che presumibilmente potrebbe essere utilizzato prima. Ad esempio:

• per javascript, il codice e le funzioni che verranno eseguite nell’evento “onload” dell’oggetto “document”
• per i css, il codice che serve a formattare gli elementi principali della pagina, come html, layout, contenitori, ecc.

Come automatizzare il tutto

Fortunatamente, questa tecnica si può automatizzare con un paio di righe di codice lato server (php).

<html>
<head>
<title>Javascript e Css nella pagina</title>

<style type="text/css">
<?
	/* Array dei file css */
	$css_array = array("file3.css","file2.css");
	foreach($css_array as $css)
	{
		if(file_exists($css))
		include($css);
		echo "\n\n";
	}
?>
</style>

<script type="application/javascript">
//<![CDATA[
<?
	/* Array dei javascript */
	$js_array = array("file1.js","file3.js");
	foreach($js_array as $js)
	{
		if(file_exists($js))
		include($js);
		echo "\n\n";
	}
?>
//]]>
</script>

<!-- File css esterni -->
<link rel="stylesheet" type="text/css" href="file1.css" />

<!-- File javascript esterni -->
<script type="application/javascript" src="file2.js"></script>

</head>
<body>
	<h1>Javascript e Css nella pagina</h1>
	<p>Guarda il codice html</p>
</body>
</html>

Script, demo e download

Per vedere lo script vai a http://test.jblog.it/inhtml/inhtml.txt

Per vedere una demo vai a http://test.jblog.it/inhtml/

Per scaricare l’esempio vai a http://download.jblog.it/inhtml.zip

Eliminare gli script duplicati

Quando si gestiscono grandi progetti si rischia di stampare e richiamare gli stessi script.

Alcuni browser, come Firefox, evitano di effettuare una nuova richiesta http per un file che è stato già scaricato. Purtroppo Internet Explorer non lo fa. Allora è necessario trovare una soluzione che valga per tutti.

Una semplice soluzione consiste nel fare una funzione php che riceva il nome del file da linkare e si occupi di stampare i tag <script>. Per registrare gli script che vengono inseriti di volta in volta si utilizza un array in modo che la funzione, prima di inserire uno script, controlla se il nome dello script non è già presente nell’array.

Normalmente per inserire script e css si dovrebbe scrivere:

<link rel="stylesheet" type="text/css" href="print_style.css" media="print" />
<script src="library.js" type="application/javascript"></script>

Classe PHP: noDuplicate (per php 4 e php 5)

Ti descrivo brevemente la classe “noDuplicate”.

La struttura

class noDuplicate
{
	/* Array dei file javascript */
	var $js_array = array();

	/* Array dei file css */
	var $css_array = array();

	/* Stampa i file specificati. */
	function incScript() { ... }

	/* Privata: registra il file e stampa il link al file javascript */
	function __js($file) { ... }

	/* Privata: registra il file stampa il link al file css */
	function __css($file) { ... }
}

Creare l’oggetto

$noDuplicateObj = new noDuplicate();

La funzione incScript()

• il primo argomento deve essere “js” o “css”
• dal secondo argomento in poi accetta da uno a più file dello stesso tipo
• se si devono inserire file .css è necessario passarli nella forma [nomefile]:[media] (ad es. “style.css:print”). Se vengono passati nella forma normale (“style.css”,”file.css”) verrà automaticamente impostato “all” come media

// singolo file
$noDuplicate->incScript("css","file2.css:all");
$noDuplicate->incScript("js","file1.js");

// più di un file
$noDuplicate->incScript("css","file2.css:all","mystyle.css:screen");
$noDuplicate->incScript("js","file1.js","jquery.js","prototype.js");

// file css senza specificare il "media"
$noDuplicate->incScript("css","file1.css","file3.css");

Risultato

<!-- singolo file -->
<link rel="stylesheet" type="text/css" href="file2.css" media="all" />
<script src="file1.js" type="application/javascript"></script>

<!-- più di un file -->
<link rel="stylesheet" type="text/css" href="file2.css" media="all" />
<link rel="stylesheet" type="text/css" href="mystyle.css" media="screen" />
<script src="file1.js" type="application/javascript"></script>
<script src="jquery.js" type="application/javascript"></script>
<script src="prototype.js" type="application/javascript"></script>

<!-- file css senza specificare il "media" -->
<link rel="stylesheet" type="text/css" href="file1.css" media="all" />
<link rel="stylesheet" type="text/css" href="file3.css" media="all" />

Script, demo e download

Per vedere lo script vai a http://test.jblog.it/rem_duplicate/rem_duplicate.txt

Per vedere una demo vai a http://test.jblog.it/rem_duplicate/

Per scaricare l’esempio vai a http://download.jblog.it/rem_duplicate.zip

Conclusione

Queste tecniche esprimono la massima utilità e potenza se utilizzate contemporaneamente. La riduzione di richieste http e, quindi, l’abbassamento dei tempi di caricamento saranno notevoli.

Spero di essere stato abbastanza esaustivo e chiaro. Se non lo sono stato basterà dirmelo in modo da ritoccare l’articolo nelle sezioni meno comprensibili.

Hai mai utilizzato una di queste tecniche? Gli script hanno funzionato correttamente? È stato semplice metterle in pratica? Hai avuto concreti miglioramenti?

Prossimo appuntamento

L’ultima questione sull’ottimizzazione dei siti web riguarda appunto l’ottimizzazione dei componenti da caricare cioé:

• compressione delle immagini, degli script e dei css
• offuscamento del codice javascript
• utilizzo di gzip per la compressione delle pagine html, script e css

Non perdere il prossimo articolo sull’ottimizzazione dei componenti delle pagine web: codice html, immagini, script e css.

Crediti

• Libro. Creare siti web ad alte prestazioni di Steve Soulders
• WebSiteOptimization – Combine Images to Save HTTP Requests
• Yahoo Developer Network – Best Practices for Speeding Up Your Web Site
• W3C – Objects, Images, and Applets: Image maps
• The Internet Engineering Task Force – The “data” URL scheme
• CssGlobe – Creating easy and useful CSS Sprites
• Foto1: Mast Farm Picnic – 030 di JasonBechtel
• Foto2: Davide Rebellin Argento, la prima medaglia italiana di queste Olimpiadi di olimpiadi.blogosfere.it
• Foto3: Cats Puzzle di kaibara87
• Foto4: icone per sviluppatori
• Foto5: Puzzle di Egan Snow
• Foto6: Do not duplicate di Sam UL

Twitter

Il microblogging è un modo di bloggare che rispetta essenzialmente una regola: scrivere post utilizzando pochi caratteri (160 su Twitter).

Utilizzando Twitter sono rimasto sorpreso dal gran numero di gente interessante che si può trovare: dal medico che informa sui nuovi prodotti all’avvocato che dà consigli legali, dal blogger che segnala costantemente link “da vedere assolutamente” al webmaster che consiglia articoli, guide e libri da leggere.

Se hai un’azienda, un sito o un blog da far conoscere, Twitter è il posto giusto per farlo. Infatti grazie a Twitter, in pochi giorni potresti raggiungere centinaia di potenziali visitatori/lettori, conoscere ottime persone e iniziare a porre le basi per la tua community.

In questo articolo parlo dell’utilizzo di Twitter a scopi promozionali, i comportamenti da seguire per attrarre visitatori, come rendersi utili, come interagire con i followers e l’utilizzo di Twitter per l’azienda.

Un po’ di consigli

• Non è necessario leggere tutti i tweet (su Twitter, i post vengono chiamati anche “tweet”).
• Non c’è bisogno di rispondere ad ogni tweet rivolto a te (cioé quando scrivono un tweet che contiene “@tuonome”).
• Cerca persone interessanti e seguile: riceverai i loro tweet all’interno del tuo profilo.
• Avere migliaia di followers non significa necessariamente “essere i migliori”.
• Se pensi che un tweet non interessi a tutti, scrivi “@destinatario” all’interno del tweet per indicare che il messaggio è rivolto all’utente che si chiama “destinatario”. Se il tweet è rivolto a più utenti, basta inserire nel tweet la lista degli username facendoli precedere dalla “@” (es. “@dest1 @dest2 @dest3″).
• Utilizza i servizi per l’abbreviazione delle URL, come tinyurl.com, ow.ly, bit.ly. Abbreviare le URL è indispensabile. Hai a disposizione solo 160 caratteri: sfruttali bene!
• Utilizza software di terze parti per facilitarti la vita su Twitter, come TweetDeck e Twhirl.

Perché utilizzare Twitter?

• Twitter è un concentrato di persone interessanti dalle quali imparare qualcosa di nuovo ogni giorno.
• Le notizie arrivano molto più velocemente rispetto ai normali mezzi di comunicazione.
• Segnalando i tuoi lavori avrai centinaia di giudizi e opinioni.
• Migliora la presenza online e l’assistenza clienti delle aziende.

Maneggiare con cura

• Senza obiettivi e strategie Twitter diventa una perdita di tempo.
• Twitter potrebbe portarti lontano da attività più produttive.
• Ha ancora un po’ di bug ed è un po’ lento: non ancora è pronto per un utilizzo professionale.
• Anche utilizzando account protetti, non viene garantita la sicurezza. Quindi è meglio evitare lo scambio di informazioni confidenziali.

Cinguettare con successo

Ricorda: hai solo 160 caratteri a tua disposizione. Sfruttali al meglio scrivendo il necessario e segnalando ottimi contenuti.

• Invece di rispondere alla domanda “cosa stai facendo?” rispondi alla domanda “cosa ha attirato la tua attenzione?”.
• Renditi utile: parla di cose interessanti e condividi dei buoni link.
• Quando parli di qualcosa, non limitarti a due parole. Dai consigli, approfondisci, segnala immagini e risorse esterne.
• Quando inserisci il link di un post del tuo blog, non limitarti a linkare: spendi qualche parola per spiegare di cosa parli.
• Se ti capita di leggere un tweet interessante, fai il cosiddetto “retweet“, cioé pubblica un tweet con il link al tweet che hai letto.

In azienda

• Segnala i link verso i nuovi post del blog aziendale (o “corporate blog”), comunicati stampa, promozioni, novità.
• Utilizza Twitter per operazioni di marketing e pubbliche relazioni, come estensione del blog aziendale.
• Incarica più di un dipendente alla gestione dell’account aziendale di Twitter. Questo permette di aumentare il numero dei tweet e variare i contenuti.
• Se la tua azienda è molto grande, può essere utile avere più account dedicati a compiti diversi: assistenza clienti, promozioni, ecc.

Qualcuno parla di te

Appena ti iscrivi, cerca subito gli username simili al tuo e le persone con interessi simili ai tuoi.

Alcune aziende, almeno inizialmente, preferiscono “ascoltare” la gente che parla di loro.

• Utilizza la ricerca di Twitter, search.twitter.com
• Utilizza software come TweetDeck e Tweetie per eseguire e salvare le ricerche
• Salva le tue ricerche per consultarle periodicamente. Per tenere traccia delle ricerche su search.twitter.com basta abbonarsi ai feed RSS della pagina dei risultati di ricerca

C’è nessunooo?!?

Non basta scrivere e pubblicare materiale interessante. Bisogna dimostrare che dietro quell’account c’è una persona vera facendosi conoscere  meglio, in modo da conquistare la fiducia di potenziali lettori e clienti.

• Non automatizzare i tweet. Esistono strumenti come TwitterFeed che permettono la pubblicazione automatica di tweet che linkano il nuovo articolo del tuo blog. Non usarli. Rischieresti di far sembrare il tuo account come uno strumento rivolto solo alla promozione del tuo blog. Devi mostrare il tuo lato umano: scrivi i tweet personalmente.
• Twitter è nato per far comunicare la gente. Account a scopi promozionali e tweet impersonali allontanano lettori e clienti.
• Inserisci una tua foto e personalizza al meglio lo sfondo del tuo account.
• Discuti sugli interessi dei tuoi followers. Non è una perdita di tempo, ma contribuisce ad attrarre simpatie e a rendersi più umani.

Il lato umano dell’azienda

• La presenza su Twitter deve servire a dare un volto umano all’azienda. Bisogna parlare e comportarsi come una persona, anche se l’account rappresenza un brand. Alcune aziende preferiscono incaricare alcuni dipendenti alla gestione delle attività legate a Twitter: scrivere tweet, rispondere ai messaggi, cercare followers, ecc.
• Conversa amichevolmente con i tuoi followers, anche di argomenti non legati direttamente agli affari. Ad esempio, racconta i fatti che succedono con i tuoi dipendenti fuori dall’ambito lavorativo. Farai conoscere meglio la persona che c’è dietro.
• Alcune aziende permettono ai loro dipendenti di utilizzare Twitter per parlare dei propri lavori, dei nuovi prodotti e dei compiti che svolgono durante il lavoro. In questo modo si mettono in luce le persone che portano avanti l’azienda, aumentando la reputazione e il feeling con i clienti.

Interagisci con i tuoi followers e clienti

• Usa Twitter per porre delle domande ai tuoi clienti, e otterrai delle ottime risposte. In questo modo potrai effettuare dei sondaggi istantanei per sapere cosa vorrebbero. Ad esempio, l’argomento di un articolo, la scelta del nuovo tema del sito, ecc.
• Rispondi alle domande. La gente si riferisce all’account aziendale come se fosse una persona e si aspetta una certa disponibilità. In questo modo i clienti si sentiranno impegnati con il brand in prima persona.
• Twitter non deve sostituire il servizio clienti, ma deve contribuire ad avvicinare di più l’azienda ai clienti
• Twitter non deve sostituire l’email marketing, poiché non tutti i clienti hanno un account
• Rispondere ai commenti può essere un’ottimo servizio. Tuttavia, questo non è sempre vantaggioso in quanto l’azienda risulta molto più esposta a critiche e lamentele.

Twitter in azienda

• Cerca i tuoi collaboratori e dipendenti, e tieniti in contatto con loro. Conversare con il tuo staff contribuisce a rendere più forti i legami personali. Tuttavia, è necessario stabilire prima di cosa parlare in modo da evitare di pubblicare informazioni strettamente riservate. Per non rischiare, i membri del tuo staff potrebbero avere due account: uno pubblico e uno aziendale, per comunicare esclusivamente con i membri dello staff.
• Condividi idee e infomazioni riguardanti progetti sui quali si sta lavorando, con i membri del tuo staff.
• Segui gente interessante e attinente alla tua azienda. Segui i tuoi collaboratori, colleghi, società del tuo settore, brand simili e giornalisti importanti.
• Non si dovrebbe utilizzare Twitter per comunicare all’interno dell’azienda. Come detto prima, Twitter non offre alcuna garanzia sulla sicurezza. Se hai bisogno di comunicare con i dipendenti attraverso piattaforme di microblogging, esistono soluzioni professionali come Yammer e present.ly che ti permettono di farlo in tutta sicurezza.

Hai mai pensato a queste prospettive per promuovere il tuo sito, blog, o azienda su Twitter? Ne hai già sperimentato alcune? Com’è andata? Quanto è migliorato il rapporto con i tuoi lettori/clienti grazie a Twitter? Potresti farne a meno? Ti è piaciuto l’articolo?

Crediti

ChrisBrogan.com – 50 Ideas on Using Twitter for Business

ReadWriteWeb.com – 4 Ways Companies Use Twitter for Business

PcWorld.com – Nine Twitter Tips for Business

Ajax è una tecnica di programmazione (non un linguaggio) che ti permette di sviluppare applicazioni web interattive. In pratica, grazie ad Ajax puoi aggiornare alcuni dati della pagina senza ricaricare completamente la pagina, migliorando le prestazioni del tuo sito.

In questo articolo: effettuare le richieste e gestire le risposte, formati per lo scambio dati, utilizzare librerie e framework javascript, memorizzare Ajax in cache, evitare risposte duplicate, migliorare l’usabilità delle applicazioni ajax.

Il termine “Ajax” è l’acronimo di Asynchronous JavaScript and XML.

Vedremo che, nonostante la tecnica Ajax preveda l’utilizzo di XML, si potranno utilizzare altri formati per lo scambio dati.

Il termine “Ajax” è stato coniato da Jesse James Garret nel post “Ajax: A New Approach to Web Applications“, il 18 febbraio 2005.

Cosa succede con e senza Ajax

Supponiamo di avere una pagina con un form composto da tre campi di testo: nome, cognome e telefono. Lo script lato-server deve ricevere i tre dati, cercarli nel database e stampare l’indirizzo associato.

Importante. Generalmente, lo script utilizzato con una chiamata Ajax è diverso da quello utilizzato per l’esecuzione senza javascript.

L’esecuzione standard dello script

N.B. i rettangoli tratteggiati indicano cosa viene caricato.

Prima fase. Si carica la pagina html, si scrivono i dati nel form e si inviano al server premendo il pulsante “invia”. Oltre a quelle dei dati, il server riceverà le richieste http degli altri componenti della pagina che dovranno essere ricaricati.

Seconda fase. Il server cerca l’indirizzo nel database, e il browser ricarica completamente la pagina con i nuovi dati o con un messaggio di errore (es. “indirizzo non trovato”).

L’esecuzione dello script utilizzando Ajax

Prima fase. Si carica la pagina html, si scrivono i dati nel form e si inviano al server premendo il pulsante “invia”. Al server arriva solo una richiesta http: quella dei dati inviati. Inoltre vengono stampati i componenti da mostrare successivamente (“tutto ok!”, “i dati … correttamente”, ecc.) nascondendoli con le regole dei css.

Seconda fase. Il server cerca l’indirizzo nel database e, una volta trovato, viene rispedito al browser che aggiornerà il componente riservato all’indirizzo. Gli altri contenuti stampati precedentemente (“tutto ok!”, “i dati … correttamente”, ecc.), vengono resi visibili, mentre i componenti relativi al form vengono nascosti. Per nascondere e mostrare i componenti si utilizzano le regole dei css.

Framework e librerie javascript

Un framework javascript è un insieme di librerie che facilita la scrittura di codice e applicazioni javascript.

Perché utilizzare un framework?

• Ti permette di scrivere in poche righe quello che in javascript “puro” richiderebbe centinaia di righe
• Elimina il problema della compatibilità browser-javascript eseguendo istruzioni diverse a seconda del browser che si sta utilizzando

Ecco i framework più famosi.

Prototype

Prototype is a JavaScript Framework that aims to ease development of dynamic web applications.

http://www.prototypejs.org/

jQuery

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

http://jquery.com/

MooTools

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

http://mootools.net/

Dojo

Solve problems faster. Create better user experiences. Liberally licensed. Everything you need, all in one place.

http://dojotoolkit.org/

Ajax, jQuery e Php all’opera

Generalmente un’applicazione Ajax è composta dalla pagina html e dallo script lato-server da richiamare successivamente via javascript.

Il framework che utilizzo è jQuery, soprattutto perché, nel complesso, è molto più leggero e veloce rispetto agli altri.

Analizziamo ora il codice dell’applicazione Ajax di cui ho parlato prima.

Requisiti. Php 5.2, MySql 5, jQuery 1.3.

Demo dell’applicazione. Puoi provare l’applicazione Ajax qui.

Pagina html e codice javascript

Questa pagina si può dividere in due parti.

• codice html
• codice javascript per la gestione delle chiamate ajax e del codice html

Puoi vedere il file completo qui.

Html

All’interno del tag <body> si possono distinguere due <div>. Il primo (id=”form_panel”) ospita il form e un <h3> per la scrittura degli errori (id=”errors”); il secondo (id=”address_panel”) ospita un <div> (id=”the_address”) in cui si scriverà l’indirizzo trovato.

<body>
	<!-- Area del form -->
	<div id="form_panel">
		<h1>INSERISCI I DATI</h1>
		<h3 id="errors" style="display:none;color:#CC0000;"></h3>
		<form action="">
			<p>
				<div><b>Nome</b> <small>(solo lettere)</small></div>
				<input id="firstname" name="firstname" type="text" value="" />
				<small id="firstname_msg" style="color:#CC0000;"></small>
			</p>
			<p>
				<div><b>Cognome</b> <small>(solo lettere)</small></div>
				<input id="lastname" name="lastname" type="text" size="30" value="" />
				<small id="lastname_msg" style="color:#CC0000;"></small>
			</p>
			<p>
				<div><b>Telefono</b> <small>(numeri, trattino "-", parentesi "(" e ")", spazio " ")</small></div>
				<input id="phone" name="phone" type="text" value="" />
				<small id="phone_msg" style="color:#CC0000;"></small>
			</p>
			<p><input id="send" name="send" type="button" value="Invia" /></p>
		</form>
	</div>

	<!-- Area dell'indirizzo (trovato) -->
	<div id="address_panel" style="display:none;">
		<h1>INDIRIZZO</h1>
		<p id="the_address"></p>

		<a href="#" id="back_to_form">&lt; indietro</a>
	</div>
</body>

Javascript

Il codice javascript viene scritto direttamente nel codice html, ma potrebbe essere scritto in un file esterno (.js).

Vengono specificate 3 funzioni e 3 variabili.

$(document).ready(function(){ … }). In realtà, questa non è una funzione, ma un metodo di jQuery che, al posto dei “…”, consente di specificare il codice javascript da eseguire quando la pagina ha completato il caricamento.

function form_check(). Esegue dei controlli sui valori dei campi e restituisce “true” se non ci sono errori, altrimenti “false”.

function form_ajax_send(). Invia i dati del form allo script “myscript.php”, attende e gestisce la risposta.

var form_msgs = new Array(…). Array degli errori relativi al form (es. “dati non corretti”).

var error_msgs = new Array(…). Array degli errori relativi all’invio e alla risposta dei dati (es. “errore del db”).

var regexps = new Array(…). Espressioni regolari utilizzate in form_check() per controllare i caratteri dei dati inseriti.

L’oggetto XMLHttpRequest

Per inviare richieste http dinamiche bisogna utilizzare l’oggetto XMLHttpRequest. Questo oggetto ha una serie di proprietà e metodi.

Uno dei principali svantaggi legati all’utilizzo di questo oggetto sta nel fatto che non è standardizzato, quindi non è riconosciuto universalmente da tutti i browser. Infatti, Internet Explorer 6 e precedenti lo vedono come un ActiveX da richiamare in maniera diversa rispetto ai browser Mozilla.

La soluzione è quella di utilizzare un framework e lasciare che sia lui a occuparsi di effettuare i controlli di compatibilità e differenziare la chiamata e il funzionamento dell’oggetto XMLHttpRequest.

Per conoscere meglio l’oggetto XMLHttpRequest puoi consultare la pagina ufficiale del w3c (in inglese) oppure la pagina su Wikipedia.

Per approfondire la gestione di Ajax con jQuery puoi leggere la pagina della documentazione ufficiale di jQuery relativa ad Ajax: http://docs.jquery.com/Ajax.

Ajax

Analizziamo le righe di codice javascript relative alla gestione della richiesta e della risposta asincrona.

$.get("myscript.php",{firstname_get:firstname,lastname_get:lastname,phone_get:phone},
	// funzione "callback", cioé eseguita quando vengono restituiti i dati dallo script "myscript.php"
	function(data,status)
	{
		if(status=="success") { ... }
		else { ... } // status=="failure"
	}
);

$.get. Questa funzione effettua una richiesta GET. Alternativamente si poteva utilizzare $.post. A seconda del tipo di richiesta, nell0 script lato server bisogna utilizzare gli array $_GET e $_POST per ottenere i dati inviati.

“myscript.php”. Il primo argomento della funzione $.get. Specifica lo script da utilizzare.

{firstname_get:firstname,lastname_get:lastname,phone_get:phone}. Il secondo argomento della funzione $.get. Questo è un tipo di dati chiamato “Map”, dove “firstname”, “lastname” e “phone” sono le variabili riempite con i valori del form, e “firstname_get”, “lastname_get” e “phone_get” sono i nomi delle variabili passate allo script. Quindi, in myscript.php per leggere il cognome non utilizzeremo $_GET['lastname'] ma $_GET['lastname_get'].

function(data,status). Il terzo argomento della funzione $.get. Rappresenta la funzione “callback”, ovvero la funzione da utilizzare quando si riceve la risposta. Poiché la risposta è asincrona, cioé avviene in un secondo momento rispetto all’invio dei dati, non possiamo scrivere:

if(form_check())
{
	ajax_invia_dati();
	ajax_gestisci_risposta();
}

poiché, quando verrà chiamata la funzione ajax_gestisci_risposta() sicuramente la risposta non sarà ancora arrivata.

Per questo motivo è necessario specificare la cosiddetta funzione “callback” che verrà eseguita non appena ajax fornirà una risposta. Questa funzione ha due parametri: data (dati ricevuti), status (stato della risposta). Se status è “success” significa che tutto è andato a buon fine, altrimenti status sarà “failure”.

Come ottenere l’oggetto XMLHttpRequest. Le funzioni $.get, $.post, ecc. restituiscono l’oggetto XMLHttpRequest che potrà essere utilizzato con tutti i suoi metodi e le sue proprietà.

Script lato server (php)

• Effettua una connessione al database
• Esegue la query con i dati ricevuti
• Stampa una stringa fra queste: “db error”, “no data”, o l’indirizzo trovato

Puoi vedere il file completo qui.

<?php

header('Expires:'.date("D, d M Y H:i:s",time()+2600000).' GMT');
header('Cache-Control:public,max-age=2600000');

$mydb = @new mysqli('localhost', 'root', 'root', 'mydb');

if(mysqli_connect_errno()!=0) { echo 'db error'; }
else
{
	// effettua la query
	$result = @$mydb->query("
	SELECT	`Address`
	FROM	`info`
	WHERE	`Lastname`='".$_GET['lastname_get']."' AND
		`Firstname`='".$_GET['firstname_get']."' AND
		`Phone`='".$_GET['phone_get']."'		;");

	// controlla quanti record sono stati trovati (se 0: indirizzo non trovato)
	if($mydb->affected_rows==0)	{ echo 'no data'; }

	// indirizzo trovato
	else
	{
		$address = $result->fetch_array(MYSQLI_NUM);
		echo $address[0];
	}
}
?>

Dati restituiti dallo script

• “db error”, se si verifica un errore relativo al database (in fase di connessione)
• “no data”, se non viene trovato l’indirizzo
• stringa dell’indirizzo, se viene trovato l’indirizzo

Come impostare lo script per i test

Se vuoi testare lo script è necessario effettuare alcune semplici operazioni.

• All’interno di myscript.php individua la riga $mydb = @new mysqli(‘localhost’, ‘root’, ‘root’, ‘mydb’); e sostituisci i valori del tuo database: host, username, password, database.
• Crea la tabella “info” nel tuo database. Nello script c’è una query (CREATE TABLE … ) da copiare e far eseguire subito dal tuo dbms (es. phpMyAdmin). Se la crei manualmente è necessario creare 5 campi chiamati ID, Lastname, Firstname, Phone, Address.
• Infine, inserisci un paio di record in modo che l’applicazione Ajax possa trovare qualc0sa nella tabella.

Formati di scambio dati

Per i dati da inviare come risposta possono essere utilizzati vari formati: testo semplice, html, xml, json, ebml.

Lo script dell’esempio precedente stampa testo semplice.

Testo semplice e html

Preferibile se si devono sviluppare applicazioni semplici che non richiedono massicci scambi di dati e complesse elaborazioni.

Il maggior vantaggio sta nel fatto che testo semplice e codice html non richiedono ulteriori elaborazioni per rendere i dati rappresentabili all’interno di una pagina xhtml o html.

Json

Json, acronimo di JavaScript Object Notation,  è un ottimo formato per lo scambio dati.

Si possono rappresentare oggetti e array:

var object = { name : "Giacomo", phone: "123456789", object2: { msg: "Ciao" } };
var array = ["mystring", 100, { msg: "Ciao" }, object, 5*2, 0.134];

Per processare una risposta in formato Json, anziché $.get è necessario utilizzare$.getJson. Questa funzion processa automaticamente una risposta in formato Json in modo da poter utilizzare subito i dati.

Ad esempio, se la risposta è:

var object = { name : "Giacomo", phone: "123456789", object2: { msg: "Ciao" } };
var array = ["mystring", 100, { msg: "Ciao" }, object, 5*2, 0.134];

all’interno della funzione “callback” potremmo utilizzare le due variabili scrivendo semplicemente:

object.name.length; // per ottenere la lunghezza della stringa "Giacomo"
alert(object.object2.msg); // per stampare un alertbox con il messaggio "Ciao"
newvar = array[4] + 3; // per assegnare alla variabile newvar il valore (5*2)+3, cioé 13

Per saperne di più vai alla pagina ufficiale di Json: http://json.org/.

XML

XML, acronimo di eXtensible Markup Language, è un metalinguaggio di markup che permette di definire tag personalizzare per strutturare documenti complessi. Una volta ottenuta una risposta formattata in XML è necessario elaborarla per poterla gestire.

La lettura e l’elaborazione di un testo XML consiste nello scorrere la struttura del documento per recuperare i dati contenuti nei tag XML. Per scorrere la struttura del documento esistono librerie javascript che consentono di farlo semplicemente.

Utilizzare questo formato è vantaggioso nel caso in cui ci siano molti dati da ricevere, mentre è sconsigliabile nel caso in cui ricevano pochi dati in quanto i caratteri per i tag XML potrebbero superare quelli per i dati effettivi.

Memorizza le risposte Ajax in cache per evitare richieste duplicate

Come detto prima, le risposte Ajax non sono altro che risposte HTTP e, come in tutte le risposte HTTP, possono essere inviati gli header.

Naturalmente, gli header devono essere inviati dallo script lato server, prima di qualsiasi output.

Per memorizzare le risposte Ajax nella cache si possono utilizzare i campi di intestazione Cache-Control, Expires, Pragma, ETag. Nei casi in cui non si possa utilizzare la cache del browser ricorreremo a una tecnica javascript.

Per approfondire la gestione della cache dai uno sguardo al post precedente: http://jblog.it/2009/04/24/ridurre-richieste-http-come-utilizzare-cache-browser_124.html.

Richieste GET e POST: come si comporta il browser

Nell’esempio, utiliziamo un solo script lato server che restituisce 3 output diversi a seconda dell’esito dell’operazione: “db error” per l’errore del database, “no data” se non è stato trovato l’indirizzo, e la stringa dell’indirizzo trovato nel database.

Ti consiglio di leggere questo interessante articolo (in inglese) del w3c: URI, indirizzabilità, e l’uso di GET e POST.

Il comportamento del browser cambia in base al tipo di richiesta (GET e POST) e agli header inviati dallo script lato server. Analizziamo alcuni casi più da vicino.

Le richieste GET

L’indirizzo di una richiesta GET ha la forma:

http://localhost/ajax_phone/myscript.php?par1=ciao&par2=hello

Il comportamento di default del browser consiste nell’inviare sempre una nuova richiesta.

Tuttavia, se vogliamo che il browser memorizzi per 1 ora la risposta dello script lato server, inviamo i seguenti header:

header('Expires:Sun, 03 May 2009 23:18:45 GMT');
header('Cache-Control:public,max-age=3600');
header('Pragma:public');

In questo caso, quando l’applicazione Ajax invia la prima richiesta, il browser legge lo script e lo memorizza in cache. La volta successiva possono verificarsi due casi:

• se si inviano dei dati diversi (ad es., se invece di “par2=hello” inviamo “par2=welcome”) il browser effettua una nuova richiesta e la memorizza in cache
• se si inviano gli stessi dati, il browser si accorge che l’indirizzo della richiesta è uguale, quindi legge i dati dalla cache evitando di effettuare una nuova richiesta

Differenziare gli header. Se alcune richieste non devono essere memorizzate in cache, puoi inviare degli header diversi a seconda dell’ouput generato dallo script (prima di stampare qualsiasi output). Ad esempio:

if($output!="error")
{
	header('Expires:Sun, 03 May 2009 23:18:45 GMT');
	header('Cache-Control:public,max-age=3600');
	header('Pragma:public');
}
else
{
	header('Expires:Sun, 01 Jan 1970 02:00:00 GMT');
	header('Cache-Control:no-cache');
	header('Pragma:no-cache');
}

Forzare la richiesta. Per fare in modo che il browser effettui una nuova richiesta, anche se questa è già presente nella cache, basta inviare un ulteriore parametro con un valore variabile, ad esempio un numero casuale.

$.get("myscript.php",{firstname_get:firstname,lastname_get:lastname,phone_get:phone,random:Math.random()},
	function(data,status){...});

Le richieste POST

L’indirizzo di una richiesta POST ha la forma:

http://localhost/ajax_phone/myscript.php

E i parametri? Vengono inviati tramite protocollo HTTP, ma non sono visibili al browser.

Le richieste POST non possono essere memorizzate in cache.

Come evitare le richieste duplicate

Abbiamo visto che le richieste POST non possono essere memorizzate in cache.

Tuttavia è possibile evitare le richieste duplicate grazie a qualche riga di javascript.

Questa tecnica consiste nel memorizzare i dati inviati e ricevuti in un array, in modo che, prima di inviare una richiesta, si controlla se i dati da inviare sono già presenti nell’array. Se sono presenti, si leggono i dati ricevuti in corrispondenza dei dati richiesti e si procede con l’esecuzione dell’applicazione.

var my_array() = new Array();

/* Una volta riempito l'array avrà questo aspetto
myarray = Array(
	Array( Array('Mario','Rossi',3429752370), 'no data' ),
	Array( Array('Giacomo','Ratta',4325233), 'Via Beethoven, 21' ),
);
*/

Ogni elemento dell’array è un array di due elementi. Il primo è l’array dei dati inviati; il secondo è la stringa dell’output restituito.

// Esegue le operazioni con i dati ricevuti
function esegui_le_operazioni(data) { ... }

if(form_check())
{
	// Leggo i valori dei 3 campi del form
	firstname = $('#firstname').val();
	lastname = $('#lastname').val();
	phone = $('#phone').val();

	// Indica se sono state trovate i dati da inviare
	// Contiene l'indice dell'elemento contenente dati inviati e dati ricevuti
	found = -1;

	// Cerco i dati nell'array
	for(i=0;i<my_array.length;i++)
	{
		// (riga da adattare in base alle proprie esigenze)
		if(my_array[i][0][0]==firstname && my_array[i][0][1]==lastname && my_array[i][0][1]==phone)
		{ found=i; break; }
	}

	// I dati sono stati trovati
	if(found>=0)
	{
		esegui_le_operazioni(my_array[found][1]);
	}

	// Dati non trovati: nuova richiesta
	else {
		$.get("myscript.php",{firstname_get:firstname,lastname_get:lastname,phone_get:phone},
		// funzione "callback", cioé eseguita quando vengono restituiti i dati dallo script "myscript.php"
		function(data,status)
		{
			if(status=="success")
			{
				// Inserisco dati inviati e dati ricevuti nell'array
				// riga da adattare in base alle proprie esigenze)
				my_array.push(new Array(new Array(firstname,lastname,phone), data));

				esegui_le_operazioni(data);
			}
			else { ... } // status=="failure"

		}); //end-callback

	} //end-if
}

Quando utilizzare GET e quando POST

• Il metodo GET è da preferire quando si devono inviare dati per il normale funzionamento della pagina e degli script
• Il metodo POST si deve utilizzare quando quelli da scambiare sono dei dati sensibili (username, password, telefono)

Migliorare l’usabilità e l’accessibilità delle applicazioni Ajax

Spesso nella progettazione delle applicazioni Ajax l’usabilità lascia un po’ a desiderare: nessun messaggio di successo/errore, caricamenti infiniti senza segni di vita, ecc.

Certo, l’usabilità è un tema complesso e progettare siti e applicazioni usabili richiede tempo e buone competenze.

Tuttavia, ci sono alcune cose che devono essere fatte e che, fortunatamente, non richiedono troppo tempo.

Potrai vedere queste modifiche nello script di esempio.

Errori e messaggi

• Ogni campo di input deve avere la relativa area dedicata ai messaggi di errore (“dati obbligatori”, “caratteri non validi”, ecc.)
• La pagina deve avere un’area destinata ad ospitare i messaggi relativi all’esecuzione dello script (“ricerca eseguita con successo”, “errore dell’applicazione”, “errore del database”, ecc.)

Barra di caricamento

Nella maggior parte della applicazioni, per motivi tecnici, non è possibile inserire una barra di caricamento che rilevi la percentuale reale dei dati caricati fino a quel momento.

Generalmente, si preferisce mostrare un’immagine gif che può essere una barra di caricamento o un’animazione generica in modo che faccia sapere all’utente che l’applicazione sta lavorando.

Svantaggio. Durante il caricamento dei dati si potrebbe verificare un malfunzionamento che non blocca la richiesta. In questo caso il caricamento sarebbe infinito provocando l’abbandono del sito da parte dell’utente.

Soluzione 1. Puoi inserire un pulsante da far premere all’utente per fermare la richiesta http.

<button type="button" onclick="stopAjaxRequest();">Stop</button>

Soluzione 2. Analizza il tuo script e prevedi un tempo massimo entro cui restituire l’output, e, con javascript, impostare un timer che faccia fermare la richiesta Ajax una volta trascorso il tempo previsto.

// esegue la funzione stopAjaxRequest() dopo 10 secondi
setTimeout(stopAjaxRequest(),10000);

Come creare la funzione stopAjaxRequest().

• L’oggetto XMLHttpRequest ha il metodo abort() che permette di fermare una richiesta http.
• Le funzioni $.ajax, $.get, $.post, $.getScript, $.getJSON di jquery restituiscono un oggetto XMLHttpRequest.

1. Creiamo una variabile globale per l’oggetto XMLHttpRequest, che chiamiamo XHR

var XHR;

2. Creiamo la funzione stopAjaxRequest() che richiama XHR ed esegue il metodo abort()

function stopAjaxRequest() { XHR.abort(); }

3. Assegnamo a XHR l’oggetto restituito dalla funzione $.get che utilizziamo per inviare i dati

XHR = $.get("myscript.php",{firstname_get:firstname,lastname_get:lastname,phone_get:phone},
	function(data,status) { ... });

Se javascript è disabilitato…

Purtroppo, ancora oggi ci sono utenti che utilizzano browser che non eseguono codice javascript, che hanno scarsa compatibilità oppure con javascript disattivato.

La soluzione è quella di progettare applicazioni che funzionino sia con javascript che senza.

Questo potrebbe andare bene per la piccola applicazione Ajax realizzata per questo post. Tuttavia, se le applicazioni sono di un certo livello, il carico di lavoro aumenta notevolmente. Quindi progettare applicazioni ibride ha senso solo quando le applicazioni da realizzare devono offrire il massimo della compatibilità con i browser usati dagli utenti (ad es. siti governativi, pubblica amministrazione, ecc.)

Secondo me, data la piccola percentuale di browser non compatibili e di utenti che disattivano (erroneamente) javascript, e la presenza di siti importanti come ebay, microsoft, youtube che non offrono l’alternativa “no javascript”, si può benissimo sviluppare un sito senza preoccuparsi degli utenti che non potranno eseguire javascript.

Nel tag <noscript> è possibile inserire il codice html da eseguire in caso di “javascript disabilitato”.

Alcune volte l’ho utilizzato per nascondere dei componenti che avevano senso solo con javascript disabilitato. Lo so… sintatticamente non è corretto, però potrebbe esserti utile.

Supponiamo di avere un link che fa apparire un alert:

<a id="alert_click" href="#" onclick="javascript:alert('Ciao!');">Clicca qui</a>

Per nasconderlo, in caso di javascript disabilitato, scriviamo:

<noscript>
<style type="text/css">
#alert_click { display:none; }
</style>
</noscript>

Svantaggi di Ajax

• Le chiamate effettuate non vengono registrate nella cronologia, a differenza di quanto avviene utilizzando iframe nascosti
• I pulsanti “avanti” e “dietro” non sono utilizzabili poiché le chiamate Ajax non vengono memorizzate nella cronologia
• L’utilizzo esclusivo di javascript viola il requisito 15 della legge Stanca: “la pagina deve essere fruibile anche in assenza di script”
• L’oggetto XMLHttpRequest non è compatibile con tutti i browser. Internet Explorer 6 e precedenti lo vedono come oggetto ActiveX, e il browser potrebbe essere impostato a un livello di sicurezza tale da non permettere l’esecuzione di controlli ActiveX
• L’oggetto XMLHttpRequest può comunicare solo all’interno del dominio. Se la destinazione è esterna al dominio bisogna creare un proxy lato server per poter comunicare all’esterno.
• Poiché i motori di ricerca non eseguono codice javascript, essi non possono indicizzare i contenuti generati dinamicamente con javascript e Ajax

Libri e risorse utili

Ajax. Guida per lo sviluppatore. Seconda edizione. Hoepli (2007).

Con Ajax guida per lo sviluppatore scoprirete come sfidare le regole tradizionali di quello che può accadere sul Web e come liberarvi del consueto approccio “click and wait”, approfondendo le tecniche, i pattern e i casi di utilizzo di Ajax, così da crearvi un’esperienza d’uso senza precedenti nelle vostre applicazioni.

Link: http://www.hoepli.it/editore/visbook.asp?id=978-88-203-3923-4.

Ajax e Php. Sviluppare applicazioni web dinamiche. Hoepli (2007)

AJAX e PHP. Sviluppare applicazioni web dinamiche è la risorsa più pratica ed efficiente che possiate utilizzare per entrare nell’entusiasmante mondo di AJAX. Questo libro vi spiegherà infatti come creare applicazioni web in PHP che sfruttino al massimo le tecnologie Ajax.

Link: http://www.hoepli.it/libro/ajax-php.asp

Siti e pagine

Ajax: A New Approach to Web Applications

W3C: The XMLHttpRequest Object

Wikipedia: l’oggetto XMLHttpRequest

jQuery: Ajax

JSON.org

Ridurre le richieste HTTP (parte 1): come utilizzare la cache del browser

W3C: URIs, Addressability, and the use of HTTP GET and POST

In questo articolo parlo della cache dei browser, come e perché gestirla. Vedrai cos’è una richiesta http, un’intestazione http e le tre tecniche principali per istruire il browser su come dovrà comportarsi con gli elementi di una pagina, cioé, quando leggerli dal server d’origine e quando caricarli dalla cache.

Cos’è una richiesta http?

Quando il browser visita un sito apre una connessione con l’host (il server che ospita il sito), composta da una richiesta e da una risposta. Supponiamo di voler visitare la pagina http://jblog.it/informazioni.html.

La richiesta http che invia il browser

GET /informazioni HTTP/1.1
Host: jblog.it
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; it; rv:1.9.0.8) Gecko/2009032609 Firefox/3.0.8
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: it
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive

La risposta http

HTTP/1.1 200 OK
Date: Fri, 24 Apr 2009 10:26:08 GMT
Server: Apache
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: text/html; charset=UTF-8

Le informazioni inviate e restituite potrebbero essere molte di più, ognuna ha un suo preciso significato, e possono essere controllate e gestite via codice (lato client e lato server). Sul sito del w3c puoi trovare l’elenco completo dei campi di intestazione delle connessioni http: http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html.

La prima riga della richiesta: GET /informazioni HTTP/1.1

In questa riga si trovano sostanzialmente tre informazioni: il tipo della richiesta (GET, POST, HEAD, PUT, DELETE, OPTIONS, TRACE), l’indirizzo della risorsa (/informazioni) e il protocollo con cui si effettua la richiesta (HTTP/1.1).

La prima riga della risposta: HTTP/1.1 200 OK

Il codice 200 indica il successo della risposta http. Esistono vari codici numerici per indicare l’esito della risposta http. Ad esempio, il classico codice 404 indica che non è stata trovata la risorsa specificata nella richiesta http. Se ti interessa puoi trovare una lista completa su wikipedia: http://it.wikipedia.org/wiki/Elenco_dei_codici_di_stato_HTTP.

Perché bisogna ridurre le richieste http?

Il numero di richieste http dipende dal numero di elementi da caricare. Ad esempio, se in una pagina ci sono 2 immagini e 1 foglio di stile il browser effettuerà 4 richieste http (una è per il codice html della pagina).

Come avrai ben capito, la regola è “ridurre gli elementi della pagina”, o meglio “ottimizzare gli elementi di una pagina senza eliminarne nessuno”. Con “ottimizzare” non intendo “ridurre la loro dimensione”. Infatti riducendo la dimensione degli elementi avresti un miglior tempo di caricamento mantenendo lo stesso numero di richieste http.

Ottimizzare o ridurre?

Senza dubbio è importantissimo ottimizzare la qualità e le dimensioni dei componenti di una pagina, ma una singola richiesta http è molto più gravosa di qualche kbyte in più. Ecco perché ridurre le richieste http è fondamentale.

I campi di intestazione del protocollo HTTP per gestire la cache

Il protocollo HTTP 1.1 ha alcuni campi di intestazione (o header fields) che consentono di fornire alcune informazioni riguardo un file (data, ultima modifica, periodo, ecc.) e controllare la cache.

Cache-Control

Specifica le direttive che devono rispettare tutti i metodi di caching dei componenti restituiti. Le direttive di cache-control:

1. sovrascrivono gli algoritmi di caching di default
2. non possono essere specificate per una singola cache (se si utilizza un proxy o un gateway)
3. sono unidirezionali, cioè non implicano che la risposta abbia le stesse direttive

Alcune direttive possono essere utilizzate solo in fase di richiesta o solo in fase di risposta.

• direttive di richiesta: no-cache, no-store, max-age, max-stale, min-fresh, no-transform, only-if-cached, cache-extension.
• direttive di risposta: public, private, no-cache, no-store, no-transform, must-revalidate, proxy-revalidate, max-age, s-maxage, cache-extension.

public. La risposta può essere memorizzata in qualsiasi cache. Utile se si utilizza una cache condivisa.

private. La risposta non deve essere memorizzata nella cache condivisa.

no-cache. Evita che la risposta venga memorizzata in cache. SOLO in fase di risposta è possibile scrivere no-cache="field-name", dove field-name è il nome di un campo di intestazione che non si vuole memorizzare in cache. In pratica, quando una risposta (ad es. una pagina) viene memorizzata in cache, vengono memorizzati anche i suoi campi di intestazione. Se uno di quei campi è “Set-Cookie” e non vogliamo che venga memorizzato in cache basterà scrivere no-cache="Set-Cookie". In tal modo la pagina verrà comunque memorizzata in cache senza il campo di intestazione “Set-Cookie”. L’utilità? Dato che “Set-Cookie” crea un cookie, memorizzandolo con la pagina, quando si riutilizzerà la versione in cache verrà creato nuovamente il cookie.

no-store. Evita che la risposta venga memorizzata permanentemente nella memoria non-volatile. Questa direttiva si applica a qualsiasi tipo di cache (condivisa e non). La sua utilità consiste nel fatto che si impedisce la memorizzazione di vecchie versioni di pagine e documenti che vengono costantemente aggiornati.

s-maxage. Specifica il periodo (in secondi) dopo il quale devono essere aggiornate le risposte nella cache condivisa. Questa direttiva sovrascrive la direttiva max-age e il campo di intestazione expires.

max-age. Indica che il client è disposto ad accettare una risposta con un periodo (in secondi) maggiore di quello specificato. Se non è specificata la direttiva max-stale, il client non accetterà una risposta datata.

min-fresh. Indica che il client è disposto ad accettare una risposta che sia aggiornata almeno a un dato periodo (in secondi).

max-stale. Indica che il client è disposto ad accettare una risposta che supera la sua scadenza di un certo numero di secondi.

only-if-cached. Consente di caricare un contenuto solo se in cache è presente una sua versione, altrimenti non viene restituita alcuna risposta. Questa direttiva è utile nelle reti particolarmente lente.

must-revalidate. Poichè una cache può essere configurata in modo che ignori il tempo di scadenza di una risposta, questa direttiva consente di forzare l’aggiornamento di una risposta già memorizzata in cache. Questa direttiva viene sempre rispettata dal browser.

proxy-revalidate. Ha gli stessi effetti di must-revalidate, ma solo sulla cache condivisa.

no-transform. Evita che una cache intermedia (ad es. di un proxy) manipoli la risposta per risparmiare risorse. Infatti può succedere che un proxy comprima un’immagine per risparmiare spazio. Questa direttiva è utile nel caso di immagini da trasmettere fedelmente (ad es. in campo medico) in cui ogni pixel deve rimanere al suo posto.

Expires

Indica una data (con l’ora) a partire dalla quale la risposta memorizzata in cache deve essere considerata “vecchia”, quindi essere aggiornata.

La data deve essere espressa in un preciso formato definito dal protocollo HTTP. Ad esempio: Tue, 03 Nov 2007 17:30:00 GMT.

Expires: Tue, 03 Nov 2007 17:30:00 GMT

Pragma

Indica che la risposta non deve essere memorizzata in cache. L’unica direttiva è appunto “no-cache”.

In pratica esegue la stessa funzione di cache-control=”no-cache”, ma è necessario utilizzarla per mantenere la compatibilità con la versione 1.0 del protocollo HTTP.

Pragma: no-cache

ETag

Gli ETag o Entity Tag rappresentano un modo semplice ed efficiente per determinare se la risposta nella cache corrisponde a quella che si trova nel server di origine. Concretamente un ETag non è altro che una stringa che identifica univocamente una risposta memorizzata in cache.

Com’è composta la stringa? Non ha dei valori predefiniti ma deve essere creata in base a dei valori che potrebbero identificare la versione di una risposta. Generalmente si preferisce identificare le risposte in base alla data dell’ultima modifica e alla dimensione. Queste due informazioni vengono compresse in modo da formare un’unica stringa di dimensioni contenute, ad esempio utilizzando algoritmi di hashing come md5.

Gli svantaggi. L’unico svantaggio è che il formato e il valore di un ETag cambia da server a server. Se un determinato file risiede su più server nella stessa directory, con identiche dimensioni, permessi, timestamp, a seconda del server da cui si legge. La soluzione consiste nel creare il valore dell’ETag con un semplice script lato-server. In pratica, per avere dei benefici dagli ETag è necessario gestirli completamente con degli script lato-server, altrimenti è meglio non utilizzarli. Ecco un esempio di script.

ETag: "0401g4ff812fgk12gqg2g4j7"

Last-Modified

Rappresenta la data e l’ora dell’ultima modifica del file sul server d’origine nella forma, ad esempio, Tue, 03 Nov 2007 17:30:00 GMT.

Questo campo di intestazione è utile soprattutto nelle pagine dinamiche in cui vengono stampati dei dati ricavati da un database, o nei file creati dinamicamente (ad es. un foglio di stile che ne unisce 5 per evitare di avere 5 richieste http).

If-Match

Fornisce un metodo efficiente per controllare se la risposta ottenuta corrisponde a quella memorizzata in cache, utilizzando gli ETag, ed eventualmente aggiornarla. Viene anche usata per evitare modifiche accidentali sull’errata versione di una risorsa.

If-Match:* oppure If-Match:0401g4ff812fgk12gqg2g4j7

Nel primo caso, il carattere “*” è un carattere speciale e il campo fa corrispondere tutti i componenti di una risposta.

Nel secondo caso, il campo di intestazione fa corrispondere l’ETag con la stringa specificata.

If-None-Match

Fornisce un metodo efficiente per controllare se la risposta ottenuta corrisponde a quella memorizzata in cache, utilizzando gli ETag, ed eventualmente aggiornarla.

Al contrario di If-Match non si deve avere la corrispondenza con l’ETag confrontato o con il carattere “*”.

If-None-Match:* oppure If-Match:0401g4ff812fgk12gqg2g4j7

If-Modified-Since

Fornisce un metodo automatico per aggiornare la versione in cache di una risposta che non è stata modificata da una certa data (e ora) nel formato: Tue, 03 Nov 2007 17:30:00 GMT. Se la risposta è stata modificata a partire dalla data specificata si effettua l'aggiornamento della versione in cache, altrimenti viene restituita la versione memorizzata in cache.

If-Modified-Since: Sat, 12 Oct 2008 20:12:00 GMT

If-Unmodified-Since

Fornisce un metodo automatico per aggiornare la versione in cache di una risposta che non è stata modificata da una certa data (e ora) nel formato: Tue, 03 Nov 2007 17:30:00 GMT. Se la risposta NON è stata modificata a partire dalla data specificata si effettua l'aggiornamento della versione in cache, altrimenti viene restituita la versione memorizzata in cache.

If-Unmodified-Since: Sat, 12 Oct 2008 20:12:00 GMT

If-Range

Se la versione in cache di una risposta è parziale, questo campo di intestazione permette di ottenere solo la parte mancante. La condizione fallisce se la risorsa richiesta è stata modificata. In questo caso sarà effettuata una seconda richiesta per ottenere una risposta completa che aggiorni la versione memorizzata in cache.

If-Range: Sat, 12 Oct 2008 20:12:00 GMT

If-Range: 0401g4ff812fgk12gqg2g4j7

Nel primo caso si confronta la data dell’ultima modifica, mentre nel secondo caso si confronta la stringa dell’ETag.

Come utilizzare i campi di intestazione

In questo paragrafo non troverai una ricetta pronta per gestire la cache perché non so quali sono le tue esigenze. Leggi attentamente il paragrafo precedente per decidere le operazioni da effettuare in ogni pagina e risorsa del tuo sito.

Il mio consiglio è quello di analizzare i contenuti delle tue pagine (attuali e futuri) e decidere se memorizzare in cache una particolare risorsa, come gestire la versione della cache, il tempo di validità, ecc.

Se nel paragrafo precedente alcuni punti sono spiegati male, manca qualcosa o ci sono errori  fammelo sapere e correggerò tutto al più presto.

Ci sono tre metodi per impostare i campi di intestazione:

1. impostando il tag <meta>
2. all’interno del proprio codice lato-server (php, asp, cgi, ecc.)
3. configurando il web server Apache tramite il file .htaccess o il file principale httpd.conf

1. Impostare i tag <meta>

Sicuramente conoscerai già il tag <meta>. Probabilmente l’avrai utilizzato per inserire description e keywords nelle tue pagine web, per migliorare l’indicizzazione del tuo sito da parte dei motori di ricerca.

Per ogni campo di intestazione che decidi di utilizzare devi:

• creare un tag <meta> con gli attributi “http-equiv” e “content”
• scrivere il nome del campo nell’attributo ”http-equiv”, rispettando le lettere maiuscole e minuscole
• scrivere il valore del campo nell’attributo “content”

Esempi

<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="Tue, 03 Nov 2007 17:30:00 GMT" />

2. Il codice lato-server

Ogni linguaggio di programmazione ha la sua funzione per inviare un campo di intestazione.

Al momento l’unico linguaggio che conosco è PHP, con cui basterà scrivere header("Cache-Control: no-cache"); .

I campi di intestazione vanno scritti prima di qualsiasi output sulla pagina, altrimenti si verifica un errore che in sostanza dice “impossibile modificare l’intestazione – gli header sono stati già inviati”.

Tutto qui? In teoria non ci sarebbe altro… Posso solo aggiungere delle situazioni in cui diventa fondamentale utilizzare la funzione header.

Combinare più fogli di stile

Per diminuire le richieste http è una buona abitudine combinare più fogli di stile in uno solo. Si potrebbe fare manualmente, ma se in futuro vorrai effettuare delle modifiche dovrai modificare i singoli file e ricombinarli oppure modificare il file grande con la difficoltà di aver a che fare con centinaia di righe di codice.

Il metodo è quello di creare un file .css in cui inserire uno script php che permetta di stampare al suo interno tutti i file .css da te specificati. Dovrai inoltre impostare Apache affinché processi i file .css come file .php .

Per file dinamici di questo tipo sarà necessario richiamare più volte la funzione header all’inizio del file in modo da inviare i campi di intestazione riguardanti la gestione della cache.

Questo argomento farà parte del prossimo articolo su come combinare e ottimizzare immagini, css e script.

Ecco un semplice script php.

< ?
$files = array("css1.css","css2.css");
$mtime = 0;
$this_mtime = 0;
ob_start();
foreach($files as $file)
{
	if(file_exists($file))
	{
		include($file); /* includo il file */
		$this_mtime = filemtime($file); /* leggo la data dell'ultima modifica */
		if($mtime < $this_mtime) $mtime=$this_mtime;
	}
}
$lenght = ob_get_length(); /* lunghezza del contenuto */
$content = ob_get_contents(); /* il contenuto nella variabile $content da stampare successivamente */ ob_end_clean();

/* Headers */
header("Content-Type: text/css");
header("Last-Modified: ".date("D, d M Y H:i:s",$mtime)." GMT");
header("Content-Length",$lenght);
header("ETag: ".md5("compressed.css".$lenght.$mtime)); /* il file si chiama compressed.css */
header("Cache-Control: max-age=345600");

/* Stampo il contenuto */
echo $content;
?>

• per calcolare l’ultima modifica da inviare nel campo di intestazione “Last-Modified” sarà quella del file che è stato modificato più recentemente
• nell’ETag inserisco anche il nome del file per aumentare l’univocità dell’ETag

Come ultima operazione inserire nel file .htaccess la riga:

AddHandler application/x-httpd-php .css

Questa riga fa in modo che Apache processi i file css come file php.

Pagine dinamiche e database

Quando una pagina “dinamica” ha sempre gli stessi dati per diversi giorni è importante fare in modo che un utente, a partire dalla seconda visita, non ricarichi una nuova versione di quella pagina ma legga la versione memorizzata in cache.

Nei cms, come in Wordpress, c’è una netta separazione fra template e codice. In alcuni non è possibile creare un template per una singola pagina per altri, come Wordpress, si. Tuttavia, secondo me, è totalmente inutile creare un template per scrivere solo i tag <meta> e avere una gestione personalizzata della cache per quella pagina. Per questo motivo conviene inviare i campi di intestazione all’interno del codice.

Una prima idea è quella di definire delle condizioni per cui dei record restituiti dal database devono essere considerati “vecchi”, e in base a queste ed altre condizioni inviare gli opportuni valori dei campi di intestazione.

3. Configurare il web server Apache

Per gestire la cache con Apache è necessario caricare i moduli mod_expires e mod_headers.

Caricare i moduli

• cerca e apri il file httpd.conf
• individua la lunga lista di “mod_…”
• individua le righe con “mod_expires” e “mod_header”
• elimina (se c’è) il carattere “#” che si trova prima del nome dei moduli che vuoi attivare
• riavvia il server Apache

A questo punto, nel file .htaccess bisogna definire le regole che consentono di gestire la cache a seconda del tipo o estensione dei file richiesti durante le connessioni http.

Il modulo mod_expires

Per conoscere meglio questo modulo ti consiglio di andare a leggere la guida ufficiale di Apache (in inglese): http://httpd.apache.org/docs/2.2/mod/mod_expires.html.

Il modulo mod_headers

Per conoscere meglio questo modulo ti consiglio di andare a leggere la guida ufficiale di Apache (in inglese): http://httpd.apache.org/docs/2.2/mod/mod_headers.html.

Gestione della cache in base all’estensione

ExpiresActive On
ExpiresDefault A300
<FilesMatch ".html$">
	Expires A86400
</FilesMatch>
<FilesMatch ".(gif|jpg|png|js|css)$">
	Expires A2592000
</FilesMatch>

• la prima riga (ExpiresActive) attiva il modulo “mod_expires”
• la seconda riga (ExpiresDefault) imposta un valore di default del campo di intestazione “Expires” pari a 300 secondi
• il primo blocco <FilesMatch> fa in modo che tutti i file html abbiano il campo di intestazione “Expires” con il valore 86400 secondi
• il secondo blocco <FilesMatch> fa in modo che tutti i file gif, jpg, png, js, css abbiano il campo di intestazione “Expires” con il valore 2592000 secondi
• la lettera A indica che il valore viene impostato dopo l’accesso al file, mentre la lettera M imposterebbe il valore dopo la modifica al file

Svantaggi. Spesso capita che alcuni file, benché siano dello stesso tipo, abbiano estensioni diverse. Ad esempio, le immagini con una compressione Jpeg possono avere l’estensione jpg oppure jpeg. Quindi se capitasse un file jpeg non si avrebbe la corrispondenza.

Gestione della cache in base al tipo MIME

Per assicurarci di individuare tutti i file di un certo tipo è necessario leggere il loro tipo MIME.

ExpiresActive On
ExpiresDefault A300
ExpiresByType text/css "access plus 1 day"
ExpiresByType text/javascript "access plus 3 days"
ExpiresByType image/png "access plus 2 months"

Forzare l’aggiornamento dei componenti

Se si utilizzano dei componenti che devono essere sempre aggiornati spesso non basta scrivere i campi di intestazione "Cache-Control: no-cache" e "Pragma: no-cache". Esistono infatti prove documentate sul fatto che a volte questi campi vengono ignorati dai browser.

Quando utilizzavo un script captcha notavo che non si aggiornava l’immagine, il che era davvero un problema in quanto se l’utente sbagliava il codice doveva ricaricarsi la pagina con una nuova immagine.

La soluzione consiste nello scrivere l’indirizzo dell’immagine con un elemento dipendente dal tempo. Quindi, invece di scrivere:
<img src="myimage.jpg" alt="La mia immagine" />

si cambierà l’indirizzo in:
<img src="myimage.jpg?<? echo time(); ?>" alt="La mia immagine" />
dove la funzione time() restituisce data e ora attuali in numeri interi (ad es. 11022103710).

Nel caso si utilizzi l’immagine come sfondo, anziché scrivere:
<div style="background:#000 url('img/blackback.png') no-repeat left bottom"></div>

si dovrà modificare l’indirizzo in:
<div style="background:#000 url('img/blackback.png?<? echo time(); ?>') no-repeat left bottom"></div>

Uno dei possibili svantaggi sta nel fatto che non tutti i file possono essere processati con il compilatore php. Se vuoi che un file .js (javascript) o .css (foglio di stile) venga processato come un file php basterà aggiungere al file .htaccess le seguenti righe:

AddHandler application/x-httpd-php .css
AddHandler application/x-httpd-php .js

Per concludere, scrivendo questo articolo ho scoperto un mondo riguardo la cache e la sua gestione, ed ho capito che gestire adeguatamente la cache permette di ottimizzare notevolmente il caricamento delle pagine di un sito web.

Come utilizzavi la cache fino ad oggi? Ti limitavi a scrivere i tre tag <meta> o avevi già pensato di iniziare a utilizzare la cache più seriamente? Ti sembra importante o è solo una mia impressione? L’articolo è scritto bene o manca qualcosa?

Non perdere il prossimo articolo: “Ridurre le richieste HTTP (parte 2): combinare e ottimizzare immagini, script e css”.

Crediti

• Libro. Creare siti web ad alte prestazioni: http://www.tecnichenuove.com/libri/creare_siti…
• Guida ufficiale di Apache: http://httpd.apache.org/docs/2.2/
• Use Server Cache Control to Improve Performance: http://websiteoptimization.com/speed/tweak/cache/
• Foto1: http://www.flickr.com/photos/aureusbay/297387489/
• Foto2: http://www.flickr.com/photos/thingsarebetterwithaparrott/1054908626/
• Foto3: http://www.flickr.com/photos/galopoulos/567890941/

Vantaggi

• leggendo libri sull’usabilità dei siti web ho imparato che gli utenti sono molto pigri ma allo stesso tempo molto curiosi; allora ho pensato che se un lettore vuole leggere altri articoli è troppo pigro per ritornare nella homepage o nell’archivio, ma non per consultare una lista pronta di articoli da raggiungere con pochi click
• se hai inserito il plugin “post correlati” hai sicuramente notato che a volte ci sono pochi articoli correlati; è proprio in questi casi che torna utile avere una lista alternativa, da mostrare automaticamente quando articoli correlati
• gli appassionati di seo e guadagni online avranno subito pensato agli effetti in termini di tempo di permanenza; infatti invogliando gli utenti a visitare altre sezioni del sito o leggere altri articoli, ad esempio, avresti un aumento delle pagine viste con piacevoli conseguenze sul conto ad-sense
• quando un nuovo (e potenziale) lettore capita nel tuo blog è importante aiutarlo a scoprire il blog e gli articoli che scrivi; a tal proposito sarebbe vantaggioso avere il blocco “post in evidenza”, con gli articoli, secondo te, qualitativamente migliori

Svantaggi

• il database ha un’ulteriore query da eseguire
• anche se di poco, dovrai modificare il design della pagina (operazione non gravosa se hai già l’area riservata ai “post correlati”)

Casuali, ma non troppo

L’autore del plugin, Yakup GÖVLER, ha avuto la bellissima idea di far selezionare (opzionalmente) i post appartenenti alle stesse categorie del post principale. Secondo me è veramente un’ottima caratteristica perché si mantiene comunque un certo collegamento con il post che si sta leggendo.

Il plugin

L’autore del plugin originale è Yakup GÖVLER. Poiché non ero completamente soddisfatto dalla versione originale ho modificato solo la funzione principale. Infatti la mia versione non può essere gestita dal pannello di controllo, quindi è necessario entrare nei file del tema per modificare le opzioni.

Caratteristiche del plugin originale

• gestione del plugin nel pannello di controllo
• scelta del numero di post (da 1 a 20)
• selezione delle categorie dei post da stampare
• stampa dei post appartenenti alle stesse categorie del post che si sta leggendo
• selezione di id, link e titolo di ogni singolo post

Caratteristiche della mia versione del plugin

• unica funzione php da richiamare e configurare all’interno dei file di template
• scelta del numero di post (da 1 a 20)
• selezione delle categorie dei post da stampare
• stampa dei post appartenenti alle stesse categorie del post che si sta leggendo
• selezione di id, link, titolo e contenuto di ogni singolo post
• scelta del tipo di post tra “post” e “page”, o entrambi
• scelta del post genitore della pagina
• impostazione della lunghezza del contenuto del post
• segnalazione dei post da includere ed escludere, con l’opzione di stampare per primi i post inclusi

Guida all’utilizzo

La particolarità di questo plugin (nella mia versione) è che non stampa automaticamente la lista dei post, ma restituisce un array associativo da gestire a tuo piacimento. Per utilizzare la funzione all’interno del template bisogna avere un array in cui inserire i risultati della funzione. Ecco un esempio:

<?php
$random_posts = jblog_random_posts("limit=15&current_cat=1&len=200&post_type=post|page");
/*
- limit=15: recupera fino a 15 post
- current_cat=1: recupera i post di tipo "post" appartenenti alle stesse categorie del post che si sta leggendo
- len=200: seleziona anche il contenuto, in particolare i primi 200 caratteri
- post_type=post|page: recupera i post di tipo "post" e di tipo "page"
*/

foreach($random_posts as $random_post) { ?>
<h5><a href="<? echo $random_post['link']; ?>"><? echo $random_post['title']; ?></a></h5>
<? echo $random_post['content']; ?>
<?php } ?>

Parametri della funzione

Come hai potuto notare, la funzione ha un unico parametro di tipo stringa in cui vengono passate le opzioni (nella forma [opzione]=[valore]) separate da “&”.

post_type

Tipo dei post: “post”, “page”, “both” (entrambi). Default: “post”.

post_parent

ID del genitore del post. Valido solo se post_type=”page” o post_type=”both”. Default: “0″.

limit

Numero di post da selezionare. Impostare a “0″ per stampare tutti i post. Default: “10″.

cats

ID delle categorie alle quali devono appartenere i post da selezionare. Valido solo se post_type=”post” o post_type=”both”.

currentcat

Impostare a “1″ per selezionare tutti i post appartenenti alle categorie del post che si sta leggendo. Valido solo se post_type=”post” o post_type=”both”. Default: “0″.

len

Lunghezza del contenuto dei post. Impostare con un numero maggiore di “0″ per stampare il contenuto. Default: “0″ (quindi non viene restituito il contenuto).

exclude

ID dei post da escludere.

include

ID dei post da includere.

include_top

Impostare a “1″ per inserire nelle prime posizioni i post specificati da “include”. Default: “0″.

Valori restituiti dalla funzione

Il plugin non prevede la stampa automatica dell’elenco dei post, ma dovrai provvedere a scrivere un ciclo per la stampa degli elementi. L’array che viene restituito è un array di array associativi. Un array associativo invece degli indici numerici ha indici di tipo stringa (molto più user-friendly). In particolare, questo array ha quattro indici: id, link, title e content (se len>0), utilizzati nell’esempio precedente.

Analisi del codice

Vorrei fare alcune considerazioni sul codice, soprattutto perché potrei aiutarti nel caso volessi effettuare ulteriori modifiche.

Composizione della query. Ho avuto modo di provare diverse tecniche per comporre una query durante il controllo e l’impostazione dei parametri. Durante la modifica di questo plugin ho utilizzato un array associativo (chiamato $sql). Ogni indice corrisponde a una determinata sezione della query (“post_type”, “include”, “limit”, ecc.). La comodità consiste nell’avere una singola variabile (anche se complessa) da impostare nelle varie parti del codice e da utilizzare alla fine per comporre la query da eseguire.

Funzioni di wordpress. Quando si sviluppa un plugin o si scrive una funzione da richiamare all’interno di wordpress è consigliabile sfruttare le funzioni predefinite come wp_parse_args, apply_filters, ecc. La prima serve per la lettura dell’unico parametro, $args, e la seconda per applicare un determinato filtro a una stringa. In particolare, la funzione apply_filters è stata utilizzata per la formattazione del titolo: apply_filters('the_title', $post->post_title).

Vuoi modificare ulteriormente il plugin? In effetti potresti aver bisogno di stampare altri dati. Allora ti consiglio di analizzare la variabile $post all’interno del ciclo foreach (in fondo alla funzione) per scoprire gli altri dati relativi al singolo post da inserire in un nuovo indice dell’array di array associativi. Ricordati di utilizzare gli opportuni filtri e le opportune funzioni per evitare brutte sorprese!!!

Prossimamente…

Onestamente non credo che questa mia funzione si possa definire “plugin”. Tuttavia farò di tutto per sviluppare una versione migliore cioè priva il più possibile di errori, con più opzioni e gestibile interamente dal pannello di controllo.

Download

Puoi scaricare il file del plugin qui.

Crediti

• Il plugin originale è di Yakup GÖVLER
• La prima immagine è di Adrian Wallett

Hai domande o suggerimenti da fare? Si sono verificati malfunzionamenti o errori? Vorresti un po’ di aiuto per effettuare particolari modifiche?

Un caloroso benvenuti a tutti! Finalmente ho finito (si fa per dire…) di sistemare il blog.

Ho iniziato a progettarlo a dicembre con l’obiettivo di metterlo on-line prima di Natale: naturalmente questo non è avvenuto. Con progettarlo intendo: decidere gli argomenti di cui parlare, disegnare un layout, leggere e imparare dai blogger più famosi.

Pensavo che aprire un blog, tutto sommato, fosse una cosa semplice: fai un logo, scarichi wordpress, scarichi un tema, configuri un po’ di cose e inizi a scrivere. Non è stato così! Poteva esserlo, ma mentre ero alla ricerca di temi gradevoli che avessero una buona usabilità mi sono reso conto che forse era meglio farne uno partendo da zero. La progettazione e la realizzazione del tema grafico hanno ritardato di molto la pubblicazione del blog. Inoltre, bisogna considerare il tempo speso a cercare i plugin, configurarli e a volte personalizzarli (nel codice). Mi fermo qui per non annoiarti.

A breve inizierò a pubblicare i miei primi articoli su tutte quelle cose imparate durante la realizzazione di questo blog: design, plugin, wordpress, ecc.

Torna a trovarmi ogni tanto e, se ti va, dammi la tua preziosa opinione sul blog, sugli articoli o su tutto quello che ti senti di criticare.

Nell’attesa ti consiglio di dare uno sguardo alla pagina “informazioni“ dove potrai sapere tutto su di me e sul blog.

Buona lettura!

NOME (richiesto)

EMAIL (richiesta)

SITO WEB

OGGETTO

Per favore, inserisci il codice di sicurezza

Puoi contattarmi direttamente su

Puoi trovare di tutto: da siti e blog tecnici a servizi web, da tutorial a giochi online.

N.B. per ogni categoria, i link più recenti si trovano all’inizio.

Spero possano esserti utili. Buona navigazione!