• 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
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
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
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).
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
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
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
• 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
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
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
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
• 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
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
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
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
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
• 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
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 ⎧ ⎨ ⎩
• 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
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
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
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
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
• 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
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
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
• 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
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
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
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/)
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
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 è 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
• 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>
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
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
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
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
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
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
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
• 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
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
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
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
• 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
• 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
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
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
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
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
• 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/
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
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
mcassandro
x5gtrn
morshoto
visional_engineering_and_design
yokawasa
layerx
kentarom
oracle4engineer
sonoda_mj
kuniteru
masaruogura
databricksjapan
k951286
lara
rabernat
vanstee
rocio
katarinadahlin
cassininazir
codingconduct
mraible
addyosmani
joshbly
eileencodes
marktimemedia
