Fondamenti d’Informatica 1 Proff. M. Angelaccio e B. Buttarazzi
A.A. 2015/2016 Laurea di Ingegneria (Gestionale)
Introduzione a Internet
Calendar
07/03/16 Fond. Infor. -Introduzione a Internet 2
INT
LUN MAR MER GIO VEN
1
INT
2
3
INT
4
7
BASIC
8
BASIC
9
10
BASIC
11
14
BASIC
15
BASIC
16
17
BASIC
18
21
BASIC
22
BASIC
23
24
BASIC
28
31
BASIC
25
PASQUA
INTRODUZIONE Registrazione
WEB INTRO I-O, Data Manag
BASIC I-O,Seq Data
BASIC Math Problems
29
30
Sommario • Modello di Programmazione Web
– Confronto Desktop/Web – Caratteristiche programmazione web
• Modelli di Internet – Organizzazione a livelli – Modello TCP/IP – Indirizzi Internet
• Introduzione Programmazione Web – Browser e ambiente di editing/lavoro – Introduzione HTML
3 Fond. Infor. -Introduzione a Internet 07/03/16
Modelli di programmazione
4
Modelli organizzativi • Desktop o Stand-alone
• Web o distribuito • Client -Server
Fond. Infor. -Introduzione a Internet 07/03/16
Programmazione Desktop • Piattaforma di esecuzione
– PC su cui è memorizzato il programma – librerie o moduli applicativi
• (Interfaccia Utente, Grafica , etc.)
• Esecutore – l’interprete o macchina virtuale
• (es. Ruby, Java)
• Uso Applicativo – Stand-alone
5 Fond. Infor. -Introduzione a Internet 07/03/16
Programmazione Web
• Piattaforma di esecuzione Web – Oltre il PC – Accesso su internet ad altri PC o devices
• Esecutore – Architettura software distribuita
• Uso applicativo – collaborativo
6 Fond. Infor. -Introduzione a Internet 07/03/16
Caratteristiche Programmazione Web
• due componenti software (Web Client e Web Server) che comunicano attraverso la rete internet e in genere risiedono su diversi PC (ma non necessariamente).
• linguaggio di descrizione dei documenti HTML• un protocollo di comunicazione tra Client e Server
che realizza il trasferimento da Server a Client di documenti HTML
• Linguaggio di programmazione script-embedded nei documenti HTML Javascript
7 Fond. Infor. -Introduzione a Internet 07/03/16
Quindi occorre…..
• Conoscere modello di comunicazione tra client e web server (HTTP)
• che è un caso particolare di modello di comunicazione tra processi su internet (modello di internet)
8 Fond. Infor. -Introduzione a Internet 07/03/16
Web Browser
• Invece di interprete per programmi……
• Visualizzatore di documenti HTML con estensioni tipo interprete (plugin) e linguaggio di programmazione embedded (script)
Fond. Infor. -Introduzione a Internet 9 07/03/16
I modelli di internet
• Modello TCP/IP – Per le comunicazioni tra processi software/
hardware – Per le comunicazioni tra i dati
• Modello OSI – generale – orientato ai servizi di comunicazione
Fond. Infor. -Introduzione a Internet 10 07/03/16
Modello TCP/IP
Fond. Infor. -Introduzione a Internet 11
4 livelli di astrazione per ciascun tipo di comunicazione
07/03/16
Uso dei livelli di comunicazione
Fond. Infor. -Introduzione a Internet 12
Dati Applicazione
Headers di comunicazione
07/03/16
Uso dei livelli di comunicazione
Fond. Infor. -Introduzione a Internet 13
(TCP)Connessioni affidabili
(IP)Frammentazione e Routing Pacchetti
(LINK)Accesso a Rete e Error Check
(Physical)Codifica e Trasmissione
07/03/16
Livello TCP
Fond. Infor. -Introduzione a Internet 14 07/03/16
Indirizzi Internet Tutta la comunicazione tra PC viene effettuata attraverso il protocollo TCP / IP = Transmission Control Protocol / Internet Protocol. Tutti i computer collegati ad Internet sono rintracciabili attraverso un indirizzo (indirizzo IP) Tale indirizzo si rivela indispensabile per poter contattare il computer ad esso associato. Gli indirizzi numerici hanno la forma x.y.z.w
Es. 195.198.62.2 193.201.52.12
Ciascuna cifra è compresa tra 0 e 255 Fond. Infor. -Introduzione a Internet 15 07/03/16
Indirizzi Internet
195.198.62.2
195.198.62.3
195.198.62.12
195.198.62.56
Internet
Fond. Infor. -Introduzione a Internet 16 07/03/16
Indirizzi Internet • Gli indirizzi IP sono generalmente complessi e difficili da ricordare
• E’ possibile associare a ciascun indirizzo IP numerico uno o più nomi (indirizzi IP letterali)
Es: Numerico Letterale
180.183.160.10 www.uniroma2.it
180.183.101.2 dist.info.uniroma2.it
63.2.53.1 ns.senato.it Fond. Infor. -Introduzione a Internet 17 07/03/16
Indirizzi Internet Gli indirizzi letterali sono strutturati gerarchicamente in più livelli
<host name>.<domain name>.<top level domain name> Es: www.repubblica.it www.pippo.it mail.pippo.it www.buy.com
Il primo livello raggruppa gli indirizzi in base alla provenienza geografica o alla natura dei servizi offerti
Il secondo livello definisce il nome della rete di calcolatori (dominio)
Il terzo livello attribuisce il nome ai computer appartenenti ad un determinato dominio
Fond. Infor. -Introduzione a Internet 18 07/03/16
Suddivisione geografica Suffisso Provenienza
.it Italia .sm San Marino
.nl Olanda
.eu Unione Europea
.de Germania
.ch Svizzera .fr Francia … ………
Fond. Infor. -Introduzione a Internet 19 07/03/16
Suddivisione funzionale Suffisso Funzione
.com Iniziative commerciali .org Organizzazioni .net Attività inerenti Internet .aero Compagne aeree .info Persone fisiche … ………
L’indirizzo 127.0.0.1 rappresenta l’interfaccia di loopback –Indirizzo “fittizio” associato alla macchina corrente -LOCALHOST
Fond. Infor. -Introduzione a Internet 20 07/03/16
DNS • Non esistono calcolatori su Internet che mantengono in un’unica tabella tutti i possibili indirizzi letterali esistenti
• Tale tabella è distribuita ed in possesso contemporaneamente di più calcolatori che offrono il servizio DNS
• Un calcolatore che offre il servizio DNS può rispondere ad una richiesta restituendo l’indirizzo numerico (se conosciuto) oppure interpellando un ulteriore DNS
DNS1
DNS3
DNS2
www.repubblica.it ?
?
! 194.185.98.154
Fond. Infor. -Introduzione a Internet 21 07/03/16
DNS Nel momento in cui vengono utilizzati, gli indirizzi letterali vengono convertiti in indirizzi numerici
I PC collegati ad Internet non dispongono di una propria tabella di conversione ma fanno uso di un servizio esterno detto DNS (Domain Name System)
Nome Indirizzo
*.info.uniroma2.it 192.41.218.*
*.repubblica.it 194.185.98.*
*.altavista.com 209.73.164.*
… ………
Fond. Infor. -Introduzione a Internet 22 07/03/16
Protocollo di comunicazione IP
Le informazioni inviate attraverso il protocollo IP vengono suddivise in pacchetti di piccole dimensioni inviati singolarmente
193.201.52.12 195.198.62.2
“Nel mezzo del cammin di nostra vita …”
Nel mezzo d 1 el cammin di 2 nostra vita 3
Nel mezzo d 1 el cammin di 2
Fond. Infor. -Introduzione a Internet 23 07/03/16
Programmazione web • Applicazioni Web
– Caratteristiche e Funzionamento – Architettura Software
• Linguaggio HTML – Linguaggi di markup – Caratteristriche HTML – Obbiettivi e Esempi
Fondamenti di Informatica 1 parte 2 24
WWW: funzionamento • L’utente richiede una risorsa (solitamente un documento)
identificata da un URL ! • Lo user agent(browser) interpreta l’URL e inoltra una richiesta
al server opportuno (ftp, http,...) ! • Il server fornisce la risorsa richiesta o un messaggio di errore ! • Lo user agent interpreta i contenuti del messaggio di risposta !
Se il messaggio è un documento HTML il browser si occupa automaticamente di reperire le sottoparti referenziate nel documento (immagini, appletjava...) !
• La risorsa viene presentato all’utente, eventualmente con l’ausilio di programmi esterni (mpeg player, audioplayer)
Fondamenti di Informatica 1 parte 2 25
WWW come esempio di Client-Server
Fondamenti di Informatica 1 parte 2 26
Richiesta (request)
Risposta (result)
Web Server
Uniform Resource Locator • Gli URL definiscono una sintassi e una semantica per
l’identificazione e l’accesso a risorse su Internet • Elementi URL
– quale protocollo (schema) usare per accedere alla risorsa (cioè quale server contattare)
– il nome del server e la porta presso cui è disponibile il servizio –
– il path della risorsa – – il nome della risorsa – – eventuali parametri da passare alla risorsa
• Esempio – http://dist.info.uniroma2.it/moodle/fondamenti Fondamenti di Informatica 1 parte 2 27
Esempio Web Server
Fondamenti di Informatica 1 parte 2 28
ClientHTTPD browser ServerHTTPD
Socket Socket
Protocollo TCP
Pagina HTML richiesta
Time.new Time.new
Definizione Web Server
Fondamenti di Informatica 1 parte 2 29
Accesso al modulo SOCKET Creazione di oggetto server con indirizzo internet
CICLO di SESSIONE (handshaking)-stampa messaggio di log per il campo REQUEST HTTPD-preparazione del msg nel formato HTML-invio messaggio a oggetto sessione
Codice Server in Ruby
Fondamenti di Informatica 1 parte 2 30
require "socket” server = TCPServer.open(’localhost’, 9090)
while (session = server.accept) puts "Request: #{session.gets}" session.print "HTTP/1.1 200/OK\r\nContent-type: text/html\r\n\r\n" session.print "<html><body><p>#{Time.new.to_s}</p></body></html>\r\n" session.close end
Esempio d’uso
Fondamenti di Informatica 1 parte 2 31
$ ruby web_server.rb
HTML
• Hypertext Markup language – Non è un linguaggio di programmazione – È costituito da tags (markups) che
delimitano parti di testo – Serve per il rendering (visualizzazione) dei
documenti Obbiettivo: definizione di ipertesto
32
Tags • Servono per delimitare parti di testo che
devono avere una caratteristica particolare nella visualizzazione
• inizio tag (< tag>) e fine tag (</tag>) • Gli elementi iniziali possono avere attributi
con valori – <tag = attrib= “val1” attrib=“val2”… >….</tag> – Esempio
• <p align = “center”>Titolo del paragrafo</p>
33
Caratteristiche HTML
• Definizione – Struttura Logica del documento – Struttura ipertestuale (links) – Formattazione Tipografica del testo
• Ma anche…… – Interfaccia utente per applicazioni web
• Lato server (HTML scripting) • Lato client (Rich Client)
Fondamenti di Informatica 1 34
Primo Punto di vista
HTML per la definizione della struttura logica di un
documento Fondamenti di Informatica 1 35
Document Object Model
• Documento logicamente visto come struttura gerarchica
• DOM = Document Object Model – Elementi di un documento sono
• nodi di una struttura gerarchica • organizzazione a livelli
Fondamenti di Informatica 1 36
Struttura Gerarchica del DOM
Fondamenti di Informatica 1 37
Documento
Intestazione Titolo
Corpo Capitolo Sezione
Paragrafo
Tree DOM
Document
Header
Title
Body
Chapter 1
Section 1.1
Section 1.2
Chapter 2
Section 2.1
Paragraph 2.1.1
Fondamenti di Informatica 1 38
Tag per la definizione struttura
Doc.
Intestazione Titolo
Corpo
Titolo Capitolo
Titolo sezione
Paragarafo
Fondamenti di Informatica 1 39
<html>
</html>
<header>
<title>
<body>
<h1>
<h2>
Rendering del documento
Fondamenti di Informatica 1 40
<html> <head><title>Primo esempio</title> </head><body> <h1>Titolo del capitolo</h1> <h2>Titolo della sezione</h2> <p>Testo del paragrafo...</p></body> </html>
Ancora sui tags • Oltre alla gerarchia dei titoli (h1, h2, ..., h6)
esistono altri tag per caratterizzare il testo; – es.: <em>...</em>: enfatizza (in qualche modo)
una frase importante evidenziandone i caratteri. – Anche la spaziatura tra i paragrafi e il tipo di
carattere da utilizzare viene stabilito autonomamente dal programma che visualizza il documento.
Fondamenti di Informatica 1 41
Liste ed elenchi
• Tags per liste – <ul> unorderd list (anche elenchi) – <ol> ordered list
– NB • <li> tag in comune per gli items..
Fondamenti di Informatica 1 42
Esempio di liste
• <ul> <li> Primo elemento</li> <li> Secondo elemento</li> </ul>
• <ol> <li> Primo elemento</li> <li> Secondo elemento</li> </ol>
Fondamenti di Informatica 1 43
Struttura ipertestuale • I documenti HTML possono contenere
riferimenti (link ipertestuali) ad altri documenti • invece di una sequenza di pagine (come in un
libro) ottengo una rete di pagine (una sorta di grafo con pagine fra loro correlate)
• Il riferimento ad una risorsa (documento o altro) viene espresso mediante un URL (Uniform resource Locator)
Fondamenti di Informatica 1 44
Tag per la creazione di link • Il tag per la definizione di riferimenti
ipertestuali (hypertextual reference) è • <a href=“URL” target=“finestra”>testo...</a>
• Attributo href per l’indirizzo web • Attributo target per finestra mouse
Fondamenti di Informatica 1 45
Link interni
• Il riferimento ipertestuale può spingersi fino ad un punto particolare del documento indirizzato da un URL: possono essere definite delle “ancore” interne al documento per indicare punti di aggancio di un link:
• <a href=“URL#etichetta”>testo...</a> e <a name=“etichetta”>altro testo...</a>
Fondamenti di Informatica 1 46
Esempio
• rapporto.html – .. Leggi <a href=“articolo.html”>l’articolo</
a> che parla di ..
• articolo.html – .. Questo articolo parla di…..
Fondamenti di Informatica 1 47
Altri tipi di links • Con un link è possibile indicare il protocollo con cui
potrà essere raggiunta la risorsa collegata (documento, file, ...). – Se il protocollo è differente da HTTP (es.: FTP, MAILTO, ...)
verrà attivato un programma adatto a trattarlo (a volte lo stesso browser gestisce più protocolli).
– Se il tipo di documento richiesto non può essere visualizzato dal browser (es.: documento Word, PDF, Postscript, ecc.), tipicamente viene attivato un programma adeguato, ovvero il file viene salvato sul computer.
Fondamenti di Informatica 1 48
Il tag img
• Ipertesto multimediale • Sintassi <img /> • Non ha contenuto
– per questo non ha un elemento </img> di chiusura: lo chiudiamo utilizzando lo slash ("/") prima della parentesi angolare.
• Esempio – <img src="logo.gif" />
Fondamenti di Informatica 1 49
Sintassi per img • img
– nome del tag
• src – URL dell’immagine
• alt – Testo alternativo ( se immagine non è caricabile)
• Esempio – <img src="logo.gif” alt = “Logo Azienda” />
Fondamenti di Informatica 1 50
Tipi di file Immagine • GIF
– Formato bitmap (non compresso) di qualità media
• JPEG o JPG – Fortmato bitmap compresso di qualità elevata
• PNG – Specifico per il Web di qualità pari al GIF ma con
vantaggi di portabilità
Fondamenti di Informatica 1 51
Ancora su immagini
• Attributi per allineamento nel testo – align = “center”, o “right” o “left”
• Attributi per dimensioni immagini – width height
• Image Maps – Uso avanzato di immagini come clickable
maps Fondamenti di Informatica 1 52
Esempio <img>
Fondamenti di Informatica 1 53
http://dist.info.uniroma2.it:8888/moodle22/pluginfile.php/2/course/section/18/moodle-mosaic.png
Esempio clickable map
Fondamenti di Informatica 1 54
http://dist.info.uniroma2.it/villamondragonemap/Villa%20Mondragone.JPG
Esempio clickable map (link 5)
Fondamenti di Informatica 1 55
http://dist.info.uniroma2.it/villamondragonemap/salaCariatidi.jpg
Il tag FORM • Primo esempio di applicazione web • Interfaccia tra
– utente (dati utente) del client – Server web (gestione dati)
• Elemento FORM – Parte della pagina web con modulo di interfaccia – Campi della FORM
• Inserimento dati • Pulsante FORM
Fondamenti di Informatica 1 56
(Micro) Applicazioni Web
• Overview di Richiamo • (finora) APPLICAZIONI HTML di BASE
– Uso dell’HTML come ipertesto – HTTP-request, HTML result
• (adesso) APPLICAZIONE HTML-FORM – Interfaccia grafica elementare per gestione
di dati (tipo login, search, registering) – HTML-FORM submit, HTML data result
Fondamenti di Informatica 1 57
Applicazione HTML base
Fondamenti di Informatica 1 58
Pagina Web visualizzata
Web Server
HTTP request
HTTP response Page
Definition
URL Request
User
Applicazione HTML FORM
Fondamenti di Informatica 1 59
Pagina Web
FORM
Pagina Web di Risposta
Web Server
Dati FORM
Risultati FORM
Script di esecuzione
della form
User
Applicazione HTML FORM
Fondamenti di Informatica 1 60
Pagina Web
FORM
Pagina Web di Risposta
Web Server
Dati FORM
Risultati FORM
Script di esecuzione
della form
User
Action Attribute
Struttura Tag FORM • Attributi Tag <FORM>
– NAME Nome della FORM
– ACTION URL dellla risorsa /script associata alla FORM
– METHOD Strategia di invio dei dati della FORM (da Client a Server)
• Attributi Tag <INPUT> (gestione campi) – FIELD , TEXT, etc.
• campi di input per inserimento dati
– SUBMIT • Campo per il pulsante di invio dati form allo script ACTION
Fondamenti di Informatica 1 61
Esempio FORM elementare
Fondamenti di Informatica 1 62
<html> <body> <form method="POST" action="http://dist.info.uniroma2.it/test.cgi"> Nome :<input type="text" name="FirstName" value="" /> <br /> Cognome :<input type="text" name="LastName" value="" /> <input type="submit" value="Submit Data" /> </form> </body> </html>
Script per FORM elementare
Fondamenti di Informatica 1 63
#!/usr/bin/ruby require 'cgi' cgi = CGI.new("html4") # cgi.keys => ["FirstName", "LastName"] cgi.out{ cgi.html{ cgi.head{ "\n"+cgi.title{"This Is a Test"} } + cgi.body{ "\n"+ cgi.keys.to_s + " " + cgi.params.to_s } } }
Pagina risultato
Codice Ruby test.cgi
CGI Web Programming in Ruby
• cgi ruby module – Generazione HTML (HTML creation) – Lettura dati FORM da URL (FORM
Processing)
• Uso di array (hash) per dati FORM
Fondamenti di Informatica 1 64
HTML creation in Ruby-cgi
Fondamenti di Informatica 1 65
#!/usr/bin/ruby require "cgi" cgi = CGI.new("html4") cgi.out{ cgi.html{ cgi.head{ "\n"+cgi.title{"This Is a Test"} } + cgi.body{ "\n"+ cgi.form{"\n"+ cgi.hr + cgi.h1 { "A Form: " } + "\n"+ cgi.textarea("get_text") +"\n"+ cgi.br + cgi.submit } } } }
Esempio FORM completo
Fondamenti di Informatica 1 66
<html> <head><title>Form di input</title></head> <body> <h1>Inserisci i dati:</h1> </html> <form action="search.cgi" method="GET"> <p>Nome: <input type="text" name="nome"></p> <p>Dipartimento: <select name="dip"> <option value="mat">Matematica <option value="fis">Fisica </select></p> <p>Qualifica: <input type="radio" name="qualifica“ value="prof“ checked>Docente <input type="radio“ name="qualifica“ value="stud">Studente </p> <p>Esami: <input type="checkbox" name="esami“ value="in1">Informatica <input type="checkbox“ name="esami" value="al1">Algebra</p> <p><input type="submit" value="Registra"> <input type="reset" value="Ripristina"></p> </form>
Esempio Form google search
Fondamenti di Informatica 1 67
<html> <head> <title>Google sul proprio sito</title> </head> <body> <!-- Search Google --> <form method="get" action="http://www.google.com/search"> <input type="text" name="q" size=31 maxlength=255 value=""> <input type="hidden" name="num" value="50"> <input type="submit" name="sa" value="Search Google"> </form> <!-- Search Google --> </body> </html>
Pagina risultati
Fondamenti di Informatica 1 68
Esercizio
• Esercizio di programmazione di rete
• Un esempio di Chat Server
Fondamenti di Informatica 1 parte 2 69
Architettura software
Fondamenti di Informatica 1 parte 2 70
Client CHAT
Server CHAT
Socket Socket
Protocollo TCP
Gestione Condivisa Clients
Client CHAT
Socket
MsgA CHAT
Msg B CHAT
Definizione Client Chat
Fondamenti di Informatica 1 parte 2 71
Accesso al modulo SOCKETAccesso al modulo THREAD (per garantire concorrenza) Creazione di oggetto socket con indirizzo internetNUOVO THREAD per msg di CHATCICLO di POLLING su socket (handshaking)-prelievo msg da socket
CICLO di LETTURA da tastiera (input CHAT)-scrittura msg su socket
CHIUSURA THREAD
Codice Client CHAT
Fondamenti di Informatica 1 parte 2 72
require 'socket'require 'thread’host = ARGV[0] || 'localhost'port = ARGV[1] || 1111socket = TCPSocket.new(host, port)
t = Thread.new do # Receiver thread while line = socket.gets puts "Received: #{line}" end socket.closeendwhile line = $stdin.gets # Read input break if /^exit/ =~ line socket.puts lineendsocket.puts 'QUIT' # Request disconnectt.join # Wait for receiver thread to finish
Definizione Server CHAT
Fondamenti di Informatica 1 parte 2 73
Accesso al modulo SOCKET e THREAD Creazione di oggetto server con indirizzo internetCreazione di oggetto “semaforo” per mutua esclusione
CICLO di GESTIONE array di clients
Codice Server
Fondamenti di Informatica 1 parte 2 74
if ARGV.length != 2 puts 'Usage: ./chat_server host port' exitend
Thread.abort_on_exception = true#!/usr/bin/ruby -wrequire 'socket' # TCP communicationrequire 'thread' # Multi Threading.
host, port = ARGV[0], ARGV[1]semaphore = Mutex.newserver = TCPServer.new(host, port)clients = []
CICLO di GESTIONE array di clients
Gest. Array Clients da Server
Fondamenti di Informatica 1 parte 2 75
clients = []
while (socket = server.accept) semaphore.synchronize do clients << socket end swt = Thread.new(socket) do | the_socket | while line = the_socket.gets break if /^QUIT/ =~ line semaphore.synchronize do clients.each do | client | client.puts line if client != the_socket end end end semaphore.synchronize do clients.delete(socket) end socket.close endend
Esempio d’uso
Fondamenti di Informatica 1 parte 2 76
Uso di Google Chart
Fondamenti di Informatica 1 77
>> require 'rubygems' => true >> require 'gchart' => true >> chart = Gchart.pie(:data => [55, 40, 5]) => "http://chart.apis.google.com/chart?chd=s:9sF &cht=p&chs=300x200"
Uso di Google Chart (cont.)
Fondamenti di Informatica 1 78
>> Gchart.line( :title => "Language statistics", : data => [[2.3, 1.8, 2.6, 2.8, 2.6], [3.3, 2.7, 2.6, 2.6, 2.6, 2.0]], : line_colors => ['ff0000', '0000ff'], : legend => ["Ruby", "Delphi"], : axis_with_labels => ['x'], : axis_labels => ['Gen|Feb|Mar|Apr|Apr|Mag|Giu'])
=> "http://chart.apis.google.com/chart?chd=s:qhwzw,9xwwwk&chxt=…….