Basi di Dati. Programmazione e gestione di sistemi telematici - Coordinatore: Prof. Paolo Nesi Prof. Paolo Nesi - DISIT Lab

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

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

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

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

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

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.

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?

Vantaggi CSS in generale(1)

   Erano un'efficace soluzione al primo problema
    (escludendo la questione del tag ) 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.

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.

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à

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:
     Titolo

Metodo incorporato

   È utile quando si vuole modificare una sola
    pagina web

   All’interno del tag  si inseriscono le
    regole di stile volute che devono, a loro volta,
    essere contenute all’interno di un altro tag
    :

    
      Regole

Metodo incorporato: esempio

 Prima Pagina
 
 body {
      padding: 2em;
      color: purple;
      background-color: #d8da3d }
 h1 {
      font-family: Helvetica, Geneva, Arial,
      SunSans-Regular, sans-serif}
 h2 {         color: red}
 
Prima pagina definita con i CSS interni
Paragrafo in carattere rosso
  Testo visualizzato

Metodo incorporato:
visualizzazione esempio

Metodo esterno

   Si fa riferimento ad un file (esterno) diverso da quello
    contenente il codice html:
       

   Metodo di inclusione di più CSS esterni tramite @import:
       
        @import "/percorso_della_cartella/stile1.css";
        @import "/percorso_della_cartella/stile2.css";
        @import
        url("http://www.miosito.it/percorso_della_cartella/stile2.css");

Metodo esterno: visualizzazione
esempio

   Sono necessari due file:
        Il file nomefile.html
           
             My first styled page
             
              Prima pagina definita con i CSS interni
              Paragrafo in carattere rosso
              Testo visualizzato
              
       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}

Metodo esterno:

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

Attributo media di  (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

   ...

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:

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
  ';'

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

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 }

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;}

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;}

Selettore universale

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

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

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

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:
Titolo
Primo paragrafo
Secondo paragrafo

 La regola: h1 + p {color: red;}
può essere applicata solo al primo paragrafo

 NOTA: non è supportato da Internet Explorer

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

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
    ( contenuto )

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“
    ( contenuto )

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"
    ( )

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"
    ( )

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: ....
     si definisce nel file.css la class testorosso nel modo
    seguente: ( .nome_classe {blocco dichiarazione} )
    .testorosso {
       font: 12px Arial, Helvetica, sans-serif;
       color: #FF0000;}

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

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

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)

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)

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à

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

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  o un testo in grassetto
  venissero circondati dallo stesso bordo

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

Peso delle regole (2)

   Criterio dell'ordine:
     stili in linea
    Titolo
     stili incorporati (nel file.html)
    h1{color:red;}
     stili collegati (file.css)
    h1{color: red;}

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)

Gestione del testo

 Prima dei CSS si usava il tag , 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

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: ,...,;}

Gestione del testo: font-size (1)

 Definisce le dimensioni del testo. E' applicabile a
tutti gli elementi ed è ereditata
     Sintassi:   selettore { font-size: ; }

   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

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;}

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: ;}

   Valori:
       numerici: 100-200-300-400-500-600-700-800-900
       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)

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: ;}

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

Gestione del testo: text-align

 Imposta l'allineamento del testo. E' ereditata e si
applica a tutti gli elementi:
     Sintassi:   selettore { text-align: ; }

   Valori:
     left:allinea il testo a sinistra
     right: allinea il testo a destra
     center: centra il testo
     justify: giustifica il testo

Gestione del testo: text decoration

   Imposta particolari decorazioni e stili per il testo.
    E‘ ereditabile ed applicabile a tutti gli elementi (p
    {textdecoration:  o ;})

   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;}

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)

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)

Tabelle

   
    Tabella 3x3
    Header 1
    Cell 1Cell 2
     Header 2
    Cell 3Cell 4
    Header 3
    Cell 5Cell 6
    

   NOTA: specifica per riga

   Aggiungiamo un po’ di stile con i CSS ...

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 }

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

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

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)

Link

 http://css.html.it

 http://www.w3.org/

 http://www.w3.org/Style/CSS/

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