DIDATTICA DELLE APPLICAZIONI INFORMATICHE MOD B DOCENTE : G. SALVI SPECIALIZZANDE : R.CERVERA –...

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à all’interno di un ipertesto.


Contenuti: Definizione, proprietà, pro e contro dell’uso dei frame; Sintassi; Attributi; Annidamento;

Metodologia: lezioni mediante l’uso di presentazioni; applicazioni in laboratorio; lavori di gruppo; esercitazioni guidate.

Strumenti : libro di testo; materiale reperito in rete; computer; lavagna ;videoproiettore.


Valutazione : durante le lezioni vengono proposti esercizi di verifica in laboratorio per una valutazione immediata del raggiungimento dell’obiettivo ed eventuale feedback. Alla fine dell’unità 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

L’utilizzo dei frame nasce successivamente al linguaggio HTML: vengono introdotti a partire dalla versione 2 di Netscape e dalla versione 3 di Internet Explorer. Pertanto l’uso dei frame non è supportato da tutti i browser.

I FRAME

Un’applicazione 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 dell’elenco.

Cambiando scelta,nella prima finestra rimane l’elenco e cambia solo il contenuto della seconda finestra

I FRAME

Esempio :

PAGINAMENU’

VANTAGGI

Dal punto di vista dell’utente

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 nell’uso dei frame per non appesantire la realizzazione del sito.

Per alcuni browser si possono verificare problemi di compatibilità in quanto non supportano l’utilizzo 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 l’intestazione 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<FRAMESET lista attributi>

<FRAME SCR=“Url lista_attributi>



<NOFRAMES> Codice HTML visualizzato da browser che non supportano i frame

</NOFRAMES>

</FRAMESET>

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

L’attributo ROWS raccoglie i valori per l’altezza 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

< FRAMESET ROWS = “40%,60%”>

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

<FRAMESET ROWS = “150,600”>

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

<FRAMESET ROWS = “ 150,*”>

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

L’attributo COLS viene usato in modo analogo all’attributo ROWS riferito però alle colonne.

Esempio

<FRAMESET COLS=“35%,65%”> crea due finestre verticali con dimensioni espresse in percentuale della dimensione della finestra del browser.

ESEMPIO

<FRAMESET COLS=“180,250,*”> crea tre colonne con dimensioni espresse in pixel

Framelateralesinistro

fisso180pixel

Frame centrale fisso 250 pixel

Frame laterale destroche varia occupando

il rimanente spazio dellafinestra

ALTRI ATTRIBUTI DI FRAMESETUfficialmente FRAMESET non ha attributi per la

visualizzazione, ma alcuni attributi sono entrati convenzionalmente nell’uso 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: <FRAMESET

BORDERCOLOR=“RED”>

Esempio:<FRAMESET BORDER=“40”>

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.

L’elemento frame ha una serie di attributi e non necessita del tag di chiusura

ATTRIBUTI DI FRAME

SRC = “url” definisce l’indirizzo del file html che verrà visualizzato nella sezione frame del frameset. In effetti non è altro che il file html da visualizzare.

<FRAME SRC = “nome_file.html”>

ATTRIBUTI DI FRAME

NAME =“ nome_frame” assegna il nome al frame

<FRAME NAME = “TITOLO”>

FRAMESPACING =“valore” definisce lo spazio in pixel da lasciare intorno al frame ed è riconosciuto dai soli browser IE.

<FRAME FRAMESPACING =“100”>

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.

<FRAMESET MARGINWIDTH =“valore”>

MARGINHEIGHT=“valore” forza il rientro sui lati, superiore e inferiore, in base al valore numerico inserito. Non accetta il valore 0.

<FRAMESET MARGINHEIGHT = “valore”>

ATTRIBUTI DI FRAME

SCROLLING specifica se deve esserci la barra laterale di scorrimento della finestra.

In effetti questo attributo indica se si vuol consentire all’utente di poter scorrere il frame oppure no.

ATTRIBUTI DI FRAME

L’attributo SCROLLING ha tre parametri:

<FRAME SCROLLING =“auto”> compare lo scrolling solo se necessario ( valore di default)

<FRAME SCROLLING =“yes”> visualizza sempre lo scrolling

ATTRIBUTI DI FRAME

<FRAME SCROLLING =“no”> 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 scrolling”no”, 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:

<FRAME FRAMEBORDER =“yes”> (valore di default)

<FRAME FRAMEBORDER =“no”> non viene visualizzato il bordo

ELEMENTO NOFRAMES L’elemento NOFRAMES serve per creare

un’alternativa a quei browser che non supportano l’uso dei frame . Conviene pertanto creare un’alternativa o semplicemente un messaggio di avviso fra i tag <NOFRAMES> …..</NOFRAMES>

< NOFRAMES> spiacente ma il tuo browser non supporta i frame </NOFRAMES>

NIDIFICAZIONE DEI FRAME

È possibile inserire all’interno 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 dell’indice.

È importante non eccedere nelle nidificazioni per non rendere la pagina troppo confusa.

ESEMPIO

SPAZIO PER UN BANNER

INDICESPAZIO 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 dell’impossibilità da parte dei browser di visualizzare correttamente. Si utilizza l’elemento NOFRAMES già illustrato. Un esempio di codice potrebbe essere:

<HTML><NOFRAMES> <BODY> Spiacente ma il tuo browser non supporta l’uso di frame. Per visualizzare queste pagine e' necessario scaricare un browser

che supporti tale utilizzo. Ti consiglio Netscape 3.0 . </BODY> </NOFRAMES> </HTML>

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 l’utilizzo 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<HTML>

<HEAD>

<TITLE>Esempio di utilizzo di frame</TITLE>

</HEAD>

<FRAMESET ROWS="20%,80%">

<FRAME NAME="PAGINA GIALLA" SRC="GIALLO.htm">

<FRAME NAME="PAGINA AZZURRA" SRC="AZZURRO.htm">

</FRAMESET>

</HTML>

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 l’utilizzo del carattere jolly .

Verifichiamo insieme il secondo esercizio….

Esempio: utilizzo del carattere jollyCODICE

<HTML>

<HEAD>


</HEAD>

<FRAMESET ROWS="300,*">



</FRAMESET>

</HTML>

Esempio : utilizzo del carattere jollyRISULTATO

ESEMPIO : PAGINA DIVISA IN TRE COLONNE

CODICE

<HTML>

<HEAD>


</HEAD>

<FRAMESET COLS="120,200,400">



<FRAME NAME="PAGINA VIOLA" SRC="VIOLA.htm">

</FRAMESET>

</HTML>

RISULTATO

ESEMPIO: ROWS E COLS

CODICE

<HTML>

<HEAD>


</HEAD>

<FRAMESET COLS="120,200"

ROWS="100,100">



<FRAME NAME="PAGINA VIOLA" SRC="VIOLA.htm">


</FRAMESET>

</HTML>

ESEMPIO: ROWS E COLSRISULTATO

ESEMPIO: ATTRIBUTO SCROLLING

<HTML>

<HEAD>


</HEAD>

<FRAMESET ROWS="300,*">

<FRAME NAME="PAGINA GIALLA" SRC="GIALLO.htm" SCROLLING="YES">


</FRAMESET>

</HTML>

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 NIDIFICATICODICE

<HTML>

<HEAD>


</HEAD>

<FRAMESET COLS="20%,80%"BORDER="20">

<FRAME NAME="PAGINA GIALLA" SRC="GIALLO.htm"SCROLLING="auto">

<FRAMESET ROWS="10%,90%">

<FRAME NAME="PAGINA AZZURRA" SRC="AZZURRO.htm" SCROLLING="yes">

<FRAME NAME="PAGINA VIOLA" SRC="VIOLA.htm"SCROLLING="yes">

</FRAMESET>

</FRAMESET>

</HTML>

ESEMPIO: FRAME NIDIFICATI

Verifica sommativa

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

Verifica

ESERCIZIO: CREARE UNA PAGINA

SIMILE ALLA SEGUENTE

DIDATTICA DELLE APPLICAZIONI INFORMATICHE MOD B DOCENTE : G. SALVI SPECIALIZZANDE : R.CERVERA –...

Documents

Transcript of DIDATTICA DELLE APPLICAZIONI INFORMATICHE MOD B DOCENTE : G. SALVI SPECIALIZZANDE : R.CERVERA –...