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.


      mercoledì 3 giugno 2015

      Il "Design for all" e il disastro dell'inclusione scolastica

      Mi sono stancato di sentir parlare di “Design for all”, quell’etichetta terminologica ab/usata da chi tratta tematiche relative all’accessibilità e all’usabilità; il termine “Design for all” inizia ad apparire frequentemente sui testi specialistici, nei convegni attinenti alla pubblica istruzione e al patrimonio culturale. Si tratta di un termine dal fascino anglosassone che anch’io ho frequentemente utilizzato ma, solo oggi, con grave ritardo, mi rendo conto come questa etichetta terminologica sia superficiale e contraddittoria.
      Mi riferisco soprattutto, ma non solo, alla scuola pubblica; gli istituti specializzati per ragazzi non vedenti, ad esempio, sono stati chiusi da decenni, sbandierando il vessillo politico dell’integrazione e dell’eguaglianza fra i ragazzi. Questi istituti fornivano personale specializzato, sussidi didattici adeguati e la possibilità di confrontarsi continuamente con altri ragazzi affetti dalla stessa minorazione visiva, ma comportavano lo sradicamento del ragazzo non vedente o ipovedente dall'ambiente sociale in cui era nato e la pressoché totale assenza di confronto con i coetanei normovedenti. Dal 1976 i bambini non vedenti ed ipovedenti sono stati inseriti nelle “scuole comuni”, si sono così ritrovati scaraventati in aule cosiddette “normali” dove possono convivere forme di disabilità diversissime fra di loro.
      Un compito non facile ha coinvolto: insegnanti, famiglie, associazioni, architetti… spesso con un’ottica troppo monografica, priva di vere linee guida.
      Ciò a cui abbiamo assistito è la naturale evoluzione che passa da Louis Braille alla consapevolezza della disabilità fisica dovuta allo scempio della prima guerra mondiale. Il tema dell’invalidità e delle disabilità acquista nel primo dopoguerra rilevanza sociale e di conseguenza economica, politica e culturale.
      Mi chiedo: è possibile che lo studente non vedente abbia le stesse necessità dello studente affetto da sordità? Per non parlare delle eterogenee problematiche fatte rientrare nell'ambito dell'amplissimo spettro autistico, problematica che coinvolge migliaia di famiglie e che non ha niente a che fare con le cinematografiche sindromi di Asperger. Per rispondere alle esigenze della singola disabilità ci vogliono competenze specifiche e mezzi specifici. Gli insegnanti, mi chiedo, ricevono le attività formative di aggiornamento professionale e gli strumenti necessari? Continuo a farmi domande: l’insegnante di sostegno deve quindi essere un tuttologo, con un bagaglio di risorse metodologiche e strumentali/digitali pressoché infinite? La scuola fornisce le adeguate strumentazioni digitali all’insegnante di sostegno, specifiche per quella determinata disabilità? 
      Ogni intervento serio, di vero sostegno ai ragazzi e alle famiglie, deve tenere conto della specificità e dell’unicità della Persona. Per rispondere alle esigenze della singola disabilità ci vogliono competenze specifiche e risorse specifiche; ci sono?
      Ho la sensazione che il mondo della progettazione digitale stia facendo gli stessi errori; qual è la figura specializzata nell’accessibilità informatica? Stiamo anche noi informatici cercando un tuttologo? Chi si occupa di deficit visivo e di ipovisione effettua ‘Scenari di envisioning’ prima di rilasciare una web application o un software per la didattica? Avete mai navigato i cosiddetti siti accessibili “a norma” di alcune province, comuni, università pubbliche?
      Se di "Design for all" si vorrà continuare a parlare dovremo trovare un modo di concepire il digitale affrontando la progettazione e la comunicazione calandola sulle diversità, NON sulla globalità e sull’omologazione; di quello che doveva essere il nuovo umanesimo digitale facciamone il vessillo dell’inclusione sociale e quindi culturale e economica delle nuove generazioni.
      La nostra generazione ne sarà capace? Sarà capace di preparare questo terreno ai nostri figli? L’evolversi delle pratiche sull’accessibilità e sull’usabilità in ambito digitale hanno bisogno di investimenti in infrastrutture e device di ultima generazione; ma la realtà stride con queste mie ridicole affermazioni: strutture fatiscenti, degradate e non a norma che i vigili del fuoco dovrebbero dichiarare inagibili, aule pollaio che le ASL dovrebbero chiudere, carenze croniche di impianti ed attrezzature, mancanza di aule speciali, laboratori, ausili tecnologici, informatizzazione, carta igienica, mancanza di impianti ed attrezzature sportive, gravi carenze igienico-sanitarie, non esistenza di mense, assenza di servizi e vera accessibilità delle strutture.
      Possiamo, dopo queste premesse, avere una visione minimamente applicabile di ‘Design for all’? Ogni tentativo produrrà, nei migliori dei casi, la frustrazione di tutti gli attori in campo: famiglie, docenti, insegnanti di sostegno…e, dei nostri figli!
      Solo oggi, con gravissimo ritardo, mi rendo conto che parlare di “Design for all” sia, oltre che superficiale e contraddittorio, ridicolo.

      mercoledì 29 aprile 2015

      èStoria Festival e Borsa Europea del Turismo e della Grande Guerra (Gorizia, 22-24 maggio 2015)

      èStoria - Festival Internazionale della Storia dal titolo "Giovani" è un’occasione unica di incontro, scambio e formazione per gli studenti. Nel corso del fine settimana del 22-24 maggio 2015, i partecipanti potranno accedere a tutti gli eventi (convegni, workshop, seminari, mostre) del programma di èStoria (www.estoria.it), incontrare intellettuali, giornalisti e storici, partecipare infine alle visite guidate lungo gli itinerari storici della Grande Guerra e delle città di Gorizia e Trieste. "Giovani" è il titolo scelto per l'undicesima edizione del Festival e verrà analizzato nell'attualità, con particolare riferimento alle sfide e prospettive future dal punto di vista sociologico, antropologico, scolastico e politico e nel mito della gioventù attraverso la letteratura, le arti figurative, il cinema, la musica e il teatro.


      La Borsa Europea del Turismo Storico e della Grande Guerra è un evento che potenzia èStoria - Festival Internazionale della Storia, ne allarga la dimensione coinvolgendo soggetti internazionali, contribuisce a una sua ulteriore promozione a livello europeo e nazionale. Alla Borsa saranno presenti una ventina di espositori istituzionali e di aziende private che gli studenti potranno  incontrare per studiare i pacchetti turistici predisposti, si svolgerà una sessione di workshop con 50 buyer e 100 seller e ci saranno convegni sulla promozione del turismo nei luoghi storici, workshop, incontri con operatori ed espositori, l'organizzazione di educational tour nel territorio della città di Gorizia, il centro italiano maggiormente legato alla memoria della Grande Guerra.

      Informazioni sul bando le potete trovare anche sul sito della manifestazione www.turismograndeguerra.it   

      venerdì 24 aprile 2015

      Beni culturali e nuove tecnologie

      Farà parte dell’allestimento museale della Galleria degli Uffizi una formella tattile del dipinto “Pala di Santa Lucia de’Magnoli” (Domenico Veneziano, 1445), ideata e sviluppata dal gruppo di ricerca di Monica Carfagni, ordinario di Disegno e Metodi dell'Ingegneria Industriale, presso il Dipartimento di Ingegneria Industriale Unifi, e finanziata dall’associazione Rotary. La ricostruzione sarà inaugurata lunedì 27 aprile alle ore 12.30 presso la Galleria. (piazzale degli Uffizi, 6 – ore 12.30)
      La  realizzazione della formella si colloca nell’ambito del progetto T-VedO (Ricostruzione Tridimensionale per non Vedenti di Opere d’arte pittoriche), il progetto della Regione Toscana che si propone di rendere accessibile la fruizione di un’opera d’arte da parte di persone affette da disturbi alla vista attraverso un sistema in grado di trasformare degli oggetti bidimensionali – come un dipinto – in modelli 3D sia virtuali che fisici.
      La formella tattile della “Pala di Santa Lucia de’Magnoli” non è il primo risultato di T-VedO.
      Segue infatti la riproduzione di bassorilievi tattili di due grandi opere del Rinascimento fiorentino (“L’Annunciazione” del Beato Angelico, attualmente esposto al Museo San Marco, e la “Guarigione dello Storpio e Resurrezione di Tabita” di Masolino da Panicale), di alcune formelle tattili presso Villa La Quiete e la realizzazione del Rosso Di Montelupo, una delle principali opere nell’ambito del percorso sensoriale previsto dal nuovo allestimento del Museo della Ceramica di Montelupo.
      A Monica Carfagni abbiamo chiesto di illustrare i passaggi del procedimento che consentono la ricostruzione tridimensionale di un’opera pittorica come la “Pala di Santa Lucia de’Magnoli”?
      Il primo passo consiste nell’acquisizione di un’immagine digitale dell’opera pittorica in alta definizione. L’immagine viene corretta dai possibili errori dovuti alla distorsione ottica e dai difetti di aberrazione cromatica e segmentata nelle varie aree di interesse. In particolare, attraverso alcune operazioni di digital imaging, vengono marcate le parti più rilevanti, per le successive fasi di ricostruzione, come le figure umane, ma anche, ad esempio, le varie parti delle vesti che differiscono fra loro per il colore. Questa fase preliminare, per via della complessità generale del tratto e del colore nel disegno a mano libera, è l’unica completamente manuale.
      Poi cosa succede?
      Sfruttando le informazioni relative alla prospettiva dell’opera, si realizza la prima versione tridimensionale della scena. Si ricavano le linee di fuga da particolari architettonici e, dalla loro intersezione, viene ricavata la posizione del punto di fuga.
      Questa prima ricostruzione permette di collocare i soggetti e oggetti nella scena tramite la definizione dei piani (frontali, laterali etc.) sui quali questi sono collocati. Il modello ricavato costituisce la base per il bassorilievo ed è fondamentale per rendere al tatto l’idea della profondità e della sovrapposizione dei soggetti e oggetti raffigurati: le figure in primo piano risulteranno disposte su un livello più avanzato rispetto alle figure retrostanti. Questo passaggio permette di realizzare un modello 2.5D, detto a sagome piatte, realizzato in modo da ricalcare in vista frontale l’immagine del dipinto.
      Dal modello 2.5D come si arriva alla ricostruzione 3D?
      In questo stadio si ha una approssimazione di tutte quelle parti della scena non rappresentabili tramite piani, come i volti e le vesti. La geometria di questi elementi necessita perciò di essere sviluppata ulteriormente attraverso tre metodologie complementari. Dopo aver proceduto a un’ulteriore operazione di digital imaging, che permette di ricavare la luminosità dei vari soggetti della scena, viene ricostruito il modello che approssima il volume, utilizzando la tecnica image inflating: una volta fissato il contorno della figura, il volume viene ricavato “gonfiando” la sagoma racchiusa.
      La forma principale è invece ottenuta sfruttando le informazioni connesse all’ombreggiatura e alla luminosità dei pixel che formano l’immagine digitale (mediante la tecnica shape-from-shading). Grazie alle più recenti metodologie messe a punto dal gruppo di ricerca, è possibile ottenere una ricostruzione 3D ottimale. Infine i dettagli più fini vengono replicati generando una superficie corrispondente al livello di luminosità dell’immagine del dipinto.
      I tre contributi così ottenuti sono quindi combinati mediante un’interfaccia grafica attraverso la quale l’utente è libero di regolare l’influenza di ciascuno di essi al fine di perfezionare il risultato, nell’ottica dell’esplorazione da parte del fruitore finale. La rappresentazione d’insieme, cioè, deve rispettare il principio della “sovrapposizione” dei livelli, in base alla quale ciò che sta in secondo piano ha una sporgenza inferiore di ciò che è più vicino all’osservatore. Il modello 3D virtuale del bassorilievo tattile è a questo punto ultimato ed è pronto per essere realizzato mediante stampa 3D.

      martedì 7 aprile 2015

      Passare da Photoshop a Gimp in maniera indolore

      Sono ormai 10 anni che uso GIMP come software di grafica raster per i miei progetti web e dal 2007 ho iniziato ad utilizzarlo anche per i miei corsi di formazione. Nonostante sia ormai diffusamente utilizzato, continuo ad incrociare molti "scettici" che etichettano GIMP come programma di serie B, considerando il più blasonato Photoshop come assolutamente essenziale per il flusso di lavoro in ambito Web design.

      Logo GimpScrivo questo post proprio per invogliare gli "scettici", in modo che possano provare GIMP nella maniera più indolore possibile; ovvero aggirando quelle differenze che potrebbero inizialmente scoraggiarli. vedremo come GIMP sia facilmente configurabile e adattabile alle nostre abitudini.

       

      Personalizzare lo spazio di lavoro:

      Thema Dark per GIMP

       

      Attivare la 'Modalità a finestra singola':

      Gli utenti storici di GIMP potranno far a meno di questa opzione essendo stata introdotta in tempi relativamente recenti, ma gli utenti provenienti da Photoshop non ne potranno fare a meno:

      Dal menu principale andare a Finestre => Modalità a finestra singola

      Inoltre per liberare spazio sul pannello laterale sinistro si possono trascinare le 'Opzioni strumento' nel pannello di destra, in modo da poter ridimensionare il pannello di sinistra fino a giungere a due icone, o una, per colonna.  
      Per la skin nera troviamo valide alternative al seguente link:

      http://migf1.deviantart.com/art/Clearlooks-Flat-Icons-Gimp-2-8-Themes-v-1-0-1-484289796
       
      Le skin sono confezionate in un file zip, bisognerà copiare tutte le cartelle contenute nel file compresso in "themes/".

       

      Superficie magnetica

      Se questa opzione è abilitata, quando si sposta una selezione o un livello, questi saranno calamitati verso i bordi della superficie disegnabile. Questa opzione, attiva di default in Photoshop, può essere resa tale anche in GIMP in quanto software open source è così liberamente personalizzabile.
      Si può accedere al comando dal menu principale tramite:

      Visualizza => Bordi della superficie magnetici.

      Per rendere questa opzione di default anche in GIMP:

      1. Aprire ~/.gimp-2.8/gimprc con un editor di testo   
      2. A fine codice aggiungere:
        (default-snap-to-canvas yes)
        (default-snap-to-grid yes)      
      3. Salvare e chiudere

       

      Disabilitare Mostra il contorno del livello

      Mostra il contorno del livello

      Mostra il contorno del livello

      Altra opzione attiva di default è la linea tratteggiata gialla e nera che delimita il livello attivo. Per disattivarla basta andare nel menu principale e selezionare:

      GIMP => Preferenze => Aspetto

      e deselezionare 'Mostra il contorno del livello' sia nella modalità 'normale' sia nella modalità 'schermo intero' e riavviare GIMP. 

      Impostare lo strumento Sposta

      Di default lo strumento Sposta di GIMP è impostato per lavorare liberamente su un Livello o Guida. Questa opzione, che ricorda quella dei più noti programmi vettoriali come Inkscape e Illustrator, può disorientare l'utente che proviene da Photoshop. Se si desidera impostare lo strumento Sposta per lavorare solo sul Livello attivo: 

      1. Andare sul pannello 'Opzioni strumento'
      2. Scegliere 'Sposta livello attivo'
      3. Per rendere tale impostazione di default
        GIMP => Preferenze => Opzioni strumento => Salva ora le opzioni strumenti

       

      Installare Layer via Copy/Cut

      In Photoshop usiamo spesso CTRL + J che può essere utilizzato per duplicare/aggiungere al livello corrente un nuovo livello dalla selezione corrente. Per avere tale opzione anche in GIMP possiamo installare Layer via Copy/Cut: si tratta di un plugin per GIMP 2.8 scritto in Python che serve a copiare e spostare l'area selezionata in un nuovo livello, nella stessa posizione della selezione originale. Si può copiare il contenuto non solo da un livello, ma anche da un gruppo di livello.

      Download:

      http://some-gimp-plugins.com/contents/en/extensions/002/ 

      Istruzioni di installazione:

      1. Estrarre "layer-via-copy-cut.py" dall'archivio .zip nella cartella dei plugin ".../.gimp-2.x/plug-ins/"
      2. Assicurarsi che il file estratto sia eseguibile.
      3. Riavviare GIMP

      Questo plugin richiede Python!

       

       Modificare gli Shortcuts della tastiera:

      Possiamo sostituire le scorciatoie da tastiera di GIMP con quelle di Photoshop semplicemente sostituendo un file di configurazione.
      Per ottenere le scorciatoie da tastiera di Photoshop su GIMP scaricare questo file: ps-menurc e rinominarlo in menurc.

      Applicare la modifica in Mac OS X  

      Nelle versioni più recenti di Mac OS X, di default, non è possibile visualizzare i file nascosti.
      1. Rendiamo la cartella ~/Library visibile:
      2. Da terminale: chflags nohidden ~ / Library per rendere la cartella Library visibile           
      3. Andare a ~ / Library / Application Support / GIMP / 2.8 / e rinominare il file "menurc" a "menurc-old"      
      4. Rinominare il file ps-menurc scaricato in "menurc" e spostarlo in ~ / Library / Application Support / GIMP / 2.8 /      
      5. Riavviare GIMP in modo che le modifiche abbiano effetto
      Controllare le nuove impostazioni da GIMP / tasti scorciatoia:

      Configurare shortcut GIMP

      Quì di seguito un elenco delle principali scorciatoie da tastiera di Photoshop e le relative corrispondenze in GIMP:

      File
      PHOTOSHOPSHORTCUTGIMP
      NewCtrl+nNew
      OpenCtrl+oOpen
      CloseCtrl+wClose
      SaveCtrl+sSave
      Save asShift+Ctrl+sSave as
      RevertF12Revert
      PrintCtrl+pPrint
      ExitCtrl+qQuit
      Edit
      PHOTOSHOPSHORTCUTGIMP
      Undo/Redo (1 level)Ctrl+zUndo (Redo is Shift+Ctrl+z)
      CutCtrl+xCut
      CopyCtrl+cCopy
      PasteCtrl+vPaste
      Paste IntoShift+Ctrl+vPaste Into
      Fill with FG colorAlt+BackspaceFill with FG color
      Fill with BG colorControl+BackspaceFill with BG color
      Image/Colors
      PHOTOSHOPSHORTCUTGIMP
      LevelsCtrl+lLevels
      Auto ContrastShift+Ctrl+Alt+lStretch Contrast (same?)
      CurvesCtrl+mCurves
      Color BalanceCtrl+bColor Balance
      Hue/SaturationCtrl+uHue-Saturation
      DesaturateShift+Ctrl+uDesaturate
      InvertCtrl+iInvert
      Default ColorsdDefault Colors
      Switch ColorsxSwitch Colors
      Layer
      PHOTOSHOPSHORTCUTGIMP
      New LayerShift+Ctrl+nNew Layer
      Layer via CopyCtrl+jDuplicate Layer
      Bring (layer) to FrontShift+Ctrl+]Layer to Top
      Send (layer) to BackShift+Ctrl+[Layer to Bottom
      Bring (layer) ForwardCtrl+]Raise Layer
      Send (layer) BackwardCtrl+[Lower Layer
      Select Top LayerShift+Alt+]Select Top Layer
      Select Bottom LayerShift+Alt+[Select Bottom Layer
      Select One Layer ForwardAlt+]Select Previous Layer
      Select One Layer BackwardAlt+[Select Next Layer
      Merge DownCtrl+eMerge Down
      Merge VisibleShift+Ctrl+eMerge Visible
      Preserve Transparency/Keep Transparency
      Cycle Modes ForwardsShift+=Next Layer Mode
      Cycle Modes BackwardsShift+-Previous Layer Mode
      Select
      PHOTOSHOPSHORTCUTGIMP
      Select AllCtrl+aSelect All
      DeselectCtrl+dSelect None
      InverseShift+Ctrl+iInvert
      FeatherCtrl+Alt+dFeather
      View
      PHOTOSHOPSHORTCUTGIMP
      Zoom InCtrl+=Zoom In
      Zoom OutCtrl+-Zoom Out
      Fit on ScreenCtrl+0Zoom to Fit Window
      Actual PixelsCtrl+Alt+0Zoom 1:1
      Show/Hide ExtrasCtrl+hToggle Show Selection (close enough?)
      Show/Hide GuidesCtrl+'Toggle Show Guides
      Show/Hide GridCtrl+Alt+'Toggle Show Grid
      Show/Hide RulersCtrl+rToggle Show Rulers
      SnapCtrl+;Snap to Guides
      Scroll View UpPage UpScroll Page Up
      Scroll View DownPage DownScroll Page Down
      Scroll View LeftCtrl+Page UpScroll Page Left
      Scroll View RightCtrl+Page DownScroll Page Right
      Window/Dialogs
      PHOTOSHOPSHORTCUTGIMP
      ?F5Tools Dialog
      Color TabF6Colors Dialog
      Layers TabF7Layers Dialog
      Info TabF8Image Information
      Tools
      PHOTOSHOPSHORTCUTGIMP
      Rectangular Marquee ToolmRect Select Tool
      Elliptical Marquee ToolShift+mEllipse Select Tool
      *This is a toggle between 'Elliptical Marquee Tool' and 'Rectangular Marquee Tool' in Photoshop
      Move ToolvMove Tool
      Lasso ToollFree Select Tool
      Magic Wand ToolwFuzzy Select Tool
      Crop ToolcCrop & Resize Tool
      Airbrush TooljAirbrush Tool
      Paintbrush ToolbPaintbrush Tool
      Clone Stamp ToolsClone Stamp Tool
      Eraser TooleEraser Tool
      Gradient ToolgBlend Tool
      Paint Bucket ToolShift+gBucket Fill Tool
      *This is a toggle between 'Paint Bucket Tool' and 'Gradient Tool' in Photoshop
      Blur ToolrConvolve Tool
      Dodge TooloDodgeBurn Tool
      Type TooltText Tool
      Pen ToolpBezier Select Tool
      Eye Dropper TooliColor Picker Tool
      Zoom ToolzMagnify Tool
      Previous Brush,Previous Brush
      Next Brush.Next Brush
      First BrushShift+<First Brush
      Last BrushShift+>Last Brush
      Decrease Brush Size[Decrease Brush Size
      Increase Brush Size]Increase Brush Size
      Decrease Brush Hardness{Decrease Brush Hardness
      Increase Brush Hardness}Increase Brush Hardness
      Help
      PHOTOSHOPSHORTCUTGIMP
      HelpF1Help
      Context HelpShift+F1Context Help
      Misc.
      PHOTOSHOPSHORTCUTGIMP
      Last FilterCtrl+fRepeat Last Filter
      ?Shift+Ctrl+fReshow Last Filter
      PreferencesCtrl+kPreferences
      LiquifyShift+Ctrl+xIWarp (close enough?)
      Toggle Quick MaskqToggle Quick Mask

      mercoledì 1 aprile 2015

      Fra inaccessibilità architettoniche, tecnologiche e mentali

      Torno a parlare di accessibilità e di disabilità, condivido questa storia con voi, storia che ha avuto la meritata visibilità nelle cronache locali prima, nazionali ora.
      I protagonisti sono i bambini delle scuole elementari di un piccolo paesino calabrese che decidono di rinunciare alla gita (la tanta attesa festa) per abbracciare Gabriele, un bimbo disabile, che sul pullman non ci può salire - nonostante la preside e le insegnanti lo avessero richiesto espressamente alla società di autoservizi – il pullman, indovinate un po’, non era provvisto della pedana per far salire la carrozzina di Gabriele.
      Che dignità questi bambini, quanta speranza e fiducia ci danno le nuove generazioni.
      “Se non parte Gabriele non parto neanche io”. “Neanche io….. neanche io……. Neanche io….”.
      Immagino proprio l’abbraccio di quella piccola comunità di bambini a Gabriele e alla sua famiglia, che probabilmente di pesci in faccia ne avrà già presi tanti fra inaccessibilità architettoniche, tecnologiche e mentali.
      Che grande lezione! Ma non manca l’autorevole commentatore che sfodera i suoi neologismi: benaltrismo, buonismo… che l’autorevole commentatore stia zitto.


      http://www.chefuturo.it/2015/05/labuonascuola-di-quei-bimbi-che-hanno-detto-tutti-o-nessuno-e-rinunciato-alla-gita/

      Seguimi tramite Email

      Twitter