Siti interattivi e dinamici. in poche pagine

Dimensione: px
Iniziare la visualizzazioe della pagina:

Download "Siti interattivi e dinamici. in poche pagine"

Transcript

1 Siti interattivi e dinamici in poche pagine 1

2 Siti Web interattivi Pagine Web codificate esclusivamente per mezzo dell HTML non permettono alcun tipo di interazione con l utente, se non quella rappresentata dal clic sui link (con relativo caricamento dei file corrispondenti). L utente può eventualmente compilare dei form, ma i dati inseriti non potranno essere elaborati in alcun modo. Si supponga invece di voler controllare che in un certo campo di un form sia effettivamente stato inserito qualcosa, o di voler verificare che questo qualcosa sia un numero, mostrando un messaggio di errore in caso contrario: in una situazione di questo tipo entra in gioco un comportamento interattivo, ossia vengono eseguite certe azioni (viene mostrato un messaggio di errore) solo se si verifica un evento particolare (viene inserito un dato scorretto nel campo del form). Altri esempi di interattività potrebbero essere rappresentati da una pagina che viene mostrata dopo che i dati di un form sono stati inviati al server e il cui contenuto dipende proprio da tali dati, oppure da un immagine che cambia quando il cursore del mouse le passa sopra: anche in questi casi, il verificarsi di determinati eventi provoca corrispondenti effetti. 2

3 Interazione lato client Quando il comportamento interattivo della pagina è definito da codice che viene eseguito sulla macchina dell utente, si parla di interazione lato client. Coi fogli di stile, ad esempio, usando le pseudoclassi A:hover e A:active, è possibile fare in modo che un link cambi di aspetto quando il cursore del mouse gli è sopra o viene cliccato: per quanto semplice, anche questo è un comportamento interattivo. Le applet Java e i controlli ActiveX possono essere progettati per realizzare qualunque comportamento, ed essendo eseguiti in locale sulla macchina dell utente fanno anch essi parte delle tecnologie lato client. Analogamente, Adobe Flash permette non solo di realizzare animazioni vettoriali, ma anche di associare comportamenti interattivi agli elementi grafici (con del codice di programmazione opportuno): i siti realizzati in Flash utilizzano questo principio per creare, ad esempio, i link. Le applet Java, i controlli ActiveX e le animazioni Flash interattive hanno in comune il fatto di essere definiti esternamente al codice HTML (vengono solo caricati); ci sono però tecnologie basate su linguaggi che si integrano con l HTML e vengono interpretati dal browser: la più famosa di queste è JavaScript. 3

4 JavaScript JavaScript (da non confondere con Java) è un linguaggio di scripting che si integra con l HTML e può essere utilizzato per creare comportamenti interattivi nelle pagine Web. Come esempio, la figura seguente mostra il codice HTML e JavaScript che definisce una pagina contenente un form con un campo di input e un bottone; quando l utente clicca sul bottone, se la casella di testo è vuota (non contiene cioè nessun carattere o solo spazi) viene visualizzato un messaggio di errore, altrimenti la stringa inserita viene inviata al server. 4

5 Nell esempio viene definita una funzione JavaScript (posta nella sezione HEAD dentro il tag SCRIPT) che è poi chiamata dentro il form dal codice (sempre JavaScript) che viene eseguito in risposta alla pressione del bottone. onclick è un event handler, ossia un attributo che specifica cosa deve essere fatto quando il bottone viene premuto (in questo caso, deve essere eseguito il codice indicato). Le funzioni JavaScript possono anche essere poste in un file esterno e caricate per mezzo dell attributo src, sempre del tag SCRIPT; in tal modo pagine diverse possono sfruttare le stesse funzioni. Nota: JavaScript è un linguaggio basato sugli oggetti, nel senso che tutti gli elementi che compongono la pagina vengono visti come oggetti legati da relazioni gerarchiche. Dal punto di vista pratico, nel linguaggio tali relazioni vengono esplicitate attraverso una notazione puntata : con riferimento all esempio della figura, document.f.username.value indica il valore del campo il cui nome è username, del form che si chiama f del documento corrente (document). document, f e username sono oggetti, contenuti uno nell altro, che compongono la pagina. Ogni oggetto (e anche le variabili sono ritenute tali) può avere associati degli attributi (cioè delle proprietà) e dei metodi (cioè delle funzioni direttamente legate agli aggetti): nell esempio, length e value sono attributi, mentre charat e submit sono metodi. Oltre agli oggetti predefiniti, l utente può creare oggetti propri, con relativi attributi e metodi. Dal punto di vista sintattico, JavaScript è molto simile a Java (da cui il nome), anche se, essendo un linguaggio di scripting, introduce diverse semplificazioni rispetto ad esso. 5

6 DHTML Il DHTML non è un nuovo HTML, ma semplicemente l unione di HTML, fogli di stile e JavaScript. Attraverso JavaScript è infatti possibile agire dinamicamente sugli stili della pagina e modificarne quindi l aspetto al volo. Ad esempio, il codice mostrato nella figura seguente fa in modo che quando il cursore del mouse sale sopra l immagine il colore di sfondo della pagina cambi da bianco a rosso. Gli event handler onmouseover e onmouseout vengono invocati, rispettivamente, quando il cursore del mouse sale sull immagine e quando esce da essa. Il valore assegnato alla proprietà background dell oggetto style determina il colore di sfondo. Va osservato che JavaScript non serve solo per creare comportamenti interattivi: può infatti agire autonomamente sugli elementi della pagina, senza la necessità dell intervento dell utente. Ad esempio, potrebbe essere usato per temporizzare l apparizione di una sequenza 6

7 di immagini (creando un effetto simile a quello delle GIF animate), oppure per scrivere o leggere cookie (file memorizzati sul client contenenti informazioni di vario tipo). Nota (DOM, linguaggi e cookie): l insieme degli oggetti sui quali è possibile agire attraverso JavaScript, così come gli event handler che si possono usare per questo scopo, non fa parte del linguaggio JavaScript, ma del cosiddetto Document Object Model (DOM), che è specifico dei browser. Ciò, purtroppo, può portare a degli inconvenienti, in quanto alcuni oggetti ed event handler riconosciuti da un browser non lo sono da altri e viceversa Oltre a JavaScript, i browser possono riconoscere anche altri linguaggi, eventualmente per mezzo di appositi plugin. Ad esempio, MS Explorer interpreta anche il linguaggio VBScript, sintatticamente diverso da JavaScript. I cookie sono piccoli file testuali (memorizzati sull hard disk della macchina dell utente per mezzo di codice JavaScript) che di solito sono usati dai siti Web per scopi statistici (e in genere non costituiscono quindi un problema per la sicurezza del client o per la privacy). Ad esempio, possono essere usati per controllare quante volte un utente accede ad un sito, o per memorizzare informazioni relative al navigatore (il suo nome, le sue preferenze, ecc.). 7

8 Interazione lato server Implementazione di siti dinamici Quando si compilano i campi di un form, i dati inseriti vengono di solito inviati al server, dove sono elaborati in qualche modo da un programma o da una pagina speciale indicati come valore dell attributo action del tag FORM. L utente potrebbe quindi ad esempio ricevere una pagina di risposta il cui contenuto non è staticamente definito, ma dipende proprio dai dati che aveva inserito nel modulo. Analogamente, si pensi ai molti siti il cui contenuto proviene da database: anche in questo caso i dati non sono memorizzati in file HTML predefiniti, ma sono generati al volo quando servono (quando devono cioè essere inviati all utente). Comportamenti come quelli descritti fanno parte delle cosiddette interazioni lato server, dato che implicano l intervento attivo del server. In particolare, quando entra in gioco la non staticità del contenuto, generato on demand, si parla di siti dinamici. Le due principali tecnologie per la creazione di interazioni lato server e siti dinamici sono i programmi CGI e gli application server. 8

9 Programmi CGI La tecnologia CGI (Common Gateway Interface) permette di interfacciare macchine client con macchine server, per mezzo di programmi CGI. Un programma CGI viene eseguito sul server (dove è memorizzato in una directory particolare, che in genere si chiama cgi-bin) e può essere scritto utilizzando qualunque linguaggio, sia interpretato che compilato. Solitamente, sono preferiti linguaggi di scripting interpretati, più semplici da gestire, quali il Perl e il Tcl. L utilizzo tipico dei programmi CGI è l elaborazione dei dati inseriti nei form (ad esempio la loro memorizzazione in file o database) e la generazione di contenuto dinamico, che viene inviato al client e visualizzato dal browser. Il codice HTML seguente, ad esempio, inizia la definizione di un form i cui dati saranno inviati al programma Tcl elabora.tcl (utilizzando il metodo get): <FORM name= f method= get action= /cgi-bin/elabora.tcl > Basandosi completamente su codice di programmazione, la tecnologia CGI può risultare piuttosto complessa per chi non ha specifiche competenze informatiche; ecco perché le viene spesso preferito l approccio degli application server. 9

10 Application server La tecnologia degli application server permette di elaborare dati ricevuti dai form e di generare pagine dinamiche, un po come avviene con i programmi CGI. Un application server è software aggiuntivo che viene installato su una macchina server (in genere quella che ospita il Web server) ed è in grado di interpretare ed eseguire codice di programmazione scritto in un linguaggio specifico; gli application server più diffusi sono ASP e PHP. A differenza dei programmi CGI, il codice di programmazione degli application server può essere integrato direttamente nell HTML, cosa che risulta particolarmente comoda per la generazione di pagine di risposta all utente. Alcune funzionalità sono inoltre più semplici da implementare, come l interazione con i database. Il seguente esempio mostra l invio dei dati di un form a una pagina PHP. I dati del form della schermata superiore vengono inviati al file result.php, che, dopo avere eseguito il codice PHP in esso contenuto (in rosso), genera la risposta mostrata nella schermata inferiore. È da notare che la pagina ricevuta dal client non contiene codice PHP, ma solo codice HTML (il risultato dell elaborazione sul server). 10

11 Nota: ASP è tipicamente diffuso sui server Windows, mentre il PHP è più comune sui server Linux e Unix (anche se se ne esistono versioni per Windows). Altri application server relativamente diffusi sono JSP (basato su Java) e ColdFusion; pur essendo il più semplice dei quattro (adatto anche ai non informatici ), quest ultimo è l unico a non essere gratuito. 11

Tecnologie per il Web. Il web: Architettura HTTP HTTP. SSL: Secure Socket Layer

Tecnologie per il Web. Il web: Architettura HTTP HTTP. SSL: Secure Socket Layer Tecnologie per il Web Il web: architettura e tecnologie principali Una analisi delle principali tecnologie per il web Tecnologie di base http, ssl, browser, server, firewall e proxy Tecnologie lato client

Dettagli

Metodologie Informatiche applicate al Turismo

Metodologie Informatiche applicate al Turismo Metodologie Informatiche applicate al Turismo 11. Realizzare Siti Dinamici e Applicazioni Web Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it

Dettagli

DATABASE IN RETE E PROGRAMMAZIONE LATO SERVER

DATABASE IN RETE E PROGRAMMAZIONE LATO SERVER DATABASE IN RETE E PROGRAMMAZIONE LATO SERVER L architettura CLIENT SERVER è l architettura standard dei sistemi di rete, dove i computer detti SERVER forniscono servizi, e computer detti CLIENT, richiedono

Dettagli

Esploriamo Javascript! 1 di Ivan Venuti

Esploriamo Javascript! 1 di Ivan Venuti Esploriamo Javascript! 1 di Ivan Venuti L Html è stato pensato (e creato) per presentare contenuti statici che, visualizzati da utenti diversi, diano sempre lo stesso risultato. Per sopperire a questa

Dettagli

Esercizi di JavaScript

Esercizi di JavaScript Esercizi di JavaScript JavaScript JavaScript é un linguaggio di programmazione interpretato e leggero, creato dalla Netscape. E' presente a patire da Netscape 2 in tutti i browser ed é dunque il linguaggio

Dettagli

Corso basi di dati Introduzione alle ASP

Corso basi di dati Introduzione alle ASP Corso basi di dati Introduzione alle ASP Gianluca Di Tomassi Email: ditomass@dia.uniroma3.it Università di Roma Tre Web statico e Web interattivo In principio il Web era una semplice collezione di pagine

Dettagli

Tipi fondamentali di documenti web

Tipi fondamentali di documenti web Tipi fondamentali di documenti web Statici. File associati al web server il cui contenuto non cambia. Tutte le richieste di accesso conducano alla visualizzazione della stessa informazione. Dinamici. Non

Dettagli

Flavio De Paoli depaoli@disco.unimib.it

Flavio De Paoli depaoli@disco.unimib.it Flavio De Paoli depaoli@disco.unimib.it 1 Il web come architettura di riferimento Architettura di una applicazione web Tecnologie lato server: Script (PHP, Pyton, Perl), Servlet/JSP, ASP Tecnologie lato

Dettagli

Esercitazione 8. Basi di dati e web

Esercitazione 8. Basi di dati e web Esercitazione 8 Basi di dati e web Rev. 1 Basi di dati - prof. Silvio Salza - a.a. 2014-2015 E8-1 Basi di dati e web Una modalità tipica di accesso alle basi di dati è tramite interfacce web Esiste una

Dettagli

Corso di Informatica Modulo T3 B1 Programmazione web

Corso di Informatica Modulo T3 B1 Programmazione web Corso di Informatica Modulo T3 B1 Programmazione web 1 Prerequisiti Architettura client/server Elementi del linguaggio HTML web server SQL server Concetti generali sulle basi di dati 2 1 Introduzione Lo

Dettagli

b) Dinamicità delle pagine e interattività d) Separazione del contenuto dalla forma di visualizzazione

b) Dinamicità delle pagine e interattività d) Separazione del contenuto dalla forma di visualizzazione Evoluzione del Web Direzioni di sviluppo del web a) Multimedialità b) Dinamicità delle pagine e interattività c) Accessibilità d) Separazione del contenuto dalla forma di visualizzazione e) Web semantico

Dettagli

Componenti Web: client-side e server-side

Componenti Web: client-side e server-side Componenti Web: client-side e server-side side Attività di applicazioni web Applicazioni web: un insieme di componenti che interagiscono attraverso una rete (geografica) Sono applicazioni distribuite logicamente

Dettagli

Architetture Web. parte 1. Programmazione in Ambienti Distribuiti A.A. 2003-04

Architetture Web. parte 1. Programmazione in Ambienti Distribuiti A.A. 2003-04 Architetture Web parte 1 Programmazione in Ambienti Distribuiti A.A. 2003-04 Architetture Web (1) Modello a tre livelli in cui le interazioni tra livello presentazione e livello applicazione sono mediate

Dettagli

venerdì 31 gennaio 2014 Programmazione Web

venerdì 31 gennaio 2014 Programmazione Web Programmazione Web WWW: storia Il World Wide Web (WWW) nasce tra il 1989 e il 1991 come progetto del CERN di Ginevra affidato a un gruppo di ricercatori informatici tra i quali Tim Berners- Lee e Robert

Dettagli

L'elaborazione dei dati su client Linguaggi di script

L'elaborazione dei dati su client Linguaggi di script Pagina 1 di 5 L'elaborazione dei dati su client Linguaggi di script Attualmente si tende a scaricare sul computer dell'utente piccoli programmi (Javascript o applet Java) che svolgano parte dell'elaborazione

Dettagli

Corso di Informatica. Prerequisiti. Modulo T3 B3 Programmazione lato server. Architettura client/server Conoscenze generali sui database

Corso di Informatica. Prerequisiti. Modulo T3 B3 Programmazione lato server. Architettura client/server Conoscenze generali sui database Corso di Informatica Modulo T3 B3 Programmazione lato server 1 Prerequisiti Architettura client/server Conoscenze generali sui database 2 1 Introduzione Lo scopo di questa Unità è descrivere gli strumenti

Dettagli

APPENDICE B Le Active Server Page

APPENDICE B Le Active Server Page APPENDICE B Le Active Server Page B.1 Introduzione ad ASP La programmazione web è nata con la Common Gateway Interface. L interfaccia CGI tuttavia presenta dei limiti: ad esempio anche per semplici elaborazioni

Dettagli

Tratte da (18. TECNICHE DI ACCESSO AI DATABASE IN AMBIENTE INTERNET)

Tratte da (18. TECNICHE DI ACCESSO AI DATABASE IN AMBIENTE INTERNET) Tratte da (18. TECNICHE DI ACCESSO AI DATABASE IN AMBIENTE INTERNET) Ipotesi di partenza: concetti di base del networking Le ipotesi di partenza indispensabili per poter parlare di tecniche di accesso

Dettagli

Dott.ssa Maria Vittoria Avolio. Dott.ssa Adriana Pietramala

Dott.ssa Maria Vittoria Avolio. Dott.ssa Adriana Pietramala Corso di Informatica Laurea Triennale - Comunicazione&Dams Dott.ssa Maria Vittoria Avolio avoliomv@unical.it Dott.ssa Adriana Pietramala a.pietramala@unical.it Riferimenti Manuale PHP http://www.php.net/download-docs.php

Dettagli

19. LA PROGRAMMAZIONE LATO SERVER

19. LA PROGRAMMAZIONE LATO SERVER 19. LA PROGRAMMAZIONE LATO SERVER Introduciamo uno pseudocodice lato server che chiameremo Pserv che utilizzeremo come al solito per introdurre le problematiche da affrontare, indipendentemente dagli specifici

Dettagli

L aspetto dei file HTML

L aspetto dei file HTML L aspetto dei file HTML Le pagine HTML contengono due tipi di oggetti: il testo del documento i TAG HTML Il documento si presenta come una successione di elementi (annidati) del tipo Testo influenzato

Dettagli

Seminari Eucip, Esercizio e Supporto di Sistemi Informativi

Seminari Eucip, Esercizio e Supporto di Sistemi Informativi Seminari Eucip, Esercizio e Supporto di Sistemi Informativi Servizi di Dipartimento di Informtica e Sistemistica Università di Roma La Sapienza Sicurezza su Sicurezza della La Globale La rete è inerentemente

Dettagli

JAVASCRIPT. Tale file è associato alla pagina web mediante il tag