SlideShare a Scribd company logo
1 of 70
Download to read offline
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

Docenti: V. De Luca, F. Brunetta

2
Sito statico
Obiettivo: il browsing

Docenti: V. De Luca, F. Brunetta

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

Docenti: V. De Luca, F. Brunetta

4
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
Docenti: V. De Luca, F. Brunetta

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

Docenti: V. De Luca, F. Brunetta

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

Docenti: V. De Luca, F. Brunetta

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

Docenti: V. De Luca, F. Brunetta

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)

Docenti: V. De Luca, F. Brunetta

10
Docenti: V. De Luca, F. Brunetta

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

Docenti: V. De Luca, F. Brunetta

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

Docenti: V. De Luca, F. Brunetta

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

Docenti: V. De Luca, F. Brunetta

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

Docenti: V. De Luca, F. Brunetta

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

Docenti: V. De Luca, F. Brunetta

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

Docenti: V. De Luca, F. Brunetta

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

Docenti: V. De Luca, F. Brunetta

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

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

Docenti: V. De Luca, F. Brunetta

19
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
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
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
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
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
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&iacute; questo &egrave; il mio primo testo di prova. Premendo in
Cos&iacute; questo &egrave; 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&agrave; di Udine.
l'Universit&agrave; 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
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
Docenti: V. De Luca, F. Brunetta

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

Docenti: V. De Luca, F. Brunetta

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”
Docenti: V. De Luca, F. Brunetta

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

Docenti: V. De Luca, F. Brunetta

29
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
Nel BODY
• Tutto il resto 

Docenti: V. De Luca, F. Brunetta

31
Pubblicazione di un sito Web

Trovare il server giusto

Docenti: V. De Luca, F. Brunetta

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

Docenti: V. De Luca, F. Brunetta

33
Sito statico con elementi
dinamici
Obiettivo: l’interattività

Docenti: V. De Luca, F. Brunetta

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
Docenti: V. De Luca, F. Brunetta

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

Docenti: V. De Luca, F. Brunetta

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

Docenti: V. De Luca, F. Brunetta

37
Docenti: V. De Luca, F. Brunetta

38
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
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
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
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
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
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
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
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
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
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
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
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>
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
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
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
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
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
PHP
•
•
•
•
•

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

Docenti: V. De Luca, F. Brunetta

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)

Docenti: V. De Luca, F. Brunetta

57
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
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
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
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
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
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
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
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
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
:

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

More Related Content

What's hot

04 - Introduzione al Web I
04 - Introduzione al Web I04 - Introduzione al Web I
04 - Introduzione al Web IGiuseppe Vizzari
 
4 - Introduzione al Web (1/2) - 16/17
4 - Introduzione al Web (1/2) - 16/174 - Introduzione al Web (1/2) - 16/17
4 - Introduzione al Web (1/2) - 16/17Giuseppe Vizzari
 
Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesignerHtml e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesignerMatteo Magni
 
Introduzione a Internet (2/2) - 18/19
Introduzione a Internet (2/2) - 18/19Introduzione a Internet (2/2) - 18/19
Introduzione a Internet (2/2) - 18/19Giuseppe Vizzari
 
Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner Matteo Magni
 
Lezione 1 Master Giornalismo
Lezione 1 Master GiornalismoLezione 1 Master Giornalismo
Lezione 1 Master GiornalismoPaolo Lattanzio
 

What's hot (8)

04 - Introduzione al Web I
04 - Introduzione al Web I04 - Introduzione al Web I
04 - Introduzione al Web I
 
Html5
Html5Html5
Html5
 
8 - Il browser
8 - Il browser8 - Il browser
8 - Il browser
 
4 - Introduzione al Web (1/2) - 16/17
4 - Introduzione al Web (1/2) - 16/174 - Introduzione al Web (1/2) - 16/17
4 - Introduzione al Web (1/2) - 16/17
 
Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesignerHtml e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner
 
Introduzione a Internet (2/2) - 18/19
Introduzione a Internet (2/2) - 18/19Introduzione a Internet (2/2) - 18/19
Introduzione a Internet (2/2) - 18/19
 
Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner
 
Lezione 1 Master Giornalismo
Lezione 1 Master GiornalismoLezione 1 Master Giornalismo
Lezione 1 Master Giornalismo
 

Similar to Sito statico vs Sito Dinamico

Introduzione a Drupal 7 - 14/03/2013
Introduzione a Drupal 7 - 14/03/2013Introduzione a Drupal 7 - 14/03/2013
Introduzione a Drupal 7 - 14/03/2013Alessandro del Gobbo
 
Guida introduttiva al codice HTML
Guida introduttiva al codice HTMLGuida introduttiva al codice HTML
Guida introduttiva al codice HTMLEnrico Mainero
 
Less is more? OmegaT: vantaggi e svantaggi di un approccio essenziale e open ...
Less is more? OmegaT: vantaggi e svantaggi di un approccio essenziale e open ...Less is more? OmegaT: vantaggi e svantaggi di un approccio essenziale e open ...
Less is more? OmegaT: vantaggi e svantaggi di un approccio essenziale e open ...Qabiria
 
Drupal - LinuxDay 2010 (Pistoia)
Drupal - LinuxDay 2010 (Pistoia)Drupal - LinuxDay 2010 (Pistoia)
Drupal - LinuxDay 2010 (Pistoia)Andrea Grandi
 
Drupal - LinuxDay 2010 (Pistoia)
Drupal - LinuxDay 2010 (Pistoia)Drupal - LinuxDay 2010 (Pistoia)
Drupal - LinuxDay 2010 (Pistoia)Andrea Grandi
 
I linguaggi del web - seconda edizione (1° giornata)
I linguaggi del web - seconda edizione (1° giornata)I linguaggi del web - seconda edizione (1° giornata)
I linguaggi del web - seconda edizione (1° giornata)Diego La Monica
 
Sistemi - Lezione XIV - Introduzione a HTML
Sistemi - Lezione XIV - Introduzione a HTMLSistemi - Lezione XIV - Introduzione a HTML
Sistemi - Lezione XIV - Introduzione a HTMLUniversity of Catania
 
5 - Introduzione al Web (2/2) - 17/18
5 - Introduzione al Web (2/2) - 17/185 - Introduzione al Web (2/2) - 17/18
5 - Introduzione al Web (2/2) - 17/18Giuseppe Vizzari
 
Presentazione di LlibreOffice al Linux Day 2015
Presentazione di LlibreOffice al Linux Day 2015 Presentazione di LlibreOffice al Linux Day 2015
Presentazione di LlibreOffice al Linux Day 2015 Janhu Silvio Crispiatico
 
La Comunita traduce Koha by Zeno Tajoli
La Comunita traduce Koha by Zeno TajoliLa Comunita traduce Koha by Zeno Tajoli
La Comunita traduce Koha by Zeno TajoliKohaGruppoItaliano
 
Introduzione agli strumenti CAT per STL Formazione
Introduzione agli strumenti CAT per STL FormazioneIntroduzione agli strumenti CAT per STL Formazione
Introduzione agli strumenti CAT per STL FormazioneQabiria
 
I Linguaggi Del Web (1° Giornata)
I Linguaggi Del Web (1° Giornata)I Linguaggi Del Web (1° Giornata)
I Linguaggi Del Web (1° Giornata)Diego La Monica
 
Presentazione di Llibre Office al Linux Day 2014
Presentazione di Llibre Office al Linux Day 2014Presentazione di Llibre Office al Linux Day 2014
Presentazione di Llibre Office al Linux Day 2014Janhu Silvio Crispiatico
 
Componentistica hardware e software coordinata da smartphone e destinata alla...
Componentistica hardware e software coordinata da smartphone e destinata alla...Componentistica hardware e software coordinata da smartphone e destinata alla...
Componentistica hardware e software coordinata da smartphone e destinata alla...freedomotic
 
Angular kit e Design system del Paese - Meetup ngRome 30 Gennaio 2023
Angular kit e Design system del Paese - Meetup ngRome 30 Gennaio 2023Angular kit e Design system del Paese - Meetup ngRome 30 Gennaio 2023
Angular kit e Design system del Paese - Meetup ngRome 30 Gennaio 2023AndreaStagi3
 
WordPress e il vostro blog - 18/19
WordPress e il vostro blog - 18/19WordPress e il vostro blog - 18/19
WordPress e il vostro blog - 18/19Giuseppe Vizzari
 
Corso di Formazione: Redattore di Sito Web Dipartimentale
Corso di Formazione: Redattore di Sito Web DipartimentaleCorso di Formazione: Redattore di Sito Web Dipartimentale
Corso di Formazione: Redattore di Sito Web DipartimentaleUniversity of Padua
 
ODF: l’unico formato standard e aperto per i documenti - Italo Vignoli
ODF: l’unico formato standard e aperto per i documenti - Italo VignoliODF: l’unico formato standard e aperto per i documenti - Italo Vignoli
ODF: l’unico formato standard e aperto per i documenti - Italo VignoliLibreItalia
 

Similar to Sito statico vs Sito Dinamico (20)

Introduzione a Drupal 7 - 14/03/2013
Introduzione a Drupal 7 - 14/03/2013Introduzione a Drupal 7 - 14/03/2013
Introduzione a Drupal 7 - 14/03/2013
 
Guida introduttiva al codice HTML
Guida introduttiva al codice HTMLGuida introduttiva al codice HTML
Guida introduttiva al codice HTML
 
Less is more? OmegaT: vantaggi e svantaggi di un approccio essenziale e open ...
Less is more? OmegaT: vantaggi e svantaggi di un approccio essenziale e open ...Less is more? OmegaT: vantaggi e svantaggi di un approccio essenziale e open ...
Less is more? OmegaT: vantaggi e svantaggi di un approccio essenziale e open ...
 
Drupal - LinuxDay 2010 (Pistoia)
Drupal - LinuxDay 2010 (Pistoia)Drupal - LinuxDay 2010 (Pistoia)
Drupal - LinuxDay 2010 (Pistoia)
 
Drupal - LinuxDay 2010 (Pistoia)
Drupal - LinuxDay 2010 (Pistoia)Drupal - LinuxDay 2010 (Pistoia)
Drupal - LinuxDay 2010 (Pistoia)
 
I linguaggi del web - seconda edizione (1° giornata)
I linguaggi del web - seconda edizione (1° giornata)I linguaggi del web - seconda edizione (1° giornata)
I linguaggi del web - seconda edizione (1° giornata)
 
Intervento osta ccms marathon 2017
Intervento osta ccms marathon 2017Intervento osta ccms marathon 2017
Intervento osta ccms marathon 2017
 
Sistemi - Lezione XIV - Introduzione a HTML
Sistemi - Lezione XIV - Introduzione a HTMLSistemi - Lezione XIV - Introduzione a HTML
Sistemi - Lezione XIV - Introduzione a HTML
 
5 - Introduzione al Web (2/2) - 17/18
5 - Introduzione al Web (2/2) - 17/185 - Introduzione al Web (2/2) - 17/18
5 - Introduzione al Web (2/2) - 17/18
 
Presentazione di LlibreOffice al Linux Day 2015
Presentazione di LlibreOffice al Linux Day 2015 Presentazione di LlibreOffice al Linux Day 2015
Presentazione di LlibreOffice al Linux Day 2015
 
La Comunita traduce Koha by Zeno Tajoli
La Comunita traduce Koha by Zeno TajoliLa Comunita traduce Koha by Zeno Tajoli
La Comunita traduce Koha by Zeno Tajoli
 
Introduzione agli strumenti CAT per STL Formazione
Introduzione agli strumenti CAT per STL FormazioneIntroduzione agli strumenti CAT per STL Formazione
Introduzione agli strumenti CAT per STL Formazione
 
I Linguaggi Del Web (1° Giornata)
I Linguaggi Del Web (1° Giornata)I Linguaggi Del Web (1° Giornata)
I Linguaggi Del Web (1° Giornata)
 
Presentazione di Llibre Office al Linux Day 2014
Presentazione di Llibre Office al Linux Day 2014Presentazione di Llibre Office al Linux Day 2014
Presentazione di Llibre Office al Linux Day 2014
 
Componentistica hardware e software coordinata da smartphone e destinata alla...
Componentistica hardware e software coordinata da smartphone e destinata alla...Componentistica hardware e software coordinata da smartphone e destinata alla...
Componentistica hardware e software coordinata da smartphone e destinata alla...
 
Angular kit e Design system del Paese - Meetup ngRome 30 Gennaio 2023
Angular kit e Design system del Paese - Meetup ngRome 30 Gennaio 2023Angular kit e Design system del Paese - Meetup ngRome 30 Gennaio 2023
Angular kit e Design system del Paese - Meetup ngRome 30 Gennaio 2023
 
WordPress e il vostro blog - 18/19
WordPress e il vostro blog - 18/19WordPress e il vostro blog - 18/19
WordPress e il vostro blog - 18/19
 
Corso di Formazione: Redattore di Sito Web Dipartimentale
Corso di Formazione: Redattore di Sito Web DipartimentaleCorso di Formazione: Redattore di Sito Web Dipartimentale
Corso di Formazione: Redattore di Sito Web Dipartimentale
 
Dns e bind
Dns e bindDns e bind
Dns e bind
 
ODF: l’unico formato standard e aperto per i documenti - Italo Vignoli
ODF: l’unico formato standard e aperto per i documenti - Italo VignoliODF: l’unico formato standard e aperto per i documenti - Italo Vignoli
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
  • 3. Sito statico Obiettivo: il browsing Docenti: V. De Luca, F. Brunetta 3
  • 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
  • 6. Docenti: V. De Luca, F. Brunetta 6
  • 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
  • 11. Docenti: V. De Luca, F. Brunetta 11
  • 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&iacute; questo &egrave; il mio primo testo di prova. Premendo in Cos&iacute; questo &egrave; 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&agrave; di Udine. l'Universit&agrave; 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!!! SGMLXML 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
  • 31. Nel BODY • Tutto il resto  Docenti: V. De Luca, F. Brunetta 31
  • 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
  • 38. Docenti: V. De Luca, F. Brunetta 38
  • 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>
  • 51. 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
  • 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
  • 56. PHP • • • • • PHP Hypertext PreProcessor Linguaggio di scripting interpretato Linguaggio lato server Per la realizzazione di pagine web dinamiche Nato nel 1994 Docenti: V. De Luca, F. Brunetta 56
  • 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