DIDATTICA DELLE APPLICAZIONI INFORMATICHE MOD B DOCENTE : G. SALVI SPECIALIZZANDE : R.CERVERA – A.DELLA VENTURA – P.FULGIERI

MODULO : IL LINGUAGGIO HTML Classe : V ITIS Prerequisiti : linguaggi formali; sistemi operativi; multimedialità, ipertesti e ipermedia; microsoft Internet Esplorer; web e URL. Obiettivi cognitivi: comprendere cosè un linguaggio di tipo markup; conoscere le parti fondamentali di un documento HTML; saper formattare un testo, inserire immagini e collegamenti ipertestuali; conoscere le soluzioni per pubblicare in Internet.

MODULO : IL LINGUAGGIO HTML Obiettivi operativi : scrivere un documento HTML e leggerlo con un browser; inserire in un documento HTML testo, immagini, suoni e filmati; personalizzare un documento HTML. Contenuti : introduzione; la formattazione; le immagini; I collegamenti ipertestuali; I frame; pubblicare su Internet.

UNITA DIDATTICA I FRAME Prerequisiti : conoscere la struttura base di un documento HTML Obiettivi cognitivi : riguardare un documento HTML come possibile entità costituita da vari documenti che possono essere visualizzati contemporaneamente Obiettivi operativi : assemblare vari documenti in modo da migliorare la navigabilità allinterno di un ipertesto.

UNITA DIDATTICA I FRAME Contenuti: Definizione, proprietà, pro e contro delluso dei frame; Sintassi; Attributi; Annidamento; Metodologia: lezioni mediante luso di presentazioni; applicazioni in laboratorio; lavori di gruppo; esercitazioni guidate. Strumenti : libro di testo; materiale reperito in rete; computer; lavagna ;videoproiettore.

UNITA DIDATTICA I FRAME Valutazione : durante le lezioni vengono proposti esercizi di verifica in laboratorio per una valutazione immediata del raggiungimento dellobiettivo ed eventuale feedback. Alla fine dellunità didattica segue una verifica sommativa.

I FRAME I frame (cornici) danno la possibilità di suddividere la finestra del browser in diversi riquadri distinti e indipendenti I frame si possono considerare in un certo senso sottofinestre autonome in cui è possibile visualizzare documenti diversi o parti dello stesso documento.

I FRAME Lutilizzo dei frame nasce successivamente al linguaggio HTML: vengono introdotti a partire dalla versione 2 di Netscape e dalla versione 3 di Internet Explorer. Pertanto luso dei frame non è supportato da tutti i browser.

I FRAME Unapplicazione comune è la suddivisione di una pagina in due zone: una verticale, generalmente posizionata a sinistra che contiene un elenco, e una nella quale si visualizza il contenuto correlato alla scelta effettuata con un clic su una voce dellelenco. Cambiando scelta,nella prima finestra rimane lelenco e cambia solo il contenuto della seconda finestra

I FRAME Esempio : PAGINAMENU

VANTAGGI Dal punto di vista dellutente Navigazione del sito più rapida in quanto solo una parte dello schermo viene ricaricata o aggiornata Navigazione più comoda in quanto i frame permettono di mantenere sempre in vista alcuni punti del layout (ad esempio il menù di navigazione) Dal punto di vista del webmaster I frame hanno la caratteristica di utilizzare una struttura che consente di includere il layout comune in pochi files

SVANTAGGI E preferibile non eccedere nelluso dei frame per non appesantire la realizzazione del sito. Per alcuni browser si possono verificare problemi di compatibilità in quanto non supportano lutilizzo dei frame; è preferibile pertanto creare due versioni del sito, una con frame ed una senza frame.

SINTASSI Ricordiamo che la pagina di un documento HTML è costituita essenzialmente da due parti : HEAD, che contiene lintestazione e BODY che contiene il documento vero e proprio. Nel caso di un documento in cui si utilizzano i frame la pagina da suddividere contiene solo informazioni sulla divisione, per cui può essere priva del blocco BODY

GESTIONE DEI FRAME Gli elementi da usare per la divisione in frame sono: FRAMESET (Set di riquadri)che definisce il blocco con le indicazioni delle suddivisioni in righe o colonne e può contenere annidati al suo interno altri elementi quali FRAMESET, FRAME o NOFRAME FRAME che definisce il contenuto di ciascuna cornice

ESEMPIO DI SINTASSI DI BASE Codice HTML visualizzato da browser che non supportano i frame

ATTRIBUTI DI FRAMESET Al tag FRAMESET possono essere assegnati i seguenti attributi: ROWS : definisce le dimensioni e il numero delle righe in cui viene suddivisa la pagina; COLS : definisce le dimensioni e il numero delle colonne in cui viene suddivisa la pagina. I due attributi possono essere usati singolarmente o insieme

ROWS Lattributo ROWS raccoglie i valori per laltezza delle righe in cui si vuole suddividere la finestra principale; tali valori, separati da virgole possono essere numeri interi (pixel) o percentuali(della dimensione della finestra del browser).

ESEMPIO crea una cornice suddividendo la finestra in due parti, la prima che occupa il 40% delle dimensioni totali, la seconda il 60%. Frame inferiore che occupa il 60% della finestra Frame superiore che occupa il 40% della finestra

Esempio In questo caso si hanno due finestre con dimensioni fisse (150 e 600 px) indipendentemente dalla risoluzione e dalle dimensioni del monitor. Frame superiore di 150 pixel Frame inferiore di 600 pixel

ESEMPIO In questo caso la prima finestra ha dimensione fissa, mentre la seconda occupa tutto lo spazio rimanente(carattere jolly) Frame superiore fisso di 150 pixel Frame inferiore che varia occupando il rimanente spazio della finestra

COLS Lattributo COLS viene usato in modo analogo allattributo ROWS riferito però alle colonne. Esempio crea due finestre verticali con dimensioni espresse in percentuale della dimensione della finestra del browser.

ESEMPIO crea tre colonne con dimensioni espresse in pixel Frame laterale sinistro fisso 180 pixel Frame centrale fisso 250 pixel Frame laterale destro che varia occupando il rimanente spazio della finestra

ALTRI ATTRIBUTI DI FRAMESET Ufficialmente FRAMESET non ha attributi per la visualizzazione, ma alcuni attributi sono entrati convenzionalmente nelluso comune. BORDER = numero indica lo spessore del bordo di tutti i frame figli BORDERCOLOR = colore definisce il colore del bordo del frameset FRAMEBORDER = 1/0 specifica se i frame figli saranno visualizzati con o senza bordo

Esempio:

IL TAG FRAME Il tag FRAMESET non permette di visualizzare informazioni ma serve solamente per creare la struttura di una pagina con frame(cornici). Il tag FRAME permette di definire il contenuto di ogni cornice e quindi di visualizzare le informazioni.

IL TAG FRAME Se le dimensioni del riquadro non sono sufficienti a mostrare il documento nella sua interezza, il frame avrà delle barre di scorrimento a meno che non sia diversamente specificato come vedremo più avanti. Lelemento frame ha una serie di attributi e non necessita del tag di chiusura

ATTRIBUTI DI FRAME SRC = url definisce lindirizzo del file html che verrà visualizzato nella sezione frame del frameset. In effetti non è altro che il file html da visualizzare.

ATTRIBUTI DI FRAME NAME = nome_frame assegna il nome al frame FRAMESPACING =valore definisce lo spazio in pixel da lasciare intorno al frame ed è riconosciuto dai soli browser IE.

ATTRIBUTI DI FRAME MARGINWIDTH=valore forza il rientro sui lati, destro e sinistro,in base al valore numerico inserito (pixel). Non accetta il valore 0. MARGINHEIGHT=valore forza il rientro sui lati, superiore e inferiore, in base al valore numerico inserito. Non accetta il valore 0.

ATTRIBUTI DI FRAME SCROLLING specifica se deve esserci la barra laterale di scorrimento della finestra. In effetti questo attributo indica se si vuol consentire allutente di poter scorrere il frame oppure no.

ATTRIBUTI DI FRAME Lattributo SCROLLING ha tre parametri: compare lo scrolling solo se necessario ( valore di default) visualizza sempre lo scrolling

ATTRIBUTI DI FRAME non visualizza lo scrolling anche nel caso in cui il contenuto della pagina HTML vada oltre la cornice. NORESIZE se impostato evita al frame di essere ridimensionato. Se usato in unione con scrollingno, di fatto blocca il contenuto del frame.

ATTRIBUTI DI FRAME FRAMEBORDER rende visibili o meno i bordi dei frame. E riconosciuto dai soli browser IE ed ha due parametri: (valore di default) non viene visualizzato il bordo

ELEMENTO NOFRAMES Lelemento NOFRAMES serve per creare unalternativa a quei browser che non supportano luso dei frame. Conviene pertanto creare unalternativa o semplicemente un messaggio di avviso fra i tag ….. spiacente ma il tuo browser non supporta i frame

NIDIFICAZIONE DEI FRAME È possibile inserire allinterno di un FRAMESET un altro FRAMESET In questo modo, ad esempio, è possibile costruire una pagina con un banner stretto in alto, un indice stretto a sinistra e la pagina principale alla destra dellindice. È importante non eccedere nelle nidificazioni per non rendere la pagina troppo confusa.

ESEMPIO SPAZIO PER UN BANNER INDICE SPAZIO PER LA PAGINA PRINCIPALE

CREARE PAGINE WEB SUDDIVISE IN FRAME Abbiamo già osservato che alcuni browser non supportano i frame: è quindi utile inserire del codice che avverta della presenza dei frame e quindi dellimpossibilità da parte dei browser di visualizzare correttamente. Si utilizza lelemento NOFRAMES già illustrato. Un esempio di codice potrebbe essere: Spiacente ma il tuo browser non supporta luso di frame. Per visualizzare queste pagine e' necessario scaricare un browser che supporti tale utilizzo. Ti consiglio Netscape 3.0.

CREARE PAGINE WEB SUDDIVISE IN FRAME Indicazioni : quando si vuole utilizzare i frame per creare una pagina web si prevede un file iniziale che funge da indice e definisce la struttura del documento. I contenuti veri e propri sono in altri file HTML che vengono collegati al primo. Ad esempio se vogliamo dividere la finestra in tre riquadri abbiamo bisogno di quattro file: uno per la struttura e tre per riempire le cornici.

LABORATORIO Creiamo tre pagine HTML di tre colori diversi utilizzando un semplice codice. Ad esempio creiamo i file GIALLO.htm, AZZURRO.htm e VIOLA.htm. Questi tre file html forniranno il contenuto dei frame. Creiamo poi il file che determina, con lutilizzo di FRAMESET e di FRAME e dei rispettivi attributi, la struttura vera e propria della pagina che verrà visualizzata.

ESEMPIO: PAGINA DIVISA IN RIGHE CODICE Esempio di utilizzo di frame

ESEMPIO: PAGINA DIVISA IN RIGHE RISULTATO

Esercizio Per le dimensioni dei riquadri si è usato il valore in percentuale: fare un esempio utilizzando i valori espressi in pixel. Fare poi un esempio con lutilizzo del carattere jolly. Verifichiamo insieme il secondo esercizio….

Esempio: utilizzo del carattere jolly CODICE Esempio di utilizzo di frame

Esempio : utilizzo del carattere jolly RISULTATO

ESEMPIO : PAGINA DIVISA IN TRE COLONNE CODICE Esempio di utilizzo di frame

RISULTATO

ESEMPIO: ROWS E COLS CODICE Esempio di utilizzo di frame <FRAMESET COLS="120,200" ROWS="100,100">

ESEMPIO: ROWS E COLS RISULTATO

ESEMPIO: ATTRIBUTO SCROLLING Esempio di utilizzo di frame

ESEMPIO: ATTRIBUTO SCROLLING Risultato: nella pagina gialla compare la barra laterale

Esercizio Creare una pagina divisa in due colonne. La seconda colonna deve avere una barra di scorrimento. Il bordo tra le due colonne deve essere rosso.

ESEMPIO: FRAME NIDIFICATI CODICE Esempio di utilizzo di frame

ESEMPIO: FRAME NIDIFICATI

Verifica sommativa Si propone una prova di verifica semistrutturata: tempo 30 minuti. Verifica

ESERCIZIO: CREARE UNA PAGINA SIMILE ALLA SEGUENTE