5. Introduzione al web (Parte II)

55 %
45 %
Information about 5. Introduzione al web (Parte II)
Education

Published on March 13, 2014

Author: rpolillo

Source: slideshare.net

Description

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)

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

Add a comment

Related presentations

Related pages

Introduzione al Web (Parte II) - YouTube

Introduzione al Web (Parte II) ... Recensione completa parte 1 di 5 - Duration: ... Scrittura Web: Introduzione al Workshop di Web Writing ...
Read more

Introduzione al Web (Parte I) - YouTube

Introduzione al Web (Parte I) ... Introduzione al Web (Parte II) ... Corso Web Marketing Pratico (00): introduzione al corso sul Web Marketing ...
Read more

WEB.DE - E-Mail-Adresse kostenlos, FreeMail, De-Mail ...

WEB.DE wurde mit dem „Preis Marke des Jahrhunderts“ geehrt und bietet ... Top 5 Artikel. Seehofer ... das Hauptdarsteller Kevin Costner den Part von ...
Read more

1. Introduzione

Introduzione 1.1 Perché questa ... variabili prese in considerazione erano 5: ... quali fanno parte tutte insieme di questo grande progetto.
Read more

Guide | HTML.it

Questa guida punta a descrivere i principali aspetti della sicurezza nei Web Services. ... 1 2 3 4 5 >> Le guide più lette. Photoshop, ...
Read more

INTRODUZIONE 5 I PARTE: DISTACCO DEI LAVORATORI 6

INTRODUZIONE 5 A cosa serve questa ... PARTE II: ESERCIZIO DI ... Formulario E 101 in materia di distacco rilasciato dall'1.5.2008 al 30.4.2009 +
Read more

Guida a PHP | Introduzione al PHP - Web-Link.it Tutto per ...

... array associativi MySQL MySQL parte II Inviare una mail e gestire ... lezione 1: introduzione al PHP ... Per far capire al web server che stiamo ...
Read more

HTML.it

HTML.it: corsi, guide, articoli e ... Corso Responsive Web Design 3 Febbraio 2016 ... Acconsento al trattamento di cui al punto 3 dell'informativa sulla ...
Read more