G. Mecca – – Università della Basilicata Tecnologie di Sviluppo per il Web Cascading Style Sheets (CSS): Introduzione versione 2.0 Questo lavoro è concesso in uso secondo i termini di una licenza Creative Commons (vedi ultima pagina)

2 G. Mecca - Tecnologie di Sviluppo per il Web Sommario m Storia di CSS m Uno Studio di Caso m La Filosofia di CSS m Il Modulo LINK di XHTML CSS >> Sommario

3 G. Mecca - Tecnologie di Sviluppo per il Web Storia di CSS m Cascading Style Sheets (CSS) fogli di stile in cascata m Tecnologia per la presentazione associa elementi di grafica ad un documento es: tipo di font, colori, spaziature ecc. m Si applica a linguaggi di marcatura HTML, XML, SGML i cui dati sono organizzati in forma di albero CSS >> Introduzione >> Storia di CSS

4 G. Mecca - Tecnologie di Sviluppo per il Web Storia di CSS m Idea di separare struttura e presentazione Tim Berners Lee, NeXT browser, 1990 documento HTML fogli di stile con sintassi proprietaria m Lapproccio di Mosaic (1993) niente fogli di stile presentazione standard da parte del browser semplici funzionalità per la grafica (colori) CSS >> Introduzione >> Storia di CSS

5 G. Mecca - Tecnologie di Sviluppo per il Web Storia di CSS m La guerra dei browser domanda del mercato elementi non standard solo per la grafica es: b, font, multicol, spacer, blink, marquee… m Utilizzo abituale di HTML utilizzo improprio delle tabelle trucchi per la grafica es: null.gif scarso rispetto per gli standard CSS >> Introduzione >> Storia di CSS

6 G. Mecca - Tecnologie di Sviluppo per il Web Uno Studio di Caso m La pagina principale del sito di Tiscali grafica ragionevolmente accattivante m Utilizzo estensivo delle tabelle 65 tabelle, nidificazione estensiva m Utilizzo intenso di elementi di grafica font, b, colori m Spaziatura utilizzando null.gif CSS >> Introduzione >> Uno Studio di Caso

7 G. Mecca - Tecnologie di Sviluppo per il Web Uno Studio di Caso CSS >> Introduzione >> Uno Studio di Caso tabella principale (3 colonne) varie tabelle secondarie spaziatura con null.gif >> Tiscali.htm >> convalida

8 G. Mecca - Tecnologie di Sviluppo per il Web Caratteristiche della Pagina m Codice HTML scorretto (HTML 4.0) 370 errori segnalati dal validatore del W3C 301 attributi alt mancanti m Dimensioni notevoli circa 93 Kbyte di codice HTML 33 immagini vari script JavaScript 148 Kbyte in totale (immagini) CSS >> Introduzione >> Uno Studio di Caso

9 G. Mecca - Tecnologie di Sviluppo per il Web LImpostazione Grafica m Caratteristica della pagina utilizza funzionalità elementari di HTML fornite sostanzialmente da tutti i browser m Visibile sui maggiori browser da Netscape 4 in poi la grafica è essenzialmente la stessa m Filosofia tipografica lautore stabilisce una grafica immutabile CSS >> Introduzione >> Uno Studio di Caso

10 G. Mecca - Tecnologie di Sviluppo per il Web Un Prodotto Tipografico m Ipermediale testo e grafica collegamenti es: Adobe pdf m Diviso in pagine stampabili m Posizionamento assoluto sulla pagina CSS >> Introduzione >> Uno Studio di Caso esempio: brochure di portatili Compaq

11 G. Mecca - Tecnologie di Sviluppo per il Web Impostazione Tipografica: Problemi m E impossibile vincolare la visualizzazione preferenze dellutente variabilità del dispositivo m Utente impostazioni del browser (es: dim. caratteri) m Dispositivo la pagina è inaccessibile sui browser alternativi es: Lynx, browser per disp. mobil CSS >> Introduzione >> Uno Studio di Caso >> Tiscali.htm >> font 200% >> Lynx

12 G. Mecca - Tecnologie di Sviluppo per il Web Uno Studio di Caso m In questo corso impostazione completamente diversa codice accessibile m Tecnologie XHTML Basic oppure XHTML 1.0 Strict CSS Livello 1 con elementi di CSS Livello 2 m Attenzione si tratta di tecnologie molto potenti, capaci di produrre gli stessi effetti grafici dellapproccio tradizionale migliorando laccessibilità CSS >> Introduzione >> Uno Studio di Caso

13 G. Mecca - Tecnologie di Sviluppo per il Web Uno Studio di Caso m La pagina principale di Tiscali la grafica è riproducibile fedelmente con XHTML + CSS m Riproduzione dello Scheletro codice HTML conforme al DTD di XHTML Basic con fogli di stile CSS1 da 37 Kbyte a 10 Kbyte di codice HTML da 23 tabelle ad ununica tabella (eliminabile) accessibile da Lynx e vari browser palmari CSS >> Introduzione >> Uno Studio di Caso >> Tiscali-scheletro.htm >> Tiscali-rifatto.htm >> Lynx

14 G. Mecca - Tecnologie di Sviluppo per il Web La Filosofia di CSS m La frase di Marc Andreesen (1994) In fact, it has been a constant source of delight for me over the past year to get to continually tell hordes (literally) of people who want to – strap yourselves in, here it comes – control what their documents look like in ways that would be trivial in Tex, Microsoft Word and every other common text processing environment: Sorry, youre screwed. CSS >> Introduzione >> La Filosofia di CSS

15 G. Mecca - Tecnologie di Sviluppo per il Web La Filosofia di CSS m Idee principali separare contenuto e grafica (foglio di stile) rinunciare a vincolare totalmente la grafica consentire allutente di scegliere lo stile (combinare stile dellutente e dellautore) consentire di associare stili diversi a dispositivi (media) diversi m degrade gracefully rendere comunque accessibile il contenuto indipendentemente dallutente CSS >> Introduzione >> La Filosofia di CSS

16 G. Mecca - Tecnologie di Sviluppo per il Web La Filosofia di CSS m CSS Livello 1 dicembre 1996 principali caratteristiche di formattazione (font, colori, spaziature, dimensioni ecc.) primi browser: IE3, NN4 m CSS Livello 2 maggio 1998 estende CSS1 in varie direzioni (supporto a dispositivi diversi, posizionamento assoluto) CSS >> Introduzione >> La Filosofia di CSS

17 G. Mecca - Tecnologie di Sviluppo per il Web Il Modulo LINK di XHTML m Visualizzazione standard foglio di stile del browser m Per associare un foglio di stile modulo LINK di XHTML riferimento al foglio di stile nella testa CSS >> Introduzione >> Il Modulo LINK elementoattributomodello di contenuto linkrel, title, href, type … EMPTY >> esempioCss.html

18 G. Mecca - Tecnologie di Sviluppo per il Web Il Modulo LINK di XHTML m Nellesempio m E possibile specificare più di uno stile CSS >> Introduzione >> Il Modulo LINK

19 G. Mecca - Tecnologie di Sviluppo per il Web Il Modulo LINK di XHTML: Esempio <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "DTD-xhtmlbasic/xhtml-basic10.dtd"> Pagina di Esempio … CSS >> Introduzione >> Il Modulo LINK

20 G. Mecca - Tecnologie di Sviluppo per il Web Riassumendo m Storia di CSS m Uno Studio di Caso m La Filosofia di CSS m Il Modulo LINK di XHTML CSS >> Sommario

21 G. Mecca - Tecnologie di Sviluppo per il Web Termini della Licenza m This work is licensed under the Creative Commons Attribution- ShareAlike License. To view a copy of this license, visit or send a letter to Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA. m Questo lavoro viene concesso in uso secondo i termini della licenza Attribution-ShareAlike di Creative Commons. Per ottenere una copia della licenza, è possibile visitare oppure inviare una lettera allindirizzo Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA.