upCreative » tutorial

Come creare un app: realizzare una view di login con il localStorage

upcreative — Thu, 29 May 2014 09:53:26 +0000

In questa mini-guida divisa in due parti, ti ho mostrato come gestire i dati di un’applicazione mobile o di una web app sfruttando il Web SQL, un tipo di database che permette di salvare record in locale sul dispositivo utilizzato dall’utente, tramite istruzioni SQL, linguaggio ben conosciuto dalla maggior parte dei web designers.

I metodi di salvataggio lato-client sono molto utili nel caso di applicazioni mobile sviluppate in HTML5, CSS3 e Javascript, ed è per questo che oggi voglio condividere con te un tutorial incentrato su un’altro sistema di salvataggio dati lato-client, il localStorage.

L’idea di scrivere questo post nasce dalla domanda di uno dei lettori di upCreative.net (a proposito, ringrazio sixdas per lo spunto) su come poter creare l’interfaccia di un’applicazione mobile che mostri all’utente una schermata di login oppure il contenuto dell’app, a seconda se è stato effettuato o meno il login con username e password.

Alle fine dell’articolo potrai trovare il link per il download dei file sorgenti.

Come creare la view di login in un #HTML5 #mobileapp con #backbonejs
Click To Tweet

Tutorial su come creare un app: l’obiettivo finale

In altre parole, all’avvio dell’applicazione controlleremo se nel localStorage è stata salvata una variabile che identifica l’username dell’utente: se è presente lo rimanderemo ai contenuti dell’applicazione, altrimenti visualizzeremo la schermata attraverso la quale egli potrà inserire i propri dati, che useremo poi per impostare la variabile di controllo nel localStorage.

Come view interna dell’app, quella accessibile solamente una volta effettuato il login, useremo la stessa del tutorial “Semplice Mobile App con Bootstrap Ratchet e Backbone.js” che ti ho mostrato in precedenza, che sarà quindi utilizzato come “base” per questo esperimento (in sostanza, quello che faremo è aggiungere la parte di login).

Il localStorage, di cui avevo parlato in questo articolo che ho scritto per YourInspirationWeb.com, è un sistema di salvataggio dati non-relazionale, che analogamente all’indexedDB, si basa sul concetto di coppia chiave-valore, per cui in corrispondenza di ogni chiave possiamo salvare qualsiasi tipo di variabile javascript: una stringa, un numero, un oggetto JSON e così via.

Noi lo utilizzeremo semplicemente per salvare l’username dell’utente in corrispondenza della chiave “user“, in modo da poter ricontrollare quella variabile ogni volta che l’applicazione viene avviata, ovvero ogni volta che il documento della pagina index.html viene ricaricato.

La view del login

L’esperimento precedente, basato su Backbone.js, era strutturato in questo modo:

Quello che dobbiamo fare è aggiungere la view di login, esattamente allo stesso livello DOM della view principale mostrata nell’immagine con il colore azzurro, ed effettuare il .render() di una o dell’altra, a seconda del contenuto della variabile del locaStorage.

Come prima cosa definiamo l’oggetto Backbone.View all’interno del file demo.js, il file javascript demo.js, in cui sono già presenti tutte le altre view:

//view per il login che viene mostrata solo quando l'utente non è loggato
var LoginView = Backbone.View.extend({

    // comunichiamo a backbone che deve inserire il markup del template di questa view all'interno di un oggetto dal tag 'section'
    tagName:  "section",

    //settiamo la classe che deve avere il tag 'section'
    className: "page-wrapper login-wrapper",

    //impostaiamo l'id del template da cui generare il markup di questa view
    template: "#loginview-template",

    initialize: function() {

        //compiliamo il template in una variabile
        this.template = _.template($(this.template).html());

        this.AnimEndEventName = this.getAnimEndEventName();
    },

    //funzione che genera il markup di questa view
    render: function () {
        this.$el.html(this.template()); 
        return this;
    },

    /* Grazie a modernizr riprendo il nome dell'evento di fine animazione, che cambia a seconda del browser */

    getAnimEndEventName: function(){

        var animEndEventNames = {
            'WebkitAnimation' : 'webkitAnimationEnd',
            'OAnimation' : 'oAnimationEnd',
            'msAnimation' : 'MSAnimationEnd',
            'animation' : 'animationend'
        };

        return animEndEventNames[ Modernizr.prefixed( 'animation' ) ];
    },

    // Deleghiamo gli eventi per la ricerca sull'input di testo 
    events: {
        //evento //selettore    //funzione da eseguire
        "submit  form":    "login"
    },

    //funzione che gestosce il login del form
    login: function (e) {

        e.preventDefault();
        var _this = this,
            form = $(e.currentTarget); 
            username = $.trim(form.find("[name=username]").val()),  
            password = $.trim(form.find("[name=password]").val()),
            submitBtn = form.find("button");

        //controllo sulla lunghezza di username e password
        if(username.length==0 || password.length==0){
            alert("Username e password sono obbligatori");
            return;
        }

        //qui andrebbe il controllo username e password (magaro tramite SQLite, Web SQL o su Ajax mediante database)
        //ma per questo esperimento simuliamo la cosa con un setTimeout di 2 secondi

        submitBtn.text("Login in corso...");
        setTimeout(function(){
            submitBtn.text("Login");

            //una volta verificate le credenziali di login salvo l'utente in modo persistente sul dispositivo tramite localStorage
            localStorage.setItem("user", username);
             //richiamo la funzione che inizializza i dati degli articoli e mostra la view della lista
            showList();
            //nasondo la view di login in modo da mostrare quella degli articoli
            _this.hide();

        }, 2000);      

    },

    show: function(callback){

        var _this = this;

        //aggiungendo la classe 'opened' al contenitore di questa view 
        //(elemento 'section.login-wrapper') innesco l'animazione di entrata
        this.$el.addClass("opened");

        //se è stata passata una funzione di callback, la richiamo una volta terminato l'evento di fine animazione
        if(callback){
            _this.$el.one( this.AnimEndEventName, function(){
                callback();
            });  
        }

    },

    hide: function(callback){

        var _this = this;
        //aggiungendo la classe 'hidden' al contenitore di questa view 
        //(elemento 'section.login-wrapper') inneschiamo l'animazione di uscita
        _this.$el.addClass("hidden");        
        //al termine della'animazione, rimuoviamo l'oggetto DOM dal documento tramite il metodo backbone 'remove()', in modo da alleggerire il lavoro 
        //della memoria centrale del dispositivo, contribuendo a rendere la nostra applicazione più fluida e performante 
        _this.$el.on( this.AnimEndEventName, function(){
            _this.remove();
            //se è stata passata una funzione di callback, la richiamo una volta terminato l'evento di fine animazione
            if(callback)
                callback();

        });   
    }

});

Nel momento in cui si verifica l’evento submit del form di login, viene richiamato il metodo “login“, all’interno del quale, dopo aver verificato che username e password siano stati inseriti, simuliamo una richiesta al server con un setTimeout di 2 secondi, durante il quale cambiamo il testo del pulsante di login.

Al termine dei due secondi salviamo in corrispondenza della chiave “user” del localStorage l’username fornito dall’utente, mediante il metodo “.setItem()” e richiamiamo la funzione “showList”, che inizializzerà e mostrerà all’utente la view principale, quella che contiene la lista degli articoli (StartView) .

Come la view principale, anche quella di login utilizza come contenitore il tag

con con la classe “.page-wrapper“; in più è stata aggiunta la classe “login-wrapper” in modo da poter attribuire a questa view degli stili CSS aggiuntivi.

Grazie ad essi potremo infatti mostrare la view con un’animazione fluida e performante di tipo slideIn dal basso verso l’alto, che sfrutta la tecnica dell’accelerazione hardware.

Se vuoi approfondire il discorso delle animazioni fluide e perfomanti, e quello della tecnica dell’accelerazione hardware, forse potrebbe interessarti il seguente articolo:

Web e Mobile App fluide con hardware acceleration

Come creare la view di login in un #HTML5 #mobileapp con #backbonejs
Click To Tweet

Inoltre sono da sottolineare i due metodi “show” e “hide“, i quali aggiungono all’elemento contenitore della view (l’elemento DOM “section.login-wrapper”) le classi “opened” ed “hidden“, che scateno le animazioni CSS di entrata e di uscita.

Grazie a Modernizr, incluso nel documento all’interno del file index.html (nel tag ), riusciamo ad “agganciare” all’evento di fine animazione (il cui nome cambia a seconda del browser utilizzato dall’utente) una funzione nel momento in cui l’animazione definita nei CSS giunge al termine (vedi questo articolo per avere maggiori informazioni).

Gli stili CSS

Vediamo gli stili CSS3 utilizzati per definire la dinamica dell’animazione di entrata e di uscita della schermata di login:

/* codice CSS3 performante per l'animazione della view di login */

section.login-wrapper {

  /*stili per il posizionamento*/
  position: fixed;
  left: 0;
  top: 0;      
  right: 0;    
  bottom:0;  
  z-index: 30;

  visibility: hidden;

  /* migliora le prestazioni prevenendo il render della parte 'posteriore' dell'elemento */
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
   backface-visibility: hidden;

   /* 
   	forziamo l'utilizzo della tecnica dell'accelerazione hardware per avere aniamzioni più fluide e reattive;
   	mpostando come elemento scatenante per l'effetto la proprietà 'translate3d'
   	il processo di rendering per l'elemento sarà delegato alla GPU (memoria grafica) 
   	prima, dopo e durante l'animazione
   */
   -webkit-transform: translate3d(0,0,0);
   -moz-transform: translate3d(0,0,0);
   -ms-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);               
}    

section.login-wrapper.opened{

	/*
	nel momento in cui all'elemento 'section.article-wrapper' viene aggiunta la classe 'show-article'
	innescchiamo l'animazione di entrata specifcandola in corrispondenza dell'attributo 'animation'
	*/

    -webkit-animation: showFromBottom .25s ease both;
    -moz-animation: showFromBottom .25s ease both;
    animation: showFromBottom .25s ease both;

    visibility: visible;
}

section.login-wrapper.hidden{
    /*
      nel momento in cui all'elemento 'section.article-wrapper' viene aggiunta la classe 'hide-article'
      inneschiamo l'animazione di uscita specificandola in corrispondenza dell'attributo 'animation'
    */
    -webkit-animation: hideToBottom .25s ease both;
    -moz-animation: hideToBottom .25s ease both;
    animation: hideToBottom .25s ease both;
}

/* definizione delle animazioni di entrata e di uscita per la view dell'articolo: muoviamo sempliemente l'elemento in verticale sull'asse delle ordinate */

/*animazione di entrata*/
@-webkit-keyframes showFromBottom {
    from { -webkit-transform: translateY(100%); }
}
@-moz-keyframes showFromBottom {
    from { -moz-transform: translateY(100%); }
}
@keyframes showFromBottom {
    from { transform: translateY(100%); }
}

/*animazione di uscita*/
@-webkit-keyframes hideToBottom {
    to { -webkit-transform: translateY(100%); }
}
@-moz-keyframes hideToBottom {
    to { -moz-transform: translateY(100%); }
}
@keyframes hideToBottom {
    to { transform: translateY(100%); }
}

La dinamica e le caratteristiche delle animazioni sono state riprese da uno dei miei precedenti tuorial sull’argomento. Per avere maggiori informazioni visita il relativo link:

Come creare un HTML5 Mobile App con Backbone.js

Il template

Come prima cosa aggiungiamo il template della view all’interno del tag file index.html, dove sono già presenti quelli della view principale, delle view della lista e della view dell’articolo singolo:

Anche questa view, come le altre, è stata realizzata in modo tale che sfrutti gli stili di Ratchet 2, un set di CSS pronti da utilizzare come base per la realizzazione di una mobile app.

Al suo interno abbiamo inserito un semplice form di login con 2 campi per username e password.

Come creare un app: il controllo del login

Nell’esperimento precedente, dove il login non era presente, ci preoccupavamo subito di inizializzare la view princiaple; in questo tutorial dobbiamo invece controllare il contenuto della variabile localStorage per la chiave “user” prima di decidere se mostrare all’utente la view di login piuttosto che quella della lista degli articoli.

Come creare la view di login in un #HTML5 #mobileapp con #backbonejs
Click To Tweet

Pertanto inseriamo l’inizializzazione della view di iniziale (StartView) all’interno di una funzione denominata “showList“, in modo da poterla richiamare inizialmente oppure dopo che l’utente ha effettuato correttamente l’operazione di login:

//per poter inizializzaere e mostrare la view della lista degli articoli in più parti dell'applicazione
//la inseriamo all'interno di una funzione globale

var showList = function(){
    //creiamo una nuova istanza per la collection degli articoli con 4 models iniziali
    var articles = new ArticleList([
        {
            title: "App su upCreative.net",
            image: "1.jpg",
            article: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        },
        {
            title: "Secondo articolo su upCreative.net",
            image: "2.jpg",
            article: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur"
        },
        {
            title: "Articolo senza immagine 3",
            image: "3.jpg",
            article: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat"
        },
        {
            title: "Quarto articolo sulla  lista",
            image: "4.jpg",
            article: "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat"
        },
        {
            title: "Quinto articolo sulla  lista",
            image: "5.jpg",
            article: "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat"
        },
        {
            title: "Sesto articolo sulla  lista",
            image: "1.jpg",
            article: "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat"
        },
        {
            title: "Settimo articolo sulla  lista",
            image: "2.jpg",
            article: "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat"
        }
    ]);
    //creiamo una nuova istanza per la view iniziale 
    //associandogli la collection appena creata e popolata
    var startView = new StartView({
        collection : articles
    });
    $("body").append(startView.render().el);
};

Una volta fatto ciò, non dovremo far altro che controllare la variabile “user” all’interno del localStorage, nel momento in cui l’applicazione viene lanciata:

$(function(){

    //riprendo il contenuto della variabile "user" del localStorage
    var user = window.localStorage.getItem("user");

    if(user){
        //se in localStorage è presente un oggetto in corrispondenza della chiave "user", 
        //allora significa che l'utente è già loggato, quindi mostriamo direttamente la view della lista degli articoli
        showList();
    }else{
        //se l'utente non è loggato (quindi il contenuto della variabile è vuoto), allora mostriamo la view di login
        var loginView = new LoginView();
        $("body").append(loginView.render().el);
        loginView.show();
    }

});

Come creare un app: il pulsante di logout

Una volta predisposti la view di login ed il controllo della sessione tramite localStaorage, è buona norma aggiungere un pulsante per effettuare il logout, in modo da dare la possibilità all’utente di riaccedere con un username differente.

Inseriamo quindi nel template della view “StartView” un footer contenente il nuovo pulsante:

Il click (o tap) su di esso sarà poi gestito all’interno della view di Backbone:

var StartView = Backbone.View.extend({

    ...

    // Deleghiamo gli eventi per la ricerca sull'input di testo 
    events: {
        ...
        "click    .logout":      "logout"  //gestione del pulsante di logout
    },

    ...

    logout: function(){

        var _this = this;

        //azzero la variabile del lovalStorage
        window.localStorage.removeItem("user");

        //mostro di unovo la view di login, per poi rimuovere questa view
        var loginView = new LoginView();
        $("body").append(loginView.render().el);
        loginView.show(function(){
            _this.remove();
        });

    }
});

Come puoi vedere dal codice, il compito del metodo “logout” è quello di azzerare la variabile di controllo di login e mostrare la view “LoginView“, per poi rimuovere quella corrente al termine dell’animazione di entrata (passando al metodo “show“, definito nella view di login, una funzione di callback).

Il risultato finale

Come creare la view di login in un #HTML5 #mobileapp con #backbonejs
Click To Tweet

Apri DEMO in una nuova finestra

Download dei sorgenti

Aiutami a condividere la risorsa per ottenere il download:

Crea la tua mobile app in HTML, CSS3 e Javascript

Utilizzando questa tecnica insieme a molte altre, ho realizzato più di 10 mobile app in HTML, CSS3 e Javascript (tra cui Tint e Dieta SI o NO?).

Se anche tu vuoi realizzare la tua applicazione in HTML, CSS e javascript da distribuire nei vari store, forse potrebbe interessarti il mio e-book HTML Mobile Accelerato.

The post Come creare un app: realizzare una view di login con il localStorage appeared first on upCreative.

Search form con animazione CSS3 per HTML Mobile App

upcreative — Wed, 08 Jan 2014 08:53:11 +0000

Oltre che realizzare interfacce semplici ed intuitive, per creare un’ottima user-experience bisogna rendere la nostra applicazione anche comoda per l’utente. Innumerevoli sono le tecniche per raggiungere questo obiettivo, e nell’ambito di HTML Mobile App, una fra queste è sicuramente quella di ottimizzare lo spazio in cui vengono mostrati gli elementi di una lista.

E’ quello che fa per esempio l’applicazione di Gmail per iPhone, dove se viene selezionato il campo di testo per la ricerca nella casella mail, questo si sposta verticalmente posizionandosi al posto della navbar, che allo stesso tempo modifica anch’essa la sua posizione verticalmente per uscire dallo schermo.

In questo modo è possibile ottimizzare lo spazio per la visualizzazione dei risultati, espandendolo di circa 45 pixel (l’altezza della navbar), che in un dispositivo mobile possono fare la differenza.

Riproduciamo l’effetto con un’animazione CSS3 performante

A tal proposito in questo articolo voglio segnalarti un tutorial che ho scritto per gli amici di LaboratorioCSS.it, atto a riprodurre lo stesso effetto in HTML5 e CSS3, il tutto utilizzando animazioni fluide e performanti (ti consiglio di leggere questo articolo a proposito delle prestazioni).

Clicca qui per vedere il tutorial su laboratorioCSS

Crea la tua mobile app in HTML, CSS3 e Javascript

Utilizzando questa tecnica insieme a molte altre, ho realizzato più di 10 mobile app in HTML, CSS3 e Javascript (tra cui Tint e Dieta SI o NO?).

Se anche tu vuoi realizzare la tua applicazione in HTML, CSS e javascript da distribuire nei vari store, forse potrebbe interessarti il mio e-book HTML Mobile Accelerato.

The post Search form con animazione CSS3 per HTML Mobile App appeared first on upCreative.

CSS3 Tutorial: Come creare un effetto overlay iOS 7 blur

upcreative — Mon, 30 Sep 2013 17:48:21 +0000

Recentemente è stata rilasciata la versione definitiva del tanto atteso sistema operativo iOS 7 targato Apple, con il suo design flat, le nuove icone e tutto il bagaglio di innovazioni presentate da Tim Cook durante il Keynote tenutosi a Settembre 2013. Uno degli aspetti principali che caratterizza il design si iOS 7 è determinato dall’uso costante dell’effetto blur, impiegato sui vari background che compongono l’interfaccia utente.

In questo articolo cercheremo di riprodurre questo effetto tramite l’esclusivo utilizzo di funzioni CSS3 avanzate, senza usare alcun tipo di immagine. Il risultato dell’esperimento sarà quello di creare una pagina con una barra di navigazione contenente un pulsante che servirà ad attivare il nostro overlay, ed un altro, contenuto all’interno dello stesso overlay, che avrà il compito di disattivarlo. L’obiettivo di quest’ultimo è quello di apparire con effetto slide sopra il contenuto del documento.

Demo

Download

Il markup HTML

Come primo passaggio creiamo il nostro markup html, comprensivo della barra di navigazione, del contenuto della pagina, e della div di overlay:


		Overlay Blur effect
		
	

		
			
				
				
					Lorem ipsum
					Radioactive
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
				
			
			
				
					
				
				
					Lorem ipsum
					Radioactive
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
				
			
			
				
					
				
				
					Lorem ipsum
					Radioactive
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
				
			
			
				
					
				
				
					Lorem ipsum
					Radioactive
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

Per fare ciò abbiamo utilizzato elementi html5 come nav ed article e section, ma è possibile utilizzare anche altri elementi con attributo css “display:block“. Abbiamo inoltre inserito all’interno del tag article, una lista con stili simili ad iOS7 (giusto per rimanere nel tema).

Il foglio di stile CSS

Prima di arrivare al passaggio più importante, ovvero attribuire ai vari elementi gli stili necessari per rendere possibile l’effetto overlay con blur, cerchiamo di dare alla pagina un aspetto che si avvicini più possibile alla grafica di iOS 7:

body, html{
	height: 100%;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 100;
	overflow: hidden;
}

nav {
  top: 0;
  height: 44px;
  padding:0;	  	  
  background-color: #F7F7F7;
  border-bottom: 1px solid #A7A7AA;	  	  
  position: relative;  
}	
nav .title {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  margin:0;
  width: 100%;
  font-size: 18px;
  font-weight: 100;
  line-height: 44px;
  color: #333;
  text-align: center;
  white-space: nowrap;
}

nav .title + button {
  position: absolute; 
  top: 5px;
  right: 5px;
  z-index: 10; 

  border-radius:4px;
  padding:6px 8px;
  border:none;	
  color: #397AFC;
  background: transparent;	  
}
nav .title + button:active{
	color: #7BB6FB;
}

article {
  position: fixed;
  top: 45px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  background: #EFEFF4;
  padding-top:20px;
}

.list {
   list-style: none;
   margin: 0 0 10px 0;
   padding: 0;
   border-top: solid 1px #c8c8c8;
   border-bottom: solid 1px #c8c8c8;
   background-color: #fff;
   overflow: hidden;
   width: 100%;
}

.list > li {
   padding: 13px 15px 13px 15px;
   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   transition: all .3s ease-out;
   position: relative;
   background-color: #fff;
   font-size: 12pt;
}
.list img{
	float:left;
	margin: 0 10px 10px 0;
}
.list h3,
.list h4,
.list p{
	font-size: 0.9em;
	margin:5px 0;
}

.list > li::before {
   content: '';
   display: block;
   position: absolute;
   bottom: 0px;
   left: 15px;
   right: 0px;
   border-bottom: solid 1px #c8c8c8;
}

.list > li.show-detail::after {
   content: 'i';
   display: block;
   height: 20px;
   width: 22px;
   border-radius: 20px;
   border: solid 1px #007aff;
   color: #007aff;
   font: bold 14px/0 'Times', serif;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding: 10px 8px;
   position: absolute;
   top: 10px;
   right: 15px;
}

Applicando questa porzione di codice abbiamo attribuito al documento il font “HelveticaNeue Light“, tipico del flat design targato Apple, abbiamo posizionato e “stilizzato” la barra di navigazione e gli elementi in essa contenuti (come titolo e pulsante d’azione) ed infine abbiamo posizionato il corpo della pagina, costituito appunto dal tag “article“.

Passiamo invece agli stili CSS che caratterizzano il risultato del nostro esperimento: aggiungiamo la proprietà “transition” all’elemento article, specificando che sia applicata all’attributo filter.

article {
  position: fixed;
  top: 45px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  background: #EFEFF4;
  padding-top:20px;

  -webkit-transition: -webkit-filter .15s ease;
          		  transition: filter .15s ease;
}

Poi aggiungiamo un blur di 15 px al contenuto della pagina nel caso in cui il body abbia la classe “open-overlay“, rimuovendolo invece nel caso in cui abbia la classe “close-overlay“.

body.open-overlay article{
	-webkit-filter:blur(15px);
	filter: blur(15px);
}

body.close-overlay article{
	-webkit-filter:none;
	filter:none;
}

Ora l’elemento più importante: l’overlay. Attribuiamo al nostro overlay (tag section) una posizione assoluta nei confronti del documento e posizioniamolo in modo tale che non copra la barra di navigazione, poi aggiungiamo le altre proprietà fondamentali:

L’attributo visibility:hidden, perchè nello “stato normale” l’overlay non deve essere visibile
L’attributo backface-visibility:hidden (nei suoi adattamenti per la compatibilità dei vari browser): con il quale miglioriamo le prestazioni di rendering nel caso di trasformazioni CSS prevenendo quest’ultimo dall’essere eseguito per la parte posteriore dell’elemento
L’attributo transform:translate3d(0,0,0) con il quale miglioriamo la fluidità della nostra animazione “forzando” l’utilizzo della GPU
L’attributo “animatior“, con il quale comunichiamo all’overlay quale genere di animazione eseguire, quanto tempo deve durare, e che tipo di “andamento” eseguire (lineare, swing ecc.)
L’istruzione “keyframe“, con la quale definiamo le animazioni

section {
  position: absolute;
  left: 0;
  top: 44px;	  
  right: 0;	
  bottom:0;  
  background-color: rgba(156,159,164,.5);	  
  padding:20px;
  text-align: center;

  visibility: hidden;

  /* migliora le prestazioni prevenendo il render della parte 'posteriore' dell'elemento */
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
   backface-visibility: hidden;

   /* accelerazione hardware */
   -webkit-transform: translate3d(0,0,0);
   -moz-transform: translate3d(0,0,0);
   -ms-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);			   
}	

body.open-overlay section{
	-webkit-animation: showFromBottom .25s ease both;
	-moz-animation: showFromBottom .25s ease both;
	animation: showFromBottom .25s ease both;

	visibility: visible;
}

body.close-overlay section{
	-webkit-animation: hideToBottom .25s ease both;
	-moz-animation: hideToBottom .25s ease both;
	animation: hideToBottom .25s ease both;
}

/* definizione delle animzioni dell'overlay  */

	@-webkit-keyframes showFromBottom {
		from { -webkit-transform: translateY(100%); }
	}
	@-moz-keyframes showFromBottom {
		from { -moz-transform: translateY(100%); }
	}
	@keyframes showFromBottom {
		from { transform: translateY(100%); }
	}

	@-webkit-keyframes hideToBottom {
		to { -webkit-transform: translateY(100%); }
	}
	@-moz-keyframes hideToBottom {
		to { -moz-transform: translateY(100%); }
	}
	@keyframes hideToBottom {
		to { transform: translateY(100%); }
	}

Apro una piccola parentesi in merito: devo dire che mi piace molto utilizzare la terza delle proprietà elencate, che permette, nel caso di dispositivi mobile, di raggiungere o perlomeno di avvicinarsi alle prestazioni delle applicazioni native.

Tornando a noi, vediamo come nel caso in cui il body abbia la classe “open-overlay” o “close-overlay“, il tag section debba eseguire le due animazioni rispettivamente di comparsa e scomparsa dichiarate sotto il codice “keyframes” : showFromBottom e hideToBottom. Abbiamo inoltre modificato l’attributo “visibility:visible” per rendere visibile il pannello.

Il risultato dovrebbe quindi essere il seguente:

Nel caso di un body con classe “open-overlay” dovremmo vedere l’animazione dell’overlay assieme a quella del blur del documento.
Nel caso di un body con classe “close-overlay” dovremmo vedere esattamente le due animazioni opposte, per poi tornare allo stato iniziale.

Passiamo quindi all’ultima parte.

Il codice Javascript

Per scrivere meno righe di javascript, incorporiamo nel documento due librerie: jQuery e Modernizr, rispettivamente per effettuare il bind degli eventi del click dei pulsanti di apertura e chiusura, e per ricavare il nome dell’evento di fine animazione, che varia a seconda del browser.

var endAnimationName = {
	'WebkitAnimation' : 'webkitAnimationEnd',
	'OAnimation' : 'oAnimationEnd',
	'msAnimation' : 'MSAnimationEnd',
	'animation' : 'animationend'
};
var animationName = endAnimationName[ Modernizr.prefixed( 'animation' ) ];

$(function(){
   //bind dell'evento click sul pulsante di attivazione 
   $("button.open-overlay").on("click", function(){
	   $("body").addClass("open-overlay");
   });
   $("button.close-overlay").on("click", function(){
	   $("body").addClass("close-overlay").on(animationName, function(){				   
		   $(this).off(animationName)
		   .removeClass("open-overlay close-overlay");
	   });
   });
});

Alla fine dell’animazione di chiusura, togliamo al body entrambe le classi “open-overlay” e “close-overlay”, per ritornare così allo stato di partenza.

Conclusioni finali

Purtroppo questo esperimento non è ancora ottimizzato con tutti i browser (per esempio nel caso di Firefox non è possibile applicare l’effetto blur al contenuto della pagina con il semplice attributo “filter:blur” ma solo servendosi degli effetti svg) e inoltre si tratta in fin dei conti di un workaround, in quanto l’effetto sul documento non è scaturito dalla sovrapposizione dell’overlay bensì da uno stile completamente separato. Tuttavia spero che questo tutorial ti sia d’aiuto per imparare nuove regole CSS3 e che magari potrai utilizzarlo nel tuo prossimo progetto!

Demo

Download

Crea la tua mobile app in HTML, CSS3 e Javascript

Utilizzando questa tecnica unita a molte altre ho creato per i miei clienti oltre 10 applicazioni per dispositivi mobile, tra cui due progetti personali: Tint Weather App e Dieta SI o NO?. Se anche tu sei un web designer e vuoi realizzare la tua applicazione mobile da distribuire nei vari stores, forse sarai interessato al mio e-book: HTML Mobile Accelerato.

Grazie ad esso verrai a conoscenza di tutte quelle tecniche che renderanno la tua applicazione mobile fluida e reattiva come quelle native.

I am text block. Click edit button to change this text.

The post CSS3 Tutorial: Come creare un effetto overlay iOS 7 blur appeared first on upCreative.

Twitter Bootstrap 3 autocomplete – come realizzarlo con JQuery UI

upcreative — Mon, 09 Sep 2013 17:05:39 +0000

Tutti i designer e gli sviluppatori web hanno utilizzato o perlomeno conoscono gli utilissimi widget di jQuery UI. In questo articolo voglio parlarvi di come personalizzare gli stili ed il markup del widget autocomplete, che pur essendo uno dei plugin più completi, presenta un aspetto al quanto obsoleto. Cercheremo in particolare di realizzare un twitter bootstrap 3 autocomplete servendoci del widget di jQuery UI.

Demo

Aiutami a condividere la risorsa per ottenere il download:

Prima di iniziare

In alcuni progetti, soprattutto per quelli in cui alcune risorse come il tempo o anche il budget del cliente vengono a mancare, può tornare molto utile servirsi di temi twitter bootstrap 3 premium. A tal proposito te ne voglio proporre alcuni di alta qualità che io stesso ho usato per alcuni miei lavori:

RioLeme – Responsive Multi-Purpose WordPress Theme

Alamak – Responsive One Page Portfolio Theme

Moose – Multipurpose Responsive WordPress Theme

Slowave – Multipurpose Responsive WordPress Theme

Floyd – One Page Parallax WordPress Theme

NativeChurch – Multi Purpose WordPress Theme

Twitter Bootstrap 3 autocomplete: iniziamo!

Cosa includere nel documento

Come prima cosa andremo ad inserire nel nostro documento html le librerie css e javascript necessarie:

CSS:

bootstrap.css
demo.css (il nostro foglio di stile)

FILE JS:

jquery.js (versione 1.10.2)
jquery-ui.js (per l’autocomplete)
demo.js (il nostro file javascript)

Per questo esempio ho escluso tutti i file js del Bootstrap e qualunque tema css del jQuery UI, in quanto il nostro intento è quello di combinare appunto gli stili del primo con le funzionalità del secondo; tuttavia è possibile raggiungere l’obiettivo anche includendo le due librerie al completo.

I file “demo.css” e “demo.js” sono rispettivamente il foglio di stile e il javascript del nostro esempio.

Il markup HTML

Aabbiamo usato un input con id “spotlight” all’interno di un form, il tutto contenuto nella colonna di una griglia Bootstrap, con offset 3 e larghezza 6: il risultato è un campo di testo responsive centrato nel mezzo del documento, sia per dispositivi desktop che mobile.

Javascript: demo.js

$(function() {

    var availableTags = [
      "ActionScript",
      "AppleScript",
      "AppleScript2",
      "AppleScript3",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];

    $("#spotlight").autocomplete({
		source: availableTags,
		appendTo: $("form:first")
	});

	$("#spotlight").data( "ui-autocomplete" )._renderMenu = function( ul, items ) {
		var that = this;		
		ul.attr("class", "nav nav-pills nav-stacked");
		$.each( items, function( index, item ) {
			that._renderItemData( ul, item );
		});
	};	    

});

Prima di tutto abbiamo definito l’array dei termini possibili di ricerca, poi abbiamo inizializzato il campo con id “spotlight” per l’autocomplete del jQuery UI: qui si noti in particolare come sia stato necessario “appendere” il menù creato dal plugin al form tramite il parametro “appendTo”.

Il passo successivo è stato quello di modificare la funzione “_renderMenu” del plugin, ovvero quella funzione che ha il compito di inserire i vari risultati di ricerca alo’interno del menù sottoforma di entità HTML. Il procedimento è molto semplice: alla funzione vengono passati come parametri l’elemento del menu che sarà appeso al form, e gli elementi del risultato della ricerca in formato JSON. All’interno di un loop si scorrono poi tutti i risultati e viene richiamata la funzione “_renderItemData” che ha il compito di creare per ogni risultato l’elemento HTML e di aggiungerlo alla lista. Prima del loop noi sostituiamo semplicemente la classe del menu del jQuery UI con quelle del Twitter Bootstrap.

Gli stili CSS: demo.css

form#search-form{
  position: relative;
}

form#search-form ul{
	  position: absolute;
	  top: 0;
	  left: 0; 
	  width: 100%;
	  max-height: 200px;
	  overflow: auto;	  
	  z-index: 1;	  
	  border:1px solid #DDDDDD;
	  border-radius: 6px;	  
  }

span.ui-helper-hidden-accessible{
  display: none !important;
}

.ui-state-focus {
	 color: #ffffff;
	 background-color: #428bca;
}

Anche per quanto riguarda gli stili il discorso non è molto complicato: per prima cosa attribuiamo il “position:relative” al form, di modo ché il menù dei risultati venga riposizionato in base al primo (è per questo che precedentemente lo abbiamo inserito tramite javascript al suo interno), poi impostiamo gli attributi del menu stesso, il quale avrà quindi una “position:absolute”.

Attribuiamo poi al menù una altezza massima di 200px con overflow:auto per far scorrere i risultati con una scrollbar, evitando di farli uscire dallo schermo, qualora fossero troppo numerosi.

Fatto ciò nascondiamo la classe helper del jQuery UI, ed impostiamo lo stile del risultato della lista su cui scaturisce il focus (questo è un hack necessario perché purtroppo non è possibile modificare con poche righe di codice il markup e le classi di ogni singolo elemento della lista dei risultati. Per questo si è scelto di prendere la strada “più leggera“).

Twitter bootstrap 3 autocomplete: risultato finale

Demo

Aiutami a condividere la risorsa per ottenere il download:

upCreative » tutorial

Come creare un app: realizzare una view di login con il localStorage

Tutorial su come creare un app: l’obiettivo finale

La view del login

Gli stili CSS

Il template

Come creare un app: il controllo del login

Come creare un app: il pulsante di logout

Il risultato finale

Download dei sorgenti

Aiutami a condividere la risorsa per ottenere il download:

Crea la tua mobile app in HTML, CSS3 e Javascript

Search form con animazione CSS3 per HTML Mobile App

Riproduciamo l’effetto con un’animazione CSS3 performante

Crea la tua mobile app in HTML, CSS3 e Javascript

CSS3 Tutorial: Come creare un effetto overlay iOS 7 blur

Il markup HTML

Lorem ipsum

Radioactive

Lorem ipsum

Radioactive

Lorem ipsum

Radioactive

Lorem ipsum

Radioactive

Il foglio di stile CSS

Il codice Javascript

Conclusioni finali

Crea la tua mobile app in HTML, CSS3 e Javascript

Twitter Bootstrap 3 autocomplete – come realizzarlo con JQuery UI

Prima di iniziare

Twitter Bootstrap 3 autocomplete: iniziamo!

Cosa includere nel documento

Il markup HTML

Javascript: demo.js

Gli stili CSS: demo.css

Twitter bootstrap 3 autocomplete: risultato finale

Temi Twitter Bootstrap 3 premium