La tecnologia che sta alla base dello sviluppo di pagine web (cioè i linguaggi HTML, CSS e JavaScript) viene sempre più utilizzata anche per creazioni di applicazioni offline. In particolare esistono piattaforme di sviluppo, come, ad esempio la piattaforma open source Cordova, che utilizzano questo ambito di sviluppo per creare applicazioni native che possono girare su Apple IOS, Andoid e Windows Phone. L'obiettivo di Sistemi Interattivi I è introdurvi all'usa di HTML e CSS per la creazione di interfacce e di darvi i primi rudimenti di Javascript con la realizzazione di semplici applicazioni che vengono fatte funzionare nel browser. In Sistemi Interattivi II utilizzerete queste conoscenze per realizzare applicazioni per dispositivi mobili.

Linee guida per l'esame

La prova di esame è basata su un colloquio durante il quale verranno proposte alcune domande e la discussione di alcuni degli esercizi javascipt eseguiti insieme in classe.

Temi affrontati

1. Cos'è un applicazione

Introduzione alla progettazione di applicazioni aulla piattaforma Web, prima lezione.

2. La codifica dei dati

Argomento che introduce al significato di digitale.  Codifica delle informazioni. Numeri binari e numeri esadecimali. Esempi di codifica: il testo, numeri interi e razionali, le immagini. Compressione dei dati.

Riferimenti: la dispensa omonima. e la prima lezione.

3. Come funziona internet

Introduzione a Internet. Struttura Client-Server e funzione dei linguaggi legati che costituiscono la piattaforma Web: HTML, CSS e JavaScript). 

Riferimenti:  prima lezione, manuale Programmare per il web lato client. 

4. HTML

HyperText Markup Language ("Linguaggio a marcatori per gli Ipertesti"). Tage, elementi e attributi. Entity. Struttura della pagina: prologo, head e body. 

head

Le informazioni invisibili. <link>, <meta>, <style>, <title>, ecc.

body

Elementi blocco ed elementi inline. Headings (h1, h2,..), div, p, ul, ol ed li. Elementi inline: span. Elementi di formattazione <em> , <strong>,<dfn> , <code> ,<samp>  , <kbd>  , <var>.  Elementi semantici (header, section, article, ecc.). Elementi interattivi:  <a>, <input>, <select>, <textarea>, <button>. Elementi multimediali: <img>, <video>,  <audio>, <canvas>, <iframe>.

Risorse:  Lezione 2 e Lezione 3

5. CSS

I fogli di stile. Progettazione WEB e concetto di accessibilità. Tecniche responsive. Il concetto di pixel-ratio. Fogli di stile collegati e incorporati. Regole di stile in linea. La regola di stile. Principali tipi di selettore. Principali proprietà CSS. Il BOX MODEL. Layout di tipo Flex

Risorse: lezioni 3, 4, 5 e 6.

6. Javascript

Javascript è un linguaggio di programmazione. Linguaggi compilati e linguaggi interpretati. Cosa può fare Javascript. Come inserire Javascript in una pagina web. L'output di un programma javascript. 

• Variabili e tipi di dati.
• Operatori ed espressioni.
• Le funzioni.
• La programmazione condizionale: if...else .
• Le iterazioni (cicli): while e for.
• Il Browser Object Model e il Document Object Model: manipolazione del contenuto di una pagina web da Javascipt
• Utilizzo degli oggetti per memorizzare e recuperare dati: JSON 
• Il caricamento dei dati: AJAX e il metodo fetch()

Esercizi svolti in aula

Il candidato dovrà dimostrare di avere compreso gli esercizi svolti in aula in particolar modo per quanto riguarda l'uso di javascript. Sarà valutato positivamente ogni tentativo di personalizzare gli esercizi.

Realizzazione di un layout responsive

Realiazzazione della pagina dedicata ad Alfred Hitchcock e del portfolio personale.

Esercizi javascript

a. Calcolo della media

Uso della semplice funzione media () per il calcolo della media tra due numeri

b. Analisi di una stringa

Uso del metodo split() per dividere una stringa in un array di stringhe. 

c. Calcolo della media su più numeri

Utilizzo di un ciclo while per calcolare la media tra più numeri e uso del ciclo form per eleminiare gli elementi vuoti in un array.

d. Manipolazione del DOM

Creazione di un semplice menù a scomparsa utilizzando la modifica degli attributi visuali di elementi html

e. Orologio aggiornato in tempo reale

Progettazione e realizzazione di un orologio in cui data e ora vengono aggiornati ogni secondo.

f. Aggiunta di elementi a un documento HTML

Vengono aggiunte immagini ad una pagina web cliccando su un pulsante

e. Calcolatrice

Semplice calcolatrice che effettua le quattro operazioni. Competenze:

1. progettazione di un interfaccia utilizzando il layout flex (https://skillsandmore.org/flexbox-layout/)
2. collegamento degli elementi dell'interfaccia con il codice Javascript e gestione degli eventi (slide, manuali consigliati)
3. utilizzo dei cicli (https://developer.mozilla.org/it/docs/Web/JavaScript/Guida/Loops_and_iteration)

•  calcolatrice
  •  css
    •  stile.css
  •  img
    •  logo...
  •  js

    •   index.js

  •  index.html
  •  

f. App Cocktails

Semplice applicazione che carica e rende consultabile un piccolo database di cocktail. Competenze messe in gioco:

• Caricamanto dati utilizzando la tecnologia AJAX (slide, manuali consigliati)
• Il metodo fetch (https://www.html.it/pag/66525/fetch-api/)
• Creazione e inserimento di elementi HTML nel DOM
• Popolamento dinamico di un elemento select

Tutti i file del progetto 

Tutti i file (ampiamente commentati) sono disponibili sul cloud. Cliccando sulla cartelle si accede alla cartella sul cloud da cui si possono scaricare. Cliccando sui singoli file si possono vedere direttamente con il viewer del cloud.

•   cocktails
  •   css
    •   custom.css
  •   dati
    •   cocktails.json
  •   node_modules
    •  bootstrap/dist/css
      •  bootstrap.min.css
    •  smooth-scroll/dist
      •  smooth-scroll.min.js
  •  index.html
  •  index.js

g. Presentazione di un progetto javascript

Infine, come workshop sviluppato autonomamente sarà richiesto uno dei seguenti elaborati originali.

1. Personalizzazione e/o ampliamento delle funzionalità della Calcolatrice
2. Personalizzazione e/o ampliamento dell'app cocktails.

h. Parte facoltativa

Gli alunni possono presentare in aggiunta, alla parte obbligatoria, un proprio elaborato originale, realizzato con la piattaforma e orientato all'utilizzo con i dispositivi mobili.  

Testi consigliati

---