G. Mecca – [email protected] – Università della Basilicata G. Mecca – [email protected] – Università della Basilicata
Tecnologie di Sviluppo per il Web
Cascading Style Sheets (CSS):
Introduzione
versione 2.0Questo lavoro è concesso in uso secondo i termini di una licenza Creative Commons
(vedi ultima pagina)
2G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Sommario
Storia di CSS Uno Studio di Caso La Filosofia di CSS Il Modulo LINK di XHTML
CSS >> Sommario
3G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Storia di CSS
Cascading Style Sheets (CSS)fogli di stile in cascata
Tecnologia per la presentazioneassocia elementi di grafica ad un documento
es: tipo di font, colori, spaziature ecc. Si applica a linguaggi di marcatura
HTML, XML, SGMLi cui dati sono organizzati in forma di albero
CSS >> Introduzione >> Storia di CSS
4G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Storia di CSS
Idea di separare struttura e presentazioneTim Berners Lee, NeXT browser, 1990documento HTMLfogli di stile con sintassi proprietaria
L’approccio di Mosaic (1993)niente fogli di stilepresentazione standard da parte del browsersemplici funzionalità per la grafica (colori)
CSS >> Introduzione >> Storia di CSS
5G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Storia di CSS
La guerra dei browserdomanda del mercatoelementi non standard solo per la grafica
es: b, font, multicol, spacer, blink, marquee… Utilizzo abituale di HTML
utilizzo improprio delle tabelletrucchi per la grafica es: null.gifscarso rispetto per gli standard
CSS >> Introduzione >> Storia di CSS
6G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Uno Studio di Caso
La pagina principale del sito di Tiscaligrafica ragionevolmente accattivante
Utilizzo estensivo delle tabelle65 tabelle, nidificazione estensiva
Utilizzo intenso di elementi di graficafont, b, colori
Spaziatura utilizzando “null.gif”<img src=“null.gif” width=“10” … >
CSS >> Introduzione >> Uno Studio di Caso
7G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Uno Studio di Caso
CSS >> Introduzione >> Uno Studio di Caso
tabella principale(3 colonne)
varie tabellesecondarie
spaziatura con “null.gif”
>> Tiscali.htm>> convalida
8G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Caratteristiche della Pagina
Codice HTML scorretto (HTML 4.0)370 errori segnalati dal validatore del W3C301 attributi alt mancanti
Dimensioni notevolicirca 93 Kbyte di codice HTML33 immaginivari script JavaScript148 Kbyte in totale (immagini)
CSS >> Introduzione >> Uno Studio di Caso
9G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
L’Impostazione Grafica
Caratteristica della paginautilizza funzionalità “elementari” di HTMLfornite sostanzialmente da tutti i browser
Visibile sui maggiori browserda Netscape 4 in poila grafica è essenzialmente la stessa
Filosofia “tipografica”l’autore stabilisce una grafica immutabile
CSS >> Introduzione >> Uno Studio di Caso
10G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Un Prodotto Tipografico Ipermediale
testo e graficacollegamenti
es: Adobe pdf Diviso in pagine
stampabili Posizionamento
assoluto sulla pagina
CSS >> Introduzione >> Uno Studio di Caso
esempio: brochuredi portatili Compaq
11G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Impostazione Tipografica: Problemi E’ impossibile vincolare la visualizzazione
preferenze dell’utentevariabilità del dispositivo
Utenteimpostazioni del browser (es: dim. caratteri)
Dispositivola pagina è inaccessibile sui browser
alternativi es: Lynx, browser per disp. mobil
CSS >> Introduzione >> Uno Studio di Caso
>> Tiscali.htm>> font 200%>> Lynx
12G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Uno Studio di Caso
In questo corso impostazione completamente diversacodice accessibile
TecnologieXHTML Basic oppure XHTML 1.0 StrictCSS Livello 1 con elementi di CSS Livello 2
Attenzionesi tratta di tecnologie molto potenti, capaci di
produrre gli stessi effetti grafici dell’approccio tradizionale
migliorando l’accessibilità
CSS >> Introduzione >> Uno Studio di Caso
13G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Uno Studio di Caso
La pagina principale di Tiscalila grafica è riproducibile fedelmente con
XHTML + CSS Riproduzione dello “Scheletro”
codice HTML conforme al DTD di XHTML Basic con fogli di stile CSS1
da 37 Kbyte a 10 Kbyte di codice HTMLda 23 tabelle ad un’unica tabella (eliminabile)accessibile da Lynx e vari browser palmari
CSS >> Introduzione >> Uno Studio di Caso
>> Tiscali-scheletro.htm>> Tiscali-rifatto.htm>> Lynx
14G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
La Filosofia di CSS
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, you’re screwed.’ ”
CSS >> Introduzione >> La Filosofia di CSS
15G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
La Filosofia di CSS
Idee principaliseparare contenuto e grafica (foglio di stile)rinunciare a vincolare totalmente la graficaconsentire all’utente di scegliere lo stile (combinare
stile dell’utente e dell’autore)consentire di associare stili diversi a dispositivi
(“media”) diversi “degrade gracefully”
rendere comunque accessibile il contenuto indipendentemente dall’utente
CSS >> Introduzione >> La Filosofia di CSS
16G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
La Filosofia di CSS
CSS Livello 1dicembre 1996principali caratteristiche di formattazione
(font, colori, spaziature, dimensioni ecc.)primi browser: IE3, NN4
CSS Livello 2maggio 1998estende CSS1 in varie direzioni (supporto a
dispositivi diversi, posizionamento assoluto)
CSS >> Introduzione >> La Filosofia di CSS
17G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Il Modulo LINK di XHTML
Visualizzazione standardfoglio di stile del browser
Per associare un foglio di stilemodulo LINK di XHTMLriferimento al foglio di stile nella testa
CSS >> Introduzione >> Il Modulo LINK
elemento attributo modello di contenuto
link rel, title, href, type …
EMPTY
>> esempioCss.html
18G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Il Modulo LINK di XHTML
Nell’esempio<link rel=“stylesheet” type=“text/css” href=“primo.css” title=“primo” />
E’ possibile specificare più di uno stile<link rel=“alternate stylesheet” type=“text/css” href=“stili/secondo.css” title=“secondo” />
<link rel=“alternate stylesheet” type=“text/css” href=“http://www.w3.org/css/examples.css” title=“stile del consorzio” />
CSS >> Introduzione >> Il Modulo LINK
19G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Il Modulo LINK di XHTML: Esempio
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "DTD-xhtmlbasic/xhtml-basic10.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it"><head><title>Pagina di Esempio</title><link rel=“stylesheet” type=“text/css”
href=“primo.css” /><link rel=“alternate stylesheet” type=“text/css”
href=“secondo.css” title=“secondo” /> </head><body> …</html>
CSS >> Introduzione >> Il Modulo LINK
20G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Riassumendo
Storia di CSS Uno Studio di Caso La Filosofia di CSS Il Modulo LINK di XHTML
CSS >> Sommario
21G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Termini della Licenza
Termini della Licenza
This work is licensed under the Creative Commons Attribution-ShareAlike License. To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/1.0/ or send a letter to Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA.
Questo lavoro viene concesso in uso secondo i termini della licenza “Attribution-ShareAlike” di Creative Commons. Per ottenere una copia della licenza, è possibile visitare http://creativecommons.org/licenses/by-sa/1.0/ oppure inviare una lettera all’indirizzo Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA.