Passa ai contenuti principali

Software libero a scuola, insisto!

Fonte: http://dida.orizzontescuola.it/news/10-motivi-usare-open-source-scuola Perché insistere:
1. Software libero è consapevolezza.
Ci si lamenta spesso di quanto i ragazzi oggi usino App, Rete, tablet senza avere la minima cognizione degli strumenti che sono diventati parte integrante delle loro giornate. L'open source aiuta a comprendere come nascono i software, come si evolvono e quanto siano necessarie conoscenze, competenze, impegno per usarli al meglio.
2. Software libero è libertà digitale.
Non possiamo permetterci di crescere i ragazzi nutrendoli con programmi e app che danno assuefazione e che non consentono loro una vera scelta dello strumento migliore da usare. Tanto per fare un esempio: se i ragazzi in classe useranno solo Microsoft Office cresceranno pensando che Excel sia sinonimo di foglio di calcolo e non sapranno utilizzare altro che quello.
3. Software libero è collaborazione.
Spiegare come nasce un progetto open source significa far comprendere l'import…

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.


Post popolari in questo blog

Software libero a scuola, insisto!

Fonte: http://dida.orizzontescuola.it/news/10-motivi-usare-open-source-scuola Perché insistere:
1. Software libero è consapevolezza.
Ci si lamenta spesso di quanto i ragazzi oggi usino App, Rete, tablet senza avere la minima cognizione degli strumenti che sono diventati parte integrante delle loro giornate. L'open source aiuta a comprendere come nascono i software, come si evolvono e quanto siano necessarie conoscenze, competenze, impegno per usarli al meglio.
2. Software libero è libertà digitale.
Non possiamo permetterci di crescere i ragazzi nutrendoli con programmi e app che danno assuefazione e che non consentono loro una vera scelta dello strumento migliore da usare. Tanto per fare un esempio: se i ragazzi in classe useranno solo Microsoft Office cresceranno pensando che Excel sia sinonimo di foglio di calcolo e non sapranno utilizzare altro che quello.
3. Software libero è collaborazione.
Spiegare come nasce un progetto open source significa far comprendere l'import…

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.

Scrivo 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: 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:

Da…

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 programmazionelato 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: 
Production version - questa versione è per il vostro sito web di…