Codice HTML semantico

Nel post scorso si è parlato di come creare una sqeeze page, oggi voglio cambiare totalmente argomento e parlare di un aspetto che mi è molto caro anche se spesso è sottovalutato.

Quando si parla di semantica, chi non ha una conoscenza perfetta di HTML e “seguito” (css, javascript, ecc…) sente le pupille rovesciarsi all’indietro ed è costretto a cambiare argomento per riprendersi.

NOTA: Un buon blogger non dovrebbe mai copiare il post di un altro, ma nel mio caso voglio copiare un post di me stesso, scritto su un vecchio blog che è stato chiuso appena nato, causa querele…vabbé… eccolo qui.

I fattori che rendono un sito semantic-friendly sono esclusivamente on page, quindi con qualche aggiunta, modifica e spuntatina ai nostri codici Html riusciamo a costruire una buona base di partenza.

Vediamo un po’ come implementare i microformati (tra cui hAtom, hCalendar, hCard, hReview, XFN)

Innanzitutto va premesso che per ogni microformato esiste un particolare vocabolario di termini che vanno usati in punti diversi dei tag HTML della pagina. Ad esempio alcuni andranno inseriti come class di un tag, altri nell’attributo rel. Cominciamo proprio da qui:

Implementare XFN

Forse il più intuitivo dei microformati semantici, molto semplice da inserire nelle nostre pagine.
XFN serve per rappresentare relazioni umane attraverso i link, quindi all’interno dell’attributo rel dovremo inserire valori come “friend” se stiamo linkando il blog di un nostro amico, oppure “met colleague” se stiamo indicando il sito di un collega incontrato di persona. La sintassi è molto semplice e potete vedere come funziona qui .

Esempio: <a href="http://sito.ext" rel=”co-worker”>Il sito di un mio collaboratore</a>

hAtom, hCard, hCalendar e hReview (e simili)

La tecnica per implementare tutti questi formati è molto simile. Prendiamo come esempio hReview che serve per rendere semantic-friendly le recensioni di prodotti, servizi, ecc. Rubo l’esempio da qui e lo riporto.

Facendo la recensione di un ristorante, il nostro codice “non semantico” potrebbe assomigliare a questo:

<div>
<span>5 stars out of 5 stars</span>.
<h4>Crepes on Cole is awesome</h4>.
<span>Reviewer: <span>Tantek</span> - April 18, 2005</span>.
<blockquote><p>.
Crepes on Cole is one of the best little creperies in San Francisco.
Excellent food and service. Plenty of tables in a variety of sizes
for parties large and small. Window seating makes for excellent
people watching to/from the N-Judah which stops right outside.
I’ve had many fun social gatherings here, as well as gotten
plenty of work done thanks to neighborhood WiFi.
</p></blockquote>.
<p>Visit date: <span>April 2005</span></p>.
<p>Food eaten: <span>Florentine crepe</span></p>.
</div>

Per renderlo semantic friendly è necessario semplicemente fare qualche aggiunta (in rosso):

<div class=”hreview”>.
<span><span class=”rating”>5</span> out of 5 stars</span>.
<h4 class=”summary”>Crepes on Cole is awesome</h4>.
<span class=”reviewer vcard”>Reviewer: <span class=”fn”>Tantek</span> -
<abbr class=”dtreviewed” title=”20050418T2300-0700″>April 18, 2005</abbr></span>.
<div class=”description item vcard”><p>.
<span class=”fn org”>Crepes on Cole</span> is one of the best little
creperies in <span class=”adr”><span class=”locality”>San Francisco</span></span>..
Excellent food and service. Plenty of tables in a variety of sizes
for parties large and small. Window seating makes for excellent
people watching to/from the N-Judah which stops right outside.
I’ve had many fun social gatherings here, as well as gotten
plenty of work done thanks to neighborhood WiFi..
</p></div>.
<p>Visit date: <span>April 2005</span></p>.
<p>Food eaten: <span>Florentine crepe</span></p>
</div>

Così a occhio può sembrare complicato, ma quello che ho fatto è molto semplice.
Ho selezionato i dati chiave della recensione utilizzando l’attributo class. Ovviamente non ho inventato le classi, ma le ho prese dal vocabolario delle specifiche hReview.

I casi sono 3:

  1. il valore si trova già racchiuso perfettamente dentro un tag
    <h4 class=”summary”>Crepes on Cole is awesome</h4>
    quindi aggiungo semplicemente la classe “sommario” della revisione
  2. il valore è all’interno di tag, ma ci sono altri contenuti
    <span><span class=”rating”>5</span> out of 5 stars</span>
    allora separo il valore puro (5) con il tag span e gli do la classe “voto” della revisione
  3. il valore non è rappresentato correttamente
    <abbr class=”dtreviewed” title=”20050418T2300-0700″>April 18, 2005</abbr>
    usando l’attributo title specifico il valore vero, se non voglio visualizzarlo nella pagina

Ora non sto a fare esempi per ogni microformato, li potete trovare nelle pagine dedicate, e sono tutti molto simili. L’unica difficoltà, se vogliamo, sta nel ricordare le classi da utilizzare. Un po’ di pratica e diventarà naturale come aggiungere delle meta keyword!

Link building, Come va fatto un link building ottimale?

Google e la maggior parte dei motori di ricerca danno estrema importanza ai link in ingresso ed in uscita dalle nostre pagine web.
Questo aspetto incide sul page rank ed anche direttamente sul posizionamento del nostro sito.
Per fortuna i motori non sempre sono sprovveduti, e chi fa link building in maniera selvaggia ottiene il contrario di quanto sperava.

Innanzitutto, io sono contrario all’acquisto di link.
Credo che un sito valido non abbia bisogno di comprare “referenze”, ma piuttosto esse dovrebbero spontanee o quantomeno gratuite. Anche Google infatti la pensa come me, mettendo a disposizione alcuni strumenti per segnalare i link a pagamento.
Un altro motivo per non acquistare link è che nel 90% dei casi questi link sono forniti in maniera poco utile, vengono fatti girare su un network ad intervalli regolari. Questa prassi fa cambiare spesso le pagine ed i motori di ricerca potrebbero non rilevare mai il link che hai acquistato.
Terzo motivo è la qualità del traffico. Sebbene non sia tantissimo, i link portano pur sempre traffico in ingresso verso il tuo sito.
Se non hai pieno controllo di dove vengono mostrati i tuoi link, rischi di portare sul tuo sito visite poco interessate e l’unico motivo per farlo è andare al bar a dire “ho mille visite al giorno”.

Evitiamo anche di usare software per il link building che inviano automaticamente richieste ai siti tramite form o simili. Ricevere queste richieste dà fastidio. E’ più educato chiedere di persona o non chiedere proprio.

Per fare un buon link building si possono adottare delle strategie oneste, ad esempio offrire un articolo (ovviamente mai lo stesso) che contenga un link al proprio sito. Si regala un contenuto che, se di qualità, verrà inserito con piacere dal sito ospitante.

Anche lo scambio di link può essere una pratica onesta, ma non è sempre detto che l’altra parte non elimini il nostro link dopo pochi giorni. E’ bene inoltre non fare link reciproci tra due pagine, ma farli tra pagine diverse dei due siti (”collegamenti incrociati”): in questo modo i motori non possono stabilire con certezza l’artificiosità del link reciproco.

L’anchor text, ossia il testo del link (quello racchiuso fra i tag e ), deve variare. Anche un imbranato capirebbe che 10.000 link con lo stesso testo non possono essere reali. Usando anchor text sempre diversi si hanno due effetti benefici: non ci facciamo beccare da Google e puntiamo su un posizionamento long tail che non fa mai male (chi non conosce il long tail alzi la mano, nel prossimo post ne parleremo)!

Credo di non aver detto tutto (sarebbe impossibile) ma di avere riassunto una buona ripassata su come fare link building. Ricordiamoci che spontaneo è meglio; se proprio non è spontaneo, almeno mettiamoci un po’ di impegno e facciamo una cosa fatta bene!

Marketing oggi… secondo me!!!

Ultimamente mi ha fatto molto riflettere una frase del mio conterraneo Alex Giordano:

“C’è un solo marketing… quello che funziona.”

Accattivante senza dubbio, sicuramente assolve brillantemente alla necessità di essere incisiva, ma va a mio avviso integrata con la considerazione che segue:

Non c’è marketing che possa funzionare se non applicato ad un prodotto/servizio che funziona, che abbia le carte in regola insomma.

Nell’ipotesi in cui questa equazione non sussista, nel migliore dei casi ci troveremmo di fronte ad una vittoria di Pirro, nella peggiore ad una logica del prendi i soldi e scappa.

Provo a spiegarmi meglio: ho letto molte definizioni di marketing, prima da giovane studente , poi da professionista del commercio, infine nelle vesti di marketer e formatore, mi sono persino esibito in una mia personale interpretazione che qui di seguito riporto per onor di cronaca:

“Marketing è la necessità di un azienda di essere proattiva e presente nel suo tempo e nel suo spazio, avendo ben presente le esigenze ed i comportamenti dei suoi clienti attuali e dei bisogni latenti dei suoi clienti potenziali.“

Il fatto è che, al di la di elucubrazioni più o meno di qualità, trovo che il senso profondo del marketing stia nel tentare di conferire una risposta per nulla semplice ad una domanda decisamente “banale”.

La reason why“, ovvero: Perché io, qual’è il mio valore differenziale, la mia competenza distintiva, il mio patrimonio in quanto a saper essere ed a saper fare“.

Questa considerazione credo si applichi sia al mondo del business (aziende e singoli professionisti) che al marketing personale.

Se non si da soddisfazione a questa identità, alla reason why, diventa difficile, davvero molto difficile, fornire un prodotto/servizio adeguato, performante, in grado cioè di realizzare un optimum tra efficienza ed efficacia, che in sostanza può presentarsi come eccellente.

Se manca questa condizione, il marketing può tutt’al più essere l’amplificatore della notizia, un advertisingi che però rimane fine a se stesso, quindi atto a produrre quel climax insostenibile sul lungo termine cui mi riferivo qualche riga fa.

Ora mi preme ricondurre tutto il ragionamento alla realtà del mercato di oggi, quindi integrando le valutazioni fin qui svolte con la fenomenologia derivante dall’avvento del fattore Web, soprattutto nella sua evoluzione consumeristica” (Badalic), interattiva, democratica e… peer to peer, che mi sembra infine l’espressione che meglio sintetizza la realtà cui mi riferisco.

Il web autoreferenziale” , semantico, che costruisce se stesso, rappresenta per me uno strano ossimoro.

Da una parte moltiplica in modo esponenziale la quantità di informazioni a cui attingere e le relative fonti di produzione e di erogazione, cosi da essere potenzialmente vettore di sentimenti di opprimente vertigine e confusione.

Marketing

D’altra parte proprio la stessa evoluzione tecnologica che ha permesso questo scenario, ci consente di sviluppare antidoti virtuosi grazie anche alla possibilità e potenzialità dell’user generated content.

Tutta la tematica della brand awareness assume allora un rinnovato rilievo, poiché siamo di fronte ad una catarsi, e la questione si centra finalmente sul concetto di brand reputation, la summa delle opinioni dei più e dei meno esperti che hanno, però, in comune l’interesse per il brand in questione..

Il layout e la nascita dell’idea

Il layout è la disposizione degli elementi grafici in una gabbia tipografica che, attraverso il rough, determina la nascita dell’idea. Qualsiasi progetto che prevede la diffusione e relativa presentazione di informazioni di carattere visivo/testuale, deve necessariamente essere organizzato secondo una precisa struttura grafica nella quale vanno poi inseriti i contenuti.

Ideare un layout è una operazione che richiede alcuni passaggi fondamentali:

Classificazione e organizzazione dei contenuti.
Ideazione di un rough, la bozza.
Distribuzione dei contenuti nella gabbia tipografica.

Nella prima fase, subito successivo alla lettura del brief, ovvero l’insieme di informazioni ed istruzioni scritte, volte a dare spunti e strategie utili alla realizzazione creativa. In questa fase che avviene il “punto di rottura”, ovvero si evolve e sviluppa l’elaborazione creativa.

La scelta della tipo di layout dipende da fattori diversi. Basta attenersi solo a pochissime regole e ad una suddivisione di:

headline o titolo, che deve sempre avere un maggior peso rispetto al resto del testo, se c’è
body copy o titolo, cioè la parte descrittiva dell’annuncio pubblicitario stampato
pay off, il testo che solitamente accompagna il marchio e ne caratterizza i servizi o la politica aziendale
key visual, l’immagine chiave, che esprime il messaggio in forma visiva

Per solleticare quindi il cervello dei creativi, si passerà al brainstorming, una riunione creativa tenuta a volte anche in presenza dell’account executive, durante la quale, attraverso alcune tecniche, si mettono sul piatto le proprie idee fino alle definizione di quella “giusta” che verrà poi tradotta nel rough.

ll rough, non è altro che la sintesi che il creativo, in special modo l’art o il grafico, traduce in comunicazione visuale. Non esiste una tecnica applicata per realizzare uno schizzo, questa non è altro che la rappresentazione visuale di una idea e chiunque a suo modo può realizzare.

Solo dopo questo processo, possiamo determinare il layout come l’elaborazione più prossima all’idea definitiva, o finished layout.

In pratica, dal momento della lettura del brief, inizia il processo creativo, che scaturirà nell’interpretazione, rappresentazione e sintesi del messaggio pubblicitario.
Le gabbie tipografiche

Alla base di qualsiasi paginato c’è una gabbia.

Il layout

Questa serve per organizzare i contenuti di una pubblicazione in modo che il paginato e i vari contenuti possano essere gestiti mantenendo una immagine unitaria, riconoscibile e organizzata secondo le migliori chiavi di lettura possibili.

Il layout

Una delle scelte di base da fare quando si deve decidere come organizzare testo ed immagini in una pagina, dopo la scelta del formato è quella della distanza di testo e immagini dai bordi della carta, il margine.

Il layout

Ci sono vari criteri per decidere queste misure e oramai le regole canoniche della tradizione non sono quasi più rispettate se non addirittura dimenticate del tutto.

Il layout

Per la progettazione di un impaginato si usava stabilire la gabbia individuando una divisione tra bianco e nero con le proporzioni auree indicate dalle diagonali dello specchio e della pagina, la gabbia poteva essere speculare o asimmetrica.

Il layout

Quando era simmetrica lasciava un bordo bianco maggiore all’esterno e a in basso. Questo permetteva di sfogliare le pagine senza toccare con le dita i caratteri di stampa e dava un ampio margine al consumo della pagina, che poteva essere toccata per molte volte prima di rovinarsi irrimediabilmente.

Il layout

Il layout

La prima diagonale da tirare e’ quella su una unica pagina, seguita dalla diagonale che attraversa lo specchio.

Il layout

Quest’ultima divisione è sempre meno usata ma è sempre utile conoscerla, magari per stravolgerla.
Il colore

Il colore determina il messaggio e rivela l’oggetto stesso… to be continued…

AAA CREATIVE .NET, PRIMA MISSIONE

Realizzare ex-novo un sito web nello spazio di un week end e ottenere un risultato tale da soddisfare un cliente esigente coordinandosi solo online non è cosa di tutti i giorni. Ma Eddy Pedro, Sasà Tomasello e Franco Dalfovo ci sono riusciti piuttosto facilmente. Il sito Max Clan è stato messo online puntualmente alla scadenza chiesta dal cliente, lunedì 2 marzo.

Io? Questa volta sono del tutto innocente, giuro. L’intervento di un copywriter non era richiesto.

Il brief

Il cliente, titolare del brand di calzature femminili di fascia medio alta Max Clan, ha chiesto il remake del sito precedente, poco usabile e quasi totalmente realizzato in Adobe Flash in uno continuamente aggiornabile anche dall’azienda stessa.

Il cliente ha anche chiesto che gli utenti, oltre a trovare sul sito i suoi prodotti, potessero navigare tra diversi contenuti inerenti al mondo femminile e della moda.
Il progetto

Il nuovo sito Max Clan è stato pensato partendo da una home page che evidenziasse i contenuti relativi all’azienda e i link ai vari social network.

Per mantenere aggiornati i contenuti si è puntato su un blog interno, destinato ad essere la parte vitale del sito, pieno di foto, video e articoli e che, in home page, è evidenziato da un box con i link agli ultimi due post.
Il layout

Dopo avere effettuato uno studio sulla presenza in rete della della concorrenza, è stata presentata una prima bozza, non accettata in quanto il cliente desiderava un approccio più convenzionale.

Di questa proposta è stata mantenuta la struttura, alla quale è stato dato un look più trendy.

Sono stati usati alcuni accorgimenti quali l’inserimento di elementi color oro, in testata e nei menù per rendere più riche le pagine.
Lo sviluppo Web

È stata usata la versione più recente di WordPress, con i plugin necessari per le funzionalità richieste, in particolare quelli che visualizzano l’ultimo post per ogni categoria e la lista dei post più popolari.

Una volta messo in piedi il core, è stato creato il template di base, poi applicato a tutte le pagine.

In una seconda fase, il template è stato leggermente personalizzato per le varie aree del sito, usando sia i file predefiniti dei template di WordPress (page.php, single.php ecc) sia creandone di nuovi da applicare direttamente a pagine specifiche (ad esempio la pagina alla quale porta il menù “BLOG”).

Si è cercato di rendere compatibile il template con tutti i browser, e di mantenerlo il più leggero possibile. Applicando il più possibile stili CSS si è riusciti ad evitare le immagini in gran parte del sito. Il risultato è stato un template del peso complessivo soddisfacente.

Le funzionalità del blog, esclusi un paio di plugin comunissimi, sono quelle classiche di WordPress.

Il Cloaking

Su “gentile richiesta” della simpaticissima Titti Cimmino, fatta nei commenti al post precedente dedicato al Link building (che bello darsi un tono :P), oggi proviamo a parlare di cloaking.

La definizione di cloaking (da Wikipedia):
“Il cloaking è una tecnica informatica mediante la quale, grazie a particolari script, è possibile mostrare ai motori di ricerca un contenuto differente da quello che realmente il sito propone agli utenti, consentendo così al sito stesso di ottenere migliori posizionamenti all’interno delle SERP.“

Io vorrei rivedere la definizione dicendo che più genericamente il cloaking è “mostrare contenuti diversi ad utenti diversi, in base a parametri di qualsiasi tipo (geografico, tecnologico, o altro)”.

Come si fa cloaking?:

Tramite linguaggi di scripting lato server (PHP, ASP, ecc…) siamo in grado di ricavare alcuni parametri del visitatore (provenienza geografica, browser utilizzato, sistema operativo possibilità di usare javascript, …) e in base a questi valori inviamo un contenuto diverso al loro browser. Quindi potenzialmente potremmo servire un contenuto diverso per ogni persona del mondo che visita il nostro sito.

Non ho mai avuto voglia di provare a fare un test sul cloaking, perché credo che nella maggior parte dei casi sia una pratica scorretta o borderline, comunque so per certo che ci sono due modi di fare cloaking (tanto per citare una pubblicità in TV): farlo bene e farlo male.

Quando è fatto bene?:

Quando dà valore aggiunto al nostro sito, ad esempio se vogliamo servire all’utente una determinata lingua in base alla localizzazione del suo IP, o un link diverso in base al sistema operativo su cui gira il browser del visitatore, oppure mille altri motivi. Però c’è sempre il rischio che i motori di ricerca rilevino il tentativo e ci penalizzino. Quindi è bene limitare il cloaking a piccole parti delle pagine, e non fare pagine completamente diverse.

Quando è fatto male?:

Se, come dice Wikipedia, lo scopo del cloaking è fare vedere una cosa ai motori ed un altra ai visitatori, è estremamente scorretto. La tecnica, secondo me, è da considerare black hat (quindi “politicamente scorretta”) perché, anche lo facciamo a fin di bene, significa che non siamo sufficientemente bravi da posizionare il nostro sito in maniera classica (e quindi meritocratica), ma dobbiamo prendere delle scorciatoie. Inoltre, nessuno può dirci con certezza che Google (o altri motori) non usi dei bot “mascherati” da normali visitatori e quindi potrebbe essere in grado di rilevare facilmente il nostro tentativo e…. Bye bye prima pagina!

Crazy Marketing Network: le regole

Bene, la settimana scorsa abbiamo dato il benvenuti ai nuovi membri. Ora è giunto il momento che anche loro diano l’annuncio della loro adesione secondo le regole.

E le regole quali sono? Eccole, a beneficio sia dei nuovi membri che dei potenziali candidati.

Al network si viene ammessi sia su invito di un membro patrocinante, che ha il compito di istruire i candidati e di verificare che siano in regola con le disposizioni.

Per essere accettati, un blog deve avere queste caratteristiche:

Avere un PageRank pari a PR3 o superiore
Trattare almeno nel 50% dei post di marketing e comunicazione, preferibilmente non convenzionale
Postare almeno un articolo ogni settimana
Essere disponibile su richiesta a veicolare campagne di viral marketing che potrebbero essere commissionate al network
Essere disponibile a collaborare con altri membri del network alla diffusione di notizie impostanti

I nuovi membri dovranno obbligatoriamente inserire sul loro blog il blogroll di Crazy Marketing Network, separato da altri blogroll, e aggiornarlo ogni volta che viene pubblicato un nuovo “listone” (l’elenco dei membri in formato HTML).

Attenzione: se si è già linkati con altri membri di CMN, si dovranno togliere il vecchi link e lasciare quelli nuovi.
Social network

Richiediamo anche la presenza su un certo numero di social network che consideriamo strategici, sia con un profilo personale che come membri dei gruppi CMN che vi sono presenti. Ecco l’elenco: