5. introduzione al web (parte ii)
Post on 05-Dec-2014
634 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
R.Polillo - Marzo 2014
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
R.Polillo - Marzo 2014
5
HTML: link
R.Polillo - Marzo 2014
6
Testo attivo
Immagine attiva
Bottone Tab
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/qrO4YZeyl0I" 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 scriptPuò 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
Twitter:
(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+"://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…
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
OppureSi 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 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
R.Polillo - Marzo 2014
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
R.Polillo - Marzo 2014
28
Le diverse soluzioni per il mobile
R.Polillo - Marzo 2014
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…
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 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
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
top related