Introduzione al web development

Febbraio 2021

Transcript

1. Introduzione 
 al web development Breve panoramica sulle tecnologie per lo sviluppo web Massimo Cassandro / febbraio 2021
2. https://speakerdeck.com/mcassandro/introduzione-al-web-development Questa presentazione è disponibile all’indirizzo
3. Introduzione al web development / Massimo Cassandro 2021 La rete
4. Introduzione al web development / Massimo Cassandro 2021 La rete • Quando si parla genericamente di web, si intende in realtà un sistema complesso di tecnologie e protocolli che interagiscono tra loro • Il web (la “rete”) è di fatto costituito da tantissimi nodi (termine generico che può indicare un sito, un server, una singola pagina o addirittura un utente) interconnessi tra loro. • I nodi sono connessi tra loro tramite una serie di protocolli che permettono a tutti i computer connessi (host) di parlare una lingua comune, a prescindere dalla loro architettura hardware e so ft ware 4
5. Introduzione al web development / Massimo Cassandro 2021 La nascita di Internet • Internet nasce come un’evoluzione di sistemi telematici nati negli anni ‘70 ma legati principalmente ad usi militari o al mondo universitario • I vari sistemi (BBS, Usenet, ecc..) si basavano su sistemi UNIX e utilizzavano interfacce a “riga di comando” (CLI, command line interface) • Tra il 1989 e il 1990 Tim Berners-Lee e Robert Cailliau misero a punto il protocollo HTTP e una prima specifica del linguaggio HTML in cui viene utilizzata una nuova interfaccia basati sugli ipertesti • Nel 1983 viene creato Mosaic, il primo browser • Nel 1994 nasce Netscape, il primo browser commerciale • Nel 1995 Microso ft crea Explorer 5
6. Introduzione al web development / Massimo Cassandro 2021 Comunicazione e protocolli • Ogni volta che scriviamo l’indirizzo di una pagina web (URL) o facciamo clic su un link e ff ettuiamo una richiesta ad un server tramite uno specifico protocollo. • Non ha nessuna importanza da quale programma o computer sia partita la richiesta, né quale sia il server che la riceve, né quale so ft ware sia stato impiegato per costruire la pagina che vogliamo visualizzare • Un protocollo di comunicazione in informatica è un insieme di regole formalmente descritte, definite al fine di favorire la comunicazione tra una o più entità. Tutte queste regole sono definite mediante specifici protocolli, dalle tipologie più varie, a seconda delle entità interessate e il mezzo di comunicazione. Se le due entità sono remote, si parla di protocollo di rete. (da Wikipedia) 6
7. Introduzione al web development / Massimo Cassandro 2021 7 Schema di una comunicazione web L’utente richiede una pagina. La richiesta viene inoltrata al nodo più “vicino” Ogni nodo ne contatta un altro fino ad arrivare a destinazione. L’informazione richiesta viene quindi restituita all’utente Ogni nodo è identificato nella rete in modo univoco tramite il proprio Indirizzo IP (Internet Protocol Address). L’operazione di indirizzamento da un nodo all’altro si chiama routing (instradamento).
8. Introduzione al web development / Massimo Cassandro 2021 Client e Server • Semplificando, possiamo definire una connessione internet come un collegamento tra un utente (client) e una macchina remota (il server) • Sia il client che il server sono identificati da un numero IP (=Internet Protocol) univoco 8 Client Server http Richiesta Risposta
9. Introduzione al web development / Massimo Cassandro 2021 9 Come avviene il caricamento di una pagina / 1 https://sito.it/pagina.html Pagina HTML L’utente richiede una pagina inserendo un URL nel proprio browser Il server remoto recupera o genera il file HTML richiesto e lo restituisce al browser
10. Introduzione al web development / Massimo Cassandro 2021 10 Come avviene il caricamento di una pagina / 2 WEB Il browser analizza il file HTML e richiede eventuali file collegati (se non disponibili in cache) Immagini, script, fogli stile, ecc. Le risorse possono essere caricate anche da altri server disponibili sulla rete
11. Introduzione al web development / Massimo Cassandro 2021 Risorse collegate • Una pagina web è quasi sempre composta da altre risorse (immagini, fogli stile, script, ecc…) che vengono richiamati dalla pagina stessa dopo il suo caricamento • Anche un pagina apparentemente semplice come google.it, richiama diverse risorse (visibili dal pannello “rete” della console di un qualsiasi browser) 11
12. Introduzione al web development / Massimo Cassandro 2021 Pagine statiche e pagine dinamiche • L’esempio dello schema precedente rappresenta una tipica pagina con contenuti statici, ovvero caricata così com’è dal server senza alcuna elaborazione • Molto spesso però, la richiesta viene elaborata dal server tramite un motore so ft ware (php, .NET, ecc…) che elabora la risposta HTML (o una risorsa) prima di restituirla. 
 Si parla in questo caso di siti dinamici. 12 Client Server http Richiesta Risposta Parametri della richiesta HTML elaborato Engine
13. Introduzione al web development / Massimo Cassandro 2021 Siti dinamici collegati ad un database • Un sito dinamico è molto spesso collegato ad un database che può fornire informazioni o essere aggiornato tramite un’interfaccia web 13 Database Client Server http Richiesta Risposta Parametri della richiesta HTML elaborato Engine Query Result
14. Introduzione al web development / Massimo Cassandro 2021 Elaborazioni server-side e client-side • Nell’esempio precedente, la costruzione della pagina web avviene principalmente sul server remoto, ovvero tramite elaborazione server-side (o back-end) • Ma molto spesso le elaborazioni avvengono anche sul client dell’utente. In questo caso si parla di elaborazioni client-side (o front-end). • Si intende genericamente per front-end l’insieme di tutte le componenti che agiscono sul client dell’utente (il browser o una web app): dall’interfaccia grafica, all’esperienza utente (UX) fino, in alcuni casi, alla logica stessa dell’applicazione 14
15. Introduzione al web development / Massimo Cassandro 2021 DOMINI e protocolli
16. Introduzione al web development / Massimo Cassandro 2021 INDIRIzzi IP • Ogni server, o meglio ogni dispositivo connesso a Internet è identificato grazie ad un indirizzo IP (nella forma 123.123.123.123), dove ogni numero può avere un valore da 0 a 255 • Gli indirizzi IP possono essere statici, ovvero rimanere sempre uguali ad ogni connessione, o dinamici, cioè assegnati in modo automatico volta per volta dal server • Le utenze internet domestiche hanno generalmente IP dinamici 16
17. Introduzione al web development / Massimo Cassandro 2021 nomi a dominio • Per rendere più semplice identificare un dispositivo, è possibile assegnargli un nome a dominio, ovvero una stringa composta da un nome e da un’estensione (quest’ultima identifica il paese o il tipo di dominio) • La conversione tra domini e IP viene svolta dai DNS (Domain Name Server), un sistema di database distribuito gestito da server specifici • un dominio del tipo miodominio.it è un dominio di secondo livello • risorse.miodominio.it è un dominio di terzo livello 17
18. Introduzione al web development / Massimo Cassandro 2021 assegnazione dei nomi a dominio • L’assegnazione dei domini e degli indirizzi IP viene svolta da enti internazionali no-profit e poi a ff idata a distributori commerciali, istituzionali ecc. (ISP, Internet Service Provider) • L’organismo internazione che presiede l’assegnazione degli indirizzi è l’ICANN (Internet Corporation for Assigned Names and Numbers) • Il Registro Italiano dei domini (http://www.nic.it) ha sede presso il CNR di Pisa. 18
19. Introduzione al web development / Massimo Cassandro 2021 URI e URL • Ogni elemento all’interno della rete è identificato univocamente da un URI (Uniform Resource Identifier). Può essere un documento, un’immagine ecc. • Un URL (Uniform Resource Locator) è un URI che fornisce indicazioni su come accedere alla risorsa stessa, ovvero contiene un protocollo • Quindi tutti gli URL sono URI, ma non il contrario Gli URN (Uniform Resource Name), identificano una risorsa all’interno di un namespace. Gli URN non forniscono indicazioni su come accedere alla risorsa, quindi non sono URL. Un esempio di URN sono i codici ISBN 19
20. Introduzione al web development / Massimo Cassandro 2021 Protocolli più comuni • http: (HyperText Transfer Protocol) è il protocollo più comune nel web • https: (HyperText Transfer Protocol over Secure Socket Layer) fa sì che le comunicazioni fra client e server siano cifrate • ft p: (File Transfer Protocol) è utilizzato per il trasferimento di file • mailto: è un URI che produce un hyperlink per inviare una mail. 20
21. Introduzione al web development / Massimo Cassandro 2021 Altri protocolli • tel: ed sms: sono utilizzati per generare link che attivano un chiamata o inviano un sms. Hanno uso quasi esclusivo negli smartphone • telnet:, ssh: permettono di stabilire una connessione a riga di comando ed operare su server remoti • Esistono anche protocolli proprietari, utilizzati dai produttori di so ft ware per attivare funzionalità specifiche (es. skype:skype_address) 21
22. Introduzione al web development / Massimo Cassandro 2021 22 Le parti di un url Da: https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL http://miosito.com:80/path/to/file.html?key1=value1&key2=value2#anchor Authority Schema (protocollo) http:// miosito.com:80 nome dominio porta /path/to/file.html Percorso risorsa ?key1=val1&key2=val2 Parametri #anchor Anchor ⎧ ⎨ ⎩
23. Introduzione al web development / Massimo Cassandro 2021 connessionI http • Http si basa su un meccanismo di richiesta (da parte del client) e di risposta (da parte del server) • Il client invia un richiesta (un URL) e con una serie di informazioni su browser, tipo di connessione, ecc. • Il server risponde quindi con un messaggio di stato (che indica l’esito della richiesta), con ulteriori informazioni e con la risorsa stessa 23 Client Server http Richiesta Risposta
24. Introduzione al web development / Massimo Cassandro 2021 24 Esempio di connessione http • Un esempio di richiesta e risposta http monitorata tramite la console del browser (in questo caso Firefox)
25. Introduzione al web development / Massimo Cassandro 2021 HEADERS della richiesta • Oltre alla richiesta sono presenti delle intestazioni (headers) che contengono informazioni aggiuntive, ad esempio, nella richiesta: ➔ Host: indica il server a cui si fa riferimento ➔ User-Agent: informazioni sul client che ha e ff ettuato la richiesta (tipologia, versione, sistema operativo, ecc.) ➔ Cookie: eventuali informazioni aggiuntive legate al server richiesto precedentemente memorizzate ➔ Accept-xxx: informazioni sui formati, i protocolli ecc. accettati dal browser 25
26. Introduzione al web development / Massimo Cassandro 2021 Headers di risposta • Tra gli altri, sono presenti ➔ Server: il server http che ha gestito la richiesta ➔ Content-type: indica il tipo di risorsa restituita (ad esempio text/html, indica un documento html, image/ jpeg, un’immagine JPEG, ecc.) ➔ Status: codici che indicano l’esito della connessione 26
27. Introduzione al web development / Massimo Cassandro 2021 HEADERS DI STATO • I codici di stato indicano al client l’esito della richiesta e sono catalogati in base alla prima cifra: ➔ 1xx: messaggi informativi ➔ 2xx: richiesta andata a buon fine ➔ 3xx: redirect, la risorsa è stata spostata su un altro URI (che viene fornito) ➔ 4xx: client error (richiesta non corretta) ➔ 5xx: server error • Codici più comuni: ➔ 200 OK. Il server ha fornito la risorsa richiesta ➔ 404 Not Found. La risorsa richiesta non è disponibile ➔ 500 Internal Server Error. Errore interno del server 27
28. Introduzione al web development / Massimo Cassandro 2021 Ipertesti e pagine web
29. Introduzione al web development / Massimo Cassandro 2021 Ipertesti • Ciò che maggiormente caratterizza il web è l’uso degli ipertesti • Un ipertesto è un insieme di documenti messi in relazione tra loro per mezzo di parole chiave (wikipedia) • Le parole chiave fungono da collegamenti ipertestuali (hyperlinks) che consentono di navigare da un documento all’altro • Il concetto di ipertesto nasce molto prima del web; una delle prime applicazioni informatiche di largo consumo è stata HyperCard della Apple (1980), ma ci sono esempi anche precedenti 29
30. Introduzione al web development / Massimo Cassandro 2021 30 HTML • Nel web, gli hyperlinks sono uno degli elementi fondamentali del linguaggio HTML (Hypertext Markup Language) • HTML permette di gestire la struttura della pagina utilizzando un semplice sistema a marcatori (tag). • Gli hyperlinks vengono impostati tramite il tag <a> (anchor): Questo è <a href="url_destinazione">un link</a> Questo è un link
31. Introduzione al web development / Massimo Cassandro 2021 Gli elementi di base delLE PAGIne web • I linguaggi principali utilizzati nel Front-End sono 3: HTML, CSS e Javascript • A questi si può aggiungere SVG, utilizzato per la grafica vettoriale (e non solo), che da qualche anno sta acquistando un ruolo sempre più centrale nella costruzione delle interfacce • Questi linguaggi interagiscono tra loro, permettendo la creazione di interfacce complesse, animazioni, gestione di elementi multimediali, immagini, ecc… 31
32. Introduzione al web development / Massimo Cassandro 2021 HTML, CSS, Javascript e SVG • HTML (Hypertext Markup Language) corrisponde alla struttura della pagina • CSS (Cascading Style Sheet) è la tecnologia che permette di modificare l’aspetto presentazionale (visual) e l’interfaccia • Javascript rappresenta il “motore” di una pagina web e permette di aggiungere funzionalità e interazioni con gli utenti • SVG (Scalable Vector Graphics) è un linguaggio di markup XML che permette l’aggiunta di grafica vettoriale a due dimensioni 32 → https://developer.mozilla.org/en-US/docs/Web/Tutorials
33. Introduzione al web development / Massimo Cassandro 2021 Il W3C • Questi linguaggi (e molti altri) sono regolamentati da raccomandazioni emanate dal World Wide Web Consortium, un’organizzazione internazionale a cui partecipano sviluppatori, so ft ware house, produttori di browser, dispositivi e tecnologie. • Il loro scopo è individuare delle regole e degli standard di interpretazione dei vari linguaggi, in modo che la fruizione del web possa essere il più possibile indipendente dagli strumenti utilizzati 33
34. Introduzione al web development / Massimo Cassandro 2021 Gruppi di lavoro W3c • Il W3C è organizzato in gruppi di lavoro ognuno dei quali, elaborando le proposte e le richieste dei partecipanti, segue un iter predefinito per arrivare alla pubblicazione di una nuova raccomandazione • Sono gruppi di lavoro del W3C il WHATWG (Web Hypertext Application Technology Working Group), il WCAG WG (Web Content Accessibility Guidelines Working Group), il CSS WG (Cascading Style Sheets working group) ecc. 34
35. Introduzione al web development / Massimo Cassandro 2021 HTML
36. Introduzione al web development / Massimo Cassandro 2021 HTML • HTML è un linguaggio di formattazione a marcatori utilizzato per la creazione di documenti ipertestuali, sviluppato verso la fine degli anni ottanta del ’900 da Tim Berners-Lee al Cern di Ginevra • ll codice HTML rappresenta la struttura della pagina web e permette di organizzare il contenuto. • Quest’ultimo deve essere fruibile indipendentemente dal tipo di media utilizzato dall’utente (visuale, audio, braille, ecc...) • Il codice HTML non deve quindi contenere nulla che sia legato alla rappresentazione dei dati, operazione che è eseguita dal CSS 36
37. Introduzione al web development / Massimo Cassandro 2021 Contenuto e presentazione • Lo stesso contenuto può quindi essere fruito in modo diverso in base allo strumento utilizzato dall’utente (browser o dispositivo assistivo), ai fogli stile utilizzati e alla modalità di interazione compatibili con l’ambiente dell’utente 37 CSS Zen Garden è un progetto curato da David Shea per dimostrare come lo stesso contenuto possa essere rappresentato in moltissimi e di ff erenti modi utilizzando solo i fogli stile (www.csszengarden.com/)
38. Introduzione al web development / Massimo Cassandro 2021 HTML • Nel linguaggio HTML ogni elemento è racchiuso all’interno di marcature dette “tag”, racchiuse tra i segni “<” e “>” • Ogni tag può inoltre avere uno o più “attributi” che ne modificano le proprietà • I tag hanno una valenza strutturale e semantica, indicano cioè il ruolo di un elemento all’interno della struttura della pagina ed assegnano un valore semantico al proprio contenuto • Ad esempio i tag di intestazione (<h1>, <h2>, …<h6>) sono interpretati come titoli al di là del loro aspetto e dell’enfasi che gli si assegna e hanno regole precise per il loro utilizzo all’interno della pagina 38
39. Introduzione al web development / Massimo Cassandro 2021 39 Struttura di una pagina HTML <!DOCTYPE html> <html lang="it"> <head> <meta charset="utf-8"> <title>Titolo pagina</title> </head> <body> <h1>La mia pagina web</h1> <p>Questo &egrave; un <strong>paragrafo</strong></p> </body> </html> DOCTYPE (DTD): indica al browser la versione HTML in uso (in questo caso la 5) Tag <html>: rappresenta la radice di un documento, contiene tutti gli altri tag Intestazione della pagina: contiene i metatags, i link ai fogli stile, ai file JS, ecc. Corpo della pagina: corrisponde al contenuto della pagina: testo, immagini, ecc. Entità HTML
40. Introduzione al web development / Massimo Cassandro 2021 Il risultato • Il testo è formattato in Times perché questa è l’impostazione di default di quasi tutti i browser, e il codice precedente non contiene nessuna indicazione alternativa • Il grassetto è stato indicato con il tag <strong> allo scopo di rendere il contenuto indipendente dal tipo di media utilizzato. Il tag <strong> indica enfasi, ed è rappresentato, nella rappresentazione visuale, con il grassetto. 40 Un'altra pagina miosito.it Titolo pagina La mia pagina web Questo è un paragrafo tag <title>
41. Introduzione al web development / Massimo Cassandro 2021 41 Versioni HTML Versione Anno Note 1-2 1991-1996 Versioni iniziali 3.2 1997 La prima versione a larga di ff usione 4.0 - 4.0.1 1997-1999 Tre tipologie di documenti 
 (Strict, Transitional, Frameset). Vengono deprecati i tag di presentazione, 
 in favore dei CSS XHTML 1.0 XHTML 1.1 2000 2001 Riformulazione di HTML 4 in XML HTML 5 Raccomandazione dal 2014 Il nome u ff iciale è HTML Living Standard. 
 Ha cominciato a di ff ondersi dal 2007 circa. La versione attuale è la 5.2
42. Introduzione al web development / Massimo Cassandro 2021 42 Anatomia di un tag HTML <p id="riga1">testo</p> ⎧ ⎪ ⎨ ⎪ ⎩ T ag di apertura <br> Tag “vuoto” (non ha apertura-chiusura) Nome ⎧ ⎨ ⎩ attributo T ag di chiusura <br /> Tag vuoto in xhtml
43. Introduzione al web development / Massimo Cassandro 2021 Collegamenti relativi e assoluti • L’attributo href può contenere un percorso relativo o assoluto • I percorsi relativi indicano la “strada” per raggiungere il file destinazione dalla posizione corrente • I percorsi assoluti indicano il percorso dalla root del sito, indipendentemente dalla posizione corrente. Funzionano solo con protocollo http (non in locale) e iniziano sempre con / o con l’url, comprensivo del protocollo • i percorsi relativi usano il simbolo ../ per indicare un percorso a ritroso 43
44. Introduzione al web development / Massimo Cassandro 2021 44 Collegamenti relativi e assoluti index.html directory1 file1.html directory2 file2.html root directory1/file1.html /directory1/file1.html Relativo da index a file1 → Assoluto dalla root, file1 → ../directory2/file2.html Relativo da file1 a file2 → http://miosito.it/directory1/file1.html Assoluto con protocollo, file1 → //miosito.it/directory1/file1.html Assoluto, protocollo implicito, file1 →
45. Introduzione al web development / Massimo Cassandro 2021 Entità • La scrittura utilizza un numero molto elevato di caratteri diversi (prendendo in considerazione tutte per le lingue del mondo) • Anche a causa di limitazioni tecniche, e anche solo limitandoci alle lingue occidentali, solo un numero limitato di caratteri sono comuni a tutte le lingue (lettere maiuscole e minuscole senza caratteri diacritici, punteggiatura e numeri) • Prima della di ff usione delle codifiche UTF (Unicode Transformation Format) era indispensabile rappresentare caratteri specifici utilizzando solo le definizioni comuni • Le Entità HTML permettono la rappresentazione di moltissimi caratteri utilizzando solo le prime 127 posizioni della tabella ASCII 45
46. Introduzione al web development / Massimo Cassandro 2021 46 Entità https://unicode-table.com/en https://dev.w3.org/html5/html-author/charref
47. Introduzione al web development / Massimo Cassandro 2021 47 Entità https://www.compart.com/en/unicode/
48. Introduzione al web development / Massimo Cassandro 2021 Document Object Model • Il Document Object Model (DOM) è una rappresentazione della pagina web come modello orientato agli oggetti • Questo permette un approccio diretto ad ogni elemento della pagina seguendo il suo “percorso” dalla radice della pagina • La rappresentazioni ad oggetti è particolarmente importante e indispensabile per applicazioni Javascript che eseguano manipolazioni della pagina (DOM injection) 48
49. Introduzione al web development / Massimo Cassandro 2021 49 Rappresentazione DOM <!DOCTYPE html> <html lang=“it"> <head> <meta charset="utf-8"> <title>Titolo pagina</title> </head> <body> <h1>Un pagina web</h1> <p>testo…</p> </body> </html> HTML HEAD BODY TITLE H1 P Text Text Text
50. Introduzione al web development / Massimo Cassandro 2021 web authoring
51. Introduzione al web development / Massimo Cassandro 2021 Anatomia di un sito web • Un sito web è un insieme di pagine correlate tra loro tramite hyperlink • La pagina principale (Home Page) risiede nella root del sito ed è richiamata automaticamente anche digitando solo il dominio del sito. In base alla configurazione del server, questo può avvenire o meno anche per le eventuali sottocartelle • La pagina principale ha un nome predefinito configurabile. Nei server Apache ha generalmente nome index.html (o .php, ecc.) 51
52. Introduzione al web development / Massimo Cassandro 2021 Pagine web • Un sito web è costituito da pagine HTML • Ogni pagina è sua volta costituita da più componenti: ➔ Il codice HTML che costituisce la pagina vera e propria: questo è l’unico elemento obbligatorio ➔ Uno o più fogli stile (CSS). I css possono essere incorporati nel codice HTML o richiamati da un file esterno ➔ Uno o più script (Javascript). Anche gli script possono essere incorporati o esterni ➔ Immagini ➔ Contenuti multimediali 52
53. Introduzione al web development / Massimo Cassandro 2021 Siti statici e siti dinamici • I siti web possono essere statici o dinamici • I siti web statici sono costituiti da pagine html aggiornate manualmente • I siti web dinamici sono costituiti da pagine generate dinamicamente (in tutto o in parte) per mezzo di linguaggi lato server e generalmente acquisendo dati da un database e consentendo, dove necessario, l’interazione da parte degli utenti 53 Database Client Server http Richiesta Risposta Parametri della richiesta HTML elaborato Engine Query Result
54. Introduzione al web development / Massimo Cassandro 2021 linguaggi server side • I linguaggi di programmazione che agiscono sulle pagine web possono essere suddivisi in due grandi categorie: linguaggi lato server (server side) o lato client (client side) • Nei linguaggi lato server le pagine web sono elaborate prima di essere inviate al client, che riceve quindi un normale html. Visto che la stessa pagina può contenere contenuto diverso (in base ad esempio a diversi parametri inviati al server) le pagine gestite da linguaggi lato server sono definite come dinamiche. • Tra i linguaggi e gli ambienti di sviluppo lato server più comuni:PHP, .NET, Java, Ruby, Python,… 54
55. Introduzione al web development / Massimo Cassandro 2021 database • Un sito web dinamico è tipicamente collegato ad un database • In questo caso, durante l’elaborazione della pagina, lo script interroga un database per recuperare delle informazioni che vengono inserite nel codice HTML generato • I sistemi di database più di ff usi sono Oracle MySQL e PostgreSQL, tra quelli opensource, e IBM DB2, Microso ft SQL Server, Oracle e Sybase tra quelli commerciali • La crescente di ff usione delle applicazioni front-end sta inoltre favorendo la crescita di altri temi database: SQLite, MongoDB, ecc… 55
56. Introduzione al web development / Massimo Cassandro 2021 Client Side • Gli script lato client sono elaborati invece direttamente nel browser e hanno lo scopo principale di aggiungere interattività alla pagina • Sono collegati alla pagina web tramite il tag <script> ma possono essere anche incorporati nella pagina stessa • Il linguaggio lato client per eccellenza è Javascript, supportato nitidamente dai browser • Molto spesso Javascript è implementato tramite librerie o framework allo scopo di automatizzare e standardizzare le procedure 56
57. Introduzione al web development / Massimo Cassandro 2021 Applicazioni front-end • Il continuo aumento delle capacità di calcolo dei dispostitivi client sta portando, da qualche anno a questa parte, alla crescita di applicazioni in cui la parte logica (il controller nel pattern MVC) è gestita sul client anziché sul server • Javascript è il linguaggio alla base di tutte (o quasi) le applicazioni front-end, sia utilizzato direttamente (Vanilla JS) che tramite Framework o librerie (tra cui spiccano Angular e React) 57
58. Introduzione al web development / Massimo Cassandro 2021 58 MVC Model View Controller Aggiornamento dei dati Lettura dei dati Azione dell’utente Visualizzazione
59. Introduzione al web development / Massimo Cassandro 2021 Ajax • Le applicazioni Front-End hanno comunque generalmente bisogno di scambiare dati con database collocati server remoto. • Questo avviene tramite Ajax (Asynchronous JavaScript and XML) • In questo modo l’applicazione client può scambiare dati con il server (in formato XML o JSON) ed eseguire lato client tutte le elaborazioni necessarie 59
60. Introduzione al web development / Massimo Cassandro 2021 60 Schema di una procedura ajax Interfaccia DB Database View Controller </XML> JSON Invio richiesta GET o POST HTML
61. Introduzione al web development / Massimo Cassandro 2021 JSON e XML • JSON (JavaScript Object Notation), è un formato basato su Javascript di semplice lettura e scrittura e adatto per la maggior parte di scambio dati tra client e server • XML (eXtensible Markup Language) è un linguaggio a marcatori molto versatile e utilizzabile per tantissimi scopi: dalla generazione di pagine web (grazie all’utilizzo dei fogli XSLT) allo scambio dati server-server o client-server 61 https://www.json.org https://developer.mozilla.org/en-US/docs/Web/XML/XML_introduction
62. Introduzione al web development / Massimo Cassandro 2021 62 JSON vs XML <?xml version="1.0" encoding="UTF-8"?> <utenti> <utente anni="20"> <nome>Giovanni</nome> <cognome>Verdi</cognome> <indirizzo>Torino</indirizzo> </utente> <utente anni="32"> <nome>Mario</nome> <cognome>Rossi</cognome> <indirizzo>Roma</indirizzo> </utente> </utenti> [ { "anni": "20", "nome": "Giovanni", "cognome": "Verdi", "indirizzo": "Torino" }, { "anni": "32", "nome": "Mario", "cognome": "Rossi", "indirizzo": "Roma" } ]
63. Introduzione al web development / Massimo Cassandro 2021 63 Quale linguaggio? https://insights.stackoverflow.com/survey/2020#technology-programming-scripting-and-markup-languages-all-respondents https://medium.com/@adsandurl5/top-programming-languages-for-backend-development-in-2020-3687202c8969
64. Introduzione al web development / Massimo Cassandro 2021 avviare un progetto web
65. Introduzione al web development / Massimo Cassandro 2021 65 Il processo di realizzazione di un sito https://webstyleguide.com/ 0 20 30 40 50 60 70 80 90 10 100 Research & speci cation Functional speci cation, project management Content development & analysis User experience design Site production & engineering Interface & usability Graphic design Building & programming Requirements User research Schedule budget Content inventory Process & task analysis Site map Page wireframes Programming & engineering Page production & linking Quality & testing Prototypes Visual design Content analysis & development Project management
66. Introduzione al web development / Massimo Cassandro 2021 classificazione incompleta delLE professioni deL WEB • Project manager / Product manager / Account manager: coordina il lavoro, definisce il budget, verifica i tempi, si rapporta con il committente • DB administrator / Back-End developer / Server administrator: programmazione lato server, gestione db, gestione del sistema (serve so ft ware, sicurezza, ecc…) • User Experience designer / Web designer / Information architect: aspetti visual e interazione con gli utenti • Front-End developer / Mobile App Developer: sviluppo front-end • Content writer / SEO manager / Social & Community Manager: preparazione dei contenuti, marketing, gestione social 66 http://www.informagiovaniroma.it/lavoro-e-impresa/approfondimenti/professioni/le-professioni-del-digitale
67. Introduzione al web development / Massimo Cassandro 2021 Responsive design • La necessità di approntare siti che appaiano di ff erentemente in base alle dimensioni del viewport ha due possibili soluzioni: ➔ e ff ettuare lo sni ff ing del dispositivo e servire contenuti ad hoc ➔ produrre un sito in grado di adattarsi alle dimensioni del browser • Quest’ultima tecnica, definita Responsive Web Design da Ethan Marcotte in un articolo su A List Apart, prevede l’utilizzo di media queries per fornire al browser il codice più adatto alle proprie dimensioni 67 https://responsivewebdesign.com/robot/
68. Introduzione al web development / Massimo Cassandro 2021 CMS • Una soluzione possibile per semplificare la realizzazione di un sito e ridurne i costi è utilizzare un CMS (Content Management System) • Un CMS è in sostanza un so ft ware completo per la gestione e la pubblicazione di un sito web • Sono necessarie competenze basilari di programmazione (nel linguaggio del CMS) per adattare un so ft ware alle proprie esigenze e conoscenze di HTML e CSS per adattare la veste grafica • In rete, sono disponibili risorse con una grande varietà di skin per CMS sia gratuite che a pagamento • Tra i CMS più di ff usi: Wordpress e Joomla, entrambi in ambiente PHP + MySQL 68
69. Introduzione al web development / Massimo Cassandro 2021 Accessibilità / inclusive design • L’accessibilità è la caratteristica di un sistema informatico hardware o so ft ware che lo rende fruibile a persone con disabilità • Dal punto di vista del design di una pagina web, l’accessibilità di si basa sull’utilizzo di un markup semantico e con grammatica formale validata, sull’utilizzo di attributi atti a porgere all’utente informazioni alternative su un determinato elemento (ad esempio l’attributo ALT di un immagine). • L’accessibilità dovrebbe essere un elemento di attenzione per ogni designer e diventa un obbligo di legge quando si tratta di siti di pubbliche amministrazioni 69 https://www.agid.gov.it/it/design-servizi/accessibilita/normativa
70. Illustrazioni di Sara Torda 
 https://pixabay.com/it/vectors/portatile-computer-portable-pc-2298286/ https://www.behance.net/massimocassandro https://github.com/massimo-cassandro https://www.linkedin.com/in/massimocassandro