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.

Parte teorica

1. 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 le slide 4-55 della prima lezione.

2. Come funziona internet

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

Riferimenti: Slide  55-80 della prima lezione, manuale Programmare per il web lato client

3. 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 1 (slide 81-142),  Lezione 2

4. 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: Lezione 3 e Lezione 4. Lezione 5.

5. 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. Le strutture if...else, while e for. Il Browser Object Model e il Document Object Model. Utilizzo degli oggetti per memorizzare e recuperare dati. Cenno al concetto di classe: la proprietà prototype.

 

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.

a. Calcolo della media

Uso della semplice funzione media () per il calcolo della media tra due numeri:  /esercizi-js/orimo.htm

b. Metodi di number

Uso dei metodi applicabili alle variabili di tipo Number: /esercizi-js-2/index.html

c. Ricerca in un array

Uso dei metodi String.indexOf(), Array.push(), e delle istruzioni if e while/esercizi-js-2/index.html

d. Semplice ciclo

Utilizzo dell'istruzione for.  /esercizi-j2-2/index.html

e. Orologio aggiornato in tempo reale

Progettazione e realizzazione di un orologio in cui data e ora vengono aggiornati ogni secondo:   /esercizi-js-2/index.html,  /esercizio-js2/scrivi-ora.js 

f. Vai alla pagina...

Utilizzo della proprietà window.location/esercizi-js-2/index.html

g. Aggiunta di elementi a un documento HTML

Vengono aggiunte immagini ad una pagina web cliccando su un pulsante:  /esercizi-j2-2/index.html

e. Calcolatrice

Semplice calcolatrice che effettua le quattro operazioni:

f. Convertitore di valuta

Calcola il cambio delle principali valute utilizzando il server http://www.floatrates.com che offre gratuitamente i tassi di cambio aggiornati su base giornaliera. 

Il layout 'flex' consente di ottimizzare l'utilizzo dell'app sui dispositivi mobili si con orientamento landscape che con orientamento portrait.

Dipendenze

L'interfaccia dell'app è costituita dal documento HTML '/index.html' e dai fogli di stile '/css/bootstrap-reboot.min.css' (usato per normalizzare lo stile dei browser) e '/css/stile.css'. Per funzionare MoneyChanger necessita delle seguenti componenti Javascript:

  • MySpinner: Animazione di attesa mostrata durante caricamento ('/js/spinner/myspinner.js' e '/js/spinner/stile-spin.css')
  • CurrencySymbols: caricamento e la gestione della tabella dei simboli delle valute
  • CurrencyRate: connessione con il server http://www.floatrates.com e caricamento dinamico dei tassi di cambio.

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.

g. Presentazione di un progetto javascript

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

  1. Personalizzazione e ampliamento delle funzionalità della Calcolatrice
  2. Personalizzazione o ampliamento del convertitore di valuta

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

haverbeke david - javascript

JAVASCRIPT

GUIDA COMPLETA PER LO SVILUPPATORE

PREFAZIONE

JavaScript è il motore di quasi tutte le applicazioni web più moderne, dalle app social ai giochi per browser più all'avanguardia. Facile da usare, anche per i principianti, JavaScript è tuttavia un linguaggio flessibile e complesso, che consente di realizzare applicazioni davvero potenti. Questa guida completa a JavaScript scava nel profondo del linguaggio per mostrare come scrivere un codice elegante ed efficiente. L'autore vi guida fin dall'inizio con esempi, esercizi e interi capitoli su progetti specifici, facendovi fare esperienza sulla realizzazione di programmi completi. L'opera riflette lo stato attuale di JavaScript e dei browser web, ed è arricchita di nuovi materiali, come un capitolo dedicato al rendimento del codice in JavaScript e una descrizione dettagliata di concetti come la ricorsività e le chiusure. Tutti i sorgenti sono disponibili online in uno spazio protetto interattivo, dove è possibile modificare, eseguire e verificare istantaneamente i risultati del codice.

TRAMA

JavaScript è il motore di quasi tutte le applicazioni Web più moderne, dalle app sociali ai giochi per browser più all'avanguardia. Facile da usare, anche per i principianti, JavaScript è tuttavia un linguaggio flessibile e complesso, che consente di realizzare applicazioni potenti.
Questa guida completa a JavaScript scava nel profondo del linguaggio per mostrare come scrivere un codice elegante ed efficiente. L'autore guida fin dall'inizio con esempi di codice, esercizi e interi capitoli su progetti specifici, facendo fare esperienza sulla realizzazione di programmi completi.
Questa edizione, interamente rivista e modernizzata, riflette lo stato attuale di JavaScript e dei browser Web, ed è arricchita di materiali nuovi, come un capitolo dedicato al rendimento del codice in JavaScript e una descrizione dettagliata di concetti come la ricorsività e le chiusure. Tutto il codice sorgente è disponibile sul Web in uno spazio protetto interattivo, dove è possibile modificare, eseguire e verificare istantaneamente i risultati del codice.

AUTORE

Marijn Haverbeke è un autore e programmatore indipendente, che si interessa principalmente di linguaggi di programmazione e strumenti per sviluppatori. Passa gran parte del suo tempo a lavorare su software open source, tra cui l'editor CodeMirror e il motore di inferenza di tipo Tern.
 


duckett jon - javascript & jquery

JAVASCRIPT & JQUERY

Sviluppare interfacce web interattive

 

TRAMA

Un modo nuovo e più bello per imparare JavaScript e jQuery. Questo libro è dedicato il chi non conosce JavaScript, a chi non ha esperienze di programmazione e a chi si è limitato copiare e incollare degli script senza avere idea di come realmente funzionino. L'obiettivo è imparare a leggere e scrivere codice JavaScript ma anche comprendere le basi teoriche della programmazione. Tutto questo attraverso un approccio visuale che aiuta a semplificare anche i concetti più complicati. Unico requisito necessario è la conoscenza di HTML e CSS. Pagina dopo pagina il lettore scopre come funziona JavaScript, come personalizzare script e come crearne da zero, ma impara anche a sfruttare le potenzialità di jQuery e le più popolari tecniche di sviluppo per migliorare I'interattività e I'usabilità dei siti web. II testo è ricco di esempi che mostrano l'uso di semplici funzionalità JavaScript fino alle possibilità più evolute per controllare qualsiasi elemento di una pagina web con jQuery, le API e Ajax. In breve il lettore inizia a pensare come un programmatore.