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

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

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

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

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

9

Linguaggi per siti statici

•HTML varie versioni!•XHTML (xml + html =xhtml)

Docenti: V. De Luca, F. Brunetta

«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

Docenti: V. De Luca, F. Brunetta

Fonte: http://creative-geeks.com/blog/wp-content/uploads/2011/01/HTML5__.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

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

1818

Docenti: V. De Luca, F. Brunetta

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

– Testo “puro” (testo ASCII)

– Misto ad istruzioni Tag

19Docenti: V. De Luca, F. Brunetta

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><title>Il mio documento</title><body><h1>Il mio documento di prova</h1><p>Cos&iacute; questo &egrave; il mio primo testo di prova. Premendo in <A href="http://www.uniud.it/">questo punto</A> potete visitare l'Universit&agrave; di Udine. <br><b>Questo testo viene visualizzato in neretto</b> mentre il testo che segue <i>viene visualizzato in corsivo</i>. <br><br>In questo punto <img src="immagini/disegno.gif"> viene visualizzato un disegno. </P></body> </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!!!

SGMLXML 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/the-history-of-web-design-infographic/

• http://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

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

31

Nel BODY

• Tutto il resto

Docenti: V. De Luca, F. Brunetta

32

Pubblicazione di un sito WebTrovare il server giusto

Docenti: V. De Luca, F. Brunetta

33

Il server • Sito pubblicato su un server

1. Proprio (gestito autonomamente) elasticità2. Ospitato (Hosting condiviso) Costi contenuti3. Virtuale (il server che non c’è ) costo limitato e

elasticità ma anche performance limitate4. Dedicato (Housing) efficienza

Docenti: V. De Luca, F. Brunetta

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

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

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

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

APPROCCIO CLIENT-SIDE - 2

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

www.qualcheserver.com

/doc/datadioggi.htm

Html + JScript

Browser:Interpreta html,

js, visualizza testo

DOCENTI: V. DE LUCA, F. BRUNETTA 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

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

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>

43Docenti: V. De Luca, F. Brunetta

MetodologiaLo 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

44Docenti: V. De Luca, F. Brunetta

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

45Docenti: V. De Luca, F. Brunetta

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)

46Docenti: V. De Luca, F. Brunetta

Silverlight

• Sviluppato dalla Microsoft• Ambiente che permette di includere in un

sito web applicazioni multimediali interattive

• Si propone come alternativa a Flash (Adobe)

47Docenti: V. De Luca, F. Brunetta

48

Approccio server-side - 1• L’intelligenza risiede sul server• Esistono appositi linguaggi di programmazione server-

side• Esempio: PHP, Perl, Python, ASP.NET, ecc

Docenti: V. De Luca, F. Brunetta

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

Docenti: V. De Luca, F. Brunetta 50

Approccio server-side - 4

• Esempio:

Testo html “statico”<html><head><title>Benvenuto</title></head><body><h1> Benvenuto caro amico, oggi è: giovedì 13 luglio 2006, 10:23<h1></body></html>

Testo html con PHP <html><head><title>Benvenuto</title></head><body><h1> Benvenuto caro amico, oggi è: <?phpecho date("l j-m-Y");?><h1></body></html>

APPROCCIO SERVER-SIDE - 4

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

www.qualcheserver.com

/doc/datadioggi.php

Html + PHP

ServerChiama interp.

php, che esegue e emette output

PHP

HTML

testo

DOCENTI: V. DE LUCA, F. BRUNETTA 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

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

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

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

PHP

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

56Docenti: V. De Luca, F. Brunetta

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)

57Docenti: V. De Luca, F. Brunetta

Siti dinamici

• Un’applicazione che consente l’interazione tra l’utente e il server

• Un esempio: il Content Management System (CMS)

58Docenti: V. De Luca, F. Brunetta

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

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

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

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

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

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

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

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

APPROCCIO M

ISTO:

Dinamico se

rver-s

ide e client-

side

•OBIETTIVO: L

E PRESTAZIONI (e

la bell

ezza)

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:– Standard ancora non definito– Supporto dei browser ancora limitato

http://www.html5today.it/tutorial/che-cos-html5

Docenti: V. De Luca, F. Brunetta 70