5. Introduzione al web (Parte II)

1,236 views

Published on

Slides dalle lezioni del corso di Strumenti e applicazioni del Web per il corso di laurea magistrale in Teoria e tecnologia della comunicazione - Università di Milano Bicocca (Prof.R.Polillo)

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,236
On SlideShare
0
From Embeds
0
Number of Embeds
439
Actions
Shares
0
Downloads
34
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

5. Introduzione al web (Parte II)

  1. 1. Edizione 2013-14 Università degli Studi di Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione Corso di Strumenti e applicazioni del Web 5. Introduzione al Web (Parte II) Roberto Polillo
  2. 2. 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 R.Polillo - Marzo 2014 3
  3. 3. Esempio R.Polillo - Marzo 2014 4 1.Titolo 2. 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 Presentazio ne Contenuto
  4. 4. HTML: esempio R.Polillo - Marzo 2014 5
  5. 5. HTML: link R.Polillo - Marzo 2014 6
  6. 6. Testo attivo Immagine attiva BottoneTab I link possono assumere diverse forme R.Polillo - Marzo 20147
  7. 7. HTML: immagini R.Polillo - Marzo 2014 8
  8. 8. HTML: iframe R.Polillo - Marzo 2014 9 <iframe width="560" height="315" src="http://www.youtube.com/embed/qrO4Y Zeyl0I" frameborder="0" allowfullscreen></iframe>
  9. 9. Sito YouTube Flickr Incorporazione ("embedding") iFrame
  10. 10. Scripts (client side) R.Polillo - Marzo 2014 11 Script eseguito dal browser Può esserci anche un link allo script Può esserci anche un link allo script
  11. 11. Scripts (server side) R.Polillo - Marzo 2014 12 Script eseguito dal server <html> <body> <?php echo "ciao" ?> </body> </html> <html> <body> <?php echo "ciao" ?> </body> </html> <html> <body> ciao </body> </html> <html> <body> ciao </body> </html> ciao
  12. 12. Embedding R.Polillo - Marzo 2014 13 <html> <body> embed code </body> </html> oggetto attivo disponibile sulla rete
  13. 13. "Widgets": esempi R.Polillo - Marzo 2014 14
  14. 14. Creazione di un widget: esempio R.Polillo - Marzo 2014 15 Twitte r:
  15. 15. (segue) R.Polillo - Marzo 2014 16 <a class="twitter-timeline" href="https://twitter.com/robertopolillo" data- widget-id="347305773128372225">Tweets by @robertopolillo</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(! d.getElementById(id)) {js=d.createElement(s);js.id=id;js.src=p+"://platf orm.twitter.com/widgets.js";fjs.parentNode.insert Before(js,fjs);}}(document,"script","twitter- wjs");</script> Il codice generato, da copiare nella propria pagina Web
  16. 16. In sintesi… R.Polillo - Marzo 2014 17 link BROWSER File HTML
  17. 17. Virtualizzazone / globalizzazione della rete 18 Da dove provengono i servizi? R.Polillo - Marzo 2014
  18. 18. W3C: World Wide Web Consortium  Fondato nel 1994 da Tim Berners-Lee  "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"  Emette delle Recommendations, che sono considerate gli standard del Web  Guardate http://www.w3.org R.Polillo - Marzo 2014 19
  19. 19. L’esplosione dei device di accesso R.Polillo - Marzo 2014 20 HTTP internet Web server HTML Si caricano pagine diverse per ogni device Oppure Si carica una stessa pagina e il browser la specializza sul device?
  20. 20. I device sono molto diversi e cambiano in fretta… R.Polillo - Marzo 2014 21 Fonte: StatCounter
  21. 21. I device mobili complicano ulteriormente le cose… (qui solo alcuni) R.Polillo - Marzo 2014 22
  22. 22. Media query (HTML5)  Da HTML si può identificare il device che riceve la pagina, e comporre layout diversi a seconda dei casi: responsive design  Una sola pagina per tutti i device R.Polillo - Marzo 2014 24
  23. 23. Responsive design R.Polillo - Marzo 201425 I “blocchi” che compongono una pagina vengono “impaginati” in modo diverso in funzione delle dimensioni e geometria dello schermo:
  24. 24. Responsive design (segue) R.Polillo - Marzo 201426 …o possono essere selezionati blocchi diversi. Ad esempio, menu di diverso tipo:
  25. 25. Esempio R.Polillo - Marzo 2014 27
  26. 26. Esempi Sito responsive: http://thenextweb.com www.rpolillo.it Non confondere i siti responsive con i siti cosiddetti a layout liquido (in uso da molti anni): http://www.governo.it R.Polillo - Marzo 2014 28
  27. 27. Le diverse soluzioni per il mobile R.Polillo - Marzo 2014 29 App nativa Specifica per il device e scaricata da un App store (non necessariamente HTTP) Responsive web site Una versione sola, adattata dal browser Mobile web site Una versione mobile del sito (m.site) Mobile site "Standard" site OK !
  28. 28. Il grande successo delle app… R.Polillo - Marzo 2014 30 (Agosto 2010) Ma la tecnologia renderà sempre più convenienti i siti responsive
  29. 29. Responsive design: vantaggi Dal punto di vista del proprietario del sito: Un unico sito da gestire Costi di manutenzione ridotti Benefici sul lungo periodo Migliori risultati SEO Dal punto di vista dell'utente: Maggiore qualità della user experience Possibilità di consultazione in ogni contesto R.Polillo - Marzo 2014 31
  30. 30. Lavoro individuale  Riesaminate le vostre competenze di HTML, CSS. Quali tag avete usato?  Inserite qualche widget (es.: quelli di StatCounter, o Facebook, o Twitter ) in una vostra pagina web, e verificatene il funzionamento  Cercate qualche "best responsive websites" con Google, e verificate come le pagine cambiano al ridimensionamento della finestra del laptop; guardatelo anche sul cellulare  Date un'occhiata al sito del W3C R.Polillo - Marzo 2014 32

×