Scuola: Istituto Tecnico, settore Tecnologico, indirizzo Informatica (Indicazioni Nazionali, D.P.R. 15 marzo 2010, n. 88).
Corso: Informatica
Classe: Terza
Ore annue: 198
Ore settimanali: 6
Insegnante: compresenza con insegnante tecnico pratico per le attività laboratoriali.
HTML/CSS: tag/proprietà id, div, class e span.
Classe di concorso: A41 - Scienze e Tecnologie Informatiche
Candidato: Santo Strati
Contesto
Contenuti
Verbalizzazione: appunti di classe condivisi.
Redazione di un quaderno degli appunti della classe: ad ogni lezione un alunno (che cambia di lezione in lezione, procedendo secondo l’ordine alfabetico) è incaricato di prendere gli appunti con particolare cura; e ha il compito di trascriverli a casa in un file condiviso visibile a tutta la classe, ad esempio su Dropbox o su Google Drive; l'insegnante suggerisce eventuali correzioni o commenti.
Criteri e modalità di valutazione
Classe alla quale il percorso si rivolge
Controllo dell’apprendimento
Durante le lezioni
Sintassi (N - N)
Continuazione - Prima lezione
Contenitori
Attività cooperativa svolta in gruppi
Verifica diretta della partecipazione e del comportamento. Messo in atto nel corso stesso delle lezioni coinvolgendo direttamente e attivamente gli alunni e testando la comprensione dei concetti esposti attraverso domande ed interventi alla lavagna/LIM.
Insieme di regole -> associazione tra tag ed elementi del linguaggio HTML a dettagliate caratteristiche di presentazione.
http://smbit.it/atm/webclac.py?s=12405,12402
Progettare con fogli di stile collegati una pagina come quella mostrata in figura:
Prova di verifica
Griglia di valutazione
BES
Esempio di domanda aperta
Descrivi con pertinenza i vantaggi nell’uso dei CSS.
Disabili
Ogni elemento HTML ha un valore di visualizzazione di default che dipende dal suo tipo.
La modalità di visualizzazione per la maggior parte degli elementi è block o inline.
Presentazione visualizzabile all'URL
Con CSS
Esempio di esercizio
Modificare il codice di una pagina html con CSS inline in modo tale che il titolo di livello 2 abbia un font di grandezza 2em.
Ad ogni risposta interamente corretta è assegnato un punteggio di 1. Quindi, alle domande vero o falso viene assegnato un punteggio di 0,25 per ogni risposta corretta.
Senza CSS
Prove equipollenti: diverse nei modi, ma non nei risultati dell’accertamento.
Esempio di vero o falso
Con l’uso dei fogli di stile le pagine Web vengono caricate più velocemente. [Vero] [Falso]
Prove differenziate: coerenti con il percorso svolto e finalizzate unicamente al rilascio dell’attestazione delle competenze.
Il linguaggio CSS prevede una sintassi che identifica esplicitamente un selettore e le regole di presentazione ad esso associate.
Esempio di risposta multipla
Quale tra i seguenti è il tag che definisce un foglio di stile incorporato?
a) <TYPE STYLE =”text/css”> ...... </TYPE>
b) <CSS TYPE=”text/css”> ...... </CSS >
c) <STYLE SHEET=”text/css”> ...... </STYLE >
d) <STYLE TYPE=”text/css”> ...... </STYLE >
Nel caso supposto di dislessia è prevista una versione del questionario con i seguenti accorgimenti:
• Usare caratteri senza grazie (sans serif) per esempio Verdana o Arial.
• Usare caratteri con dimensione 12/14 pt.
• Non usare il maiuscolo per più di 5 righe.
• La larghezza della riga non deve essere superiore ai 13 cm (60-70 caratteri)
• Lasciare uno dei due margini più ampio.
• Giustificare solo a sinistra.
• Non andare mai a capo spezzando una parola.
• Per evidenziare un concetto usare il grassetto e non il sottolineato.
• Dividere in paragrafi.
• Impiegare elenchi puntati o numerati.
- 30% in più di tempo (misura dispensativa)
DSA
- riduzione quantitativa, ma non qualitativa;
- coerenti con quanto stabilito nel PDP;
- padronanza dei contenuti, prescindendo dagli errori connessi al disturbo.
Alla fine dell’unità di apprendimento
Div
Collocazione nel curricolo
Profilo
Motivazione - Importanza dell’argomento
L'argomento viene trattato al termine del modulo relativo all’”HTML” e prima della "programmazione WEB - Javascript”.
Profilo Il Diplomato in “Informatica e Telecomunicazioni”:
- ha competenze specifiche nel campo dei sistemi informatici, dell’elaborazione dell’informazione, delle applicazioni e tecnologie Web, delle reti e degli apparati di comunicazione;
[ ... ]
Per ogni selettore si dichiara una o più proprietà di stile (separazione ";", raggrupamento {}).
selettore {
proprietà-1: valore-1;
proprietà-1: valore-2;
...
proprietà-1: valore-N;
}
Periodo di realizzazione
L’argomento relativo alle proprietà e tag CSS è particolarmente importante perché pregnante l’intero mondo del WEB 2.0 (webapp). Il nuovo web, insieme all’incalzante Cloud, ha eretto il suo browser a software tuttofare; oggi non abbiamo quasi più bisogno di scaricare e installare applicazioni sul nostro computer, bensì possiamo utilizzarle direttamente “nel web” rendendo, di fatto, il sistema operativo e il browser di navigazione gli unici software indispensabili.
L’argomento oggetto di studio rappresenta una delle aree del terzo anno del corso di studi dell’Istituto Tecnico, settore Tecnologico, indirizzo Informatica.
Esso s’inserisce nel percorso didattico previsto del secondo quadrimestre.
L'elemento <div> è un elemento di livello blocco ed spesso utilizzato come contenitore di altri elementi HTML.
Un elemento di tipo blocco inizia sempre con una nuova linea ed occupa tutta la larghezza del documento disponibile.
Non richiede attributi anche se spesso viene utilizzato con style e class (tabelle).
È in grado di:
- collaborare, nell’ambito delle normative vigenti, ai fini della sicurezza sul lavoro e della tutela ambientale e di intervenire nel miglioramento della qualità dei prodotti e nell’organizzazione produttiva delle imprese;
- collaborare alla pianificazione delle attività di produzione dei sistemi, dove applica capacità di comunicare e interagire efficacemente, sia nella forma scritta che orale;
[ ... ]
La valutazione finale è fatta attraverso la proposta agli alunni di un questionario costituito da 10 quesiti: 2 domande aperte, 1 esercizio, 4 domande con risposta a scelta multipla e 3 batterie di domande vero o falso (4 ciascuna).
Le risposte errate (item distrattori) sono formulate in maniera da essere credibili/plausibili.
La scelta di tale tipo di verifica mista è fatta in quanto garantisce una preparazione da parte dei ragazzi non mirata. Essa permette una valutazione delle conoscenze acquisite dal ragazzo permettendo di risalire al processo mentale (domande aperte) messo in atto dall’alunno per dare la risposta mentre i test a scelta multipla (o vero/falso) offrono il vantaggio di una griglia di valutazione univoca e semplice.
Gli esercizi verificano le abilità del ragazzo nella risoluzione di problemi.
tenendo conto della sottostante struttura.
Richiamo sull'HTML
CSS
Cronologia
Una proprietà può essere associata a più selettori semplicemente elencandoli con il simbolo "," come separatore:
Il foglio CSS (Cascading Style Sheet, foglio di stile a cascata) è un documento in formato testuale che definisce il controllo sulla visualizzazione della pagina HTML e sul suo layout, cioè la disposizione degli elementi nella pagina, con le caratteristiche di stile riguardanti i font, i colori, gli allineamenti e le spaziature.
HTML, HyperText Markup Language (linguaggio a marcatori per ipertesti) è il principale mezzo utilizzato per l’authoring (formattazione e impaginazione) di documenti online disponibili nel World Wide Web sotto forma di pagine web, nato assieme al Web 1.0 nel 1991 grazie a Tim Tim Berners-Lee.
È un linguaggio di pubblico dominio, la cui sintassi è stabilita dal World Wide Web Consortium (W3C).
Da un punto di vista puramente teorico, HTML utilizza una sintassi piuttosto semplice:
• una struttura gerarchica di tag (etichette);
• parametri nome = valore;
• nodi testuali che formano il corpo del documento.
Esempio di uso <div> inline
Esempio di uso di <div> con CSS collegato
Codice
File style.css
Altri esempi di elementi di tipo blocco sono:
Risultato
selettore-1, selettore-2, ..., selettore-N { proprietà: valore; }
Recupero e/o Potenziamento
HTML e CSS
Span
Selettori
Gli studenti che riportano una valutazione insufficiente nella verifica sommativa possono partecipare agli incontri pomeridiani disponibili e verifica di recupero da concordare con i ragazzi.
Per coloro che desiderino migliorare la propria valutazione possono approfondire una tematica nell'ambito a scelta. Verrà successivamente discussa con l’insegnante durante la verifica di recupero.
Indadeguatezza dell'HTML su più pagine nonostante la personalizzazione della visualizzazione.
Esempio <H1>.
Il tag <span> è un elemento di tipo inline, cioè significa che segue il flusso della linea senza generare un ritorno a capo. È spesso utilizzato come contenitore di altri elementi diversi della stessa riga di un documento.
Un selettore può essere:
• un tag predefinito del linguaggio HTML (<h1>, <p>, <td>, ecc.);
• una classe definita dall’utente; lo stile viene poi richiamato nella pagina HTML con l’attributo class:
http://tinyurl.com/zqb8vwl
Impieghi dei selettori
CSS come soluzione: sepazione tra contenuti e dal layout attraverso livelli di astrazione (trasformazione controllata).
Non comporta, di default, nessun cambiamento visivo per il testo marcato. Il suo utilizzo tipico consiste nel raggruppare elementi testuali per poi stilizzari mediante i CSS oppure manipolarli attraverso Javascript.
Mentre la classe definisce le caratteristiche di paragrafi e singole parti di una pagina HTML, gli identificatori vengono solitamente utilizzati per definire il layout di una pagina suddivisa in contenitori (o sezioni), identificati con i tag <div> ... <div>.
class = "nomeclasse"
Margini di flessibilità
L'insegnante può modificare in itinere la tipologia di lezione in virtù dell'esperienza maturata nel corso dell'anno e dei riscontri immediati.
Nel foglio di stile il nome degli identificatori è preceduto dal carattere #, mentre il nome delle classi è preceduto dal punto (.).
Vantaggi
Accesso a <span>
Esempio <span>
<div> e <span>
L'oggetto Span rappresenta un elemento HTML <span> al quale si può accedere tramite getElementById().
Codice
Un identificatore definito dall’utente che individua le caratteristiche di una parte del documento con l'attributo id:
- Separazione dei contenuti dalle caratteristiche di visualizzazione;
- Maggiore controllo sulla rappresentazione di documenti omogenei;
- Indipendenza dal dispositivo e quindi migliore accessibilità.
Codice
Pseudoselettori
Risultato
Metodi di inserimento
Priorità - Cascata
#navbar a:link, #navbar a:visited {
color: navy;
text-decoration: none
}
Fogli di stile in linea
Le proprietà di stile in linea vengono innestate direttamente e lo stile viene applicato solo a quel particolare tag (attributo style).
I selettori a:link e a:visited si chiamano pseudoselettori.
Contemporaneità tra le tre modalità di uso dei fogli CSS esposte precedentemente, però a cascata, cioè secondo regole predefinite di priorità per l’unione di più fogli di stile (in ordine crescente):
id = "identificatore"
Esistono tre principali metodi per utilizzare i CSS all’interno dei documenti HTML:
• Fogli di stile in linea (DEM).
• Fogli di stile incorporati.
• Fogli di stile collegati.
Risultato
Fogli di stile incorporati
Astrazione maggiore: la struttura di ogni stile viene definita, attraverso il tag <style>, all’interno dell’intestazione del documento definita dai tag <head> ... </head>.
1. Impostazione predefinite del browser Web.
2. Fogli di stile collegati.
3. Fogli di stile incorporati.
4. Fogli di stile in linea.
Fogli di stile collegati
Definizione di un foglio di stile separato dal documento e registrato in un file esterno avente estensione .css collegato alla singola pagina attraverso il tag <link>, inserito all’inizio della pagina. Permette condivisione tra più pagine o da un intero sito Web.
style.css
Un foglio di stile in linea ha quindi la precedenza su ogni altro foglio di stile.
N.B. Possono essere caricati più fogli di stile e diversi media.
Requisiti di conoscenze e competenze richieste
Accertamento dei prerequisiti
BES
Domande sulla struttura di una pagina HTML e sui tag.
Ausili, strumenti compensativi e misure dispensative
Stimolo iniziale
Didattica individualizzata
Attività di recupero calibrata sul singolo per potenziare (in classe o in momenti dedicati) determinate abilità o acquisire competenze specifiche, per il raggiungimento degli obiettivi comuni al gruppo classe attraverso una diversificazione dei percorsi di insegnamento.
Didattica personalizzata
Può porsi obiettivi diversi per ciascun discente per far si che ognuno sviluppi i propri personali talenti attraverso pluralità di percorsi formativi e possibilità di scelta da parte dell’alunno.
Ottica Inclusiva
Area dello Svantaggio Scolastico - DM. 27.12.2012
- Interventi didattici in aula attuati mediante la sinergia tra i docenti curricolari e i docenti di sostegno.
- Il PEI definisce gli elementi chiave -> Ausili.
VARK
- Stile di insegnamento stile visivo (tramite immagini)
- Stile cinestesico (tramite l’esperienza diretta e osservazione di quello che fanno gli altri studenti).
- Stili di apprendimento in base al disturbo.
- Il PDP definisce gli strumenti compensativi e le misure compensative.
Continua nella prima lezione...
L’inclusione è un processo, si riferisce alla globalità delle sfere educativa, sociale e politica, guarda a tutti gli alunni (indistintamente/differentemente) e a tutte le loro potenzialità, interviene prima sul contesto, poi sul soggetto e trasforma la risposta specialistica in ordinaria. Presuppone una posizione più dinamica/coinvolta per rispondere alle necessità della persona in formazione.
Qualsiasi difficoltà evolutiva, in ambito educativo ed apprenditivo, espressa come funzionamento problematico anche per il soggetto (secondo il modello ICF dell'OMS), in termini di danno, ostacolo o stigma sociale, indipendentemente dall'eziologia, e che necessita di educazione speciale individualizzata. - Dario Ianes
Materiali, laboratori, strumenti utilizzati
- Libro di testo.
- Appunti condivisi.
- Lavagna.
- Laboratori.
- LIM / Videoproiettore.
- Siti WEB: http://www.w3schools.com/
- Google Coder (Raspberry PI)
Obiettivi formativi
Metodologie didattiche
In ottica competenza chiave -> digitale
Conoscenze
Principi strategici dell’apprendimento multimediale
Il principio multimediale
Secondo il quale si apprende meglio da una presentazione che associa parole a figure (come ad esempio grafici, fotografie e immagini
Il principio di contiguità spazio-temporale
La presentazione simultanea e la vicinanza delle parole e delle figure permettono un’aggregazione più immediata delle informazioni.
Nel contesto dei linguaggi per la definizione delle pagine WEB:
- Concetto dicotomico: contenuto e rappresentazione/layout.
- Concetto di tag, selettore, proprietà e valore (CSS).
Il principio della ridondanza
La ridondanza di informazioni non favorisce l’apprendimento, ma al contrario ne riduce la qualità perché impegna senza reale vantaggio la memoria.
- Lezione socratica / partecipata.
- Team-teaching (compresenza di docenti).
- Apprendimento collaborativo/cooperativo (attività laboratoriale).
Il principio di coerenza e rilevanza
La memoria di lavoro (a breve termine) ha una capacità limitata; eliminare le parole e le figure irrilevanti è d’obbligo.
Abilità
Il principio di modalità
Si apprende più facilmente se le immagini sono accompagnate da narrazioni audio piuttosto che da testi scritti.
Il principio di personalizzazione
L’apprendimento è agevolato quando i partecipanti si sentono coinvolti in un’esperienza sociale. Lo stile informale (da non confondersi con uno stile amichevole) può dunque essere d’aiuto.
- Saper progettare, realizzare e gestire pagine web statiche.
- Saper progettare e realizzare interfacce utente (web based).
Modularità
Competenze
Il percorso didattico prevede sei interventi per un totale di sette ore.
Nella seguente tabella vengono riportati i tempi preventivati per ogni intervento, tenendo presente che la modalità di svolgimento porta a considerare tali tempi con un certo margine di flessibilità.
Nel contesto dello sviluppo applicazioni informatiche per reti locali o servizi a distanza:
- Rendersi conto dell’importanza della divisione di compiti di elementi diversi per l'ottenimento del risultato desiderato.
Le modalità di lavoro prevalenti consistono nelle lezioni partecipate tramite l’ausilio della LIM ed attività laboratoriali di gruppo (progetto e implementazione). Vengono mostrati degli esempli pratici a cui seguiranno le sperimentazioni degli allievi stimolando delle capacità di analisi e problem solving. Vengono utilizzati esempi e modelli presi dall’esperienza quotidiana degli allievi con gli strumenti tecnologici per sottolineare la relazione tra l’informatica teorica e l’applicazione pratica. Saranno proposte anche piccole attività di ricerca da svolgere a casa. Al termine di ogni lezione, si esaminerà il materiale prodotto individualmente e a gruppi per valutare il livello di apprendimento.