Diario per Applicazioni Web, a.a. 2011/12
Lezione 0: The Command-Line Web, 2011-11-29
Argomenti: HTTP, URI, REST
Esercizi
Per eseguire questi esercizi usa Linux oppure un Mac. Non Windows. Se non hai una macchina Linux, puoi usare una macchina virtuale: scarica VirtualBox e installaci sopra Ubuntu.
- Trova l'indirizzo IP del tuo computer con ifconfig
- Usa netcat per implementare una semplice chat
- Usa netcat per osservare la richiesta http del tuo browser
- Usa netcat per interrogare http://httpd.apache.org/docs/2.2/
- Usa netcat e la content-negotiation per ottenere la pagina http://httpd.apache.org/docs/2.2/ in spagnolo
- Usa la riga di comando Unix per ottenere l'indirizzo IP di www.google.com
- Usa netstat per scoprire quali porte TCP sono aperte nella tua workstation
- Usa netcat per scoprire il mime type della immagine alla url http://httpd.apache.org/images/httpd_logo_wide
Altri esempi di domande d'esame
- Quali sono le principali caratteristiche del protocollo HTTP?
- Descrivi la sequenza di eventi che parte da digitare una URL nella barra degli indirizzi del browser e si conclude con la rappresentazione grafica nella finestra del browser di una risorsa.
- Che cos'è una risorsa? Fai degli esempi.
- Scrivi il testo dei messaggi di una tipica transazione HTTP
- Descrivi le differenze fra GET e POST e quali sono i differenti usi di questi metodi.
- Descrivi il significato e l'uso degli header più importanti: Content-Type, Accept, Location, Host.
- Che cos'è una redirezione? Come funziona?
- Descrivi i principali codici di Status e il loro significato.
- Descrivi la forma e le componenti di una URL HTTP.
- Che cos'è un mime type? Quali sono i mime types più comuni?
Da studiare
Materiali per approfondimenti facoltativi
Lezione 1: HTML, 2011-12-01
Argomenti: HTML, Web Standards, Character Encodings
Esercizi
Scrivere un documento HTML che nel browser abbia questo aspetto:
(La url dell'immagine è http://www.ruby-lang.org/images/logo.gif)
Altri esempi di domande d'esame
- Scrivi un esempio HTML di una tabella/un elenco puntato/un elenco numerato/un link/un'immagine/enfasi/grassetto/...
- Qual'è la struttura standard di un documento HTML?
- Quali sono gli attributi di un immagine?
- Che cosa sono le entities? Quali sono le più comuni?
- Che cos'è un encoding? In quali maniere si può specificare?
- Quali sono le principali varianti di HTML?
- Qual è la relazione fra XML e HTML?
- Qual è la differenza fra markup semantico e di presentazione?
- Qual è la struttura di un documento HTML?
- Che cos'è il quirks mode?
- Che cosa sono gli attributi? Che cosa sono e come si usano gli attributi
id e class?
Materiali da studiare
Studiare questi articoli:
Materiali per approfondimenti facoltativi
Lezione 2: CSS, 2011-12-06
Argomenti: Cascading Style Sheets
Esercizi
Realizzare un documento HTML stilizzato in CSS per ottenere l'effetto di questo bozzetto (png, 120KB).
Altri esempi di domande d'esame
- Quali sono le unità di misura che si possono usare per rappresentare le dimensioni di un font o di un elemento?
- Per quale motivo potrei preferire le unità di lunghezza proporzionali a quelle assolute? E viceversa?
- Che alternative ci sono per creare un layout di pagina?
- Descrivere il box model
- Come funziona la proprietà "float"?
- Come si risolvono regole CSS che si contraddicono?
- In quali maniere si può collegare un insieme di regole CSS a un documento HTML?
Da studiare
Studiare questi articoli:
Non è necessario imparare a memoria tutte le proprietà e i loro possibili valori; ma è necessario sapere che esistono.
Approfondimenti facoltativi
Lezione 3: Web Servers, 2011-12-13
Argomenti: Il funzionamento dei Web Server; architettura di Apache HTTPD; cenni sulla configurazione di Apache. Generazione di contenuto dinamico tramite l'interfaccia CGI. Le form in HTML.
Esercizi
- Installa Apache sulla tua macchina Linux o Mac.
- Impara come fare partire e fermare il servizio Apache con "apache2ctl"
- Installa un file html nella DocumentRoot di Apache e verifica con il tuo browser che Apache lo restituisca.
- Trova ed esamina l'access_log e l'error_log di Apache sulla tua macchina.
- Installa in Apache e fai funzionare i due esempi di CGI visti a lezione: ora-del-giorno e scacchiera.
- Modifica l'esempio "scacchiera" per usare il parametro "size" (es. http://localhost/cgi-bin/scacchiera.cgi?size=3); deve produrre una scacchiera con lato di dimensione pari a quella passata nel parametro "size". Se il parametro "size" è assente oppure non è un numero, deve usare la dimensione di default che è 8.
- In aggiunta o in alternativa al precedente: riscrivi scacchiera.cgi in un altro linguaggio; ad esempio C o Java.
- Scrivi un comando CGI che restituisca un immagine. L'immagine non deve essere all'interno della DocumentRoot del server.
- Implementa in HTML questa form (png).
- Osserva con netcat i parametri restituiti dalla form dell'esercizio precedente. Prova a inviarli sia con GET che con POST.
Altri esempi di domande d'esame
- Che cos'è la DocumentRoot?
Da studiare
Approfondimenti facoltativi
- il modulo prefork di Apache.
- Pretty, Accessible Forms
- tutorial su HTML Forms.
- Esercizio: creare mediante CGI un servizio web che mostri una galleria di immagini.
- Salvare alcune foto in una directory. Per ciascuna di esse creare una thumbnail in formato 320x208px e salvarle con nome thumb_NOMEFOTO.jpg
- Lo script legge tutti i file nella directory che hanno un nome che corrisponde al pattern thumb*.jpg
- Poi lo script restituisce una tabella con 3 colonne che mostra tutte le immagini thumbnail trovate al punto precedente
- Se l'utente clicca su una thumbnail deve vedere la versione originale della foto. Questa può essere servita direttamente dal server web, oppure servita da un'altro script cgi nel caso le foto non siano all'interno della DocumentRoot
Questo esercizio può essere realizzato con un linguaggio di programmazione a scelta.
Lezione 4: Il linguaggio Ruby
Introduzione a Ruby: Array, hash, blocks, Symbols, string manipulation. Traduzione del programma scacchiera della lezione scorsa in Ruby. Parsing dei parametri della richiesta HTTP, sia nel caso di metodo GET che di metodo POST.
Esercizi
- Modifica il programma della scacchiera per prendere due argomenti, width e height, che specifichino separatamente la larghezza e l'altezza della scacchiera. Deve continuare a supportare però anche il parametro size, che deve continuare a funzionare come prima: scacchiera.cgi?size=3 equivale a scacchiera.cgi?width=3&height=3.
- Risolvi in Ruby il problema numero 1 del Progetto Euler
Da studiare
- The Humble Little Ruby Book, capitoli 1, 2, 3, 4 (solo Filesystem interaction). La versione di Ruby che usiamo per queste lezioni è la 1.8.7.
Approfondimenti facoltativi
Lezione 5: Come produrre documenti HTML dinamici, 20-12-2011
Incapsulare il codice in oggetti. Il linguaggio di templating Embedded Ruby. Codice dell'esercizio visto a lezione.
Esercizi
-
Scrivere un programma CGI che gioca a tris. Usare la struttura del programma Scacchiera. Il template board.erb deve essere modificato per presentare la mappa del gioco di tris; ogni casella contiene inizialmente un `<input type="submit" name="?"/>` dove l'attributo `name` cambia da casella a casella; ad esempio si possono numerare le caselle da 0 a 8. Quando l'utente preme uno dei bottoni che stanno nelle caselle, il CGI risponde ridisegnando la mappa con una "X" o una "O" nella casella. Il programma deve fermarsi quando il gioco è finito.
Una maniera alternativa di implementare la `form` che implementa la mappa è di usare gli `<input type="radio" name="?">`. Così facendo per giocare una mossa sono necessari due clic.
Nella versione base, Tris.cgi permette a due esseri umani di giocare sulla stessa pagina web. Può essere interessante (ma esula dal programma di questo esame) estendere il programma per giocare contro l'essere umano.
Da studiare
La documentazione di Embedded Ruby
fino a "Installing eruby in Apache" escluso.
Approfondimenti facoltativi
Il linguaggio di templating Markaby
Il linguaggio di templating HAML
Un articolo di David Heinemeier Hansson sui linguaggi di templating
Lezione 6: Progettare un'applicazione web 22-12-2011
Requisiti funzionali e non funzionali. Page flow. Modello dei dati. L'architettura Model-View-Controller (MVC). Virtual hosts. Uso delle regole di riscrittura per connettere tutte le URL della nostra applicazione a un singolo script CGI.
Iniziamo un ciclo di lezioni su come implementare un clone di tadalist.com. I dettagli si trovano nei lucidi, che pubblico per questa volta in via eccezionale.
Ho approntato un repository su github per il codice che vediamo a lezione. Per scaricarlo:
git clone https://github.com/xpmatteo/Web-Applications-2011-12.git
Per aggiornarlo dopo ogni lezione:
git pull
Esercizi
Imparare come fare partire e fermare Apache con "apache2ctl" o "apachectl"
Esercizio: creare un virtual host "pippo.com"
- Creare uno o più documenti HTML e salvarli nella directory /tmp/pippo.com
- Configurare www.pippo.com per puntare a 127.0.0.1 in /etc/hosts
- Creare un file di configurazione con le direttive necessarie per configurare www.pippo.com come un name-based virtual host. Questo file sia salvato come "pippo.conf"
- Includere pippo.conf nella configurazione di Apache. Su Ubuntu la maniera migliore è salvare pippo.conf in /etc/apache2/sites-available e poi abilitarlo con "a2ensite pippo"
- Verificare che aprendo "www.pippo.conf" nel browser si vedano i file creati al primo passo.
Configurare l'esercizio visto a lezione per funzionare sul tuo web server. Se digito http://todo-list/pippo/pluto Devo vedere Hello Ruby. Se digito http://todo-list/images/cards.jpg devo vedere un'immagine.
(Nota che questi esercizi non sono facoltativi)
Da studiare
Il manuale di Apache Httpd: Binding, Configuration Files, Configuration Sections (fino a "Virtual Hosts" incluso), Name-Based Virtual Hosts (eccetto la parte su "older browsers").
Lezione 7, 10-01-2012: Prima iterazione di todo-list
Inizio della implementazione del servizio web specificato nella lezione precedente. Progettazione ad oggetti della struttura della web application. Gli oggetti WebRequest, WebResponse, Router, TodoListRepository. Il codice visto a lezione si trova su github, per scaricarlo usare git pull (vedi lezione precedente.)
Esercizi
Ho aggiunto lesson06/README.md con le istruzioni dettagliate per l'installazione, e lesson07/README.md con le istruzioni per l'esercizio da fare a casa: implementare l'aggiunta di elementi a una todo-list (iniziato a lezione, da completare)
Altre domande che potrei fare durante l'esame
Spiegare in maniera dettagliata a che cosa serve e come funziona la WebRequest, o la WebResponse, il Router, il TodoListRepository....
Eseguire l'esercizio di questa lezione
Lezione 8, 12-01-2012: Seconda iterazione di todo-list
Abbiamo visto come usare form con elementi nascosti per conservare lo stato di una "conversazione" con l'applicazione. Abbiamo discusso la validazione. Abbiamo parlato del problema di mantenere DRY il codice.
Esercizi
Ho aggiornato il progetto su Github alla lezione 08. Ho risolto l'esercizio della volta scorsa e ho aggiunto la possibilità di marcare come "fatto" un item. Ci sono due esercizi nel README:
- Decodificare correttamente i parametri
- Dare la possibilità di rimuovere il check mark e rimettere un'item nella parte "da fare."
Da notare che continuiamo ad usare un Repository in memoria al posto del database vero. Con l'introduzione degli "item" l'uso di questo repository si è un po' complicato. Presto dovremo riscriverlo per usare un database.
Da studiare
Approfondimenti facoltativi
Lezione 9, 17-01-2012: validazione
Abbiamo visto il pattern base della validazione dei dati. Nell'esempio di codice che trovate su github, abbiamo implementato la validazione del nome della todo-list.
Abbiamo anche abbozzato un meccanismo generico per implementare oggetti di dominio adatti all'uso in un'applicazione web (ma non solo.) Si veda la classe User.
Esercizi
- Applicare la validazione anche al testo del todo-item.
- Completare la registrazione di un nuovo utente (azione /users/new e /users/create). Bisogna completare lo UserRepository sul modello del TodoListRepository.
Lezione 10, 19-01-2012: accesso al database
Perché usiamo il database; pro e contro del DB rispetto all'uso del file system. Un meccanismo semplice per accedere ai dati del DB dal codice a oggetti: reimplementazione del repository usando un oggetto di interfaccia al database. (In progress... pubblicherò altro materiale)
Da studiare:
Studiare i capitoli 1, 2, 3 di Sql for web nerds di Philip Greenspun
Lezione 11, 26-01-2012: sessioni e autenticazione
Come implementare le sessioni sul protocollo HTTP. I cookie. Algoritmo di generazione delle sessioni. Utilizzo proprio e improprio dei dati in sessione. Salvataggio dei dati in sessione. Algoritmo di verifica della validità della sessione. Problemi di sicurezza delle sessioni. Autenticazione. Algoritmo di autenticazione.
(In progress... pubblicherò altro materiale)
Da studiare
Ripassare Greenspun, capitolo 2, Basics.
Studiare la mia dispensa sulle sessioni
