Programmazione e tecnologie Web

Programmazione web e mobile

Modulo 1 - Studiare il World Wide Web

Storia del WWW

Alle origini del World Wide Web

1960 - Distributed Network → modello di telecomunicazione basato sulla rete neurale umana. Distributed Adaptive Message block switching → frazionamento dei messaggi in diverse unità elementare in grado di seguire percorsi differenti all’interno della rete per poi riunirsi per comporre il messaggio originario.

1966 - Packet Switching → teoria sul networking simile alla Distributed Network.

1969 - Fondazione ARPAnet.

1977 - Distribuzione gratuita del programma MODEM che consente di collegare un computer ad un altro.

1983 - Domain Name System (DNS) → sistema utilizzato per assegnare nomi ai nodi della rete (quindi ai computer).

1987 - MCI Mail → prima rete commerciale via MODEM.

Nasce il World Wide Web

1989 - Navigazione ipertestuale → 2 ricercatori del CERN hanno avuto l’incarico di creare un meccanismo di condivisione e diffusione di file e articoli.

1990 - World-Wide-Web → browser editor con architettura Client-Server.

1993 - Mosaic → primo browser editor per il grande pubblico. Concorrenti del WWW erano:

• FTP → scambio file
• ARCHIE → indicizza il contenuto di molti archivi pubblici di file
• WAIS → ricerca avanzata per documenti testuali
• GOPHER → organizzate in gerarchie i documenti testuali distribuite su più server

Solo con il WWW si ottiene la Scalabilità: riduzione al minimo dei requisiti necessari ad ogni nodo per essere inserito all’interno della rete.

Pilastri fondamentali dell’architettura del WWW:

• HTML, HyperText Markup Language
• URI, Uniform Resource Identifier
• HTTP, HyperText Transfer Protocol

Principi di scalabilità: si ottiene dal concetto di applicazioni Representational State Transfer (REST). Esse hanno le caratteristiche:

• Stato e Funzionalità dell’applicazione sono organizzate usando la nozione di risorsa.
• Risorse condivise attraverso un’interfaccia uniforme (insieme di metodi usati per interfacciarsi).

Proprietà del protocollo di comunicazione:

• Client-Server
• Stateless
• Cacheable
• A livelli

Evoluzione World Wide Web

Punti di svolta:

• Avvento di Mosaic
• Tecnologie CGI per chiamare comandi eseguibili attraverso HTTP
• JavaScript, linguaggio di script interpretato direttamente dal browser
• XML, standard web che garantisce la portabilità dei dati
• Web 2.0, evoluzione del web per facilitare l’utilizzo agli utenti
• Nascita Social Network
• Avvento Internet mobile
• HTML5, uso più moderno del vocabolario HTML (separazione tra contenuto, struttura e presentazione di una pagina web)

Standard implementativi del web

Architettura del web

Il World-Wide Web è un sistema per la presentazione a schermo di documenti ipertestuali e multimediali. Il sistema è distribuito e scalato su tutta Internet:

• Il Client (Browser) è un visualizzatore di documenti (risorse) ipertestuali e multimediali
• Il Server è un meccanismo di accesso a risorse locali (file o record di database, ecc.) in grado di trasmettere via socket TCP/IP documenti identificati da un nome univoco

Standard implementativi:

• Identificazione: Il Web è uno spazio informativo in cui ogni elemento è chiamato risorsa ed è associato a un identificatore univoco (URI)
• Interazione: C’è un protocollo di comunicazione (HTTP) che permette di scambiare messaggi su una rete informatica (TCP/IP)
• Formato dati: I Server e i Client concordano la corretta identificazione del formato dati con cui la risorsa è rappresentata (XHTML, JPG, JSON, ...)

Standard URI:

• É una sintassi universale per identificare le risorse di rete
• É indipendente dal protocollo
• É uno spazio di nomi gerarchico basato su un set di caratteri ristretto, per evitare problemi di cattiva codifica
• É opaco: non dipende dalle URI definire la semantica di una risorsa

Inoltre ci sono:

• URL, indica risorse localizzate
• URN, indica risorse persistenti ed accessibili

Protocollo HTTP:

• É generico, cioè nessun vincolo sul tipo di risorsa da trasmettere
• É client-server: il client attiva la connessione e richiede dei servizi. Il server accetta la connessione, nel caso identifica il richiedente, e risponde alla richiesta. Alla fine chiude la connessione
• É privo di stato, non mantiene nessuna memoria nell’interazione che c’è tra client e server

Standard HTML (HyperText Markup Language): standard che implementa il linguaggio di marcatura (rende un documento interoperabile attraverso il markup). Supporta:

• L’ipertestualità: collegamenti tra documenti diversi
• Multimedialità: più media in un unico documento

Le risorse si dividono in 2 tipi:

• Statiche: già fornite dal server
• Dinamiche: generate a seconda della richiesta del client

Lo sviluppo di HTTP

Ruoli dell’infrastruttura HTTP (ruoli che possono assumere un server/client che usa http):

• User agent: browser che richiede risorse
• Origin-server: server mantiene le risorse
• Proxy: un’applicazione intermedia che mantiene copia delle richieste più frequenti che fornisce ai client come se fosse l’origin-server. Se non possiede una risorsa richiesta si trasforma in client e la chiede direttamente all'origin-server
• Gateway: come un proxy, ma nascosto al client
• Tunnel: una applicazione intermedia che inoltra passivamente le richieste che ottiene

Versioni HTTP:

• I metodi HTTP sono:
  • GET, richiede una risorsa ad un server
  • PUT, trasmette una risorsa al server creando o sostituendo la risorsa specificata
  • POST, trasmette una risorsa al server senza crearne una nuova
  • DELETE, cancella una risorsa sul server
  • HEAD, simile a GET, ma il server deve rispondere soltanto con gli header relativi alla risorsa richiesta
  • TRACE, traccia una richiesta, visualizzando come viene trattata dal server
  • OPTIONS, Richiede l'elenco dei metodi permessi dal server

HTTP/2:

• Dal 2015 la versione più avanzata del protocollo è HTTP/2
• HTTP/2 è retrocompatibile con HTTP
• HTTP/2 è un protocollo binario nel quale client e server scambiano flussi di frame. Questi flussi sono realizzati attraverso degli ID a livello TCP/IP, sono multiplexing e possono essere gestiti in base a livelli di priorità (il flusso tra client e il server può contenere più file)
• Gli header vengono compressi.
• Il server può inviare al client risorse in modalità push. In questo modo può trasmettere quei file che sono in dipendenza ad una risorsa richiesta

I cookie ci permettono di mantenere la sessione. Sono un blocco di dati opaco (non interpretabile) lasciato in consegna ad un client che mantiene così lo stato di precedenti connessioni, e lo manda al server di pertinenza ogni volta che richiede un documento.

Funzionamento:

Campi che può contenere un cookie:

• Comment: una stringa leggibile di descrizione del cookie
• Domain: il dominio per cui il cookie è valido
• Max-Age: la durata di validità del cookie in secondi
• Path: l’URI per il quale il cookie è valido
• Secure: la richiesta che il client contatti il server usando soltanto un meccanismo sicuro (HTTPS)
• Version: la versione della specifica a cui il cookie aderisce

Sviluppo di HTML

Diversi linguaggi di marcatura nel tempo:

• SGM
• HTML
• XML
• HTML5 (attuale standard)

HTML5: L'obiettivo è quello di fornire un linguaggio orientato allo sviluppo di applicazioni web diventa il nuovo standard di riferimento. Nasce il concetto che HTML ha una serie di servizi (api) che possono essere forniti alla pagina attraverso altri standard (es. JavaScript).

HTML5 specifica delle APIs per l'uso coordinato con JavaScript. Vengono inoltre standardizzate diverse altre pratiche della programmazione web:

• Gli elementi canvas
• La gestione di applicazioni offline
• Drag-and-drop
• Cross-domain messaging
• Web Storage
• Microdata

Modulo 2 - Interfacce utenti

HTML

Sintassi e parsing

HTML è un linguaggio di testo che descrive la struttura e il contenuto di un documento Web. Il suo scopo è di rappresentare la struttura dei documenti, associando ai contenuti una semantica specifica per poi essere tradotta in una rappresentazione grafica - o layout. Ogni documento HTML comincia con la dichiarazione del tipo di documento da indicare al browser cosicché il browser lo interpreti.

Esempi:

Elemento → componente principale della sintassi.

Tag → racchiudono l’elemento tra marcature (“< >”).

Attributi → definiti nel tag di apertura. Esempio: tag immagine (src = attributo).

Struttura generale del documento basata da tag con funzione apposita (non visualizzati dal browser):

• <html> → delimita il documento
• <head> → indica sezione di intestazione, contiene i metadati del documento
• <body> → delimita sezione del corpo, contiene il contenuto del documento

Il documento è interpretato dal Parser: valutatore grammaticale. Legge un documento in formato sorgente e lo trasformano in formato di destinazione. Scorre il documento regola per regola, quando trova una regola la applica fino a quando non incontra il tag di chiusura (può lavorare con strutture annidate).

Fasi del parsing:

• Costruzione dell’oggetto: si costruisce un oggetto per il flusso di input, un oggetto per la tokenizzazione, seguendo una grammatica e un contenitore associati
• Flusso di input: ricezione dei dati
• Token e grammatica: vengono generati i token verificando la correttezza della grammatica
• Costruzione del documento di destinazione

Elementi di testo

Intestazione → da “<h1>” a “<h6>”

Paragrafi → identificati con “<p>”

Ancora → “<a>”, per i collegamenti ad altre risorse. Trasforma un elemento in un oggetto cliccabile per rinviare alla risorsa definita nell’attributo href.

Formattazione testo:

• “<em>” = “<i>”
• “<i>” → corsivo
• “<ins>” → sottolineato
• “<cite>” → definisce il titolo di un lavoro (corsivo)
• “<b>” → grassetto
• “<sup>” → esponente

Liste:

• “<ul>” → elenco puntato
• “<ol>” → elenco ordinato
• “<dl>” → elenco di definizione (composto da <dt>(termine) e <dd>(definizione termine))

I primi due sono composti dal tag “<li>”

Tabella → “<table>”. attributi:

• Rowspan → espanditi sulla riga
• Colspan → espanditi sulle colonne

Maschera → “<form>”, invio dati da client a server.

Impaginazione del documento

<header> → contiene l’intestazione della pagina.

<footer> → contiene il piè di pagina.

<section> → sezioni di documento.

<aside> → contiene elementi secondari.

<nav> → include lista di collegamenti.

Fogli e regole di stile

Le regole di stile sono raccolte in documenti (Fogli di Stile). Esse sono da applicare, durante il parsing, agli elementi di una pagina web per modificarne lo stile → CSS.

La struttura di ogni foglio di stile è costituita da:

• Selettore: identifica l’insieme dei nodi a cui applicare la regola
• Regole: l’insieme delle proprietà da applicare (a cascata)

Applicazione delle regole di stile a cascata (ordine di scrittura). È necessario associare il documento HTML ad uno o più fogli di stile. Ogni regola di stile è composta da:

• Selettore → indica uno o più elementi
• Blocco dichiarazione → contiene tra graffe tutte le regole
• Proprietà → caratteristica di formattazione del browser
• Valore → valore di un proprietà

Selettori si dividono in:

1. Classi: si applicano a tutti gli elementi che hanno come valore dell'attributo class il nome della classe.

               file HTML:
               
                   <p class="nota">Contenuto di una nota</p>
                   <p class="nota rosso">Contenuto di una nota</p>
               
               file CSS:
               
                   .nota {font: 9px Helvetica;}
                   .rosso {color:red; font-weight:bold;}
               
           

2. Identificatori: si applicano all'unico elemento che ha come valore dell'attributo id il nome dell'identificatore.

               file HTML:
               
                   <h1 id="primotitolo">Contenuto del titolo</h1>
               
               file CSS:
               
                   #primotitolo {color: blue;}
               
           

3. Altri selettori: https://www.w3schools.com/cssref/css_selectors.asp

Il concetto di BOX: Riguardo la rappresentazione degli elementi nella pagina il concetto chiave è quello di Box. Ogni elemento è circondato da un box. Bisogna distinguere tra la larghezza dell'area del contenuto e la larghezza effettiva di un box.

Area del Box che è data dal valore della proprietà width; Larghezza effettiva che è data da questa somma: margine sinistro + bordo sinistro + padding sinistro + area del contenuto + padding destro + bordo destro + margine destro.

Area del contenuto → zona in cui trova spazio il contenuto vero e proprio, testo, immagini, animazioni. Le dimensioni orizzontali dell'area possono essere modificate con la proprietà width e quella verticale con la proprietà height.

• Il padding: è uno spazio vuoto che può essere creato tra l'area del contenuto e il bordo dell'elemento
• Il bordo: è una linea che circonda la zona del padding e l'area del contenuto. È variabile per dimensione, stile e colore
• Il margine: è uno spazio di dimensioni variabili che separa un dato elemento da quelli adiacenti

Posizionamento degli elementi: Gli elementi si posizionano utilizzando le proprietà: top, bottom, left e right. Queste proprietà sono attive solo se prima si è definito il metodo di posizionamento.

Esistono quattro metodi di posizionamento:

• Static è la proprietà di default, gli elementi seguono il flusso della pagina
• Fixed l’elemento è posizionato in base alla finestra del browser
• Relative l’elemento è posizionato relativamente alla sua normale posizione nel flusso
• Absolute l’elemento è posizionato in base al primo elemento contenitore (padre)

Quando due elementi si sovrappongono si può gestire la priorità tra i due utilizzando la proprietà Z-INDEX.

Fluttuazione: È anche possibile definire un comportamento per la fluttuazione degli elementi float, cioè la direzione di spostamento degli elementi al variare del contesto: cioè la dimensione del contenitore o il numero di elementi adiacenti.

Sile logico vs stile fisico:

Design della Pagina

• Responsive Design: La pagina risponde automaticamente alla condizione del media utilizzato per visualizzarla.
  • Vantaggio: si può progettare in un unico momento la pagina per più dispositivi
  • Svantaggio: appesantimento della pagina
• Adjustive Design: l’utente può modificare la posizione degli elementi della pagina a seconda delle sue preferenze. Tutti questi aspetti sono gestibili tramite media query di CSS.
• Parallax Scrolling: oggetti a distanza diversa sembrano muoversi con velocità diversa.

Operazioni di controllo delle proprietà del media utilizzato.

API HTML5

API HTML5 e JavaScript

API → strumento per interfacciarsi con la pagina. JavaScript → linguaggio di script (lato browser) più utilizzato.