Unità 4) Settimane n° 9 – 11: Internet: la struttura del web e i linguaggi di scritpting -2

Per questa unità disponiamo di 9 ore

Lezione 1

Lezione frontale, con videoproiettore. Presentare agli studenti esempi di utilizzo dei CSS, facendo vedere come appare un sito attivando e disattivando i CSS. Molto comodo risulta utilizzare la barra “Web Developer” (o simili) di Frirefox, che consente di attivare e disattivare i CSS per siti esistenti. L’importante è che gli studenti capiscano che il CSS è “l’abito” del sito e come tale può essere modificato senza variarne il contenuto

Contenuti:

  1. differenza fra contenuto e presentazione
  2. diversi modi di utilizzare i CSS (preferire di gran lunga gli esterni, per abituarli sin da ora a programmare con richiami a risorse esterne)
  3. sintassi di base per inserire i CSS e per definire delle regole per i tag
  4. Proporre risorse sulla rete dove reperire esempi

Lezione 2-3

Laboratorio: spiegazione applicata. Presentare agli studenti esempi e farli applicare autonomamente, magari alle stesse pagine realizzate nelle lezioni precedenti. Gli esempi possono essere molto semplici, purchè comprendano molti aspetti della presentazione di una pagina: colori, margini, riempimenti, font, stile, allineamento…..

Lezione 4

Fare un passo in avanti e introdurre i concetti di ID e classe. Non è il caso in questa fase di introdurre selettori particolari, piuttosto è importante far capire quando si usa ID e quando una classe. Esempi possibili possono essere:

  • righe a colori alternati per una TABLE
  • paragrafi <p> formattati in modo differente a seconda della classe di appartenenza
  • <IMG> con allineamento a destra, sinistra e centro, gestito con tre classi diverse
  • uso di ID per posizionare in modo preciso determinati elementi (molto utile per introdure il layout a colonne)

Lezione 5-6

In laboratorio, lezione dimostrazione e applicazione autonoma dei singoli concetti. Usare i CSS per abbellire decisamente la pagina. Si possono realizzare effetti come:

  • link con effetto “pulsante” utilizzando le pseudo-classi hover, active……
  • Capolettera elegante, con “first-letter”
  • testi che appaiono e scompaiono al passaggio del mouse con “display”
Inoltre va introdotto il concetto di layout complesso, introducendo il DIV. A seconda di come reagisce la classe si possono proporre semplici layout a due colonne di dimensione esplicitamente fissata oppure layout più articolati e fluidi.

Lezione 7

Lezione frontale con videoproiettore: far vedere come i CSS possano applicarsi “a cascata” e come possano essere controllate le proprietà di un elemento, ad esempio utilizzando browser evoluti come Firefox e Chrome. Ripasso delle lezioni precedenti per chiarire eventuali dubbi rimasti

Lezione 8-9

Verifica finale, in laboratorio: far realizzare un piccolo sito (3 o 4 paginette) che utilizzi i CSS esterni per la propria grafica. Lasciarli liberi di connettersi ad Internet per vedere la sintassi corretta, in questa verifica è importante valutare la capacità di usare consapevolmente i CSS per presentare opportunamente il contenuto del sito

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...