Introducing 

Prezi AI.

Your new presentation assistant.

Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.

Loading…
Transcript

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:

  • <h1> - <h6>
  • <p>
  • <form>

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

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

Risultato

#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

HTML

Accertamento dei prerequisiti

Durata 5-10 minuti

BES

Domande sulla struttura di una pagina HTML e sui tag.

Ausili, strumenti compensativi e misure dispensative

Stimolo iniziale

Con o senza CSS?

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.

08/07/2016

Learn more about creating dynamic, engaging presentations with Prezi