Sito statico vs Sito Dinamico

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


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


5

Perché si dice “statico”?

• Informazioni scritte direttamente in file “html”

• Rimangono immutate…• …fino a quando non modifichiamo a mano

il contenuto del file


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


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


http://indiri.zzo.it/

9

Linguaggi per siti statici

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


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


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


http://www.ietf.org/rfc/rfc1866.txt

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


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


XHTML 1.0 e 1.1

• Riformulazione di HTML 4.01 in chiave XML


HTML 5


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


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


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>



• Esempio di tag semplice - Inserisce un “ritorno a capo” (break)

<br>• Esempio di tag apertura/chiusura (delimita

un paragrafo):<p>

Ciao!</p>



• Spesso i tag sono più complessi e includono degli attributi:

<ISTRUZIONE attributo=“qualcosa”>

<ISTRUZIONE attributo1=“qualcosa”Attributo2=“altro”>testo</ISTRUZIONE>



• Attributi a volte facoltativi, a volte indispensabili!

• Esempio:<img src=“casamia.jpg”>

• Il tag IMG (immagine) senza src (quale immagine?) non serve a nulla



• Il tag “a” è uno dei più importanti• Di apertura/chiusura, inserisce un LINK• Attributo HREF è indispensabile:

<a href=“http://www.uniud.it”>UniUD<a>


HTML classic- Esempio<html><title>Il mio documento</title><body><h1>Il mio documento di prova</h1><p>Cosí questo è il mio primo testo di prova. Premendo in <A href="http://www.uniud.it/">questo punto</A> potete visitare l'Università 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>


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


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


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”


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


http://www.westhost.com/blog/2011/09/23/the-history-of-web-design-infographic/

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

30

Nel HEAD

• Titolo (TITLE)• Meta-tags (meta name=«keywords», ad

esempio) – ovvero informazioni sul documento stesso

• Link ai file di stili (CSS)


31

Nel BODY

• Tutto il resto


32

Pubblicazione di un sito WebTrovare il server giusto


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


Sito statico con elementi dinamici

Obiettivo: l’interattività


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


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


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


39

Approccio client-side - 1

• L’intelligenza risiede sul “browser”• Esistono speciali linguaggi di

programmazione “client-side”• Esempio: “Javascript”


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


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ù


42


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


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>


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


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


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)


Silverlight

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

sito web applicazioni multimediali interattive

• Si propone come alternativa a Flash (Adobe)


48

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

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


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.



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


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!


53


(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


54


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!


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)


PHP

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


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)


Siti dinamici

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

• Un esempio: il Content Management System (CMS)


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


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


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


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!


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


64

CMS – 5 – vantaggi• Facilitata

–la pubblicazione collaborativa / decentrata delle informazioni

–il controllo centralizzato degli aspetti strutturali del sito


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


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


APPROCCIO M

ISTO:

Dinamico se

rver-s

ide e client-

side

•OBIETTIVO: L

E PRESTAZIONI (e

la bell

ezza)


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!


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!


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


Sito statico vs Sito Dinamico

Technology

Transcript of Sito statico vs Sito Dinamico