modifica di fogli di stile in un editor basato su browser: il progetto marisawiki styles
DESCRIPTION
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 Correlatore: Dott. Angelo Di Iorio. Sommario. In questa presentazione parleremo di … - PowerPoint PPT PresentationTRANSCRIPT
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
22 marzo 200522 marzo 2005 MarISAWiki Styles - Mariano DiasioMarISAWiki Styles - Mariano Diasio 33
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;}
22 marzo 200522 marzo 2005 MarISAWiki Styles - Mariano DiasioMarISAWiki Styles - Mariano Diasio 44
Il progetto ISAWikiIl progetto ISAWikiISAWiki è…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
22 marzo 200522 marzo 2005 MarISAWiki Styles - Mariano DiasioMarISAWiki Styles - Mariano Diasio 55
L’editorCSS MarISAWiki StylesL’editorCSS MarISAWiki StylesMotivazione…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.
22 marzo 200522 marzo 2005 MarISAWiki Styles - Mariano DiasioMarISAWiki Styles - Mariano Diasio 66
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
22 marzo 200522 marzo 2005 MarISAWiki Styles - Mariano DiasioMarISAWiki Styles - Mariano Diasio 77
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
22 marzo 200522 marzo 2005 MarISAWiki Styles - Mariano DiasioMarISAWiki Styles - Mariano Diasio 88
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> all’interno unico elemento contenitore <STYLE> all’interno del documentodel 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
22 marzo 200522 marzo 2005 MarISAWiki Styles - Mariano DiasioMarISAWiki Styles - Mariano Diasio 99
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.
22 marzo 200522 marzo 2005 MarISAWiki Styles - Mariano DiasioMarISAWiki Styles - Mariano Diasio 1010
Funzionalità dell’editorCSSFunzionalità dell’editorCSSL’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.
22 marzo 200522 marzo 2005 MarISAWiki Styles - Mariano DiasioMarISAWiki Styles - Mariano Diasio 1111
Esempio di definizione degli Esempio di definizione degli attributi di stileattributi di stile
22 marzo 200522 marzo 2005 MarISAWiki Styles - Mariano DiasioMarISAWiki Styles - Mariano Diasio 1212
Conclusioni e Sviluppi FuturiConclusioni e Sviluppi FuturiPunto 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.