Non esiste il mobile web, il tablet web o il desktop web. E' sempre lo stesso web solo fruito da dispositivi diversi. Un nuovo approccio allo sviluppo delle web application sta emergendo e diventando sempre più necessario. Quello che abbandona le dimensioni fisse ed utilizza invece le tecniche di Responsive Web Design. In questa sessione rivolta ai web developer, web designer e User Interface designer, verranno mostrate le tecniche, gli UX design patterns e i linguaggi necessari a creare le applicazioni del futuro: quelle che saranno fruibili da qualsiasi dispositivo.
Marco Casario, CTO di Comtaste, autore del libro HTML5 Solutions e docente del corso Rich Web Apps con HTML5 presenterà un talk interamente dedicato a questo argomento, condividendo le esperienze reali, fatte durante la gestione dei progetti degli ultimi due anni.
HTML5 Italy: Back end ecosystems for your applications - Cesare Rocchi + Clau...marcocasario
Talk tenuto da BaasBox durante il meeting di HTML5 Italy.
Scegliere su quale servizio di back end appoggiarsi per realizzare le nostre App non è così semplice come può sembrare a prima vista. Ce ne sono tanti, con differenti approcci, costi e vantaggi. Vedremo i pregi e i difetti dei maggiori player di mercato del segmento BaaS (Backend as a Service) per capire quale servizio e' il piu' adatto alle nostre esigenze di sviluppatori. Concluderemo con una demo live su come si costruisce un app con il software BaasBox
HTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore Romeomarcocasario
Talk di Salvatore Rome per il meeting di HTML5 Italy.
Se vi capita di avere fogli di stile disorganizzati, di usare il copia-incolla per ridefinire delle regole CSS, di dover cambiare un colore o un valore con Trova&Sostituisci... LESS è la soluzione.
Scopriremo l'uso delle variabili per definire i colori e le dimensioni principali, i mixin per creare regole complesse e riutilizzarle (come effetti ombra o animazioni), le nested rules per ordinare il codice e le funzioni per i colori.
Inoltre vedremo come sottolineare gli errori di sintassi e come automatizzare la compilazione in file CSS.
Dopo questo tutorial non vorrete più tornare ai CSS!
10 Insightful Quotes On Designing A Better Customer ExperienceYuan Wang
In an ever-changing landscape of one digital disruption after another, companies and organisations are looking for new ways to understand their target markets and engage them better. Increasingly they invest in user experience (UX) and customer experience design (CX) capabilities by working with a specialist UX agency or developing their own UX lab. Some UX practitioners are touting leaner and faster ways of developing customer-centric products and services, via methodologies such as guerilla research, rapid prototyping and Agile UX. Others seek innovation and fulfilment by spending more time in research, being more inclusive, and designing for social goods.
Experience is more than just an interface. It is a relationship, as well as a series of touch points between your brand and your customer. Here are our top 10 highlights and takeaways from the recent UX Australia conference to help you transform your customer experience design.
For full article, continue reading at https://yump.com.au/10-ways-supercharge-customer-experience-design/
How to Build a Dynamic Social Media PlanPost Planner
Stop guessing and wasting your time on networks and strategies that don’t work!
Join Rebekah Radice and Katie Lance to learn how to optimize your social networks, the best kept secrets for hot content, top time management tools, and much more!
Watch the replay here: bit.ly/socialmedia-plan
HTML5 Italy: Back end ecosystems for your applications - Cesare Rocchi + Clau...marcocasario
Talk tenuto da BaasBox durante il meeting di HTML5 Italy.
Scegliere su quale servizio di back end appoggiarsi per realizzare le nostre App non è così semplice come può sembrare a prima vista. Ce ne sono tanti, con differenti approcci, costi e vantaggi. Vedremo i pregi e i difetti dei maggiori player di mercato del segmento BaaS (Backend as a Service) per capire quale servizio e' il piu' adatto alle nostre esigenze di sviluppatori. Concluderemo con una demo live su come si costruisce un app con il software BaasBox
HTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore Romeomarcocasario
Talk di Salvatore Rome per il meeting di HTML5 Italy.
Se vi capita di avere fogli di stile disorganizzati, di usare il copia-incolla per ridefinire delle regole CSS, di dover cambiare un colore o un valore con Trova&Sostituisci... LESS è la soluzione.
Scopriremo l'uso delle variabili per definire i colori e le dimensioni principali, i mixin per creare regole complesse e riutilizzarle (come effetti ombra o animazioni), le nested rules per ordinare il codice e le funzioni per i colori.
Inoltre vedremo come sottolineare gli errori di sintassi e come automatizzare la compilazione in file CSS.
Dopo questo tutorial non vorrete più tornare ai CSS!
10 Insightful Quotes On Designing A Better Customer ExperienceYuan Wang
In an ever-changing landscape of one digital disruption after another, companies and organisations are looking for new ways to understand their target markets and engage them better. Increasingly they invest in user experience (UX) and customer experience design (CX) capabilities by working with a specialist UX agency or developing their own UX lab. Some UX practitioners are touting leaner and faster ways of developing customer-centric products and services, via methodologies such as guerilla research, rapid prototyping and Agile UX. Others seek innovation and fulfilment by spending more time in research, being more inclusive, and designing for social goods.
Experience is more than just an interface. It is a relationship, as well as a series of touch points between your brand and your customer. Here are our top 10 highlights and takeaways from the recent UX Australia conference to help you transform your customer experience design.
For full article, continue reading at https://yump.com.au/10-ways-supercharge-customer-experience-design/
How to Build a Dynamic Social Media PlanPost Planner
Stop guessing and wasting your time on networks and strategies that don’t work!
Join Rebekah Radice and Katie Lance to learn how to optimize your social networks, the best kept secrets for hot content, top time management tools, and much more!
Watch the replay here: bit.ly/socialmedia-plan
Lezioni Video Online. Parte 1/5. Statistiche, luoghi e modalità di consumo de...Alessio Garbin
Argomenti: statistiche dal mondo del video, dove e come si consumano oggi i video (luoghi e modalità), cos'è un video, dalla definizione alle svariate modalità di produzione.
>>>> Prima parte della prima lezione del corso di "Video Design" nel Master in "Digital Media Management" presso lo IED - Istituto Europeo di Design di Milano. Marzo 2013.
Catalogo di Innova Day Motor Sport Technologies 2013Francesco Baruffi
Catalogo delle idee d'impresa , delle tecnologie, dei brevetti, delle spinoff e dei gruppi di ricerca selezionati per Innova Day Motor Sport Tech 2013 ed.
Lezione di Digital Content con focus sul Video Online presso UPA del 11/05/13...Alessio Garbin
Che cos'è la content production? Che tipologia di contenuti vengono prodotti oggi online? Come? Con quali competenze? Perchè i contenuti producono valore per le aziende?
Il focus in particolare è sulla produzione di video online.
#SEOUX Revolution: Cosa Cambia in GoogleALE AGOSTINI
La UX Sposa il SEO
A partire dalla Primavera 2021, il SEO e la UX “convolano a nozze”: #Google ha infatti annunciato che il suo metodo di calcolo (algoritmo) integrerà NUOVI indicatori UX come fattori di ranking e posizionamento per la SEO.
Google si affiderà a dati veri, reali, generati dalle sessioni vere raccolte dal browser Chrome (non da tool)
Chi si occupa di SEO ( IL o LA SEO?!) capisce la portata della rivoluzione: ci sono quindi poche settimane per ottimizzare la #UX del sito se si vuole mantenere o crescere il posizionamenti su Google.
Ecco la parte 1 del ciclo formativo rivolto ai responsabili marketing e digital in collaborazione con NETCOMM Italia
SMConnect 2022 - Con lo sviluppo del web, delle nuove tecnologie e web API, i motori di ricerca hanno iniziato ad utilizzare veri e propri browser per il rendering delle pagine web, creare un Web Rendering Service per il rendering su larga scala nasconde però molte insidie. In questo talk parliamo della session isolation nel rendering delle pagine web, da parte di motori di ricerca e tool, e di come questa può influenzare i dati di crawling.
Siti web, portali e Rich Internet Applications: tendenze e controtendenzeDiego La Monica
Nella favola di Cenerentola il Principe Azzurro cerca la sua amata riconoscendola tra tante da come avrebbe calzato la scarpa sul suo piede. Come dire ogni piede è diverso dagli altri. Il mercato del web può essere metaforicamente paragonato alla favola di Cenerentola. Ad ogni realtà la sua RIA ad ogni azienda il suo sito web. In questo seminario cercheremo di districarci tra le soluzioni che il web propone per trovare la scarpetta per la nostra Cenerentola!
Lezioni Video Online. Parte 5/5. La distribuzione di un video, piattaforme, S...Alessio Garbin
L'importanza della distribuzione per un video virale, l'importanza delle piattaforme (Youtube, Vimeo, Dailymotion) e del loro uso intelligente, il SEO del video, la forza di Youtube, HTML5, adwords, CDN, video hosting e video application.
>>> Terza lezione del corso di "Video Design" nel Master in "Digital Media Management" presso lo IED - Istituto Europeo di Design di Milano. Aprile 2013.
Nell'ultimo periodo si è parlato molto di Design, Accessibilità ed Usabilità di questi siti internet, ma davvero incontrano le esigenze del cittadino?
Nuove regole e leggi danno la linea per gli sviluppi dei website futuri, che devono considerare anche l'aspetto fondamentale di un sito web: comunicare correttamente con gli utenti nel modo più chiaro possibile.
Spesso le PA medio-piccole, non possono permettersi un reparto IT interno che operi sugli aspetti Web.
Come portare quindi la tecnologia e l'esperienza di professionisti del web ai dipendenti e professionisti delle Pubbliche Amministrazioni che non operano in campo web e comunicazione?
Scopriremo che spesso, oltre ad un'assistenza eseguita da un professionista per la parte tecnica, basta poco per poter gestire correttamente ed internamente la comunicazione in modo comprensibile e accessibile.
Enterprise Spring and Flex applicationsmarcocasario
SpringSource ha recentemente annunciato Spring BlazeDS Integration, un nuovo progetto open source per permettere una facile integrazione tra il framework Spring e Adobe BlazeDS, una tecnologia open source basata su server Java remoting e Web messaging.
Il plugin di SpringSource fornisce un approccio più semplice ed intuitivo agli sviluppatori Spring e Java per creare Enterprise Rich Internet Applications utilizzando il framework Adobe Flex, una pietra miliare della Flash Platform.
In questa sessione ai partecipanti verrà fornita una panoramica del framework Flex e di BlazeDS, illustrando i vantaggi e le modalità di integrazione al framework Spring attraverso il plugin Spring BlazeDS.
Local Persistent data with ActionScript 3 and AIRmarcocasario
This is the presentation I had at the FITC 2009 Conference in Amsterdam:
One of the main benefits for web developers who use the Adobe AIR runtime rather than Flash Player through a browser is that the security sandbox restrictions placed on the browser-based Flash Player do not exist within AIR applications.
You have now complete access to the operating system's file system and your applications have the ability to read, write, move, and delete files as well as creating and querying SQLite local databases.
In this session you'll learn how to leverage the file system's access features of the AIR APIs and how to apply advanced techniques to store data locally.
More Related Content
Similar to HTML5 cross-platform and device development: web app per tutti gli schermi
Lezioni Video Online. Parte 1/5. Statistiche, luoghi e modalità di consumo de...Alessio Garbin
Argomenti: statistiche dal mondo del video, dove e come si consumano oggi i video (luoghi e modalità), cos'è un video, dalla definizione alle svariate modalità di produzione.
>>>> Prima parte della prima lezione del corso di "Video Design" nel Master in "Digital Media Management" presso lo IED - Istituto Europeo di Design di Milano. Marzo 2013.
Catalogo di Innova Day Motor Sport Technologies 2013Francesco Baruffi
Catalogo delle idee d'impresa , delle tecnologie, dei brevetti, delle spinoff e dei gruppi di ricerca selezionati per Innova Day Motor Sport Tech 2013 ed.
Lezione di Digital Content con focus sul Video Online presso UPA del 11/05/13...Alessio Garbin
Che cos'è la content production? Che tipologia di contenuti vengono prodotti oggi online? Come? Con quali competenze? Perchè i contenuti producono valore per le aziende?
Il focus in particolare è sulla produzione di video online.
#SEOUX Revolution: Cosa Cambia in GoogleALE AGOSTINI
La UX Sposa il SEO
A partire dalla Primavera 2021, il SEO e la UX “convolano a nozze”: #Google ha infatti annunciato che il suo metodo di calcolo (algoritmo) integrerà NUOVI indicatori UX come fattori di ranking e posizionamento per la SEO.
Google si affiderà a dati veri, reali, generati dalle sessioni vere raccolte dal browser Chrome (non da tool)
Chi si occupa di SEO ( IL o LA SEO?!) capisce la portata della rivoluzione: ci sono quindi poche settimane per ottimizzare la #UX del sito se si vuole mantenere o crescere il posizionamenti su Google.
Ecco la parte 1 del ciclo formativo rivolto ai responsabili marketing e digital in collaborazione con NETCOMM Italia
SMConnect 2022 - Con lo sviluppo del web, delle nuove tecnologie e web API, i motori di ricerca hanno iniziato ad utilizzare veri e propri browser per il rendering delle pagine web, creare un Web Rendering Service per il rendering su larga scala nasconde però molte insidie. In questo talk parliamo della session isolation nel rendering delle pagine web, da parte di motori di ricerca e tool, e di come questa può influenzare i dati di crawling.
Siti web, portali e Rich Internet Applications: tendenze e controtendenzeDiego La Monica
Nella favola di Cenerentola il Principe Azzurro cerca la sua amata riconoscendola tra tante da come avrebbe calzato la scarpa sul suo piede. Come dire ogni piede è diverso dagli altri. Il mercato del web può essere metaforicamente paragonato alla favola di Cenerentola. Ad ogni realtà la sua RIA ad ogni azienda il suo sito web. In questo seminario cercheremo di districarci tra le soluzioni che il web propone per trovare la scarpetta per la nostra Cenerentola!
Lezioni Video Online. Parte 5/5. La distribuzione di un video, piattaforme, S...Alessio Garbin
L'importanza della distribuzione per un video virale, l'importanza delle piattaforme (Youtube, Vimeo, Dailymotion) e del loro uso intelligente, il SEO del video, la forza di Youtube, HTML5, adwords, CDN, video hosting e video application.
>>> Terza lezione del corso di "Video Design" nel Master in "Digital Media Management" presso lo IED - Istituto Europeo di Design di Milano. Aprile 2013.
Nell'ultimo periodo si è parlato molto di Design, Accessibilità ed Usabilità di questi siti internet, ma davvero incontrano le esigenze del cittadino?
Nuove regole e leggi danno la linea per gli sviluppi dei website futuri, che devono considerare anche l'aspetto fondamentale di un sito web: comunicare correttamente con gli utenti nel modo più chiaro possibile.
Spesso le PA medio-piccole, non possono permettersi un reparto IT interno che operi sugli aspetti Web.
Come portare quindi la tecnologia e l'esperienza di professionisti del web ai dipendenti e professionisti delle Pubbliche Amministrazioni che non operano in campo web e comunicazione?
Scopriremo che spesso, oltre ad un'assistenza eseguita da un professionista per la parte tecnica, basta poco per poter gestire correttamente ed internamente la comunicazione in modo comprensibile e accessibile.
Enterprise Spring and Flex applicationsmarcocasario
SpringSource ha recentemente annunciato Spring BlazeDS Integration, un nuovo progetto open source per permettere una facile integrazione tra il framework Spring e Adobe BlazeDS, una tecnologia open source basata su server Java remoting e Web messaging.
Il plugin di SpringSource fornisce un approccio più semplice ed intuitivo agli sviluppatori Spring e Java per creare Enterprise Rich Internet Applications utilizzando il framework Adobe Flex, una pietra miliare della Flash Platform.
In questa sessione ai partecipanti verrà fornita una panoramica del framework Flex e di BlazeDS, illustrando i vantaggi e le modalità di integrazione al framework Spring attraverso il plugin Spring BlazeDS.
Local Persistent data with ActionScript 3 and AIRmarcocasario
This is the presentation I had at the FITC 2009 Conference in Amsterdam:
One of the main benefits for web developers who use the Adobe AIR runtime rather than Flash Player through a browser is that the security sandbox restrictions placed on the browser-based Flash Player do not exist within AIR applications.
You have now complete access to the operating system's file system and your applications have the ability to read, write, move, and delete files as well as creating and querying SQLite local databases.
In this session you'll learn how to leverage the file system's access features of the AIR APIs and how to apply advanced techniques to store data locally.
Developing Adobe AIR desktop applicationsmarcocasario
This is the presentation I held at the FromAToWeb 2007 Event. It's about developing desktop applications using Adobe AIR. Adobe AIR is a cross-operating system runtime that allows web application developers to use their existing web development skills (HTML, Javascript, Adobe Flash, Adobe Flex, Ajax) to build and deploy rich Internet applications to the desktop.
10. Le opzioni
RESPONSIVE NATIVO
Siti d’informazione e blogs Softwares
Portfolio Videogiochi
Magazine Finanza
WEB STORE
OTTIMIZZATO IBRIDO
Softwares
Retail
Videogiochi
Search
Multimedia
Software As a Service
Copyright 2012 Comtaste S.r.l. - CONFIDENZIALE - 15
martedì 29 gennaio 13
11. The Boston Globe
Copyright 2012 Comtaste S.r.l. 16
martedì 29 gennaio 13
16. Definizione (Wikipedia)
Responsive web design (often abbreviated to RWD) is an approach to web design in
which a site is crafted to provide an optimal viewing experience—easy reading and
navigation with a minimum of resizing, panning, and scrolling—across a wide range of
devices (from desktop computer monitors to mobile phones).
Copyright 2012 Comtaste S.r.l. 21
martedì 29 gennaio 13
17. Elementi di una Responsive Web App
LAYOUT PATTERNS
MEDIA QUERIES
VIEWPORT
ALTRE CONSIDERAZIONI
Copyright 2012 Comtaste S.r.l. 22
martedì 29 gennaio 13
18. Layout Patterns – Le Griglie
Il design si adatta al comportamento dell’utente in base
alla dimensione dello schermo, la piattaforma e
l’orientamento attraverso una serie di griglie
Copyright 2012 Comtaste S.r.l. 23
martedì 29 gennaio 13
23. Media Queries
Sviluppate dal W3C sull’esperienza dei media types
Permettono un controllo granulare degli stili
Con le Media Queries puoi controllare:
•Larghezza e altezza della finestra del browser
•Larghezza e altezza del device
•Orientamento (landscape or portrait mode)
•Risoluzione
Copyright 2012 Comtaste S.r.l. 28
martedì 29 gennaio 13
25. Media Queries – External CSS
<link rel="stylesheet" type="text/css"
media="only screen and (max-device-width: 480px)“
href=“smartphones.css" />
Copyright 2012 Comtaste S.r.l. 30
martedì 29 gennaio 13
26. Media Queries – Conditions
@media only screen and (min-device-width: 320px) and (max-
device-width: 480px) {
/* iPhone, Android rules here */
}
Copyright 2012 Comtaste S.r.l. 31
martedì 29 gennaio 13
27. Media Queries – Conditions
@media only screen and (device-width: 768px) and
(orientation: landscape)
{
/* rules for iPad in landscape orientation */
}
Copyright 2012 Comtaste S.r.l. 32
martedì 29 gennaio 13
28. Media Queries – Retina Display
Con l’introduzione dei Retina Display bisogna tener
conto anche di queste risoluzioni attraverso la proprietà
media query -webkit-device-pixel-ratio media query:
<link rel="stylesheet"
media="only screen and -webkit-min-device-pixel-ratio: 2"
href="highres.css">
Copyright 2012 Comtaste S.r.l. 33
martedì 29 gennaio 13
29. Media Queries – Testing
http://protofluid.com
Copyright 2012 Comtaste S.r.l. 34
martedì 29 gennaio 13
30. Viewport
Introdotto da Apple
Suggerisce la viewport iniziale, lo zoom e la risoluzione
Questo perchè Safari di default mostra una versione a
980px di larghezza della pagina web anche se il layout è
più stretto.
Copyright 2012 Comtaste S.r.l. 35
martedì 29 gennaio 13
31. Viewport
<meta name="viewport" content="width=device-width" />
Con questo tag forzo Safari a “fidarsi” del mio layout e a
non applicare lo zoom.
Copyright 2012 Comtaste S.r.l. 36
martedì 29 gennaio 13
33. Responsive Frameworks
Esistono già diverse decine di Responsive Frameworks
che aiutano a:
• Creare griglie fluide
• Gestire elementi multimediali
• Generare Media Queries a breakpoints stabiliti
Copyright 2012 Comtaste S.r.l. 38
martedì 29 gennaio 13
34. Responsive Frameworks
Responsive Grid System
http://responsive.gs/
Copyright 2012 Comtaste S.r.l. 39
martedì 29 gennaio 13
35. Responsive Frameworks
Foundation 3
http://foundation.zurb.com/
Copyright 2012 Comtaste S.r.l. 40
martedì 29 gennaio 13
41. Browsers
Browsers con remote tools:
• Opera Mini con DragonFly
• Chrome Developer Tools
• BlackBerry browser per Playbook
Copyright 2012 Comtaste S.r.l. 46
martedì 29 gennaio 13
42. Risoluzione – Display alta densità
I device di ultima generazione creano molti problemi e
possono renderizzare male le immagini.
Questo perchè 1 px in CSS corrisponde a parecchi
pixels sul device.
Tipicamente questi device hanno un PPI (pixels per inch)
superiore ai 160
Copyright 2012 Comtaste S.r.l. 52
martedì 29 gennaio 13
43. Risoluzione – Display alta densità
Per gestire le immagini per questi tipi di dispositivi si
utilizza uno Scale factor o DPR (Device Pixel Ratio)
Si calcola in questo modo:
Device Pixels / CSS Pixels
Il risultato di dispositivi retina per Apple è 2x
per Android è 1.5x
Copyright 2012 Comtaste S.r.l. 52
martedì 29 gennaio 13
44. Risoluzione – Display alta densità
Perchè supportare questi dispositivi ?
Copyright 2012 Comtaste S.r.l. 52
martedì 29 gennaio 13
45. Risoluzione – Display alta densità
Come si gestisce questo problema ?
Utilizzando le Responsive Images o usando immagini più
grandi e forzando la loro dimensione con l’attributo
width.
Copyright 2012 Comtaste S.r.l. 52
martedì 29 gennaio 13
46. Risoluzione – Display alta densità
Altre regole da seguire:
- Usare dove possibile CSS3 e Web Fonts
- Usare Icon Fonts
- Usare SVG per la grafica
Copyright 2012 Comtaste S.r.l. 52
martedì 29 gennaio 13
47. Risoluzione – Display alta densità
Fate attenzione a:
- uso della bandwidth
- supporto dei browser di vecchia generazione
Copyright 2012 Comtaste S.r.l. 52
martedì 29 gennaio 13
48. Adaptive Images
Adaptive Images detects your visitor's screen size and
automatically creates, caches, and delivers device
appropriate re-scaled versions of your web page's
embeded HTML images.
Copyright 2012 Comtaste S.r.l. 47
martedì 29 gennaio 13
49. Adaptive Images - W3C
Esistono già diverse soluzioni ed approcci al problema,
anche se sono articolate e non sempre risolvono
interamente il problema.
Esiste un progetto standard del W3C ma che ancora non
è supportato dai browser (dati di Novembre 2012)
www.responsiveimages.org
Copyright 2012 Comtaste S.r.l. 47
martedì 29 gennaio 13
54. Adaptive Images
Attenzione all’uso di responsive images:
Differenti tipi di immagine richiedono differenti tipi di
risoluzioni, a scapito della banda richiesta.
Es.
una avatar image (di piccole dimensioni) assume i
seguenti pesi:
1x = 58Kb
2.x = 188Kb
Soluzione: usare immagini a 1.5x
Copyright 2012 Comtaste S.r.l. 47
martedì 29 gennaio 13
55. Adaptive Images
Il consiglio è quello di cercare di servire solo una
risoluzione per le immagini.
Copyright 2012 Comtaste S.r.l. 47
martedì 29 gennaio 13
56. Emulatori
Ne esistono tantissimi, molti dei quali gratuiti.
Sono utili come prima fase di testing e non possono
essere considerati affidabili al 100%
http://www.mobilexweb.com/emulators
Copyright 2012 Comtaste S.r.l. 51
martedì 29 gennaio 13
57. Connessione – Detect client side
W3C Network Information API: provides an interface for
Web Applications to access the underlying network
information (connection info) of the device.
Usa la proprietà navigator.connection.type che ritorna
WIFI, CELL_2G, CELL_3G
if
(navigator.connection.type==navigator.connection.WIFI)
{}
Copyright 2012 Comtaste S.r.l. 53
martedì 29 gennaio 13
58. Connessione – Detect server side
Usa le informazioni nell’header
Intercetta il carrier usando Massive's Operator
Identification Platform
http://werwar.com/
Copyright 2012 Comtaste S.r.l. 54
martedì 29 gennaio 13
60. Redirect – Do not !
Evitare i redirect
Il sito sarà più SEO-friendly
Alcuni browser mobile possono presentare dei problemi
Copyright 2012 Comtaste S.r.l. 56
martedì 29 gennaio 13
61. Gestures – Touch not Click
I device touch hanno un ritardo nel click tra i 300 e i
500 ms prima di essere eseguiti !
Utilizza l’evento onTouchEvent (datatype ACTION_UP)
Attenzione all’evento onTouchStart perchè a volte il tap
risulta troppo responsive ma causa lo scrolling ad essere
inusabile.
Copyright 2012 Comtaste S.r.l. 57
martedì 29 gennaio 13
62. Gli ultimi consigli
Effettua il defer del codice dopo l’evento onload
Se hai molto contenuto da caricare usa un loading
custom
Utilizza tecniche di server-side detection
Parsare Javascript richiede tempo (da 1ms a 100ms per
1Kb)
Copyright 2012 Comtaste S.r.l. 58
martedì 29 gennaio 13
63. Gli ultimi consigli
Ti serve veramente un framework ?
Jquery impiega 8 secondi ad essere parsato su alcuni
dispositivi.
Copyright 2012 Comtaste S.r.l. 59
martedì 29 gennaio 13
64. Gli ultimi consigli
Jquery Mobile non è un piccolo
framework, è un UI framework ed usa il
core di Jquery.
Copyright 2012 Comtaste S.r.l. 60
martedì 29 gennaio 13
65. Gli ultimi consigli
Usa micro frameworks o creati le tue mini
libraries
XUI, zepto.js, microjs
Copyright 2012 Comtaste S.r.l. 61
martedì 29 gennaio 13
66. Gli ultimi consigli
Se usi JSON (dovresti) ricorda che il
JSON.parse è quasi 2 volte più veloce
della funzione eval()
Copyright 2012 Comtaste S.r.l. 62
martedì 29 gennaio 13
67. Gli ultimi consigli
Usare l’application cache:
<html manifest="example.appcache“>
Copyright 2012 Comtaste S.r.l. 63
martedì 29 gennaio 13
68. Gli ultimi consigli
Usare il local storage
Ricorda che lo storage di stringhe è 2 volte più veloce
dello tarage di oggetti
Su mobile puoi considerare fino a 2 Mb.
Copyright 2012 Comtaste S.r.l. 64
martedì 29 gennaio 13
69. Gli ultimi consigli
Scegliere il font giusto
www.typekit.com (commerciale)
Adobe Edge Webfonts (free)
http://www.google.com/webfonts (free)
Copyright 2012 Comtaste S.r.l. 64
martedì 29 gennaio 13
70. Go Responsive:
Web apps per tutti gli schermi
martedì 29 gennaio 13