IL WEB MOBILE

Multicanalità e layout fluido

1mercoledì 21 settembre 2011

Nel 2013 il traffico della rete da parte dei dispositivi mobili sarà maggiore di quello dei computers.

2mercoledì 21 settembre 2011

Con cosa abbiamo a che fare :Le prime incursioni in distribuzione web mobile per le masse sono state fatte da una società giapponese che ha sviluppato un servizio chiamatoiMode nel 1999.

Gli utenti non erano liberi di navigare in Internet, era più una selezione di contenuti che era stata specificatamente convertita in formato iMode. Questo contenuto si basava in genere su News, Sport, Meteo, Giochi, e-mail.

WAP era lo standard per il web mobile in Occidente che comprendeva il suo linguaggio WML (basato su XML) ed il protocollo per distribuirlo WYPS.

Le tariffe elevate pretese dagli operatori, la difficoltà d'utilizzo (inclusa la configurazione) e le limitazioni tecniche dei cellulari, lo scarso appeal dei siti, la scarsa integrazione tra Wap e Web.

3mercoledì 21 settembre 2011

Nel 2002 viene sviluppato il WAP 2.0 che ha adottato XHTML-BASIC/MP Mobile Profile e il famoso protocollo TCP/IP HTTP per la comunicazione.

XHTML-MP è molto simile all’ XHTML e viene interpretato dai browser nello stesso modo, ha solamente alcune caratteristiche in più utili ai dispositivi cellulari.

Mentre il Wap non aveva stili, il Wap 2.0 ha introdotto i Wireless CSS (WCSS) che sono una versione di CSS 2.1 per integrare gli stili ad xhtml-mp.

Oggi molti telefoni come l’iPhone, Android, etc. non hanno problemi a leggere il markup utilizzato dai siti web per visualizzare il sito sui dispositivi desktop.

Mobile Web Application Best Practices

http://www.w3.org/TR/mwabp/

4mercoledì 21 settembre 2011

5mercoledì 21 settembre 2011

Il mercato degli smartphoneUno smartphone è un telefono che ha un OS riconoscibile su cui l'utente può installare delle applicazioni.

Il mercato degli smartphone è suddiviso in molti sotto-mercati, ciascuno dei quali ha un proprio pubblico

6mercoledì 21 settembre 2011

Si deve fare attenzioneIl problema è che la maggior parte dei web designer e developer cade esattamente nel mercato di fascia alta. C'è un pregiudizio culturale verso gli OS che puntano a qualunque altro mercato. Come risultato, la maggior parte delle persone si concentra sulla lotta tra iOS e Android ed ignorano il resto.

7mercoledì 21 settembre 2011

Nel mercato di fascia alta, iOS e Android sono attualmente le piattaforme di spicco. Tuttavia, nel 2011 potrebbero trovarsi a competere con Windows Phone 7 (Microsoft) e MeeGo (Nokia).

Inoltre, anche il BlackBerry OS6 (RIM) potrebbe cercare di entrare in questo mercato.

Nel mercato di fascia media, il Symbian (Nokia) al momento sta dominando, ma bada (Samsung), BlackBerry (RIM) ed i nuovi Androids (Google) di fascia media sono forti competitors.

8mercoledì 21 settembre 2011

Il mercato dei browser mobile

9mercoledì 21 settembre 2011

10mercoledì 21 settembre 2011

11mercoledì 21 settembre 2011

I migliori browser per mobile

1. Safari per iOS: il miglior browser mobile in generale,2. Android WebKit,3. Dolfin per Samsung bada: al momento il browser mobile più veloce 4. BlackBerry WebKit, il nuovo browser di default per IS6 e superiori (attualmente

disponibile solo su BlackBerry Torch).

Tutti e quattro questi browser supportano gli eventi touch, che sono assolutamente cruciali per qualunque interfaccia seamless touchscreen-based".

Inoltre, si basano tutti sul rendering engine di WebKit.

12mercoledì 21 settembre 2011

Il 7 giugno 2005, lo sviluppatore Dave Hyatt di Safari annunciò sul suo blog che Apple stava rendendo open source WebKit,

13mercoledì 21 settembre 2011

14mercoledì 21 settembre 2011

Laddove gli altri browser scaricano semplicemente HTML, CSS e JavaScript, lo interpretano e lo rendono, Opera Mini fa qualcosa di molto diverso: quando si richiede una pagina in Opera Mini, quella richiesta va su uno speciale Server di Opera Mini.

Il server scarica le risorse, le interpreta ed esegue il rendering della pagina. Poi invia un'immagine ( altamente compressa ) della pagina risultante al vostro telefono. Voi vedete l'immagine attraverso il Client di Opera Mini.

Il vantaggio è che il client di Opera Mini necessità di una piccola quantità di memoria, il che lo rende particolarmente adatto ai dispositivi economici di fascia bassa.

Opera Mobile è importante perché funge da Default browser per molti dispositivi Windows Mobile nei quali il produttore ha deciso che IE non è sufficientemente buono.

15mercoledì 21 settembre 2011

16mercoledì 21 settembre 2011

CREIAMO IL SITO WEB

17mercoledì 21 settembre 2011

Differenze desktop - mobile

Dimensioni schermo Velocità di connessione Non c’è il mouse

18mercoledì 21 settembre 2011

USER AGENTPer saper identificare e reindirizzare chi accede tramite il proprio dispositivo portatile possiamo affidarci ad un semplice script in php, il quale ci permetterà di analizzare l’User Agent; ovvero le informazioni che ogni dispositivo include nel proprio http header, riguardo al tipo di browser e sistema operativo.

Il seguente codice ci permetterà di identificare dispositivi basati su Android, iOS, BlackBerry e WebOS e di reindirizzarli verso la nostra versione mobile del sito oppure verso uno specifico foglio di stile .

$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");$android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");$palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS");$berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");$ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");

if ($iphone || $android || $palmpre || $ipod || $berry == true){header('Location: http://sito.org/mobile.html'); //redirect verso pagina mobile}?>

WURFL: database che detiene tutti gli USER AGENT per device mobili, fornisce un API da utilizzare nel vostro codice.

19mercoledì 21 settembre 2011

USER AGENT

Versione desktop Versione mobile

20mercoledì 21 settembre 2011

Information architecture:Semplicità! 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.

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.

21mercoledì 21 settembre 2011

mobile web design:Prima di tutto la dimensione degli schermi varia molto ma quello che più c’interessa è la larghezza, quindi bisogna creare un layout fluido.

Un layout fluido vi aiuta con i dispositivi con lo schermo orientabile. Per i cellulari della vecchia generazione che hanno solo l’opzione del layout “portait” è importante cercare di strutturare i contenuti a dovere, come distribuire le informazioni e tagliare il testo in blocchi più piccoli per aiutarne la leggibilità.

Se volete andare sul sicuro mantenetevi sulla grandezza in larghezza minima di 120 px ed una massima di 480 px(iPhone orientato a landscape)

#page {margin: 0 auto; min-width: 120px;! }

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.

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.

22mercoledì 21 settembre 2011

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" /><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.

Limitare l’uso di risorse esterne come i popups.

23mercoledì 21 settembre 2011

Limitate l’uso di immagini perchè aggiungono peso alla pagina, inoltre dovete considerare quale sarebbe la dimesione ideale.

Il modo corretto di ridimensionare le immagini è farlo su lato server e specificarne la grandezza.

Quando potete usate sempre sprites images e “alt text” nel caso l’immagine non carichi.

<img src="apericlub_t.jpg" alt="apericlub">

Peso della pagina, restare tra i 10kb e i 25kb ai telefoni di base, per gli smartphones va bene anche 50kb e per i touch-phones anche 100kb.

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"/>

Safari sull’iPhone registra nella cache solo file di dimensioni minori di 25kb.

max-age=300

5 minuti

24mercoledì 21 settembre 2011

IPhone

25mercoledì 21 settembre 2011

26mercoledì 21 settembre 2011

Una buona pratica è mantenere la user experience simile a quella generale dell’iPhone anche attraverso il sito.

Ricordatevi di usare grandi “target areas” nei vostri link e buttons per aiutare i pollici, bisogna riuscire a cliccare una cosa alla volta comodamente.

Iniziate aggiungendo il viewport all’interno dell’ in modo che la pagina si adatti perfettamente allo schermo:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Possiamo sfruttare le nuove regole CSS3 che non potete usare sugli altri telefoni. La più comoda e usata ovviamente sono i bordi arrotondati e le ombre:

div {       color: #bcbcbc;padding: .5em;       -webkit-border-radius: 6px;       }

#div {color:#eee; text-shadow:#000 0 -1px 1px; font:bold 0.6 em"Helvetica", sans-serif}

• Il primo indica lo spostamento dell'ombra in orizzontale. Da sinsitra a destra.

• Il secondo indica lo spostamento dell'ombra in verticale. Dall'alto in basso.

• Il terzo indica la sfocatura dell'ombra.

27mercoledì 21 settembre 2011

Quando applicate gli stili ai font è meglio non specificare la grandezza in pixels, casomai in em o percentuali, l’ideale sarebbe usare “small/normal/large” perchè ogni dispositivo può gestire al meglio questi comandi.

#div {

color:#eee; font:bold 0.6 em"Helvetica Neue", Helvetica, sans-serif

}

Parliamo dei links: sui telefoni cellulari non c’è il mouse, quindi niente hovering, dimenticate l’attributo hover.

Sono stati introdotti i tag “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.

<a href="tel:43802948">call us</a>

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

1 em = relativo alla grandezza del font nel body

28mercoledì 21 settembre 2011

Il secondo passo è nascondere la barra degli indirizzi visto che abbiamo già così poco spazio.

Basta una riga di javascript:

window.scrollTo(0, 1);

Create una icona springboard, una specie di enorme favicon per rendere riconoscibile il vostro sito se viene aggiunto ai segnalibri dell’homescreen. Dev’essere di 57×57 px

<link rel="apple-touch-icon" href="icon.png">

29mercoledì 21 settembre 2011

Importante è la presenza di un comando di switch che permetta al visitatore di passare alla versione desktop del sito.

<script type="text/javascript">

function switch_delayer()

{ window.location = "http://www.haru-sushi.net/wordpress/?wptouch_view=normal&wptouch_redirect=/wordpress/"}

</script>

Mobile Theme <a id="switch-link"onclick="wptouch_switch_confirmation();" href="javascript:return false;"></a>! !

</div>

30mercoledì 21 settembre 2011

RESPONSIVE DESIGN

31mercoledì 21 settembre 2011

1

2

3

32mercoledì 21 settembre 2011

1

2

333mercoledì 21 settembre 2011

1

2

334mercoledì 21 settembre 2011

Le “media queries”http://www.w3.org/TR/css3-mediaqueries/

Il W3C ha creato le media queries come parte della specifica CSS3, migliorando le possibilità dei media types. Una media query si rivolge a qualsiasi tipo di device.

Le media queries sono diventate una tecnica client-side per inviare un foglio di stile su misura agli iPhone, ai telefoni Android e agli altri generi di telefono. Per fare ciò, potremmo incorporare una query nell'attributo media di un foglio di stile collegato.

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />

La query contiene due componenti:

1. un media type (screen),

2. l'effettiva query racchiusa tra parentesi, contenente una particolare media feature (max-device-width) da ispezionare, seguita dal valore target (480px).

35mercoledì 21 settembre 2011

@media (max-width: 480px) { .immagine { width: 300px }

Stiamo chiedendo al device se la sua risoluzione orizzontale (max-device-width) è uguale o minore di 480px.

Se questo test passa—in altre parole, se stiamo vedendo il nostro lavoro su un device con uno schermo piccolo come l'iPhone—allora il device renderà l’immagine larga 300px.

Altrimenti il link sarà ignorato in toto.

36mercoledì 21 settembre 2011

I browser desktop come Safari 3+, Chrome, Firefox 3.5+ e Opera 7+, supportano tutti nativamente le media query analizzate nell'articolo, così come anche i più recenti browser per cellulari come Opera Mobile e Mobile WebKit.

Ovviamente, le versioni più vecchie dei browser desktop, non supportano le media query. Mentre Microsoft si è convertita ad un supporto con IE9, Internet Explorer ad oggi non offre alcun tipo di implementazione.

Comunque, se si è interessati ad implementare il supporto per browser antiquati, Javascript offre una soluzione:

css3-mediaqueries.js una libreria che permette

a IE 5+, Firefox 1+ e Safari 2+ di applicare le Media Query CSS3

quando viene inclusa attarverso blocchi @media.

37mercoledì 21 settembre 2011

ESEMPIO : A LIST APARThttp://www.alistapart.com/articles/responsive-web-design/

by Ethan Marcotte

38mercoledì 21 settembre 2011

<div class="inner">

ANALISI DELLA STRUTTURA

39mercoledì 21 settembre 2011

@media (min-width: 1300px) {

.figure, li#f-mycroft { margin-right: 3.317535545023696682%; /* 21px / 633px */

width: 13.902053712480252764%; /* 88px / 633px */ } }

40mercoledì 21 settembre 2011

.figure {

float: left; font-size: 10px;line-height: 1.1; text-align: center;

margin: 0 3.317535545023696682% 1.5em 0; /* 21px / 633px */

width: 31.121642969984202211%; /* 197px / 633px */

}

41mercoledì 21 settembre 2011

@media (max-width: 600px) {

/* 633px grid (88x6 col, 21x5 ; 88+21+88+21+88+21+88+21+88+21+88) */

.inner { position: relative; }

.mast, .intro, .main, .footer {

float: none;

width: auto;

}

42mercoledì 21 settembre 2011

@media (max-width: 400px) {

.figure, li#f-mycroft {

margin-right: 3.317535545023696682%;

/* 21px / 633px */

width: 48.341232227488151658%;

/* 306px / 633px */

}

li#f-watson, li#f-moriarty {

margin-right: 0;

}

}

43mercoledì 21 settembre 2011

FINE

44mercoledì 21 settembre 2011