Responsive Design: I Vantaggi di un Template Responsive

(venerdì 7 ottobre)

Responsive Design di certo non è un termine nuovo se si sta valutando di fare un restyling del tuo vecchio sito web!

Prova a restringere orizzontalmente la finestra del browser… vedi che le informazioni si spostano e si adattano? Ecco, questo sul quale stai navigando, ad esempio, è un sito responsive! 🙂

adapt_suteresponsive

Responsive design: quali vantaggi?

  • Il responsive design rende il tuo sito web visibile correttamente da chiunque.
  • I siti web pensati per i dispositivi mobili sono veloci ed efficienti; sono caratterizzati da una struttura snella, funzioni di navigazione semplici ed intuitive e tempi di caricamento rapidi. Questo permette di offrire un’ottima esperienza di navigazione agli utenti, facendo in modo che trovino subito e facilmente quello che stanno cercando.
  • La manutenzione e l’aggiornamento dei siti internet progettati con le tecniche di responsive design risultano semplificati. Realizzando un unico sito web si interviene su una sola struttura e su un solo contenuto in caso di modifiche, riducendo in tal modo i tempi e i costi di manutenzione. Si evitano, inoltre, problemi di duplicazione dei contenuti con conseguenti vantaggi in termini di posizionamento nei motori di ricerca .

Il Responsive Design oltretutto, con la sua capacità di eliminare eventuali blocchi della struttura, ad esempio nella navigazione da mobile, per favorire la lettura di quei contenuti realmente utili agli utenti che si collegano mentre sono in movimento!

Pensa al sito di un ristorante.  E’ giusto che nella navigazione da desktop l’utente sarà comodamente seduto alla sua scrivania ed apprezzerà che il sito si apra con delle immagini in primo piano, che mostrano i piatti in bella vista, succulente pietanze e magari i feedback dei clienti, ma da mobile a cosa sarà importante dare immediata visibilità? Indubbiamente ad esempio alle informazioni sulla localizzazione!

E’ fondamentale contemplare l’esperienza di navigazione dell’utente per rendere un sito accattivante e utile, non credi ?

 

(tratto da www.madd.it)

Bootstrap: 3 motivi per cui renderà la creazione dei vostri siti più semplice

(venerdì 7 ottobre)

Negli ultimi anni le modalità di creazione di sito Web sono completamente cambiate. Dieci anni fa la maggior parte dei siti Web venivano realizzati “a mano”, nel senso che tutto il codice HTML, CSS e JavaScript veniva scritto ad hoc, su misura della specifica esigenza.

 

Web Design: è giusto sviluppare e/o usare template?

(venerdì 7 ottobre)

 

usare-template

C’è chi sostiene che siano la rovina del mercato e li percepisce come una minaccia alla propria professione e capacità creativa, c’è anche chi afferma che solo gli smanettoni possono prenderli in considerazione perché sono sinonimo di poca preparazione e tanta superficialità.

Di cosa stiamo parlando? Dei template (WordPress, Joomla, ecc) belli e pronti offerti in stock nei tantissimi marketplace che si possono trovare oggi sul Web.

Ma come stanno veramente le cose? Proviamo a capirlo insieme attraverso questa mia personale analisi così che io possa condividere con te il mio parere in merito all’argomento.

Chi è l’utilizzatore finale di un template?

Iniziamo con il capire chi è l’utilizzatore finale di questi template. Perché, come vedremo, non sempre si tratta di smanettoni che non hanno studiato e non conoscono il mestiere: spesso possono ricorrere all’utilizzo di un template anche dei professionisti che svolgono questo lavoro da anni.

Sicuramente chi non fa e non farà mai uso di template, sono i grandi marchi o le grandi aziende le quali possiedono già un proprio brand, una propria immagine e una propria linea di comunicazione e quando è il caso di portare il proprio business online si rivolgono a professionisti che siano in grado di realizzargli un progetto su misura basato sull’unicità del proprio marchio.

Il template nella maggior parte dei casi è acquistato da quattro tipologie di utenti ben specifiche:

  • Chi si spaccia per Web Designer: è la specie più pericolosa perché non ha la minima idea di cosa significa la parola “web design”, non conosce nulla di codice, è in grado solo di installare il CMS di turno (WordPress, Joomla o altro) e di configurarlo. Se il cliente gli chiede anche semplicemente di spostare il logo da una parte all’altra del tema, entra nel pallone. S’inventerà le scuse più assurde per sostenere la tesi che il sito purtroppo non si può modificare.
  • Chi lo fa per se stesso: appartiene a questa categoria l’utente che pur non svolgendo la professione di web designer riesce a destreggiarsi nella personalizzazione – seppur molto limitata – di un template, realizzando così il sito web per se stesso o per la propria attività senza investire grandi cifre.
  • Il Web Designer alle prime armi: ha intrapreso questo percorso da poco e ancora non è completamente in grado di realizzare da solo un progetto web nella sua interezza, quindi si affida a un template in modo che con le sue attuali conoscenze possa già avere una base di partenza su cui andare a fare le modifiche e le personalizzazioni del caso.
  • Professionisti del settore: quando si presenta un cliente che ha un budget ridotto, il professionista può fare solo due cose, o rifiutare il lavoro oppure proporre una soluzione economica, come potrebbe essere appunto l’acquisto e l’utilizzo di un template. È importante e corretto che il cliente sia messo a conoscenza della soluzione adottata e che potrebbe trovare in giro altri siti web simili al suo giacché si tratta di un prodotto acquistato in stock.

Perché la vendita di questi Template non ti toglie il lavoro?

C’è chi sostiene che la vendita in stock di questi template a basso costo toglie lavoro ai web designer.

Come possiamo notare dall’analisi appena fatta, il “template” il più delle volte è rivolto a una tipologia di clienti che ha un budget di spesa molto basso e ai quali sarebbe inverosimile proporre una soluzione ad hoc.

Come ho detto un po’ di tempo addietro, la tipologia di clienti che pretende la realizzazione di un sito web a trecento o quattrocento euro è assolutamente da evitare. E questo già potrebbe bastare per dire che la vendita di questi template non ci toglie lavoro. Anzi, probabilmente ci libera da una fetta di clientela che il più delle volte fa solo perdere tempo e pazienza al povero web designer.

Trasformare la minaccia in opportunità?

Ti dirò di più. Hai mai provato a guardare lo scenario appena descritto sotto un’altra ottica?

Quale ottica? Provo a mostrartela.

I quattro gruppi utilizzatori di template (chi si spaccia per web designer, chi lo fa per se stesso, il web designer alle prime armi e i professionisti del settore) non sono altro che un altro “gruppo di potenziali clienti” ancora più vasto del singolo acquirente finale cui siamo abituati.

A questo punto, se guardiamo la situazione da un altro punto di vista, i template in vendita a stock piuttosto che toglierci lavoro diventano – paradossalmente a quanto sostenuto da qualcuno – una possibile fonte di lavoro e di reddito.

Così il professionista oltre che lavorare con i clienti finali può scegliere di sviluppare anche template da vendere in stock. E quando in media ogni template messo in vendita inizia a fruttare qualcosa come diecimila euro, allora comincia a pensare che no, la vendita in stock di questi template non glielo sta proprio togliendo il lavoro 🙂

Se sei interessato ad approfondire l’argomento, in uno degli interventi che terremo nel Seminario di sabato 26 novembre a Milano, analizzeremo proprio il nostro caso studio.

Conclusione

Sono dell’idea che il mercato ha le sue richieste, che sono tante e diverse tra di loro, e – soprattutto nel nostro settore – queste possono mutare radicalmente da un anno all’altro.

Purtroppo non siamo noi a generare “la domanda”. Un professionista però deve imparare a essere poliedrico e non lasciarsi trovare mai impreparato, in funzione della domanda deve sapersi adattare per non restare indietro con i tempi e riformulare le sue “offerte”. Oggi più che mai ci sono infinite possibilità di fare business nel nostro settore.

Quest’articolo non vuole essere un inno alla vendita e l’uso dei template, ma solo un’attenta analisi per farti capire che non sempre tutto ciò che si presenta come una minaccia è sempre realmente una minaccia. Spesso sta alla nostra creatività riuscire a trasformare una presunta minaccia in un’opportunità di crescita, sia professionale che economica. Non pensi anche tu?

 

(tratto da www.yourinspirationweb.com, 15 novembre 2011 di Nando Pappalardo)

Progettare la pagina Web: idea, wireframe e mockup

(martedì 5 ottobre)

Lo sviluppo di un sito Web è molto più complicato di quanto si possa pensare, ma con una buona pianificazione del flusso di lavoro possiamo semplificarci molto la vita. La grafica è solo l’ultima fase del lavoro del Web Designer. Non esiste una legge scritta su come sia meglio sviluppare il progetto di un sito, ma orientativamente possiamo individuare nel percorso di produzione diverse fasi:

ALT_TEXT
  1. Definire il concept del sito e i suoi obiettivi
  2. Organizzare l’albero di navigazione
  3. Wireframing
  4. Creazione mockup
  5. Prototyping

L’idea del sito e i suoi obiettivi

Il primo passo da fare consiste nel precisare l’idea di base del sito e dei suoi obiettivi e destinatari. Abbiamo già visto nelle lezioni precedenti cosa bisogna fare per creare un concept solido ed efficace.

Organizzare l’albero di navigazione

Un passaggio fondamentale prima della produzione grafica è avere ben chiara in mente e, possibilmente, anche su un pezzo di carta (sketch), la struttura generale del sito: tipo di navigazione, numero di pagine, collegamenti interni ed esterni, contenuti sia grafici che testuali, principali tecnologie da usare.

In questa fase è molto utile pianificare il nome da assegnare a ogni pagina (e agli eventuali file multimediali allegati). Oltre che essere un ottimo esercizio per entrare nella logica della progettazione dei siti, risulterà più facile apportare eventuali correzioni o modifiche che non erano state previste all’inizio del lavoro.

Wireframing

Dopo aver definito concept e albero di navigazione, dobbiamo tenere a portata di matita il nostro blocco di carta dove abbiamo realizzato degli sketch e individuare, disegnandole, le aree principali del sito. Logo, menu principale, eventuali colonne laterali, l’area dei contenuti…e così via.

Disegneremo quindi dei box annidati che ci aiutano a determinare la gerarchia dei contenuti che dobbiamo inserire e di conseguenza il layout migliore per una semplice e chiara consultazione da parte degli utenti.

Wireframe

Wireframe

Successivamente, se necessario, ripasseremo il wireframe con un programma di grafica vettoriale (come Illustrator per esempio). Possiamo anche utilizzare librerie di elementi grafici già pronti all’uso (template) per velocizzare il lavoro e inserire anche pulsanti, menu a tendina, form e tutto quegli elementi necessari a definire l’interfaccia utente di base.

Inizio di un Mockup

Esistono diversi tool per la realizzazione di wireframe, da suggerire sicuramente Balsamiq mockups.

Creare un Mockup

Finalmente possiamo passare a Photoshop o Fireworks per creare grafica e tutto ciò che è visual design. Terremo sempre a mente il concept e le linee guida stabilite in precedenza, ma è qui che possiamo dar sfogo alla nostra creatività utilizzando elementi grafici, tipografici, fotografici, texture…e tanta ispirazione!

Il mockup verrà visionato, revisionato e successivamente approvato dal cliente e quindi ha un ruolo fondamentale nel determinare l’esito stilistico/comunicativo del progetto. È importante realizzare una o più immagini di anteprima (pdf, jpg, png) che siano il più fedele possibile al risultato finale che il team di produzione pubblicherà successivamente online.

Per questo è bene rispettare delle impostazioni di base del file grafico:

  • impostare una larghezza standard in pixel pari all’area del browser in cui apparirà la grafica (900px, 960px, 1200px, 1680px, 1920px, ecc.)
  • impostare una risoluzione di 72 dpi (la risoluzione media di un monitor)
  • impostare il modello colore RGB
  • suddividere la grafica in livelli ben separati e distinti (logo, testata, contenuto, footer, pulsanti, banner, ecc.) in modo da facilitare successivamente il “ritaglio” degli elementi grafici che appariranno nelle pagine web

Il mockup quindi potrà essere un file grafico suddiviso in livelli pronti all’uso, di dimensioni e risoluzione standard per internet e con un design chiaro e accattivante per il cliente e l’utente finale.

Prototyping

I prototipi sono solitamente delle semplici interfacce create in HTML/CSS (e JavaScript per l’interazione) con le quali il team di produzione e il cliente possono avere feedback reali sull’utilità e sull’accuratezza del progetto direttamente nel browser.

Solitamente l’aspetto visuale è secondario e scarsamente rappresentato e le funzionalità del sito sono sviluppate solo in modo parziale.

Questa tecnica risulta molto utile nel caso di siti complessi e funzionalità sperimentali perchè permette di poter testare e affinare la logica di componenti e interfacce velocemente e intuitivamente.

 

Il Web Design è l’arte di costruire siti. Tra le varie professioni del Web rappresenta quella più multidisciplinare coinvolge la progettazione, la realizzazione ed i contenuti

 

 (tratto da www.html.it, di Valentina Paci)

L'ABC sull'uso dei template

(lunedì 3 ottobre)

 

(Da Wikipedia)

Nel campo delle pagine web vengono denominati template quei documenti d’esempio che vengono messi a disposizione gratuitamente o a pagamento su siti internet, per lo sviluppo di altre pagine web con grafica e formattazione identiche ma contenuti diversi. Sono uno strumento utile e potente per chi vuole:

  • creare un sito con uno stile uniforme pur non avendo molte competenze,
  • usare un codice che spesso risulta corretto se convalidato,
  • ottenere un layout ‘user-friendly‘ e graficamente ricercato.

 

  • 1  Il template è l’insieme delle caratteristiche grafiche del sito. La grafica può
    essere costituita da loghi, tabelle, testo, immagini, pulsanti, ecc..
    Vi sono due possibilità: creare da soli il proprio template o utilizzare dei
    template “preconfezionati” scaricabili da internet.
  • 2  Per personalizzare questi template basta cambiare il testo, il nome dei link e le                       immagini (compreso il logo) con un programma di web editing. Se invece preferite             creare da soli la propria grafica, ci sono delle cose fondamentali da sapere.
  • 3  Sia che utilizziate un template già pronto, sia che ne creiate uno voi è necessario                   di appositi programmi di web editing, ovvero programmi  con il quale                                         possono essere create e modificate delle pagine ipertestuali.
  • 4  Esistono dei software che permettono sia di modificare il codice html a mano, sia di           creare e modifica pagine web in modo totalmente visuale,senza toccare una riga di             codice: questi programmi sono detto WYSWYG , acronimo di what you see is what       you get, ovvero “quello che vedi è quello che ottieni”.
  • 5  Infatti se,per esempio, disegniamo una tabella il programma WYSWYG si preoccupa         di trasformarla in codice html . Sarebbe opportuno comunque conoscere un po’ del           linguaggio html per poter migliorare e personalizzare al meglio le proprie pagine
  • 6  Esistono molti programmi WYSWYG in commercio come Macromedia                                     Dreamweaver, Frontpage (che è contenuto nel pacchetto office),e molti freeware                scaricabili facilmente da internet.

Se scaricate un template già pronto risparmiare molto lavoro, ma se preferite creare                da soli la vostra grafica, la prima cosa che dovete fare é impostare la pagina:scegliere il              colore di sfondo,il colore del testo,il colore dei collegamenti ipertestuali, il carattere e              la grandezza del testo

  • 7  Fatto questo si può cominciare a realizzare la propria pagina. Una pagina web è                     costituita da un header, ovvero la testata, dove è presente il logo del sito e i principali         link (home,sezione download, contatti,faqs..) dal corpo, che contiene tutti i                           contenuto del sito e da un footer,il piè di pagina, che di solito contiene dei link che si         riferiscono al sito o all’autore del sito.
  • 8  Alla base di tutta la costruzione grafica del sito vi sono le tabelle che , costituite da               righe e da colonne (che formano le varie celle) , permettono una disposizione                       ordinata dei vari contenuti
  • 9  Infatti i programmi di web editing sono programmi di videoscrittura (come Word-             infatti anche con esso possono realizzarsi pagine web) e per questo considerano le             immagini come dei caratteri : esse non possono quindi essere posizione dove si                   vuole;per rimediare a questo problema esistono le tabelle che ci aiutano a disporre i           contenuti.anche esse devono essere impostate come le pagine.
  • 10  All’interno delle tabelle verranno situati il testo, le immagini  i link ecc….  Una volta           conclusa la creazione della pagina bisogna salvare il file che viene salvato come                     nome_pagina.htm oppure nome_pagina.html.

I lato oscuro di WordPress ovvero perché i preventivi per la realizzazione di un sito web possono essere molto diversi tra loro

(lunedì 3 ottobre)

Perché quando si richiede un preventivo per la realizzazione di un sito web a differenti fornitori (web agency o professionisti), i costi possono variare considerevolmente nonostante il CMS utilizzato per lo sviluppo sia lo stesso?

Mi sto riferendo a WordPress, ma il paragone rimane invariato anche per altri CMS Open Source presenti sul mercato come Drupal, Joomla, Magento, etc. Il discorso non vale per i siti web realizzati con CMS proprietari (la scelta di utilizzare un CMS open source o proprietario la spiegherò in un altro post nei prossimi giorni).

Ipotizzando la realizzazione di un sito web “standard” per presentare l’azienda, le tipologie di prodotti o servizi proposti, le news e delle informazioni di contatto, il lavoro può essere semplificato in tre passaggi:

  1. Installazione del CMS
  2. Installazione del template WordPress
  3. Personalizzazione e inserimento dei contenuti

Esistono anche altre fasi, non meno importanti, come l’analisi dei requisiti, la progettazione, la ricerca/installazione o realizzazione di plugin aggiuntivi ma, come dicevo, sto semplificando il tutto per approfondire solo l’argomento cardine.

Facendo riferimento ai nostri preventivi il 1° ed il 3° punto sono comuni a tutti, mentre quello che influisce notevolmente sulla variabilità dei costi di sviluppo è sicuramente il secondo punto, cioè l’installazione del template, questo perché può essere realizzato ex novo o acquistato.

Cosa significa acquistare un template?

Per template si intende il componente che definisce l’aspetto grafico del sito (HTML/CSS) e tutte le sue funzionalità (PHP e Javascript).

I CMS open source hanno il grande vantaggio di avere una comunità di utilizzatori, sviluppatori e designer molto vasta e attiva, per questo si riescono a trovare dei template acquistabili a poco prezzo. Esistono siti web specifici come Template Monster o Theme Forest per la vendita degli stessi e i prezzi possono variare dai 30€ ai 70€.
Non fatevi ingannare dal prezzo, perché nonostante siano economici, sono tutti prodotti ben fatti ed anche molto complessi e completi nelle funzionalità.

Cosa significa realizzare un template ex novo?

In questo caso scordatevi di avere un template a meno di 100€.
Si parla di fare uno studio grafico su misura e unico per il cliente, dove il web designer si occupa di creare l’intero layout delle pagine web coordinata all’immagine dell’azienda. Solo lo studio grafico potrebbe avere prezzi che possono raggiungere o superare i 1000€ a cui aggiungere la parte dello sviluppo del template, realizzato dai web developer, con dei costi superiori al progetto grafico.

Vantaggi e svantaggi

Il Cliente deve sapere che il template acquistato è sicuramente conveniente dal punto di vista economico, non ci sono paragoni in termini di prezzo, ma:

  • il design non è unico. Lo stesso template potrebbe essere acquistato e utilizzato su vari siti web. In alcuni casi un template potrebbe essere stato venduto anche centinaia di volte.
    Se poi, come dissi recentemente ad un mio cliente, vi trovate ad avere la grafica identica ad un sito web di un’impresa funebre? La grafica del sito è importante per identificare l’azienda o il prodotto e, non avere una grafica unica, potrebbe diventare controproducedente.
  • Possono essere necessarie particolari personalizzazioni, per esempio per visualizzare cataloghi di prodotti, che il template acquistato non sempre permette di fare come si vorrebbe e quindi si è costretti a scendere a compromessi, rinunciando ad alcune funzionalità.
  • Il template da acquistare nasce con l’obiettivo di coprire le più variegate esigenze, per poi poter essere venduto in un numero elevato di copie (chi lo realizza deve pur guadagnare in qualche modo) e per siti web ad alto traffico potrebbe risultare “lento” perché non ottimizzato sulle specifiche esigenze.

Il vero lato oscuro

Molte web agency o sviluppatori non sempre spiegano le due modalità di lavoro al Cliente finale che, non essendo un esperto del settore e non conoscendo i vantaggi/svantaggi delle varie soluzioni, spesso sceglierà il preventivo più economico.

Esistono anche casi di fornitori che lavorano solo con template acquistati, perché non hanno le competenze per realizzare template su misura secondo le specifiche esigenze del Cliente, oppure situazioni ancora più paradossali in cui il fornitore acquista un template e poi lo rivende cambiandone il nome e i dati dell’autore originale. Ciò fa pensare che la web agency o il professionista sicuramente non informa il cliente che sta acquistando uno studio grafico non originale, rivendendolo come tale e magari a prezzi fortemente superiori rispetto al vero prezzo di acquisto.

Personalmente, nel realizzare un preventivo per un sito web in WordPress, considero sempre la realizzazione di un template su misura, quindi con uno studio grafico mirato e la realizzazione ad hoc del template, ovviamente a discapito di prezzi più alti, ma con l’obiettivo di offrire al Cliente qualcosa di personalizzato secondo le sue esigenze. Nel caso in cui il budget non lo permetta o per particolari necessità, capita di proporre un template acquistato, ma informando il Cliente di questa scelta e di tutto ciò che ne comporta.

 

Quanto costa un sito Web?

(lunedì 3 ottobre)

 

Spesso mi è stata posta questa domanda. E la mia risposta è sempre stata “Dipende…“. Prima che l’interlocutore di turno abbia il tempo di replicare, formulo meglio la risposta “Dipende… da quale scopo vuoi raggiungere“. E, a questa nuova formulazione, il più delle volte, l’interlocutore “medio” (intendendo con ciò una persona di media cultura informatica) va in crisi.

La risposta “vera” alla domanda “quanto costa un sito?” infatti non è banale, come si potrebbe pensare; è influenzata da molti fattori e può risultare molto articolata a seconda del contesto che andiamo ad analizzare. Un sito Web infatti non è paragonabile ad un software qualsiasi: acquistato il pacchetto, si installa e si usa. Molti sono i fattori che entrano in gioco quando si decide di “mettere su un sito”.

Provo allora a riassumere qui di seguito alcuni dei concetti a mio avviso più significativi per rispondere in maniera corretta e professionale alla domanda di apertura, così che, d’ora in avanti, a chi mi porrà una domanda del genere potrò dargli l’indirizzo Internet di questa pagina in modo che possa leggerne il contenuto con suo comodo.

 

Le variabili in gioco

Per dare una risposta il più possibile corretta ad una persona che “non mastica” di nomi a dominioDNSHTMLCSS, ecc dobbiamo sicuramente imboccare una serie di strade che possono avere più diramazioni e portare a quindi più destinazioni. Per capire quale strada intraprendere è necessario l’aiuto del nostro interlocutore che dovrà fornirci lui stesso le risposte ad alcune nostre domande.

La prima domanda a cui il nostro interlocutore dovrebbe rispondere è: “cosa vuoi che faccia il tuo sito?“.

Per chiarire meglio questa prima domanda dobbiamo scinderla in due parti distinte:

1) vuoi solo una “vetrina” su Internet che illustri la tua attività?

2) oppure vuoi che dietro la vetrina ci sia anche un negozio vero e proprio?

Altra domanda fondamentale per capire il contesto che andiamo ad analizzare è la seguente:

3) pensi di aggiornare le informazioni contenute nel sito con una certa frequenza?

ed infine, la domanda fatidica:

4) vuoi che le persone che navigano sul Web ti trovino?

Le domande 1 e 3 sono collegate tra loro, nel senso che una risposta “si” ad entrambe comporta il ricorso ad un certo tipo di soluzione. Una risposta “no” alla domanda n. 3 ci può indicare una diversa strada da percorrere. Così come una risposta affermativa alla domanda 2 implica la scelta di determinate soluzioni di livello altamente professionale.

Ma è la domanda n. 4 quella cruciale. Di solito l’idea che l’utente medio ha di sito è: coloratissimo, pieno di effetti speciali e di immagini e che si trova sempre cercando su Google. E’ mia opinione personale che chi vi dice che tutto ciò è possibile sia davvero un “mago”! Ma si tratta di un mio personalissimo commento…

Andiamo allora per gradi e cerchiamo di fornire una prima risposta alla domanda n. 1 (vuoi solo una “vetrina” su Internet che illustri la tua attività?).

Prima diramazione. Il sito deve essere associato ad un nome specifico (www.[ilnomechevorrei].[qualchecosa]) oppure no?

Se la risposta è:
si
, voglio un sito che si raggiunga digitando www.[ilnomechevorrei].[qualchecosa], allora bisogna registrare il nome ([ilnomechevorrei]) associato ad un estensione (.[qualchecosa]).
Per farlo ci si deve rivolgere ad operatori specializzati e autorizzati dagli organismi internazionali che regolano il mondo di Internet (tecnicamente denominatiRegistrars). Questa operazione costa, di per se, pochissimo, nell’ordine diqualche decina di euro (anno) a seconda dell’estensione (.[qualchecosa]) che si sceglie (.it.com.eu, e cosi via).

Perchè ho messo tra parentesi il termine “anno”?
Perchè non basta pagare una volta per ottenere il possesso di un nome, occorre rinnovare la sottoscrizione ogni anno. Chi si pubblicizza con frasi del tipo “registra un nome oggi, il secondo te lo regaliamo”, in realtà vi regala solo il primo anno di registrazione, gli anni a venire dovrete pagare la sottoscrizione di entrambi i nomi che avete scelto.

 

 

Registrare il nome a dominio per il proprio sito web non basta, dobbiamo procurarci anche un contenitore dove collocare i contenuti (le pagine del sito).
Mi spiego meglio, registrare un nome ([ilnomechevorrei].[qualchecosa]ad esempio: marbaro.it) equivale a recarsi da un concessionario d’auto e chiedere di acquistare solo la targa dell’autovettura. La targa diventa di mia proprietà ma di che me ne faccio se non ho una macchina su cui attaccarla?

In alcuni casi, tuttavia, si tratta di un’operazione indispensabile. Pensate ad una grande azienda che voglia mettere sul mercato un nuovo prodotto che sia contraddistinto da un certo nome (che a titolo di esempio chiamerò “Il Grande Paperino”). Quell’azienda avrà tutto l’interesse a registrare su Internet il nome “www.ilgrandepaperino.it” (o “ilgrandepaperino.com” o “ilgrandepaperino.eu”, ecc) in modo che i suoi concorrenti non possano farlo a loro volta creando magari un danno all’immagine di quel prodotto. In questo caso per quell’azienda è davvero importante possedere anche solo la targa, all’auto ci penserà in seguito.

Eccoci arrivati al secondo bivio. La maggioranza dei Registrars permettono di registrare nomi a dominio (questa è la dicitura corretta per un nome tipo “marbaro.it” che d’ora in avanti userò), come quello a cui state pensando, offrendo anche lo spazio (il contenitore) su cui depositare le pagine web. In questo caso il costo può salire da qualche decina di euro (anno) a qualche centinaio di euro (anno), a seconda dei servizi correlati (il numero di caselle di posta elettronica, la quantità di spazio fornito, ecc). Diciamo che un servizio di questo tipo in formato “base”, o entry-level, può costare dai 20 ai 50 euro all’anno. Questo sito che state visitando mi costa circa 30 euro all’anno comprensivi di 5 caselle di posta elettronica e spazio web illimitato.

Bisogna però dire che ci sono anche fornitori che mettono a disposizione gratuitamente lo spazio per le pagine web. Di solito lo fanno in cambio di pubblicità all’interno delle nostre pagine. Oppure, non vi chiedono di inserire pubblicità, ma vi offrono una quantità di spazio predefinito (di solito qualche decina di Megabyte) e un’ampiezza di banda limitata (ritornerò su quest’ultimo punto in seguito). Per farvi alcuni esempi di questo genere di fornitori potete visitare il sito di AxSpace (www.axspace.com) o di FreeWebHosting (www.freewebhosting.com). Si tratta solo dei primi due nomi che i sono venuti in mente, se fate una ricerca su Google usando le parole chiave “free web hosting” (ossia “spazio web gratuito”) troverete decine di risultati.

In questo caso non avete neppure la necessità di registrare un nome a dominio, questi fornitori di solito vi forniscono un nome del tipo www.[ilnomechevorrei].[ilnomedelfornitore].com oppure www.[ilnomedelfornitore].com/[ilnomechevorrei].

Un esempio? marbaro.axspace.com
Si tratta di uno dei miei primi tentativi di crearmi un sito web.

Questo genere di servizio può andar bene per un sito personale o per una raccolta di foto o anche per una piccola o piccolissima azienda o per il negoziante che vuole mettere sui propri biglietti da visita un indirizzo Internet. Può anche rivelarsi utile nel caso che si voglia registrare solo il nome a dominio e poi farlo “puntare” ad uno di questi spazi Web (è possibile farlo). In questo caso il navigatore che digiterà l’indirizzo del vostro sito verrà automaticamente reindirizzato allo spazio che avete registrato gratuitamente.

Un esempio concreto e reale di questo meccanismo?
Visitate questi 2 siti: www.marcobarontini.it ewww.den.unipi.it/marco.barontini/.
Vi sembrano la stessa cosa? Infatti lo sono!

www.den.unipi.it/marco.barontini/ è il mio sito web personale creato sul server della Facoltà di Ingegneria dell’Università di Pisa (dove lavoravo). Siccome, prima di un riassetto generalizzato degli indirizzi web, il sito rispondeva all’indirizzo www2.ing.unipi.it/~p7255 ed era troppo complicato da scrivere (sulle tastiere “italiane” il simbolo ~ , che si chiama tilde, non c’è…) registrai (per poco meno di 20 euro all’anno) il solo nome a dominio www.marcobarontini.it(senza chiedere il contenitore per le pagine web) e feci in modo che utilizzasse le pagine che risiedono fisicamente sul server di Ingegneria.

 

Cosa significa “banda limitata”?

Significa che (sempre per fare un esempio pratico) al sito che vi ho citato in precedenza marbaro.axspace.com è concessa una banda mensile di 2 Gigabyte (2.000.000.000 byte), che tradotto in quantità giornaliera fa 66Megabyte (2.000.000.000 byte / 30 giorni = 66.666.666 byte/giorno ossia 66MegaByte al giorno). Ora, per ipotesi, se quel sito fosse costituito da una sola pagina di dimensioni pari ad 1 Megabyte, quella pagina potrebbe ricevere, in una giornata, al massimo 66 visite! Il 67esimo visitatore non vedrebbe nulla o al più un messaggio di avviso che lo informa che quel sito ha superato il limite di banda consentito giornalmente e pertanto non è più raggiungibile fino all’indomani.

Ora di norma una pagina web “normale” non pesa mai così tanto (tutte le pagine, le immagini e i file scaricabili contenuti in questo sito “pesano” complessivamente meno di 10Megabyte). Considerando che la media delle pagine visualizzate da ogni visitatore di questo sito è pari a 2,5 (che tradotto in “peso” equivale a circa 300 Kilobyte scaricati da ogni visitatore), capite bene che il numero di visitatori “possibili” nell’arco di una giornata cresce abbastanza. Pur tuttavia moltiplicando la media dei visitatori al giorno di questo sito (300) per la media della quantità di dati scaricati ad ogni visita si ottiene: 300 * 300.000 byte = 90.000.000 byte, cioè 90 MegaByte! Ciò significa che la soluzione gratuita offerta da axspace.com avrebbe permesso a questo sito di ricevere non più di circa 200 visitatori al giorno. Gli altri non lo avrebbero potuto raggiungere.

A questo punto mi devo scusare di avervi tediato con tutte queste cifre ma mi erano d’obbligo per cercare di farvi capire meglio alcuni dei tecnicismi che ci sono dietro le quinte di un sito web e per farvi comprendere meglio il valore della spesa che andrete ad affrontare.

Bene, riprendiamo il discorso. Siamo arrivati al punto che, euro + euro -, abbiamo capito che ci occorrono almeno 30 all’anno per avere: il nome del dominio per il nostro sito Web, uno spazio a disposizione dove collocare le nostre pagine e un certo numero di caselle di posta elettronica. Questo è il costo minimo (annuo) che dobbiamo affrontare per avere una presenza sul Web che inizi a considerarsi “professionale”.

Perchè ho parlato di “costo minimo annuo”?
Semplicemente perchè se ripensate alle domande che ci siamo posti all’inizio, questa affermazione risponde solo alla domanda n. 1. Se vogliamo che il nostro sito sia anche aggiornabile in maniera frequente o debba svolgere anche un ruolo di commercio elettronico (e-commerce) la soluzione “base” sicuramente non è sufficiente. E allora si deve ricorrere ad altri tipi di servizi (che normalmente tutti i fornitori di servizi Internet mettono a disposizione) che hanno costi molto più elevati. Diciamo che si può andare anche dai 10-20 euro/mese aggiuntivi in su (e badate bene ho parlato di “mese”).

Per ritornare all’esempio del concessionario di auto: adesso abbiamo la targa e il telaio della nostra autovettura. Manca però il “motore” cioè le pagine web che ci facciano “funzionare” il nostro sito e la carrozzeria, ossia tutto quell’insieme di colori e grafica che ci contraddistiguerà. Abbiamo 2 possibilità:

1) soluzione “fai da te”

2) affidarsi ad un professionista

 

 

 

Ciò che abbiamo esaminato finora riguarda l’aspetto burocratico della nostra presenza sul Web. Registrato il nome del nostro sito e ottenuto “il via libera” dobbiamo concretizzare la nostra presenza sul Web creando le pagine che ci rappresenteranno e che ci faranno conoscere al pubblico dei navigatori della Rete.

Creare la nostra prima pagina Web

Alcuni fornitori di servizi internet offrono ai propri clienti alcuni semplici strumenti per crearsi da soli le prime pagine web. In alcuni casi il servizio è gratuito, in altri viene richiesta una piccola cifra annua. Sono strumenti che assomigliano molto al vostro programma per la scrittura di testi, sono abbastanza facili da usare ma non permettono certo di produrre documenti “accattivanti”.

Rappresentano sicuramente una soluzione pratica e ideale per chi vuole iniziare da solo e per chi, all’inizio, decidere di investire un budget limitato in questa operazione in attesa di capire quali risultati può comportare.

In alternativa, se “masticate” un po’ di HTML (il linguaggio usato per creare le pagine Web), potete ricorrere a dei modelli di pagina (template) già predisposti e pronti all’uso in cui dovrete solo inserire i testi e le immagini che intendete usare. Alcuni modelli simili potete scaricarli anche da questo sito visitando questa pagina.

Se invece pensate di rivolgervi ad un professionista, sappiate che state per mettervi in contatto con un “libero professionista” e che quindi avrà tariffe (spesso orarie) da “libero professionista”. Non voglio parlare di cifre, mi pare scorretto nei confronti di tante persone serie che svolgono il loro lavoro professionalmente, ma ricordatevi che la posta in gioco può variare (e di molto) a seconda di alcuni fattori:

avete già in mente i testi e le foto da inserire nel sito / non avete la più pallida idea di cosa scrivere ne di quale foto metterci

avete già un’immagine aziendale che volete riproporre sul vostro sito /non avete alcuna immagine aziendale e lasciate fare al professionista

(nota: con immagine aziendale intendo quell’insieme di loghi-colori-disegni con cui la vostra azienda già si caratterizza, pensate ad esempio al corriere UPS i cui furgoni sono tutti dello stesso colore, marrone, con lo stesso marchio e i cui addetti indossano tutti la stessa tenuta, mi sembrerebbe alquanto strano che il suo sito sia caratterizzato da un colore verde… infatti non è così: www.ups.com)

Quello che posso suggerirvi io è questo: se vi affidate ad un professionista per la registrazione del nome a dominio e per la creazione del sito, pretendete sempre che la registrazione avvenga a vostro nome e che vi consegni il nome utente e la password e tutte le informazioni necessarie per l’accesso al “pannello di gestione” del sito.

Nel momento in cui il professionista in questione decidesse, dalla mattina alla sera, di partire per l’America perchè è stato assunto dalla multinazionale del software più famosa di questa terra, voi potreste non avere più accesso al vostro sito.

Come scegliere allora un buon professionista?

E’ una domanda molto insidiosa a cui per correttezza non mi sento di rispondere, provo solo a fornivi alcuni consigli basati su come ragionerei io per fare questa scelta.

1) da quanti anni è in attività

2) lavora da solo o in team?

3) quali e quante sono le sue realizzazioni

Perchè la domanda n. 1?
Perchè un minimo di esperienza ci vuole, è pur vero che, oggi come oggi, ragazzini di 16 anni sono già in grado di mettersi su un sito da soli, ma ci sono delle “malizie” che si apprendono solo con l’esperienza.

Perchè la domanda 2?
Perchè se lavora da solo potrebbero nascere problemi il giorno in cui lui sarà indisponibile per i motivi più svariati, ma validi, e voi volete/dovete assolutamente aggiornare una foto/un testo sul vostro sito.

Perchè la domanda n. 3?
Perchè osservando i lavori che ha già prodotto potrete farvi un’idea della sua esperienza e di quale stile prediliga, e se questo è in linea con la vostra idea di sito.

 

 

Quali sono i tempi richiesti per la creazione di un sito Web?

Anche in questo caso la risposta più appropriata è “Dipende…“!
Dipende da quanto e da quale materiale volete inserire nel vostro sito Web.

Considerate che un buon professionista deve entrare “in sintonia” con voi per capire al meglio le vostre esigenze e ciò comporta una serie di incontri tra voi e lui in modo da dettagliare tutti gli aspetti che vi interessano.

La realizzazione di una homepage (la pagina principale o “porta di accesso” del vostro sito) può richiedere da poche ore di lavoro ad alcune giornate. Ricordatevi che la prima impressione è quella che conta! Una homepage ben costruita, dall’aspetto gradevole e contenente informazioni chiare ed esaustive sulla vostra attività può fare la differenza: tra colui che si fermerà ad osservare se quello che sta cercando può trovarlo sul vostro sito e il navigatore che dopo una rapida occhiata lascerà il vostro sito in cerca d’altro.

Per il mio modo di lavorare, di solito mi occorrono: almeno un paio di incontri di qualche ora per redigere una prima bozza cartacea delle funzionalità del sito, dai 2 ai 4 giorni (a volte anche di più) per creare alcune bozze grafiche del sito (molto dipende se “ho carta bianca” o se mi devo attenere a degli schemi già esistenti emersi durante gli incontri), ancora un paio di incontri per stabilire quale bozza sia la più funzionale e di gradimento del committente, 1 o 2 giorni per creare una prima “ossatura” del sito. A questo punto si tratta di inserire tutti i documenti e le immagini che il committente vuole pubblicare sul suo sito e diciamo che, a grandi linee, possono essere necessari dai 2 ai 4 giorni di lavoro per creare un sito di una decina di pagine (non si tratta di un semplice copia&incolla come molti pensano, le foto vanno dimensionate in maniera corretta e spesso “cozzano” con l’impaginazione del testo per cui diventa necessario rivedere quest’ultimo se non addirittura l’intera architettura della pagina). Saranno poi necessari altri incontri per i controlli e le ultime “rifiniture” per un totale quindi di almeno 2/3 settimane di lavoro.

Naturalmente, tutto questo può variare in funzione del fatto che ci possono essere più persone al lavoro sullo stesso progetto (un grafico che cura i colori e l’aspetto delle vostre pagine web, un editor che pensa ai contenuti, uno sviluppatore che si occupa della scrittura del codice necessario all’impaginazione dei contenuti).

Ultimo (ma non per importanza) argomento: Google e i motori di ricerca.

Credo che sia superfluo dire che Google è il motore di ricerca più usato dai navigatori del Web. Basti pensare che le visite a questo sito provengono per il 90% da motori di ricerca. Di questo 90%, i 9/10 sono visite provenienti da ricerche fatte tramite Google.

Non basta essere presenti sul web, bisogna anche farsi trovare. E per farsi trovare bisogna essere presenti su Google in particolar modo.

Mi direte: ma se Google è un motore di ricerca, sarà lui a girare per il web in cerca di nuovi siti e, prima o poi, troverà anche il mio sito e lo metterà nella sua memoria e lo mostrerà ai suoi utenti.

Osservazione legittima e pertinente, tuttavia dovete tenere conto che Google indicizza (questo è il termine corretto) milioni di siti e se volete “uscire” al posto giusto (cioè nelle prime pagine di ricerche pertinenti alla vostra attività) non basta avere delle belle pagine web, bisogna che queste siano anche fatte con determinati accorgimenti che facciano si che Google (e i motori di ricerca in generale) capiscano di cosa state trattando.

Ma questo è un argomento complesso che tratterò in un articolo a parte.

In questo contesto mi preme sottolineare il fatto che se il vostro obiettivo è anche quello di farvi trovare a maggior ragione dovete affidarvi ad un professionista serio e competente (tutto quello che ho detto finora non deve essere inteso come pubblicità indiretta a me stesso, io non sono un libero professionista ma soltanto una persona che lavora da anni in questo settore, e, modestamente, credo di farlo anche con coscienza e professionalità). Sappiate che errori di valutazione in questo senso possono portare alla completa scomparsa del vostro sito dai motori di ricerca.

Spero di essere stato utile (ma sopratutto comprensibile) con questo mio modo di affrontare l’argomento e di non aver urtato la suscettibilità di alcuno. Se lo avessi fatto, potete inviarmi una email all’indirizzo: info@marbaro.it. Ne terrò sicuramente di conto.

 

(tratto da www.marbaro.it, di Marco Barontini)

 

Fissiamo l'attenzione sul concetto di DOM

(giovedì 1 settembre)

Cos’è il DOM

 

A volte sento dire che questa o quell’altra informazione è superflua o inutile. L’argomento di cui vorrei parlare è appunto uno di quelli spesso bistrattati e considerati poco più di un corollario a quanto già si conosce. Proverò quindi a spiegare cos’è il DOM, in modo che tutti i programmatori lato client possano avere almeno un’idea di questa struttura fondamentale per lo sviluppo web.

Il Document Object Model

per gli amici semplicemente DOM, è una di quelle cose da conoscere bene per poterci costruire sopra. Fa parte di quelle famose basi necessarie a chi vuole essere un professionista e non semplicemente uno smanettone.

Analizzandone il nome possiamo già farci un’idea di cosa si tratta.

Il DOM è un modello ad oggetti per rappresentare un documento.

Pensa ad esempio ad un grande archivio di cose da organizzare, come un magazzino di un supermercato.
Per accedere ad un qualsiasi prodotto, ci sarebbe bisogno di qualcosa che tenga catalogato tutto e lo renda individuabile in qualche modo.
Le soluzioni possono essere varie, ed ognuna sarebbe più efficace rispetto alle altre in un particolare caso.

Supponiamo ad esempio di voler sapere dove di trova un certo prodotto. In una situazione del genere potrebbe essere molto comodo un indice alfabetico che associ ad ogni nome il relativo reparto e la posizione precisa all’interno dello scaffale.
Se invece volessimo conoscere i prodotti più costosi, ci tornerebbe molto più utile una suddivisione per fasce di prezzo.

Quindi cos’è il DOM? Può essere sintetizzato come un insieme di tanti tipi di indici, catalogazioni e più in generale sistemi, che permettono di accedere ai contenuti di un documento strutturato.

Facciamo subito un esempio per capire cosa intendo. Supponiamo di avere una pagina HTML del genere:

 

Possiamo accedere alla prima immagine in svariati modi. Ad esempio:

 

che recupera il primo elemento dell’array images (una proprietà nativa di document).
Ma l’operazione in JavaScript è possibile anche attraverso i seguenti comandi:

 

o tanti altri (pensa ai selettori JQuery).

Quindi cos’è il DOM? E’ Javascript?

Assolutamente no! Attenzione a non confondere il Document Object Model con Javascript. Quest’ultimo è solo un linguaggio che permette l’accesso e la manipolazione del DOM. Infatti attraverso di esso è possibile cambiarlo al volo e di conseguenza modificare la struttura HTML della pagina ma si tratta di una cosa distinta e separata.

Ma a cosa serve avere queste basi?

Sapere cos’è il DOM e averne padronanza è molto utile nello sviluppo di applicazioni web. Conoscere com’è strutturato l’albero degli elementi di una pagina HTML, come accedere ad essi e come manipolarli, significa avere una marcia in più. Significa capire quello che si fa e non saperlo fare e basta.

Personalmente mi sono trovato varie volte a capire come risolvere un problema che qualcun altro vedeva come insormontabile, semplicemente perché conoscevo il Document Object Model. L’altra persona infatti, era costretta a fare prima uno sforzo mentale per ricostruire e padroneggiare la struttura, mentre io potevo concentrarmi sulla risoluzione della questione senza preoccuparmi di assimilare altre informazioni.
Avere queste basi insomma, è stato spesso determinante.

Puntualizzazioni

L’argomento sarebbe ancora molto vasto ma preferisco fermarmi qui specificando però alcune cose:

  • Il consorzio W3C definisce gli standard del Document Object Model ma su ogni browser sono disponibili delle estensioni.
    Quando usarle e quando tenersi nello standard? Dipende.
    Ci sono funzionalità che sono standard di fatto o che sono al vaglio del W3C per essere incluse nelle successive versioni del DOM. In questi casi non ci sono problemi. Eviterei invece quelle situazioni in cui una certa operazione è disponibile per un solo browser (o addirittura una sola versione di esso).
  • Spesso utilizziamo librerie come JQuery per accedere ad elementi del documento che sarebbero facilmente reperibili con Javascript puro, in maniera più semplice, immediata e soprattutto ottimizzata. In pratica sfondiamo una porta con un carro armato, quando quest’ultima è aperta.
  • Browser come Chrome e Firefox mettono a disposizione svariati strumenti, sia nativi che sotto forma di estensioni, per manipolare e accedere “al volo” al DOM. Basti pensare ad esempio a firebug. Questo è utilissimo in fase di sviluppo per provare dei comandi prima di utilizzarli nel codice vero e proprio. Se non l’hai già fatto, installalo e giocaci un po’. Imparerai tanto oltre ad avere un valido alleato durante lo sviluppo.

Spero di averti schiarito un pochino le idee, ma soprattutto con un argomento così vasto, sono lieto di approfondire il discorso nei commenti. Fammi sapere se anche a te è stato utile sapere cos’è il DOM in qualche situazione.

(tratto da www.saveriogravagnola.it)

Nuovo repository per gli amanti dei CSS …

(giovedì 14 luglio)

CSS4 1
Arriva fresca fresca la notizia che è stato messo a disposizione un nuovo set di selettori CSS che va a suggellare il ‘CSS4’. Qui una esaustiva guida sul materiale messo a disposizione (versione tradotta ‘online’ dall’orinale, spero sia abbastanza attendibile !!)

CSS4 4

 

 

 

 

https://translate.google.it/translate?hl=it&sl=en&u=https://drafts.csswg.org/selectors-4/&prev=search

Microdati, microformati e rich snippet: cosa sono e perché sono importanti

(venerdì 1 luglio)

 

Microdati, microformati e rich snippet: cosa sono e perché sono importanti

Scopriamo cosa sono Microdati, Microformati e rich snippet e comprendiamo perché sono importanti per ottenere visibilità.

 

Per prima cosa vediamo cosa significa rich snippet; successivamente analizziamo microdati e microformati, ovvero i formati di markup da utilizzare per ottenerli.

 

Premessa: cos’è lo snippet?

Se osserviamo la SERP (Search Engine Result Page) di Google, noteremo che i blocchi di risultati, che rappresentano le pagine che soddisfano la ricerca dell’utente, sono composti da:

  • Titolo: l’elemento più visibile e che corrisponde al tag “title” della pagina;
  • URL: in verde, rappresenta l’URL della pagina;
  • Descrizione: poche righe di testo che hanno il compito di introdurre il contenuto della pagina.

Microdati, Microformati, rich snippet: esempio di snippet

Un esempio di snippet: Google Translate

Lo snippet è proprio la descrizione della pagina web. Tale elemento gioca un ruolo importantissimo all’interno della SERP perché, oltre a fornire un “assaggio” della pagina, ci comunica il motivo per il quale il risultato è pertinente alla nostra ricerca.
Nota: le parole che vediamo in grassetto corrispondono al termine ricercato.

 

Cos’è il Rich Snippet

Mediante l’utilizzo di particolari accorgimenti, è possibile fornire a Google delle informazioni aggiuntive sulle pagine web. Questo permette al motore di ricerca di “arricchire” gli snippet (Rich Snippet) di conseguenza. L’immagine che segue mostra degli esempi di Rich Snippet.

Esempi di Rich Snippet - Microdati, Microformati


Esempi di Rich Snippet – Microdati, Microformati

In base ai dati aggiuntivi, Google è in grado di individuare la tipologia delle pagina, fornendo agli utenti un quadro più completo e quindi una maggiore possibilità di scelta del risultato più pertinente alla ricerca.
Sull’immagine di esempio, vediamo una simulazione di rich snippet di:

  • Un ristorante – lo snippet mostra il voto medio (le stelline) delle recensioni, il numero delle recensioni ed  il range di prezzo del listino.
  • Una ricetta – lo snippet mostra il voto medio (le stelline) delle recensioni, il tempo di preparazione e le calorie del preparato.
  • Un album musicale – lo snippet mostra la lista delle canzoni e la rispettiva durata.

Google, attualmente, da la possibilità di creare rich snippet per descrivere le seguenti tipologie di contenuti: personericette, musica, aziende, associazioni, prodotti, recensioni ed eventi.

E’ chiaro che uno snippet di questo tipo risulterà essere notevolmente più esaustivo per gli utenti, facendoaumentare la probabilità di click.

Come possiamo “arricchire” i nostri snippet?

Per avere a disposizione i rich snippet sulle SERP è necessario, per prima cosa, scegliere un formato di markup tra quelli a disposizione; i più importanti sono i microdati ed i microformati.

 

Microdati

Microdati: specifica HTML5

Microdati: specifica HTML5

Come detto precedentemente, i microdati (introdotti dall’HTML5) vengono utilizzati per “etichettare” alcuni dati contenuti all’interno di una pagina web in modo che Google riesca ad interpretarli. Chiaramente, ogni tipologia di contenuto avrà il relativo insieme di dati; questo perché ogni entità è caratterizzata da dati specifici (un ristorante, ad esempio, non avrà la lista delle tracce audio tra le specifiche :) ).

Praticamente come si usano i microdati? L’associazione dei microdati ad una pagina web è abbastanza semplice (prevede una conoscenza base di HTML) in quanto le informazioni vengono inserite all’interno degli attributi dei tag HTML. I tag più utilizzati per questo scopo sono

e .

La struttura dei dati prevede, per prima cosa, la definizione del “contenitore” che si identifica attraverso gli attributi:

  • itemscope (identifica, appunto che il tag che contiene tale attributo è il contenitore)
  • itemtype (stabilisce il tipo di entità che si andrà a descrivere: una persona, una recensione, una ricetta, ecc.).

Un esempio:

Person“> …

L’interpretazione: il div dell’esempio è il contenitore dei dati, in quanto tra i suoi attributi possiede itemscope; i dati andranno a descrivere una persona, come specificato dall’attributo itemtype.

I dati specifici dell’entità vengono definiti all’interno del “contenitore“; i tag HTML che li valorizzano contengono l’attributo itemprop. Vediamo un semplice esempio esplicativo completando quello precedente:

itemscope itemtype=”http://schema.org/Person“>
url” href=”http://www.alessiopomaro.com”>

Alessio Pomaro

</a>

jobtitle“>Project Manager, Web developer, Web Marketing & SEO Specialist. Consulenza SEO e SEO copywriting. Blogger.
description“>Sono un project manager e un web developer specializzato in Web Marketing e SEO (ottimizzazione dei siti web per i motori di ricerca). Mi occupo anche di SEO copywriting e sono attivo come blogger su molti siti web di successo.

address” itemscope itemtype=”http://schema.org/PostalAddress“>

addressCountry“>IT

</div>

email“>info@alessiopomaro.com
birthDate” content=”1981-08-05″>DOB: 08/05/1981

</div>

Analizziamo l’esempio, che che si avvicina ai microdati presenti su questo sito riguardanti il mio profilo.
Come vediamo, viene creato il contenitore (itemscope) e specificato che si sta andando a descrivere persona (itemtype=”http://schema.org/Person). I dati specificati per tale persona, sono un URL, una professione, una descrizione, un indirizzo di posta elettronica e una data di nascita. Ho escluso volontariamente l’indirizzo perché il modo con il quale viene definito introduce una ulteriore possibilità: l’annidamento delle tipologie.
Come si può notare, infatti, l’indirizzo è specificato all’interno di un ulteriore contenitore (itemscope) avente come tipologia un indirizzo (itemtype=”http://schema.org/PostalAddress), il quale avrà, a sua volta, una serie di dati “valorizzabili“; in questo caso, solo la nazione è stata definita.

Dove possiamo trovare la documentazione completa per l’utilizzo dei microdati?
La documentazione ufficiale relativa a tutti gli schemi (tipologie), è disponibile su http://schema.org (corredata da molti esempi).

[youtube https://www.youtube.com/watch?v=p_JKMHpsOA0]

 

Microformati

Microformati - ottenere visibilità

Microformati – ottenere visibilità

Il funzionamento dei microformati è il medesimo deimicrodati, ma con specifiche sintattiche diverse.

In questo caso, ad esempio, per effettuare l’”iniezione” dei dati, viene utilizzato l’attributo class  all’interno dei tag HTML (i tag più utilizzati sono

e ).

Anche per i microformati, esistono delle tipologie di entità da descrivere, le quali hanno dei nomi specifici, ad esempio il microformato hCard descrive una persona, quello hReview una recensione, ecc..

Vediamo un semplice esempio relativo ad un hCard:

vcard“>
photo” src=”http://www.alessiopomaro.com/wp-content/uploads/2014/01/alessio-pomaro-widget.jpg” />
fn“>Pomaro Alessio
title“>Project Manager, Web developer, Web Marketing & SEO Specialist. Consulenza SEO e SEO copywriting. Blogger.
adr“>
street-address“>Via Roma, 10
locality“>Roma

L’indicazione class=”vcard non è un errore: per specificare che si sta creando un miocroformato hCard, è necessario specificare tale sintassi.
Come vediamo, l’esempio è facilmente comprensibile e simile a quello dei microdati.

 

Dove possiamo trovare la documentazione completa per i microformati?
La documentazione ufficiale, è disponibile su http://microformats.org/wiki/ (completa e corredata di esempi).

 

Gli strumenti a disposizione

Esistono due strumenti messi a disposizione dagli Strumenti per i Webmaster di Google che sono molto utili per creare e verificare i dati “strutturati” delle pagine web:

  1. Assistenza per il markup. Una procedura guidata che consente di effettuare una simulazione direttamente sulle pagine di un sito web consentendo di specificare ed inserire i dati. L’output dello strumento è il codice html da inserire all’interno delle pagine web. L’interfaccia è semplice ed intuitiva, ma allo stesso tempo, potentissima a livello tecnico.
  2. Strumento di test per i dati strutturati. Utile per comprendere come Google interpreta i dati inseriti sulle pagine web e per ottenere una simulazione del relativo snippet.

 

Conclusioni

  • Nel post ho sempre parlato di Google, ma anche gli altri motori di ricerca individuano ed interpretano imicrodati ed i microformati.
  • Esistono altri formati di markup, ad esempio RDFa. Tuttavia i più usati sono quelli descritti dal post. Tra i due, per versatilità e semplicità di utilizzo, consiglio i microdati (la stessa scelta di Google).
  • L’importanza di questi dati strutturati non è assolutamente da sottovalutare: oltre a garantire maggiore visibilità grazie ai rich snippet, di certo favoriscono l’attenzione dei motori di ricerca verso le nostre pagine web.
  • Consiglio di utilizzare i microdati ben “amalgamati” all’interno del contenuto.
  • Vista la semplicità di utilizzo e la potenzialità del “mezzo“.. perché non usarli?

 

 

(tratto da www.alessiopomaro.com)