Monday, July 12, 2010

SEO per siti mobili

Una volta che abbiamo realizzato un nostro sito mobile, oltre alla soddisfazione di vederlo dal nostro cellulare, probabilmente vorremmo che fosse visitato anche da altri.
E il primo strumento che mi viene in mente per far conoscere un sito è il motore di ricerca.
Anche in questo campo, quindi, come nel web tradizionale dobbiamo occuparci di tutte quelle problematiche che possiamo racchiudere in un'unica sigla: SEO.
Il SEO (Search Engine Optimization), non è altro che una serie di attività volte a "ottimizzare" il nostro sito per i motori di ricerca, cioè a farlo indicizzare correttamente, in modo, da vederlo comparire tra i primi risultati di una ricerca relativa all'argomento trattato.
Come nel web classico, il motore di ricerca di riferimento continua ad essere Google, in questo caso nella sua versione web mobile (o, attraverso una applicazione).
La Mobile Search di Google, in realtà non è completamente separata dalla Search tradizionale: i risultati mostrati, infatti, non sono solo realtivi a siti mobili.
In pratica, per ogni ricerca effettuata vengono create due liste indipendenti di risultati: una per i siti mobili (o mobile-friendly) e una per i siti tradizionali. Ciascuna lista è ordinata con un proprio algoritmo di ranking. Se la lista dei siti mobili non contiene un numero sufficiente di risultati viene mostrata solo l'altra lista, altrimenti le due liste vengono unite. Per far questo i valori di rank dei risultati vengono opportunamente normalizzati (dando maggior peso ai siti mobili, se la ricerca contiene termini tipici del settore mobile) e gli eventuali duplicati eliminati (privilegiando la versione mobile).
Questo, almeno, a grandi linee è il procedimento descritto nel brevetto "Blending Mobile Search Results" che risale a luglio 2008. Naturalmente, i laboratori di Google hanno ormai dimostrato di saper migliorare continuamente i propri prodotti, perciò, con molta probabilità, adesso, il procedimento si sarà molto più evoluto e raffinato.
In ogni caso, per poter migliorare l'indicizzazione del nostro sito e il suo posizionamento, la cosa migliore da fare è:
  • seguire le stesse regole del SEO tradizionale (titolo, keywords, header, anchor text per i link esterni, ecc...)
  • validare il codice, per essere sicuri che possa essere letto correttamente da Google (si possono usare ottimi validatori come Mobile-friendly XHTML Validator, Mobile-readiness checker, mobileOK Basic Checker, WuRML, consigliati da Google stesso)
  • creare una sitemap per la versione mobile (le istruzioni sono sostanzialmente simili a quelle per la sitemap di un sito classico)
  • adottare alcuni accorgimenti validi non solo per l'indicizzazione del sito, ma anche per la normale fruizione da parte di un utente normale: caricamento veloce, navigazione chiara e precisa (più contenuto e meno elementi di "contorno", come immagini, flash, javascript, pop up ecc...)
  • pubblicare la versione mobile del sito nello stesso dominio
Come per la creazione di un sito, anche per il raggiungimento di un buon posizionamento, ci viene in aiuto una serie di validi strumenti web, come:
e molti altri ancora che non starò qui ad elencare e a descrivere. Molto probabilmente ne farò qualche recensione solo dopo aver terminato questa panoramica generica sul mondo mobile e inizierò ad entrarre nel dettaglio.

Thursday, July 08, 2010

Sviluppo siti mobili: linguaggi

Utilizzare servizi on line per "mobilizzare" un nostro blog esistente è, sicuramente, il modo più veloce e semplice per entrare nel mondo del Web Mobile.
Ma per entrarci dalla "porta principale", cioè per sviluppare siti professionali e più complessi, è necessario approfondire le tecniche di creazione dei siti di questo tipo.
Ho parlato di "tecniche", perchè, in realtà, non c'è un solo modo, un solo linguaggio per creare siti mobili.

Linguaggi
Il primo linguaggio ad essere stato standardizzato, risale al 1998, ed è il WML (Wireless Mark-up Language), un linguaggio di mark-up basato sull'XML. Unico linguaggio utilizzato dai browser WAP di prima generazione, fu, successivamente sostituito dall'XHTML, nella versione WAP 2.0.
Per questo motivo, ad oggi, viene utilizzato quasi esclusivamente in quei casi in cui si vuole supportare anche i dispositivi più vecchi.
Contemporaneamente, in Giappone si era invece diffuso l'i-mode e il linguaggio di riferimento era il cHTML (Compact HTML),una versione ridotta di HTML, anch'esso non molto diffuso attualmente.
Chi sviluppa siti web, conosce già sicuramente l'XHTML che, in pratica, può essere considerato come HTML scritto con la sintassi XML. Per il mobile, però, questo linguaggio si è specializzato dando origine a XHTML Basic, una versione semplificata, progettata appositamente tenendo conto delle limitate capacità elaborative dei dispositivi. E da quest'ultimo, infine, nasce il linguaggio più diffuso: l'XHTML MP (XHTML Mobile Profile).

Le caratteristiche della navigazione mobile
Indipendentemente dal linguaggio che si decide di utilizzare, è necessario, comunque, tener conto delle diverse caratteristiche dei dispositivi.
Come abbiamo visto precedentemente, i dispositivi mobili sono tanti e anche molto diversi gli uni dagli altri. I browser di cui sono dotati possono avere o meno le caratteristiche che oggi diamo per scontate nei browser dei pc. Quello che un browser consente (CSS, Javascript, ecc...) potrebbe non essere supportato da un altro e viceversa. Perciò creare un sito adatto a tutti i dispositivi è una impresa piuttosto ardua e non sempre necessaria. Soprattutto all'inizio, per i meno esperti conviene concentrarsi su un singolo dispositivo.
In ogni caso, è sempre bene cercare di limitare (anche dove ne sia consentito l'uso) javascript, flash e altre tecnologie simili perchè le risorse dei dispositivi mobili (memoria, processore, ecc...) sono più limitate. Per lo stesso motivo è consigliabile anche alleggerire il più possibile la pagina per ridurre la banda occupata.
Inoltre, la dimensione e la risoluzione dello schermo sono ridotte, per questo motivo nella realizzazione del sito è consigliabile mantenere una grafica semplice e lineare. L'ideale è utilizzare un'unica colonna e sviluppare il sito in altezza. Laddove è consentito, si può differenziare la grafica in base al singolo dispositivo usando CSS specifici.
Anche i font e i colori da usare nel nostro sito possono essere scelti solo all'interno di una varietà più ristretta.
Una particolare attenzione, infine, deve essere poi posta ai dati di ingresso richiesti all'utente. Diversamente da un normale PC, il dispositivo non sarà dotato di una tastiera QWERTY completa, ma semplicemente del tastierino numerico. Stesso discorso vale per il mouse: l'utente non potrà puntare un link o una casella di testo da riempire in qualunque punto della pagina si trovi, ma dovrà scorrere tutti gli oggetti dall'inizio.
Come sempre, sarà l'esperienza e la conoscenza di un numero sempre maggiore di dispositivi a rendere naturale l'utilizzo di questi piccoli accorgimenti e a farne trovare altri ancora da conservare nel proprio Know-how.

Wednesday, July 07, 2010

Web Mobile: il tuo primo sito mobile

Dopo una generica panoramica sul web mobile, finalmente passiamo al lato pratico: realizzare una versione mobile del proprio sito, senza avere particolari conoscenze tecniche di questo ambiente.

Per farlo dobbiamo utilizzare uno dei numerosi strumenti offerti dal web come:
La procedura di creazione del sito con questi strumenti è, più o meno, uguale per tutti: è sufficiente registrarsi, specificare il contenuto e scegliere tra i vari template di visualizzazione.

Come esempio, creiamo la versione mobile di questo blog attraverso uno strumento tutto italiano:
Tutto quello che occorre per utilizzare questo strumento è il "feed" del blog.
Il feed, non è altro che un meccanismo che permette di esportare il contenuto di un sito ad altre piattaforme o applicazione. In pratica contiene esattamente lo stesso contenuto del sito, ma formattato secondo regole ben precise. Esistono più tipi di feed (che differiscono per le specifiche, cioè le regole con cui sono formattati); i più diffusi sono Rss e Atom.
Tutte le principali piattaforme di blog (WordPress, Splinder, Libero Blog, ecc...) producono in automatico un feed. Blogger ad esempio produce un feed atom. Il suo url si può ricavare in fondo a questa pagina, al link mostrato in figura.


In questo caso l'url è:
http://nickasdf.blogspot.com/feeds/posts/default

Una volta ricavato il feed del nostro blog, possiamo iniziare a "mobilizzarlo".
La procedura, che richiede solo pochi minuti, è questa:

  • apparirà una schermata con alcuni campi da riempire (alcuni già precompilati):
  • in fondo a questa schermata viene chiesto di effettuare login sul portale Libero o di registrarsi.
  • nel caso in cui si decida di registrarsi (come in questo caso) non è necessario riempire lunghe paginate di dati personali: tutto quello che viene richiesto è un indirizzo di email. Sarà, poi, necessario scegliere un nick e una password.

  • a questo punto viene chiesto di scegliere il template e la combinazioni di colori con cui vogliamo visualizzare il nostro sito. Ci viene data anche la possibilità di fornire una icona personalizzata. Per semplicità, si può anche semplicemente accettare le impostazioni di default.
  • Ecco fatto: è già possibile ammirare un'anteprima del nostro sito. Adesso è sufficiente accettare le condizioni generali di contratto, il trattamento ai dati personali, e altre formalità simili...
  • Se non si era già registrati su Libero, occorre l'ultima fase: la conferma di registrazione. Leggere l'email che ci è arrivata all'indirizzo indicato e cliccare sul link fornito.
Finito!!!!! Provate ad andare all'url del vostro nuovo sito (in questo caso http://mondomobile.m.libero.it/ ): è già stato creato!!!!!

Anche se il sito è già pubblicato, in realtà la procedura non è ancora terminata.
Chiunque potrebbe utilizzare l'url del feed del mio blog, per creare un proprio sito mobile. Libero Mobile, allora, cerca di assicurarsi che il sito appartenga proprio all'utente che ha creato il sito mobile. E gli concede 20 giorni di tempo per dimostrarlo, altrimenti il sito verrà cancellato.
Nell'ultima fase descritta, avevamo cliccato sul link di verifica della registrazione che ci era stato fornito nella email, in questo link sono riportate le istruzioni per la certificazione del blog.
In pratica si tratta semplicemente di copiare una porzione di codice nel nostro blog (in un post o in un box).
Io ho inserito un nuovo box in alto a destra, utilizzando:
Design-> Aggiungi un gadget-> Hml/Javascript

E adesso divertitevi a cambiare modelli e colori al vostro sito....

Tuesday, July 06, 2010

Web Mobile: come?

Chi si affaccia per la prima volta a questo mondo si troverà sicuramente disorientato. Il primo ostacolo è costituito proprio dalla difficoltà di capire "come" si fa il Web Mobile.
Nel Web classico, era sufficiente creare un sito, magari usando uno dei numerosi tool disponibili (gratuiti o professionali), senza nemmeno conoscere gli aspetti tecnici relativi.
Ma nel Mondo Mobile? Che cosa si deve fare?

Prima di tutto si deve scegliere se realizzare una applicazione o un sito mobile.

Una applicazione si adatta alle esigenze specifiche di un singolo tipo di dispositivi. Permette sicuramente una più ampia varietà di funzionalità, ma non può essere utilizzata da un altro tipo di dispositivo. Per questo, se l'obiettivo è quello di raggiungere un qualunque utente, è necessario realizzarne più versioni.
Fortunatamente, alla grande varietà di dispositivi presenti in circolazione, si contrappone una serie relativamente più limitata di sistemi operativi installati al loro interno.
I principali sistemi operativi mobili sono:
  • Android, il sistema open source di Google, destinato, come ogni altro prodotto di questo "gigante americano", al successo (come dimostra la sua notevole diffusione negli smartphone)
  • iOS 4 di Apple (o iPhone OS) progettato per iPhone, iPad e iPod.
  • Windows Mobile, diventato recentemente Windows Phone 7, si rivolge, prevalentemente, agli smartphone e ai palmari consumer, affiancato da Windows Embedded Compact 7 (per gli apparecchi multimediali e ai dispositivi embedded) e da Windows Embedded Handheld (per i clienti business con esigenze particolari). Quest'ultimo, appena presentato, verrà inaugurato da Motorola ES400.
  • BlackBerry OS 6, sviluppato da RIM per il BlackBerry
  • Symbian, nonostante sia diventato, all'inizio dell'anno, open source, ha perso notevoli quote di mercato.

Una valida alternativa allo sviluppo di una applicazione, è rappresentata dalla realizzazione di un sito mobile, ossia di un sito web adattato alle esigenze dei dispositivi mobili. Nel realizzarlo, infatti, bisogna tener conto di fattori che nel web tradizionale non sono influenti, come: la velocità della connessione, la ridotta dimensione dello schermo...
Gli approcci possibili per rendere mobile il nostro sito sono essenzialmente due:
  • creare una versione nuova e indipendente del sito, sviluppata esclusivamente per dispositivi mobili
  • modificare il nostro sito per adattarlo ai nuovi terminali.
Come accade spesso, più si approfondisce i dettagli di un simile settore, più ne intuiamo la sua complessità. Dopo questa breve panoramica, l'utente inesperto sarà, probabilmente, tentato ad abbandonare completamente l'idea di passare al mobile.
Fortunatamente, come nel web tradizionale, molti strumenti ci vengono in aiuto. Ne presenterò alcuni nel prossimo post, dove (sembra impossibile crederci!!!!) dimostrerò in pratica come è possibile creare una versione mobile di un proprio sito (nell'esempio userò questo blog) in 3 minuti.