Presentazione del corso - Università degli Studi di Milano

Transcript

Dall‟XML a
„Casting, RSS, XHTML, JSON…
le tecnologie WEB convergono
Corso di laurea in Comunicazione Digitale
Laboratorio di sistemi e reti
A.A. 2010-2011
Simone Bassis
[email protected]
Laboratorio di sistemi e reti (Comunicazione Digitale) - A.A. 2010-2011
S. Bassis ([email protected])
Università di Milano – D.S.I.
Abbiamo già detto che …
o Il problema di Internet, dal punto di vista
del quantitativo di dati è da sempre la
catalogazione dei contenuti
o Una catalogazione necessita di essere
o Semplice
o Aggiornata
o Affidabile
• In base ai criteri di ricerca
510
1
I motori di ricerca
o
o
Sono stati il primo tentativo di “catalogare” la
rete
Funzionano molto bene
o Facili da usare
o Sempre disponibili
o Si aggiornano da soli
o
Ma hanno un problema non indifferente
o L‟immagine del contenuto all‟interno dell‟archivio di un
motore di ricerca potrebbe non essere sufficientemente
aggiornata
511
La dinamicità di Internet
o
Fintanto che su Internet il contenuto principale è
stato rappresentato da pagine statiche e contenuti
poco variabili non c‟è stato nessun problema
o
Oggi, purtroppo, la dinamicità dei dati sulla rete è
altissima (e continua ad aumentare)
o
o
o
o
Quotidiani
Previsioni del tempo
Siti per annunci di nuove versioni di software
Contenuti prodotti dagli utenti finali
•
•
•
•
Forum
Blog
Pagine personali
…
512
2
Soluzioni possibili
o
I motori di ricerca si passano in rivista tutta
Internet ogni giorno
o Impraticabile
• Anche se ai giorni d‟oggi c‟è di dice di essere in grado di farlo
o Per alcuni contenuti (tipo news) non sarebbe comunque
sufficiente
o
L‟utente si prende la briga di controllare
periodicamente le pagine web dei siti che gli
interessano
o Tedioso
o L‟interfaccia non è uniforme (si perde tempo)
o Vado a vedere un sito anche se non c‟è nulla di nuovo
513
La soluzione praticabile
o
Chi produce il contenuto mette a disposizione
una pagina speciale in cui viene pubblicato un
riassunto del contenuto
o Facile
o Veloce
o Trasparente
• Può essere costruita automaticamente mentre si crea il
contenuto
o Non c‟è interfaccia imposta
• La pagina non si deve leggere direttamente, può essere
recuperata insieme ad altre e poi rappresentata in maniera
uniforme e automatica
514
3
Perché „casting ?
Main Entry: broadcast
Function: verb
Inflected Form(s): broadcast also broad·cast·ed;
broad·cast·ing
o
Transitive verb
1. To scatter or sow (as seed) over a broad area
2. To make widely known
3. To transmit or make public by means of radio or television
o
Intransitive verb
1. To transmit a broadcast
2. To speak or perform on a broadcast program
o
Quindi, per associazione
o
Webcasting: fare quanto detto sopra via web
515
E il contenuto ?
o
Nulla si è detto sulla natura del contenuto da
distribuire
o Testo
• Webcasting (newsfeeding)
o Audio
• Podcasting (indovinate chi lo ha inventato …)
o Video
• Videocasting
516
4
RSS
o
RSS: Really Simple Syndication news
o http://www.rssboard.org/
All‟epoca RDF Site Summary
Resource Description Framework
(RDF) è lo strumento base proposto
da W3C per la codifica, lo scambio e
il riutilizzo di metadati strutturati e
consente l'interoperabilità tra
applicazioni che si scambiano
informazioni sul Web.
o
Quando siamo in presenza di un
„cast, la pagina di riassunto viene
pubblicata il formato XML all‟interno
di un namespace definito a priori
o
In pratica, andiamo a prenderci un XML di cui sappiamo
già a priori quali saranno i nomi dei tag e la sintassi
o Attenzione: tag e sintassi sono stati variati con le varie
versioni, la versione attuale è la 2.0 (v. 2.0.11)
o http://en.wikipedia.org/wiki/RSS_(file_format)
Syndication
• Nella diffusione radiotelevisiva è la vendita dei diritti di trasmissione di programmi radiotelevisivi
a singole emittenti televisive locali, senza passare attraverso una rete di emittenti televisive
nazionali
• è il fenomeno che si crea quando, in ambito giornalistico o editoriale, un giornalista decide di
vendere il proprio pezzo, tramite una agenzia specializzata, a più giornali o riviste
• Offerta di contenuti informativi, messi a disposizione degli utenti, per essere prelevati ed
redistribuiti
Laboratorio di sistemi eventualmente
e reti (Comunicazione Digitale)
- A.A. 2010-2011
517
RSS 2.0 DTD
<!ELEMENT rss (channel)>
<!ATTLIST rss version CDATA #FIXED "2.0">

<!ELEMENT channel ((item+)|
(title,link,description,(language|copyright|
managingEditor|webMaster|pubDate|lastBuildDate|
category|generator|docs|cloud|ttl|image|
textInput|skipHours|skipDays)*))>
<!ELEMENT item ((title|description)+,link?,
(author|category|comments|enclosure|guid|pubDate|source)*)>
<!ELEMENT
<!ELEMENT
<!ATTLIST
<!ELEMENT
<!ATTLIST
author (#PCDATA)>
category (#PCDATA)>
category domain CDATA #IMPLIED>
cloud (#PCDATA)>
cloud domain CDATA #IMPLIED
port CDATA #IMPLIED
path CDATA #IMPLIED
registerProcedure CDATA #IMPLIED
protocol CDATA #IMPLIED>
<!ELEMENT comments (#PCDATA)>
<!ELEMENT copyright (#PCDATA)>
<!ELEMENT description (#PCDATA)>
518
5
RSS 2.0 DTD
<!ELEMENT docs (#PCDATA)>
<!ELEMENT enclosure (#PCDATA)>
<!ATTLIST enclosure url CDATA #REQUIRED
length CDATA #REQUIRED
type CDATA #REQUIRED>
<!ELEMENT generator (#PCDATA)>
<!ELEMENT guid (#PCDATA)>
<!ATTLIST guid isPermaLink (true|false) "true">
<!ELEMENT height (#PCDATA)>
<!ELEMENT image (url,title,link,(width|height|description)*)>
<!ELEMENT language (#PCDATA)>
<!ELEMENT lastBuildDate (#PCDATA)>
<!ELEMENT link (#PCDATA)>
<!ELEMENT managingEditor (#PCDATA)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT pubDate (#PCDATA)>
<!ELEMENT skipDays (#PCDATA)>
<!ELEMENT skipHours (#PCDATA)>
<!ELEMENT source (#PCDATA)>
<!ATTLIST source url CDATA #REQUIRED>
<!ELEMENT textInput (title,description,name,link)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT ttl (#PCDATA)>
<!ELEMENT url (#PCDATA)>
<!ELEMENT webMaster (#PCDATA)>
<!ELEMENT width (#PCDATA)>
519
Niente panico però
o
Non tutti i tag vengono utilizzati sempre
o
Per motivi di compatibilità ci si limita a quelli
specificati dalla versione 0.91, che sono molti
meno
o E neppure quelli vengono utilizzati sempre tutti
http://my.netscape.com/publish/formats/rss-0.91.dtd
o
Peccato che di versioni attualmente in uso ce
ne siano ben 9
o
E nessuna è completamente compatibile con le
precedenti
520
6
RSS 0.91
<!ELEMENT rss (channel)>
<!ATTLIST rss
version
CDATA #REQUIRED> 
<!ELEMENT channel (title | description | link | language | item+ | rating? |
image? | textinput? | copyright? | pubDate? | lastBuildDate? | docs? |
managingEditor? | webMaster? | skipHours? | skipDays?)*>
<!ELEMENT title (#PCDATA)>
<!ELEMENT description (#PCDATA)>
<!ELEMENT link (#PCDATA)>
<!ELEMENT image (title | url | link | width? | height? | description?)*>
<!ELEMENT url (#PCDATA)>
<!ELEMENT item (title | link | description)*>
<!ELEMENT textinput (title | description | name | link)*>
<!ELEMENT name (#PCDATA)>
<!ELEMENT rating (#PCDATA)>
<!ELEMENT language (#PCDATA)>
<!ELEMENT width (#PCDATA)>
<!ELEMENT height (#PCDATA)>
<!ELEMENT copyright (#PCDATA)>
<!ELEMENT pubDate (#PCDATA)>
<!ELEMENT lastBuildDate (#PCDATA)>
<!ELEMENT docs (#PCDATA)>
<!ELEMENT managingEditor (#PCDATA)>
<!ELEMENT webMaster (#PCDATA)>
<!ELEMENT hour (#PCDATA)>
<!ELEMENT day (#PCDATA)>
<!ELEMENT skipHours (hour+)>
<!ELEMENT skipDays (day+)>
521
La struttura di un RSS
o
Il root element è rss
o
All‟interno di rss c‟è un elemento channel
o
L‟elemento channel contiene
o
Degli elementi per identificare il canale
• Title
• Link
• Description
•
o
o
item per referenziare dei contenuti
Un elemento item contiene dei tag per identificare il contenuto
o Title
o Link
o Description (facoltativo)
o
o
…
Uno o più elementi
…
Per tutti gli altri tag si può fare riferimento al seguente URL
o
http://www.rssboard.org/rss-specification
522
7
Un semplice RSS
<?xml version="1.0" encoding="ISO-8859-1" ?>
<rss version="2.0">
<channel>
<title>W3Schools Home Page</title>
<link>http://www.w3schools.com</link>
<description>Free web building tutorials</description>
<item>
<title>RSS Tutorial</title>
<link>http://www.w3schools.com/rss</link>
<description>New RSS tutorial on W3Schools</description>
</item>
<item>
<title>XML Tutorial</title>
<link>http://www.w3schools.com/xml</link>
<description>New XML tutorial on W3Schools</description>
</item>
</channel>
</rss>
523
E uno un po‟ più lungo
<?xml version="1.0" encoding="iso-8859-1" ?>
<rss version="2.0">
<channel>
<title>Repubblica.it > Homepage</title>
<link>http://www.repubblica.it</link>
<description>Repubblica.it: il quotidiano online in tempo reale.
</description>
<copyright>Copyright 2006 - Gruppo Editoriale l'Espresso</copyright>
<language>it-IT</language>
<managingEditor>[email protected]</managingEditor>
<webMaster>[email protected]</webMaster>
<lastBuildDate>Sun, 19 Nov 2006 14:48:05 GMT</lastBuildDate>
[...]
<generator>Atex Presweb Builder 4.3</generator>
[...]
<ttl>30</ttl>
524
8
E uno un po‟ più lungo
<image>
<url>http://www.repubblica.it/images/logo_repubblica.gif</url>
<title>Repubblica.it</title>
<link>http://www.repubblica.it</link>
<width>134</width>
<height>19</height>
</image>
<item>
[...]
<link>http://www.repubblica.it/2006/11/link_reference</link>
[...]
<title><![CDATA[ omissis ]]></title>
<description><![CDATA[ big omissis ]]></description>
<author>[email protected]</author>
<category domain="http://www.repubblica.it">politica</category>
<pubDate>Sun, 19 Nov 2006 13:21:15 GMT</pubDate>
</item>
[...]
</channel>
</rss>
525
Tag aggiuntivi
o
Può capitare che vengano aggiunti dei tag non aderenti
alle specifiche RSS per rendere più espressivo il contenuto
o Adattarlo a certi programmi/browser
o Dare informazioni aggiuntive
o
o
Li si trova in un formato del tipo “xxx:…”
Esistono delle specifiche per estendere il namespace
o RDF : Resource Description Framework
• http://www.w3.org/RDF/
• http://www.w3schools.com/rdf/
o
Un esempio
o http://rss.slashdot.org/Slashdot/slashdot
526
9
Podcast/Videocast
o
Non cambia assolutamente nulla
o
Tra i vari tag troveremo un link ad un contenuto
multimediale (mp3/mov/avi)
o
Per farlo possono essere usati i seguenti tag
o Enclosure
• http://www.deejay.it/deejay_chiama_italia.xml
• http://www.capital.it/capital/podcast/rss/mondiali
o Guid
• http://feeds.feedburner.com/mtvnews/DailyHeadlines/Audio
527
Podcast e tag aggiuntivi
o
Quasi sempre negli RSS per podcasting vengono
aggiunti tag ad uso e consumo di certe
applicazioni
o
Li si trova nel formato “itunes:…”
dove itunes rappresenta il namespace
<rss xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" version="2.0">
o
Sono dei metadati aggiuntivi, non necessari per
fruire del servizio, però possono essere utili per
ottenere informazioni da fornire all‟utente
http://www.apple.com/itunes/podcasts/specs.html
528
10
RSS o ATOM?
o RSS vs. ATOM
o Standard de facto vs. Standard IETF
o È vero
• Risolve molte ambiguità di RSS
– Dovute a retro-compatibilità con versioni precedenti
• È modulare
• Offre un formato standard dei contenuti
• È rivolto all‟internazionalizzazione
o Ma…
• Attualmente viene usato in 15% dei siti web
529
Esercizio 45
Si vada a prendere un newsfeed RSS a
piacere e si visualizzino in maniera
testuale i titoli dei suoi contenuti.
Qualche puntatore per chi avesse poca
fantasia
o http://www.repubblica.it/rss/homepage/rss2.0.xml
o http://images.apple.com/trailers/rss/newtrailers.rss
530
11
Esercizio 46
Si vada a prendere un podcast a piacere e
si scarichi il contenuto multimediale del
primo elemento nella lista dei contenuti.
Qualche puntatore per chi avesse poca
fantasia
o
o
o
http://www.deejay.it/deejay_chiama_italia.xml
http://www.capital.it/capital/podcast/rss/mondiali
http://feeds.feedburner.com/mtvnews/DailyHeadlines/Audio
531
XHTML: formato di convergenza
HTML
XML
o
È nato per descrivere dati
e la loro struttura
intrinseca
o
È nato per visualizzare
dati
o
Tutti i documenti XML
devono rispettare in
modo rigoroso certe
regole sintattiche
o
Le regole sintattiche
possono essere rispettate
in modo blando
Perché non fondere la capacità espressiva di HTML con la
correttezza formale ed estensibilità di XML?
532
12
XHTML
o
eXtensible HyperText Markup Language
o Intersezione tra HTML e XML,
o meglio
o Una riformulazione di HTML in XML
o È inteso essere il successore di HTML 4.01 basato su XML
1.0
o
E‟ già uno standard W3C
o XHTML 1.0 dal 26 gennaio 2000
o XHTML 1.1 dal 31 maggio 2001
o XHTML 2.0 (draft specification dal 26 luglio 2006)
• Ancora non si sono messi d‟accordo
• Difficilmente riuscirà a tener testa a HTML5
533
A proposito di HTML5
o
Inzialmente sviluppato da WHATWG
o
o
o
E‟ attualmente un draft W3C
o
o
http://dev.w3.org/html5/spec/Overview.html
Migliora il disaccoppiamento tra
o
o
o
o
struttura, definita dal markup
visualizzazione (tipo di carattere, colori, eccetera), definite dalle direttive di stile,
contenuti di una pagina web, definiti dal testo vero e proprio
Quali novità?
o
o
Nuovi markup
Nuove API
•
•
o
una breve parentesi
Web Hypertext Application Technology Working Group, fondato nel 2004 da Apple,
Mozilla Foundation e Opera Software
http://www.whatwg.org/specs/web-apps/current-work/multipage/
A supporto di Javascript, Geolocalizzazione, Web SQL Database, …
Cross-document messaging, MIME type e protocol handler, HTML5 Storage (al posto dei cookie)…
Quindi?
o
o
Rimanete aggiornati
Molte API saranno introdotte anche in Java per allinearsi a HTML5
o
Non stiamo perdendo tempo con tecnologie obsolete
•
Capite queste, le nuove saranno un gioco da ragazzi!
534
13
Perché XHTML ?
o
Per permettere a molti piccoli apparecchi portatili di
interagire con il web
o Non dotati di risorse sufficienti ad interpretare il linguaggio
HTML
o
Per alleggerire il carico di parser o user-agent in generale
o Per interpretarne più facilmente il contenuto
o Per poter restituire un errore in caso di pagine non ben
formate
o
È possibile includere nuovi tag attraverso namespace XML
o MathML
o Scalable Vector Graphics
o …
535
Un nuovo formato?
o
Fortunatamente no
o
Le differenze sintattiche principali tra XHTML 1.0 e
HTML 4.01 sono minime
o I tag XHTML devono essere annidati correttamente
o I tag XHTML devono sempre essere chiusi
n.b. anche quelli vuoti <br /> <img … />
o I tag XHTML vanno scritti in minuscolo
o Gli attributi XHTML (compresi quelli numerici) devono
essere scritti tra apici doppi
o I documenti XHTML devono avere un solo root element
(<html>)
o E attenzione ai caratteri speciali
es: no “&” ma “&”
536
14
Un esempio
SI
NO
<html>
<head>
<title>BAD XHTML</title>
<BODY>
<h1>Bad HTML </H1>
<br>
<b><i>Acquisti</b></i>
<br>
<UL>
<li> Coffee
<li> Tea
</UL>
</BODY>
<html>
<head>
<title>CORRECT</title>
</head>
<body>
<h1>Bad HTML </h1>
<br />
<b><i>Acquisti</i></b>
<br />
<ul>
<li> Coffee </li>
<li> Tea </li>
</ul>
</body>
</html>
537
DTD
o Pensavamo di essercene liberati ?
o Il DTD definisce
o la struttura sintattica di un documento XHTML
o Quali tag e attributi possono essere utilizzati
o Quali tag sono mandatory (obbligatori)
o Attenzione: non esiste un unico DTD
in realtà anche HTML 4.01 ne prevede tre
538
15
Diversi DTD
o
Per questioni di compatibilità con vecchie versioni
HTML
o XHTML 1.0 Transitional: nato per favorire la migrazione
dal HTML 3.2
• Permette l‟uso di tag deprecati
o XHTML 1.0 Strict: separa il contenuto dal layout (definito
mediante i CSS)
• Come HTML 4.01 ma secondo le regole XML
• È il più rigoroso tra i tre DTD
o XHTML 1.0 Frameset: per suddividere la finestra
visualizzata dal browser in diversi frame
• Retrocompatibile anche con i frame
• Ora deprecati
539
Forma generale
Un documento minimale deve contenere:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>simple document</title>
</head>
<body>
<p>a simple paragraph</p>
</body>
</html>
540
16
DOCTYPE
o
o
Sta per Document Type Declaration
Dichiara al browser il DTD di riferimento
o XHTML 1.0 Strict
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
o XHTML 1.0 Transitional
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
o XHTML 1.0 Frameset
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Attenzione. Anche il formato doctype
potrebbe cambiare con HTML5 541
Namespace e coding
o
E‟ possibile specificare la codifica
o
E andrebbe indicato il namespace usato
<?xml version="1.0" encoding="UTF-8"?>
xmlns=“http://www.w3.org/1999/xhtml”
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title>simple document</title>
</head>
<body>
<p>a simple paragraph</p>
</body>
</html>
542
17
Conversione HTML - XHTML
o
È sufficiente
1. Ripulire il codice
•
•
Utilizzando i tag appropriati
Rispettando la sintassi XML (chiudendo tutti i tag)
2. Aggiungere il DOCTYPE
o
Esistono programmi (Validator) per controllare che il
documento sia conforme ad uno schema DTD
o http://validator.w3.org/
o
o
Nemmeno il sito del corso di laboratorio rimane valido
Esistono tool automatici per ripulire un codice HTML
o http://www.w3.org/People/Raggett/tidy/
543
Disseminazione di XHTML
o
Lato web-server: Completa
o Similarità tra HTML 4.01 e XHTML 1.0
o È possibile pubblicare documenti XHTML compatibili con HTML
• Diventa una nuova versione di HTML (text/html)
• Trattata dai browser come HTML
o
Lato client: solo parziale
o La maggior parte dei browser (e.g. IE 7) disabilita (di default) il
riconoscimento della semantica XHTML
o Alcune documenti di tipo “application/xhtml+xml” vengono scaricati
piuttosto che visualizzati
•
Nell‟ottica di avere un processore xhtml associato a file xhtml
o Parecchi browser hanno comportamenti impredicibili in funzione di MIME
type diversi
http://www.w3.org/People/mimasa/test/xhtml/media-types/results
http://www.webdevout.net/browser-support
544
18
Parlando di MIME Type
o
o
o
Secondo le specifiche si dovrebbe usare
application/xhtml+xml
Alternativamente
application/xml o text/xml
text/html non andrebbe usato
o Codifiche di default diverse
o Rendering diverso
o Altri aspetti
•
o
Es. agli elementi <script> e <style> in XHTML inviati come text/html devono essere
applicati degli escape usando stringhe complicate
Alcuni browser trattano in modo simile text/* e
application/* altri no
o In questo caso fanno scaricare una pagina piuttosto che visualizzarla
o O chiedono all‟utente quale programma deve essere usato per aprirla
545
Alcuni siti che usano XHTML
o
Alcuni abbastanza noti
o http://www.repubblica.it/
o http://w3school.org/
o http://wikipedia.org/
o
Altri un po‟ meno
o http://www.mtv.it/
o http://www.105.net/
o http://www.comingsoon.it/
o
Altri ancora si spacciano come XHTML-compliant
o Ma non lo sono
o E sono molti più di quanto pensiate
546
19
Esercizio 47
Visualizzare tutti i titoli di livello 1 e 2 (<h1> e
<h2>) del documento che trovate all‟URL
http://w3schools.com/xhtml/
Se ne faccia una versione utilizzando DOM. Volendo
potete provare a fornirne una variante
attraverso SAX, StAX, o semplicemente usando
il riconoscimento di sottostringhe
547
Esercizio 48
Usando il metodo GET si richieda una pagina dinamica su
http://www.wikipedia.org
corrispondente ad un argomento che vi interessa.
Scaricate tutte le immagini referenziate all‟interno
della pagina ottenuta.
Suggerimento: per capire quali parametri usare nella
richiesta GET, controllate come è strutturato il
<form> all’interno della pagina principale
Provate a ripetere l’esercizio usando il metodo POST su
Google di una ricerca che abbia come target una
immagine, forzando Google stesso a ritornare
un’immagine
548
20
Esercizio 49
o
Partendo dal feed RSS
http://www.repubblica.it/rss/homepage/rss2.0.xml
1. Visualizzate i titoli degli <item>,
2. Fate in modo che l‟utente scelga un titolo
3. Richiedete la pagina in cui risiede l‟articolo
corrispondente al titolo
4. Di questa pagina visualizzate il contenuto dei
tag da <h1> a <h6> (se presenti) in
maniera testuale
549
E XHTML 1.1 ??
o XHTML 1.1: Module-based XHTML
o è una riformulazione di XHTML 1.0 Strict
o Non accetta né tag o attributi deprecati né la
struttura a frameset.
o Supporta i tag del cosiddetto markup ruby
(il set di caratteri delle lingue orientali)
o Il layout è controllato solamente da CSS
o Fornisce un framework di modularizzazione
http://www.w3.org/TR/xhtml-modularization/
XHTML2 altro non è se non una
rivisitazione dei moduli XHTML1.1
550
21
Modularizzazione
o
Per certe applicazione XHTML è troppo complesso, per
altre troppo semplice
o
Si definiscono piccoli insiemi (moduli) ben definiti di
elementi XHTML per
o Scegliere quali elementi saranno usati utilizzando moduli
standard
o Aggiungere estensioni ad XHTML, usando XML, sempre
rimanendo nello standard
o Semplificare XHTML per dispositivi particolari, come cellulari,
palmari, …
o Estendere XHTML per applicazioni più complesse aggiungendo
funzionalità (usando XML) come MathML, SVG, Voice and
Multimedia
o Definire nuovi profili, come XHTML Basic (una versione
ipersemplificata di XHTML per cellulari, palmari,…).
551
Le tecnologie convergono
o
Il web come una piattaforma di sviluppo
o E non solo un modo di fruire i dati
o
Dopo 15 anni di evoluzione
o Grazie a una serie di recenti tecnologie
• Pagine dinamiche POST/GET
• RSS
• XHTML
o
Sempre più nelle nuvole
o dai web service
• Coi più svariati protocolli
• Non sempre ben supportati
o al cloud computing
• Nelle sue forme diverse
• Tramite l‟ausilio di API definite ad hoc
• Si è al giorno d‟oggi affermato prepotentemente
552
22
Ma le pagine web sono infide
o
Il contenuto è a volte progettato espressamente
per i browser
o che, si sa, sono dei programmi estremamente sofisticati
o
Se vogliamo implementare qualche cosa di
semplice occorre fare delle semplificazioni
o Siamo già parzialmente sicuri sulla conformazione della
pagina
o Sappiamo che una pagina non è quello che sembra
o Il nostro programma però non funzionerà più non
appena la pagina verrà variata (anche se di poco)
553
Il caso di wikipedia …
o
Quanti di voi sono andati a vedere “che cosa restituisce
wikipedia” ?
o
Molto spesso siamo superficiali e tentiamo di scrivere
subito un programma che faccia tutto quanto
o Neanche Brian Kernighan scrive programmi che funzionano al
primo colpo
o
o
Bisogna andare passo passo e controllare che ogni volta i
risultati siano quelli attesi
A volte, farlo con un programma potrebbe essere scomodo
o Considerate l‟opportunità di farlo con telnet (o putty, web-sniffer,
HTTP-Live Header di Firefox, firebug…)
554
23
La homepage
$ telnet www.wikipedia.org 80
Trying 145.97.39.155...
Connected to rr.knams.wikimedia.org.
Escape character is '^]'.
GET http://www.wikipedia.org/ HTTP/1.0
HTTP/1.0 200 OK
Date: Sun, 26 Nov 2006 21:31:11 GMT
Server: Apache
X-Powered-By: PHP/5.1.4
Cache-Control: s-maxage=3600, must-revalidate, max-age=0
Last-Modified: Sat, 25 Nov 2006 03:46:29 GMT
Content-Type: text/html; charset=utf-8
X-Cache: MISS from sq30.wikimedia.org
X-Cache-Lookup: HIT from sq30.wikimedia.org:80
Age: 59
X-Cache: HIT from knsq7.knams.wikimedia.org
X-Cache-Lookup: HIT from knsq7.knams.wikimedia.org:80
Via: 1.0 sq30.wikimedia.org:80 (squid/2.6.STABLE5), 1.0 knsq7.knams.wikimedia.org:80
(squid/2.6.STABLE5)
Connection: close
[...]
555
Il codice del form
<form action="http://www.wikipedia.org/search-redirect.php" id="searchform">
<fieldset style="border: 1px solid #aaaaaa; background-color: #f9f9f9; padding: 0.7em; width:
auto; margin-top: 0.5em;">
<input type="text" name="search" size="20" id="searchInput" style="vertical-align: top;
padding: 0; margin: 0; font-size: 1.2em;" />
<select name="language" style="vertical-align: top; padding: 0; margin: 0 0.4em;" >
<option value="de" lang="de" xml:lang="de">Deutsch</option>
<option value="en" lang="en" xml:lang="en" selected="selected">English</option>
<option value="es" lang="es" xml:lang="es">EspaÃ±ol</option>
<option value="fr" lang="fr" xml:lang="fr">FranÃ§ais</option>
<option value="it" lang="it" xml:lang="it">Italiano</option>
<option value="nl" lang="nl" xml:lang="nl">Nederlands</option>
<option value="ja" lang="ja" xml:lang="ja">æ¥æ¬èª</option>
<option value="pl" lang="pl" xml:lang="pl">Polski</option>
<option value="pt" lang="pt" xml:lang="pt">PortuguÃªs</option>
<option value="ru" lang="ru" xml:lang="ru">Ð ÑÑÑÐºÐ¸Ð¹</option>
<option value="sv" lang="sv" xml:lang="sv">Svenska</option>
<option value="zh" lang="zh" xml:lang="zh">ä¸-æ</option>
</select>
<input type="submit" name="go" value=" > " class="searchButton" style="vertical-align: top;
padding: 0; margin: 0; font-size: 1.2em;" />
<input type="hidden" name="go" value="Go" />
</fieldset>
</form>
556
24
Proviamo con una GET
Trying 145.97.39.155...
GET http://www.wikipedia.org/search-redirect.php?language=it&search=c64&go=Go HTTP/1.0
HTTP/1.0 302 Moved Temporarily
Date: Sun, 26 Nov 2006 21:36:04 GMT
Server: Apache
Location: http://it.wikipedia.org/wiki/Special:Search?search=c64&go=Go
Content-Type: text/html
X-Cache-Lookup: MISS from sq23.wikimedia.org:80
X-Cache: MISS from knsq1.knams.wikimedia.org
X-Cache-Lookup: MISS from knsq1.knams.wikimedia.org:80
(squid/2.6.STABLE5)
Connection: close
Connection closed by foreign host.
557
Redirezioni e richieste
aggiuntive da gestire
Trying 145.97.39.155...
GET http://it.wikipedia.org/wiki/Special:Search?search=c64&go=Go HTTP/1.0
HTTP/1.0 403 Forbidden
Date: Sun, 26 Nov 2006 21:38:26 GMT
Server: Apache
(squid/2.6.STABLE5)
Connection: close
Please provide a User-Agent headerConnection closed by foreign host.
558
25
Un‟altra redirezione ???
Trying 145.97.39.155...
GET http://it.wikipedia.org/wiki/Special:Search?search=c64&go=Go HTTP/1.0
User-Agent: my_java_program/1.0
HTTP/1.0 302 Moved Temporarily
Date: Sun, 26 Nov 2006 21:40:11 GMT
Server: Apache
Vary: Accept-Encoding,Cookie
Expires: Thu, 01 Jan 1970 00:00:00 GMT
Cache-Control: private, s-maxage=0, max-age=0, must-revalidate
Location: http://it.wikipedia.org/wiki/C64
(squid/2.6.STABLE5)
Connection: close
559
E finalmente …
Trying 145.97.39.155...
GET http://it.wikipedia.org/wiki/C64 HTTP/1.0
HTTP/1.0 200 OK
Date: Sun, 26 Nov 2006 21:42:02 GMT
Server: Apache
Content-Language: it
Vary: Accept-Encoding,Cookie
Cache-Control: private, s-maxage=0, max-age=0, must-revalidate
Last-Modified: Sun, 26 Nov 2006 15:31:54 GMT
Content-Type: text/html; charset=utf-8
(squid/2.6.STABLE5)
Connection: close
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it" dir="ltr">
<head>
560
26
Per chi vuole essere pignolo …
… in grado però di processare la pagina con 1 sola istruzione
$ telnet www.wikipedia.org 80 | sed -ne 's/^.*< *img .*src="$[^"]*$".*$/\1/gp'
GET http://it.wikipedia.org/wiki/C64 HTTP/1.0
http://upload.wikimedia.org/wikipedia/commons/thumb/8/81/Wikimedia-logo.svg/17px-Wikimedialogo.svg.png
http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Commodore64.jpg/350px-Commodore64.jpg
/skins-1.5/common/images/magnify-clip.png
http://upload.wikimedia.org/wikipedia/commons/thumb/1/17/C64_artistic_closeup.jpg/180pxC64_artistic_closeup.jpg
http://upload.wikimedia.org/wikipedia/commons/thumb/6/67/C64.jpg/180px-C64.jpg
http://upload.wikimedia.org/wikipedia/it/thumb/c/c9/C64_enduro_racer.gif/180pxC64_enduro_racer.gif
…
http://upload.wikimedia.org/wikipedia/commons/thumb/6/67/C64.jpg/180px-C64.jpg
http://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Commodore64_DTV_mugshotx600.jpg/180px-Commodore64_DTV_mugshot-x600.jpg
http://upload.wikimedia.org/wikipedia/it/thumb/2/22/Commodore_Logo%281985%29.png/75pxCommodore_Logo%281985%29.png
/skins-1.5/common/images/poweredby_mediawiki_88x31.png
/images/wikimedia-button.png
561
Come Mungere dati
da una pagina web
o
Non è quasi mai semplice
o Chi fa il sito vuole che voi lo usiate, così vedrete anche la
pubblicità
1.
Comprendere il contenuto
o
o
Esaminare i tag, i form e i vari input al loro interno
Capire quali sono i parametri
•
2.
Fare delle prove
o
o
3.
Possibilmente con telnet (o altri programmi…)
Verificare quali header sono richiesti, se il server accetta una GET o una POST…
Riuscire a capire la struttura della pagina
o
o
o
Potrebbe non essere XHTML
Ci sono numerosi tool per la visualizzazione di un albero DOM
A volte ci ridurremo a cercare delle stringhe per trovare il contenuto
•
•
4.
Ce ne sono anche di nascosti (hidden)
Qualche volta (spesso) potrebbe capitare per un progetto
Identificate i tag più robusti (mai fidarsi delle posizioni delle stringhe…)
Cercare di seguire il percorso eventualmente fatto da un browser
o
Redirect ed errori devono essere gestiti
562
27
Programmare per la rete
o
Oramai, programmare in rete non vuol più dire
scrivere dei programmi che interagiscono tra
loro, salvo le dovute eccezioni
o P2P
o Programmi di gestione della rete stessa
o
Vuol dire sempre ed esclusivamente interagire
con una infrastruttura web
o Ci sono così tanti dati la fuori, pronti da prendere,
perché mai dovremmo crearne anche di nostri?
o E non ci si limita solo ai dati
• Pensate ai web-service o al cloud computing
563
Dai motori di ricerca…
o La prima grande sorgente di informazioni
disponibile
o Indicizzano il contenuto della rete e ci
permettono di reperirlo in base a svariati
criteri
564
28
…a Google
o
Molto più di un motore di ricerca
o
Google fa molto di più che non solo cercare
pagine
o
o
o
o
o
Calcoli
Conversioni di valute e grandezze
Ricerche su titoli di mercato
Addirittura afferma di prevedere il futuro :O
Le pagine NON sono XHTML, tuttavia google
stesso ci aiuta
o http://code.google.com/intl/it-CH/
565
…e oltre
o
o
Esistono sconfinati (più o meno) database di contenuti già
organizzati e che possono essere interrogati via web
XHTML
o
o
o
o
o
o
http://www.m-w.com/
http://www.wikipedia.org/
http://www.cddb.com/ (http://www.gracenote.com/)
http://www.archive.org/
http://msdn.microsoft.com/
Non XHTML
o http://www.imdb.com/
o http://www.amazon.com/
o http://www.internic.net/whois.html
566
29
Per chi ha voglia di approfondire
Non solo il software in grado di eseguire
ricerche mirate sul popolare motore di
ricerca…
R. Dornfest, P. Bausch,
T. Calishain
“Google Hacks”
3° edizione, O’Reilly
ISBN 0-59-652706-3
567
Esercizio 50
Cercate di capire come funziona il form di Google e
poi effettuate una ricerca per “Università di
Milano”
Ricordatevi che:
1. Gli spazi vanno indicati come “%20”
2. Le lettere accentate non vengono riconosciute
Visualizzare il primo link restituito.
La pagina non è XHTML (sarebbe stato troppo
facile) però possiamo sempre cercare delle
sottostringhe per identificare il contenuto
Tutti i link principali sono marcati con un <h#>,
con # un numero da 1 a 6, ma potrebbero esserci
anche altre vie molto più semplici
568
30
Esercizio 51
Si provi a fare la stessa operazione
dell‟Esercizio 50 con yahoo.com.
Yahoo.com è XHTML (per fortuna)
Suggerimento: date un’occhiata attenta al
sorgente della pagina dopo aver effettuato
una ricerca. Esiste la possibilità (spesso non
nota) di richiedere la pagina in un formato
“alternativo”
569
Il web visto dall’altra parte
o
Molto spesso si pensa solo a progettare dei client per
la rete
o
A volte può essere interessante e utile sviluppare un
programma che viene contattato da un browser web
o Per manipolare contenuti
o fruire di servizi remoti
o Fornire interfacce davvero platform independent
o
E non stiamo parlando solo di proxy
570
31
Content aggregation
o
Molto spesso è interessante sviluppare uno
pseudo web server per l‟aggregazione di
contenuti presi dalla rete
o
Le pagine di tale web server non risiedono
fisicamente sul nodo, ma vengono create
partendo da dati presi (da più sorgenti)
disponibili su Internet
Di tutto questo il browser ne è all‟oscuro
o
o Richiede un servizio e tale gli viene erogato
o Senza entrare nei dettagli di come questo venga
implementato
571
Esempio di content aggregation
o
È possibile sviluppare content aggregator all‟interno del quale
ogni pagina viene poi convertita in un RSS di riferimento
Se sono interessato a
http://feeds.aol.com/rss_2.0/entertainment/movies/newintheaters_mf.rss
Potrei usare una dicitura del tipo
http://localhost/rss?http://feeds.aol.com/rss_2.0/entertainment/movi
es/newintheaters_mf.rss
o
o
Potrei passare al browser più RSS (RSS reader)
L‟RSS che verrà fornito al browser potrebbe essere arricchito
di una serie di link ottenuti, ad esempio, dalla ricerca del
titolo del film tramite google o yahoo
572
32
Esercizio 52
Realizzare un programma che svolga le funzioni di un
server web ma che in realtà rielabora informazioni di
Google.
Alla richiesta di un URL del tipo
http://localhost/myapp?key=val
dove myapp indica il nome dell‟applicazione Java, il
termine val viene cercato su Google e la pagina
risultante rielaborata, quando key=“search”.
Il browser deve visualizzare solo i link relativi ai titoli
dei documenti riportati nella prima pagina
573
Esercizio 53
Si modifichi l‟applicativo sviluppato per l‟Esercizio 52 in
modo da avere due chiavi. La prima è la stessa
dell‟Esercizio precedente, mentre la seconda
(“items”) indica il numero di item che vengono
restituiti dal server a seguito della ricerca.
574
33
XML o non XML
o
o
Abbiamo visto parecchi pregi di XML
E un difetto
o È un po‟ troppo verboso
o
Spesso ci basterebbe un linguaggio per scambiare dati più
light
o Che sia testuale e leggibile per gli esseri umani
o Che sia semplice da parsare e generare per le macchine
o
JSON (RFC4627)
o È uno standard de facto
• Addirittura Google e Yahoo offrono feed JSON
• Nonostante nato nella State Software da parte di Douglas Crockford
o Per rappresentare strutture dati semplici e array associativi
• Nonostante nato come dialetto di JavaScript e AJAX
o È indipendente dal linguaggio di programmazione
• Ma usa convenzioni che sono familiari per i programmatori di linguaggi
della famiglia C
– C, C++, C#, Java, JavaScript, Perl, Python
575
JSON
Utile quando si ha a che fare con:
o
Numeri
o
o
Stringhe
o
o
Una sequenza ordinata di valori, separati da virgole e incluse in parentesi quadre
Oggetti
o
o
true and false
Array
o
o
double-quoted Unicode con backslash escaping)
Booleani
o
o
interi, reali o floating point
null
Una collezione di coppie chiave:valore, separate da virgole e incluse in parentesi graffe
{
<Person firstName="John" lastName="Smith">
}
"firstName": "John",
<address>
"lastName": "Smith",
<streetAddress>21 2nd Street</streetAddress>
"address": {
<city>New York</city>
"streetAddress": "21 2nd Street",
<state>NY</state>
<postalCode>10021</postalCode>
"city": "New York",
</address>
"state": "NY",
<phoneNumber
type="home">212 555 1234</phoneNumber>
"postalCode": "10021"
<phoneNumber type="fax">646 555-4567</phoneNumber>
},
</Person>
"phoneNumbers": [
{ "type": "home", "number": "212 555-1234" },
{ "type": "fax", "number": "646 555-4567" }
]
Per altri tipi di dati più complessi
meglio usare XML
576
34
La sintassi di JSON
Tipo
Inizia con
oggetto
{
Finisce con
}
Contiene o è
Membri
membro
esempio
{…}
Coppia, altri membri
coppia
Nome
(stringa)
valore
Nome e valore separati da
“:”
“FirstName”:“Enrico”
nome
Il nome
dell‟attributo
:
Una stringa
“username”
valore
:
Il valore
attuale
Stringa, numero, oggetto,
array, null, booleano
“C. Enrico Rossi”, true, 01234,
[...], {...}
array
[
]
elementi
[“mobile”, “web”, “apps”]
elemento
Valori, altri elementi
Risposta:
JSON-Time (Richiesta HTTP e risposta JSON)
{
"tz": "US\/Central",
"hour": 15,
"datetime": "Tue, 05 Aug 2008 15:02:27 -0500",
"second": 27,
"error": false,
"minute": 2
Richiesta:
http://json-time.appspot.com/time.json?tz=US/Central
}
577
JSON e Java
o
o
o
Parsare file JSON è già semplice
E Java al solito ci offre diverse classi (package org.json)
JSONObject è una collezione non ordinata di coppie nome-valore.
o
o
Forma esterna: stringa delimitata da parentesi graffe con “:” tra nomi e valori, e “,” tra
valori e nomi.
Forma interna: oggetto con metodi get() e opt() per accedere ai valori (e a valori
opzionali) per nome, e put() per aggiungere o modificare valori per nome.
•
o
JSONArray è una sequenza ordinata di valori
o
o
Forma esterna: stringa delimitata da parentesi quadre con “,” che separano I valori.
Forma interna: oggetto con metodi get() e opt() per accedere ai valori per indice, e
put() per aggiungere o modificare valori.
•
o
o
o
o
I valori possono essere: Boolean, JSONArray, JSONObject, Number, e String, o l‟oggetto
JSONObject.NULL
I valori possono essere: Boolean, JSONArray, JSONObject, Number, e String, o l‟oggetto
JSONObject.NULL
JSONStringer è un tool per produrre rapidamente testo JSON
JSONWriter è un tool per convertire testo JSON in stream
JSONTokener prende una stringa sorgente e ne estrae caratteri e token
Esistono poi classi per convertire file JSON in altri formati standard (tra cui
XML)
o Date uno sguardo a http://www.json.org/java/index.html o alle API standard
578
35
Esercizio 54
Si utilizzi il package org.json per interagire con il servizio
json-time disponibile al link
http://json-time.appspot.com/
Si usino conseguentemente le classi definite nel
package per rappresentare i dati scambiati
579
36

Presentazione del corso - Università degli Studi di Milano

Transcript

Documenti analoghi

Semestre di Presidenza italiano del Consiglio dell`Unione Europea

non bloccante - Università degli Studi di Milano

Presentazione del corso - Università degli Studi di Milano

Presentazione standard di PowerPoint

Info-Feed: flusso RSS sulla prima infanzia

Dichiarazione di accessibilità Introduzione Validazione

World Wide Web

norme per la stesura delle tesi

SLOOP2desc - Strumenti Web 2.0 per la didattica

Bando - Studi umanistici Unimi - Home

Shakespeare e le avanguardie storiche europee