Diario delle Lezioni - A.A. 2023/2024

Lezioni totali: 24, ore erogate: 48 (100%) - Prima lezione: 27/02/2024, Ultima lezione: 28/05/2024

Lezione 1: Il web moderno: tecnologie, sfide, problemi

27/02/2024, ore 16:30 (2 ore)

  • (1-1)
    Presentazione del corso
  • (1-2)
    Le origini del Web
  • (1-3)
    L'architettura client-server
  • (1-4)
    Web 2.0: Rich Internet Applications, Social Web
  • (1-5)
    I problemi del web odierno: accessibilità, fruibilità cross-browser, sicurezza, usabilità, mobile first,...
  • (1-6)
    Le tecnologie per il web: lato client (HTML5, CSS3 e responsive design, Javascript, AJAX)
  • (1-7)
    Le tecnologie per il web: lato server (Java servlets, JDBC, Freemarker templates)
  • (1-8)
    La realizzazione di un'applicazione web secondo il pattern MVC: il modello dei dati, la logica, la presentazione
  • (1-9)
    Il protocollo HTTP

Lezione 2: XML

29/02/2024, ore 09:30 (2 ore)
Slides XML

  • (2-1)
    Cosa è e cosa non è XML
  • (2-2)
    Sintassi base di un documento XML: la dichiarazione XML
  • (2-3)
    Esempio Problemi con il character encoding
  • (2-4)
    Character encoding: cos'è veramente UTF-8? (e UTF-16? e ISO-8859-1??)
  • (2-5)
    Esempio Character encoding: può essere anche un problema di sicurezza: l'attacco UTF-7
  • (2-6)
    Sintassi base di un documento XML: la dichiarazione DOCTYPE
  • (2-7)
    Esempio Dichiarare correttamente la versione di HTML un uso
  • (2-8)
    Standards e Quirks mode per i browser
  • (2-9)
    Sintassi base XML: Elementi e regole sintattiche
  • (2-10)
    Esempio Problemi comuni legati alla sintassi degli elementi
  • (2-11)
    Sintassi base XML: Attributi e regole sintattiche
  • (2-12)
    Esempio Problemi comuni legati alla sintassi degli attributi
  • (2-13)
    Sintassi base XML: i namespaces
  • (2-14)
    Sintassi base XML: Testo ed entità carattere
  • (2-15)
    Esempio Attacchi XSS e uso corretto delle entità per i caratteri riservati
  • (2-16)
    Sintassi base XML: le sezioni CDATA
  • (2-17)
    Esempio Il problema degli script incorporati nelle pagine HTML
  • (2-18)
    Sintassi base XML: le processing instruction
  • (2-19)
    Sintassi base XML: i commenti

Lezione 3: HTML /1

05/03/2024, ore 16:30 (2 ore)
Slides HTML

  • (3-1)
    L'evoluzione di HTML
  • (3-2)
    Mantenersi al passo con il living standard: siti di riferimento
    link https://developer.mozilla.org/en-US/docs/Web/HTML
    link https://html.spec.whatwg.org
  • (3-3)
    Controllare e correggere il proprio HTML: i validatori
    link https://validator.w3.org
  • (3-4)
    Concetti di base URI, URL, media types...
  • (3-5)
    Standards e Quirks mode per i browser
  • (3-6)
    Struttura base dei documenti HTML4 e HTML5
  • (3-7)
    HTML: elementi blocco e inline
  • (3-8)
    La nuova classificazione degli elementi in HTML5
  • (3-9)
    HTML: gli attributi comuni (id, class, style, title, lang, ...)
  • (3-10)
    Nuovi attributi comuni in HTML5: data, aria,...
    materiale HTML_Examples - HTML5
  • (3-11)
    Esempio Uso degli attributi ARIA nei layout complessi e personalizzati.
    link https://www.w3.org/WAI/standards-guidelines/aria
  • (3-12)
    HTML: i paragrafi e le interruzioni (p, br)
  • (3-13)
    Esempio Paragrafi vuoti, ritorni a capo, ecc.: tutti i modi sbagliati per aggiungere spazi verticali in un documento
  • (3-14)
    Marcare la struttura base di un documento: gli elementi h
  • (3-15)
    L'importanza semantica del markup corretto
  • (3-16)
    I nuovi elementi di sezionamento in HTML5
    materiale HTML_Examples - HTML5
  • (3-17)
    Esempio Rendering dei vari elementi HTML nei browser
    materiale HTML_Examples
  • (3-18)
    HTML: i contenitori (div, span)
  • (3-19)
    HTML: la formattazione semantica (em, code, pre, ins, q,...)
  • (3-20)
    HTML: la formattazione di base (i, b, tt,...)
  • (3-21)
    Esempio Nuovo comportamento di alcuni tag di formattazione in HTML5
    link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i
  • (3-22)
    Le liste come elemento semantico nei layout complessi
  • (3-23)
    Esempio Creare menu che "degradano bene" usando le liste
    materiale css_menu_multilev_static

Lezione 4: HTML /2

07/03/2024, ore 09:30 (2 ore)
Slides HTML

  • (4-1)
    HTML: le liste (ol, ul, dl)
  • (4-2)
    HTML: le tabelle (table)
    materiale HTML_Examples - Tables
  • (4-3)
    Gli attributi dell'elemento table in HTML5
  • (4-4)
    Struttura semplice di tabella: righe (tr), celle (td) e celle di intestazione (td)
  • (4-5)
    Struttura completa di tabella: intestazione (thead), corpo (tbody), piè di tabella (tfoot)
  • (4-6)
    Esempio Attenzione all'elemento tbody implicito...
  • (4-7)
    Costruire tabelle complesse con colspan e rowspan
  • (4-8)
    Dichiarare le colonne (col) e i gruppi di colonne (colgroup)
  • (4-9)
    Le immagini nelle pagine web (img)
    materiale HTML_Examples - Images
  • (4-10)
    Accessibilità delle immagini: l'attributo alt
  • (4-11)
    Resizing delle immagini client side
  • (4-12)
    Le mappe immagine server e client side
  • (4-13)
    I nuovi elementi HTML5 video, audio e canvas
  • (4-14)
    Collegamenti logici tra risorse (link)
  • (4-15)
  • (4-16)
    Esempio Documenti alternativi
  • (4-17)
    Esempio Collagamento di fogli di stile esterni
  • (4-18)
    Esempio Collegare un feed RSS a una pagina
  • (4-19)
    Esempio Collegare una shortcut icon a una pagina
  • (4-20)
    Esempio Ottimizzare il caricamento di una pagina: i link di tipo preload e prefetch
    link https://developer.mozilla.org/en-US/docs/Web/Performance/Speculative_loading
    link https://caniuse.com/link-rel-prefetch
    link https://caniuse.com/link-rel-preload

Lezione 5: HTML /3

12/03/2024, ore 16:30 (2 ore)
Slides HTML

  • (5-1)
    I collegamenti ipertestuali (a)
  • (5-2)
    Ancore nei documenti e fragment identifiers
  • (5-3)
    Esempio Saltare rapidamente al contenuto di una pagina
  • (5-4)
    Differenze tra metodo GET e POST
  • (5-5)
    La codifica dei dati nelle form
  • (5-6)
    I moduli in HTML (form)
  • (5-7)
    Attributi importanti delle form: action, method, enctype e accept-charset
    link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
  • (5-8)
    Esempio Scegliere la giusta combinazione di metodo ed encoding per una form
  • (5-9)
    Esempio Il pattern POST-Redirect-GET per la sottomissione di form
    link https://en.wikipedia.org/wiki/Post/Redirect/Get
    materiale Java_Example_Post_Redirect_Get
  • (5-10)
    Esempio Usare accept-charset per risolvere ulteriori problemi di encoding (stavolta tra il client e il server)
  • (5-11)
    Gli elementi di input utente (input)
  • (5-12)
    Esempio Confronto del rendering in vari browser per i controlli di input
    materiale HTML_Examples - Forms
  • (5-13)
    Esempio I valori sottomessi da campi non testuali: file, checkbox, radio,...
  • (5-14)
    Esempio Impedire la trasmissione di un campo di form con l'attributo disabled
  • (5-15)
    Gli attributi di validazione in HTML4 e HTML5 (maxlength, min, max, pattern,...)
  • (5-16)
    Esempio Come (e dove) validare i dati inviati da una form

Lezione 6: Java Web Applications

14/03/2024, ore 09:30 (2 ore)
Slides HTML, Servlets

Lezione 7: Java Servlets /1

19/03/2024, ore 16:30 (2 ore)
Slides Servlets
Materiale JakartaEE Web Application tutorial, JavaEE (legacy) specification

  • (7-1)
    Le servlet e i container
  • (7-2)
    Introduzione alla programmazione delle servlet
  • (7-3)
    Il contesto di una web application e l'url mapping nei servlet container
  • (7-4)
    La struttura di base di una web application
  • (7-5)
    Struttura (fisica) di una web application
  • (7-6)
    Esempio Creare una nuova applicazione web
    materiale Java_WebApp_Base_T9
  • (7-7)
    Esempio Il project object model (POM) di una semplice web application
  • (7-8)
    Esempio Compilazione, deploy ed esecuzione di una web application
  • (7-9)
    Il file di configurazione del contesto (context.xml)
    link https://tomcat.apache.org/tomcat-10.0-doc/appdev/deployment.html
  • (7-10)
    Esempio Aggiungere risorse statiche (html, css, ecc.) a una web application
  • (7-11)
  • (7-12)
    Deployment alternativo: l'annotazione Servlet 3 @WebServlet
    materiale Java_WebApp_Base_T9_Alt
  • (7-13)
    Esempio Adattare il progetto di base per eseguirlo su JakartaEE/Tomcat 10
    materiale Java_WebApp_Base_T10

Lezione 8: Java Servlets /2

21/03/2024, ore 09:30 (2 ore)
Slides Servlets
Materiale JakartaEE Servlet tutorial, JavaEE Servlet specification

  • (8-1)
    Esempio Aggiungere una nuova servlet in una web application
  • (8-2)
    Le interfacce base delle servlet: Servlet, ServletRequest, ServletResponse
  • (8-3)
    Il ciclo di vita di una servlet: inizializzazione, servizio, finalizzazione
  • (8-4)
    Inizializzare e finalizzare una servlet: metodi init e destroy
  • (8-5)
    La classe HttpServlet e i metodi doGet e doPost
  • (8-6)
    Multithreading con la classe HttpServlet: variabili per-thread e condivise
  • (8-7)
    Scrivere informazioni verso il client: la classe HttpServletResponse
  • (8-8)
    Output testuale e binario da una servlet
  • (8-9)
    Esempio La servlet "Salutami"
  • (8-10)
    Scrittura degli headers e del payload di un messaggio HTTP
  • (8-11)
    Comunicazione tra gli strati dell'applicazione tramite gli attributi della HttpServletRequest
  • (8-12)
    Gestire efficacemente gli errori e le eccezioni in una servlet
  • (8-13)
    Restituire codici di errore HTTP da una servlet

Lezione 9: Java Servlets /3

26/03/2024, ore 16:30 (2 ore)
Slides Servlets

  • (9-1)
    Gestire l'input utente: uso della classe HttpServletRequest
  • (9-2)
    Elaborazione delle form in modalità GET: i metodi getParameter e getParameterValues
  • (9-3)
    Validare l'input per prevenire attacchi (come la SQL Injection)
  • (9-4)
    Sanitizzare l'output per prevenire attacchi XSS
  • (9-5)
    Esempio La servlet "Salutami" anonima e personalizzata
    materiale Java_Example_Servlet
  • (9-6)
    Incapsulare la logica di output e separare meglio gli strati dell'applicazione
  • (9-7)
    Esempio La servlet "Salutami" con una struttura avanzata
    materiale Java_Example_Servlet_Fwk
  • (9-8)
    Trasmissione di dati binari dalla servlet al client
  • (9-9)
    Considerazioni sulla sicurezza: perchè e come scrivere una download servlet
  • (9-10)
    Alcuni header interessanti: Content-Type, Content-Disposition e Content-Length
  • (9-11)
    Esempio Scrivere una download servlet
    materiale Java_Example_Downloader
  • (9-12)
    Incorporare in una pagina HTML immagini generate da una servlet
  • (9-13)
    Esempio Scrivere una servlet che trasmette immagini al client
    materiale Java_Example_Imager

Lezione 10: Java Servlets /4

04/04/2024, ore 09:30 (2 ore)
Slides Servlets

Lezione 11: Sessioni e Sicurezza

09/04/2024, ore 16:30 (2 ore)
Slides Servlets

Lezione 12: Web Applications e Database

11/04/2024, ore 09:30 (2 ore)
Slides Servlets

  • (12-1)
    Java e i DBMS: richiami sulle nozioni di base del JDBC
  • (12-2)
    Esempio JDBC: aggiungere la dipendenza del driver al POM del progetto
  • (12-3)
    Esempio JDBC: le classi principali (Connection, (Prepared)Statement, ResultSet)
  • (12-4)
    Esempio JDBC: aprire una connessione tramite il DriverManager (sconsigliato nelle applicazioni web!)
  • (12-5)
    Esempio JDBC: eseguire query di inserimento, aggiornamento, cancellazione
  • (12-6)
    Esempio JDBC: eseguire query di selezione
  • (12-7)
    JDBC: chiudere le risorse (resultset, statement e connessioni)
  • (12-8)
    JDBC: precompilazione di query (parametriche)
  • (12-9)
    Esempio Le ragioni per usare un PreparedStatement in una web application: sicurezza (contro la SQL Injection)
  • (12-10)
    Esempio Quando aprire una connessione in una web application/servlet e quando chiuderla
  • (12-11)
    Performance nell'accesso ai dati nelle applicazioni web: il problema delle connessioni
  • (12-12)
    Riutilizzare le connessioni JDBC: il connection pooling
  • (12-13)
    Configurare una sorgente dati JDBC in Tomcat (context.xml)
    link https://tomcat.apache.org/tomcat-9.0-doc/jdbc-pool.html
  • (12-14)
    Riferimento alle risorse nel deployment descriptor
  • (12-15)
    Utilizzare i servizi di naming di Java per ottenere un DataSource
  • (12-16)
    Utilizzare la resource injection di JavaEE per ottenere un DataSource
    link https://jcp.org/en/jsr/detail?id=250
  • (12-17)
    JDBC: aprire una connessione tramite il DataSource (consigliato nelle applicazioni web!)
  • (12-18)
    Esempio Uso del JDBC con connection pooling
    materiale Java_Example_Servlet_Database
  • (12-19)
    Esempio Esempio finale sulle form e i database: un file repository
    materiale Java_Example_Uploader
  • (12-20)
    Esempio Come calcolare il digest di un file
  • (12-21)
    Esempio JDBC: Creare un ResultSet non FORWARD_ONLY e contare il numero di resultati
  • (12-22)
    Esempio JDBC: Leggere le chiavi auto-generate dopo un inserimento
  • (12-23)
    Presentazione dei progetti d'esame

Lezione 13: Modellazione Dati

16/04/2024, ore 16:30 (2 ore)

  • (13-1)
    La realizzazione di un'applicazione web secondo il pattern MVC: il modello dei dati, la logica, la presentazione
  • (13-2)
    Il modello a oggetti dei dati come contratto tra i livelli MVC
  • (13-3)
    Creazione di POJO - JavaBeans per rappresentare le entità del modello dati
  • (13-4)
    Costruire un POJO corretti: costruttore di default, getters e setters
  • (13-5)
    Esempio Creazione degli oggetti entità: interfaccia e implementazione
  • (13-6)
    L'interfaccia a basso livello degli oggetti entità: i proxy
  • (13-7)
    Esempio Marcare gli oggetti entità come modificati nei setter
  • (13-8)
    Esempio Lazy loading delle relazioni: perchè è importante e come si realizza
  • (13-9)
    Creazione dei metodi di accesso ai dati: i DAO
  • (13-10)
    Esempio Factory per oggetti entità
  • (13-11)
    Esempio Caching degli oggetti entità: perchè è importante e come si realizza
  • (13-12)
    Esempio Il modello dati newspaper: un esempio di design e implementazione di un modello dati su MySQL
    materiale Java_Example_SimpleDataModel
  • (13-13)
    Esempio Esempio riassuntivo: un'applicazione base che mostra come realizzare e far interagire model e controller in modo efficace
    materiale Java_Example_BaseApplicationMC

Lezione 14: CSS /1

18/04/2024, ore 09:30 (2 ore)
Slides Servlets, CSS3
Materiale CSS_Examples

  • (14-1)
    Cenni sulle tecniche di locking ottimistico e pessimistico per gestire la concorrenza
  • (14-2)
    Cenni sui ServletContextListener nelle web application java
  • (14-3)
    Cenni sui Filter nelle web application java
    materiale Java_Example_Emailfilter
  • (14-4)
    Presentazione dei fogli di stile CSS
  • (14-5)
    Incorporare i fogli di stile in HTML: elementi style e link
  • (14-6)
    Fogli di stile multipli per uno stesso documento
  • (14-7)
    Fogli di stile persistenti, preferiti e alternativi (scelta utente)
  • (14-8)
    Fogli di stile alternativi legati ai media
  • (14-9)
    Esempio Accorgimenti per la creazione di figli di stile per la stampa (media="print")
    materiale css_inclusion_print
  • (14-10)
    Sintassi delle regole CSS
  • (14-11)
    I selettori semplici
    materiale css_selectors
  • (14-12)
    Selettori di base
  • (14-13)
    Selettori di attributo

Lezione 15: CSS /2

23/04/2024, ore 16:30 (2 ore)
Slides CSS3
Materiale CSS_Examples

  • (15-1)
    Selettori di classe
    materiale css_selectors
  • (15-2)
    Esempio Classi come attributi speciali
  • (15-3)
    Selettori di ID
  • (15-4)
    Forma abbreviata dei selettori di classe e di ID
  • (15-5)
    Esempio Identificare e formattare le strutture di base di un layout
  • (15-6)
    Pseudo classi
  • (15-7)
    Esempio Effetti hover sui link
  • (15-8)
    Esempio Effetti focus sugli input
  • (15-9)
    La pseudo classe :hover nei browser legacy
  • (15-10)
    Esempio Inserire bordi interni in una lista di elementi
  • (15-11)
    Pseudo elementi
  • (15-12)
    Esempio Creare un capolettera
  • (15-13)
    I selettori composti
  • (15-14)
    Esempio Formattare in modo particolare due titoli adiacenti
  • (15-15)
    Le regole di selezione delle proprietà di stile
  • (15-16)
    Priorità di origine, specificità e ordinamento delle regole
  • (15-17)
    Il modificatore !important
  • (15-18)
    Esempio Rispetto delle regole di cascata nei browser
    materiale css_cascade
  • (15-19)
    Ereditarietà delle proprietà di stile
  • (15-20)
    Unità di misura nei CSS
  • (15-21)
    Uso delle misure relative per aumentare l'accessibilità di un sito
  • (15-22)
    Uso delle misure percentuali nei design liquidi e responsive
  • (15-23)
    Specifica dei colori nei CSS
  • (15-24)
    Aggiungere bordi agli elementi
    materiale css_properties_common

Lezione 16: CSS /3

30/04/2024, ore 16:30 (2 ore)
Slides CSS3
Materiale CSS_Examples

  • (16-1)
    Alcune nuove proprietà CSS3 per i box: border-radius e box-shadow
  • (16-2)
    Prefissi dei vendor sulle proprietà css e compatibilità con i browser legacy
  • (16-3)
    Esempio Creare bordi smussati senza immagini con i CSS 3
    materiale css_3_round_borders
  • (16-4)
    Esempio CSS3 avanzato: bordi realizzati con immagini
    materiale css_3_imageborders
  • (16-5)
    Esempio Creare ombre con i CSS 3
    materiale css_3_shadows
  • (16-6)
    Modificare lo sfondo di un elemento
  • (16-7)
    Uso di immagini come sfondo: ripetizione e allineamento
  • (16-8)
    La tecnica dei CSS sprites
    materiale css_sprites
  • (16-9)
    Esempio CSS3 avanzato: le transizioni di proprietà
    materiale css_3_transitions
  • (16-10)
    Esempio CSS3 avanzato: modificare l'opacità di un oggetto
    materiale css_3_transitions
  • (16-11)
    Proprietà di formattazione dei caratteri
  • (16-12)
    Specificare font multipli per assicurare compatibilità tra le piattaforme
  • (16-13)
    Le web fonts e la at-rule @font-face
  • (16-14)
    Esempio Importare una web font da Google usando la regola @font-face
    materiale css_3_webfonts
  • (16-15)
    Proprietà di formattazione dei paragrafi
  • (16-16)
    Formattare le liste con i CSS
  • (16-17)
    Esempio Creare semplici menu con le liste CSS
    materiale css_menu_multilev_static
  • (16-18)
    Altre proprietà dei CSS: content, quotes, cursor,...
  • (16-19)
    Esempio Esempi d'uso delle proprietà cursor, content, quotes e counter
    materiale css_properties_misc
  • (16-20)
    Cambiare il sistema di display degli elementi con i CSS
  • (16-21)
    Esempio Creare elementi popup usando la proprietà display e la pseudo class :hover
    materiale css_properties_display
  • (16-22)
    Il box model dei CSS
  • (16-23)
    Cambiare la visibilità degli elementi con CSS

Lezione 17: CSS /4

02/05/2024, ore 09:30 (2 ore)
Slides CSS3
Materiale CSS_Examples

  • (17-1)
    Cenni sulle variabili (custom properties) CSS
    materiale css_3_variables
  • (17-2)
    Cenni sulle funzioni CSS var() e calc()
  • (17-3)
    Gestione del contenuto degli elementi: la proprietà overflow
  • (17-4)
    Esempio Testo scorrevole in elementi arbitrari
    materiale css_properties_overflow
  • (17-5)
    Esempio Clipping del contenuto di un elemento
  • (17-6)
    Esempio Scrolling alternativo con CSS e Javascript
  • (17-7)
    Definire margini e padding con i CSS
  • (17-8)
    Impostare l'altezza e la larghezza (minime, massime, effettive o relative) di un elemento
  • (17-9)
    Width, height e la proprietà box-sizing
  • (17-10)
    I sistemi di posizionamento dei CSS
  • (17-11)
    L'algoritmo di disposizione degli oggetti nelle pagine HTML
  • (17-12)
    Disposizione degli elementi blocco e inline
  • (17-13)
    Il posizionamento sulla terza dimensione: la proprietà z-index
  • (17-14)
    Posizionamento relativo
  • (17-15)
    Esempio Esempi di posizionamento relativo
    materiale css_properties_positioning_relative
  • (17-16)
    Posizionamento assoluto
  • (17-17)
    Esempio Esempi di posizionamento assoluto
    materiale css_properties_positioning_absolute
  • (17-18)
    L'origine delle coordinate nel posizionamento assoluto
  • (17-19)
    Esempio Realizzare layouts con il posizionamento assoluto
  • (17-20)
    Esempio Combinare il posizionamento e le proprietà margin per creare layouts
  • (17-21)
    Posizionamento fisso
  • (17-22)
    Esempio Esempi di posizionamento fisso
    materiale css_properties_positioning_fixed
  • (17-23)
    Esempio Realizzare menu e banner sempre visibili col posizionamento fisso
  • (17-24)
    I floats
  • (17-25)
    Esempio Uso dei floats per realizzare layout a più colonne ed altri effetti
    materiale css_properties_positioning_float
  • (17-26)
    Esempio Creare semplici menu popup con le liste CSS
    materiale css_menu_multilev_flyout

Lezione 18: (Responsive) Web design

07/05/2024, ore 16:30 (2 ore)
Slides CSS3
Materiale CSS_Examples, CSS_Examples: layouts

  • (18-1)
    Progettare un sito web: linee guida di stile e usabilità
  • (18-2)
    Costruire il layout di un sito web: layout fissi e liquidi
  • (18-3)
    Esempio I layout di base: layout a colonna singola
  • (18-4)
    Esempio I layout di base: layout due colonne
  • (18-5)
    Esempio Uso di elementi posizionati per la realizzazione di layout molticolonna
  • (18-6)
    Esempio Uso di floats per la realizzazione di layout molticolonna
  • (18-7)
    I layout a griglia
  • (18-8)
    Esempio Un layout a griglia fluido realizzato con i float
  • (18-9)
    Introduzione al responsive web design
  • (18-10)
    Le CSS media queries
  • (18-11)
    Usare l'effetto cascata dei CSS per modificare le regole di default tramite una media query
  • (18-12)
    CSS media queries per il responsive disign: i responsive breakpoints
  • (18-13)
    Esempio Il layout a griglia fluido responsive
    materiale Layout_3col_grid_float_liquid
  • (18-14)
    Come adattare un layout a device diversi con i CSS: spostare, ridimensionare, nascondere, sostituire
  • (18-15)
    Esempio Realizzare un menu alternativo accessibile con il controllo SELECT (...e un bottone)
  • (18-16)
    Introduzione ai CSS Flexbox
    materiale css_3_flexbox
  • (18-17)
    Esempio Un layout a griglia fluido realizzato con i flexbox
    materiale Layout_3col_grid_flexbox_liquid

Lezione 19: Templates

09/05/2024, ore 09:30 (2 ore)
Slides CSS3
Materiale Java_Example_Templates

Lezione 20: Javascript /1

14/05/2024, ore 16:30 (2 ore)
Slides Javascript

Lezione 21: Javascript /2

16/05/2024, ore 09:30 (2 ore)
Slides Javascript

  • (21-1)
    Costanti
  • (21-2)
    Operatori aritmetici e logici
  • (21-3)
    Gli operatori VOID ed EVAL
  • (21-4)
    L'operatore TYPEOF
  • (21-5)
    Esempio TYPEOF usato per verificare l'esistenza di una funzione o di una variabile
  • (21-6)
    I costrutti condizionali
  • (21-7)
    I loop
  • (21-8)
    Esempio Il loop FOR...IN (su array e oggetti)
  • (21-9)
    Esempio Il loop FOR...OF (su array e oggetti iterabili)
  • (21-10)
    Esempio Le funzioni Javascript sono valori (oggetti Function)
  • (21-11)
    Dichiarazione di funzioni: dirette, anonime, freccia e il costruttore Function
  • (21-12)
    Esempio Riferimento alle funzioni e uso delle funzioni come valori
  • (21-13)
    Chiamata di funzioni
  • (21-14)
    Esempio Passaggio di una funzione come parametro
  • (21-15)
    Esempio Applicare l'operatore di chiamata ad espressioni che ritornano funzioni
  • (21-16)
    Modalità di passaggio dei parametri. Omissione di parametri e valori di default
  • (21-17)
    ES6: funzioni variadiche e rest parameter
  • (21-18)
    Ritorno di valori dalle funzioni
  • (21-19)
    Esempio Tipi di ritorno misti, ritorno di valori undefined
  • (21-20)
    Le closures
  • (21-21)
    Esempio Creare un generatore di funzioni
  • (21-22)
    Regole di scope nella creazione di valori di tipo Function con riferimenti esterni
  • (21-23)
    Introduzione agli oggetti di Javascript
  • (21-24)
    La gerarchia degli oggetti: l'oggetto-base Object
  • (21-25)
    Esempio La sintassi abbreviata per la creazione di oggetti
  • (21-26)
    Accesso alle proprietà degli oggetti
  • (21-27)
    Esempio Dinamicità degli oggetti Javascript
  • (21-28)
    Esempio Creazione e inizializzazione di proprietà
  • (21-29)
    Esempio Usare gli oggetti come strutture dati generiche
  • (21-30)
    Esempio Usare gli oggetti come array associativi
  • (21-31)
    Creazione di metodi
  • (21-32)
    Accesso e chiamata di metodi negli oggetti
  • (21-33)
    La parola chiave this all'interno dei metodi
  • (21-34)
    ES6: sintassi estesa per definizione di proprietà e metodi
  • (21-35)
    Generare dinamicamente il nome della proprietà da assegnare

Lezione 22: Javascript /3

21/05/2024, ore 16:30 (2 ore)
Slides Javascript

  • (22-1)
    Le funzioni costruttore
  • (22-2)
    L'operatore NEW e le funzioni costruttore
  • (22-3)
    La proprietà constructor degli oggetti
  • (22-4)
    La proprietà prototype delle funzioni costruttore (e la proprietà __proto__ degli oggetti)
  • (22-5)
    Esempio Estensione di oggetti tramite il prototipo del loro construttore
  • (22-6)
    Funzioni getter e setter
  • (22-7)
    ES5: il metodo Object.defineProperty
  • (22-8)
    Coding standards: dichiarare proprietà e metodi pubblici nella maniera più leggebile
  • (22-9)
    Metodi privati negli oggetti Javascript: un workaround per crearli, anche se con qualche limitazione
  • (22-10)
    Esempio L'effetto closure usato per fornire ai metodi privati l'accesso ai membri pubblici di un oggetto
  • (22-11)
    Esempio Metodi privilegiati negli oggetti Javascript: sfruttare le closure per fornire ai metodi pubblici l'accesso a quelli privati
  • (22-12)
    ES6: il costrutto CLASS
  • (22-13)
    Esempio Definizione di oggetti con classi o prototipi
  • (22-14)
    L'operatore spread (...)
  • (22-15)
    Il destructuring assignment
  • (22-16)
    Esempio Destructuring assignment con array e oggetti
  • (22-17)
    Cenni sulla definizione degli iteratori
  • (22-18)
    Cenni sulle funzioni generatore
  • (22-19)
    Gestione delle eccezioni in Javascript
  • (22-20)
    Oggetti predefiniti Javascript: le stringhe
  • (22-21)
    ES6: Interpolazione di stringhe
  • (22-22)
    Oggetti predefiniti Javascript: le espressioni regolari
  • (22-23)
    Oggetti predefiniti Javascript: gli array
  • (22-24)
    Esempio Ordinare un array con il metodo sort e una funzione freccia
  • (22-25)
    Oggetti predefiniti Javascript: le date
  • (22-26)
    Oggetti predefiniti Javascript: Set e Map in ES6
  • (22-27)
  • (22-28)
    Esempio Incorporare un algoritmo (asincrono) in una Promise
  • (22-29)
    Handler di una Promise: then e catch
  • (22-30)
    Esempio Restituzione ed uso del risultato finale di una Promise
  • (22-31)
    Concatenazione di handler su una Promise
  • (22-32)
  • (22-33)
    La parola chiave AWAIT nelle funzioni ASYNC

Lezione 23: DOM (XML, HTML, CSS, Events)

23/05/2024, ore 09:30 (2 ore)
Slides Javascript, DOMHTML

  • (23-1)
    Javascript nei browser: l'oggetto di default window
  • (23-2)
    I metodi setTimer e setInterval
  • (23-3)
    Esempio Prevenire l'event flooding derivante da un uso scorretto dei timer
  • (23-4)
    Esempio Come sfruttare setTimer per creare una buona interfaccia utente
  • (23-5)
    Il Document Object Model di XML
  • (23-6)
    Struttura ad albero di un documento XML
  • (23-7)
    Le classi fondamentali del DOM: Node
  • (23-8)
    Attributi base dei nodi
  • (23-9)
    Attributi per la navigazione tra i nodi
  • (23-10)
    Esempio Raggiungere un nodo generico all'interno del documento
  • (23-11)
    Metodi per la modifica dei nodi
  • (23-12)
    Uso dell'attributo textContent per leggere e scrivere il contenuto testuale di un nodo
  • (23-13)
    Esempio Spostare frammenti di un documento HTML in posizioni diverse
  • (23-14)
    Le classi fondamentali del DOM: Document
  • (23-15)
    Metodi per la ricerca rapida di nodi (per id e tag): getElementById e getElementsByTagName
  • (23-16)
    Metodi per la creazione di nodi
  • (23-17)
    Esempio Creare un frammento di HTML ed inserirlo in un documento preesistente
  • (23-18)
    Le classi fondamentali del DOM: Element
  • (23-19)
    Leggere e scrivere i valori degli attributi
  • (23-20)
    I metodi querySelector e querySelectorAll per selezionare nodi con selettori CSS3
  • (23-21)
    Il DOM di HTML
  • (23-22)
    La classe HTMLDocument
  • (23-23)
    La classe HTMLElement
  • (23-24)
    Impostare gli attributi degli elementi attraverso le proprietà dell'oggetto HTMLElement
  • (23-25)
    La classe HTMLFormElement
  • (23-26)
    Il DOM di CSS
  • (23-27)
    Leggere e scrivere lo stile specifico di un elemento: l'attributo style
  • (23-28)
    Le dichiarazioni di stile: l'oggetto CSSStyleDeclaration
  • (23-29)
    Lettura/scrittura dei valori degli attributi di stile tramite la CSSStyleDeclaration
  • (23-30)
    Accesso rapido alle proprietà di stile: l'interfaccia CSS2Properties
  • (23-31)
    Leggere gli stili dedotti dalla cascata: getComputedStyle
  • (23-32)
    Il modello a eventi del DOM
  • (23-33)
    Event Bubbling
  • (23-34)
    Delegare un evento a un elemento superiore della gerarchia
  • (23-35)
    Event Capturing
  • (23-36)
    Esempio Il percorso completo di un evento
  • (23-37)
    Associazione di handlers agli eventi: addEventListener
  • (23-38)
    Rimuovere handlers: removeEventListener
  • (23-39)
    Esempio Le funzioni EventListener
  • (23-40)
    Struttura di base di un oggetto Event
  • (23-41)
    Gli attributi target e currentTarget negli oggetti Event
  • (23-42)
    I metodi stopPropagation e preventDefault
  • (23-43)
    Gli eventi del mouse
  • (23-44)
    Struttura degli eventi del mouse
  • (23-45)
    L'attributo relatedTarget negli eventi mouse
  • (23-46)
    Gli eventi della tastiera
  • (23-47)
    Struttura degli eventi della tastiera: code, key, charCode, ecc.
  • (23-48)
    Altri eventi del DOM
  • (23-49)
    Eventi delle form: change, reset, submit
  • (23-50)
    Esempio L'evento submit e la validazione della form

Lezione 24: Javascript: Esempi Avanzati

28/05/2024, ore 16:30 (2 ore)
Slides Javascript

  • (24-1)
    Usare javascript in modo degradante: prime idee
  • (24-2)
    Esempio Il tooltip degradante con javascript
    materiale JS_Example_simpletooltip
  • (24-3)
    Esempio Realizzare un sistema di paginazione lato client (degradante) con Javascript
    materiale JS_Example_simplepager
  • (24-4)
    L'oggetto base delle tecniche AJAX: XMLHttpRequest
  • (24-5)
    Chiamate AJAX sincrone e asincrone
  • (24-6)
    Procedura per chiamate AJAX sincrone
  • (24-7)
    Procedura per chiamate AJAX asincrone
  • (24-8)
    Passaggio di dati con codifica JSON su richieste AJAX
  • (24-9)
    Esempio Implementazione AJAX della paginazione degradante e del corrispondente supporto server in Java
    materiale Java_Example_Ajax_Pager_Async
  • (24-10)