Basi di Dati. Programmazione e gestione di sistemi telematici

Transcript

1 Basi di Dati. Programmazione e gestione di sistemi telematici Coordinatore: Prof. Paolo Nesi Docenti: Prof. Paolo Nesi Dr.sa Michela Paolucci Dr. Emanuele Bellini

2 Introduzione CSS Cascading Style Sheets (fogli di stile) Le regole per comporre i CSS sono contenute in un insieme di direttive (o Recommendations) emanate dal 1996 dal W3C L'introduzione dei fogli di stile si è resa necessaria per separare i contenuti dalla formattazione e permettere una programmazione più chiara e facile da utilizzare, sia per gli autori delle pagine HTML che per gli utenti

3 Prima dei CSS (1) Come sappiamo una pagina web è formata da contenuti e layout Il linguaggio HTML serve per gestire i contenuti, attraverso l uso di tag. Ogni tag specifica un diverso ruolo dei contenuti I browser interpretano il codice HTML e mostrano all'utente formattazioni predefinite per ogni tag Ogni browser ha un proprio metodo di interpretazione dei tag. Per questo si dice che la formattazione html è completamente sotto il controllo dell'utente, che può modificarla nelle Impostazioni del suo browser

4 Prima dei CSS (2) Allo scopo di consentire agli autori di definire l'aspetto grafico delle pagine create, dal '93 Internet Explorer e Netscape Navigator, presentarono tag proprietari, ovvero non compatibili con gli altri browser e non aderenti agli standard. Come ad esempio è successo con il tag <font>

5 Prima dei CSS (3) Prima dell uso dei CSS erano presenti i seguenti problemi: lunghezza dei tag: una pagina che non usa i CSS è più pesante (in termini di bit). (Le regole CSS possono essere inserite in un file esterno che rimane memorizzato nella cache del browser, riducendo ulteriormente la quantità di dati che i server devono trasmettere) mancanza di logica in HTML: un codice che non è aderente agli standard comporta lavoro addizionale per i browser (che devono interpretare, se possibile, direttive arbitrarie) mancanza di compatibilità con palmari e smartphone i cui schermi hanno una risoluzione minima ed una forma ben diversa dal rapporto 4:3 dei monitor dei pc

6 Prima dei CSS (4) Per risolvere la situazione il W3C ha emanato le specifiche CSS-1, per separare il contenuto dalla sua formattazione: Il contenuto definito dal codice html e la relativa formattazione realizzata attraverso i css.

7 Cosa sono I CSS e a che servono La definizione più conosciuta e diffusa dei fogli di stile è: sono la separazione tra contenuto e presentazione. Il contenuto è nella pagina html, mentre la presentazione è riservata ai fogli di stile. Ma c'è una terza variabile che non compare in questa definizione, una variabile di cui molti appassionati ed esperti di webdesign devono tenere conto: la struttura. La struttura è inseparabile dal contenuto, ed è l'unico modo per consentirne la presentazione. Per esempio, si immagini una guida di programmi tv in cui le pagine non siano divise per giorni e le programmazioni non suddivide per canale e orario. Una guida ai programmi televisivi con le stesse informazioni testuali, ma presentate in ordine sparso e senza forma. La potreste consultare?

8 Vantaggi CSS in generale(1) Erano un'efficace soluzione al primo problema (escludendo la questione del tag <table>) perché riducevano notevolmente le dimensioni della pagine. Risolvevano il secondo in modo parziale perché consentivano al codice (X)HTML di ritornare in gran parte semplice ed essenziale, ma presentavano qualche mancanza che costringeva a ricorrere ai tag HTML. Non prendevano però in considerazione il terzo, dato che nel 1996 i PDA (i palmari) erano scarsamente diffusi.

9 Svantaggi dei CSS I browser più datati hanno una non corretta interpretazione dei CSS, ciò richiede un minimo d'accortezza al momento delle progettazione. Punto. Concludendo Progettare con i CSS, realizzando pagine standard (magari in XHTML) significa progettare per il futuro, senza però trascurare il passato: una pagina (X)HTML standard + CSS standard è accessibile con tutti i dispositivi per la navigazione nel web. Certo, i browser più datati richiederanno CSS specifici, magari più semplici, ma ottenere la stessa grafica su tutti i dispositivi/browser non è possibile e neppure utile. Un sito indipendente dal browser è quello in grado di presentare correttamente i contenuti su tutti i browser.

10 Modi per implementare i CSS Esistono 3 metodi per implementare i fogli di stile CSS in una pagina web, ovvero utilizzando stili: In linea (inline) incorporati (embedded) esterni (external) Il metodo più usato è il primo perchè permette di gestire globalmente il layout del sito utilizzando un file a se stante. Il contenuto è separato in modo netto dalla presentazione e questo consente una maggiore flessibilità

11 Metodo inline Si usa in punti molto specifici della: non si modifica la visualizzazione dell intera pagina ma solo di una parte di essa. Si fa uso dell attributo style con la seguente sintassi: <h1 style= color:red; >Titolo</h1>

12 Metodo incorporato È utile quando si vuole modificare una sola pagina web All interno del tag <head> si inseriscono le regole di stile volute che devono, a loro volta, essere contenute all interno di un altro tag <style>: <style type="text/css"> Regole </style>

13 Metodo incorporato: esempio <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>prima Pagina</title> <style type="text/css"> body { padding: 2em; color: purple; background-color: #d8da3d } h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif} h2 { color: red} </style> </head> <body> <!-- Main content --> <h1>prima pagina definita con i CSS interni</h1> <h2>paragrafo in carattere rosso</h2> <p>testo visualizzato <!-- Sign and date the page, it's only polite! --> </p> </body> </html>

14 Metodo incorporato: visualizzazione esempio

15 Metodo esterno Si fa riferimento ad un file (esterno) diverso da quello contenente il codice html: <lynk rel="stylesheet" href="/percorso_della_cartella/stile.css" type="text/css" media="all"> Metodo di inclusione di più CSS esterni <style type="text/css" url(" </style>

16 Metodo esterno: visualizzazione esempio Sono necessari due file: Il file nomefile.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>my first styled page</title> <link rel="stylesheet" type="text/css" href=" </head> <body> <!-- Main content --> <h1>prima pagina definita con i CSS interni</h1> <h2>paragrafo in carattere rosso</h2> <p>testo visualizzato <!-- Sign and date the page, it's only polite! --> </p> </body> </html> Il file stile.css: body {padding: 2em; color: purple; background-color: #d8da3d } h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif} h2 {color: red}

17 Metodo esterno:

18 Classificazione degli elementi Una pagina HTML, non è altro che un insieme di rettangoli (box) disposti sullo schermo di un monitor (paragrafi, titoli, tabelle, immagini, ) Non tutti i box sono uguali:alcuni contengono altri box, altri sono invece contenuti all'interno dei primi

19 Attributo media di <style> (1) all: il CSS si applica a tutti i dispositivi di visualizzazione screen: normali browser web print: stampa projection: presentazioni e proiezioni a tutto schermo aural: dispositivi come browser a sintesi vocale braille: supporti basati sull'uso del braille tv: Web-tv...

20 Regole (1) Un CSS o foglio di stile è un insieme di regole Una regola è costituita da un selettore e da un blocco della dichiarazione. Ogni blocco contiene a sua volta proprietà e valori:

21 Regole (2) Il selettore serve a definire la parte del documento cui verrà applicata la regola Il blocco delle dichiarazioni è delimitato rispetto al selettore e alle altre regole da due parentesi graffe. Al suo interno si possono trovare più dichiarazioni (proprietà: valore1) separate dal carattere ';'

22 Regole (3) La proprietà definisce un aspetto dell'elemento da modificare (margini, colore di sfondo, etc) secondo il valore espresso. Per ogni dichiarazione non è possibile indicare più di una proprietà, mentre è spesso possibile specificare più valori: body {color background: black;} ERRATA p {font: 12px Verdana, arial;} CORRETTA

23 Commenti Per inserire parti di commento in un CSS: /* come segno di apertura * */ come segno di chiusura body { padding: 2em; color: purple; */* Questo è un commento **/ background-color: #d8da3d }

24 I Selettori I selettori sono le parti della pagina web a cui vengono applicate le regole descritte nel file.css Ad esempio 'type selector' fa riferimento agli elementi che descrivono una pagina html (h1, p,...) h1 {color: #000000;}

25 Raggruppamento di selettori Quando due o più selettori sono definiti dalla stessa regola, conviene raggruppare Senza raggruppamento: VXCVh1 {background: white;} h2 {background: white;} h3 {background: white;} Con il raggruppamento: h1, h2, h3 {background: white;}

26 Selettore universale Serve a selezionare tutti gli elementi di una pagina web: * { color: black; }

27 Selettore del discendente (descendant selector) Serve a selezionare tutti gli elementi che nella struttura ad albero di una pagina web sono discendenti di un altro elemento specificato nella regola div p {color: black;} Questa regola è relativa a tutti i paragrafi (p) discendenti del blocco div

28 Selettore del figlio (child selector) Seleziona un elemento che è figlio diretto di un altro body > p {color: black;} Questa regola è relativa a tutti i paragrafi figli diretti dell'elemento body NOTA: questo selettore non è supportato da Internet Explorer

29 Selettore elemento adiacente (adjacent-sibling selector) Seleziona gli elementi che nel codice della pagina web sono immediatamente vicini (adiacenti) ad un altro Se il file html contiene: <h1>titolo</h1> <p>primo paragrafo</p> <p>secondo paragrafo</p> La regola: h1 + p {color: red;} può essere applicata solo al primo paragrafo NOTA: non è supportato da Internet Explorer

30 Selettore dell'attributo (attribute selector) Seleziona gli elementi in base ai loro attributi e/o al valore di tali attributi. Esistono le seguenti modalità: attributo semplice attributo con valore attributo il cui valore contiene una stringa attributo il cui valore inizia con una stringa

31 Selettore dell'attributo: attributo semplice Questa regola seleziona tutti gli elementi che, nel file.html, hanno un determinato attributo Esempio: p [ id ] {background: red;} applica uno sfondo rosso a tutti gli elementi 'p' della pagina web (pagina.html) per cui sia stato impostato un attributo id (<p id='xxx'...> contenuto </p>)

32 Selettore dell'attributo: attributo con valore Questa regola seleziona tutti gli elementi che, nel file.html, hanno come valore dell'attributo la stringa definita nella regola Esempio: p [ id = "text" ] { backgorund: red; } applica uno sfondo rosso a tutti gli elementi 'p' che nella pagina web (file.html) hanno come valore dell'attributo id "text (<p id='text'...> contenuto </p>)

33 Selettore dell'attributo: attributo il cui valore inizia con una stringa Questa regola seleziona tutti gli elementi il cui valore dell'attributo inizia con la stringa definita nella regola Esempio: img [ alt t= "colosseo" ] {margin: 10px;} applica un margine di 10px a tutte le immagini in cui l'attributo alt contiene la stringa "colosseo" ( <img src="figura1.gif" alt="foto del Colosseo" />)

34 Selettore dell'attributo: attributo il cui valore contiene una stringa Questa regola seleziona tutti gli elementi il cui valore dell'attributo contiene la stringa definita nella regola Esempio: img [ alt = "foto" ] {margin: 10px;} applica un margine di 10px a tutte le immagini in cui l'attributo 'alt' inizia con la stringa "foto" ( <img src="figura1.gif" alt="foto del Colosseo" />)

35 Selettori Id e Class (1) Sono due selettori che possono essere applicati a tutti gli elementi del file.html Selettore class: si assegna ad un elemento del file.html un attributo class: <p class="testorosso">...</p> si definisce nel file.css la class testorosso nel modo seguente: (.nome_classe {blocco dichiarazione} ).testorosso { font: 12px Arial, Helvetica, sans-serif; color: #FF0000;}

36 Selettori Id e Class (2) Un id è utilizzato nel file.html per fare riferimento ad uno ed un solo elemento della pagina web. Per questo motivo la differenza tra id e class risulta: un id dichiarato nel file.css trasforma solo uno specifico elemento del file.html una classe, al contrario, può essere assegnata a più elementi, anche dello stesso tipo NOTA: Se uno stile va applicato un solo elemento, si usa l'id altrimenti se si prevede di usarlo su più elementi si usa class

37 Unità di misura più usate pt (points - punti): unità di misura tipografica destinata essenzialmente a definire la dimensione dei font em (em-height): 1 em equivale all'altezza media di un carattere per un dato font. E' un unità di misura relativa px (pixels): unità di misura ideale su monitor. E quella più usata e facile da comprendere

38 Valori e unità di misura I valori di una proprietà non vanno mai messi tra virgolette (eccezione=stringhe di testo e nomi dei font composti da più di una parola. Es: Times New Roman ) Quando si usano valori numerici con unità di misura, non bisogna lasciare spazio tra numero e sigla dell'unità (Corretto: 15px - Sbagliato:15 px)

39 Altre unità per le dimensioni (1) Percentuale: è relativo ad un altro valore, in genere quello espresso per l'elemento parente (60%) Stringhe: alcune proprietà dei CSS possono avere come valore una stringa di testo da inserire come contenuto aggiunto nel documento Valori URI: sono URL che puntano a documentiesterni. Possono essere assoluti o relativi (il path fa riferimento alla posizione del file.css)

40 Ereditarietà (1) Le impostazioni stilistiche applicate ad un elemento ricadono anche sui suoi discendenti. Almeno fino a quando, per un elemento discendente, non si imposti esplicitamente un valore diverso per quella proprietà

41 Ereditarietà (2) Se nel css si scrive la regola: body {color: red;} Tutti gli altri elementi suoi discendenti (h1,h2,p) erediteranno questa impostazione MA se nel file.css si definisce anche anche: h1 {color: black;} l'ereditarietà viene spezzata e il testo del paragrafo h1 sarà nero

42 Ereditarietà (3) Non tutte le proprietà sono ereditate. Ereditare un bordo non ha senso. Esempio: se si imposta un bordo per un paragrafo sarebbe assurdo che un elemento <a> o un testo in grassetto venissero circondati dallo stesso bordo

43 Peso delle regole Ogni regola ha più o meno importanza rispetto alle altre Un primo criterio di importanza è dato dall'origine del foglio di stile. Quando si visualizza una pagina web, il browser la interpreta in base a (in ordine di importanza): file.css dell'autore file.css dell'utente file.css predefinito del browser NOTA: tutti i software di navigazione consentono una gestione di questo aspetto

44 Peso delle regole (2) Criterio dell'ordine: stili in linea <h1 style= color:red; >Titolo</h1> stili incorporati (nel file.html) <head><style>h1{color:red;}</style></head> stili collegati (file.css) h1{color: red;}

45 Cascade Un browser esegue le seguenti azioni per visualizzare una pagina web: controlla il target stabilito con l'attributo media (adesempio scarta tutti gli stili e le regole riferiti alla stampa o ad altri supporti) ordinare le regole in base all'origine (autore-> utente-> browser) calcola la specificità dei selettori (albero) e in caso di conflitto usa il criterio dell'ordine (stili in linea-> Stili incorporati stili collegati o esterni)

46 Gestione del testo Prima dei CSS si usava il tag <font>, si creavano così pagine web di difficile gestione Con i CSS possono essere gestite varie proprietà del testo: Il tipo di font La dimensione del font La consistenza del font L'interlinea tra i paragrafi L'allineamento del testo e la sua decorazione

47 Gestione del testo: font family La proprietà font-family impostare il tipo di carattere. Si applica a tutti gli elementi ed è ereditata. Il W3C ha creato un meccanismo che consente all'autore di impostare nei CSS non un font singolo e unico, ma un elenco di caratteri alternativi: p {font-family: arial, Verdana, sans-serif;} Quando la pagina viene caricata, il browser tenta di usare il primo font della lista. Se questo non è disponibile usa il secondo e così via selettore {font-family: <font 1>,...,<famiglia generica>;}

48 Gestione del testo: font-size (1) Definisce le dimensioni del testo. E' applicabile a tutti gli elementi ed è ereditata Sintassi: selettore { font-size: <valore>; } I valori del testo possono essere espressi in: dimensione assoluta: è definita dall'unità di misura usata dimensione relativa: viene calcolata in base alla dimensione del testo dell'elemento parente

49 Gestione del testo: font-size (2) Sono valori assoluti: xx-small, x-small, small, medium, large, x-large, xxlarge, pixel (px), centimetri (cm), millimetri (mm), punti (pt), picas (pc), pollici (in), x-height(ex) p {font-size: 12px;} Sono valori relativi: smaller, larger, em (em-height), % (in percentuale) h2 {font-size: 1.2em;}

50 Gestione del testo: font-weight Serve a definire la consistenza o "peso" visivo del testo. Si applica a tutti gli elementi ed è ereditata. selettore {font-weight: <valore>;} Valori: numerici: ordinati in senso crescente (dal più leggero al più pesante) normal: valore di default (equivale a 400) bold: grassetto (equivale a 700) Bolder: misura relativa (più pesante del parente) lighter: misura relativa (più leggero del parente)

51 Gestione del testo: line-height Serve a definire l'altezza di una riga di testo all'interno di un elemento blocco. Ma l'effetto ottenuto è quello di impostare uno spazio tra le righe. La proprietà si applica a tutti gli elementi ed è ereditata Sintassi: selettore {line-height: <valore>;}

52 Gestione del testo: line-height Valori: normal valore numerico (1.2, 1.3, 1.5): l'altezza della riga sarà uguale alla dimensione del font moltiplicata per questo valore valore numerico con unità di misura: l'altezza della riga sarà uguale alla dimensione specificata Percentuale: l'altezza della riga viene calcolata come una percentuale della dimensione del font

53 Gestione del testo: text-align Imposta l'allineamento del testo. E' ereditata e si applica a tutti gli elementi: Sintassi: selettore { text-align: <valore>; } Valori: left: allinea il testo a sinistra right: allinea il testo a destra center: centra il testo justify: giustifica il testo

54 Gestione del testo: text decoration Imposta particolari decorazioni e stili per il testo. E ereditabile ed applicabile a tutti gli elementi (p {textdecoration: <valore> o <valori>;}) Valori: none: il testo non ha decorazioni particolari underline: il testo sarà sottolineato overline: il testo avrà una linea superiore line-through: il testo sarà attraversato da una linea orizzontale al centro blink: testo lampeggiante (p {text-decoration: blink;}

55 Ancora testo Letter-spacing blockquote{letter-spacing: 0.1em} Word-spacing H1 {word-spacing: 1em} Text-transform capitalize, uppercase, lowercase White-space normal (sequenze di spazi e a capo ignorati) pre (sequenze di spazi a capo rispettati) nowrap (spazi ignorati, a capo soppressi)

56 Colori e sfondi Due stili che vanno specificati insieme: color: il colore del testo sfondo: background-color: un colore o transparent background-image: un immagine specificata da un URL gli sfondi non si ereditano ma sono trasparenti Sfondi degli elementi Background-repeat (repeat, repeat-x, repeat-y, no-repeat) Background-attachment (fixed, scroll) Background-position (posizione in % o assoluta)

57 Tabelle <table> <caption>tabella 3x3</caption> <tr id="row1"><th>header 1</th> <td>cell 1</td><td>Cell 2</td></tr> <tr id="row2"> <th>header 2</th> <td>cell 3</td><td>Cell 4</td></tr> <tr id="row3"><th>header 3</th> <td>cell 5</td><td>Cell 6</td> </table> NOTA: specifica per riga Aggiungiamo un po di stile con i CSS...

58 Tabelle e CSS TH { vertical-align: center; text-align: center; font-weight: bold; font-size: x-large } TD { vertical-align: middle } TABLE {border: 1px solid black } TR#row1 { text-align: left } TR#row2 { text-align: center } TR#row3 { text-align: right } CAPTION { caption-side: top }

59 Margini (1) Blockquote e le liste (ol, ul) normalmente rientrano il testo contenuto Lo spazio intorno può essere controllato con le proprietà: margin margin-left margin-right margin-top margin-bottom

60 Margini (2) Esempio 1 blockquote { margin-top: 1em; margin-right: 0em; margin-bottom: 1em; margin-left: 0em; font-style: italic;} Esempio 2 blockquote { margin: 1em 0em 1em 0em; font-style: italic;} In senso orario a partire da top

61 Link Link sottolineato o non a:link {text-decoration: underline;} a:link, a:visited {text-decoration: none} a:hover {background: cyan} a:hover {color: red} Link, visited, hover: sono chiaramentespecializzazioni di a. Ma perché i due punti?non sono proprio classi come le altre, sono pseudoclassi perché si basano su proprietà che sono esterne al documento (es. un link è stato visitato)

62 Link

63 Basi di Dati. Programmazione e gestione di sistemi telematici Prof. Paolo Nesi lab. DSI-DISIT nesi@dsi.unifi.it Dr.sa. Michela Paolucci paolucci@dsi.unifi.it Dr. Emanuele Bellini bellini@rinascimento-digitale.it