sabato 6 febbraio 2016

jQuery, un mondo in una libreria

Cosa è jQuery?

jQuery è una libreria di funzioni (framework) javascript, cross-browser destinata ad applicazioni web, che si propone come obiettivo quello di semplificare la programmazione lato client delle pagine HTML. Il framework fornisce metodi e funzioni per gestire al meglio aspetti grafici e strutturali come posizione di elementi, effetto di click su immagini, manipolazione del Document Object Model e quant'altro ancora, mantenendo la compatibilità tra browser diversi e standardizzando gli oggetti messi a disposizione dall'interprete javascript del browser. Come Includere jQuery al proprio progetto?

 

Come integro jQuery al mio progetto web?

La libreria jQuery è un singolo file JavaScript, da richiamare tramite HTML con il tag <script> (si noti che il tag <script> dovrebbe essere all'interno della sezione <head>). Per ottenere la libreria: http://jquery.com/download/
Da notare che: 
  1. Production version - questa versione è per il vostro sito web di produzione il codice è minimizzato e compresso;
  2. Development version - versione di sviluppo e di test, il codice è facilmente leggibile;
  3. CDN di Google o di jQuery – Content Delivery Network

Con percorsi locali:

<head> 
 <script src="jquery-1.12.0.min.js"></script> 
 <script src="mioscript.js"></script> 
</head>  

Con percorsi remoti:

<head> 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 <script src="mioscript.js"></script> 
</head>   

Se non abbiamo bisogno di modifiche alla libreria usare le versioni .min (sta per minified ovvero compresso) in quanto sono più veloci da caricare, inoltre preferire i CDN di Google per ridurre i tempi di caricamento (Leggere qui per maggiori dettagli).    

 

Qual è la sintassi di base? 

$(selector).action()  
  1. Il $ per definire jQuery 
  2. Un (selector) per "query (trovare)" elementi HTML 
  3. Un’azione: jQuery action() da far eseguire sull’elemento selezionato 

 Per esempio:

  • $(selector).action();
  • jQuery(‘p’).css(‘color’, ‘blue’);
  • $(‘p’).css(‘color’, ‘blue’);
  • $(this).hide();
  • $("p").hide();
  • $(".test").hide();
  • $("#test").hide();
Ovvero: selettore, azione, parametri.  

Cosa è jQuery UI?

jQuery UI è una libreria open source di plug-in basata sulla libreria JavaScript JQuery. Ogni componente è costruito secondo l'architettura di JQuery ed è completamente personalizzabile. Fornisce interazioni ed animazioni, effetti avanzati e widget. Al momento jQuery UI è suddivisa in: Interactions, Widgets, Effects, Utilities.
Dipendente dalla libreria core può essere richiamata sia con percorsi locali che con percorsi remoti. Se usiamo il CDN di jQuery.
    1. http://code.jquery.com/jquery-1.12.0.min.js
    2. http://code.jquery.com/ui/1.11.3/jquery-js
    3. http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-css
      In generale tutti i link assoluti per UI e non solo sono su http://code.jquery.com/

      Se invece usiamo il CDN di Google: 

      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
      <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>  

       

      Cosa sono i Widget di jQuery UI?

      Molto amplia è la scelta di Widget in jQuery UI. Il nome potrebbe essere in alcuni casi fuorviante, visto che è spesso usato in moltissimi contesti diversi, tuttavia in questo caso si tratta solo di controlli atti a semplificare e ordinare la fruizione e l’inserimento dei dati in una pagina web.
      jQuery UI comprende nativamente 11 tipi di widget, completamente compatibili con i temi UI generati da Theme Roller (la web application per la gestione dei temi) e ricchi di opzioni di personalizzazione.
      • Accordion: Visualizza pannelli di contenuto comprimibili per presentare le informazioni in una quantità limitata di spazio.
      • Autocomplete: suggerisce parole mentre l'utente sta scrivendo.
      • Button: inserisce pulsanti personalizzabili
      • Datepicker: Visualizza un calendario
      • Dialog: visualizza finestre di dialogo personalizzabili
      • Menu: crea menu nidificabili.
      • Progressbar: consente di visualizzare un indicatore di stato
      • Slider: Visualizza diapositive accessibili tramite tastiera
      • Spinner: Visualizza i pulsanti per immettere numeri tramite la tastiera o il mouse.
      • Tabs: Trasforma un insieme di elementi contenitori in una struttura a tab.
      • Tooltip: mostra informazioni addizionali.

       

      Come inserisco un accordion?

      <div id="accordion"> 
        <h3><a href="#">Primo headerheader</a></h3> 
        <div>First contenuto</div> 
        <h3><a href="#">Secondo header</a></h3> 
        <div>Secondo contenuto</div> 
      </div> 

      A questo punto basterà richiamare il metodo .accordion() sull’elemento con id accordion per attivare il widget
      $("#accordion").accordion(); 
      L’Accordion, come gli altri widget offre un ottimo numero di opzioni per personalizzare il comportamento del widget. Fra cui:
      • active : (selettore, jQuery, elemento DOM, numero, booleano – 'first-child’) indica uno specifico elemento o la sua posizione nell’accordion in modo da renderlo subito visibile una volta applicato il widget.
      • autoHeight : (booleano – true) indica se applicare l’altezza del contenitore di testo più alto a tutti gli altri elementi. Questa opzione è attiva di default perché rende il controllo più consistente e impedisce che il cambiamento di altezza dell’accordion possa influire sul posizionamento di altri box nell’interfaccia.
      • collapsible : (booleano – false) strettamente collegato all’opzione precedente, se impostato su true permette di chiudere tutte le aree di testo, facendo collassare completamente il controllo.
      Ulteriori dettagli: http://api.jqueryui.com/accordion/#option-animate

      Come inserisco un tabulatore?

      <div id="tabs"> 
       <ul> 
        <li><a href="#fragment-1"><span>Uno</span></a></li> 
        <li><a href="#fragment-2"><span>Due</span></a></li> 
        <li><a href="#fragment-3"><span>Tre</span></a></li> 
       </ul> 
       <div id="fragment-1"> 
        <p>Testo 1</p> 
       </div> 
       <div id="fragment-2"> 
        <p>Testo 2</p> 
       </div> 
       <div id="fragment-3"> 
        <p>Testo 3</p> 
       </div> 
      </div> 

      A questo punto ci basterà richiamare il metodo .tabs() sull’elemento con id tabs per attivare il widget $("#tabs"). tabs (); 

      Cosa è il Themeroller/temi di jQuery UI

      la struttura grafica dei widget e delle interazioni di jQuery UI è in gran parte veicolata dall’inclusione di un file CSS compreso nel pacchetto di installazione.
      Themeroller è un applicativo online raggiungibile all’indirizzo http://jqueryui.com/themeroller/ che permette di modificare il tema base smoothness secondo le proprie esigenze con un alto grado di personalizzazione. Oltre a questo, mette a disposizione molti temi preconfezionati da scaricare direttamente oppure da usare come base per il propio tema.
      N.B. cliccando sul link di download dei temi verrete reindirizzati all’utility di download di jQuery UI, perciò scaricare tutto il pacchetto ed estrarre la cartella del tema dalla directory css. La struttura e la nomenclatura che compongono un tema per jQuery UI sono rigidamente standardizzati, per garantire la compatibilità fra il markup generato dalla libreria e la formattazione disponibile via CSS.

      Cosa sono i Plugin jQuery? 

      In jQuery un plugin non è altro che un’estensione (non autonoma) del framework, che ha come compito quello di ampliarne le funzioni del core. Più nello specifico un plugin è una, o un insieme, di funzioni che hanno lo scopo di utilizzare il framework per compiti pre-stabiliti e quindi aiutare gli sviluppatori quando si tratta di validare i nostri formulari, creare delle slideshow, inserire nei nostri siti delle gallerie fotografiche. Alcuni esempi di plugin che possono essere testati:
      1. Colorbox - a jQuery lightbox A lightweight customizable lightbox plugin
      2. jQuery Zoom A plugin to enlarge images on mouseover or mousedown.
      Anche per i plugin abbiamo la versione ridotta (min di produzione) e la versione non compressa (di sviluppo).

      Come integro il plugin Colorbox?

       <link rel="stylesheet" href="colorbox.css" /> 
       <script src="../jquery.colorbox-min.js"></script> 
      Il plugin può essere utilizzato sia su una singola immagine sia per raccolte in stile slideshow.

      Per raggruppare gli elementi includiamo nel mark-up, p.e., l’attributo rel="gipso"
      per poi utilizzare il selettore di attributi di jQuery per trovari tali immagini. $(document).ready(function(){ 
       //Examples of how to assign the Colorbox event to elements 
       $(".gipso").colorbox({ rel:'gipso’, transition: 'fade’, speed: 500, }); 
       $(".flora").colorbox(); 
      });
               
      Nel prossimo post presentrò jQuery Mobile.

      lunedì 18 gennaio 2016

      Design, Strumenti e Processi colloborativi per il Web Design

      Strumenti e approcci all'interno di un workflow collaborativo

      Mi ricordo, ancora imberbe, un designer che impostava a 1024px o a 960px sull’asse orizzontale il proprio spazio di lavoro destinato al web e ricordo come il layout venisse concepito come un oggetto statico, l’influenza di un approccio ancora prettamente cartaceo era evidente. Eravamo a cavallo fra i due secoli e la nostra formazione ci faceva ragionare in A4. Da quel giorno, fortunatamente o sfortunatamente, molta acqua è passata sotto i ponti, i designer hanno iniziato a pensare, già dal wireframe, ad un nuovo approccio fluido e i nuovi software di wireframing, prototipizzazione e mockup ci hanno affidato strumenti software totalmente nuovi: Balsamiq Mockups, Axure RP Pro, Sketch 3 per citare i primi tre, degni di nota, che mi vengono in mente.


      Il wireframe viene considerato un documento a bassa-fedeltà, in parole povere non è altro che una bozza del lavoro che verrà svolto. Può essere considerato come lo scheletro del front-end dell’applicazione web, dove viene assicurata la giusta posizione dei blocchi principali del contenuto, una corretta struttura delle informazioni e descritte le principali interazioni utente-interfaccia.

      Il Wireframe ha la funzione di:

      • comunicare l’idea iniziale del progetto;
      • focalizzare l’attenzione solo su architettura e contenuti;
      • evitare le “distrazioni” della parte grafica;
      • comunicare i bloccchi/contenuto;
      • essere event. alla base di un successivo prototipo.
      La produzione di un wireframe deve coinvolgere le diverse figure del team: web project manager, sviluppatore, designer, copywriter... e può servire anche in fase di test di usabilità, oltre che nel momento in cui si sottopone al cliente la struttura prima che prenda forma attraverso grafica e codice. In questa fase il lavoro in team è fondamentale; non coinvolgere tutte le parti in causa durante questa fase iniziale potrebbe avere ripercussioni sull'intero sviluppo: tempo, soldi, qualità.


      Prototipo

      Produrre un prototipo, solitamente successivo al wireframe, è estramamente utile, rappresenta, secondo me, il mezzo più potente in fase di testing e documentazione in quanto questo genere di elaborato rappresenta il vero prototipo del sito (realizzato solitamete in HTML/CSS/JS) e permette all’utente di testare l’esperienza di navigazione. Il prototipo serve anche a validare specifiche fattibilità tecniche.

      Prototipi condivisi come antidoti al vicolo cieco

      La prototipazione, fatta bene, è un processo impegnativo ma fondamentale, serve a validare specifiche fattibilità tecniche e a costringere le diverse figure di un team alla concretezza del prodotto evitando così di ritornare a considerare eventuali variazioni che possano portare a vicoli ciechi. Frizzi e lazzi vengono facilmente additati.

      Mockup

      Il mockup è una rappresentazione del prodotto realizzato con il più alto livello di dettaglio e fedeltà possibile. Presa la struttura definitiva del wireframe vengono inseriti le parti visual. Un mockup serve a rendere l’idea del progetto finale rappresentando nel dettaglio i vari contenuti e le funzionalità base dell’applicazione web in maniera statica. I mockup rappresentano il modello più comprensibile e più vicino al prodotto finale.
      Il designer può partire dal mockup come elemento di riferimento dello sviluppo?
      Dipende dalle competenze del designer. Mi è capitato durante la fase di sviluppo di lavorare su mockup ottimi, pensati e strutturati in maniera multi-device. Inutile dire che può capitare, ancora oggi, di tornare a cavallo dei due secoli: accozzaglie visual prive di pensiero critico riguardo alla responsività e all'ergonomia del prodotto sono problematiche ancora cogenti. In questi casi accompagnare il designer su un tool di wirefreming non è tempo perso.
      Ho notato come sia a livello commerciale, sia in ambito accademico, si sia affermato Balsamiq Mockups un valido tool grafico per sviluppatori, designer e progettisti che permette di "schizzare" interfacce utente e schermate (wireframe) per siti web e applicazioni con elementi dal look "sketchy" (abbozzato). I prodotti finali possono essere esportati in formato PNG, PDF o XML.


      Anche Axure RP Pro consente wireframe a bassa e alta fedeltà, oltre che a prototipi navigabili: Axure RP Pro è senz’altro fra le migliori soluzioni; di questo software si apprezza soprattutto la velocità e facilità con cui permette di eseguire i wireframe e di convertirli in prototipi interattivi navigabili. La gestione drag&drop degli oggetti rende immediato l'utilizzo nella progettazione incentrata alla costruzione di UI per diversi device.


      Discorso a parte va fatto per Sketch, l’applicazione sviluppata da Bohemian Coding, che sta velocemente prendendo piede tra i designer come alternativa ai più celebri software Adobe. Photoshop non è di certo nato per progettare UI. Il software Adobe, usato dalla quasi totalità dei designer è, come suggerisce il nome, un editor di foto e immagini. Successivamente, grazie alla sua potenza e alla varietà delle sue funzioni, è stato adattato/declinato a strumento per la progettazione web. Grande/piccola pecca di Sketch: è disponibile unicamente per Mac OS.


      Seguimi tramite Email

      Twitter