Diario per Applicazioni Web, a.a. 2010/11

Matteo Vaccari > Applicazioni Web

• 07-12-2010 Lezione 0
  Introduzione. Richiami di reti. Gli standard URI, HTTP, MIME.
  • Studiare Greenspun, capitolo 2, Basics, fino a "The Steps" incluso.
  • Studiare http://www.jmarshall.com/easy/http/ fino a "HTTP 1.1 Clients" incluso.
  • Leggere How I explained REST to my wife
  • Leggere la mia dispensa fino a 'Il protocollo HTTP e le applicazioni web' incluso.
  • Procuratevi una macchina (fisica o virtuale, non mi interessa) con installato Linux. Se non avete particolari preferenze, scegliete Ubuntu. Per questa lezione dovete essere in grado di
    • osservare con netcat una richiesta HTTP fatta da un browser
    • interrogare con netcat un server HTTP
    • osservare con tail -f i log del vostro server Apache
    • osservare i servizi TCP in stato LISTEN con netstat
  
  
• 14-12-2010 Lezione 1
  HTML, XMl, XHTML. Versioni di HTML. Elementi, attributi, tag. Character sets ed encodings. Quirks mode e Standards Compliant mode.
  • Dopo questa lezione dovete essere in grado di
    • Scrivere documenti XHTML
    • Sapere la differenza fra markup semantico e markup di presentazione
    • Scrivere e far funzionare semplici programmi CGI in Bash o in Ruby
    • Capire cosa sono, come funzionano e come si specificano gli encoding
  • Studiare i tutorial su HTML base, avanzato di Dave Raggett
  • Studiare Il minimo che dovete assolutamente sapere su Unicode
  • Leggere 99.9% of Websites Are Obsolete di Jeffrey Zeldman su perché rispettare gli standard non è una questione di idealismo, ma di pragmatismo.
  • Facoltativo: Studiare il capitolo su HTML di Greenspun
  • Facoltativo I capitoli 5,6,7 di Designing With Web Standards, 2nd edition di Zeldman.
  • Facoltativo: An Introduction to HTML5
  • Facoltativo: The Early History of HTML
  
  
• 15-12-2010 Lezione 2
  CSS
  • Studiare il tutorial su CSS di Dave Raggett: A Touch of Style
  • Studiare il tutorial CSS interattivo di w3schools fino a CSS Box Model incluso, più "CSS Display" e "CSS Positioning". Provare tutti gli esempi interattivi e provare variazioni.
  • Esercizio: implementare con un layout (ibrido o puro CSS) questo bozzetto.
  • (Facoltativo) Un esempio di layout ibrido su due colonne. Esercizio studiare il sorgente html; sperimentate variazioni; provate ad aggiungere/togliere/modificare regole.
  • (Facoltativo) Un tutorial su come realizzare un layout in CSS puro
  • (Facoltativo) risorse su CSS di Eric Meyer
  • (Facoltativo) CSS Zen Garden
  • (Facoltativo) I capitoli 8,9,10 di Designing With Web Standards, 2nd edition di Zeldman.
  
  
• 21-12-2010 Lezione 3
  Configurazione del web server Apache Httpd. Architettura di Apache.
  • 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"), il modulo prefork.
  • Imparare come fare partire e fermare Apache con "apachectl"
  • Esercizio: installare Apache Httpd su una macchina Linux (per esempio usando il package manager della tua distribuzione preferita. Se non hai una distribuzione preferita suggerisco Ubuntu oppure Debian.)
  • Esercizio: creare un virtual host "pippo.com"
    1. Creare uno o più documenti HTML e salvarli nella directory /tmp/pippo.com
    2. Configurare www.pippo.com per puntare a 127.0.0.1 in /etc/hosts
    3. 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"
    4. 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"
    5. Verificare che aprendo "www.pippo.conf" nel browser si vedano i file creati al primo passo.
    (Nota che questi esercizi *non* sono facoltativi. Mi aspetto che tu sia in grado di eseguirli. Se ti mancano le informazioni su come fare cerca su Google -- anche questa è una skill essenziale per un professionista. Non è difficile trovare queste informazioni, sono cose molto molto basilari.)
  
  
• 22-12-2010 Lezione 4
  Introduzione alle form HTML. Introduzione alla generazione di pagine dinamiche con CGI.
  • Studiare questo tutorial su HTML Forms.
  • Studiare questa introduzione a CGI.
  • Esercizio: installare, capire e fare funzionare in Apache su Linux gli esempi che ho presentato a lezione:
    • uptime.cgi Mostra informazioni sullo stato della macchina.
    • logo.cgi Dimostra come restituire un'immagine che non è all'interno del DocumentRoot.
    • tempconv.cgi Conversione di temperatura da Fahrenheit a Celsius
  • Esercizio: creare mediante CGI e bash un servizio web che mostri una galleria di immagini.
    1. Salvare alcune foto in una directory. Per ciascuna di esse creare una thumbnail in formato 320x208px e salvarle con nome thumb_NOMEFOTO.jpg
    2. Lo script legge tutti i file nella directory che hanno un nome che corrisponde al pattern thumb*.jpg
    3. Poi lo script restituisce una tabella con 3 colonne che mostra tutte le immagini thumbnail trovate al punto precedente
    4. 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
    Nota bene: questo esercizio richiede una modesta capacità di scripting in bash che dovresti avere acquisito nel corso di Sistemi Operativi. Le competenze in fatto di HTML e CGI dovresti averle acquisite a lezione e sulle letture che ti ho assegnato. Se non sei in grado di risolvere l'esercizio sei già fuori strada per passare l'esame.
  
  
• 11-01-2011 Lezione 5
  Introduzione a Ruby
  • 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. Il sistema operativo di riferimento è Linux (ma anche Mac va bene.)
  • Esercizi:
    • Scrivere un programma che conta le occorrenze delle parole nel suo standard input. La versione realizzata in aula ordina alfabeticamente le parole. Esercizio: Modificarla per restituire le parole in ordine decrescente di numero di occorrenze.
    • Codificare la funzione di Fibonacci in maniera efficiente. La versione naive realizzata in aula è troppo lenta per valori > 30. Scrivere un generatore di numeri di Fibonacci, ovvero un oggetto che restituisce ad ogni invocazione di "next" il prossimo numero di Fibonacci:

              g = FiboGenerator.new
              g.next # => 0
              g.next # => 1
              g.next # => 1
              ...
            

      Facoltativo (e difficile): calcolare la somma dei numeri di Fibonacci pari e minori di 4 milioni (qui c'è una soluzione).
    • Scrivi un programma Ruby che analizza l'access_log di Apache e restituisce le seguenti informazioni:
      • Elenco delle URL invocate e numero di invocazioni, ordinate per numero di invocazioni
      • Elenco delle URL che hanno provocato errori (status ≥ 400), con il numero di errori, in ordine di numero di errori.
  • Facoltativo: Un'altra guida di riferimento è Programming Ruby, la cui prima edizione è consultabile liberamente online.
  • Facoltativo: imparara Ruby con i Ruby Koans; è un tutorial interattivo. (Per scaricare il progetto da github, installare git (per esempio su Ubuntu: "apt-get install git-core") e poi esegui "git clone git://github.com/edgecase/ruby_koans.git")
  • Facoltativo: una bella collezione di problemi di programmazione, con soluzioni in Ruby: www.rubyquiz.com.
  • Facoltativo: una collezione di utili programmi Ruby di una sola riga.
  
  
• 12-01-2011 Lezione 6
  Creare un servizio web in Ruby.
  • Ripetere e completare l'esercizio del servizio citazioni. Le istruzioni per l'installazione sono nel README.
    • Aggiungere un logo
    • Modificare lo stile
    • Dopo ogni ricerca mettere un messaggio del tipo "Abbiamo trovato 321 citazioni che contengono 'Linux'"
  
  
• 18-01-2011 Lezione 7
  Aggiornare dati con le form
  • Ripetere e completare l'esercizio del servizio citazioni (lezione 07). Le istruzioni per l'installazione sono nel README.
    • Fare funzionare l'editing di una citazione (per il salvataggio per il momento va bene modificare l'intero file e salvarlo per intero.)
    • Aggiungere uno "helper" per generare la text-area analogo allo helper che genera il campo di testo (vedi lib/html_helpers.rb)
    • Questo comporta di realizzare una form per l'editing, che sarà al 99 percento uguale alla form per la creazione di una citazione nuova. Trovare una maniera di evitare la duplicazione
  • Leggere questo articolo sul principio DRY (pdf)
  
  
• 19-01-2011 Lezione 8
  Uso del database.
  • Studiare i capitoli 1, 2, 3 di Sql for web nerds di Philip Greenspun
  • Per riferimento consultare Using the Ruby MySQL Module.
  • Risolvere l'esercizio della lezione 8 dal progetto su Github. (Leggere il README!)
  
  
• 25-01-2011 Lezione 9
  Associazioni (relazioni) fra entità. Uno a molti, molti a molti. Come si implementano in SQL. Aggiungere attributi a una relazione. Come evitare il problema delle N+1 query. Aggiungere indici sulla chiave esterna per migliorare le performance. Gestire l'evoluzione dello schema dei dati. Osservare il piano di esecuzione di una query in Mysql con "explain".
  • Risolvere gli esercizi nel README del progetto per questa lezione (09).
  • Leggere (e capire) questo articolo sul problema delle N+1 queries (aggiornato).
  • Esercizio: Vogliamo realizzare un’applicazione per la gestione di una biblioteca. La biblioteca conserva una collezione di documenti. I documenti sono conservati in diverse copie, ciascuna delle quali può essere in prestito presso un diverso utente. Ciascun utente della biblioteca può avere donato una copia di un libro, e anche questo fatto deve essere rappresentato nel database. Le date di donazione, di prestito e di restituzione devono pure essere rappresentate. Realizzare il modello dei dati per supportare tutte le funzionalità menzionate: modello entità-relazioni e codice SQL
  
  
• 26-01-2011 Lezione 10
  Sessioni, cookies, autenticazione, protezione dell'accesso.
  • Ripassare Greenspun, capitolo 2, Basics.
  • Risolvere gli esercizi nel README del progetto per questa lezione (10).
  • Se proprio volete fare altri esercizi oltre a quelli nel README:
    • Aggiungere il ruolo "admin". Un admin può listare tutti gli utenti del sito e vedere le loro email
    • Aggiungere la possibilità di chiedere l'"amicizia" di un altro utente. L'utente destinatario può approvare la richiesta oppure negarla.
    • Sulla pagina personale dell'utente loggato, devo poter vedere le mie richieste di amicizia
    • Sulla pagina personale degli utenti (es. /users/show/123) devono vedersi i link a tutte le quote che hanno aggiunto, e a tutti i loro "amici"
  
  
• 01-02-2011 Lezione 11
  Sicurezza. Sql Injection, Cross-site-scripting.
  • Studiare SQL Injection Attacks by Example
  • Studiare Cross-site scripting su Wikipedia
  • Leggere il capitolo Discussion di Greenspun.
  • Facoltativo: Leggere Scaling da Greenspun
  • (Facoltativo) Google TechTalks: How To Break Web Software — A look at security vulnerabilities in web software