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: Correlatore: Dott. Angelo Di Iorio Dott. Angelo Di Iorio

22 marzo 2005MarISAWiki Styles - Mariano Diasio2 Sommario In questa presentazione parleremo di … Cosa sono i fogli di stile CSS Cosa sono i fogli di stile CSS Lambiente collaborativo ISAWiki Lambiente collaborativo ISAWiki LeditorCSS MarISAWiki Styles LeditorCSS MarISAWiki Styles Conclusioni e futuri sviluppi Conclusioni e futuri sviluppi

22 marzo 2005MarISAWiki Styles - Mariano Diasio3 Cascading Style Sheets (CSS) Uno standard per specificare la rappresentazione visiva (CSS1) e sonora (CSS2 - CSS2.1) di documenti (X)HTML. 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. 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. 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. 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 delle pagine web ad autore e utilizzatore CSS Specification: CSS Specification: CSS level 1 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. h1 { font: 18px Helvetica; color: purple; background: acqua; }

22 marzo 2005MarISAWiki Styles - Mariano Diasio4 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. 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 Memorizzazione dei documenti mediante un meccanismo di versionamento Monitoraggio della navigazione dellutente Monitoraggio della navigazione dellutente Separazione tra layout e contenuto Separazione tra layout e contenuto Conversione e visualizzazione dei documenti in diversi formati (Doc, HTM, HTML, XML, Wiki, LaTeX) 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 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 Possibilità di modificare il contenuto dei documenti attraverso un editor strutturato residente sul browser

22 marzo 2005MarISAWiki Styles - Mariano Diasio5 LeditorCSS MarISAWiki Styles Motivazione… Mancanza di un meccanismo, allinterno di ISAWiki, in grado di gestire la presentazione tipografica di pagine Web Mancanza di un meccanismo, allinterno 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 Realizzare un editor che permetta la creazione e/o modifica di fogli di stile CSS durante la navigazione Caratteristiche delleditorCSS… 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. 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: è unapplicazione a se stante, non richiede lutilizzo di applicazioni aggiuntive ed opera direttamente nel browser. Browser-based: è unapplicazione a se stante, non richiede lutilizzo di applicazioni aggiuntive ed opera direttamente nel browser. Strutturato: i tag gestiti e lorganizzazione delleditor dipendono strettamente dal formato dati generico. Strutturato: i tag gestiti e lorganizzazione delleditor dipendono strettamente dal formato dati generico.

22 marzo 2005MarISAWiki Styles - Mariano Diasio6 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. E il cuore di ISAWiki e il maggior vincolo sulla struttura di MarISAWiki Styles. Rappresenta il contenuto vero e proprio del documento. Principio Principio LeditorCSS lavora sui soli tag HTML riconosciuti come elementi di tipo blocco e di tipo inline LeditorCSS lavora sui soli tag HTML riconosciuti come elementi di tipo blocco e di tipo inline Classi di Elementi rigidi per struttura e aperti per etichetta

22 marzo 2005MarISAWiki Styles - Mariano Diasio7 Elementi Blocco e Inline Blocco: Insieme di tutti gli elementi che iniziano e terminano con un line-break. Insieme di tutti gli elementi che iniziano e terminano con un line-break. Tag di tipo blocco gestiti dalleditorCSS MarISAWiki Styles: Tag di tipo blocco gestiti dalleditorCSS MarISAWiki Styles: blockquote, caption, h1, h2, h3, h4, h5, h6, li, p, pre, sub, sup, td, th. blockquote, caption, h1, h2, h3, h4, h5, h6, li, p, pre, sub, sup, td, th.Inline: Insieme di tutti gli elementi posti allinterno di un blocco e utilizzati per attribuire un significato particolare ad una porzione limitata di testo. Insieme di tutti gli elementi posti allinterno di un blocco e utilizzati per attribuire un significato particolare ad una porzione limitata di testo. Tag di tipo inline gestiti dalleditorCSS MarISAWiki Styles: Tag di tipo inline gestiti dalleditorCSS MarISAWiki Styles: a, span, b, i, em, strong. a, span, b, i, em, strong. Altri tag gestiti dalleditorCSS… body body

22 marzo 2005MarISAWiki Styles - Mariano Diasio8 Attivazione delleditorCSS MarISAWiki Styles (1) Quando viene attivato… In fase di editing direttamente dalleditor ISAWiki In fase di editing direttamente dalleditor ISAWiki In quale situazione… Editing di una pagina esistente Editing di una pagina esistente Creazione di una pagina Web Creazione di una pagina Web Cosa succede… Trasferimento di tutti i fogli di stile interni in un unico elemento contenitore allinterno del documento Trasferimento di tutti i fogli di stile interni in un unico elemento contenitore allinterno del documento Recupero dei selettori di regola presenti allinterno dellelemento Recupero dei selettori di regola presenti allinterno dellelemento Recupero di tutti i tag (X)HTML contenuti allinterno del documento e riconosciuti dal formato dati generico. Recupero di tutti i tag (X)HTML contenuti allinterno del documento e riconosciuti dal formato dati generico. Recupero delle etichette degli attributi class associate agli elementi menzionati nel punto precedente 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) 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 Proiezione delle informazioni recuperate nella lista di selezione Selector Text

22 marzo 2005MarISAWiki Styles - Mariano Diasio9 Attivazione delleditorCSS MarISAWiki Styles (2) Prima suddivisione… Predefined Tags: insieme dei tag predefiniti (hn) e delle etichette definite dallutente Predefined Tags: insieme dei tag predefiniti (hn) e delle etichette definite dallutente User Styles: selettori, tag e classi presenti nel documento User Styles: selettori, tag e classi presenti nel documento All Styles: insieme di tutti gli elementi presenti e non allinterno del documento All Styles: insieme di tutti gli elementi presenti e non allinterno del documento Seconda suddivisione… Stili di blocco (colore nero) Stili di blocco (colore nero) Stili inline (colore blu) Stili inline (colore blu) Stili locali (colore verde) Stili locali (colore verde) La selezione di un elemento comporta limmediata apertura del pannello Stili CSS allinterno del quale vengono definite le proprietà dei fogli di stile CSS.

22 marzo 2005MarISAWiki Styles - Mariano Diasio10 Funzionalità delleditorCSS LeditorCSS, 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: Aggiungere e rimuovere attributi di stile per una delle seguenti categorie: Tipo CSS Tipo CSS Blocco di testo degli stili CSS Blocco di testo degli stili CSS Elementi di pagina degli stili CSS Elementi di pagina degli stili CSS Bordo degli stili CSS Bordo degli stili CSS Elenco degli stili CSS Elenco degli stili CSS Posizione degli stili CSS Posizione degli stili CSS Collegare le regole stilistiche appena modificate/create agli elementi del documento e visualizzare il risultato ottenuto Collegare le regole stilistiche appena modificate/create agli elementi del documento e visualizzare il risultato ottenuto Possibili tecniche di collegamento: inline style (stili locali) inline style (stili locali) Embedding (fogli di stile incorporati) Embedding (fogli di stile incorporati) Eliminare una determinata regola di stile. Eliminare una determinata regola di stile.

22 marzo 2005MarISAWiki Styles - Mariano Diasio11 Esempio di definizione degli attributi di stile

22 marzo 2005MarISAWiki Styles - Mariano Diasio12 Conclusioni e Sviluppi Futuri Punto di partenza… Possibilità di modificare direttamente dal browser parti di contenuto dei documenti della rete (editor ISAWiki). Possibilità di modificare direttamente dal browser parti di contenuto dei documenti della rete (editor ISAWiki). Punto di arrivo… Incremento delle funzionalità delleditor ISAWiki. Realizzazione di un editor aggiuntivo capace di dare la possibilità allutente di decidere la formattazione e la resa grafica degli elementi dei documenti della rete (editorCSS MarISAWikiStyles). Incremento delle funzionalità delleditor ISAWiki. Realizzazione di un editor aggiuntivo capace di dare la possibilità allutente di decidere la formattazione e la resa grafica degli elementi dei documenti della rete (editorCSS MarISAWikiStyles). Futuri sviluppi… Realizzazione di ununica toolbar (fusione dei due editor). Realizzazione di ununica 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.