Appunti per l'esame di Progettazione e programmazione web

Architetture client-server

Lezioni comprese:

• 4/5/2020
• 6/5/2020

Introduzione al corso

• Gli argomenti principali saranno due:
  • Programmazione lato client
  • Elementi di programmazione
• Per l'esame mi scuso:
  • Un colloquio orale
  • Un progetto di programmazione

Schema client-server

• Le pagine web che condividiamo oggi contengono dati che sono memorizzati altrove: sui server.
• I programmatori devono quindi tenere presente questa cosa.

Server — Client

HTTP → Un protocollo di rete

• I dati vengono forniti dal server in base a un meccanismo di domanda/risposta.
• I client pensano di pormenzare le richieste e visualizzano le risposte.

- Le tecnologie usate dai server sono:

• basi di dati
• linguaggi come javascript, PHP ecc.

- Le tecnologie usate dai client:

• HTML
• CSS
• javascript

- La programmazione lato client serve all'utente per acquisire i dati per formulare le richieste.

- Si tratta quindi di creare un'interazione con il server.

- Questa deve essere invisibile per l'utente.

- Infine si tratta di far visualizzare la risposta alla domanda.

- L'obiettivo finale è questo: di migliorare sempre l'esperienza dell'utente con le varie personalizzazioni.

- Protocollo: una specifica dei passaggi che due parti devono effettuare per comunicare.

HTTP è un protocollo di rete che si occupa delle comunicazioni tra un client e un server.

- Client e server sono dei software (come per esempio i browser come "Google"). Sono programmi.

- Le macchine, i computers, su cui questi sono ospitati si chiamano "host".

- I metodi possono essere tanti.

- I piu importanti sono

• get => richiesta di dati

• post => invia di dati

- La risposta cosa composta da:

• status line con =>

  • codice di status
  • reason phrase
  • versione di protocollo

• header con =>

  • informazioni sul server
  • le informazioni sul contenuto

• body con => dati.

- I codici di status sono formati da tre cifre.

- La prima serve per identificare la classe,

la quale ha una sua descrizione.

- Queste sono:

• 1 => informational
• 2 => success
• 3 => redirection
• 4 => client error
• 5 => server error

es. sulle slide

• Ogni elemento possiede:
  • delle proprietà
  • dei metodi (con cui fare il processo)
  • degli eventi (a cui reagirà, es. azioni degli utenti che fanno innescare delle azioni)

Le proprietà sono invece le caratteristiche degli oggetti nel documento.

Sia i metodi che le proprietà sono modificabili.

• Il DOM ha una sua sintassi:
  • elemento proprietà —> ci restituisce il valore della proprietà di un certo elemento.
  • elemento proprietà = … —> assegnia un nuovo valore alla proprietà.
  • elemento metodo() —> applica un metodo a un elemento.

Il metodo equivale a una funzione

• reagire agli eventi: il problema è che il codice javascript si mescola a quello html e la funzione va ripetuta per ogni elemento html. Jquery risolve questi due problemi. Ci sono vari tipi di evento in Jquery riassumibili con "on". Questo cerca due parametri: l'evento (es. click) e la funzione che dovrà svolgersi.
• creare nuovi elementi:
• Jquery utilizza gli oggetti javascript per semplificare alcuni tipi complessi di manipolazione. Ogni oggetto è costituito da un nome e/o valore.
• modificare gli elementi con .attr()
• creare e appendere: quando creiamo un nuovo elemento con .append lo dobbiamo affiancare a un elemento già esistente. Questo per dargli una collocazione.
• modificare lo stile con il metodo .css

• Infatti gli stessi utenti vengono coinvolti nella progettazione.
• Le tecniche per coinvolgerlo sono:
  • user studies
  • interviste
  • questionari
  • test
  • debriefing
• Gli obiettivi, invece, dell'interaction design sono:
  • usabilità → eseguire compiti agevolmente e senza fare errori.
  • esperienza d'uso → qualità soggettiva dell'esperienza di uso di un sistema (osservazione etnografica, studio degli user journey)
• ISO definizione usabilità: efficacia, efficienza e la soddisfazione con cui specifici utenti possono conseguire specifici risultati in particolari contesti.
• I suoi obiettivi sono:
  • efficacia
  • efficienza
  • sicurezza
  • utilità
  • facilità di apprendimento
  • facilità di accordo