La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

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.

Presentazioni simili


Presentazione sul tema: "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."— Transcript della presentazione:

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

2 22 marzo 2005MarISAWiki Styles - Mariano Diasio2 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

3 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.  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 delle pagine web ad autore e utilizzatore  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; }

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

5 22 marzo 2005MarISAWiki Styles - Mariano Diasio5 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.

6 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. Principio 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

7 22 marzo 2005MarISAWiki Styles - Mariano Diasio7 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

8 22 marzo 2005MarISAWiki Styles - Mariano Diasio8 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 all’interno del documento  Recupero dei selettori di regola presenti all’interno dell’elemento  Recupero dei selettori di regola presenti all’interno dell’elemento  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

9 22 marzo 2005MarISAWiki Styles - Mariano Diasio9 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.

10 22 marzo 2005MarISAWiki Styles - Mariano Diasio10 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.

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

12 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). 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.


Scaricare ppt "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."

Presentazioni simili


Annunci Google