�ݺ�ߣ

Sito statico vs Sito dinamico
Tecnologie del web

Docenti: V. De Luca, F. Brunetta

1

Progettazione di un sito
• Possibili scelte
– Sito “tradizionale”: statico
– [Sito statico ma con più interattività]
– Sito dinamico


2

Sito statico
Obiettivo: il browsing


3

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.)


4

Perché si dice “statico”?
• Informazioni scritte direttamente in file
“html”
• Rimangono immutate…
• …fino a quando non modifichiamo a mano
il contenuto del file


5


6

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


7

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/...


8

Linguaggi per siti statici
• HTML  varie versioni!
• XHTML (xml + html =xhtml)


9

«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)


10


11

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


12

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


13

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


14

XHTML 1.0 e 1.1
• Riformulazione di HTML 4.01 in chiave
XML


15

HTML 5
Fonte:
Fonte:
http://creativehttp://creativegeeks.com/blog/wpgeeks.com/blog/wpcontent/uploads/2011/01/HTML5
content/uploads/2011/01/HTML5
__.jpg
__.jpg


16

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


17

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


18
18

Linguaggio HTML - 4
• Un documento HTML è composto da:

– Testo “puro” (testo ASCII)
– Misto ad istruzioni  Tag


19

HTML e i tags – 1 – classic!
• Due tipi di “tag”:
• Semplici:
<ISTRUZIONE>
• Ad apertura/chiusura:
<ISTRUZIONE>testo</ISTRUZIONE>


20

• Esempio di tag semplice - Inserisce un
“ritorno a capo” (break)
<br>
• Esempio di tag apertura/chiusura (delimita
un paragrafo):
<p>
Ciao!
</p>

21

• Spesso i tag sono più complessi e
includono degli attributi:
<ISTRUZIONE attributo=“qualcosa”>
<ISTRUZIONE attributo1=“qualcosa”
Attributo2=“altro”>testo</ISTRUZIONE>


22

• Attributi a volte facoltativi, a volte
indispensabili!
• Esempio:
<img src=/slideshow/sito-statico-vssitodinamico2013/27994360/“casamia.jpg”>
• Il tag IMG (immagine) senza src (quale
immagine?) non serve a nulla


23

• Il tag “a” è uno dei più importanti
• Di apertura/chiusura, inserisce un LINK
• Attributo href è indispensabile:
<a href=“http://www.uniud.it”>UniUD<a>


24

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=/slideshow/sito-statico-vssitodinamico2013/27994360/"immagini/disegno.gif"> viene visualizzato un
In questo punto <img src=/slideshow/sito-statico-vssitodinamico2013/27994360/"immagini/disegno.gif"> viene visualizzato un
disegno.
disegno.
</P>
</P>
</body>
</body>
</html>
</html>

25

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!!!
SGMLXML XHTML HTML 4.01

26

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


27

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”

28

Riferimenti utili
•
•
•
•
•

http://www.westhost.com/blog/2011/09/23/thehttp://www.html.it/guide/guida-html/
http://www.w3schools.com/tags/
http://en.wikipedia.org/wiki/HTML
http://it.wikipedia.org/wiki/XHTML


29

Nel HEAD
• Titolo (TITLE)
• Meta-tags (meta name=«keywords», ad
esempio) – ovvero informazioni sul
documento stesso
• Link ai file di stili (CSS)


30

Nel BODY
• Tutto il resto 


31

Pubblicazione di un sito Web

Trovare il server giusto


32

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


33

Sito statico con elementi
dinamici
Obiettivo: l’interattività


34

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

35

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


36

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


37


38

Approccio client-side - 1
• L’intelligenza risiede sul “browser”
• Esistono speciali linguaggi di
programmazione “client-side”
• Esempio: “Javascript”


39

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

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ù


41

• (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.)

42

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>


43

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

44

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

45

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)

46

Silverlight
• Sviluppato dalla Microsoft
• Ambiente che permette di includere in un
sito web applicazioni multimediali
interattive
• Si propone come alternativa a Flash
(Adobe)


47

Approccio server-side - 1
• L’intelligenza risiede sul server
• Esistono appositi linguaggi di programmazione serverside
• Esempio: PHP, Perl, Python, ASP.NET, ecc


48

• 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.


49

• 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>
50
</html>

APPROCCIO SERVER-SIDE 4
/doc/datadioggi.php

HTML

Server
Chiama interp.
php, che esegue
e emette output

PHP

testo

http://www.qualcheserver.com/doc/datadioggi.php

Html +
PHP
DOCENTI: V. DE LUCA, F. BRUNETTA

www.qualcheserver.com

51


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!


52

(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


53


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!


54

• 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)

55

PHP
•
•
•
•
•

PHP Hypertext PreProcessor
Linguaggio di scripting interpretato
Linguaggio lato server
Per la realizzazione di pagine web dinamiche
Nato nel 1994


56

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)


57

Siti dinamici
• Un’applicazione che consente
l’interazione tra l’utente e il server
• Un esempio: il Content
Management System (CMS)


58

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


59

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

60

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


61

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!


62

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

63

CMS – 5 – vantaggi
• Facilitata
– la pubblicazione collaborativa / decentrata delle
informazioni
– il controllo centralizzato degli aspetti strutturali
del sito


64

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


65

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


66

:

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


67

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!


68

AJAX & JQUERY
• Jquery: libreria che semplifica molto la vita
(ai programmatori, poverini!  )
• Usa AJAX per effetti grafici, accesso ai
database, ecc.
• �ݺ�ߣshow – effetti su immagini –
caricamenti “graduali”… tante cose!

69

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

70

�ݺ�ߣ

Sito statico vs Sito Dinamico

Recommended

More Related Content

What's hot (8)

Similar to Sito statico vs Sito Dinamico (20)

Sito statico vs Sito Dinamico