ODF: l’unico formato standard e aperto per i documenti - Italo Vignoli
Sito statico vs Sito Dinamico
1. Sito statico vs Sito dinamico
Tecnologie del web
Docenti: V. De Luca, F. Brunetta
1
2. Progettazione di un sito
• Possibili scelte
– Sito “tradizionale”: statico
– [Sito statico ma con più interattività]
– Sito dinamico
Docenti: V. De Luca, F. Brunetta
2
4. Cos’è un sito “statico”
• Metodo “tradizionale”
• Composto da:
– File con informazioni (html, xhtml)
– Oggetti multimediali (immagini, filmati, ecc.)
– Altri file da pubblicare (PDF, ZIP, DOC.. ecc.)
Docenti: V. De Luca, F. Brunetta
4
5. Perché si dice “statico”?
• Informazioni scritte direttamente in file
“html”
• Rimangono immutate…
• …fino a quando non modifichiamo a mano
il contenuto del file
Docenti: V. De Luca, F. Brunetta
5
7. Vantaggi di un sito “statico”
• «Semplice» da creare:
– Editor “WYSIWYG”
– (Anche editor di testo - conoscendo HTML)
– Programmi di grafica – serve in ogni caso (anche nel caso di un
sito dinamico)
• Non richiede capacità di programmazione (HTML e XHTML non
sono linguaggi di programmazione)
• Ottimo per siti informativi, «semplici» ,personali, con scarso
aggiornamento
Docenti: V. De Luca, F. Brunetta
7
8. Produrre e pubblicare sito
statico
1.
Produrre file html o xhtml su proprio computer
(localmente) – sito locale
“sviluppo off-line” (file non sono pubblici)
1. Trovare “ospitalità” su un server Web
1. Copiare file sul server Web – sito remoto
• Spesso via FTP
• Ora pubblici: http://indiri.zzo.it/...
Docenti: V. De Luca, F. Brunetta
8
9. Linguaggi per siti statici
• HTML varie versioni!
• XHTML (xml + html =xhtml)
Docenti: V. De Luca, F. Brunetta
9
10. «Piccola Storia» dell’HTML
• «Inventato» da Tim Berners Lee
• Ha «riscoperto» l’idea di ipertesto
(inventato negli anni 40)
Tag per inserimento di collegamenti
ipertestuali (A) + attributo HREF
• Basato su SGML (1986)
Docenti: V. De Luca, F. Brunetta
10
12. Prime versioni di html
• Versione 1 – 1989.
– Limitata: compatibile con piattaforma NeXT, per file di
testo
• HTML 2.0 – tra 1993 e 1994
– Standardizzazione nov. 1995
– http://www.ietf.org/rfc/rfc1866.txt
– Nascono i primi browser la necessita di
interpretare questo nuovo linguaggio
Docenti: V. De Luca, F. Brunetta
12
13. Versioni classiche di html
• [Versione 3.0 - da 1993 a 1995
– Versione non formalizzata
– Deriva da studi su HTML+
– Rimasta “Draft” - provvisoria]
• Versione 3.2 – 1996/997
– Raccomandata da W3C dal 1997
– Vera “sostituzione” della 2.0
– Ottima formalizzazione
Docenti: V. De Luca, F. Brunetta
13
14. Versioni evolute di html
• Versione 4.0 e 4.01– 1996/1999
– 4.0: versione di lavoro (1998)
– 4.01: raccomandazione W3C (1999)
– 4.01 del 2000: standard
Docenti: V. De Luca, F. Brunetta
14
15. XHTML 1.0 e 1.1
• Riformulazione di HTML 4.01 in chiave
XML
Docenti: V. De Luca, F. Brunetta
15
17. Il linguaggio HTML Introduzione
•
•
•
Hyper Text Markup Language
Linguaggio per scrivere testi “web” ipertestuali,
multimediali
Non è un “vero” linguaggio di programmazione
in quanto non contiene ad esempio meccanismi
per compiere iterazioni, ecc
Docenti: V. De Luca, F. Brunetta
17
18. Il linguaggio HTML- Linguaggio
di markup dichiarativo
•
•
Linguaggio di “MARKUP”:
o “Descrive” un testo (non è dunque un linguaggio di
markup procedurale come LaTeX, ad esempio)
o Identifica gli elementi essenziali (paragrafi,
intestazioni, tabelle, link ipertestuali… tutto)
Linguaggio non proprietario
Docenti: V. De Luca, F. Brunetta
18
18
19. Linguaggio HTML - 4
• Un documento HTML è composto da:
– Testo “puro” (testo ASCII)
– Misto ad istruzioni Tag
Docenti: V. De Luca, F. Brunetta
19
20. HTML e i tags – 1 – classic!
• Due tipi di “tag”:
• Semplici:
<ISTRUZIONE>
• Ad apertura/chiusura:
<ISTRUZIONE>testo</ISTRUZIONE>
Docenti: V. De Luca, F. Brunetta
20
21. HTML e i tags – 2 – classic!
• Esempio di tag semplice - Inserisce un
“ritorno a capo” (break)
<br>
• Esempio di tag apertura/chiusura (delimita
un paragrafo):
<p>
Ciao!
</p>
Docenti: V. De Luca, F. Brunetta
21
22. HTML e i tags – 3 – classic!
• Spesso i tag sono più complessi e
includono degli attributi:
<ISTRUZIONE attributo=“qualcosa”>
<ISTRUZIONE attributo1=“qualcosa”
Attributo2=“altro”>testo</ISTRUZIONE>
Docenti: V. De Luca, F. Brunetta
22
23. HTML e i tags – 4 – classic!
• Attributi a volte facoltativi, a volte
indispensabili!
• Esempio:
<img src=“casamia.jpg”>
• Il tag IMG (immagine) senza src (quale
immagine?) non serve a nulla
Docenti: V. De Luca, F. Brunetta
23
24. HTML e i tags – 5 – classic!
• Il tag “a” è uno dei più importanti
• Di apertura/chiusura, inserisce un LINK
• Attributo HREF è indispensabile:
<a href=“http://www.uniud.it”>UniUD<a>
Docenti: V. De Luca, F. Brunetta
24
25. HTML classic- Esempio
<html>
<html>
<title>Il mio documento</title>
<title>Il mio documento</title>
<body>
<body>
<h1>Il mio documento di prova</h1>
<h1>Il mio documento di prova</h1>
<p>
<p>
Cosí questo è il mio primo testo di prova. Premendo in
Cosí questo è il mio primo testo di prova. Premendo in
<A href="http://www.uniud.it/">questo punto</A> potete visitare
<A href="http://www.uniud.it/">questo punto</A> potete visitare
l'Università di Udine.
l'Università di Udine.
<br>
<br>
<b>Questo testo viene visualizzato in neretto</b> mentre il testo che segue
<b>Questo testo viene visualizzato in neretto</b> mentre il testo che segue
<i>viene visualizzato in corsivo</i>.
<i>viene visualizzato in corsivo</i>.
<br><br>
<br><br>
In questo punto <img src="immagini/disegno.gif"> viene visualizzato un
In questo punto <img src="immagini/disegno.gif"> viene visualizzato un
disegno.
disegno.
</P>
</P>
</body>
</body>
</html>
</html>
Docenti: V. De Luca, F. Brunetta
25
26. HTML e XHTML
•Dopo HTML 4, html è sembrato insufficiente
•Lavoro di “espansione” si è basato su XML:
linguaggio per definire linguaggi
•XML si basa su SGML: metalinguaggio per
definire linguaggi che servono a definire
linguaggi!!!
SGMLXML XHTML HTML 4.01
Docenti: V. De Luca, F. Brunetta
26
27. XHTML 1.0 e 1.1
• Molto più formalizzato
• Bisogna definire lo standard
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• Usa tags html, estesi, modificati, più
potenti
Docenti: V. De Luca, F. Brunetta
27
28. XHTML 1.0 e 1.1
• XML (e quindi HTML) non ammettono tag
“semplici”: ogni tag deve “aprire” e deve
avere un tag di chiusura
• E allora che succede al povero “<BR>”?
• Trucchetto:
<br />
• Cosi anche lui “apre” e “chiude”
Docenti: V. De Luca, F. Brunetta
28
30. Nel HEAD
• Titolo (TITLE)
• Meta-tags (meta name=«keywords», ad
esempio) – ovvero informazioni sul
documento stesso
• Link ai file di stili (CSS)
Docenti: V. De Luca, F. Brunetta
30
32. Pubblicazione di un sito Web
Trovare il server giusto
Docenti: V. De Luca, F. Brunetta
32
33. Il server
•
Sito pubblicato su un server
1. Proprio (gestito autonomamente) elasticità
2. Ospitato (Hosting condiviso) Costi contenuti
3. Virtuale (il server che non c’è ) costo limitato e
elasticità ma anche performance limitate
4. Dedicato (Housing) efficienza
Docenti: V. De Luca, F. Brunetta
33
34. Sito statico con elementi
dinamici
Obiettivo: l’interattività
Docenti: V. De Luca, F. Brunetta
34
35. Limiti dei siti statici
• Il contenuto del file html è sempre lo
stesso
• Per modificarlo dobbiamo:
– Modificare il file html
– Pubblicarlo nuovamente sul server
• OK per informazioni che cambiano
raramente
• MALE per informazioni da aggiornare ad
ogni consultazione
Docenti: V. De Luca, F. Brunetta
35
36. Limiti dei siti statici - 2
• Ad es.:
Benvenuto utente, oggi è il 10/12/2006,
sono le ore 12.30
• Non possiamo aggiornare file html a mano
ogni minuto!!!
Docenti: V. De Luca, F. Brunetta
36
37. Come fare? Due approcci
diversi
• Dobbiamo costringere computer a usare
“intelligenza” per fare certe operazioni
– Ad es: visualizzare data e ora correnti ad ogni
lettura di una pagina Web
• Possibile? Sì! In due modi diversi:
– Approccio client-side
– Approccio server-side
Docenti: V. De Luca, F. Brunetta
37
39. Approccio client-side - 1
• L’intelligenza risiede sul “browser”
• Esistono speciali linguaggi di
programmazione “client-side”
• Esempio: “Javascript”
Docenti: V. De Luca, F. Brunetta
39
40. APPROCCIO CLIENT-SIDE - 2
/doc/datadioggi.htm
Browser:
Interpreta html,
js, visualizza
testo
http://www.qualcheserver.com/doc/datadioggi.htm
Html +
JScript
DOCENTI: V. DE LUCA, F. BRUNETTA
www.qualcheserver.com
40
41. Approccio client-side - 3
Implicazioni:
• Nessuna modifica al comportamento del
server
• Aggravio di operazioni sul browser
– Deve “supportare” il linguaggio
– Deve riconoscerlo, interpretarlo, eseguirlo
– PC deve “lavorare” di più
Docenti: V. De Luca, F. Brunetta
41
42. Approccio client-side - 4
• (segue) Implicazioni:
• Grossi problemi di sicurezza sul client:
– Sul nostro PC eseguiti programmi scritti da
altri
– Potrebbero fare qualsiasi cosa (tipo:
“cancella tutti i file di questo PC”)
• Soluzione: grosse limitazioni a
possibilità di Javascript (no accesso a
disco locale… ecc.)
Docenti: V. De Luca, F. Brunetta
42
43. Javascript – linguaggio di
scripting
• Cosa significa?
– Il browser legge una riga, la interpreta,la
esegue, poi passa alla successiva e fa la
stessa cosa , ecc
– Per identificare il codice di script si utilizza il
tag <script>….</script>
Docenti: V. De Luca, F. Brunetta
43
44. Metodologia
Lo script può essere inserito nella pagina in due
modi diversi:
–Inserendo il codice nel documento (tipicamente nel HEAD
del documento - si può anche inserire nel BODY ma
verrà eseguito dopo gli script del HEAD)
–Caricandolo da un file esterno (lo script – un file .js viene
richiamato con l’attributo src del tag script (immaginate
quando volete caricare un’immagine .jpg insieme alla
pagina)
Il secondo metodo ha il vantaggio che lo script può
essere scritto (con il Blocco Note ad esempio) una volta
sola e richiamato ogni volta che serve
Docenti: V. De Luca, F. Brunetta
44
45. AJAX
• Asynchronous Javascript e XML
• Insieme di tecniche di sviluppo per creare
siti web più interattivi e usabili
(aumentando ad esempio la velocità di
scaricamento)
• Usa come linguaggio di markup: HTML o
XHTML (CSS per gli stili)
• XML come formato di scambio dei dati
• Linguaggio Javascript
Docenti: V. De Luca, F. Brunetta
45
46. Flash
• Adobe Flash è uno strumento per la creazione di
animazioni vettoriali
• Viene molto usato per il web perché permette di
creare giochi o addirittura interi siti web multimediali
(con immagini, audio, video, testo, ecc)
• Permette inoltre di creare animazioni interattive
grazie alla presenza di un linguaggio di scripting
(ActionScript)
• Nato nel 1996
• L’estensione dei file flash è .swf (.flv)
Docenti: V. De Luca, F. Brunetta
46
47. Silverlight
• Sviluppato dalla Microsoft
• Ambiente che permette di includere in un
sito web applicazioni multimediali
interattive
• Si propone come alternativa a Flash
(Adobe)
Docenti: V. De Luca, F. Brunetta
47
48. Approccio server-side - 1
• L’intelligenza risiede sul server
• Esistono appositi linguaggi di programmazione serverside
• Esempio: PHP, Perl, Python, ASP.NET, ecc
Docenti: V. De Luca, F. Brunetta
48
49. Approccio server-side - 2
• I I comandi “PHP” vengono inseriti nei documenti html
– Insieme al testo pubblicato
– Insieme ai “tag” html
• I server:
– Devono conoscere questo linguaggio
– Ne identificano i comandi
– Li eseguono e emettono messaggi, informazioni, ecc.
Docenti: V. De Luca, F. Brunetta
49
50. Approccio server-side - 4
• Esempio:
Testo html con PHP
Testo html “statico”
<html>
<head>
<html>
<title>Benvenuto</title>
<head>
</head>
<title>Benvenuto</title>
<body>
</head>
<h1> Benvenuto caro amico, oggi è:
<body>
<?php Benvenuto caro amico, oggi è: giovedì 13 luglio 2006, 10:23<h1>
<h1>
echo date("l j-m-Y");
</body>
?>
</html>
<h1>
</body>
Docenti: V. De Luca, F. Brunetta
50
</html>
52. Approccio server-side - 5
Implicazioni:
• Operazioni del server Web molto più complesse!
– Necessita di programma interprete PHP
– Deve riconoscere istruzioni PHP, passarle a
interprete, inserire le risposte nel testo, passare il
tutto al browser
– Maggior “carico” per il computer-server!
Docenti: V. De Luca, F. Brunetta
52
53. Approccio server-side - 6
(segue)
•
•
•
•
•
•
Implicazioni:
Il Browser non deve fare nulla
Riceve dal server solo html – non si “accorge” della presenza di
PHP
Computer del client: molto più scarico
Client: nessun problema di sicurezza
Server: maggiori rischi (deve proteggersi)
Pagine visibili solo tramite server
Docenti: V. De Luca, F. Brunetta
53
54. Approccio server-side - 7
Applicazioni:
• Meccanismo molto potente
• Linguaggio Server-side ha accesso completo a molte
risorse del server
– Database di rete
– Spazio disco del server
• Può ad es. registrare su DB i dati di un form!
Docenti: V. De Luca, F. Brunetta
54
55. Approccio server-side - 8
• Cosa dobbiamo capire?
•
esistono linguaggi diversi e applicazioni diverse!
•
queste applicazioni hanno come obiettivo di raccogliere,
gestire e mettere a disposizione dati complessi
• Quasi impossibile con client-side, complesso ma possibile
con server-side (web server+php+database+….)
• Ad es, Iscrizione ad un convegno necessita di
1) Diffondere dati del convegno (data, location, ecc)
2) Consentire la registrazione dei partecipanti (nome, cognome,
ecc)
3) Gestire la logistica (quanti iscritti, quanti posti, ecc)
Docenti: V. De Luca, F. Brunetta
55
57. ASP
• Linguaggio lato server simile a PHP
• Sviluppato da Microsoft
• Le ASP (Active Server Pages) sono pagine Web
contenenti degli script che vengono eseguiti dal server
• Funziona su Web server Microsoft Internet Information
Services (IIS)
Docenti: V. De Luca, F. Brunetta
57
58. Siti dinamici
• Un’applicazione che consente
l’interazione tra l’utente e il server
• Un esempio: il Content
Management System (CMS)
Docenti: V. De Luca, F. Brunetta
58
59. Sviluppo con editor WYSIWYG
• Va male quando:
– Azienda/ente grandi con molti pubblicatori
– Modello decentrato: ogni “ufficio” deve aggiornare sue
informazioni
Implica:
– Tante copie stesso editor
– Competenze informatiche/html dei pubblicatori
– Difficoltà coordinamento
– Ogni singolo file contiene informazioni e grafica
Docenti: V. De Luca, F. Brunetta
59
60. CMS - 1
• CMS è dispositivo software che:
– Facilita organizzazione e produzione
collaborativa di contenuti (documenti, ecc.)
– Utilissimo per pubblicazione siti web:
• Web Content Management Systems
• PHP based: Drupal, WordPress, Joomla,
Typo3, ecc
• Python based: Zope-Plone. Magento. ecc
Docenti: V. De Luca, F. Brunetta
60
61. CMS - 2
•
CMS è un sito web “dinamico”
–
•
•
•
Risiede sul server
Separa gestione dei contenuti dalla
presentazione (“come” e “dove”)
Consente di catalogare documenti in base a
loro caratteristiche
Consente di definire “a priori” aspetto grafico
del sito
Docenti: V. De Luca, F. Brunetta
61
62. CMS - 3
• Pubblicatori
– non devono usare editor off-line
– Pubblicano direttamente sul Web in ambiente
controllato
– Non devono conoscere Editor o HTML!
– Gestore decide a priori “dove” e “come”
contenuto viene pubblicato!
Docenti: V. De Luca, F. Brunetta
62
63. CMS - 4
• Il gestore:
– Controlla l’aspetto grafico e strutturale del sito
– Decide “come” il contenuto viene presentato
– Decide “chi” può pubblicare “cosa”
– Accetta o meno documenti pubblicati
• Gestisce il “workflow”: i “passi” di validazione di ogni
singolo documento
– Gestice il contenuto (cancella, modifica, ecc.)
– Amplia le funzionalità del sito
Docenti: V. De Luca, F. Brunetta
63
64. CMS – 5 – vantaggi
• Facilitata
– la pubblicazione collaborativa / decentrata delle
informazioni
– il controllo centralizzato degli aspetti strutturali
del sito
Docenti: V. De Luca, F. Brunetta
64
65. CMS – 6
• Un CMS è applicazione “server-side”
• Richiede linguaggi “server-side”, ad es.
come:
– PHP (Usato da Drupal, WordPress)
– Python (usato da Plone)
– Oppure un programma “dedicato”
• Sfrutta le risorse del server
Docenti: V. De Luca, F. Brunetta
65
66. CMS – 7
• CMS “proprietari”:
– Applicazioni vere e proprie
– Spesso potenti e costose
– A volte piccole… e costose
• CMS “OpenSource”:
– Gratuite
– Spesso “leggere”
– Richiedono frequente manutenzione software
Docenti: V. De Luca, F. Brunetta
66
67. :
TO cli
IS e
M e
IO sid
C r- )
C e zza
O rv beee
ll
PR se I (sliad
P co ION e
A i AZ
m REST
n a : LE P
Di IVO
ten
TT
IE
B
•O
Docenti: V. De Luca, F. Brunetta
67
68. I CMS interrogano troppo il
server
• Un CMS in PHP deve “chiamare” il server ogni volta
• A volte serve… a volte no!
• Ad esempio: se in una pagina cambiano le “news” – basta
caricare solo le (nuove) news, non tutta la pagina!
• Approccio misto:
• Gestire le informazioni con un CMS
• Inserire nelle pagine codice Javascript che interroga il server
solo sui dati necessari
• Ad esempio: ogni 5 minuti ricarica e visualizza SOLO le ultime
news;
• Oppure: quando l’utente chiede di cambiare foto di uno
slideshow, carica solo la nuova foto e non tutta la pagina!
Docenti: V. De Luca, F. Brunetta
68
69. AJAX & JQUERY
• Jquery: libreria che semplifica molto la vita
(ai programmatori, poverini! )
• Usa AJAX per effetti grafici, accesso ai
database, ecc.
• Slideshow – effetti su immagini –
caricamenti “graduali”… tante cose!
Docenti: V. De Luca, F. Brunetta
69
70. HTML 5 – la rivoluzione
•
•
•
•
Nuova versione ancora “Release Candidate”.
Nuovi tag “comuni” (header, footer, nav)
Maggiori dettagli semantici microdata
Vera e propria piattaforma di sviluppo evoluta:
– Ottimizzata per “mobile” – per accesso a devices –
per uso storage – per accesso ai database – per
eolocalizzazione - per migliori prestazioni (web
workers)
• Supporto multimedia, grafica e 3d
• MA:
http://www.html5today.it/tutorial/che-cos-html5
– Standard ancora non definito
– Supporto dei browser ancora limitato
Docenti: V. De Luca, F. Brunetta
70