Passa ai contenuti principali

Web Design Mod. A a.a. 2013/2014

Lezione 1
Introduzione al Design Adattivo per diversi device; progettazzione di wireframe di riferimento ai contenuti direttamente in HTML/CSS; HTML5: Web Design e mark-up semantico; Responsive Design: Layout e compatibilità.
Lezione 2
Introduzione a jQuery, Inclusione di jQuery, jQuery syntax; Introduzione a jQueryUI.
Progettazione e realizzazione di un accordion grafico orizzontale con jQuery.
Lezione 3
jQueryUI: Introduzione ai widget; realizzazione di un accordion verticale (UI); utilizzo del themeroller, personalizzazioni.
jQuery Plugin: Struttura, collocazione, buone prassi, esempi: Colorbox: a jQuery lightbox, jQuery Zoom: a plugin to enlarge images on touch, click, or mouseover; jQuery Picture to add support for responsive images.
Lezione 4
CSS3: Nuovi selettori di attributo, pseudo classi; Web Font ed effetti tipografici; bordi e sfondi; effetti di trasformazione e animazione su box e immagini.
Introduzione ad Initializr per generare un template basato su HTML5 Boilerplate.

Esercitazione finale:
Scrivere un layout adattivo in HTML5/CSS3 per il catalogo presente su: http://www.museoaccessibile.it/gipsoteca/catalogo.html (prendere come riferimento un singolo artista o un piccolo museo) utilizzando:
  1. Colorbox: a jQuery lightbox;
  2. jQuery Zoom: a plugin to enlarge images on touch, click, or mouseover;
  3. jQueryUI: realizzazione di un accordion verticale (UI);
  4. Themeroller, personalizzazioni.

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…