Modifica di fogli di stile in un
editor basato su browser:
il progetto MarISAWiki Styles
Tesi di Laurea di:
Mariano Diasio
Relatore:
Prof. Fabio Vitali
Correlatore:
Dott. Angelo Di Iorio
Sommario
In questa presentazione parleremo di …
 Cosa sono i fogli di stile CSS
 L’ambiente collaborativo ISAWiki
 L’editorCSS MarISAWiki Styles
 Conclusioni e futuri sviluppi
22 marzo 2005
MarISAWiki Styles - Mariano Diasio
2
Cascading Style Sheets (CSS)





Uno standard per specificare la rappresentazione visiva (CSS1) e sonora (CSS2 CSS2.1) di documenti (X)HTML.
Insieme di regole, incorporate o esterne al documento, che definiscono come il
browser deve visualizzare gli elementi della pagina.
Principio fondamentale dei CSS: separazione della struttura del documento dalla sua
rappresentazione grafica.
Nel 1994 la prima stesura di Cascading HTML StyleSheets ad opera di Håkon Wium
Lie.
Idea: linguaggio stilistico capace di consentire la configurazione
delle pagine web ad autore e utilizzatore
h1 {
font: 18px Helvetica;
color: purple;
background: acqua;
CSS Specification:
}
 CSS level 1 (W3C Rec. dic. 1996). Bert Bos, Håkon Wium Lie.



CSS level 2 (W3C Rec. mag. 1998). Bert Bos, Chris Lilley, Ian Jacobs, Håkon Wium Lie.
CSS level 2 revision 1 (W3C Rec. feb. 2004). Bert Bos, Tantek Çelik, Ian Hickson, Håkon
Wium Lie.
CSS level 3 ancora in fase di sviluppo.
22 marzo 2005
MarISAWiki Styles - Mariano Diasio
3
Il progetto ISAWiki
ISAWiki è…
 Un ambiente ipertestuale collaborativo realizzato su Web che
permette la condivisione e la modifica/creazione di pagine Web
durante la navigazione.
Caratteristiche di ISAWiki…
 Memorizzazione dei documenti mediante un meccanismo di
versionamento
 Monitoraggio della navigazione dell’utente
 Separazione tra layout e contenuto
 Conversione e visualizzazione dei documenti in diversi formati (Doc,
HTM, HTML, XML, Wiki, LaTeX)
 Possibilità di associare ad un documento layout diversi realizzati
con strumenti di uso comune
 Possibilità di modificare il contenuto dei documenti attraverso un
editor strutturato residente sul browser
22 marzo 2005
MarISAWiki Styles - Mariano Diasio
4
L’editorCSS MarISAWiki Styles
Motivazione…
 Mancanza di un meccanismo, all’interno di ISAWiki, in grado di
gestire la presentazione tipografica di pagine Web
Scopo finale…
 Realizzare un editor che permetta la creazione e/o modifica di fogli
di stile CSS durante la navigazione
Caratteristiche dell’editorCSS…
 Semplicità: la creazione non necessita della conoscenza del
linguaggio dei CSS ma il tutto avviene in modo grafico ed intuitivo,
manipolando oggetti e pulsanti tramite il mouse.
 Browser-based: è un’applicazione a se stante, non richiede l’utilizzo
di applicazioni aggiuntive ed opera direttamente nel browser.
 Strutturato: i tag gestiti e l’organizzazione dell’editor dipendono
strettamente dal formato dati generico.
22 marzo 2005
MarISAWiki Styles - Mariano Diasio
5
Il formato dati generico
 E’ il “cuore” di ISAWiki e il maggior vincolo sulla
struttura di MarISAWiki Styles. Rappresenta il
contenuto vero e proprio del documento.
Principio
Classi di Elementi
rigidi per struttura
e aperti per
etichetta
 L’editorCSS lavora sui soli tag HTML riconosciuti
come elementi di tipo blocco e di tipo inline
22 marzo 2005
MarISAWiki Styles - Mariano Diasio
6
Elementi Blocco e Inline
Blocco:
 Insieme di tutti gli elementi che iniziano e
terminano con un line-break.
 Tag di tipo blocco gestiti dall’editorCSS
MarISAWiki Styles:

blockquote, caption, h1, h2, h3, h4, h5, h6, li, p,
pre, sub, sup, td, th.
Inline:
 Insieme di tutti gli elementi posti all’interno di
un blocco e utilizzati per attribuire un
significato particolare ad una porzione limitata
di testo.
 Tag di tipo inline gestiti dall’editorCSS
MarISAWiki Styles:

a, span, b, i, em, strong.
Altri tag gestiti dall’editorCSS…

body
22 marzo 2005
MarISAWiki Styles - Mariano Diasio
7
Attivazione dell’editorCSS
MarISAWiki Styles (1)
Quando viene attivato…

In fase di editing direttamente dall’editor
ISAWiki
In quale situazione…

Editing di una pagina esistente

Creazione di una pagina Web
Cosa succede…

Trasferimento di tutti i fogli di stile interni in un
unico elemento contenitore <STYLE> all’interno
del documento

Recupero dei selettori di regola presenti
all’interno dell’elemento <STYLE>

Recupero di tutti i tag (X)HTML contenuti
all’interno del documento e riconosciuti dal
formato dati generico.

Recupero delle etichette degli attributi class
associate agli elementi menzionati nel punto
precedente

Creazione e recupero degli attributi id associati
agli elementi contenenti dichiarazioni di stile
locali (attributi inline style)

Proiezione delle informazioni recuperate nella
lista di selezione Selector Text
22 marzo 2005
MarISAWiki Styles - Mariano Diasio
8
Attivazione dell’editorCSS
MarISAWiki Styles (2)
Prima suddivisione…
 Predefined Tags: insieme dei tag predefiniti
(hn) e delle etichette definite dall’utente
 User Styles: selettori, tag e classi presenti nel
documento
 All Styles: insieme di tutti gli elementi presenti
e non all’interno del documento
Seconda suddivisione…
 Stili di blocco (colore nero)
 Stili inline (colore blu)
 Stili locali (colore verde)
La selezione di un elemento comporta l’immediata
apertura del pannello Stili CSS all’interno del quale
vengono definite le proprietà dei fogli di stile CSS.
22 marzo 2005
MarISAWiki Styles - Mariano Diasio
9
Funzionalità dell’editorCSS
L’editorCSS, tramite il pannello Stili CSS, permette di…
Recuperare le regole di stile associate al selettore selezionato
 Aggiungere e rimuovere attributi di stile per una delle seguenti
categorie:






Tipo CSS
Blocco di testo degli stili CSS
Elementi di pagina degli stili CSS
Bordo degli stili CSS
Elenco degli stili CSS
Posizione degli stili CSS
 Collegare le regole stilistiche appena modificate/create agli elementi
del documento e visualizzare il risultato ottenuto
Possibili tecniche di collegamento:
 inline style (stili locali)
 Embedding (fogli di stile incorporati)
 Eliminare una determinata regola di stile.
22 marzo 2005
MarISAWiki Styles - Mariano Diasio
10
Esempio di definizione degli
attributi di stile
22 marzo 2005
MarISAWiki Styles - Mariano Diasio
11
Conclusioni e Sviluppi Futuri
Punto di partenza…
 Possibilità di modificare direttamente dal browser parti di contenuto dei
documenti della rete (editor ISAWiki).
Punto di arrivo…
 Incremento delle funzionalità dell’editor ISAWiki. Realizzazione di un
editor aggiuntivo capace di dare la possibilità all’utente di decidere la
formattazione e la resa grafica degli elementi dei documenti della rete
(editorCSS MarISAWikiStyles).
Futuri sviluppi…
 Realizzazione di un’unica toolbar (fusione dei due editor).
 Completo supporto dei CSS2, CSS2.1 in attesa dello standard CSS3.
 Upload di immagini, file audio e video.
 Gestione di fogli di stile esterni al documento.
 Possibilità di salvare i fogli di stile direttamente sul server.
 Realizzazione di un editorCSS simile per il browser Mozilla.
22 marzo 2005
MarISAWiki Styles - Mariano Diasio
12