Lab WEB DESIGN

Trasloco

2007-03-06T11:21:00.000+01:00

Oggi si ritorna a scuola e per il nuovo anno traslochiamo su wordpress!
labwebdesign.wordpress.com

Nielsen 2.0

2006-11-13T10:02:00.000+01:00

A volte la distrazione... Tanto si è parlato della vetustà del buon Web Usability (correva il 2000) che ci siamo persi la nuova edizione. Addirittura già tradotta in italiano da apogeo. Ho dato un rapido sguardo e l'impressione è positiva. Se ne riparlerà. Intanto uno sguardo al titolo, che in Italia cambia e ammicca a chi ha sentito parlare di web 2.0.

La termografia della pagina

2006-11-09T12:22:00.000+01:00

Date un occhio a questa applicazione. Un vero strumento di indagine per la diagnosi dell'usabilità. Anzi per un'analisi dell'uso, di ciò che gli utenti veri fanno o non fanno, ovvero dell'unica cosa che ha senso misurare. Qualcuno la vuol provare? per un mese è gratis. fateci sapere.

Tetris

2006-10-31T19:12:00.000+01:00

Se ci avete giocato almeno una volta, non potete non guardare questo documentario!

Cos'e' il web 2.0?

2006-10-08T10:46:00.000+02:00

Due riferimenti per iniziare a capirci qualcosa:

Le slide di Leandro Agrò presentate alla prima conferenza italiana dedicata al web2.0 a Torino.

Se volete visualizzare le slide in modalita' fullscreen da SlideShare fate click su full.

La mini guida di Robin Good

La mamma delle icone

2006-10-04T11:59:00.000+02:00

Susan Kare è la signora che ha disegnato alcune tra le più importanti icone della storia delle interfacce grafiche. Ha lavorato per Apple dal 1983 al 1986; in tre anni dedicati alla progettazione del nuovo Mac ha realizzato icone e font che avrebbero costituito il nuovo standard delle interfacce. La freccetta, la manina, la bomba di mac, le cartelle. In seguito è passata a Microsoft dove ha realizzato le icone di Windows 3.0. Pietre miliari che hanno avuto un ruolo decisivo nella diffusione del personal computer, nel farcelo accettare come comodo, non aggressivo, familiare: personale.
Il sito di Susan Kare merita una visita attenta; in particolare va sfogliato il portfolio.

Meglio ritornate a lavoro con un po’ di buona musica!

2006-08-29T11:55:00.000+02:00

Pandora e’ un sito di free music-streaming che permette di scoprire nuova musica in base ai propri gusti.
Basta scrivere il nome del gruppo o della canzone preferita e Pandora genera automaticamente una stazione che manda in steaming canzoni simili a quella richiesta.
Buon ascolto!

il motore dell'Accessibilità

2006-07-23T17:02:00.000+02:00

Google ha iniziato la sperimentazione di Accessible Search, un motore di ricerca che fornisce risultati ordinati in base ai criteri di accessibilità.
I siti vengono indicizzati a seconda della loro struttura HTML, basandosi sui principi di accessibilità riconosciuti dal W3C e sulla possibilità di esplorarne i contenuti col solo uso della tastiera. La regola è semplice: le pagine più accessibili hanno più rilevanza e svettano in testa ai risultati di ricerca, quelle più "complicate" slittano negli ultimi posti.

2006-07-12T10:35:00.000+02:00

Mappe e fogli di stile

2006-07-08T18:37:00.000+02:00

Cercando in giro una soluzione accessibile ad un problema che ho con un sito mi sono imbattuta in Deadends un sito su una fiction dell'orrore tutto realizzato in XHTML e CSS da Stuart Robertson.
Su A List Apart Stuart ha pubblicato un articolo Night of the Image Map
in cui spiega come usare la tecnica delle immagini mappate con i fogli di stile (su Gdesign e’ disponibile la traduzione dell’articolo in italiano).
Io intanto continuo a cercare la soluzione al mio problema!

An Inconvenient Thuth

2006-07-05T20:22:00.001+02:00

Buona visione!

Aspettando il 4 luglio...

2006-06-26T12:30:00.000+02:00

io vado un pochino in vacanza!
Questo vuol dire niente pc e niente internet per qualche giorno... ne consegue che da mercoledi a lunedi sera non potro' leggere le vostre mail e visualizzare i vostri siti!
Ci vediamo il 4 luglio!

Tutorial CSS

2006-06-23T18:45:00.000+02:00

Per quanti mi hanno ripetutamente chiesto una guida ai CSS vi segnalo che sul sito dell'Osservatorio sulla comunicazione potete trovare la traduzione ufficiale, a cura di Pasquale Popolizio, del documento del W3C "CSS tutorial starting with HTML + CSS".
Ovviamente se il documento in questione vi sembra roba da principianti andate al secondo capitolo (in inglese... of course!) oppure consultate tutti i vari riferimenti preserti nulla pagina learning CSS.

Pausa creativa

2006-06-05T18:20:00.000+02:00

Concedevi una pausa, abbandonate div e css e fate un giro su TypoGenerator!
E'un generatore random di 'typoPosters' (poster creato da un mix di immagini e lettere/parole). Dopo che avete digitato il vostro testo typoGenerator cerca immagini con Google Images in base al testo inserito e crea un background dalle immagini trovate usando in modo random vari effetti, dopo aggiunge il testo usando sempre effetti random.
Io ho impiegato 5 minuti per creare l'immagine a lato... giusto il tempo di una pausa!

Jakob Nielsen Alertbox

2006-05-22T10:39:00.000+02:00

Dal 1995 Jakob Nielsen dispensa consigli sulle colonne degli Alertbox del sito suo sito www.useit.com
Sono sicura che tutti voi siete suoi assidui lettori, ma voglio segnalarvi alcuni degli articoli più letti:

primo su tutti La Top Ten degli errori nel Web Design, che conta 2 milioni di lettori e 50 milioni di pagine viste - Top Ten Mistakes in Web Design.

gli errori del 2005 - Top Ten Web Design Mistakes of 2005

le 10 linee guida sul design delle homepage più violate - The Ten Most Violated Homepage Design Guidelines

BUONA LETTURA!

Date esami

2006-05-21T11:36:00.000+02:00

Ci siamo! Abbiamo finalmente le date degli esami:

- 13 giugno ore 9
- 4 luglio ore 9

Mi raccomando, niente ansie e niente panico...

Ricevimento

2006-05-14T15:52:00.000+02:00

Per quanti di voi hanno bisogno di parlare con me "dal vivo" vi comunico che giovedi 18 maggio saro' in facolta' tutta la mattina...
Ci vediamo nella stanza del prof. Rebeggiani dalle 10 in poi!

Una promessa e' sempre una promessa!

2006-05-13T16:06:00.000+02:00

Durante il seminario sull'accessibilita' avevo promesso ad alcuni di voi di indicarvi il link alla bozza del libro di Roberto Polillo... dopo soli 9 giorni ecco a voi i riferimenti:
R.Polillo, "Il progetto di un sito Web - una road-map in sei fasi per produrre un sito di qualità", che descrive in dettaglio le fasi del processo di sviluppo di un sito web. (bozza del 13.1.2006 PDF 2,455 Mb)
NB: la versione finale sarà pubblicata a settembre 2006 da Apogeo.

Promemoria

2006-04-26T17:25:00.000+02:00

Ricordo a tutti che il libro di testo a cui far riferimento per l'esame e':
"Web usability" di Jakob Nielsen, edito da Apogeo

CSS esterno

2006-04-18T18:31:00.000+02:00

Avevo lasciato in sospeso con alcuni di voi la questione sul come fare ad usare un solo foglio di stile esterno per tutti i vostri file...(tutta colpa della pastiera!)

Se avete creato un file HTML che ha al suo interno qualcosa del genere:

<style type="text/css">
html, body {
 height: 100%;
 width: 100%;
 margin: 0px;
 padding: 0px;
 font-size: 100%;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}
#contenitore {
 width: 100%;
 background-color: #CCCCCC;
...

vuol dire che il vostro CSS e' interno al file.
Ecco cosa fare per renderlo esterno e riutilizzarlo per l'intero sito... (file swf 2.44MB)
Buon Lavoro!

Liste e menu

2006-04-12T12:06:00.000+02:00

A gran richiesa ecco i siti che abbiamo visto in aula ieri:

Free Menu Designs

Listamatic

Liste da HTML.it

Mi raccomando... usateli con prudenza!

Favicon

2006-04-11T21:05:00.000+02:00

Su Gdesign.it ho trovato un articolo molto semplice che spiega come creare una favicon (icona associare ad un collegamento inserito nei "Preferiti")... per la gioia di Giulio&Co.

Tips and tricks

2006-04-09T20:06:00.000+02:00

Qualcuno di voi mi ha chiesto come si fa a fare seguire il testo intorno ad un'immagine (praticamente quello che succede in questo post) penso che la cosa possa interessare "quasi" tutti quindi provo a spiegarlo brevemente.
Come in tutte le cose la soluzione non e' mai unica... la piu' semplice (a mio avviso) e' quella di definisce un selettore di tipo class (non advanced) di nome image per il posizionamento dell'immagine in cui ad esempio si attribuisce un float a sinistra e un margine di 3 pixel:
.image {float: left; margin: 3px;}
Vi ricordo che la sintassi per definire un selettore CSS da usare come nome di una classe richiede l'uso di un "." (punto) immediatamente prima di tale nome. Al contrario, la sintassi per la definizione di selettori di tipo id (advanced) richiede l'uso di un "#" (cancelletto, sharp), al posto del "." .
Classe che poi andra' attribuita al tag immagine in questo modo:
<img src="immagine.gif" alt="descrizione immagine" class="image"/>
Buon divertimento!

Layout fluido a 3 colonne

2006-04-09T13:42:00.000+02:00

Ecco qui anche il terzo layout sempre in HTML... piano piano ce la faro' ad inserire tutto il materiale didattico...

Layout a due colonne

2006-04-08T10:14:00.000+02:00

Sono riuscita a realizzare un layout a due colonne fluido funzionante... Giovedi' non avevo attribuito il margine alla colonna di destra... Il file e' HTML spero non abbiate difficolta' a comprendere il codice del CSS (ho aggiunto anche dei commenti) in caso contrario inviatemi un segnale di fumo...

Layout a colonna singola

2006-04-07T12:30:00.000+02:00

FINALMENTE!
Ecco a voi come realizzare un layout a colonna singola fluido...
Potete scegliere tra un tutorial step by step in formato SWF un pochino pesantuccio (4.7 MB), oppure, per se il codice non vi fa piu' paura un semplice file HTML.

News di servizio

2006-04-07T08:47:00.000+02:00

Causa Election Day la lezione di lun e' spostata a martedi' 11 aprile...
Appuntamento alle 13 in cortile per procurarci cibo e andare alla conquista di un'aula!

Primo passo per creare un sito

2006-04-05T11:45:00.000+02:00

Ecco un piccolo riepilogo (flash) su come si definisce in sito con Dreamweaver 8 e come dare un titolo ad una pagina html.
Spero di riuscire ad inserire a breve tutto il resto...
Abbiate pazienza e fiducia!

GUI

2006-04-04T20:25:00.000+02:00

Per chi non lo conoscesse vi consiglio di fare un giro su GUIdebook dove potete guardare molti screenshots di GUI e molti altri materiali relativi alle interfacce.

Falso positivo

2006-04-04T10:35:00.000+02:00

Mi scuso per il non aggiornamento del Blog, but it isn't my fault!
Cito testualmente "I robot di prevenzione dello spam di Blogger hanno rilevato che il tuo blog mostra le caratteristiche di un blog di spam."
Che dire... Per loro stessa ammissione pare che "Il rilevamento dello spam automatizzato è intrinsecamente incoerente".

Esercitazione n.2

2006-03-23T11:43:00.000+01:00

Premessa:
La fase più importante della progettazione di un sito web è l'organizzazione delle informazioni.

1. Determinare il contenuto del proprio sito.
2. Definire gli obiettivi del progetto (messaggio e scopo)
3. Specificare l’utenza
4. Produrre un flowchart della struttura (creare prospetti e suddividere le informazioni in sezioni e sottosezioni, e pensare alle interrelazioni tra le sezioni create)

Esercitazione n.1

2006-03-20T10:41:00.000+01:00

Creare con Macromedia Fireworks un template di colori di base per la realizzazione del progetto finale (colore di background, colore in primo piano, colore del testo, colore dei link, etc.) tenendo in considerazione i colori websafe, colori complementari e i contrasti di colore.

Lorem ipsum

2006-03-18T18:14:00.000+01:00

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi pellentesque pulvinar neque. Fusce pellentesque facilisis enim. Nulla et erat. Nulla facilisi. Curabitur lectus odio, semper eget, porttitor vitae, ullamcorper a, sapien. Nullam a est ac ante tempus gravida. Nullam pellentesque nunc eu mi. Donec tempus tempor nunc. Praesent non massa nec ipsum interdum vulputate. Sed porta, est non volutpat ornare, risus odio ullamcorper nisi, vitae feugiat velit lorem ut odio. Proin orci lacus, mattis sed, rutrum vitae, fermentum quis, felis. Etiam vestibulum interdum nisi. Integer congue dui sit amet urna. In vel ante. Nulla vestibulum auctor metus. Donec nisi nisl, ultrices vel, ultrices at, nonummy et, sem. Phasellus pellentesque mi at justo consequat aliquam. Proin hendrerit sodales nulla.
Di cosa si tratta...
Cosa ho usato...

Approfondimenti alla prima lezione

2006-03-07T14:24:00.000+01:00

LIBRI:
G. Dorfles, Introduzione al disegno industriale, Torino, Einaudi.
T. Maldonado, Disegno Industriale: un riesame, Torino, Einaudi.
B. Munari, Design e comunicazione visiva, Bari-Roma, Laterza.
D. Norman, La caffettiera del masochista, Firenze, Giunti.

Programma

2006-03-06T23:51:00.000+01:00

Laboratorio di Web Design 2005_06

Il laboratorio di Web Design è finalizzato allo studio, sviluppo ed analisi dei siti Web dal punto di vista grafico, ponendo particolare attenzione all'estetica, all'ottimizzazione delle immagini e all'usabilità.

Introduzione al corso
Cosa vuol dire “design” in relazione al Web
Elementi e principi base di design
La grafica per il Web
Immagini (Vettoriali vs. bitmaps)
Formati: png, gif, jpg
Ottimizzazione ed esportazione
I colori per il Web
Suddivisione Leggibilità e psicologia colori web safe
La tipografia per il web
Variabili di un progetto web
I browser
La risoluzione dello schermo
La velocità di connessione
Cross-Browser e Cross-Platform Design
Il progetto web
L'organizzazione delle informazioni e i modelli informativi
Graphic User Interface
Cos'e’ un'interfaccia
Page layout e risoluzione
Barre di navigazione
Rollovers
Usabilità
Introduzione all’HTML
Introduzione ai fogli di stile