Post on 01-May-2015
transcript
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.
UNITA’ DIDATTICA I FRAME
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.
UNITA’ DIDATTICA I FRAME
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>
<FRAME SCR=“Url 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>
<TITLE>Esempio di utilizzo di frame</TITLE>
</HEAD>
<FRAMESET ROWS="300,*">
<FRAME NAME="PAGINA GIALLA" SRC="GIALLO.htm">
<FRAME NAME="PAGINA AZZURRA" SRC="AZZURRO.htm">
</FRAMESET>
</HTML>
Esempio : utilizzo del carattere jollyRISULTATO
ESEMPIO : PAGINA DIVISA IN TRE COLONNE
CODICE
<HTML>
<HEAD>
<TITLE>Esempio di utilizzo di frame</TITLE>
</HEAD>
<FRAMESET COLS="120,200,400">
<FRAME NAME="PAGINA GIALLA" SRC="GIALLO.htm">
<FRAME NAME="PAGINA AZZURRA" SRC="AZZURRO.htm">
<FRAME NAME="PAGINA VIOLA" SRC="VIOLA.htm">
</FRAMESET>
</HTML>
RISULTATO
ESEMPIO: ROWS E COLS
CODICE
<HTML>
<HEAD>
<TITLE>Esempio di utilizzo di frame</TITLE>
</HEAD>
<FRAMESET COLS="120,200"
ROWS="100,100">
<FRAME NAME="PAGINA GIALLA" SRC="GIALLO.htm">
<FRAME NAME="PAGINA AZZURRA" SRC="AZZURRO.htm">
<FRAME NAME="PAGINA VIOLA" SRC="VIOLA.htm">
<FRAME NAME="PAGINA GIALLA" SRC="GIALLO.htm">
</FRAMESET>
</HTML>
ESEMPIO: ROWS E COLSRISULTATO
ESEMPIO: ATTRIBUTO SCROLLING
<HTML>
<HEAD>
<TITLE>Esempio di utilizzo di frame</TITLE>
</HEAD>
<FRAMESET ROWS="300,*">
<FRAME NAME="PAGINA GIALLA" SRC="GIALLO.htm" SCROLLING="YES">
<FRAME NAME="PAGINA AZZURRA" SRC="AZZURRO.htm">
</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>
<TITLE>Esempio di utilizzo di frame</TITLE>
</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