5. Introduzione al web (Parte II)

Edizione 2013-14

Università degli Studi di Milano BicoccaDipartimento 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


4

1.Titolo2. 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

Contenuto

HTML: esempio


5

HTML: link


6

Testo attivo

Immagine attiva

Bottone Tab

I link possono assumere diverse forme


HTML: immagini


8

HTML: iframe


9

<iframe width="560" height="315" src="http://www.youtube.com/embed/qrO4YZeyl0I" frameborder="0" allowfullscreen></iframe>

Sito

YouTube

Flickr

Incorporazione ("embedding")

iFrame

Scripts (client side)


11

Script eseguito dal

browser

Può esserci anche un link allo scriptPuò esserci anche un link allo script

Scripts (server side)


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


13

<html><body>

embed code

</body></html>

oggetto attivo

disponibile sulla rete

"Widgets": esempi


14

Creazione di un widget: esempio


15

Twitter:

(segue)


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+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Il codice generato, da copiare nella propria pagina Web

In sintesi…


17

link

BROWSER

File HTML

Virtualizzazone / globalizzazione della rete

18

Da dove provengono i servizi?


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


19

http://www.w3.org/

L’esplosione dei device di accesso


20

HTTP

internet

Web server

HTML

Si caricano pagine diverse per ogni device

OppureSi carica una stessa pagina e il browser la specializza sul device?

I device sono molto diversi e cambiano in fretta…


21

Fonte: StatCounter

I device mobili complicano ulteriormente le cose… (qui solo alcuni)


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


24

Responsive designR.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


27

Esempi

Sito responsive:http://thenextweb.comwww.rpolillo.it

Non confondere i siti responsive con i siti cosiddetti a layout liquido (in uso da molti anni):http://www.governo.it


28

Le diverse soluzioni per il mobile


29

App nativaSpecifica per il device e scaricata da un App store(non necessariamente HTTP)

Responsive web siteUna versione sola, adattata dal browser

Mobile web siteUna versione mobile del sito (m.site)

Mobile site "Standard" site

OK !

Il grande successo delle app…


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 gestireCosti di manutenzione ridottiBenefici sul lungo periodoMigliori risultati SEO

Dal punto di vista dell'utente:Maggiore qualità della user experiencePossibilità di consultazione in ogni contesto


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


32

5. Introduzione al web (Parte II)

Education

Transcript of 5. Introduzione al web (Parte II)