Dipartimento di Ingegneria dell Informazione Università degli Studi di Parma. Fondamenti di Informatica. Reti di calcolatori e Internet

Transcript

1 Agent and Object Technology Lab Dipartimento di Ingegneria dell Informazione Università degli Studi di Parma Fondamenti di Informatica Reti di calcolatori e Internet Michele Tomaiuolo

2 Reti di calcolatori MODEM MODEM 2

3 Reti di calcolatori Una rete di calcolatore offre alcuni vantaggi rispetto all uso di un calcolatore isolato Condivisione dell informazione Condivisione delle risorse Accesso a risorse remote Alta affidabilità Convenienza economica Crescita graduale 3

4 Reti di calcolatori Le reti sono classificate in base alla loro dimensione Rete locale (LAN) Rete Metropolitana (MAN) Rete Geografica (WAN) 4

5 Reti locali 5

6 Reti di interconnessione 6

7 Prestazioni di una rete Le prestazioni di una rete sono indicate con la larghezza di banda La larghezza di banda indica la quantità di informazione che la rete è in grado di trasmettere nell unità di tempo La larghezza di banda viene misurata in bit al secondo Un collegamento telefonico via modem (fino a 56 Kbps) Un collegamento ISDN o ADSL (fino a ~20Mbps) Un collegamento di una rete locale (fino ad alcuni Gbps) 7

8 Trasmissione dati Doppino telefonico Modem su linea telefonica commutata 56 kbit/s ISDN 128 Kbit/s ADSL 640 Kbit/s, fino ad alcuni Mbit/s Cavo coassiale Su brevi distanze 10 MBit/s Su lunghe distanze 100 Kbit/s Fibra ottica Tbit/s Onde elettromagnetiche BlueTooth (brevissime distanze) 700 kbit/s WiFi (decine/centinaia di metri) 54 Mbit/s Via satellite 8

9 Trasmissione dati Media Tipo trasmissione Diametro Velocità Linea telefonica analogica Modulazione ISDN ADSL 56 Kbit/s 128 Kbit/s 640 Kbit/s-20Mbit/s Cavo coassiale < 1 Km > 1 Km 10 Mbit/s 100 Kbit/s Fibra ottica Tbit/s BlueTooth < 100 m 700 Kbit/s Onde elettromagnetiche WiFi Satellite < 500 m 54 Mbit/s 9

10 Internet Internet è una rete di calcolatori che permette la comunicazione tra tutti i calcolatori del mondo Un indirizzo diverso per ogni calcolatore (indirizzo IP) Un stack di protocolli di comunicazione comune (TCP/IP) per lo scambio di messaggi (pacchetti) tra i calcolatori Per ogni pacchetto viene scelto un percorso Commutazione di pacchetto anziché di circuito 10

11 Arpanet Arpa Advanced Research Projects Agency Ottobre 1969: primi due nodi di Internet Università della California di Los Angeles Stanford Research Institute Collegamento telefonico da computer a computer 1973: Transmission Control Protocol (Tcp) 1978: Internet Protocol (Ip) 1983: Milnet 1990: Inizia privatizzazione di Arpanet 11

12 Usenet 1974: Bell Labs rilasciano Unix 1978: Unix-to-unix copy protocol (Uucp) 1978: Due studenti dell Università di Chicago creano il Computer Bulletin Board System 1983: Fido, Fidonet (PC, Dos) 1979: Usenet News 1979: Primo ponte tra Arpanet e Usenet a Berkeley, nasce Internet 12

13 Indirizzi IP Un indirizzo IP è composto da una sequenza di quattro numeri compresi tra 0 e Esiste un sistema detto Domain Name Server (DNS) che permette di associare dei nomi simbolici agli indirizzi IP

14 Indirizzi IP I nomi simbolici associati agli indirizzi IP non sono liberi, ma assegnati da uffici appositi Il simbolo terminale (tld) è assegnato a livello internazionale e può essere di due tipi: Indicante il tipo di organizzazione com, edu, gov, net, mil, org Indicante la nazione it, uk, fr, 14

15 Pacchetto IP 15

16 Pacchetto IP Version 4 per IPv4 Internet Header Length 4 bit, 5-15 parole da 32 bit Type of Service 3 bit precedenza, latenza, throughput, affidabilità, 2 bit riservati Identification Identifica il datagram, assegnato dal mittente per aiutare il destinatario ad assemblare i frammenti Flags e fragment offset Riservato, don t fragment (DF), more fragments (MF) Blocchi da 8 byte Ethernet: Maximum transmission unit = 1500 bytes Time to live Decrementato ad ogni hop Protocol 6 = TCP, 17 = UDP (User datagram protocol) 16

17 Servizi di Internet La rete internet fornisce quattro servizi principali: FTP (File Transfer Protocol) SMTP (Simple Mail Transfer Protocol) TELNET HTTP (HyperText Transport Protocol) 17

18 Modello OSI/ISO Livello Definizione Applicazione Presentazione Sessione Trasporto Rete Collegamento dati Fisico Descrizione Applicazioni Definizione standard del formato dei dati utilizzati Protocolli dei servizi: FTP, HTTP, SMTP, RPC,... Protocolli TCP e UDP Protocollo IP Trasmissione e ricezione dati dipendente dal tipo di hardware Hardware 18

19 World Wide Web Assieme alla posta elettronica, World Wide Web (WWW o Web) è il modo più diffuso di utilizzare la rete Internet Il Web permette agli utenti di internet di mettere a disposizione e di accedere a documenti via HTTP Il Web si basa su due programmi Il Web server Il Web client (browser) 19

20 World Wide Web 1990: World Wide Web (Html+Http) Sistema per la condivisione di informazioni in ipertesto Sviluppato da Tim Berners-Lee CERN (Centro Europeo per la ricerca nucleare) 1993: Mosaic, primo browser grafico Marc Andreessen 1994: Netscape Navigator 1995: Internet Explorer 20

21 Html HyperText Markup Language Standardizzato dal W3C ( Linguaggio per pubblicare informazioni a livello globale Una sorta di lingua madre che tutti I computer sono potenzialmente in grado di capire HTML fornisce agli autori degli strumenti per: Pubblicare documenti online con titoli, testo, tabelle, foto ecc. Recuperare informazioni online attraverso collegamenti ipertestuali, con un click del mouse Disegnare module per condurre transazioni con servizi remoti, da usare per cercare informazioni, prenotare, ordinare prodotti ecc. Includere fogli di calcolo, video, audio e altre applicazioni direttamente nei documenti 21

22 Html Tag ed elementi HTML dichiara tipi di elementi che permettono di strutturare I documenti (paragrafi, collegamenti ipertestuali, liste, tabelle, immagini ecc.) Ogni dichiarazione di tipo di elemento generalmente descrive tre parti: un tag di apertura, un contenuto e un tag di chiusura Testo normale. <b>testo in grassetto.</b> Normale. La maggior parte dei tag permette la definizione di attributi Leggi su <a href=" I tag semplici non hanno un contenuto <img src="blueribbon.gif" /> 22

23 Html Anatomia di una pagina Anatomia di una pagina Html Tipo di documento All inizio e alla fine del file Intestazione Informazioni descrittive, come il titolo Titolo Deve essere nell intestazione Corpo Parte principale della pagina, contenuto del documento <html> <head> <title>hello, world</title> </head> <body> Hello, world. </body> </html> 23

24 Html Tag di formattazione testo Grassetto e corsivo <strong>testo in grassetto</strong> <em>testo in corsivo</em> Titoli <h1>il titolo più grande</h1>... <h6>il titolo più piccolo</h6> Paragrafi <p>questo è un paragrafo.</p> 24

25 Html Tag di formattazione testo Testo preformattato <pre>viene usato un font a larghezza fissa, gli spazi e I ritorni a capo sono preservati</pre> Riga orizzontale di separazione <hr /> Interruzioni di linea Prima linea.<br />Seconda linea. Commenti <!-- un commento html --> 25

26 Html Url Url è un acronimo per Uniform Resource Locator ed è un riferimento (indirizzo) per una risorsa sul Internet Il nome della risorsa è il suo indirizzo completo e dipende interamente dal protocollo Per Http include: Nome dell host Il nome della macchina su cui risiede la risorsa Numero di porta Num porta a cui collegarsi (di solito omesso) Nome del file Percorso completo della risorsa sulla macchina Frammento Riferimento ad una sezione con id univoco all interno della risorsa, ad una porzione di testo (di solito omesso) 26

27 Html Collegamenti Collegamenti ad altre pagine <a href=" Collegamenti con immagini <a href=" src="magnifying_lens.gif" /></a> Se la risorsa (immagine o documento) si trova nella stessa cartella della pagina, allora basta un url relativo Collegamenti Dì al <a href="mailto:president@whitehouse.gov"> presidente</a> cosa pensi. 27

28 Html Collegamenti Un collegamento può indicare ad una parte della stessa pagina, o al centro di un altra pagina Si deve assegnare all elemento puntato un nome univoco con l attributo id, oppure porre dove richiesto un elemento di anchor Si deve aggiungere un frammento alla url del collegamento <html> <body> <p id="paragraph1">il primo paragrafo. <a href="#paragraph2">vai al secondo paragrafo.</a></p> <p><a name="paragraph2">il secondo paragrafo.</a> <a href="#paragraph1">vai al primo paragrafo.</a></p> <p>il terzo paragrafo. <a href=" ad un frammento in un altra pagina.</a></p> </body> </html> 28

29 Html Liste non ordinate <ul> <li>first item</li> <li>second item</li> <li>third item</li> </ul> 29

30 Html Liste ordinate <ol> <li>first item</li> <li>second item</li> <li>third item</li> </ol> 30

31 Html Liste di definizione <dl> <dt>first term</dt> <dd>definition of first term.</dd> <dt>second term</dt> <dt>third term</dt> <dd>definition of second and third term.</dd> <dd>alternate definition of second and third term.</dd> </dl> 31

32 Html Tabelle Le tabelle html permettono di mostrare dati Le tabelle sono definite dal tag <table> Il tag <table> contiene righe di celle, definite dal tag <tr> Ogni tag <tr> contiene celle di dati, definite dal tag <td> Le celle di titolo sono definite dal tag <th> Le righe sono definite dall alto verso il basso Le celle sono definite da sinistra a destra Ogni cella di dati può contenere tutto ciò che si vuole collegamenti, immagini, liste e anche altre tabelle 32

33 Html Una tabella semplice <table border="1"> <tr> <td>northwest</td> <td>northeast</td> </tr> <tr> <td>southwest</td> <td>southeast</td> </tr> </table> 33

34 Html Una tabella con celle unite <table border="1"> <caption><i>a test table with merged cells</i></caption> <tr> <th rowspan="2"></th> <th colspan="2">average</th> <th rowspan="2">red eyes</th> </tr> <tr> <th>height</th> <th>weight</th> </tr> <tr><th>males</th><td>1.9</td><td>0.003</td><td>40%</td></tr> <tr><th>females</th><td>1.7</td><td>0.002</td><td>43%</td></tr> </table> 34

35 Html Elementi di raggruppamento Gli elementi div e span, assieme agli attributi id e class, offrono un meccanismo generico per aggiungere struttura ai documenti L elemento span raggruppa contenuto inline L elemento div raggruppa contenuto di livello blocco Non impongono nessun altro vincolo di presentazione al contenuto Gli autori possono usare questi elementi assieme a fogli di stile per adattare i doc html ai loro bisogni e gusti 35

36 Markup semantico Linee guida generali Definire un ricco vocabolario di classi semantiche la cui presentazione può essere specificata in fogli di stile validi per tutto il sito web Abbastanza da poter scrivere documenti lunghi e complessi senza introdurre elementi di presentazione Prendono il posto dei vecchi template di presentazione La presentazione è ora definita nei fogli di stile, permettendo al markup di rimanere semantico Riferimenti per il markup di mozilla.org Tecniche e linee guida per l accessibilità dei contenuti web 36

37 Markup semantico Sezioni Usare<p> per marcare I paragrafi Usare I tag per racchiudere I paragrafi, non persepararli Usere<div class="section"> per marcare le sezioni all interno di un documento Racchiudere sia il titolo che il contenuto della sezione Le sezioni sono tipicamente un po rientrate rispetto al testo vicino <div class="section"> <h2 id="structure">general Structure</h2> <p>...</p> </div> 37

38 Markup semantico Citazioni Usare<blockquote> con <address> Paragrafi o altri contenuti di livello blocco Si può indicare una attribuzione con <address> proprio prima del tag di chiusura Epigraffi: epigraph come classe <blockquote cite=" <p>the BLOCKQUOTE element contains text quoted from another source.</p> <p>a typical rendering might be a slight extra left and right indent, and/or italic font. The BLOCKQUOTE typically provides space above and below the quote.</p> <address><a href=" 2.0</a></address> </blockquote> 38

39 Linee guida mozilla.org Note di vario tipo Commenti dell autore o dell editor (in una bozza) <div class="remark"> <span class="remark"> Note generiche <span class="note"> <p class="note"> <div class="note"> Note chiave <div class="key-point"> Avvisi importanti (cioè da leggere) <* class="important"> 39

40 Linee guida mozilla.org Figure ed esempi Figure <div class="figure"> Esempi <div class="example"> <div class="good example"> <div class="bad example"> Racchiudere frammenti di codice in blocchi<code> 40

41 Linee guida mozilla.org Computer Codice inline: <code> Blocchi di codice: <pre class="code"> Comandi: <code class="command"> Nomi di file e url: <code class="filename"> Input da tastiera: <kbd> Variabili e costanti: <var> Catture di schermate testuali (blocchi di output) <pre class="screen"> e <div class="screen"> Output inline: <samp> 41

42 Linee guida mozilla.org Navigazione Indice (table of contents): <ol class="toc"> e <ul class="toc"> Navigazione locale: <ul class="snav"> Breadcrumb (navigazione gerarchica) : <p class="crumbs"> Riferimenti esterni al sito: <a class="ex-ref"> 42

43 Css Cascading Style Sheets Gli stili definiscono come visulalizzare gli elementi html Gli stili sono di solito memorizzati in fogli di stile Gli stili sono stati aggiunti ad html (v4.0) per risolvere un problema I fogli di stile esterni fanno risparmiare un sacco di lavoro I fogli di stile esterni sono memorizzati in file css Definizioni di stile multiple sono trattate a cascata in un una sola definizione 43

44 Css Gli stili risolvono un problema I tag html erano stati in origine studiati per definire il contenuto di un documento html Dovevano dire: Questo è un titolo", Questo è un paragrafo, Questa è una tabella", usando tag come <h1>, <p>, <table>, e così via Il layout del documento doveva essere preso in carica dal browser, senza usare tag di formattazione 44

45 Css Gli stili risolvono un problema I due browser principali Netscape e Internet Explorer hanno continuato ad aggiungere nuovi tag e attributi (come il tag <font> e l attributo color) alle specifiche html originali Sempre più difficile creare siti web dove il contenuto fosse separato dal layout di presentazione Per risolvere questo problema, il W3C ha creato gli stili in aggiunta ad Html 4.0 Gli stili in Html 4.0 definiscono la visualizzazione degli elementi, sostituendo <font> e color di Html 3.2 Sia Netscape 4.0 che Internet Explorer 4.0 supportano i Cascading Style Sheets 45

46 Css Gli stili fanno risparmiare lavoro Css segna una svolta nei progetti web perché permette agli sviluppatori di controllare in un sol colpo lo stile e la disposizione di molte pagine web Stili normalmente in un file esterno alle pagine html Uno sviluppatore web può definire uno stile per ciascun elemento html ed applicarlo a tutte le pagine che vuole Modifica globale - es. modificare il font o il colore di tutti i titoli in tutte le pagine di un sito Basta cambiare lo stile, e tutti gli elementi nel sito si aggiornano automaticamente Css può far risparmiare un sacco di lavoro 46

47 Css Come inserire un foglio di stile Fogli di stile esterni Fogli si stile interni Stile inline 47

48 Css Fogli di stile esterni Foglio esterno: ideale per l applicazione a molte pagine Si può cambiare l aspetto di un intero sito modificando un solo file Ogni pagina deve essere collegata al foglio di stile per mezzo del tag <link> Il tag <link> va all interno della sezione head <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> Il browser leggerà le definizioni di stile dal file mystyle.css, e formatterà il documento di conseguenza Un foglio di stile esterno può essere scritto in qualsiasi editor di testo Il file non deve contenere alcun tag html Il foglio di stile deve essere salvato con estensione.css Un esempio di foglio di stile è mostrato sotto: body {background-image: url("images/back40.gif")} p {margin-left: 20px} 48

49 Css Fogli di stile interni Un foglio di stile interno può essere usato quando un documento html ha uno stile unico Un foglio di stile interno si definisce nella sezione head usando il tag <style> <head> <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> </head> Il browser leggerà le definizioni di stile, e formatterà il documento in accordo ad esse 49

50 Css Stile inline Uno stile inline fa perdere molti dei vantaggi dei fogli di atile, perché mischia il contenuto con la presentazione Metodo da usare con parsimonia, quando uno stile deve essere applicato ad una solo occorrenza di un elemento in un documento Per definire uno stile inline si usa l attributo style dell elemento da formattare L attributo style può contenere qualsiasi proprietà css L esempio mostra come cambiare il colore e il margine sinistrao di un singolo paragrafo <p style="color: sienna; margin-left: 20px"> This is a paragraph </p> 50

51 Css Ordine di cascata I fogli di stile permettono di specificare informazioni di stile in vario modo Gli stili possono essere specificati in un singolo elemento html, nella sezione <head> di una pagina html, o in un file css esterno È possibile fare riferimento pure a diversi fogli esterni in una stessa pagina html Quale stile sarà usato quando è specificato più di uno stile per un elemento html? Tutti gli stili vengono raccolti a cascata in un nuovo foglio di stile virtuale secondo le seguenti regole Default del browser default (priorità più bassa) Foglio di stile esterno Foglio di stile interno (nella sezione <head>) Stile inline (nell elemento html priorità più alta) 51

52 Css Sintassi La sintassi css è composta di tre parti: un selettore, una proprietà ed un valore: selector {property: value} Il selettore è di colito l elemento/tag html che si vuole definire La proprietà è l attributo che si vuole cambiare, ed ogni proprietà può avere un valore La proprietà e il valore sono separati da due-punti e racchiusi tra parentesi graffe body {color: black} 52

53 Css Sintassi Se il valore è composto da più parole, bisogna racchiuderlo tra virgolette doppie Se si vuole specificare più di una proprietà, bisogna separarle con un punto-e-virgola L esempio sotto mostra come definire un paragrafo con allineamento centrato e colore del testo rosso p { text-align: center; color: red; font-family: "sans serif"; } 53

54 Css Raggruppare i selettori Si possono raggruppare i selettori: bisogna separare i selettori con una virgola Nell esempio sotto, gli elementi di titolo sono raggruppati; ogni elemento di titolo sarà verde h1, h2, h3, h4, h5, h6 { color: green; } 54

55 Css Selettore di classe Con il selettore di classe si possono definire stili diversi per uno stesso tipo di elemento html Es. due tipi di paragrafo: uno allineato a destra e uno allineato al centro p.signature {text-align: right} p.important {text-align: center} Bisogna impostare l attributo class nel doc html <p class="signature"> This paragraph will be right-aligned. </p> <p class="important"> This paragraph will be center-aligned. </p> Si può specificare solo un attributo class per ciascun elemento html 55

56 Css Selettore di classe Si può anche omettere il nome di tag nel selettore per definire uno stile da applicare a tutti gli elementi html di una certa classe Allineare al centro tutti gli elementi di classe important.important {text-align: center} Sia l elemento h1 che quello p sono di classe important; questo significa che entrambi gli elementi seguiranno le regole del selettore.important <h1 class="important"> This heading will be center-aligned </h1> <p class="important"> This paragraph will also be center-aligned. </p> 56

57 Css Selettore di id Il selettore id è diverso dal selettore class Mentre un selettore class può applicarsi a molti elementi su una pagina, il selettore id si applica ad un solo elemento Un attributo id deve essere unico all interno del documento La regola di stile qui sotto sarà applicata ad un elemento p che ha il valore di id posto a para1 p#para1 { text-align: center; color: red; } La regola di stile qui sotto sarà applicata al primo elemento avente id con valore wer345 #wer345 {color: green} <h1 id="wer345">some text</h1> 57

58 Css Commenti Per spiegare le regole, si possono inserire nel css dei commenti, che possono essere d aiuto quando il codice sorgente deve essere in seguito modificato I commenti vengono ignorati dal browser Un commento css comincia con /* e termina con */ /* This is a comment */ p { text-align: center; /* This is another comment */ color: black; font-family: arial; } 58

59 Css Sfondo background-color Imposta il colore di sfondo di un elemento - colorrgb, color-hex, color-name, transparent background-image Imposta una immagine come sfondo url, none background-repeat Imposta la ripetizione di una immagine di sfondo repeat, repeat-x, repeat-y, no-repeat background-attachment Immagine di sfondo fissa o che scorre con il testo scroll, fixed background-position Posizione di partenza di una immagine di sfondo top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x-% y-%, x-pos y-pos background Imposta tutte assieme le proprietà dello sfondo 59

60 Css Testo color Colore del testo color direction Direzione del testo ltr, rtl text-align Allineamento left, right, center, justify text-decoration Decorazione none, underline, overline, linethrough, blink text-indent Indentazione della prima riga length, % text-shadow Ombra none, color, length text-transform Controlla le lettere none, capitalize, uppercase, lowercase white-space Trattamento degli spazi bianchi normal, pre, nowrap 60

61 Css Font font-style Stile, corsivo normal, italic, oblique font-variant Maiuscoletto o normale normal, small-caps font-weight Peso, grassetto normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 font-size Dimensione xx-small, x-small, small, medium, large, x- large, xx-large, smaller, larger, length, % font-family Lista con priorità di nomi di famiglie di font e/o nomi di famiglie generiche family-name, generic-family font Imposta tutte le proprietà del font 61

62 Css Box model 62

63 Css Bordi border-width Ampiezza dei quattro bordi, accetta da uno a quattro valori thin, medium, thick, length border-style Quattro bordi, accetta da uno a quattro stili none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset border-color Colore, da uno a quattro valori color border Imposta tutte le proprietà dei bordi I bordi top, right, bottom, left possono essere cambiati indipendentemente usando proprietà separate: es. border-top-width 63

64 Css Margini esterni e interni margin Spazio attorno agli elementi È possibile usare valori negativi per sovrapporre il contenuto I margini top, right, bottom, left possono essere cambiati indipendentemente usando propietà separate, es. margin-top Possibile usare scorciatoia margin per impostare tutti i margini padding Spazio tra il bordo e il contenuto degli elementi Non sono ammessi valori negativi I padding top, right, bottom, left possono essere cambiati indipendentemente usando proprietà separate, es. padding-top Possibile usare scorciatoia padding per impostare tutti i padding 64

65 Css Dimensioni width Ampiezza auto, length, % height Altezza auto, length, % IE5 bug (?) Se si vuole un box largo 100 pixel con 10 pixel di padding e 10 pixel di bordo, bisogna impostare una regola così: width: 100px; padding: 10px; border: 10px Per ottenere lo stesso effetto in Internet Explorer 5.x, si dovrebbe alterare la regola di stile a questo modo, per evitare di ottenere un box di 40 pixel più piccolo width: 140px; padding: 10px; border: 10px IE6 è finalmente conforme alle specifiche Css sulle dim del box box-sizing Proprietà Css3 per specificare se le dimensioni del box comprendono bordi e margini o no border-box, content-box 65

66 Css Posizione bottom Distanza del limite inferiore di un elemento rispetto all elemento che lo contiene auto, %, length left Sinistra auto, %, length right Destra auto, %, length top Superiore auto, %, length vertical-align Allineamento verticale baseline, sub, super, top, text-top, middle, bottom, textbottom, length, % 66

67 Css Visibilità z-index Ordine nello stack (profondità) auto, number overflow Impostazione per contenuto più ampio dell area disponibile visible, hidden, scroll, auto visibility Visibilità visible, hidden 67