Modifica di fogli di stile in un editor basato su browser: il progetto MarISAWiki Styles Tesi di Laurea di: Relatore: Mariano Diasio Prof. Fabio Vitali

Modifica di fogli di stile Modifica di fogli di stile in un editor basato su in un editor basato su

browser:browser:il progetto il progetto MarISAWiki MarISAWiki

StylesStyles

Tesi di Laurea di:Tesi di Laurea di: Relatore:Relatore:Mariano DiasioMariano Diasio Prof. Fabio Vitali Prof. Fabio Vitali

Correlatore:Correlatore: Dott. Angelo Di IorioDott. Angelo Di Iorio

22 marzo 200522 marzo 2005 MarISAWiki Styles - Mariano DiasioMarISAWiki Styles - Mariano Diasio 22

SommarioSommario

In questa presentazione parleremo di …In questa presentazione parleremo di …

Cosa sono i fogli di stile CSSCosa sono i fogli di stile CSS L’ambiente collaborativo ISAWikiL’ambiente collaborativo ISAWiki L’editorCSS MarISAWiki StylesL’editorCSS MarISAWiki Styles Conclusioni e futuri sviluppiConclusioni e futuri sviluppi


Cascading Style Sheets (CSS)Cascading Style Sheets (CSS) Uno standard per specificare la rappresentazione Uno standard per specificare la rappresentazione visivavisiva (CSS1) e (CSS1) e sonorasonora (CSS2 - (CSS2 -

CSS2.1) di documenti (X)HTML.CSS2.1) di documenti (X)HTML. Insieme di regole, incorporate o esterne al documento, che definiscono come il Insieme di regole, incorporate o esterne al documento, che definiscono come il

browser deve visualizzare gli elementi della pagina.browser deve visualizzare gli elementi della pagina. Principio fondamentale dei CSS: separazione della struttura del documento dalla sua Principio fondamentale dei CSS: separazione della struttura del documento dalla sua

rappresentazione grafica.rappresentazione grafica. Nel 1994 la prima stesura di Cascading HTML StyleSheets ad opera di HNel 1994 la prima stesura di Cascading HTML StyleSheets ad opera di Håkon Wium åkon Wium

Lie. Lie. Idea: Idea: linguaggio stilistico capace di consentire la configurazionelinguaggio stilistico capace di consentire la configurazione delle pagine web ad autore e utilizzatoredelle pagine web ad autore e utilizzatore

CSS Specification:CSS Specification: CSS level 1CSS 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.

h1 { font: 18px Helvetica; color: purple; background: acqua;}


Il progetto ISAWikiIl progetto ISAWiki

ISAWiki è…ISAWiki è… Un ambiente ipertestuale Un ambiente ipertestuale collaborativocollaborativo realizzato su Web che realizzato su Web che

permette la condivisione e la modifica/creazione di pagine Web permette la condivisione e la modifica/creazione di pagine Web durante la navigazione.durante la navigazione.

Caratteristiche di ISAWiki…Caratteristiche di ISAWiki… Memorizzazione dei documenti mediante un meccanismo di Memorizzazione dei documenti mediante un meccanismo di

versionamentoversionamento Monitoraggio della navigazione dell’utenteMonitoraggio della navigazione dell’utente Separazione tra layout e contenutoSeparazione tra layout e contenuto Conversione e visualizzazione dei documenti in diversi formati (Doc, Conversione e visualizzazione dei documenti in diversi formati (Doc,

HTM, HTML, XML, Wiki, LaTeX)HTM, HTML, XML, Wiki, LaTeX) Possibilità di associare ad un documento layout diversi realizzati Possibilità di associare ad un documento layout diversi realizzati

con strumenti di uso comunecon strumenti di uso comune Possibilità di modificare il contenuto dei documenti attraverso un Possibilità di modificare il contenuto dei documenti attraverso un

editor strutturato residente sul browsereditor strutturato residente sul browser


L’editorCSS MarISAWiki StylesL’editorCSS MarISAWiki Styles

Motivazione…Motivazione… Mancanza di un meccanismo, all’interno di ISAWiki, in grado di Mancanza di un meccanismo, all’interno di ISAWiki, in grado di

gestire la presentazione tipografica di pagine Webgestire la presentazione tipografica di pagine WebScopo finale…Scopo finale… Realizzare un editor che permetta la creazione e/o modifica di fogli Realizzare un editor che permetta la creazione e/o modifica di fogli

di stile CSS durante la navigazionedi stile CSS durante la navigazioneCaratteristiche dell’editorCSS…Caratteristiche dell’editorCSS… SemplicitàSemplicità: la creazione non necessita della conoscenza del : la creazione non necessita della conoscenza del

linguaggio dei CSS ma il tutto avviene in modo grafico ed intuitivo, linguaggio dei CSS ma il tutto avviene in modo grafico ed intuitivo, manipolando oggetti e pulsanti tramite il mouse.manipolando oggetti e pulsanti tramite il mouse.

Browser-basedBrowser-based: è un’applicazione a se stante, non richiede l’utilizzo : è un’applicazione a se stante, non richiede l’utilizzo di applicazioni aggiuntive ed opera direttamente nel browser.di applicazioni aggiuntive ed opera direttamente nel browser.

StrutturatoStrutturato: i tag gestiti e l’organizzazione dell’editor dipendono : i tag gestiti e l’organizzazione dell’editor dipendono strettamente dal formato dati generico. strettamente dal formato dati generico.


Il formato dati genericoIl formato dati generico

E’ il “cuore” di ISAWiki e il maggior vincolo sulla E’ il “cuore” di ISAWiki e il maggior vincolo sulla struttura di MarISAWiki Styles. Rappresenta il struttura di MarISAWiki Styles. Rappresenta il contenuto vero e proprio del documento. contenuto vero e proprio del documento.

Principio Principio

L’editorCSS lavora sui soli tag HTML riconosciuti L’editorCSS lavora sui soli tag HTML riconosciuti come elementi di tipocome elementi di tipo bloccoblocco e di tipo e di tipo inlineinline

Classi di Elementirigidi per strutturae aperti per etichetta


Elementi Blocco e InlineElementi Blocco e InlineBlocco:Blocco: Insieme di tutti gli elementi che iniziano e Insieme di tutti gli elementi che iniziano e

terminano con un line-break.terminano con un line-break. Tag di tipo blocco gestiti dall’editorCSS Tag di tipo blocco gestiti dall’editorCSS

MarISAWiki Styles:MarISAWiki Styles: blockquote, caption, h1, h2, h3, h4, h5, h6, li, p, blockquote, caption, h1, h2, h3, h4, h5, h6, li, p,

pre, sub, sup, td, thpre, sub, sup, td, th..

Inline:Inline: Insieme di tutti gli elementi posti all’interno di Insieme di tutti gli elementi posti all’interno di

un blocco e utilizzati per attribuire un un blocco e utilizzati per attribuire un significato particolare ad una porzione limitata significato particolare ad una porzione limitata di testo.di testo.

Tag di tipo inline gestiti dall’editorCSS Tag di tipo inline gestiti dall’editorCSS MarISAWiki Styles:MarISAWiki Styles: a, span, b, i, em, stronga, span, b, i, em, strong..

Altri tag gestiti dall’editorCSS…Altri tag gestiti dall’editorCSS… bodybody


Attivazione dell’editorCSS Attivazione dell’editorCSS MarISAWiki Styles (1)MarISAWiki Styles (1)

Quando viene attivato…Quando viene attivato… In fase di editing direttamente dall’editor In fase di editing direttamente dall’editor

ISAWikiISAWikiIn quale situazione…In quale situazione… Editing di una pagina esistenteEditing di una pagina esistente Creazione di una pagina WebCreazione di una pagina WebCosa succede…Cosa succede… Trasferimento di tutti i fogli di stile interni in un Trasferimento di tutti i fogli di stile interni in un

unico elemento contenitore <STYLE> unico elemento contenitore <STYLE> all’interno del documentoall’interno del documento

Recupero dei selettori di regola presenti Recupero dei selettori di regola presenti all’interno dell’elemento <STYLE>all’interno dell’elemento <STYLE>

Recupero di tutti i tag (X)HTML contenuti Recupero di tutti i tag (X)HTML contenuti all’interno del documento e riconosciuti dal all’interno del documento e riconosciuti dal formato dati generico.formato dati generico.

Recupero delle etichette degli attributi Recupero delle etichette degli attributi classclass associate agli elementi menzionati nel punto associate agli elementi menzionati nel punto precedenteprecedente

Creazione e recupero degli attributi Creazione e recupero degli attributi id id associati associati agli elementi contenenti dichiarazioni di stile agli elementi contenenti dichiarazioni di stile locali (attributi inline style)locali (attributi inline style)

Proiezione delle informazioni recuperate nella Proiezione delle informazioni recuperate nella lista di selezione lista di selezione Selector TextSelector Text


Attivazione dell’editorCSS Attivazione dell’editorCSS MarISAWiki Styles (2)MarISAWiki Styles (2)

Prima suddivisione…Prima suddivisione… Predefined TagsPredefined Tags: insieme dei tag predefiniti : insieme dei tag predefiniti

((hnhn) e delle etichette definite dall’utente) e delle etichette definite dall’utente User StylesUser Styles: selettori, tag e classi presenti nel : selettori, tag e classi presenti nel

documentodocumento All StylesAll Styles: insieme di tutti gli elementi presenti : insieme di tutti gli elementi presenti

e non all’interno del documentoe non all’interno del documentoSeconda suddivisione…Seconda suddivisione… Stili di bloccoStili di blocco (colore nero) (colore nero) Stili inlineStili inline (colore blu) (colore blu) Stili localiStili locali (colore verde) (colore verde)

La selezione di un elemento comporta l’immediata La selezione di un elemento comporta l’immediata apertura del pannello Stili CSS all’interno del qualeapertura del pannello Stili CSS all’interno del qualevengono definite le proprietà dei fogli di stile CSS.vengono definite le proprietà dei fogli di stile CSS.


Funzionalità dell’editorCSSFunzionalità dell’editorCSS

L’editorCSS, tramite il pannello Stili CSS, permette di…L’editorCSS, tramite il pannello Stili CSS, permette di…Recuperare le regole di stile associate al selettore selezionatoRecuperare le regole di stile associate al selettore selezionato Aggiungere e rimuovere attributi di stile per una delle seguenti Aggiungere e rimuovere attributi di stile per una delle seguenti

categorie:categorie: Tipo CSSTipo CSS Blocco di testo degli stili CSSBlocco di testo degli stili CSS Elementi di pagina degli stili CSSElementi di pagina degli stili CSS Bordo degli stili CSSBordo degli stili CSS Elenco degli stili CSSElenco degli stili CSS Posizione degli stili CSSPosizione degli stili CSS

Collegare le regole stilistiche appena modificate/create agli elementi Collegare le regole stilistiche appena modificate/create agli elementi del documento e visualizzare il risultato ottenutodel documento e visualizzare il risultato ottenutoPossibili tecniche di collegamento:Possibili tecniche di collegamento:

inline style inline style (stili locali)(stili locali) Embedding Embedding (fogli di stile incorporati)(fogli di stile incorporati)

Eliminare una determinata regola di stile.Eliminare una determinata regola di stile.


Esempio di definizione degli Esempio di definizione degli attributi di stileattributi di stile


Conclusioni e Sviluppi FuturiConclusioni e Sviluppi Futuri

Punto di partenza…Punto di partenza… Possibilità di modificare direttamente dal browser parti di contenuto dei Possibilità di modificare direttamente dal browser parti di contenuto dei

documenti della rete (editor ISAWiki).documenti della rete (editor ISAWiki).Punto di arrivo…Punto di arrivo… Incremento delle funzionalità dell’editor ISAWiki. Realizzazione di un Incremento delle funzionalità dell’editor ISAWiki. Realizzazione di un

editor aggiuntivo capace di dare la possibilità all’utente di decidere la editor aggiuntivo capace di dare la possibilità all’utente di decidere la formattazione e la resa grafica degli elementi dei documenti della rete formattazione e la resa grafica degli elementi dei documenti della rete (editorCSS MarISAWikiStyles).(editorCSS MarISAWikiStyles).

Futuri sviluppi…Futuri sviluppi… Realizzazione di un’unica toolbar (fusione dei due editor).Realizzazione di un’unica toolbar (fusione dei due editor). Completo supporto dei CSS2, CSS2.1 in attesa dello standard CSS3.Completo supporto dei CSS2, CSS2.1 in attesa dello standard CSS3. Upload di immagini, file audio e video.Upload di immagini, file audio e video. Gestione di fogli di stile esterni al documento.Gestione di fogli di stile esterni al documento. Possibilità di salvare i fogli di stile direttamente sul server.Possibilità di salvare i fogli di stile direttamente sul server. Realizzazione di un editorCSS simile per il browser Mozilla.Realizzazione di un editorCSS simile per il browser Mozilla.

Documents

Modifica di fogli di stile in un editor basato su browser: il progetto MarISAWiki Styles Tesi di Laurea di: Relatore: Mariano Diasio Prof. Fabio Vitali