Il documento presenta il corso 'Strumenti e applicazioni del web' dell'Università di Milano-Bicocca, fornendo un'introduzione alle tecnologie del web e al suo funzionamento. Viene sottolineata la distinzione tra internet e web, illustrando i protocolli principali come TCP/IP e HTTP. Inoltre, viene menzionata l'evoluzione del linguaggio HTML e il ruolo del W3C nello sviluppo degli standard del web.

1. Edizione 2011-12 Università degli Studi di Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione Corso di Strumenti e applicazioni del Web 6. Introduzione al Web Roberto Polillo

2. Queste slides Queste slides fanno parte del corso “Strumenti e applicazioni del Web”. Il sito del corso, con il materiale completo, si trova in www.corsow.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 - 2.5 Italia”: NOTA: Al materiale hanno contribuito in molti, studenti, amici e la rete. Ove possibile ne ho indicato la fonte; segnalatemi eventuali dimenticanze, sarò lieto di correggerle appena possibile. Il corso è la estensione di un mio corso precedente, denominato "Design dell'Interazione", tenuto a partire dal 2008, la cui prima edizione era basata su un corso tenuto da Carlo Vaccari all’Università di Camerino nel 2007. R.Polillo - Ottobre 2011

3. Riassunto lezione precedente Il Web non è Internet Internet è una rete di reti Il protocollo TCP/IP suddivide il data stream in pacchetti che seguono strade diverse I computer sono individuati da un indirizzo IP Il DNS associa indirizzi IP a nomi mnemonici strutturati attraverso server distribuiti XML è un metalinguaggio per definire la struttura dei messaggi fra sistemi diversi R.Polillo - Ottobre 2011

4. ICANN Internet Corporation for Assigned Names and Numbers: http://www.icann.org/ Organizzazione non-profit che gestisce lo spazio dei nomi di Internet: indirizzi IP, nomi dei protocolli, top-level domains Dal 2012 sarà possibile definire nuovi top-level domains http://www.voanews.com/english/news/science-technology/New-Internet-Name-Rule-Opens-Door-to-Huge-Changes-124180874.html R.Polillo - Ottobre 2011

5. Ipertesto LINK NODO

6. Ipertesti off-line: Hypercard (1987) stack card area sensibile (bottone invisibile) script clic

7. Hypercard: esempi http://www.youtube.com/watch?v=mlzBe5dV5e4 R.Polillo - Ottobre 2011

8. Che cos’è il Web Un sistema di tecnologie correlate, evolutesi con continuità a partire dai primi anni ’90: R.Polillo - Ottobre 2011 Concetto di ipertesto (es.Hypercard, 1987) Protocolli internet: - TCP/IP (primi anni 70) - DNS (primi anni 80) HTTP HTML URI BROWSER (da1990-91) + WWW =

9. Il World Wide Web Tim Berners-Lee (1995) "I just had to take the hypertext idea and connect it to the TCP Protocol and Domain Name System ideas and – Ta-da! – the World Wide Web! ” R.Polillo - Ottobre 2011

10. Il world wide web Una particolare applicazione di internet L’idea base: archiviare pagine di ipertesto su computer in Internet, permettendo di linkarle fra loro, (indipendendentemente dalla loro collocazione) e permettendone l’accesso da qualunque computer in Internet specificandone soltanto un nome simbolico, detto URL (Uniform Resource Locator) R.Polillo - Ottobre 2011

11. Il world wide web Pagina (file) Link R.Polillo - Ottobre 2011

12. Il protocollo HTTP “ HyperText Transfer Protocol”: le regole che governano il trasferimento di pagine web dal computer che le archivia (“server”) al computer che le richiede (“client”) R.Polillo - Ottobre 2011

13. Il world wide web: sintesi Internet Client il protocollo: HTTP R.Polillo - Ottobre 2011 Server web server File (HTML) browser Get(URL) Put

14. Naming: URI, URL, URN URI Uniform Resource Identifier R.Polillo - Ottobre 2011 URN Uniform Resource Name Specifica il nome della risorsa Esempio: (International Standard Book Number) URL Uniform Resource Locator Specifica l'indirizzo della risorsa

15. URL (Uniform Resource Locator) Ogni pagina web viene identificata specificandone il “contenitore”, cioè: - il nome del computer che la contiene e - il nome del file all ’interno di tale computer Esempio: http :// www . rpolillo.it /corso/index.html R.Polillo - Ottobre 2011 nome schema nome dominio nome computer nome file

16. Struttura di un file system R.Polillo - Ottobre 2011 Directory (folder) Root / A B C x y z y x /B/C/y

17. HTTP: Privacy Internet Client il protocollo: HTTP R.Polillo - Ottobre 2011 Info inviate dal browser al server: Indirizzo IP Referrer Browser name Screen resolution OS … Log file Cookies Server web server File (HTML) browser Get(URL) Put

18. Il problema della varietà dei device di accesso Client 1 R.Polillo - Ottobre 2011 browser 1 Internet Server File (HTML) browser 2 Client 2 Client 3 browser 3

19. Esempio: screen resolution R.Polillo - Ottobre 2011 http://gs.statcounter.com/#resolution-ww-quarterly-200901-201104 (embeddable widget)

20. Il linguaggio HTML -> 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) (e sue evoluzioni) La presentazione è gestita localmente, sulla base delle caratteristiche del client R.Polillo - Ottobre 2011

21. Esempio R.Polillo - Ottobre 2011 Titolo 1.1 Sottotitolo Lorem ipsum dolor sit amet, consectetuer adipiscing Nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat . 1.2 Sottotitolo 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 Presentazione

22. HTML: esempio R.Polillo - Ottobre 2011

23. HTML: immagini R.Polillo - Ottobre 2011

24. HTML: link R.Polillo - Ottobre 2011

25. Testo attivo Immagine attiva Bottone Tab I link possono assumere diverse forme R.Polillo - Ottobre 2011

26. Scripts (client side) R.Polillo - Ottobre 2011 Script eseguito dal browser

27. Scripts (server side) R.Polillo - Ottobre 2011 Script eseguito dal server <html> <body> <?php echo &quot;ciao&quot; ?> </body> </html> <html> <body> ciao </body> </html> ciao

28. Widgets R.Polillo - Ottobre 2011

29. Widget embedding R.Polillo - Ottobre 2011 <html> <body> embed code </body> </html>

30. Embedding: esempio R.Polillo - Ottobre 2011 <iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;http:// www.youtube.com /embed/qrO4YZeyl0I&quot; frameborder=&quot;0&quot; allowfullscreen></iframe>

31. In sintesi… R.Polillo - Ottobre 2011 link CLIENT

32. Virtualizzazione dei servizi R.Polillo - Ottobre 2011

33. HTML e CSS: evoluzione R.Polillo - Ottobre 2011 http://www.jasonspeaking.com/index.php/2010/04/the-evolution-of-html-css /

34. W3C: World Wide Web Consortium Fondato nel 1994 da Tim Berners-Lee &quot; The W3C mission is to lead the World Wide Web to its full potential by developing protocols and guidelines that ensure the long-term growth of the Web&quot; Emette delle Recommendations , che sono considerate gli standard del Web Guardate http://www.w3.org R.Polillo - Ottobre 2011

35. Prestazioni Site Access Provider User Access Provider Internet R.Polillo - Ottobre 2011 User Web Server Banda verso UAP Caratteristiche dell ’UAP Congestione della rete Caratteristiche del SAP Banda verso SAP Caratteristiche del server Caratteristiche del file

36. Quanta banda oggi? Da uno studio recente dei downloads (2010): Media worldwide: 580 kbps Media USA: 616 Kbps Media Italia: 336 Kbps Best : South Corea: 2020 Kbps Worst : Congo: 13 Kbps http://www.pandonetworks.com/Pando-Networks-Releases-Global-Internet-Speed-Study R.Polillo - Ottobre 2011

37. Digital divide (banda) http://chartsbin.com/view/2484 (widget embeddable) R.Polillo - Ottobre 2011

38. Lavoro individuale Incominciate a scrivere il wikibook Guardate le pagine dell'anno scorso (erano individuali), in http://wikicorso.wiki-site.com/index.php/Learning_journals_2010 R.Polillo - Ottobre 2011