Politecnico di Milano - Facoltà del design - Materiali per gli studenti del laboratorio di computer grafica C2

Strumenti per la grafica 2D sul Web (HTML)

Aggiornato: 18 febbraio 2006

Il taglio del corso è essenzialmente progettuale; questo aspetto viene affrontato nelle lezioni e negli incontri. Questa pagina fornisce invece alcune risorse di natura tecnica, relativamente agli strumenti utilizzati.

Tutorial su alcuni fondamenti della computergrafica (dott. Michela Bertazzini)

• Tutorial 1. Grafica vettoriale e grafica raster [PDF]
• Tutorial 2. Il colore [PDF]
• Tutorial 3. Compressione e formati [PDF]

Appunti di HTML (prof. Giovanni Gigante)

FAQ

• Risposte a domande frequenti su HTML e VRML

Altri tutorial reperibili in Rete

• Tutorial HTML n.1 di Dave Raggett
  Traduzione italiana del primo di tre tutorial sull'HTML, scritto da uno dei padri del linguaggio. Il primo tutorial ("Introduzione all'HTML") riguarda la struttura del documento HTML, alcuni modi per impaginare il testo, collegamenti, liste puntate e numerate.
• Tutorial HTML n.2 di Dave Raggett
  Il secondo tutorial aggiunge altri modi per impaginare il testo, entità e caratteri speciali, tabelle, mappe di immagine, e un po' di javascript per fare i rollover.
• Tutorial HTML n.3 di Dave Raggett
  Nel terzo tutorial si introducono i fogli di stile: un metodo moderno per specificare tutti i dettagli grafici della pagina. Si parla poi modi tradizionali equivalenti di ottenere una parte di questi effetti (colore e carattere dei testi).
• These three tutorials are also available in english (probably more suitable for foreign students): first, second, third

Strumenti utili

• Due carte dei colori HTML. La versione in decimale (0-255) è più intuitiva e funziona meglio se si è abituati con Photoshop, mentre quella in esadecimale (00-FF) è più utile per lavorare in HTML. Queste carte mostrano solo i 216 colori "sicuri" per il web, ma ricordo che tutti i colori disponibili sono in realtà 16.777.216.
• Visibone Color Lab è un'altra comoda pagina web per consultare i colori HTML. Si possono affiancare fino a tre colori contemporaneamente, e vederne i valori RGB decimali ed esadecimali (attenzione: oltre a questi, la carta riporta anche un assurdo sistema di codici mnemonici di tre lettere che è assolutamente non-standard e va evitato)
• Una delle tante tabelle delle entità HTML consultabili sul Web

Documenti normativi

• HTML 4.0: italiano, english
• XHTML 1.0: italiano, english
• CSS: level 1, english; level 2, english.
  Questi sono gli standard ufficiali del World Wide Web Consortium; sono documenti molto pignoli e complessi. Non occorre impararli; ma li citiamo qui per le seguenti ragioni: a) è utile vedere che aspetto ha uno standard (e il tipo di precisione che è bene avere quando ci si occupa di queste cose); b) in caso di necessità, è comunque un manuale di riferimento completo e gratuito.
• Un esempio di foglio di stile standard: come i browser visualizzano gli elementi in assenza di altre indicazioni

Bibliografia

Per le esercitazioni e l'esame è sufficiente quanto spiegato a lezione. Per chi vuole un testo di riferimento, qualunque testo sull'HTML va bene, purché recente. Qui sotto ne sono elencati un paio per chi è particolarmente interessato all'argomento, ma non è una scelta vincolante (entrambi i libri vanno molto oltre quanto avremo il tempo di a fare a lezione). Nessuno dei due è purtroppo ancora tradotto in italiano. I link portano al sito dell'editore, dove sono disponibili maggiori informazioni. Chi fosse interessato a comprare libri di questo tipo li può trovare da Hoepli, nelle librerie universitarie, oppure si possono ordinare via Internet (da Amazon o altrove).

Testo introduttivo, didascalico e destinato ai principianti:

Jennifer Niederst, Richard Koman
Learning web design: a beginner's guide to HTML, graphics and beyond
2 ed., 2003, 488 pp.
O'Reilly & Associates
ISBN 0596004842

Testo di consultazione, una guida sintetica ma completa a tutti gli aspetti tecnici del web design, senza finalità didattiche e più utile come efficace strumento di lavoro:

Jennifer Niederst
Web design in a nutshell
2ed., 2001, 640 pp.
O'Reilly & Associates
ISBN 0596001967

Manuale di consultazione sull'HTML:

Chuck Musciano, Bill Kennedy
HTML & XHTML: The Definitive Guide
5ed., 2002, 648 pp.
O' Reilly & Associates
ISBN 059600382X

Altri testi su argomenti specifici sono indicati all'interno dello dispense.

Software

Per creare documenti HTML si può usare un qualsiasi editor di testi, come il blocco note di Windows o il TextEdit di MacOS (quest'ultimo solo avendo l'accortezza di salvare in formato "solo testo" e non RTF).
E' comunque più comodo usare un editor più completo e versatile; per esempio: Notepad++ (Windows, freeware), Textpad (Windows, shareware), Programmer's notepad (Windows, freeware), Syn (Windows, freeware), Textwrangler (Mac OS X, freeware); per chi usa Linux o Unix va naturalmente bene qualunque editor come vi, emacs, joe, pico, ecc.
Una volta impadronitisi della conoscenza di base dell'HTML, si può passare a un sistema di authoring completo come Macromedia Dreamweaver, Adobe Golive, o altro equivalente (sconsigliato Microsoft Frontpage).
Per nessuna ragione usare Microsoft Word per creare documenti HTML!