Introduzione al web (2/2) - edizione 2018/19

1. Università degli Studi di Milano Bicocca
Dipartimento di Informatica, Sistemistica e Comunicazione
Corso di Strumenti e applicazioni del Web
5. Introduzione al Web (II)
Giuseppe Vizzari
Edizione 2018-19

2. Queste slides
Queste slides fanno parte del corso “Strumenti e applicazioni del Web”. Il sito del
corso, con il materiale completo, si trova in https://gvizzari.hopto.org/wp/. Data la
rapida evoluzione della rete, il corso viene aggiornato ogni anno.
Il presente materiale è pubblicato con licenza Creative Commons
“Attribuzione - Non commerciale - Condividi allo stesso modo – 3.0”
(http://creativecommons.org/licenses/by-nc-sa/3.0/it/deed.it ):
La licenza non si estende alle immagini provenienti da altre fonti e alle
screen shot, i cui diritti restano in capo ai rispettivi proprietari, che, ove
possibile, sono stati indicati. L'autore si scusa per eventuali omissioni, e resta
a disposizione per correggerle.

3. Naming: URI, URL, URN
3
URI
Uniform Resource Identifier
URN
Uniform Resource Name
Specifica il nome della risorsa
Esempio:
(International Standard Book Number)
URL
Uniform Resource Locator
Specifica l'indirizzo della risorsa

4. Esempio
4
Web
server
Root /
A corso
B
Index.html
Filesystemdelcomputer

5. Se non mettete l’URL completo…
5
rpolillo.it
Web
server
Web server (pathname di default)browser
Se ci sono vari siti sullo stesso server,
Si usano varie tecniche per fornire il sito
di default. La soluzione più elegante è
quella di definire vari host virtuali,
ciascuno con un proprio indirizzo IP.
http://en.wikipedia.org/wiki/Virtual_hosting

6. URL shortening
• Gli URL tendono ad essere lunghi  servizi che
accorciano gli URL
• Esempio: http://www.rpolillo.it/index.php/2013/01/workshop-su-digital-heritage-
levoluzione-della-memoria-1-feb-2012-in-bicocca/  http://bit.ly/1FKg3oN
6
Esempi:
bit.ly
tinyurl.com
t.Co
….
Statistiche d'accesso e altri servizi
HTTP
internet
Browser
Web
server
HTML
HTML
PUT
GET
Servizio di URL
shortening

7. Il linguaggio HTML
• Esigenza: distinguere contenuto, struttura logica e
modalità di presentazione delle pagine
• Ogni pagina contiene, oltre al suo contenuto
informativo, anche “meta-informazioni” che
specificano struttura e presentazione
• Queste sono scritte in un linguaggio denominato
“HyperText Markup Language” (HTML), poi anche
CSS (Cascading Style Sheet, circa 1996+)
• Il "rendering" è gestito localmente dal browser, che
conosce le caratteristiche del device
• Markup, non programmazione!
7

8. Markup vs Programmazione
• Linguaggio di programmazione: utilizzato per comunicare
istruzioni a una macchina di calcolo, per definire programmi
che controllino il comportamento di un calcolatore
• Linguaggio di markup: utilizzato per annotare un documento
in modo tale che l'annotazione sia sintatticamente
distinguibile dal testo
• Esempi di linguaggi di markup:
• TeX (e LaTeX)
• SGML
• HTML, XHTML, XML
• Le annotazioni possono avere diverse finalità:
• di presentazione (definiscono come visualizzare il testo al quale sono
associate)
• procedurali (definiscono istruzioni per programmi che elaborino il
testo al quale sono associate)
• descrittive (etichettano semplicemente parti del testo, disaccoppiando
la struttura dalla presentazione del testo stesso)

9. Esempio
9
1.Bla bla bla
1.1 Blu blu blu
Lorem ipsum dolor sit
amet, consectetuer adipiscing
Nonummy nibh euismod
tincidunt ut laoreet dolore
magna aliquam erat volutpat.
1.2 Bli bli bli
Ut wisi enim ad minim
veniam, quis nostrud exerci
tation ullamcorper suscipit
Struttura
Heading 1
Heading 2
paragrafo
Verdana,
bold, 24
Verdana,
bold, 18
Verdana,
corsivo, 12
PresentazioneContenuto

10. HTML: esempio
10

11. HTML: link
11

12. Testo attivo
Immagine attiva
BottoneTab
I link possono assumere
diverse forme
12

13. HTML: immagini
13

14. HTML: iframe
14
<iframe width="560" height="315"
src="http://www.youtube.com/embed/qrO4YZeyl0I"
frameborder="0" allowfullscreen></iframe>

15. Sito
YouTube
Flickr
Incorporazione ("embedding")
15
iFrame

16. Embedding e diritto d’autore
In una sentenza del novembre 2014, la Corte di Giustizia
Europea ha stabilito che l’embedding non viola il diritto d’autore
http://www.key4biz.it/elex-corte-giustizia-ue-lembedding-non-
viola-copyright/
16

17. Le cose si complicano in fretta…
<!DOCTYPE html>
<html lang="en-IT”>
<head>
<meta content=
"/images/branding/googleg/1x/googleg_standard_color_128dp.p
ng">
<link href="/images/branding/product/ico/googleg_lodp.ico"
rel= "shortcut icon">
<meta content="origin" id="mref" name="referrer">
<title>Google</title>
<script>
[...]
</script>
<style>
[...]
</style>
[...]
</head>
<body alink="#DD4B39" bgcolor="#fff" class="hp vasq"
id="gsr" link="#12c” onload=“ […]">
<div class="ctr-p" id="viewport">
<div data-jiis="cc" id="doc-info"></div>
<div data-jiis="cc" id="cst”>
<style>
[...]
</style>
</div>
<a href=
"/setprefs?suggon=2&amp;prev=https://www.google.it/?gws_rd%
3Dssl&amp;sig=0_ySMtAze5Ck2H5XZmqjKIpBxszV4%3D"
style="left:-1000em;position:absolute">Screen-reader users,
click here to turn off Google Instant.</a>
<textarea id="csi" style="display:none">
</textarea>
…

18. Pagine statiche /
dinamiche
• Ogni pagina web è stata scritta (a
mano) da un utente umano?
• Chiaramente no…
• Un elemento fondamentale del
cosiddetto Web 2.0 è il fatto che i
contenuti sono spesso generati dagli
utenti stessi (che di norma non
conoscono HTML)
• Inoltre, ben prima, siti come portali di
notizie, e-commerce, annunci e
soprattutto i motori di ricerca,
dovevano generare automaticamente
e dinamicamente pagine web a
partire da basi di dati, archivi, altre
sorgenti di informazione
• Introduzione di linguaggi di
scripting per poter definire
template di pagine basate sul
contenuto di una sorgente di dati

19. Linguaggi di Scripting
• Linguaggio di programmazione per l'automazione di compiti
altrimenti eseguibili da un utente umano all'interno di un
ambiente software
• Variano da linguaggi molto specifici per applicazioni e domini
ristretti (e.g. MAXScript per 3ds Max), a linguaggi general
purpose (e.g. Python)
• Caratteristiche tipiche:
• Semplicità ma...
• Specificità, orientamento a funzionalità limitate
• Interpretati, raramente compilati, spesso molto dinamici
• Curiosità
• Lisp (nella sua variante AutoLISP) è incluso nelle versioni complete di
AutoCAD

20. JavaScript
• JavaScript è un linguaggio di
programmazione interpretato
inizialmente progettato per
permettere l'esecuzione di
script all'interno di browser web, lato client, per l'interazione
con l'utente, la validazione di dati all'interno di form, la
modifica di documenti web senza effetto 'pagina bianca', ...
• JavaScript è un linguaggio dinamico, debolmente tipizzato,
la cui sintassi è stata influenzata dal C e da Java…
• Oggi è utilizzato in modo pervasivo per costruire pagine web
dinamiche, capaci di riutilizzare servizi web resi disponibili
da terze parti, componendo – più che programmando –
applicazioni web

21. Lato client o lato server?
• JavaScript è (di norma) eseguito
‘lato client’
• Nel mondo web una serie di
tecnologie (non ultime le servlet
e JSP, ma anche PHP, Ruby on
Rails, …) rappresentano
tecnologie ‘lato server’
• Nella tipica architettura a 3 tier le
tecnologie lato server realizzano
gran parte delle logiche
applicative e accesso ai dati
(logic e data tier)
• Altre tecnologie ‘lato client’ sono
ad esempio Flash, le Applet di
Java
http://en.wikipedia.org/wiki/Multitier_architecture

22. Scripts (server side)
22
Script in
linguaggio PHP
eseguito dal
server
<html>
<body>
<?php
echo "ciao"
?>
</body>
</html>
<html>
<body>
ciao
</body>
</html> ciao
Pagina sul server Pagina trasferita al client

23. WordPress,
ad esempio...
(1/2)
• Gli utenti non scrivono pagina
HTML, ma da qualche parte i dati
delle pagine, degli utenti, dei
commenti, dei contenuti
multimediali, … devono essere
memorizzati
• Questo a destra è lo schema del
DB relazionale di WordPress…
• Non è rilevante per il tipico utente,
sebbene sia potenzialmente molto
utile, addirittura fondamentale per
scrivere nuovi plugin
• Non è importante conoscerlo a
memoria…
• D’altronde è necessario sapere che
esiste e magari avere qualche
rudimentale conoscenza di come è
strutturato
23

24. WordPress, ad esempio… (2/2)
• La cartella principale
dell’installazione di default di
WordPress include diversi file
PHP
• In particolare, index.php è il
template della pagina indice
del blog, che riporta l’elenco
dei post in ordine cronologico
decrescente…
• … non aprite il file index.php
sperando di vedere
direttamente il codice che
effettua questa operazione:
WordPress è molto complicato,
internamente, e index.php è
molto piccolo… ma richiama
numerosi altri file
https://www.optimizesmart.com/wordpress-ninja-15-minutes/

25. Scripts (client side)
25
Script
eseguito dal
browser
Può esserci anche
un link allo script
(quindi, si possono
importare librerie
di terze parti)
Pagina trasferita al client

26. WordPress, ad esempio…
Posso dinamicamente, e senza avere un refresh complessivo della
pagina, passare dalla statistica delle viste singole a quella del numero di
utenti

27. WordPress, ad esempio…
Questo cambiamento implica un’interazione con il server, ma
viene gestito dalla pagina attuale, in particolare da codice
JavaScript

28. Scripts (server side + client side)
Script in
linguaggio PHP
eseguito dal
server
<html>
<body>
<?php
echo "ciao"
?>
<script>
document.write(“ Pippo…”);
</script>
</body>
</html>
<html>
<body>
ciao
<script>
document.write(“ Pippo…”);
</script>
</body>
</html>
ciao Pippo…
Pagina sul server Pagina trasferita al client
Script eseguito
dal browser sul
client
Praticamente ogni web application minimamente interessante
oggi adotta questo genere di schema architetturale

29. Embedding
29
<html>
<body>
embed code
</body>
</html>
oggetto
attivo
disponibile sulla
rete

30. In sintesi…
30
BROWSER
File HTML

31. Lavoro individuale
• Approfondite il concetto di URL
• Provate qualche servizio di URL shortening, e verificate quali
servizi aggiuntivi vi vengono offerti, e il modello di business
che permette al servizio di sopravvivere sul mercato
• Il fatto che sulla vostra macchina venga eseguito un
programma scaricato da un sito vi lascia particolarmente
tranquilli?
• Perché si parla di “morte” di Flash?
• In sintesi, quanti linguaggi dovrebbe conoscere un cosidetto
“full stack developer” per essere davvero completo?
Ripercorrete le slide e cercate di fare un elenco completo per
quello che vi è stato detto…
31