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

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

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; } 22 marzo 2005 MarISAWiki Styles - Mariano Diasio

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

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

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 tipo blocco e di tipo inline Classi di Elementi rigidi per struttura e aperti per etichetta 22 marzo 2005 MarISAWiki Styles - Mariano Diasio

Elementi Blocco e Inline 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

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

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

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

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

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