Downloaded 28 times
![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>
…](https://image.slidesharecdn.com/20151019-web-ii-151020143302-lva1-app6892/75/05-Introduzione-al-Web-II-13-2048.jpg)
Uploaded byGiuseppe Vizzari
05 - Introduzione al Web II
Il documento è parte del corso 'strumenti e applicazioni del web' dell'Università degli Studi di Milano Bicocca e fornisce un'introduzione ai linguaggi web, in particolare HTML e CSS, e alla loro evoluzione. Viene spiegata la differenza tra linguaggi di markup e di programmazione, con riferimento a tecnologie come JavaScript e linguaggi di scripting per la generazione dinamica di contenuti. Inoltre, si affrontano argomenti come l'embedding e l'importanza di comprendere le interazioni tra browser e server.
More Related Content
Similar to 05 - Introduzione al Web II
05 - Introduzione al Web II
- 1. Università degli Studidi Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione Corso di Strumenti e applicazioni del Web 5. Introduzione al Web (II) Giuseppe Vizzari Edizione 2015-16
- 2. Queste slides Queste slidefanno parte del corso “Strumenti e applicazioni del Web”. Il sito del corso, con il materiale completo, si trova in strumentiapplicazioniweb.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 – 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 alle screen shot, i cui diritti restano in capo ai rispettivi proprietari, che, ove possibile, sono stati indicati. L'autore si scusa per eventuali omissioni, e resta a disposizione per correggerle.
- 3. 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! 3
- 4. 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)
- 5. Esempio 5 1.Bla bla bla 2.1.1 Blu blu blu Lorem ipsum dolor sit amet, consectetuer adipiscing Nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 1.2 Bli bli bli 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 PresentazioneContenuto
- 6.
- 7.
- 8. Testo attivo Immagine attiva BottoneTab Ilink possono assumere diverse forme 8
- 9.
- 10. HTML: iframe 10 <iframe width="560"height="315" src="http://www.youtube.com/embed/qrO4YZeyl0I" frameborder="0" allowfullscreen></iframe>
- 11.
- 12. Embedding e dirittod’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/ 12
- 13. Le cose sicomplicano 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> …
- 14. 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
- 15. 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
- 16. JavaScript • JavaScript èun linguaggio di programmazione interpretato inizialmente progettato per permettere l'esecuzione di script 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
- 17. Lato client olato server? • JavaScript è (di norma) eseguito ‘lato client’ • Nel mondo web una serie di tecnologie (non ultime le servlet e 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
- 18. Scripts (server side) 18 Scriptin 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
- 19. Scripts (client side) 19 Script eseguitodal browser Può esserci anche un link allo script (quindi, si possono importare librerie di terze parti) Pagina trasferita al client
- 20.
- 21.
- 22. Lavoro individuale • Qualiinformazioni il browser trasmette al web server in un dialogo HTTP? Approfonditelo, per es. sulle pagine di Wikipedia • Approfondite la problematica dei cookies, e verificate le opzioni del vostro browser relativamente all’accettazione dei cookies, e i settaggi in atto • 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? 22