5. Introduzione al web (Parte II)

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
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
5

HTML: link
6

Testo attivo
Immagine attiva
BottoneTab
I link possono
assumere diverse
forme

HTML: immagini
8

HTML: iframe
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)
11
Script
eseguito dal
browser
Può esserci anche
un link allo script
Può 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
Twitte
r:

(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+"://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…
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

L’esplosione dei device di accesso
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…
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 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
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
28

Le diverse soluzioni per il mobile
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…
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
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)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to 5. Introduzione al web (Parte II)

Similar to 5. Introduzione al web (Parte II) (20)

More from Roberto Polillo

More from Roberto Polillo (20)

Recently uploaded

Recently uploaded (19)

5. Introduzione al web (Parte II)