Fondamenti d Informatica 1tanwts.altervista.org/FoI1516/01_IntroInternet.pdf · • Modello TCP/IP – Per le comunicazioni tra processi software/ hardware – Per le comunicazioni

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


Programmazione Web

•  Piattaforma di esecuzione Web – Oltre il PC – Accesso su internet ad altri PC o devices

•  Esecutore – Architettura software distribuita

•  Uso applicativo – collaborativo


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


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)


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


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


Dati Applicazione

Headers di comunicazione

07/03/16

Uso dei livelli di comunicazione


(TCP)Connessioni affidabili

(IP)Frammentazione e Routing Pacchetti

(LINK)Accesso a Rete e Error Check

(Physical)Codifica e Trasmissione

07/03/16

Livello TCP


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


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


Suddivisione geografica Suffisso Provenienza

.it Italia .sm San Marino

.nl Olanda

.eu Unione Europea

.de Germania

.ch Svizzera .fr Francia … ………


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


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


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.*

… ………


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


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)


WWW come esempio di Client-Server


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


ClientHTTPD browser ServerHTTPD

Socket Socket

Protocollo TCP

Pagina HTML richiesta

Time.new Time.new

Definizione Web Server


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


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


$ 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


Struttura Gerarchica del DOM


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


Tag per la definizione struttura

Doc.

Intestazione Titolo

Corpo

Titolo Capitolo

Titolo sezione

Paragarafo


<html>

</html>

<header>

<title>

<body>

<h1>

<h2>

Rendering del documento


<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.


Liste ed elenchi

•  Tags per liste – <ul> unorderd list (anche elenchi) – <ol> ordered list

– NB • <li> tag in comune per gli items..


Esempio di liste

•  <ul> <li> Primo elemento</li> <li> Secondo elemento</li> </ul>

•  <ol> <li> Primo elemento</li> <li> Secondo elemento</li> </ol>


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)


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


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>


Esempio

•  rapporto.html –  .. Leggi <a href=“articolo.html”>l’articolo</

a> che parla di ..

•  articolo.html –  .. Questo articolo parla di…..


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.


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


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


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à


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>


http://dist.info.uniroma2.it:8888/moodle22/pluginfile.php/2/course/section/18/moodle-mosaic.png

Esempio clickable map


http://dist.info.uniroma2.it/villamondragonemap/Villa%20Mondragone.JPG

Esempio clickable map (link 5)


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


(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


Applicazione HTML base


Pagina Web visualizzata

Web Server

HTTP request

HTTP response Page

Definition

URL Request

User

Applicazione HTML FORM


Pagina Web

FORM

Pagina Web di Risposta

Web Server

Dati FORM

Risultati FORM

Script di esecuzione

della form

User

Applicazione HTML FORM


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


Esempio FORM elementare


<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


#!/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


HTML creation in Ruby-cgi


#!/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


<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


<html> <head> <title>Google sul proprio sito</title> </head> <body>  <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>  </body> </html>

Pagina risultati


Esercizio

•  Esercizio di programmazione di rete

•  Un esempio di Chat Server


Architettura software


Client CHAT

Server CHAT

Socket Socket

Protocollo TCP

Gestione Condivisa Clients

Client CHAT

Socket

MsgA CHAT

Msg B CHAT

Definizione Client Chat


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


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


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


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


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


Uso di Google Chart


>> 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.)


>> 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=…….

Documents

Fondamenti d Informatica 1tanwts.altervista.org/FoI1516/01_IntroInternet.pdf · • Modello TCP/IP – Per le comunicazioni tra processi software/ hardware – Per le comunicazioni