Modifica di fogli di stile in un editor basato su browser: il progetto MarISAWiki Styles

1. 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

2. 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 MarISAWiki Styles - Mariano Diasio

3. 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 • 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. h1 { font: 18px Helvetica; color: purple; background: acqua; } MarISAWiki Styles - Mariano Diasio

4. Il progetto ISAWiki ISAWiki è… • Un ambiente ipertestuale collaborativorealizzato 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 MarISAWiki Styles - Mariano Diasio

5. 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. MarISAWiki Styles - Mariano Diasio

6. 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 • L’editorCSS lavora sui soli tag HTML riconosciuti come elementi di tipoblocco e di tipo inline Classi di Elementi rigidi per struttura e aperti per etichetta MarISAWiki Styles - Mariano Diasio

7. 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 MarISAWiki Styles - Mariano Diasio

8. 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 MarISAWiki Styles - Mariano Diasio

9. 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. MarISAWiki Styles - Mariano Diasio

10. 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. MarISAWiki Styles - Mariano Diasio

11. Esempio di definizione degli attributi di stile MarISAWiki Styles - Mariano Diasio

12. 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. MarISAWiki Styles - Mariano Diasio