Personal tools

mobile

Sep 16, 2014

Prototipi e mockups per Mobile: è semplice con gli strumenti giusti!

Tap, swipe, pinch, bump... e il clic?

Prototipi e mockups per Mobile: è semplice con gli strumenti giusti!

Filed Under:

Progettare e prototipare una nuova App sono le fondamenta per una buona riuscita: se il cemento è sabbioso basterà un "tap" di troppo a far crollare il castello

Sviluppare applicazioni per device (smartphone, tablet e surrogati) richiede un’analisi preliminare, se non pari, addirittura superiore a quella di un sito. Lo stesso dicasi per la realizzazione di siti web in ottica “mobile first”.

Le dimensioni dello schermo, il modo in cui l’utente può interagire con la nostra app, le molteplici situazioni in cui lo stesso utente si può trovare nel momento in cui la utilizza e addirittura il numero di zampe di cui dispone (leggi l’articolo fino in fondo e mi darai ragione ;-) sono tutti fattori determinanti da tenere sotto controllo, dall’analisi alla pubblicazione sullo store.

In questo post ho raccolto alcuni strumenti che possono aiutare nella fase di progettazione e protipazione su mobile.

read more

Nov 08, 2013

Mobile device detection con Apache Mobile Filter (AMF)

Device sniffing

Mobile device detection con Apache Mobile Filter (AMF)

Introduzione al Mobile device detection con Apache Mobile Filter, per capire "cosa sono" e "cosa sanno fare" i dispositivi mobili utilizzati dai vostri utenti

Il processo di identificazione dei dispositivi mobile, utilizzati per la visualizzazione di un'applicazione web, si chiama mobile device detection o device detection.

Questa pratica trova tipicamente impiego nello sviluppo di applicazioni web che hanno come target entrambe le piattaforme mobile e desktop, ossia risponde alle domande "cosa è" e "cosa può fare" il dispositivo che ha effettuato la richiesta, fornendo indicazioni utili per calibrare la risposta da servire.

Le informazioni ricavabili dall'analisi della delle richieste HTTP, variano da poche unità a qualche centinaio e la quantità e la qualità dipende dal software utilizzato.

In ambito Open Source un esempio pratico di software per il device detection è Apache Mobile Filter (AMF).

amf

Ideato da Idel Fuschini, AMF consiste in un modulo Apache (costituito da una suite di moduli Perl), il quale, con l'ausilio di un device repository (WURFL, DetectRight e 51Degrees), determina le caratteristiche dei dispositivi e propone il risultato sotto forma di variabili d'ambiente facilmente leggibili dall'applicazione web.
AMF può essere utilizzato principalmente in due modalità.

read more

Sep 24, 2013

Responsive design... molto più facile con le unità vw e vh di CSS3!

1, 2, 3... Responsive!

Responsive design... molto più facile con le unità vw e vh di CSS3!

Come e per cosa usare le unità vw e vh di CSS3, una risorsa preziosa per il responsive perché forniscono un rapporto diretto con le dimensioni della viewport

Responsive web design

I layout diventano sempre più complessi e il responsive web design assume sempre più importanza, perciò noi sviluppatori abbiamo bisogno di una più ampia gamma di unità di misura che ci aiuti a creare design flessibili.

Diventa quindi utile approfondire le unità di misura vw e vh legate alla viewport, introdotte da CSS3.

Queste unità sono uno strumento molto potente per il responsive design e ci consentono di risparmiare pagine e pagine di media queries.

Prima di parlare delle novità facciamo un breve riepilogo sulle unità CSS disponibili e le loro principali caratteristiche.

read more

Sep 17, 2013

Siti web in HD (high definition): fuffa o reale possibilità?

Stanno arrivando...

Siti web in HD (high definition): fuffa o reale possibilità?

Filed Under:

E' in corso una lenta e silente rivoluzione nel mondo del web o è frutto del delirio di onnipotenza di qualche genio del crimine? Gli indizi parlano chiaro...

Siti in HD nel 2013... perché no? Lo ammetto, era una cosa a cui non avevo mai pensato fino ad ora, ma il nostro tuttologo Cesare, fonte inesauribile di conoscenza, mi ha messo qualche giorno fa la pulce nell'orecchio con questa mail (riporto il thread perché è proprio così che è cominciata la mia ricerca del pixel perduto).

CesareL'antefatto

From: Cesare
Date: 2013/9/6
Subject: Siti web in HD - questa me la spiegate
To: Irene
Cc: Stefano, Massimo

read more

Jul 05, 2013

Vuoi caricare i JavaScript del tuo sito solo quando ti servono davvero?

In vacanza più leggeri... anche i nostri siti!

Vuoi caricare i JavaScript del tuo sito solo quando ti servono davvero?

Filed Under:

Introduzione a Conditioner.js, una libreria che ti permette di caricare i moduli js del tuo sito solo alla presenza di un determinato stato che potrai definire tu

Non è una novità: più aggiungiamo funzionalità sotto forma di librerie JavaScript, più i nostri siti si appesantiscono. Se però le funzionalità aggiunte sono necessarie, quello che possiamo fare è ottimizzare le risorse e limitarne le dimensioni, quindi il tempo necessario a scaricarle.

Non sarebbe bello avere a disposizione una sintassi che ci permetta di caricare codice JavaScript in base a condizioni verificate runtime, analizzando lo stato della pagina? Caricare lo snippet di codice solo se richiesto e se predeterminate condizioni sono realizzate?

Un caso estremamente familiare a tutti i front-end developer: quando progettiamo il nostro sito per dispositivi mobile tendiamo a rimuovere i componenti che non sarebbero utili all'utente (solitamente per le limitazioni dello spazio disponibile), allo scopo di rendere meglio fruibili i contenuti web più importanti. Se gli elementi che vogliamo rimuovere utilizzano funzionalità JavaScript, però, questi ultimi vengono comunque scaricati. Non vale forse la pena evitare che ciò succeda (risparmiando così anche un'inutile chiamata al server)?

Conditioner.js è esattamente quello che ci serve. E' una libreria JavaScript che si occupa di fornire un linguaggio che permetta la definizione di condizioni per caricare funzionalità solo se necessario.

Siamo noi a definire i requisiti affinché il modulo js venga caricato.

Inoltre Conditioner.js consente di gestire il caricamento di più risorse JavaScript. I vari moduli js vengono caricati separati l'uno dall'altro impedendo loro di andare in contrasto.

read more