Programmazione web avanzata per la fisica sperimentale<br><small>Strumenti per il trattamento dati client-side al tempo di HTML5 </small>

3 Nov 2014, 10:00 → 7 Nov 2014, 16:00 Europe/Rome

Laboratorio 521 (INFN Milano-Bicocca)

Dario Menasce (INFN Milano Bicocca), Francesco Prelz (INFN Milano)

I sistemi di accesso al calcolo si stanno evolvendo in una direzione nella quale gli utenti interagiscono con programmi o sensori tramite interfacce WEB che eliminano la necessità di login su una macchina remota. Queste interfacce sono in genere gestite da un browser che può agire sia in un ambito desktop o mobile (tablet e smartphone). Nell'ambiente della fisica sperimentale non è infrequente la necessità di dover monitorare un sistema di acquisizione dati (o anche un semplice rivelatore) in maniera continuativa da parte di persone spesso localizzate in luoghi anche molto lontani dal rivelatore. La possibilità di esporre la funzionalità ed i controlli di questi sistemi in un browser rende possibile la partecipazione collettiva di più persone, ma richiede conoscenze specifiche ed approfondite sulle tecniche necessarie a disegnare ed implementare qusto tipo di programmi e relative interfacce. Una necessità analoga si ha anche in campi differenti, come l'amministrazione di sistemi o la gestione di database remoti, non necessariamente legati alla fisica sperimentale ma anche ai sistemi informativi in generale.

Il corso è indirizzato a ricercatori, tecnici e studenti che abbiano necessità di costruire questi tipi di interfacce WEB a database, programmi o rivelatori acceduti su sistemi remoti. Non si presuppone alcuna conoscenza pregressa di HTML, di JavaScript o di scripting languages in generale, ma certamente si richiede una moderata capacità di programmazione in qualche linguaggio quale C++ o Perl: il corso si basa sullo sviluppo di esempi progressivamente sempre più complessi, partendo da esercizi molto semplici. Il corso si articola in mattinate con presentazioni frontali ed il pomeriggio con la proposta di esercizi da svolgere su macchine dedicate allo scopo e a disposizione degli iscritti.

Monday, 3 November

10:30 → 11:00 Introduzione ai protocolli HTTP ed HTML

Una rapida introduzione ai protocolli fondamentali del WEB per la creazione di pagine WEB statiche. Prima parte

Convener: Dario Livio Menasce (MIB)

slides WEB-Applications-1.ppsx WEB-Applications-1.pptx

11:00 → 11:30 Coffee break

Pausa

11:30 → 12:00 Introduzione ai protocolli HTTP ed HTML

Una rapida introduzione ai protocolli fondamentali del WEB per la creazione di pagine WEB statiche. Seconda parte

Convener: Dario Livio Menasce (MIB)

12:00 → 12:30 La sintassi di HTML

Gli elementi fondamentali della sintassi di HTML - una pagina 'HTML5'.

Speaker: Francesco Piero Lorenzo Prelz (MI)

Slides http://www.mi.infn.it/~prelz/html5/html/

12:30 → 14:00 Lunch break

Pausa

14:00 → 14:30 Introduzione ai CSS e al linguaggio corrispondente

Speaker: Francesco Piero Lorenzo Prelz (MI)

Slides http://www.mi.infn.it/~prelz/html5/css/

14:30 → 15:15 La configurazione del server HTTP Apache

Vengono mostrati i passi di configurazione necessari per aggiungere ad una installazione vergine di Apache su Scientific Linux le funzioni necessarie per il prosieguo del corso.

Speaker: Francesco Piero Lorenzo Prelz (MI)

15:15 → 17:30 Esercitazioni

Esercitazione hands-on per istanziare un servizio web mediante un'opportuna configurazione di httpd. Lo scopo è quello di permettere agli utenti di istanziare un sito web con capacità CGI

Conveners: Dario Livio Menasce (MIB), Francesco Piero Lorenzo Prelz (MI)

Tuesday, 4 November

09:00 → 10:30 Creazione di forms e introduzione a JavaScript e CGI protocol

Si introduce la tecnica di creazione di pagine web contenenti dei forms di input per l'esecuzione di funzioni: in questa prima parte si discutono le funzioni eseguite unicamente client-side mediante script (JavaScript), senza richieste ulteriori al server.

Convener: Dario Livio Menasce (MIB)

slides WEB-Applications-2.ppsx WEB-Applications-2.pptx

10:30 → 11:00 Coffe break

Pausa

11:00 → 12:00 Elementi di sintassi di Javascript.

Definito il _cervello_ delle applicazioni web, la sintassi permissiva e semplice di Javascript gli sta facendo incontrare successi in numerose altre applicazioni. Vengono qui coperti i principali elementi sintattici del linguaggio e le principali applicazioni all'interno del browser.

Speaker: Francesco Piero Lorenzo Prelz (MI)

Slides http://www.mi.infn.it/~prelz/html5/js/

12:00 → 13:00 Forms piu' complessi: esecuzione di funzioni server-side

Si introduce la tecnica CGI che permette l'esecuzione di programmi sul server il cui input viene fornito dall'utente mediante un form in una pagina web e l'output viene restituito dal programma remoto per essere visualizzato sul browser in una nuova pagina web o modificando solo una parte della pagine corrente.

Convener: Dario Livio Menasce (MIB)

13:00 → 14:30 Lunch Break

Pausa

14:30 → 17:30 Esercitazioni

GLi esercizi della giornata prevedono semplici applicazioni in JavaScript, puramente client-side, e qualche primo esempio di script eseguito server-side tramite il protocollo CGI

Conveners: Dario Livio Menasce (MIB), Francesco Piero Lorenzo Prelz (MI)

Wednesday, 5 November

09:00 → 10:30 Approfondimenti su JavaScript

Verranno presentati alcuni esempi per illustrare il modello OO di JavaScript e dove reprire informazioni e documentazione

Convener: Dario Livio Menasce (MIB)

slides WEB-Applications-3.pptx

10:30 → 10:50 Coffee Break

Pausa

10:50 → 11:30 JavaScript non solo come scripting language dei Browser

Un breve excursus su JavaScript come piattaforma di sviluppo in ambienti quali Android ed iOS. Un esempio di applicazione per smartphone capace di trasmettere dati del proprio sistema di sensori ad un server tramite pacchetti UDP. L'idea, in seguito, è quella di scrivere un'applicazione WEB capace di intercettare questi dati e rappresentarli graficamente ed in real time su un Browser.

Convener: Francesco Piero Lorenzo Prelz (MI)

slides http://www.mi.infn.it/~prelz/html5/js/node/

11:30 → 13:00 Strumenti per lo sviluppo ed il troubleshooting di codice Javascript

Verranno discussi Web Developer e Firebug, plug-ins di Firefox, estremamente utili per gli sviluppatori di codice. In particolare verranno esaminate le principali funzionalità di Firebug, un debugger per Firefox (ma non solo)

Convener: Dario Livio Menasce (MIB)

13:00 → 14:30 Lunch Break

Pausa

14:30 → 17:30 Esercitazioni

Da definire

Conveners: Dario Livio Menasce (MIB), Francesco Piero Lorenzo Prelz (MI)

Thursday, 6 November

09:00 → 10:30 Librerie Javascript di uso generale - Ext JS

Una panoramica dei protocolli, oltre ad HTTP ed HTML, di cui è necessario essere a conoscenza per creare applicazioni web in modo efficiente: XML, DOM, SVG, WebGL ed altri.

Convener: Dario Livio Menasce (MIB)

10:30 → 11:00 Coffee Break

Pausa

11:00 → 12:00 Librerie Javascript di uso generale - JSRootIO

Da definire

Convener: Francesco Piero Lorenzo Prelz (MI)

12:00 → 13:00 Applicazioni dei framework di JavaScript

Cosa sono i framework, come si usano e perchè sono indispensabili.

Convener: Dario Livio Menasce (MIB)

13:00 → 14:30 Lunch Break

Pausa

14:30 → 17:30 Esercitazioni

Da definire

Conveners: Dario Livio Menasce (MIB), Francesco Piero Lorenzo Prelz (MI)

Friday, 7 November

09:00 → 10:30 Un esempio completo. Prima parte

Si presenta un esempio di applicazione WEB, interattiva, consistente in un'interfaccia ad uno smartphone. Lo smartphone comunica i dati del proprio sensore ad un server tramite pacchetti UDP tramsessi via rete (TCP/IP). Il server li riceve e li memorizza in una memoria condivisa (un buffer circolare). Il browser preleva dati dal server, con una certa periodicità, e li rappresenta graficamente nella propria viewport.

Convener: Dario Livio Menasce (MIB)

slides WEB-Applications-4.pptx

10:30 → 10:50 Coffe Break

Pausa

10:50 → 12:00 Un esempio completo. Seconda parte

Si presenta un esempio di applicazione WEB, interattiva, consistente in un'interfaccia ad uno smartphone. Lo smartphone comunica i dati del proprio sensore ad un server tramite pacchetti UDP tramsessi via rete (TCP/IP). Il server li riceve e li memorizza in una memoria condivisa (un buffer circolare). Il browser preleva dati dal server, con una certa periodicità, e li rappresenta graficamente nella propria viewport.