jblog » Giacomo

Scroll automatico e animato con “scrollTop” e il plugin “easing”

Giacomo — Mon, 24 May 2010 09:00:17 +0000

In questi giorni ho aiutato un amico alle prese con un sito web a pagina singola e prendendo spunto dal sito vanadiumjs.com ho voluto implementare lo scroll automatico e animato. Dopo un giretto sul web ho trovato questo interessante script da cui ho imparato un po’ di cose che ti ripropongo.

Il mio non è stato solo uno sfizio: poiché la pagina era molto lunga mi sembrava utile inserire questa funzionalità al fine di evitare all’utente l’utilizzo prolungato della rotellina del mouse per poter scorrere la pagina. Certo, si poteva realizzare tutto con dei link interni di tipo “#id” evitando codice js e plugin jquery. Lo abbiamo fatto ugualmente perché la pagina era solo una e un po’ di dinamismo non guasta mai!

La proprietà “scrollTop”. La utiliziamo per delineare le caratteristiche dell’animazione all’interno del metodo $.animate(). Questa proprietà deve essere impostata con un valore intero pari alla distanza (in pixel) tra l’inizio della pagina e la posizione di destinazione.

Il plugin “easing”. Non è fondamentare per realizzare lo scroll animato in quanto all’animazione ci pensa già il metodo $.animate(). Questo plugin ci serve per aggiungere a jquery altri tipi di animazione. Per saperne di più visita la pagina del plugin in cui potrai provare tutte le animazioni.

Animazione “easeInOutQuad”. Il vero motivo per cui utilizziamo il plugin “easing” è per sfruttare l’animazione “easeInOutQuad” (uguale a quella di vanadiumjs.com) molto adatta per uno scroll animato: parte lenta, scorre veloce, e inizia a rallentare prima di arrivare sulla destinazione del link.

Aspetti positivi

Nessun problema se javascript è disabilitato. Poiché utiliziamo dei link interni (o ancore) per chiamare l’animazione sullo scroll, in caso di javascript disabilitato questi link funzioneranno comunque e faranno in modo di proiettare l’utente sul blocco con l’id specificato nell’attributo href.

Normale scroll della pagina inalterato. Nonostante l’animazione, il normale scroll della pagina non viene alterato in alcun modo e la barra di scorrimento continua a funzionare come ci si aspetterebbe.

Codice riusabile. Il codice javascript (e jquery) non dipende dal numero di link che devono avviare uno scroll animato. Infatti l’unica operazione richiesta è quella di specificare la classe comune ai link che avviano lo scroll animato.

Al lavoro!

RISULTATO FINALE: http://test.jblog.it/autoscroll/

DOWNLOAD: http://download.jblog.it/autoscroll.zip

1. Includere jquery e jquery.easing


...


...

2. Attribuire una la stessa classe a tutti i link per lo scroll animato


Blocco 1
Blocco 2
Blocco 3
Blocco 4
Blocco 5

3. Copiare il blocco di codice per lo scroll animato

Anche se mi sembra superfluo dirlo, il seguente blocco di codice deve essere inserito fra i tag .

4. Impostare la classe dei link che avviano lo scroll animato

Demo e download

Per provare lo script: http://test.jblog.it/basicconfirm/

Per scaricare lo script: http://download.jblog.it/basicconfirm.zip

Il plugin jConfirmAction

e link (uguale a quello per la classica “confirm”)


   Delete me

Implementazione base di jConfirmAction

<-- CSS per la formattazione della finestra di dialogo -->

Demo e download

Anche se sul sito del plugin c’é una pagina dimostrativa ho voluto creare una demo svuotata di tutte le cose superflue in modo da evidenziare meglio il funzionamento del plugin.

Per provare lo script: http://test.jblog.it/jconfirmaction/

Per scaricare lo script: http://download.jblog.it/jconfirmaction.zip

Grafica

Per visualizzare correttamente il “fumetto” della dialog box abbiamo bisogno di almeno 2 componenti grafici:

contenitore del testo e dei pulsanti “ok” e “annulla”
sfondo del singolo pulsante

CSS

Questo plugin ha bisogno di alcune righe di codice css che naturalmente possiamo sistemare in un apposito file o incollare nel principale file .css del nostro sito (consiglio quest’ultima pratica per evitare la richiesta http dovuta al singolo file .css per il plugin).

CONFLITTUALITA’. Il problema è che i nomi delle classi sono abbastanza comuni e potremmo averli già utilizzati per altre classi. La soluzione è quella di andare a modificare direttamente il codice html della dialog box che si trova all’interno del file .js del plugin, come vedremo in seguito.

/* CONTENITORE PRINCIPALE */
.question {
	position: absolute;
	display: inline;
	text-align: center;
	width: 174px;
	height: 78px;
	font-size: 13px;
	line-height: 1.5em;
	/* immagine del contenitore del "fumetto" */
	background: url('images/bubble.png') left top no-repeat;
	padding: 10px 0 0 0;
	text-shadow: 0px 1px 0px #fff;
	margin-left: -7em;
	margin-top: -6em;
	opacity: 0;
}

/* PULSANTI */
.yes, .cancel {
	margin-top: .5em;
	margin-right: .5em;
	cursor: pointer;
	display: inline-block;
	width: 63px;
	height: 21px;
	color: #fff;
	text-shadow: 0px 1px 0px #000;
	/* immagine del pulsante */
	background: url('images/button.png') left top no-repeat;
}

HTML

L’html relativa al box del “fumetto” è molto semplice, quindi non credo che avrai grossi problemi se andrai a modificare la struttura del box.

Un buon motivo per modificare l’html è quello di evitare le possibili conflittualità con le classi del css, modificando i nomi delle classi associate ai div in nomi meno generici.

Nel file del plugin la parte relativa al codice html del box è questa:

$(this).after(
''+theOptions.question+'

     '+theOptions.yesAnswer+'
     '+theOptions.cancelAnswer+'
');

Un plugin alternativo

Una valida alternativa è il plugin jQuery Confirm sviluppato da Nadia Alramli.

La caratteristica che lo distingue da jConfirmAction è che quando si clicca sul link scompare il link e appare la domanda (con relativi link “ok” e “annulla”).

Sicuramente è molto più leggero di jConfirmAction in quanto non richiede immagini e codice css. Inoltre ha moltissime opzioni che consentono di adattarlo al meglio alle esigenze del sito.

Fra i due plugin (che sostanzialmente fanno la stesse cose) io continuo a preferire jConfirmAction perché esteticamente il fumetto è più bello!

5 miti da sfatare su javascript

Giacomo — Fri, 14 May 2010 08:50:00 +0000

Consiglio la lettura questo articolo che ho trovato molto interessante perché mi ha aperto gli occhi su alcuni aspetti di javascript che non conoscevo.

Mi ha molto colpito il fatto che javascript è largamente utilizzato anche fuori dai browser.

I 5 miti da sfatare sono questi:

javascript = java (chi non ha mai sentito questa affermazione? )
javascript è un linguaggio “giocattolo”
javascript si trova solo nei browser
javascript è inconsistente e pieno di bug
javascript non è “orientato agli oggetti”

Per approfondire i motivi per cui queste affermazioni sono sbagliate non ti resta che continuare a leggere l’articolo su sitepoint.com!

Come riciclare inutili “listoni” in titoli e contenuti più usabili

Giacomo — Mon, 10 May 2010 05:00:01 +0000

Scorrendo i feed con Google Reader mi capita di leggere dei titoli abbastanza assurdi. Risultato: non leggo il post! Ti spiego perché…

Per iniziare ti faccio un po’ di esempi:

“30 best icon tutorials”
“100+ web designer resources”
“the big list of html5, javascript and css3″
“ultimate collection of photoshop tutorials”
“top 60 wordpress resources”

A primo impatto potresti pensare: “sei pazzo! con tutta quella roba che ti promettono non ci dai un’occhiata?!”.

Perché dovrei perder tempo a leggere un post enorme (pieno di link e di immagini da caricare) in cui potrei trovarci tutto e niente?

Questo è il punto di vista di chi segue più di 100 feed al giorno: in una situazione del genere è naturale che per non perdere tempo bisogna essere molto selettivi per beccare i post migliori.

In generale, quando scorro i feed leggo solo i titoli dei post e successivamente vado a leggerli. Quindi il titolo ha un’importanza fondamentale per decidere se leggere o meno il post, soprattutto se per leggerlo bisogna andare direttamente nel sito (o nel blog)! Fai così anche tu?

Alla cieca. Quando leggo un titolo del tipo “100+ web designer resources” mi chiedo “risorse riguardo cosa? software? script? grafica?” e finisco con un “boh… vabbè, andiamo avanti…”. Questo succede soprattutto perché una persona ha fretta di leggere solo le cose che le interessano e non andare all’esplorazione di qualcosa che non si conosce bene.

Lettura faticosa. In questi tipi di post (aka “mega-liste” ) ci sono talmente tante cose che risulta difficile guardarle tutte, conservarle e catalogarle nei preferiti, taggarle nei social bookmarks, condividerle su facebook o su twitter, ecc.

Lunghezza eccessiva. Hai idea di quanto sia lungo un post con 30 immagini e link!? E’ un po’ come per il “post definitivo” che viene spesso criticato a causa della sua lunghezza dato che non tutti hanno il tempo e la voglia di leggere un post di oltre 10 pagine.

Dare un titolo a un post del genere è veramente dura! Come si fa scrivere un titolo completo per un post che ha dei contenuti molto diversi fra loro?

Ecco le 2 strade che seguo per evitare una situazione simile.

Alternativa 1: post grande, focalizzato su un particolare argomento

Photo by Momentary Glimpse | http://www.flickr.com/photos/momentaryglimpse/25…

Tempo fa ho scritto un post-lista su dei pacchetti di icone che fossero abbastanza completi da soddisfare tutte le esigenze di un cms o di un sito medio-grande. Il post era abbastanza lungo ma nel titolo ho cercato di chiarire l’idea scrivendo “pacchetti di icone completi e definitivi”. (Spero di esserci riuscito…)

Se proprio vuoi pubblicare un post lungo:

focalizzati su un particolare settore o argomento
spendi 5 minuti in più per scrivere un buon titolo che fornisca una chiara presentazione dei contenuti

Un esempio? “Link Checker Tools & Broken Link Checking Software Mega List”: dalle parole “mega list” si capisce che non è un post da 2 righe, però è chiaro come i contenuti siano estremamente focalizzati sull’argomento “link checking”.

Alternativa 2: dividilo in post più piccoli

Photo by Chapendra | http://www.flickr.com/photos/chaparral/2714646118/

Per esempio, prendiamo il post “the big list of html5, javascript and css3″. Leggendo un titolo del genere mi immagino un’insalata di codici, tutorial, immagini, librerie, script, ecc. Perché dovrei stressarmi fra decine e decine di link?!

Divisione per argomenti. A una prima occhiata il post “the big list of html5, javascript and css3″ potresti dividerlo in 3 post riguardanti gli argomenti principali che si leggono dal titolo: html5, javascript, css3. Tuttavia, la divisione per argomenti è un po’ “ignorante”, nel senso che si limita solo a “spezzettare il post”.

Divisione per idee e soluzioni. Se i contenuti lo permettono, puoi effettuare una divisione trasversale del post, cioé dividerlo in post più piccoli rielaborando addirittura il senso di tutto quell’ammasso di roba. Ad esempio, dal post “the big list of html5, javascript and css3″ potresti ricavarne un altro sui “menù di navigazione” e il titolo diventerebbe “navigation menu with html5, javascript and css3″.

Dividere un post molto lungo in post più piccoli ha almeno 3 vantaggi:

scrittura immediata di titoli più dettagliati
molti post da pubblicare in più giorni senza “bruciare” un post molto grande in un solo giorno
maggiore probabilità che gli articoli vengano letti per intero

Conclusione

So benissimo che dietro la scrittura di un titolo (e di un post) ci sono tanti altri fattori: marketing, seo, scrittura web, ecc. Questo è solo un piccolo tassello di un enorme puzzle di linee guida sulla scrittura di post.

Quando leggi i feed, quanto sono importanti per te i titoli? Secondo te il “listone” inteso come “ammasso di contenuti” resta comunque un ottimo post? Pensi sia un bene il fatto di dividere e ottimizzare i “listoni”?

Steve Jobs, Adobe Flash e HTML5

Giacomo — Mon, 03 May 2010 05:00:52 +0000

Photo by ex.libris | http://www.flickr.com/photos/exlibris/2383695697/

Come sempre le dichiarazioni di Steve Jobs hanno fatto tanto parlare, bloggare e twittare.

Fra le news di Apple.com è stato pubblicato un articolo in cui Steve Jobs, dopo una lunga argomentazione, spiega i motivi per cui i dispositivi Apple non saranno dotati della tecnologia Adobe Flash:

Flash was created during the PC era – for PCs and mice. Flash is a successful business for Adobe, and we can understand why they want to push it beyond PCs. But the mobile era is about low power devices, touch interfaces and open web standards – all areas where Flash falls short.

The avalanche of media outlets offering their content for Apple’s mobile devices demonstrates that Flash is no longer necessary to watch video or consume any kind of web content. And the 200,000 apps on Apple’s App Store proves that Flash isn’t necessary for tens of thousands of developers to create graphically rich applications, including games.

New open standards created in the mobile era, such as HTML5, will win on mobile devices (and PCs too). Perhaps Adobe should focus more on creating great HTML5 tools for the future, and less on criticizing Apple for leaving the past behind.

Il succo è questo:

Flash è nato negli anni dei personal computer, intesi come “display + case + mouse + tastiera”
le funzionalità dei dispositivi Apple e delle centinaia di migliaia di “apps” dimostrano che Flash non è indispensabile per raggiungere determinati livelli di grafica e multimedialità
questi sono gli anni dei dispositivi mobili, cioé dei dispositivi a basso consumo, touch screen, e che utilizzano gli standard web “aperti”, campi in cui Flash sembra essere inadatto e un po’ arretrato

Infine, Jobs conclude dicendo che Adobe dovrebbe concentrarsi nel creare strumenti che sfruttino le potenzialità di HTML5.

Partendo dal fatto che non sono un fanatico Apple, che ho solo un iPod (della prima generazione! ), e che non ho nulla contro Adobe… secondo me, Steve Jobs ha ragione! E anche Microsoft la pensa così.

Audio e Video player

Prima che i multimedia player venissero implementati con Flash, si faceva largo uso di Real Player e Windows Media. Funzionavano. Ma quanto tempo si perdeva a scaricare e installare i plugin e gli ActiveX!?

Se andava tutto liscio, in pochi minuti era tutto pronto; se per qualche strano motivo il browser o il sistema operativo non erano compatibili si rischiava di perdere delle ore fra riavvii, download e installazioni.

Poi è arrivato Flash con un plugin di gran lunga più leggero, semplice e immediato nell’installazione.

La prima volta che ho visto un video player realizzato con Flash è stato su YouTube (probabilmente uno dei primi siti con un video player Flash) il cui successo, secondo me, è dovuto anche ai vantaggi del plugin di Flash.

Gestire audio e video con Flash significa programmare in ActionScript un player che gestisca lo streaming e che permetta le operazioni più comuni (es. play, stop, volume). Oppure, se si prende la via più facile, si cerca un player realizzato da altri, si impara e si inserisce nella pagina.

Gestire audio e video con Html5 significa inserire nella pagina i tag e (proprio come si fa per le immagini con il tag ), segnalare al tag il file da riprodurre e basta! Queste sono le operazioni minime per riprodurre un file multimediale. Un player più complesso lo si può sempre realizzare con un po’ di html, css e javascript.

Senza sprecare ulteriori parole, ecco cosa può fare l’HTML5:

7 stupendi e funzionanti video player | http://speckyboy.com/2010/04/23…
Javascript Audio Interface | http://hyper-metrix.com/misc/jai/
jPlayer, plugin jquery per la gestione di file audio| http://www.happyworm…

Grafica e animazioni

Flash ha il merito di aver introdotto molti ottimi strumenti che hanno permesso di realizzare siti graficamente complessi e ricchi di animazioni, mantenendo comunque una certa efficienza. Fra gli svantaggi c’era ancora la necessità del plugin e l’acquisto del software, però i risultati ottenuti erano sorprendenti.

Tuttavia javascript, grazie ai miglioramenti e alla maggiore compatibilità con i vari browser, ha iniziato ad essere sempre più utilizzato per ottenere le piccole interattività della pagina (es. tooltips, ridimensionamenti, validazione form).

Attualmente nel campo della grafica web e delle animazioni non si può dire che Flash sia obsoleto. Ci sono però delle animazioni realizzate con javascript e canvas che ti lascererebbero a bocca aperta!

Se non ci credi dai uno sguardo a Chrome Experiments: animazioni bellissime e complesse realizzate interamente con javascript e canvas.

I nuovi tag HTML5 per il multimedia

Come utenti e come web designer, il fatto di aver bisogno di plugin e ActiveX per far funzionare correttamente un sito o un’applicazione web è qualcosa di estremamente fastidioso e limitante.

Infatti, il maggior vantaggio dell’HTML5 consiste proprio nella gestione di contenuti grafici e multimediali senza installare componenti aggiuntivi. In fondo era quello che volevamo, giusto?!

A questo proposito, ecco i nuovi tag HTML5 per la gestione della grafica e dei contenuti multimediali:

, gestisce i flussi audio (anche in streaming).

, contenitore per grafica creata con appositi script.

, tag generico per sorgenti multimediali di vario tipo (funziona come i tag e ).

, gestisce i flussi video (anche in streaming).

Documentazioni utili

Documentazione ufficiale del W3C | http://www.w3.org/TR/html5/
Dive Into HTML5 by Mark Pilgrim | http://diveintohtml5.org/
Native Audio in the browser | http://html5doctor.com/native-audio…

Curiosità

HTML 5 or HTML5? | http://meiert.com/en/blog/20090911/html-5-or-html5/
HTML5 Video Destruction | http://www.craftymind.com/factory/html5video…
HTML5 Canvas and Audio Experiment | http://9elements.com/io/projects…

The Conversation Prism

Giacomo — Thu, 15 Apr 2010 20:48:26 +0000

A conferma del fatto che una buona comunicazione grafica vale più di mille parole, questa mappa permette di avere in un batter d’occhio una visione completa dei maggiori social media suddivisi in categorie.

La mappa della conversazione, ideata e realizzata da Brian Solis e Jesse Thomas, vuole essere una rappresentazione del mondo dei social media, sempre in movimento e in continua evoluzione.

Questa mappa è stata particolarmente apprezzata: non solo gli autori ne hanno realizzate nuove versioni ma altri esperti l’hanno adattata con i social media più utilizzati nel proprio paese. Per questi motivi gli autori hanno intenzione di continuare ad aggiornarla e di voler presto iniziare a lavorare alla terza versione. Occhio!

Un altro buon motivo per darci un’occhiata, oltre alla curiosità, è che si possono scoprire molti social media di cui probabilmente non abbiamo mai sentito parlare e che, nel tempo libero, potremmo divertirci a sbirciare…

Sul sito theconversationprism.com è possibile scaricare la mappa in varie risoluzioni, ed eventualmente ordinare il poster (56 x 72 cm).

Aggiornamenti e novità per Google Docs: documento, foglio elettronico, editor grafico

Giacomo — Mon, 12 Apr 2010 18:41:04 +0000

Sono stati appena annunciati dei notevoli aggiornamenti di Google Docs che assomiglia sempre di più alle famose suite per l’ufficio. In breve, con questi aggiornamenti si migliora l’editor dei documenti, il foglio elettronico, la collaborazione e l’interattività.

L’editor dei documenti

Si nota subito la somiglianza con Word soprattutto per l’introduzione della regolazione dei margini e delle tabulazioni. Migliorate anche la formattazione delle immagini all’interno del documento, le liste puntate e numerate.

Riguardo i documenti importati si è cercato di mantenere una maggior fedeltà al formato originale in modo da non perdere molto tempo a riformattarli dopo l’upload.

Collaborazione. Il documento viene aggiornato in real-time ed è possibile vedere le modifiche degli altri autori “carattere per carattere”.

Chat. Implementata una chat sulla barra laterale per discutere man mano le modifiche con i colleghi.

Il foglio elettronico

Il nuovo foglio elettronico di Google Docs si nota soprattutto per una maggiore reattività e velocità di caricamento dei documenti.

Grazie alle prestazioni notevolmente migliorate è stato possibile inserire nuove indispensabili funzioni delle quali si sentiva la mancanza poiché presenti e ampiamente utilizzate in Excel:

barra per le formule matematiche
auto-completamento
drag-and-drop delle colonne
navigazione più semplice tra i fogli di calcolo

Collaborazione e chat. Grazie alla chat è possibile discutere le modifiche; inoltre è possibile osservare in real-time le celle che stanno modificando i colleghi.

Nuovo editor di grafici, forme e disegni

Il precedente strumento per l’inserimento di grafici nei documentiè stato sostituito con un apposito editor per la gestione di elementi grafici.

Con questo nuovo editor si potranno creare schemi, diagrammi di flusso, e grafici vari con la possibilità di:

collaborare in real-time
salvarli e condividerli come un qualsiasi documento di Google Docs
inserirli all’interno dei documenti, fogli elettronici e presentazioni

Offline non supportato

Attualmente non è possibile sfruttare Google Gears per l’accesso offline a questi editor nuovi e aggiornati.

Tuttavia, in seguito si cercheranno di sfruttare le nuove tecnologie (es. HTML 5) e le funzionalità dei nuovi browser per supportarlo.

Come abilitare le anteprime

Nei prossimi giorni a tutti i singoli utenti di Google Docs verrà data la possibilità di provare questi nuovi editor cliccando sul link rosso “Nuova versione” in alto a destra (come fa sempre Google) oppure andando in “Impostazioni documenti” e cliccando su “Nuova versione di Google Documenti”.

Google Wave?

Secondo me Google Wave non è stato apprezzato perché, essendo un po’ troppo “multi-purpose”, le varie applicazioni non soddisfavano appieno le esigenze degli utenti e non mantenevano gli standard qualitativi che hanno sempre caratterizzato i servizi di Google. Probabilmente non sarà piaciuta neanche la nuova grafica …

Quindi credo che Google intenda prendere gli aspetti positivi e le innovazioni introdotte in Wave per migliorare le applicazioni più utilizzate e apprezzate (come Google Docs!).

Fonti

http://googledocs.blogspot.com/2010/04/new-google-docs.html

http://googleenterprise.blogspot.com/2010/04/laying-foundation-for-new-google-docs.html

Google Docs permette l’upload di file… di qualsiasi tipo!

Giacomo — Wed, 13 Jan 2010 04:00:34 +0000

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?

Autenticazione HTTP “basic” su server Apache

Giacomo — Mon, 11 Jan 2010 05:00:01 +0000

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:

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

Rinomina lo script in “doc_root.php”
Caricalo nella directory principale del tuo sito
Eseguilo scrivendo http://www.tuosito.com/doc_root.php
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:

username e password devono essere separate dai due punti “:”
inserire una coppia : 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)


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



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

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


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



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

.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 o .

La seconda è da preferire quando i file da proteggere si devono riconoscere tramite regex. In pratica, la direttiva 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 è da preferire solo quando il file è uno solo e si è sicuri del nome.

Uso della direttiva

# 1) protegge i file secret1.php e secret2.php
# 2) [pP][hH][pP] perchè non si è sicuri di come è scritta l'estensione

   AuthType Basic
   AuthName "Accesso alle pagine segrete..."
   AuthUserFile /percorso_assoluto/.htpasswd
   Require valid-user

Uso della direttiva


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



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

Come proteggere una directory

Teoricamente si dovrebbe agire come per i file, utilizzando però le direttive e .

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 e 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.

Crea una sottodirectory
Inserisci tutti i file e le directory da “liberare”
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 o è possibile liberare rispettivamente uno o più files. Utilizzare per liberare dei file in base al nome esatto mentre 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

   Allow from All
   Satisfy Any


# Libera il file free_access.php

   Allow from All
   Satisfy Any

# Libera tutti i file .xml, .css e .js

   Allow from All
   Satisfy Any


# Libera i file "page1.php" e "page2.php"

   Allow from All
   Satisfy Any

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/

Twitter parla italiano! “Che c’è di nuovo?”

Giacomo — Thu, 10 Dec 2009 23:30:14 +0000

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!

Google lancia la ricerca Real-Time e aggiorna l’interfaccia di AdSense

Giacomo — Mon, 07 Dec 2009 21:03:14 +0000

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

19 pacchetti di icone completi e definitivi

Giacomo — Mon, 07 Dec 2009 05:20:24 +0000

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?

Commenti audio nei blog?

Giacomo — Mon, 09 Nov 2009 04:59:40 +0000

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?

Le ultime 3 novità su Twitter: liste, retweet e trending topics

Giacomo — Fri, 06 Nov 2009 13:53:09 +0000

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:

dividere gli account che seguiamo in liste, ad esempio tematiche o per provenienza, proprio come una rubrica telefonica
seguire una lista come se fosse un singolo account
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:

per ogni tweet, visualizzare la lista degli account che ne hanno fatto il ReTweet
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”
bloccare la visualizzazione di un account fra i retweet

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

Twitter e Facebook: attenzione ai messaggi

Giacomo — Tue, 03 Nov 2009 11:22:05 +0000

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.

10 formati di banner e annunci da evitare

Giacomo — Fri, 19 Jun 2009 02:48:17 +0000

Se stai considerando l’idea di inserire un po’ di banner e annunci sul tuo sito ti consiglio di leggere questo interessante articolo pubblicato su Business Insider in cui vengono classificati i formati più odiati dagli utenti.

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?

Wordpress plugin: stampare una lista di “featured posts” o “post in evidenza”

Giacomo — Wed, 17 Jun 2009 02:49:56 +0000

I cosiddetti “featured posts” sono un insieme di post che vengono scelti per esser messi in risalto. In questo blog, i “post in evidenza” sono quelli che considero essere i migliori. Mettendoli in risalto ho la possibilità di mostrare il meglio dei miei articoli al nuovo visitatore. Potrebbero esserci altri motivi, ad esempio di tipo commerciale (se i post in evidenza pubblicizzano qualcosa).

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:

effettua il download: http://download.jblog.it/wp-plugins/jblog_featured_posts.zip
copialo nella directory “plugins” e attivalo
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
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
- .
  
  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.
  
  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 (
    - Ad ogni contenitore del singolo post (
    - ) 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 , il cui attributo href sarà impostato con il link del post
    Vuoi personalizzare il codice html? Apri il file del plugin, individua la funzione jblog_printFeaturedPosts e buon lavoro!
    
    Esempio dell’output
```
	 
		Titolo 1 - post 270
		Howwww! Nab him, jab him, tab him, grab him, stop that pigeon now.
	
	
		Titolo 2 - post 320
		Grab him, stop that pigeon now.
	
	
		Titolo 1 - post 450
		Tab him, grab him, stop that pigeon now.
	
```
    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

CommonTag, un nuovo standard per il tagging e un altro passo verso il web semantico

Giacomo — Thu, 11 Jun 2009 20:15:08 +0000

A partire da oggi è stato reso pubblico il progetto Common Tag ed il sito commontag.org che ne rappresenterà il punto di riferimento.

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”).

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?

20 servizi web e librerie per ottimizzare i componenti della pagina: immagini, javascript, css

Giacomo — Wed, 10 Jun 2009 11:36:50 +0000

Dopo gli articoli “ridurre le richieste HTTP (parte 1): come utilizzare la cache del browser” e “ridurre le richieste HTTP (parte 2): come unire e combinare immagini, script, css” vorrei parlarti delle tecniche per l’ottimizzazione dei componenti più comuni di una pagina web: immagini, script e css.

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.

ImageMagick

ImageMagick è un set di librerie per creare, modificare e comporre immagini bitmap. Può leggere, convertire e scrivere immagini in vari formati (es. DPX, EXR, GIF, JPEG, JPEG-2000, PDF, PhotoCD, PNG, Postscript, SVG, e TIFF). ImageMagick, oltre alla rotazione e al ridimensionamento, permette di effettuare operazioni abbastanza complesse, applicare effetti speciali e tracciare forme.

Sul sito potrai trovare i libri consigliati (in lingua inglese) e tutto il necessario per iniziare a utilizzare queste librerie.

ImageMagick APIs

ImageMagick include interfacce ed estensioni per utilizzare queste magnifiche librerie con i tuoi linguaggi di programmazione preferiti.

PNGCrush

PNGCrush è un tool per l’ottimizzazione di immagini PNG. Può essere eseguito dalla linea di comando di MSDOS, UNIX o LINUX. L’obiettivo principale è quello di ridurre la dimensione delle immagini PNG scegliendo vari livelli di compressione e filtri. Può essere anche utilizzato per purificare le immagini da tutte quelle informazioni aggiuntive lasciate dai vari software, o aggiungere altri tipi di blocchi.

JPEGtran

JPEGtran è una libreria per la trasformazioni di immagini JPEG con l’obiettivo di minimizzare la perdita informazioni e avere la maggior qualità possibile. Questa libreria comprende anche una funzione per determinare la miglior compressione per una certa immagine, in modo da evitare che si facciano numerosi test e verifiche.

Una guida sulle funzioni di questa libreria la puoi trovare qui.

Online Image Optimizer (GIF, JPG, and PNG)

DynamicDrive ha sviluppato un ottimo tool per la compressione di immagini nei classici formati GIF, JPG e PNG. Questo è lo script originale sul quale sono nati numerosi servizi online per la compressione. Peccato che il limite sia di 300kb.

Free Image Optimizer

Questo servizio web è un po’ più evoluto rispetto a quello di DynamicDrive poiché non ti permette solo di compressare l’immagine ma anche di scegliere la dimensione di destinazione. Nel caso ti piacesse potrai scaricarne gratuitamente una versione trial.

RIOT (Radical Image Optimization Tool)

RIOT è un software gratuito che ti aiuta a scegliere la miglior compressione osservandone i risultati in tempo reale grazie a un’interfaccia “dual view”. Grazie a questo software sarà facilissimo controllare la compressione, il numero di colori, le impostazioni, il formato delle immagini e molto altro. Compatibile con Windows 2000, XP e VISTA.

Sono disponibili anche le estensioni DLL per i più comuni linguaggi di programmazione (C, C++, Perl, PHP, Java, Phyton, ecc.).

Batch Image Compression Freeware

Questa è un’enorme lista di software per la compressione e l’elaborazione di gruppi di immagini. Spazia dalla semplice conversione alla correzione di colore e occhi rossi. Assolutamente da vedere.

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

Il Risiko dei social network

Giacomo — Mon, 08 Jun 2009 12:08:28 +0000

Vincenzo Cosenza, sul suo blog, ha pubblicato uno studio sulla diffusione e l’utilizzo dei social network nel mondo, basandosi sui dati forniti da Google Trends e Alexa. Oltre alla mappa puoi trovare una piccola tabella in cui vengono classificati i 3 social network maggiormente utilizzati in corrispondenza di alcuni paesi.

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

Inglesi

Novità su Twitter: account verificati a partire da questa estate

Giacomo — Sun, 07 Jun 2009 23:07:35 +0000

Quante volte ti sarà capitato di seguire degli account che hai poi scoperto essere falsi? Purtroppo di falsi account ce ne sono tanti. Purtroppo è facile cascarci finendo per credere ai tweet lasciati da quella persona…

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

Digg annuncia un nuovo modello di business con i Digg Ads

Giacomo — Sat, 06 Jun 2009 22:43:10 +0000

Digg, nel suo blog ufficiale, ha annunciato l’introduzione dii una nuova piattaforma di advertising (interno a Digg.com) chiamata Digg Ads, tanto semplice quanto originale. Vediamo subito perché.

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

Facebook: 10 applicazioni che potrebbero insegnarti qualcosa

Giacomo — Fri, 05 Jun 2009 22:57:13 +0000

Nell’articolo 10 Facebook apps that teach you something pubblicato su news.cnet.com vengono segnalate un po’ di applicazioni di Facebook che potrebbero essere utili utenti di Facebook, ancora di più se studenti o professori.

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”?

Wordpress: ordinare gli articoli in modo casuale

Giacomo — Thu, 04 Jun 2009 21:11:25 +0000

Un lettore del blog mi ha contattato per chiedermi di aiutarlo a impostare Wordpress.

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:




	
		
			. . .

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.

0)
   jblog_orderbyRand(); 	?>


	
		
		. . .

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:

0 (con il ">" anziché "<=")
if(get_query_var('cat')<=0) : ?>

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!

Ridurre le richieste HTTP con Mime HTML e data:URL

Giacomo — Mon, 01 Jun 2009 03:41:32 +0000

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.

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)

" alt="Immagine" />

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


;base64," 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.






  Titolo pagina

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 , 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 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 al suo interno non verrà preso in considerazione dal browser
nel caso in cui si acceda con Internet Explorer, poiché il tag non funzionerà verrà considerato il tag 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
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” ( 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:

printHeader();

?>



  mhtml test page


  test #1
  test #2

  inc("2.bmp","image/bmp"); ?>">
	  incIE("2.bmp"); ?>" alt="img3" />
  

 ); *background-image:url(incIE("1.bmp"); ?>);">



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

Crea l’oggetto della classe specificando l’url di base delle immagini, il separatore (boundary) e la versione MIME
Stampa l’intestazione “Content-Type” e “MIME Version”
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 , passando come parametri il percorso del file e il tipo mime. All’interno dei tag e inserire il tag 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:


	AddHandler application/x-httpd-php .css

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


/*printHeader();
?>*/

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

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

div {
  width: 100px;
  height: 100px;
  font: bold 24px Arial;
}
/*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

50 set di icone gratis di social media … spettacolari!

Giacomo — Tue, 26 May 2009 09:58:49 +0000

Mentre cercavo un po’ di icone da sostituire a quelle (non proprio bellissime) che avevo mi sono imbattuto in un bel post.

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

Tecniche javascript e jquery per selezionare e scorrere elementi html e nodi

Giacomo — Mon, 25 May 2009 16:31:52 +0000

Dopo aver letto l’interessante articolo di ImpressiveWebs su alcune tecniche javascript mi è venuta un’idea che ti piacerà. Ho deciso di integrarlo con le rispettive tecniche jquery ma, anziché limitarle esclusivamente all’ambito jquery cerco di mantenere comunque un legame con il puro codice javascript.

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”:

Questo è un elemento generico

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”.


	Primo link
	Secondo link
	Terzo link
	Quarto link
	Quinto link

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

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

for(i=0; i
Con jquery il tutto si riduce a:
$("a[target='_blank']").attr("target","_top");
Con “a” si chiede di selezionare tutti i tag “” 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 “” 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 “” 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 
var myLinks = oggettoLista.getElementsByTagName("a");

// Il ciclo for rimane uguale al precedente
for(i=0; i
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  con jQuery
var myLinks = $("#lista_5link a")

// Il ciclo for rimane uguale al precedente
for(i=0; i
Osservazione. Potresti dirmi “perché non assegniamo lo stesso id a tutti i tag ?“. 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. 
, 
), frammento di testo. I nodi hanno una relazione genitore-figlio. Ad esempio, nel caso della lista illustrata precedentemente,  è il genitore e  il figlio, che a sua volta è il genitore di .
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

	Paragrafo1
	Paragrafo2
	Link
	Paragrafo3
	Titolo h5

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
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
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
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:

	Paragrafo1
	Paragrafo2
	Paragrafo3

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:

	Paragrafo1
	Paragrafo2
	Paragrafo3

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

Controllare il formato di un indirizzo email con le espressioni regolari (RegEx) in PHP e Javascript

Giacomo — Wed, 20 May 2009 17:56:16 +0000

Ogni programmatore web prima o poi si scontra con la necessità di controllare se il formato dell’indirizzo email inserito dall’utente è valido.

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

Ridurre le richieste HTTP (parte 2): come unire e combinare immagini, script, css

Giacomo — Fri, 15 May 2009 15:04:06 +0000

Dopo il precedente articolo su come utilizzare la cache del browser passiamo ad azioni più concrete per ridurre le richieste http: minimizzare il numero di componenti di una pagina. Dico “concrete” perché, mentre i comportamenti e le tecniche relative alla cache possono avere effetti diversi a seconda del browser e delle sue impostazioni, diminuire i componenti di una pagina è qualcosa che dipende esclusivamente dal webmaster, con risultati e prestazioni prevedibili.

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 , ma dobbiamo “mappare” le immagini.

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

Il tag

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

Formato.

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

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


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 
Specifica una mappa da far richiamare da un oggetto. È richiesto il tag di chiusura .
All’interno dei tag … 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. 
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  può contenere sia elementi  sia elementi a livello di blocco come  per aumentare la compatibilità con i browser più datati.

Alcune osservazioni

Se sono presenti contemporaneamente  ed , i browser recenti ignorano il tag 

Se due o più regioni si sovrappongono, la prima regione avrà la precedenza sulle altre
L’elemento  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  all’interno dell’oggetto, ed i tag  all’interno di .


	The cool site!
	
	
		
			Navigate the site:
			Access Guide |
			Go |
			Search |
			Top Ten
		
	
	

Esempio 2
Come utilizzare la mappa richiamandola con usemap, senza inglobarla all’interno dei tag .

	The cool site!
	
	
	
		Navigate the site:
		Access Guide |
		Go |
		Search |
		Top Ten
	

Esempio 3
Utilizzo degli elementi .

	The cool site!
	
	
	
		Navigate the site:
		
		
		
		
	

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.

	The cool site!
	
	
		
	
	
		Navigate the site:
		Access Guide |
		Go |
		Search |
		Top Ten
	

Esempio 5
Utilizzo combinato di  e  per avere una maggiore compatibilità. I browser più recenti non considerano gli elementi .


	The cool site!
	
	
	
		Navigate the site:
		
		
		
		
		Access Guide |
		Go |
		Search |
		Top Ten
	

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.

	Non ho link
	Ho un link

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.

	The cool site!
	
	
		
	

Come funziona? Quando ci si posiziona sull’immagine, il browser aggiunge all’url di , quindi a map_script.php, le due coordinate. Ad esempio, se ci posizioniamo sul pixel di coordinate (18,46), il link del tag  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.
=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.

	The cool site!
	
	
		
	
	
		Navigate the site:
		Access Guide |
		Go |
		Search |
		Top Ten
	
	

Il testo alternativo
I tag  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.

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)
" alt="Immagine" />
Come inserire un’immagine in base64 (con funzioni per il tipo MIME)

;base64," 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è , 
, , 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 . 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 .
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

Sprite CSS - Esempio 1

	
	
	


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

Sprite CSS - Esempio 2

	
	
	


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

Sprite CSS - Esempio 3

	
		
		
		
		
		
	


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

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.

	AddHandler application/x-httpd-php .css

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

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.

	AddHandler application/x-httpd-php .js

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:

stamparli direttamente nel codice html
dividerli su più file esterni (da richiamare)
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).


Javascript e Css nella pagina













	Javascript e Css nella pagina
	Guarda il codice 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 
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














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



Marketing e business su Twitter: consigli e strategie per promuovere blog, siti e aziende
Giacomo — Tue, 05 May 2009 20:54:41 +0000
Twitter è la prima e più importante piattaforma di “microblogging”.
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

jblog » Giacomo

Scroll automatico e animato con “scrollTop” e il plugin “easing”

Aspetti positivi

Al lavoro!

1. Includere jquery e jquery.easing

2. Attribuire una la stessa classe a tutti i link per lo scroll animato

3. Copiare il blocco di codice per lo scroll animato

4. Impostare la classe dei link che avviano lo scroll animato

Demo e download

Il plugin jConfirmAction

e link (uguale a quello per la classica “confirm”)

Implementazione base di jConfirmAction

Demo e download

Grafica

CSS

HTML

Un plugin alternativo

5 miti da sfatare su javascript

Come riciclare inutili “listoni” in titoli e contenuti più usabili

Alternativa 1: post grande, focalizzato su un particolare argomento

Alternativa 2: dividilo in post più piccoli

Conclusione

Steve Jobs, Adobe Flash e HTML5

Audio e Video player

Grafica e animazioni

I nuovi tag HTML5 per il multimedia

Documentazioni utili

Curiosità

The Conversation Prism

Originale – Seconda versione

Originale – Prima versione

Germania – Seconda versione

Germania – Prima versione

Cina

Giappone

Aggiornamenti e novità per Google Docs: documento, foglio elettronico, editor grafico

L’editor dei documenti

Il foglio elettronico

Nuovo editor di grafici, forme e disegni

Offline non supportato

Come abilitare le anteprime

Google Wave?

Fonti

Google Docs permette l’upload di file… di qualsiasi tipo!

Alcuni dettagli

Vijay Bangaru, Google Docs product manager

Fonti

Autenticazione HTTP “basic” su server Apache

SOMMARIO

Note sull’articolo

Un buon motivo per l’autenticazione HTTP

Le diverse autenticazioni HTTP

Un esempio veloce

File .htaccess

File .htpasswd

Demo

Le direttive Apache

Ottenere il percorso assoluto

Se non sei pratico/a di php segui queste istruzioni

Il file delle password: .htpasswd

Strumenti utili per .htpasswd

Esempio di file .htpasswd

Il file dei gruppi di utenti: .htgroup

Esempio

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

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

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

.htgroup (per il file .htaccess versione 2)

Autenticazione HTTP in pratica

Come proteggere i file

Uso della direttiva

Uso della direttiva

Come proteggere una directory

Esempio di file .htaccess da inserire nella directory da proteggere

Una nota sulle prestazioni

Creare eccezioni

Soluzione veloce

Soluzione complessa

Esempio

Personalizza la pagina di errore “401 Authorization Required”

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