05 - Introduzione al Web II

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 2015-16

Queste slides
Queste slide fanno parte del corso “Strumenti e applicazioni del Web”. Il sito del
corso, con il materiale completo, si trova in
strumentiapplicazioniweb.wordpress.com. 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.

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!
3

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)

Esempio
5
1.Bla bla bla
2. 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

Testo attivo
Immagine attiva
BottoneTab
I link possono assumere
diverse forme
8

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

Sito
YouTube
Flickr
Incorporazione ("embedding")
11
iFrame

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/
12

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&prev=https://www.google.it/?gws_rd%
3Dssl&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>
…

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

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

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

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

Scripts (server side)
18
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

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

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

In sintesi…
21
BROWSER
File HTML

Lavoro individuale
• Quali informazioni il browser trasmette al web server in un
dialogo HTTP? Approfonditelo, per es. sulle pagine di
Wikipedia
• Approfondite la problematica dei cookies, e verificate le
opzioni del vostro browser relativamente all’accettazione dei
cookies, e i settaggi in atto
• 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?
22

05 - Introduzione al Web II

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (7)

Semelhante a 05 - Introduzione al Web II

Semelhante a 05 - Introduzione al Web II (20)

Mais de Giuseppe Vizzari

Mais de Giuseppe Vizzari (19)

Último

Último (9)

05 - Introduzione al Web II