• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
5. Introduzione al web (Parte II)
 

5. Introduzione al web (Parte II)

on

  • 455 views

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)

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)

Statistics

Views

Total Views
455
Views on SlideShare
192
Embed Views
263

Actions

Likes
0
Downloads
21
Comments
0

1 Embed 263

http://corsow.wordpress.com 263

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    5. Introduzione al web (Parte II) 5. Introduzione al web (Parte II) Presentation Transcript

    • 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
    • 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
    • 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
    • HTML: esempio R.Polillo - Marzo 2014 5
    • HTML: link R.Polillo - Marzo 2014 6
    • Testo attivo Immagine attiva BottoneTab I link possono assumere diverse forme R.Polillo - Marzo 20147
    • HTML: immagini R.Polillo - Marzo 2014 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>
    • Sito YouTube Flickr Incorporazione ("embedding") iFrame
    • 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
    • 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
    • Embedding R.Polillo - Marzo 2014 13 <html> <body> embed code </body> </html> oggetto attivo disponibile sulla rete
    • "Widgets": esempi R.Polillo - Marzo 2014 14
    • Creazione di un widget: esempio R.Polillo - Marzo 2014 15 Twitte r:
    • (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
    • In sintesi… R.Polillo - Marzo 2014 17 link BROWSER File HTML
    • Virtualizzazone / globalizzazione della rete 18 Da dove provengono i servizi? R.Polillo - Marzo 2014
    • 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
    • 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?
    • I device sono molto diversi e cambiano in fretta… R.Polillo - Marzo 2014 21 Fonte: StatCounter
    • I device mobili complicano ulteriormente le cose… (qui solo alcuni) R.Polillo - Marzo 2014 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
    • 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:
    • Responsive design (segue) R.Polillo - Marzo 201426 …o possono essere selezionati blocchi diversi. Ad esempio, menu di diverso tipo:
    • Esempio R.Polillo - Marzo 2014 27
    • 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
    • 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 !
    • Il grande successo delle app… R.Polillo - Marzo 2014 30 (Agosto 2010) Ma la tecnologia renderà sempre più convenienti i siti responsive
    • 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
    • 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