5 - Introduzione al Web (2/2) - 17/18
-
Upload
giuseppe-vizzari -
Category
Education
-
view
590 -
download
0
Transcript of 5 - Introduzione al Web (2/2) - 17/18
![Page 1: 5 - Introduzione al Web (2/2) - 17/18](https://reader034.fdocumenti.com/reader034/viewer/2022050914/5a6649257f8b9a47688b4f95/html5/thumbnails/1.jpg)
Università degli Studi di Milano BicoccaDipartimento di Informatica, Sistemistica e Comunicazione
Corso di Strumenti e applicazioni del Web
5. Introduzione al Web (II)
Giuseppe Vizzari
Edizione 2017-18
![Page 2: 5 - Introduzione al Web (2/2) - 17/18](https://reader034.fdocumenti.com/reader034/viewer/2022050914/5a6649257f8b9a47688b4f95/html5/thumbnails/2.jpg)
Queste slides
Queste slides fanno parte del corso “Strumenti e applicazioni del Web”. Il sito delcorso, con il materiale completo, si trova in https://gvizzari.hopto.org/wp/. Data larapida 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 allescreen shot, i cui diritti restano in capo ai rispettivi proprietari, che, ovepossibile, sono stati indicati. L'autore si scusa per eventuali omissioni, e restaa disposizione per correggerle.
![Page 3: 5 - Introduzione al Web (2/2) - 17/18](https://reader034.fdocumenti.com/reader034/viewer/2022050914/5a6649257f8b9a47688b4f95/html5/thumbnails/3.jpg)
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
![Page 4: 5 - Introduzione al Web (2/2) - 17/18](https://reader034.fdocumenti.com/reader034/viewer/2022050914/5a6649257f8b9a47688b4f95/html5/thumbnails/4.jpg)
Esempio
4
Web
server
Root /
A corso
B
Index.html
File
syste
m d
el co
mp
ute
r
![Page 5: 5 - Introduzione al Web (2/2) - 17/18](https://reader034.fdocumenti.com/reader034/viewer/2022050914/5a6649257f8b9a47688b4f95/html5/thumbnails/5.jpg)
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
![Page 6: 5 - Introduzione al Web (2/2) - 17/18](https://reader034.fdocumenti.com/reader034/viewer/2022050914/5a6649257f8b9a47688b4f95/html5/thumbnails/6.jpg)
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.lytinyurl.comt.Co….
Statistiche d'accesso e altri servizi
HTTPinternet
Browser
Web
server
HTML
HTMLPUT
GET
Servizio di URL shortening
![Page 7: 5 - Introduzione al Web (2/2) - 17/18](https://reader034.fdocumenti.com/reader034/viewer/2022050914/5a6649257f8b9a47688b4f95/html5/thumbnails/7.jpg)
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
![Page 8: 5 - Introduzione al Web (2/2) - 17/18](https://reader034.fdocumenti.com/reader034/viewer/2022050914/5a6649257f8b9a47688b4f95/html5/thumbnails/8.jpg)
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)
![Page 9: 5 - Introduzione al Web (2/2) - 17/18](https://reader034.fdocumenti.com/reader034/viewer/2022050914/5a6649257f8b9a47688b4f95/html5/thumbnails/9.jpg)
Esempio
9
1.Bla bla bla1.1 Blu blu bluLorem ipsum dolor sit
amet, consectetuer adipiscing
Nonummy nibh euismodtincidunt ut laoreet dolore
magna aliquam erat volutpat.
1.2 Bli bli bliUt wisi enim ad minim
veniam, quis nostrud exercitation ullamcorper suscipit
Struttura
Heading 1
Heading 2
paragrafo
Verdana, bold, 24
Verdana, bold, 18
Verdana, corsivo, 12
PresentazioneContenuto
![Page 10: 5 - Introduzione al Web (2/2) - 17/18](https://reader034.fdocumenti.com/reader034/viewer/2022050914/5a6649257f8b9a47688b4f95/html5/thumbnails/10.jpg)
HTML: esempio
10
![Page 11: 5 - Introduzione al Web (2/2) - 17/18](https://reader034.fdocumenti.com/reader034/viewer/2022050914/5a6649257f8b9a47688b4f95/html5/thumbnails/11.jpg)
HTML: link
11
![Page 12: 5 - Introduzione al Web (2/2) - 17/18](https://reader034.fdocumenti.com/reader034/viewer/2022050914/5a6649257f8b9a47688b4f95/html5/thumbnails/12.jpg)
Testo attivo
Immagine attiva
BottoneTab
I link possono assumere
diverse forme
12
![Page 13: 5 - Introduzione al Web (2/2) - 17/18](https://reader034.fdocumenti.com/reader034/viewer/2022050914/5a6649257f8b9a47688b4f95/html5/thumbnails/13.jpg)
HTML: immagini
13
![Page 14: 5 - Introduzione al Web (2/2) - 17/18](https://reader034.fdocumenti.com/reader034/viewer/2022050914/5a6649257f8b9a47688b4f95/html5/thumbnails/14.jpg)
HTML: iframe
14
<iframe width="560" height="315"
src="http://www.youtube.com/embed/qrO4YZeyl0I"
frameborder="0" allowfullscreen></iframe>
![Page 15: 5 - Introduzione al Web (2/2) - 17/18](https://reader034.fdocumenti.com/reader034/viewer/2022050914/5a6649257f8b9a47688b4f95/html5/thumbnails/15.jpg)
Sito
YouTube
Flickr
Incorporazione ("embedding")
15
iFrame
![Page 16: 5 - Introduzione al Web (2/2) - 17/18](https://reader034.fdocumenti.com/reader034/viewer/2022050914/5a6649257f8b9a47688b4f95/html5/thumbnails/16.jpg)
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
![Page 17: 5 - Introduzione al Web (2/2) - 17/18](https://reader034.fdocumenti.com/reader034/viewer/2022050914/5a6649257f8b9a47688b4f95/html5/thumbnails/17.jpg)
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>
…
![Page 18: 5 - Introduzione al Web (2/2) - 17/18](https://reader034.fdocumenti.com/reader034/viewer/2022050914/5a6649257f8b9a47688b4f95/html5/thumbnails/18.jpg)
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
![Page 19: 5 - Introduzione al Web (2/2) - 17/18](https://reader034.fdocumenti.com/reader034/viewer/2022050914/5a6649257f8b9a47688b4f95/html5/thumbnails/19.jpg)
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
![Page 20: 5 - Introduzione al Web (2/2) - 17/18](https://reader034.fdocumenti.com/reader034/viewer/2022050914/5a6649257f8b9a47688b4f95/html5/thumbnails/20.jpg)
JavaScript
• JavaScript è un linguaggio diprogrammazione interpretatoinizialmente progettato perpermettere l'esecuzione discript 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
![Page 21: 5 - Introduzione al Web (2/2) - 17/18](https://reader034.fdocumenti.com/reader034/viewer/2022050914/5a6649257f8b9a47688b4f95/html5/thumbnails/21.jpg)
Lato client o lato server?
• JavaScript è (di norma) eseguito ‘lato client’
• Nel mondo web una serie di tecnologie (non ultime le servlete 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
![Page 22: 5 - Introduzione al Web (2/2) - 17/18](https://reader034.fdocumenti.com/reader034/viewer/2022050914/5a6649257f8b9a47688b4f95/html5/thumbnails/22.jpg)
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
![Page 23: 5 - Introduzione al Web (2/2) - 17/18](https://reader034.fdocumenti.com/reader034/viewer/2022050914/5a6649257f8b9a47688b4f95/html5/thumbnails/23.jpg)
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
![Page 24: 5 - Introduzione al Web (2/2) - 17/18](https://reader034.fdocumenti.com/reader034/viewer/2022050914/5a6649257f8b9a47688b4f95/html5/thumbnails/24.jpg)
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.phpsperando 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/
![Page 25: 5 - Introduzione al Web (2/2) - 17/18](https://reader034.fdocumenti.com/reader034/viewer/2022050914/5a6649257f8b9a47688b4f95/html5/thumbnails/25.jpg)
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
![Page 26: 5 - Introduzione al Web (2/2) - 17/18](https://reader034.fdocumenti.com/reader034/viewer/2022050914/5a6649257f8b9a47688b4f95/html5/thumbnails/26.jpg)
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
![Page 27: 5 - Introduzione al Web (2/2) - 17/18](https://reader034.fdocumenti.com/reader034/viewer/2022050914/5a6649257f8b9a47688b4f95/html5/thumbnails/27.jpg)
WordPress, ad esempio…
Questo cambiamento implica un’interazione con il server, ma viene gestito dalla pagina attuale, in particolare da codice JavaScript
![Page 28: 5 - Introduzione al Web (2/2) - 17/18](https://reader034.fdocumenti.com/reader034/viewer/2022050914/5a6649257f8b9a47688b4f95/html5/thumbnails/28.jpg)
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
![Page 29: 5 - Introduzione al Web (2/2) - 17/18](https://reader034.fdocumenti.com/reader034/viewer/2022050914/5a6649257f8b9a47688b4f95/html5/thumbnails/29.jpg)
Embedding
29
<html>
<body>
embed code
</body>
</html>
oggetto attivo
disponibile sulla rete
![Page 30: 5 - Introduzione al Web (2/2) - 17/18](https://reader034.fdocumenti.com/reader034/viewer/2022050914/5a6649257f8b9a47688b4f95/html5/thumbnails/30.jpg)
In sintesi…
30BROWSER
File HTML
![Page 31: 5 - Introduzione al Web (2/2) - 17/18](https://reader034.fdocumenti.com/reader034/viewer/2022050914/5a6649257f8b9a47688b4f95/html5/thumbnails/31.jpg)
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