Mobile | Daniele Serio - Official Web Site

nov 29

Openlayer è anche in versione per mobile

Pubblicato in: Mobile, OpenLayers, Openlayers - GWT Wrapper, Programmazione

Autore: Daniele Serio Nessun commento »

Da oggi Openlayer è anche in versione mobile. La nuova versione 2.11 ha integrato diversi esempi che impaginano e gestiscono eventi per rispondere correttamente a dispositivi mobile. Questo poermette agli sviluppatori Openlayers di potere visualizzare le applicazioni già sviluppate anche su telefoni cellulare, basta avere la connessione ad internet attiva.

(continua...)

ott 06

Come creare un tema WordPress per dispositivi mobili con jQuery Mobile

Pubblicato in: Il sito per Mobile, Mobile

Autore: Daniele Serio Nessun commento »

Oggi, dato l'enorme sviluppo di dispositivi mobile, è indispensabile rendere il sito web, visibile anche a tali dispositivi. Il mese scorso, jQuery Mobile è stato rilasciato. Questo strumento permette di creare facilmente siti web per cellulari e applicazioni web. In questo tutorial, catswhocode.com vi mostrerà come creare un tema mobile ottimizzato per WordPress.

(continua...)

ott 05

Cos’è e come funziona

Pubblicato in: Mobile

Autore: Daniele Serio Nessun commento »

I normali siti web sono visualizzati decentemente sugli ultimi dispositivi che dispongono di web browsers simili alle versioni per desktop, ma diventano comunque un incubo in usabilità. Su telefoni più vecchi invece non sono proprio visualizzati. Fidatevi, un sito specifico per i telefoni cellulari non è uno spreco di tempo.

Cos'è

Quando inizialmente i cellulari hanno integrato la tecnologia per accedere ad internet usavano un vecchio sistema di web standards chiamato WAP, che comprendeva il suo linguaggio WML e il protocollo per distribuirlo (WTL, WYPS). WML è basato su XML ed è largamente adottato e sebbene sia superato non è stato deprecato, quindi poteteconsidereare di creare una versione del vostro sito anche con questo markup come “safe mode” per i cellulari più vecchi. L’evoluzione del wap è WAP 2.0 che ha adottato XHTML-BASIC/MP e il famoso protocollo TXP/IP HTTP per la comunicazione. xhtml-mp è molto simile all’ xhtml e viene interpretato dai browser nello stosso modo, ha solamente alcune caratteristiche in più utili ai dispositivi cellulari. La prima versione del Wap non aveva stili, ma Wap 2.0 ha introdotto i Wireless CSS (WCSS) che sono una versione di CSS 2.1 per integrare gli stili ad xhtml-mp. è simile alla cersione dei fogli di stile css 2.1 ma ha meno attributi e per essere sicuri che funzioni trasversalmente su tutti i browsers è meglio che vi manteniate su cose semplici. Non funzione col Wap 1.0 Oggi molti telefoni come l’iPhone, Android, etc. che hanno lo stesso browser che sui desktops accettano lo stesso mark-up che usate per i siti web. Eccovi un paio di link a una guida sull’xhtml-mpe una sui wcss.

Iniziamo

Cosa abbiamo imparato da questo stralcio di storia? Che non è difficile creare un sito che funzioni su tutti i telefoni con un po’ di tecniche simili al progressive enhancement. Il mio miglior suggerimento è di scrivere il sito in XTML-MP e poi usare diversi fogli di stile. Il WML è in più, dovreste controllare i dati della vostra audience per esserne certi, ,ma generalmente se le persone hanno un telefono talmente vecchio non lo usano per navigare ora che ci sono alternative. Prima che vi mostri qualsiasi codice consideriamo un po’ di lavoro con carta e penna.

Web Strategy

Perchè vi serve un mobile site? Potete veramente offrire qualcosa di utile a chi usa il cellulare? Offrite un servizio specifico? Aiutate a compiere qualcosa? Non fraintendetemi, non si basa tutto sull’utilità, non è necessario che creiate un’applicazione per l’iPhone per avere una presenza nel mobile web, internet è anche intrattenimento. Pensate a chi in un bar decide di navigare il vostro blog per passare il tempo. Quello che intendo dire è che dovreste sbarazzarvi di tutto quello che non è utile e specifico per questo mezzo. Molte grafiche e pagine di foto sono una brutta scelta. Pensate agli obbiettivi del vostro business, perchè è importante per voi essere sui cellulari. Pensate agli obbiettivi dei visitatori, come beneficeranno dal vostro sito? Considerate la tecnologia disponibile e i suoi limiti. Siccome questo è anche lo stadio in cui si pongono le basi per la pianificazione dell’interaction design, è un buon momento per fare ricerca e capire qual’è la vostra auddience. Vi aiuterà sapere in che circostanze useranno il sito e … molto importante, che tipo di telefono useranno. Un ultima domanda: pensate di creare un sito apposito o volete semplicemente adattare quello esistente per la visualizzazione su mobile?

Information Architecture:

Semplicità! evitate lunghe catene di pagine, pensate ad “investimenti in click” perchè anche con connessione 3G serve sempre molto tempo per caricare una pagina quindi la pazienza dei visitatori da cellulare è piuttosto corta. Tagliate tutto quello che non è rilevante e usate categorie ben specificate: se il visitatore sa cosa sta aspettando è più probabile che attenda il caricamento. In pratica limitate le scelte e le categorie, non lasciate che il visitatore si perda in un labirinto. Mantenete il minor numero di livelli possibile. Potrebbe esservi d’aiuto creare un “click stream” per visualizzare come vengono navigati i contenuti.

Mobile Web Design:

Ci sono molte cose da tenere in mente realizzando un sito per mobile. Prima di tutto la dimensione degli schermi varia molto ma quello che più c’interessa è la larghezza, quindi il mio consiglio è i creare un layout fluido. Usate percentuali invece dei pixels per le dimensioni. Potete saperne di più su AListApart.Un layout liquido vi aiuta anche sull’iPhone e altri dispositivi con lo schermo orientabile. Comunque, per i cellulari della vecchia generazione che hanno solo l’opzione del layout “portait” è importante cercare di strutturare i contenuti a dovere, per esempio come distribuire le informazioni e tagliare il testo in blocchi più piccoli per aiutarne la leggibilità. La Navigazione è un altro aspetto che andrebbe riconsiderato. Anche nei telefoni multi-touch è un po’ impacciata, figuratevi in quelli più vecchi dove si usa il pad. Una buona idea è usare liste, sempre, e limitare i link ad un massimo di 10, magari aggiungendogli anche degli accesskey (questi ultimi non vi serviranno sui telefoni multi-touch). Evitate menu a più livelli perchè su piccoli schermi non sarebbero mostrati correttamente. Mettete Links d’uscita per la home, la sezione precedente e successiva, alla fine di ogni pagina in modi che il visitatore non debba scrollare fino in cima. Risorse e banda di connessione sono 2 dei maggiori limiti dei telefoni cellulari. Evitate object e javascript quando possibile perchè non sono supportati sui primi telefoni, ma anche ora che lo sono prosciugano la batteria. Limitate anche l’uso di immagini perchè aggiungono peso alla pagina, inoltre dovete considerare quale sarebbe la dimesione ideale. Se volete andare sul sicuro mantenetevi sulla grandezza minima di 120px in larghezza. Un’altra opzione è usare la grandezza dello schermo più grande che vi aspettate visiterà il sito (diciamo un iPhone orientato a landscape di 480px?) e poi applicate questa tecnica per adattarle allo schermo come il vostro layout liquido. Ovviamente non è la “miglior pratica” siccome al browser toccherebbe comunque scaricare la versione più grande. Il modo corretto di ridimensionare le immagini è farlo su lato server e specificarne la grandezza. Quando potete usate sempre sprites images (se non sapete a cosa mi riferisco leggete questo articolo su ALA). Come al solito non dimenticate “alt text” nel caso l’immagine non carichi. Ho nominato il peso della pagina, il mio consiglio è di restare tra i 10kb e i 25kb. Mi riferisco ai telefoni di base, per gli smartphones va bene anche 50kb e per i touch-phones anche 100kb, ma è meglio andare sul sicuro visto che oltretutto dipende sempre dalla qualità della connessione. Caching è un altro fattore che vi aiuta con la velocità di caricamento, cercate di evitare che le risorse comuni siano sempre scaricate e inserite una stringa per controllare la cache. <meta http-equiv="Cache-Control" content="max-age=300"/> Interessante: Safari sull’iPhone registra nella cach solo file di dimensioni minori di 25kb, quindi zippate i vostri fogli esterni come i css e cercate dirimanere in quel limite con le vostre immagini sprites. Quando applicate gli stili ai font è meglio non specificare la grandezza in pixels, casomai in em o percentuali, ma l’ideale è usare “small/normal/large” perchè ogni dispositivo sa cos’è adatto per sè. Parliamo dei links: sui telefoni cellulari non c’è il mouse, quindi niente hovering, dimenticate l’attributo hover. Una cosa divertente invece è che se usate “tel:” e “sms:” nei link potete attivare quelle funzioni nel telefono, quindi è utile nella pagina dei contatti aggiungere link che se cliccati lanciano direttamente la chiamata o la messaggistica. Ecco un esempio:

 <a href="tel:43802948">call us</a> <a href="sms:12125551212">Send SMS to 1(212)555-1212</a>

Entrando un po’ più nel tecnico la prima regola perchè il vostro sito venga visualizzato correttamente sui telefoni è aggiungere il giust Doctype (xhtml-mp), codice di caratteri (utf-8), e il MIME Type (application/html+xml).

 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Site Name</title> <meta http-equiv="content-type" content="application/xhtml+xml" /> <meta http-equiv="cache-control" content="max-age=300" /> <link rel="stylesheet" type="text/css" href="style.css"/> </head>

Per quello che concerne la struttura del body cercate di costruire semanticamente (nell’ordine in cui le cose appaiono) ed evitate tabelle e frames. é sempre meglio validare il vostro codice, limitare l’uso di risorse esterne e per favore, non usate popups.

Rilevare e rivolgersi a telefoni specifici

Ok, quello che vi ho detto fino ad ora era applicabile ad ogni telefono, ma forse volete aggiungere qualcosa di speciale o concentrarvi su alcuni modelli specifici. Come potete riconoscere un modello e adattare i contenuti appositamente? Innanzi tutto vi ricordate cosa vi ho chiesto durante la pianificazione: voleter costruire un sito per mobile o adattare il sito web ad essere visualizzato sui cellulari? Se avete deciso di fare tutto quello che vi ho suggerito nel tutorial ne deduco che vogliate creare un sito da zero (bravi ragazzi) ma se per qualsiasi ragione volete solo adattarne uno, il modo migliore è tramite i CSS. Aggiungete un foglio di stile separato per i cellulari.

 <link href="screen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="mobile.css" rel="stylesheet" type="text/css" media="handheld" />

potete anche aggiungere stili specifici all’interno di un unico foglio css:

 @media handheld {#image1 {display: none}}

 @media only screen and (max-device-width: 480px) {}

Nel caso vogliate essere più specifici nella personalizzazione avrete bisogno di spare ch modelli di cellulari visitano il vostro sito. Potete identificarli tramite le informazioni che ogni dispositivo include nel proprio http header, lo “user agent. Online ci sono alcuni databases che contengono tutte le informazioni relative ad ogni modello. Per esempio potete usare il WURFL database, oltre ad essere un progetto opensource condivide un API che potete usare nel vostro codice server-side per adattare i contenuti del sito e la loro presentazione a specifici user agents. Un altro database è quello di DeviceAtlas che oltre all’API offre vari tutorials, come questo per includerlo nel vostro codice php. Il secondo passo è nascondere la barra degli indirizzi visto che abbiamo già così poco spazio. Ci basta una riga di javascript:

 window.scrollTo(0, 1);

ott 05

Creare un sito per cellulari usando WordPress

Pubblicato in: Il sito per Mobile, Mobile

Autore: Daniele Serio Nessun commento »

La tecnlogia avanza facendo passi da gigante. Negli ultimi anni si è avuta una grande evoluzione di dispositibi mobili (cellulari, tablet, ecc...) grazie anche ad internet, ormai accesibile quasi a tutti a prezzi contenuti. Avere un sito raggiungibile non solo dai computer, ma anche dai dispositivi Mobile puo’ portare oltre a maggior traffico anche a maggiori entrate, Google Adsense infatti ha creato la nuova funzione degli annunci Adsense Mobile per i contenuti, quindi sempre piu’ motivi ci spingono ad avere un sito sempre piu’ accessibile da chiunque. (continua...)

Sostieni il sito...

Google AdSense

Offerte dal web…
In evidenza
- Integrazione di smartGWT con Hibernate, Spring e Gilead
  
  dicembre 29, 2011
  
  Il progetto fa uso di smartGWT (versione 2.4 ma si può migrare a 3.0), Hibernate 3.2.6ga, Spring 3.0.5, spring4GWT (necessario [...]
Argomenti
News da Fungarolimatti.it
- Tonno agli agrumi, salsa cacio e pepe, zucchine marinate alla menta
- Sanremo 2012, tutto a parte la musica
Siti consigliati
…anche su Facebook e Twitter!
…la tua posizione attuale!

Commenti recenti

Daniele Serio: Bella realizzazione grafica. Complessa e di grade impatto. ...
creon: davvero molto carino.. i movimenti degli oggetti sembrano d...
Daniele Serio: Vi ringrazio. Se in futuro trovate degli errori comunicatelo...
alessio: ci andrò sicuramente :D ahah grazie Daniele !...
Andrew Green: Grazie mille!...

Openlayer è anche in versione per mobile

Come creare un tema WordPress per dispositivi mobili con jQuery Mobile

Cos’è e come funziona

Cos'è

Iniziamo

Web Strategy

Information Architecture:

Mobile Web Design:

Rilevare e rivolgersi a telefoni specifici

Creare un sito per cellulari usando WordPress

Offerte dal web…

In evidenza

Argomenti

News da Fungarolimatti.it

Siti consigliati

…anche su Facebook e Twitter!

…la tua posizione attuale!

Articoli recenti

Commenti recenti