Lab WEB DESIGN

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

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!

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!

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.

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!

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

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...

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.

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!

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!

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.

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".